تنسيق قسم Header

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

التحدي

سهل

في هذا المشروع المصغّر، ستضفي الحيوية على صفحة هبوط لنادٍ للهوايات ممتعة: باستخدام CSS فقط.

لقد كُتب HTML مسبقًا من أجلك. مهمتك هي تنسيقه خطوة بخطوة، تمامًا كما يفعل مطوّر الواجهة الأمامية الحقيقي. إنها طريقة رائعة للتدرّب على التخطيط الواقعي، والأزرار، وحيل التنسيق!

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

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

تحدّي CSS:

أزل المسافات الافتراضية: عيّن margin: 0 على body وأضف لون خلفية إليه.
نسّق قسم .hero باستخدام لون الخلفية (rgb(30, 207, 104)) وحشوة بقيمة 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>