Bölüm Düzeni

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 28 / 43.

Görev

Kolay

Flexbox kullanarak hobi kartlarının düzenli ve ortalanmış görünmesini sağlayacağız. Ayrıca bölüm başlığını net ve aralıklı görünecek şekilde biçimlendireceksin.

CSS Görevin:

.features bölümüne biraz iç boşluk ve ortalanmış metin stili uygula.
.section-title öğesini öne çıkacak şekilde biçimlendir: yazı tipi boyutunu ve rengini değiştir, altına boşluk ekle.
.cards kapsayıcısında kartları bir satırda hizalamak için Flexbox kullan. Gerektiğinde alt satıra geçtiklerinden ve aralarında biraz boşluk bulunduğundan emin ol.

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>