Sektions-Layout

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 28 von 43.

Aufgabe

Einfach

Wir lassen die Hobbykarten mithilfe von Flexbox ordentlich und zentriert aussehen. Außerdem gestaltest du den Abschnittstitel so, dass er klar und mit ausreichend Abstand wirkt.

Deine CSS-Herausforderung:

Gestalte den Abschnitt .features mit etwas Innenabstand und zentriertem Text.
Gestalte .section-title, damit er hervorsticht: Ändere die Schriftgröße und -farbe und füge darunter Abstand hinzu.
Verwende Flexbox für den Container .cards, um die Karten in einer Reihe anzuordnen. Achte darauf, dass sie bei Bedarf umbrechen und etwas Abstand zwischen ihnen haben.

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>