23 lines (17 loc) · 1.12 KB

GathSession Header-Hero

Este proyecto consiste en la maquetación de un Header y una sección Hero basándose en un diseño de referencia, utilizando HTML5 semántico y CSS3.

📂 Organización del Código

1. Header (Barra de Navegación)

Contenedor principal utilizando Flexbox.
justify-content: space-between para separar el logo (izquierda) del menú (derecha).

2. Hero Section (Cuerpo Principal)

Layout principal construido con CSS Grid de 2 columnas iguales (1fr 1fr).
- Columna Izquierda (Texto): Contiene el título H1, descripción, botones de llamada a la acción (CTA) y lista de features.
- Columna Derecha (Imágenes): Contenedor relativo para la composición visual.

3. Composición de Imágenes

Grid Interno: Las imágenes de las personas están organizadas en un grid de 2x3.
Formas: Se utiliza border-radius específico en cada esquina para lograr las formas orgánicas del diseño.
Fondo: Las elipses decorativas están colocadas con position: absolute detrás de las imágenes.

🛠️ Tecnologías

HTML5 Semántico
CSS3 (Variables, Flexbox, Grid)