تخطيط البطاقة

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

التحدي

سهل

في هذا الدرس، ستقوم بتنسيق البطاقات الفردية عن طريق إضافة الخلفيات، والحدود، والحشوة (padding)، وتعديل أحجام الأيقونات والعناوين. ستمنح البطاقات أيضاً مظهراً مصقولاً بزوايا مستديرة وتباعد مناسب.

تحدي CSS الخاص بك:

قم بتنسيق فئة .feature لمنح كل بطاقة خلفية بيضاء، وحشوة (padding)، وزوايا مستديرة.
قم بوضع حدود (border) وضبط عرض كل بطاقة.
قم بتنسيق .icon داخل فئة .feature عن طريق تغيير حجم الخط وإضافة هامش (margin) في الأسفل.
قم بتنسيق وسم h3 داخل .feature لتغيير لون النص وإضافة تباعد أسفل العنوان.

جرّب بنفسك

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