تخطيط القسم

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

التحدي

سهل

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

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

قم بتنسيق قسم .features ببعض الحشوة (padding) ونص متمركز.
قم بتنسيق .section-title لجعله بارزاً — قم بتغيير حجم الخط، واللون، وأضف مسافة تحته.
استخدم Flexbox على حاوية .cards لصف البطاقات في سطر واحد. تأكد من أنها تلتف (wrap) إذا لزم الأمر ووجود مسافة بينها.

جرّب بنفسك

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