Añadir los toques finales

Parte de la sección CSS Mastery del Journey de HTML de Coddy. Lección 30 de 43.

Desafío

Fácil

En esta lección, añadirás un efecto de desplazamiento (hover) simple a las tarjetas para que se sientan más interactivas y pulidas.

Tu desafío de CSS es hacer que las tarjetas .feature respondan cuando se pase el cursor sobre ellas:

Usa :hover para elevar la tarjeta ligeramente con transform: translateY(-5px).
Añade box-shadow a la tarjeta para crear un efecto de flotación.
Aplica transition para animar el desplazamiento suavemente, el valor debe ser matrix(1, 0, 0, 1, 0, -5).

Pruébalo tú mismo

<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>