Phần nội dung chính

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

Thử thách

Dễ

Hãy tạo điểm nhấn cho các phần chính của trang web!

Tạo kiểu cho phần .hero:
1. Dùng nền trắng và thêm khoảng đệm rộng rãi.
2. Thêm các góc bo tròn và bóng hộp nhẹ để giao diện trông gọn gàng, nổi bật.
Tạo kiểu cho phần .featured:
- Dùng nền tối và chữ trắng.
- Thêm khoảng đệm bên trong và bo tròn các góc nhẹ.

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>