Mise en page des cartes

Fait partie de la section CSS Mastery 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, du rembourrage et en ajustant la taille des icônes et des titres. Vous donnerez également aux cartes un aspect soigné avec des coins arrondis et de l'espacement.

Votre défi CSS :

Stylisez la classe .feature pour donner à chaque carte un arrière-plan blanc, du rembourrage et des coins arrondis.
Définissez une bordure et ajustez la largeur de chaque carte.
Stylisez la classe .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 changer la couleur du texte et ajouter de l'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>