Configurando o grid

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

Desafio

Fácil

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

Primeiro, vamos ver o que criaremos:

Um site com:

Um cabeçalho
Uma barra lateral
Uma área de conteúdo principal
Um rodapé

Veja como ficará quando terminarmos:

Vamos começar criando a estrutura geral de grid para o site! Suas tarefas:

Transforme o .container em um layout de 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 do grid para organizar o layout desta forma:"header header header" "hero featured featured" “footer footer footer”

5. Adicione um pouco de espaçamento entre os itens e ao redor do contêiner para que ele fique organizado.

6. Atribua o nome correto de grid-area a 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>