Submitted 5 months ago

Huddle Landing Page Made with HTML, CSS Flexbox.

Benjamin Juarez•390

@ImBenja

A solution to the Huddle landing page with a single introductory section challenge

Preview Code

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Frontend Mentor - Huddle landing page with single introductory section solution

Esta es mi solución al desafío Huddle Landing Page Solution de Frontend Mentor. Los desafíos de Frontend Mentor te ayudan a mejorar tus habilidades de codificación mediante la construcción de proyectos realistas.

📚 Tabla de contenidos

📖 Descripción general

El desafío

Los usuarios deben poder:

Ver el diseño óptimo según el tamaño de pantalla de su dispositivo.
Ver la Landing Page con toda su informacion y redes sociales.
Ver los diseños de Flexbox y los efectos de hover.

Links

Solution URL: Solucion
Live Site URL: Sitio en Vivo

🛠️ Mi proceso

Tecnologias utilizadas

HTML: Estructura semántica de la Landing Page.
CSS: Estilos avanzados con Flexbox.
Google Fonts: Fuente Open Sans y Poppins para un diseño moderno.

Lo que Aprendi

Diseño responsive: Usé media queries y un enfoque mobile-first para adaptar el diseño a diferentes dispositivos.
Diseño Flexbox: Usé Flexbox para crear un diseño moderno y atractivo.
Visualización de resultados: Usé fondos con colores modernos y atractivos para mostrar los resultados de manera efectiva.

<body>
  <header>
    <figure class="header__image">
      <img src="images/logo.svg" alt="logo" class="logo" />
    </figure>
  </header>
  <main>
    <figure class="container__image">
      <img src="images/illustration-mockups.svg" alt="mockups" />
    </figure>
    <article class="container__content">
      <h1 class="container__title">Build The Community Your Fans Will Love</h1>
      <p class="container__paragraph">
        Huddle re-imagines the way we build communities. You have a voice, but
        so does your audience. Create connections with your users as you engage
        in genuine discussion.
      </p>
      <button class="container__button">Register</button>
    </article>
  </main>
  <footer>
    <section class="container">
      <a href="https://www.instagram.com/benjajuarez1_/?hl=es"
        ><i class="fa-brands fa-instagram"></i
      ></a>
      <a href="https://github.com/ImBenja"
        ><i class="fa-brands fa-github"></i
      ></a>
      <a href="https://x.com/benjajuarez_2"
        ><i class="fa-brands fa-twitter"></i
      ></a>
      <a href="https://www.linkedin.com/in/benjam%C3%ADn-ju%C3%A1rez-b712592b8/"
        ><i class="fa-brands fa-linkedin"></i
      ></a>
    </section>
  </footer>
</body>

👨‍💻 Autor

GitHub - ImBenja
Frontend Mentor - @ImBenja
Instagram - @benjajuarez1_
Twitter - @benjajuarez_2
Linkedin - Benjamim Juarez

🙏 Agradecimientos

Agradezco a Frontend Mentor por proporcionar este desafío y a la comunidad por su apoyo y feedback.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Benjamin Juarez's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord