Añadir los toques finales

Parte de la sección Dominio de CSS 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 simple a las tarjetas para que resulten más interactivas y pulidas.

Tu desafío de CSS consiste en hacer que las tarjetas .feature respondan al pasar el cursor sobre ellas:

Usa :hover para elevar ligeramente la tarjeta con transform: translateY(-5px).
Añade box-shadow a la tarjeta para crear un efecto flotante.
Aplica transition para animar el efecto de 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>