Tambahkan Sentuhan Akhir

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

Tantangan

Mudah

Dalam pelajaran ini, kamu akan menambahkan efek hover sederhana pada kartu agar terasa lebih interaktif dan rapi.

Tantangan CSS-mu adalah membuat kartu .feature merespons saat diarahkan:

Gunakan :hover untuk sedikit mengangkat kartu dengan transform: translateY(-5px).
Tambahkan box-shadow pada kartu untuk menciptakan efek melayang.
Terapkan transition agar animasi hover berlangsung mulus, nilainya harus matrix(1, 0, 0, 1, 0, -5).

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>