Header-Bereich stylen

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

Aufgabe

Einfach

In diesem Mini-Projekt wirst du eine unterhaltsame Hobby-Landingpage zum Leben erwecken — und zwar nur mit CSS.

Das HTML ist bereits für dich geschrieben. Deine Aufgabe ist es, es Schritt für Schritt zu stylen, genau wie ein echter Front-End-Entwickler. Es ist eine großartige Möglichkeit, Layouts, Buttons und Styling-Tricks aus der Praxis zu üben!

Hier ist eine Vorschau dessen, was du am Ende bauen wirst:

In der ersten Herausforderung beginnen wir mit dem Styling des oberen Teils der Seite — dem Header (auch "Hero"-Sektion genannt). Im Moment ist es nur einfacher Text, der oben steht. Dein Ziel ist es, ihn in eine saubere, auffällige Einleitung für die Seite zu verwandeln.

Deine CSS-Herausforderung:

Standardabstände entfernen: Setze margin: 0 für den body und füge ihm eine Hintergrundfarbe hinzu.
Style die .hero Sektion mit einer Hintergrundfarbe (rgb(30, 207, 104)) und einem Padding von 50px.
Verwende Flexbox für .hero, um alles zu zentrieren:
1. display: flex
2. flex-direction: column
3. align-items: center
4. justify-content: center
5. text-align: center
Verwende .hero h1 und .hero p, um den Text zu stylen.

Stelle sicher, dass der obere Bereich sauber und ansprechend aussieht.

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>