Menu
CoddyTech

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

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

challenge icon

التحدي

سهل

في هذا الدرس، ستضيف تأثير تحويم بسيطًا إلى البطاقات لتبدو أكثر تفاعلية وصقلًا.

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

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

جرّب بنفسك

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

جميع دروس إتقان CSS

تدرّب بنفسك: Playground لـ Web