Card-Layout

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 29 von 43.

Aufgabe

Einfach

In dieser Lektion wirst du die einzelnen Karten gestalten, indem du Hintergründe, Rahmen und Innenabstände hinzufügst sowie die Größen der Icons und Überschriften anpasst. Außerdem verleihst du den Karten mit abgerundeten Ecken und Abständen ein professionelles Aussehen.

Deine CSS-Herausforderung:

Gestalte die .feature -Klasse, um jeder Karte einen weißen Hintergrund, Innenabstand und abgerundete Ecken zu geben.
Lege einen Rahmen fest und passe die Breite jeder Karte an.
Gestalte das .icon innerhalb der .feature-Klasse, indem du die Schriftgröße änderst und einen unteren Außenabstand hinzufügst.
Gestalte das h3 -Tag innerhalb von .feature, um die Textfarbe zu ändern und Abstand unter der Überschrift hinzuzufügen.

Probier es selbst

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