Layout delle schede

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

Sfida

Facile

In questa lezione, darai stile alle singole schede aggiungendo sfondi, bordi e spaziatura interna, e regolando le dimensioni delle icone e dei titoli. Darai inoltre alle schede un aspetto rifinito con angoli arrotondati e spaziatura.

La tua sfida CSS:

Dai stile alla classe .feature per assegnare a ogni scheda uno sfondo bianco, spaziatura interna e angoli arrotondati.
Imposta un bordo e regola la larghezza di ogni scheda.
Dai stile a .icon all'interno della classe .feature modificando la dimensione del carattere e aggiungendo un margine inferiore.
Dai stile al tag h3 all'interno di .feature per cambiare il colore del testo e aggiungere spaziatura sotto il titolo.

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>