Header-Bereich stylen

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

Aufgabe

Einfach

In diesem Mini-Projekt erweckst du eine ansprechende Landingpage für Hobbys zum Leben: und zwar nur mit CSS.

Das HTML ist bereits für dich geschrieben. Deine Aufgabe ist es, es Schritt für Schritt zu gestalten, genau wie ein echter Frontend-Entwickler. So kannst du Layouts, Buttons und Styling-Tricks aus der Praxis hervorragend üben!

Hier ist eine Vorschau auf das, was du am Ende erstellen wirst:

In der ersten Herausforderung beginnen wir damit, den oberen Teil der Seite zu gestalten: den Header (auch „Hero“-Abschnitt genannt). Im Moment ist er nur einfacher Text, der oben steht. Dein Ziel ist es, daraus eine klare und ansprechende Einführung in die Seite zu machen.

Deine CSS-Herausforderung:

Entferne den standardmäßigen Abstand: Setze margin: 0 für den body und füge ihm eine Hintergrundfarbe hinzu.
Gestalte den Abschnitt .hero 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 gestalten.

Achte darauf, dass der obere Abschnitt klar 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>