Layout de card

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

Desafio

Fácil

Nesta lição, você vai estilizar os cartões individuais adicionando fundos, bordas e preenchimento, além de ajustar os tamanhos dos ícones e dos títulos. Você também dará aos cartões uma aparência refinada 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 o .icon dentro da classe .feature alterando o tamanho da fonte e adicionando margem 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>