Bố cục phần

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

Thử thách

Dễ

Mình sẽ dùng Flexbox để các thẻ câu lạc bộ trông gọn gàng và nằm chính giữa. Bạn cũng sẽ tạo kiểu cho tiêu đề phần để tiêu đề rõ ràng và có khoảng cách hợp lý.

Thử thách CSS của bạn:

Tạo khoảng đệm cho phần .features và căn giữa văn bản.
Tạo kiểu cho .section-title để tiêu đề nổi bật hơn: thay đổi cỡ chữ, màu sắc và thêm khoảng trống bên dưới.
Dùng Flexbox cho vùng chứa .cards để xếp các thẻ thành một hàng. Đảm bảo các thẻ tự xuống hàng khi cần và có khoảng cách giữa chúng.

Tự làm thử

<html>
<head>
  <title>Hobby Club Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    
  <header class="hero">
      <div class="container">
        <h1>Welcome to Hobby Club</h1>
        <p>Find your passion. Join a community. Grow your skills.</p>
        <a href="#" class="btn">Get Started</a>
      </div>
  </header>

  <section class="features">
    <h2 class="section-title">Popular Clubs</h2>
    <div class="cards">
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Android_Emoji_1f4f7_red.svg" width="20px"></div>
        <h3>Photography</h3>
        <p>Capture the moment and share your perspective.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Emoji_u1f3a8.svg" width="20px"></div>
        <h3>Art & Design</h3>
        <p>Draw, paint, and bring your creative ideas to life.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Emoji_u1f3ae.svg" width="20px"></div>
        <h3>Gaming</h3>
        <p>Connect with fellow gamers and play your favorite titles.</p>
      </div>
    </div>
  </section>

</body>
</html>