Configurando o grid

Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 35 de 43.

Desafio

Fácil

Nesta série, construiremos um layout de site responsivo usando CSS Grid.

Primeiro, vamos dar uma olhada no que criaremos:

Um site com:

Um cabeçalho (header)
Uma barra lateral (sidebar)
Uma área de conteúdo principal
Um rodapé (footer)

Aqui está como ele ficará quando terminarmos:

Vamos começar criando a estrutura de grade geral para o site! Suas Tarefas:

Transforme o .container em um layout de grade (grid).
Crie uma estrutura de 3 colunas.
Defina três linhas: uma para o cabeçalho, uma para o conteúdo principal e uma para o rodapé.
Use nomes de áreas de grade para organizar o layout desta forma: "header header header" "hero featured featured" “footer footer footer”

5. Adicione algum espaçamento entre os itens e ao redor do contêiner para deixá-lo com um visual limpo.

6. Atribua o nome de grid-area correto para cada seção usando seletores de classe: .header, .hero, .featured, e .footer

Experimente você mesmo

<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>