Tata Letak Bagian

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 28 dari 43.

Tantangan

Mudah

Kita akan membuat kartu hobi terlihat rapi dan berada di tengah dengan menggunakan Flexbox. Kamu juga akan mengatur gaya judul bagian agar terlihat jelas dan memiliki jarak yang baik.

Tantangan CSS-mu:

Atur gaya bagian .features dengan padding dan teks rata tengah.
Atur gaya .section-title agar lebih menonjol: ubah ukuran font, warna, dan tambahkan jarak di bawahnya.
Gunakan Flexbox pada kontainer .cards untuk menyusun kartu dalam satu baris. Pastikan kartu berpindah ke baris berikutnya jika diperlukan dan memiliki jarak satu sama lain.

Coba sendiri

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