Mise en page de la section

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

Défi

Facile

Nous allons rendre les cartes de loisirs élégantes et centrées à l’aide de Flexbox. Vous styliserez également le titre de la section afin qu’il soit clair et bien espacé.

Votre défi CSS :

Stylisez la section .features avec du remplissage et du texte centré.
Stylisez .section-title pour le mettre en évidence : modifiez la taille de la police, la couleur et ajoutez de l’espace en dessous.
Utilisez Flexbox sur le conteneur .cards pour aligner les cartes sur une ligne. Assurez-vous qu’elles passent à la ligne si nécessaire et qu’il y ait un peu d’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>