Styler la section d'en-tête

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 26 sur 43.

Défi

Facile

Dans ce mini-projet, vous allez donner vie à une amusante page d’accueil consacrée aux loisirs : en utilisant uniquement CSS.

Le HTML est déjà écrit pour vous. Votre objectif est de le mettre en forme étape par étape, comme le ferait un véritable développeur front-end. C’est un excellent moyen de vous entraîner à créer des mises en page réalistes, des boutons et des effets de style !

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

Dans le premier défi, nous allons commencer par mettre en forme la partie supérieure de la page : l’en-tête (également appelée section « hero »). Pour le moment, il ne s’agit que de texte brut placé en haut. Votre objectif est de le transformer en une introduction claire et attrayante de la page.

Votre défi CSS :

Supprimez l’espacement par défaut : définissez margin: 0 sur body et ajoutez-lui une couleur d’arrière-plan.
Mettez en forme la section .hero avec une couleur d’arrière-plan (rgb(30, 207, 104)) et un remplissage 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 mettre en forme le texte.

Assurez-vous que la section supérieure est claire 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>