تخطيط القسم

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

التحدي

سهل

سنُنسّق بطاقات الهوايات لتبدو مرتبة وفي المنتصف باستخدام Flexbox. كما ستنسّق عنوان القسم ليبدو واضحًا ومتباعدًا بشكل جيد.

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

نسّق قسم .features باستخدام بعض المساحة الداخلية ونصّ في المنتصف.
نسّق .section-title ليبرز: غيّر حجم font واللون، وأضف مسافة أسفله.
استخدم Flexbox على حاوية .cards لترتيب البطاقات في صف. تأكّد من التفافها عند الحاجة ووجود بعض المساحة بينها.

جرّب بنفسك

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