Styler la section d'en-tête

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 26 sur 43.

Défi

Facile

Dans ce mini-projet, vous allez donner vie à une page d'accueil de loisirs amusante — en utilisant uniquement du CSS.

Le HTML est déjà écrit pour vous. Votre travail consiste à le styliser étape par étape, tout comme un véritable développeur front-end. C'est un excellent moyen de pratiquer la mise en page, les boutons et les astuces de stylisation du monde réel !

Voici un aperçu de ce que vous construirez à la fin :

Dans ce premier défi, nous allons commencer par styliser la partie supérieure de la page — l'en-tête (également appelé section "hero"). Pour l'instant, ce n'est que du texte brut en haut de la page. Votre objectif est de le transformer en une introduction propre et attrayante pour la page.

Votre défi CSS :

Supprimez l'espacement par défaut : définissez margin: 0 sur le body et ajoutez-lui une couleur d'arrière-plan.
Stylisez la section .hero avec une couleur d'arrière-plan (rgb(30, 207, 104)) et un padding de 50px.
Utilisez Flexbox sur .hero pour tout centrer :
1. display: flex
2. flex-direction: column
3. align-items: center
4. justify-content: center
5. text-align: center
Utilisez .hero h1 et .hero p pour styliser le texte.

Assurez-vous que la section supérieure soit propre et attrayante.

Essayez vous-même

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