إضافة اللمسات النهائية

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 30 من 43.

التحدي

سهل

في هذا الدرس، ستضيف تأثير تمرير بسيط (hover effect) إلى البطاقات لجعلها تبدو أكثر تفاعلية ومصقولة.

تحدي CSS الخاص بك هو جعل بطاقات .feature تستجيب عند التمرير فوقها:

استخدم :hover لرفع البطاقة قليلاً باستخدام transform: translateY(-5px).
أضف box-shadow للبطاقة لإنشاء تأثير عائم.
قم بتطبيق transition لتحريك تأثير التمرير بسلاسة، يجب أن تكون القيمة matrix(1, 0, 0, 1, 0, -5).

جرّب بنفسك

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