Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

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

@MelvinAguilar

Posted

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
Discord logo

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