Ejercicio de programación con CSS: Proyecto CSS Landing page simple

Configura la estructura del proyecto Crea los archivos necesarios: index.html para la estructura, styles.css para los estilos y una carpeta images para las imágenes que utilizarás. Enlaza el archivo CSS al HTML y establece el viewport para dispositivos móviles.

Diseña la estructura HTML base Crea la estructura HTML semántica con las siguientes secciones: header (con nav), hero, características, testimonios, formulario de contacto y footer. Asegúrate de usar etiquetas semánticas como <header>, <section>, <footer>, etc.

Implementa las variables CSS y estilos base Define variables CSS para los colores principales, secundarios, fuentes y espaciados. Establece los estilos base para el documento como box-sizing, fuentes, reset de márgenes y rellenos, etc. Implementa también los estilos para el body y contenedor principal.

Desarrolla la barra de navegación Crea una barra de navegación fija en la parte superior que permanezca visible al hacer scroll. Debe contener el logo (puede ser texto) y enlaces a las diferentes secciones de la página. Asegúrate de que sea responsive y se transforme en un menú hamburguesa en dispositivos móviles.

Diseña la sección hero Implementa una sección hero atractiva con una imagen de fondo, un título llamativo, un subtítulo y un botón de llamada a la acción. Utiliza posicionamiento para superponer el texto sobre la imagen y asegúrate de que el texto sea legible.

Crea la sección de características con Grid Desarrolla una sección que muestre al menos 3-4 características del producto utilizando CSS Grid. Cada característica debe incluir un icono o imagen, un título y una breve descripción. La disposición debe cambiar según el tamaño de la pantalla.

Implementa la sección de testimonios con Flexbox Diseña una sección de testimonios utilizando Flexbox para organizar al menos 3 tarjetas de testimonios. Cada tarjeta debe contener una foto del cliente (puede ser un placeholder), una cita testimonial y el nombre del cliente.

Desarrolla el formulario de contacto Crea un formulario de contacto estilizado con campos para nombre, email, asunto y mensaje. Personaliza los estilos de los inputs, labels y el botón de envío. Implementa estados hover y focus para mejorar la interactividad.

Diseña el footer Implementa un footer con enlaces a redes sociales, información de contacto, enlaces a páginas adicionales y un aviso de copyright. Organiza estos elementos de forma responsive utilizando Flexbox o Grid.

Finaliza con media queries y animaciones Implementa media queries para asegurar que la página sea responsive en todos los dispositivos. Añade al menos una animación o transición CSS (por ejemplo, en botones, en el despliegue del menú móvil o al hacer hover sobre elementos).