Kart Düzeni

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

Görev

Kolay

Bu derste arka planlar, kenarlıklar ve dolgu ekleyerek, ayrıca simge ve başlık boyutlarını ayarlayarak ayrı kartları biçimlendireceksin. Ayrıca yuvarlatılmış köşeler ve boşluklarla kartlara şık bir görünüm kazandıracaksın.

CSS Görevin:

Her karta beyaz bir arka plan, dolgu ve yuvarlatılmış köşeler vermek için .feature sınıfını biçimlendir.
Bir kenarlık ayarla ve her kartın genişliğini düzenle.
.icon ögesinin .feature sınıfı içindeki yazı tipi boyutunu değiştirerek ve altına kenar boşluğu ekleyerek biçimlendir.
Başlığın metin rengini değiştirmek ve altına boşluk eklemek için .feature içindeki h3 etiketini biçimlendir.

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>