Aggiungere gli ultimi ritocchi

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 30 di 43.

Sfida

Facile

In questa lezione aggiungerai un semplice effetto al passaggio del mouse sulle schede, per renderle più interattive e curate.

La tua sfida CSS consiste nel fare in modo che le schede .feature reagiscano al passaggio del mouse:

Usa :hover per sollevare leggermente la scheda con transform: translateY(-5px).
Aggiungi box-shadow alla scheda per creare un effetto fluttuante.
Applica transition per animare in modo fluido il passaggio del mouse; il valore deve essere matrix(1, 0, 0, 1, 0, -5).

Provalo tu

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