Proyecto CSS: Rescate de la Misión Cosmos
El desarrollador anterior ha dejado el código a medias.
La web de la agencia de turismo espacial tiene la estructura rota, no carga los estilos y tiene graves problemas de visualización. Tu trabajo es arreglarlo.
A) Reparación de HTML (Estructura y Semántica):
-
Conexión: El diseño no se carga. Vincula correctamente el archivo CSS.
-
Encabezado: Convierte el
div class="cabecera-sitio"en un elemento semántico y envuelve la lista de enlaces en una etiqueta semántica. Repara los enlaces del menú -
Botón Faltante: En la sección
.banner-principal, añade el botón de compra que falta. Debe ser un enlace con el texto "Reservar Vuelo" y la clasebtn-accion. -
Título de Sección: Añade un título de nivel 2 dentro de la sección
.destinos(antes de las tarjetas) con el texto "Nuestros Destinos". -
Footer: Crea el pie de página semántico al final del cuerpo con tu nombre y el año.
-
Sección Naves: Completa esta sección con naves espaciales.
B) Reparación de CSS (Diseño y Bugs):
6. Menú Horizontal: Modifica .menu-principal para que los enlaces se muestren en una sola fila horizontal (Usa Flexbox).
7. Contraste: El título principal no se lee porque es negro (#000000). Cámbialo a blanco (#ffffff).
8. Grid de Productos: Las tarjetas aparecen apiladas verticalmente. Cambia .contenedor-tarjetas para que use display: grid con 3 columnas iguales.
9. Imágenes Deformes: Las fotos de los planetas están aplastadas (fill). Cambia la propiedad adecuada para que recorten (cover) sin perder proporción.
10. Hover: Añade una regla CSS para que el botón .btn-accion cambie de color de fondo al pasar el ratón por encima.
11. Dale un formato a tu gusto en cuanto a colores, márgenes y fondos.
- 31 de marzo de 2026, 15:13