Adjunto código HTML y CSS que implementa los cinco pasos descritos para recrear un diseño de Figma.

Código HTML

Eleve su negocio digital a otro nivel con un Front-end de calidad.

¡Hola! Soy Ana García, desarrolladora Front-end con especialización en React, HTML y CSS. Ayudo a pequeñas empresas y diseñadores a crear e-commerce y landing pages con interfaces web atractivas y funcionales. ¿Hablamos?

Código CSS
Este archivo de estilos (style.css) aplica los cambios necesarios para que el diseño se parezca a lo que se ve en Figma. Incluye la importación de fuentes, la configuración de Flexbox para el espaciado, y los ajustes de tamaño para el texto y el contenedor.

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

body {
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}

.presentacion {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10%;
}

.presentacion__contenido {
width: 615px; /* Valor de ejemplo, extraído del diseño de Figma */
display: flex;
flex-direction: column;
gap: 40px;
}

.presentacion__contenido__titulo {
font-size: 36px; /* Valor de ejemplo, extraído de Figma */
font-family: 'Krona One', sans-serif;
}

.presentacion__contenido__texto {
font-size: 24px; /* Valor de ejemplo, extraído de Figma */
font-family: 'Montserrat', sans-serif;
}