עיצוב אזור הכותרת

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 26 מתוך 43.

אתגר

קל

במיני־פרויקט הזה תהפכו דף נחיתה לתחביבים מהנה למציאות: באמצעות CSS בלבד.

ה־HTML כבר נכתב עבורכם. המשימה שלכם היא לעצב אותו שלב אחר שלב, ממש כמו מפתחי חזית אמיתיים. זו דרך נהדרת לתרגל פריסות, כפתורים וטריקים של עיצוב מהעולם האמיתי!

הנה תצוגה מקדימה של מה שתבנו בסוף:

באתגר הראשון נתחיל בעיצוב החלק העליון של הדף: הכותרת העליונה (שנקראת גם מקטע "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>