Thêm các chi tiết hoàn thiện

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

Thử thách

Dễ

Trong bài học này, bạn sẽ thêm hiệu ứng di chuột đơn giản cho các thẻ để chúng trông tương tác hơn và chỉn chu hơn.

Thử thách CSS của bạn là làm cho các thẻ .feature phản hồi khi bạn di chuột qua:

Dùng :hover để nâng thẻ lên một chút bằng transform: translateY(-5px).
Thêm box-shadow cho thẻ để tạo hiệu ứng nổi.
Dùng transition để tạo hiệu ứng di chuột mượt mà, giá trị cần là matrix(1, 0, 0, 1, 0, -5).

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>