Mise en page de la section

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

Défi

Facile

Nous allons rendre les cartes de loisirs nettes et centrées en utilisant Flexbox. Vous allez également styliser le titre de la section pour qu'il soit clair et bien espacé.

Votre défi CSS :

Stylisez la section .features avec un peu de rembourrage (padding) et du texte centré.
Stylisez le .section-title pour qu'il se démarque — changez la taille de la police, la couleur et ajoutez de l'espace en dessous.
Utilisez Flexbox sur le conteneur .cards pour aligner les cartes en ligne. Assurez-vous qu'elles reviennent à la ligne si nécessaire et qu'elles aient de l'espace entre elles.

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>