Diseño de la sección

Parte de la sección CSS Mastery 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 bien 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 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 a la siguiente línea si es necesario y que tengan 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>