Tata Letak Kartu

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

Tantangan

Mudah

Dalam pelajaran ini, kamu akan menata kartu satu per satu dengan menambahkan latar belakang, border, padding, serta menyesuaikan ukuran ikon dan judul. Kamu juga akan membuat kartu terlihat rapi dengan sudut membulat dan jarak.

Tantangan CSS-mu:

Atur style class .feature agar setiap kartu memiliki latar belakang putih, padding, dan sudut membulat.
Atur border dan sesuaikan lebar setiap kartu.
Atur style .icon di dalam class .feature dengan mengubah ukuran font dan menambahkan margin di bagian bawah.
Atur style tag h3 di dalam .feature untuk mengubah warna teks dan menambahkan jarak di bawah judul.

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>