Layout de card

Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 29 de 43.

Desafio

Fácil

Nesta lição, você estilizará os cartões individuais adicionando fundos, bordas, preenchimento e ajustando os tamanhos dos ícones e dos títulos. Você também dará aos cartões um visual polido com cantos arredondados e espaçamento.

Seu Desafio de CSS:

Estilize a classe .feature para dar a cada cartão um fundo branco, preenchimento e cantos arredondados.
Defina uma borda e ajuste a largura de cada cartão.
Estilize a classe .icon dentro da classe .feature alterando o tamanho da fonte e adicionando uma margem na parte inferior.
Estilize a tag h3 dentro de .feature para alterar a cor do texto e adicionar espaçamento abaixo do título.

Experimente você mesmo

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