تنسيق قسم Header

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

التحدي

سهل

في هذا المشروع الصغير، ستعمل على إحياء صفحة هبوط للهوايات ممتعة — باستخدام CSS فقط.

تمت كتابة HTML بالفعل من أجلك. مهمتك هي تنسيقها خطوة بخطوة، تماماً مثل مطور واجهات أمامية حقيقي. إنها طريقة رائعة لممارسة التخطيط (layout)، الأزرار، وحيل التنسيق في العالم الحقيقي!

إليك معاينة لما ستقوم ببنائه في النهاية:

في التحدي الأول، سنبدأ بتنسيق الجزء العلوي من الصفحة — الـ header (والذي يسمى أيضاً قسم "hero"). في الوقت الحالي، هو مجرد نص عادي موجود في الأعلى. هدفك هو تحويله إلى مقدمة نظيفة وجذابة للصفحة.

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

قم بإزالة المسافات الافتراضية: قم بتعيين margin: 0 على body وأضف لون خلفية له.
قم بتنسيق قسم .hero بلون خلفية (rgb(30, 207, 104)) وحشوة (padding) بمقدار 50px.
استخدم Flexbox على .hero لتوسيط كل شيء:
1. display: flex
2. flex-direction: column
3. align-items: center
4. justify-content: center
5. text-align: center
استخدم .hero h1 و .hero p لتنسيق النص.

تأكد من أن القسم العلوي يبدو نظيفاً وجذاباً.

جرّب بنفسك

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