Mise en page des cartes

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

Défi

Facile

Dans cette leçon, vous allez styliser les cartes individuelles en ajoutant des arrière-plans, des bordures et des espacements internes, et en ajustant la taille des icônes et des titres. Vous donnerez également aux cartes un aspect soigné grâce à des coins arrondis et à de l’espacement.

Votre défi CSS :

Stylisez la classe .feature pour donner à chaque carte un arrière-plan blanc, un espacement interne et des coins arrondis.
Définissez une bordure et ajustez la largeur de chaque carte.
Stylisez .icon à l’intérieur de la classe .feature en modifiant la taille de la police et en ajoutant une marge en bas.
Stylisez la balise h3 à l’intérieur de .feature pour modifier la couleur du texte et ajouter un espacement sous le titre.

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>