Skip to content
Submitted about 2 years ago

Huddle

CARLOS ALBERTO MARTINEZ FLOREZ•200
@camaflo87
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. What did you find difficult while building the project? --->Tuve dificultades en el uso del viewport al usar vh o vw.

  2. Which areas of your code are you unsure of? ---> Al redimensionar imagenes, como la que se uso de fondo en este proyecto.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hola @camaflo87, ¡buen trabajo por completar este desafío! 👋

    Aquí hay algunas sugerencias para mejorar su código:

    • Cambia de elemento en tu botón de registrar, <div class="btn">Register</div>, el div es una caja que sirve para dar estilos y para delimitar un contexto, pero en este caso debería ser un botón o un link, la solución seria que colocaras un link <a> ya que este te redirigiría al apartado de registro. Mas información
    <a class="btn">Register</a>

    y agrega display: block; al .btn para que logre ocupar el ancho que tu le indiques.

    • Tambien podrias empezar a utilizar la librería de iconos SVG llamada FontAwesome, esta te provee de iconos bonitos, todo lo que tiene que hacer es importarla dentro de tu <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" />

    Para usar los iconos haces uso del elemento <i>, el elemento <i> se usa para texto idiomático, o texto que está separado del contenido de texto "normal", en este caso le servirá como un icono. Agrega un <i> y debes asignarle las clases de fa-brands fa-facebook-f, estas clases son especiales y determinará cuál icono cargar:

    <i class="fa-brands fa-facebook-f"></i>

    Puedes encontrar todas los iconos gratis aquí.

    Además que estos iconos deberían estar dentro de un elemento <a> para ser direccionados a la red social que deben:

    <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
    • Luego deberías agregar algo de interactividad, por ejemplo que cuando se coloque el cursor sobre el botón de registrar, este cambie de botón, esto se logra con el pseudo-selector :hover Mas información
    .btn:hover {
    background-color: hsl(300, 69%, 71%);
}

    Y para cada <section> debes agregar un encabezado <h2>

    Espero que esos consejos te ayuden.

    Buen trabajo !

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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