Diseño de la sección

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 28 de 43.

Desafío

Fácil

Haremos que las tarjetas de pasatiempos se vean ordenadas y centradas usando Flexbox. También darás estilo al título de la sección para que se vea claro y tenga un buen espaciado.

Tu desafío de CSS:

Aplica estilo a la sección .features con algo de relleno y texto centrado.
Aplica estilo a .section-title para que destaque: cambia el tamaño de la fuente, el color y añade espacio debajo.
Usa Flexbox en el contenedor .cards para alinear las tarjetas en una fila. Asegúrate de que se ajusten si es necesario y de que haya algo de espacio entre ellas.

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>