Bố cục thẻ

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

Thử thách

Dễ

Trong bài học này, bạn sẽ tạo kiểu cho từng thẻ bằng cách thêm màu nền, đường viền, phần đệm và điều chỉnh kích thước biểu tượng cùng tiêu đề. Bạn cũng sẽ giúp các thẻ trông chỉn chu hơn với các góc bo tròn và khoảng cách hợp lý.

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

Tạo kiểu cho lớp .feature để mỗi thẻ có nền trắng, phần đệm và các góc bo tròn.
Đặt đường viền và điều chỉnh chiều rộng của mỗi thẻ.
Tạo kiểu cho .icon bên trong lớp .feature bằng cách thay đổi kích thước phông chữ và thêm lề phía dưới.
Tạo kiểu cho thẻ h3 bên trong .feature để đổi màu chữ và thêm khoảng cách bên dưới tiêu đề.

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>