Configuración del grid

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 35 de 43.

Desafío

Fácil

En esta serie, crearemos el diseño de un sitio web adaptable usando CSS Grid.

Primero, echemos un vistazo a lo que vamos a crear:

Un sitio web con:

Un encabezado
Una barra lateral
Un área de contenido principal
Un pie de página

Así se verá cuando terminemos:

¡Comencemos creando la estructura general de cuadrícula para el sitio web! Tus tareas:

Convierte .container en un diseño de cuadrícula.
Crea una estructura de 3 columnas.
Define tres filas: una para el encabezado, una para el contenido principal y una para el pie de página.
Usa nombres de áreas de cuadrícula para organizar el diseño de esta manera:"header header header" "hero featured featured" “footer footer footer”

5. Añade un poco de espacio entre los elementos y alrededor del contenedor para que tenga un aspecto limpio.

6. Asigna el nombre correcto de grid-area a cada sección usando selectores de clase: .header, .hero, .featured y .footer

Pruébalo tú mismo

<html>
<head>
  <title>FlavorFiesta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">FlavorFiesta</header>
    
    <section class="hero">
      <h1>Delicious Recipes & Culinary Adventures</h1>
      <p>Your daily dose of flavor, fun, and food!</p>
    </section>
    
    <section class="featured">
      <h2>Featured Recipes</h2>
      <div class="recipe-grid">
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
          <p> Creamy Spinach Pasta</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
          <p> Classic Beef Burger</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
          <p> Quinoa & Avocado Salad</p>
        </div>
      </div>
    </section>   
    <footer class="footer">
      <p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
    </footer>
  </div>
</body>
</html>