Phần đầu trang

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 36 trên 43.

Thử thách

Dễ

Nhiệm vụ của bạn là định kiểu cho phần .header để phần này nổi bật ở đầu trang.

Thêm màu nền tối và chữ màu trắng để tạo độ tương phản.
Căn giữa văn bản trong phần đầu trang.
Thêm khoảng đệm để nội dung có không gian.
Dùng cỡ chữ lớn để làm tiêu đề trang nổi bật.
Bo tròn các góc và thêm một lề nhỏ ở phía dưới để tách phần này khỏi các phần khác.

Tự làm thử

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