Kart Düzeni

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

Görev

Kolay

Bu derste, arka planlar, kenarlıklar, iç boşluklar ekleyerek ve simge ile başlık boyutlarını ayarlayarak tekil kartları stillendireceksiniz. Ayrıca kartlara yuvarlatılmış köşeler ve boşluklar ekleyerek onlara şık bir görünüm kazandıracaksınız.

CSS Göreviniz:

Her karta beyaz bir arka plan, iç boşluk ve yuvarlatılmış köşeler kazandırmak için .feature sınıfını stillendirin.
Bir kenarlık belirleyin ve her kartın genişliğini ayarlayın.
Yazı tipi boyutunu değiştirerek ve alt kısma kenar boşluğu ekleyerek .feature sınıfı içindeki .icon öğesini stillendirin.
Metin rengini değiştirmek ve başlığın altına boşluk eklemek için .feature içindeki h3 etiketini stillendirin.

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>