Bölüm Düzeni

Coddy'nin HTML Journey'sinin CSS Mastery 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 iyi boşluklandırılmış görünecek şekilde stilize edeceksiniz.

CSS Göreviniz:

.features bölümünü biraz dolgu (padding) ve ortalanmış metin ile stilize edin.
.section-title öğesini öne çıkacak şekilde stilize edin — yazı tipi boyutunu, rengini değiştirin ve altına boşluk ekleyin.
Kartları bir satırda dizmek için .cards kapsayıcısında Flexbox kullanın. Gerektiğinde alt satıra geçtiklerinden (wrap) ve aralarında boşluk olduğundan 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>