Header Bölümünü Stilize Et

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 26 / 43.

Görev

Kolay

Bu mini projede, yalnızca CSS kullanarak eğlenceli bir hobiler açılış sayfası oluşturacaksınız.

HTML sizin için zaten yazıldı. Göreviniz, tıpkı gerçek bir ön uç geliştiricisi gibi onu adım adım stilize etmektir. Bu, gerçek dünya düzenlerini, butonları ve stil ipuçlarını pratik yapmak için harika bir yoldur!

İşte sonunda inşa edeceğiniz şeyin bir önizlemesi:

İlk görevde, sayfanın üst kısmını — header (aynı zamanda "hero" bölümü olarak da adlandırılır) stilize ederek başlayacağız. Şu anda, sayfanın en üstünde duran düz bir metinden ibaret. Amacınız, onu sayfa için temiz ve göz alıcı bir girişe dönüştürmektir.

CSS Göreviniz:

Varsayılan boşlukları kaldırın: body üzerinde margin: 0 ayarlayın ve ona bir arka plan rengi ekleyin.
.hero bölümünü bir arka plan rengi (rgb(30, 207, 104)) ve 50px padding ile stilize edin.
Her şeyi ortalamak için .hero üzerinde Flexbox kullanın:
1. display: flex
2. flex-direction: column
3. align-items: center
4. justify-content: center
5. text-align: center
Metni stilize etmek için .hero h1 ve .hero p kullanın.

Üst bölümün temiz ve göz alıcı göründüğünden emin olun.

Kendin dene

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