Ajouter les touches finales

Fait partie de la section CSS Mastery du Journey HTML de Coddy. Leçon 30 sur 43.

Défi

Facile

Dans cette leçon, vous allez ajouter un simple effet de survol aux cartes pour les rendre plus interactives et soignées.

Votre défi CSS consiste à faire réagir les cartes .feature lors du survol :

Utilisez :hover pour soulever légèrement la carte avec transform: translateY(-5px).
Ajoutez box-shadow à la carte pour créer un effet de flottement.
Appliquez transition pour animer le survol en douceur, la valeur doit être matrix(1, 0, 0, 1, 0, -5).

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>