Good colleagues, excuse me to see if you can help me with the :hover of the image, I had several complications to be able to put it and it is still not 100%, if you can help me I would greatly appreciate it.// Buenas compañeros, disculpen para ver si m pueden ayudar con el :hover de la imagen, tuve varias complicaciones para poder ponerlo y aun no esta al 100%, si m pueden ayudar se los agradecería mucho.
Hola Alex,
Yo he creado un container que tiene como imagen de background la imagen "equilibrium". Ese container incluye una imagen que es el icono icon-view. Cambiando el valor del atributo visibility de ese container cuando pasas el ratón por encima logras el efecto (el icono aparecería por encima de la imagen de background cuando pasas el ratón por encima y la capa verde se pondría por encima de la imagen de fondo)
Sería así:
En html:
<div class="img-container"> <div class="transparent-layer"><img src="./images/icon-view.svg" alt="View icon"> </div> </div>Luego en el fichero css:
.img-container .transparent-layer {
position: absolute;
border-radius: 12px;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
background-color: var(--cyan-color-t);
}
main .img-container:hover .transparent-layer {
visibility: visible;
cursor: pointer;
}
Espero que te sirva !
feedback, please !! tough love
Hi Ajay,
You made a great job !
Just as a suggestion, you can increase the margin-bottom between the numbers and the button, and maybe to increase the vertical padding of the button A "bug" that I found is that you can select the circle with the star before clicking on the button (then, the message in the second page says "you selected out of 5"). I think this should not be allowed
Other than that, I think that's perfect ;-)
Hope it helps !
The responsive design aspect was a bit difficult, and i'm not sure of how good this looks on a tablet device.
Hi Salami,
If I may, I think you have forgotten to apply the right family font (Hanken Grotesk (https://fonts.google.com/specimen/Hanken+Grotesk), for this challenge). To do this, you have to go to google fonts, look for this font family and select the version for weights 500, 700 and 800. Then copy-past the link tag in the head of your html file, and set font-family: 'Hanken Grotesk', sans-serif; to your html element Then, it will look like more like the proposed design ;-)
I hope it helps !
Could anyone explain to me why the justify-content: center; and align-content: center; did not center the page? I had to use margin: auto; to do so. I could take those lines off, and It will not affect the page layout.
For the responsive, I was not sure how to change one picture to another one. I did it using display: none. Is there any other way to do that?
Any comment that would help me to improve is welcome!
Hi Juan,
As Ahmarlftikhar has mentioned, you have to set the height of the container to 100vh in order to give some "space" to your main div so it can center in the page. Once this is done, you have to set "justify-content" to center and "align-items" to center (NOT align-content ! Align-content only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse. A single-line flexible container (i.e. where flex-wrap is set to its default value, no-wrap) will not reflect align-content).
To make your images responsive you have to use media queries. For example:
For mobile screen:
<img src="./images/image-product-mobile.jpg" alt="Product picture" />For desktop screen: @media (min-width: 1200px) { img { content: url("./images/image-product-desktop.jpg"); } }
I hope it helps !
Tambien resubido, me dado cuenta que no lo trata igual que el LiveServer de VSC, y nose por que no lo he mirado la verdad, quiero gastar las energias en otro nuevo projecto.
Hola César,
He visto que el valor de "width" de tu <header> es demasiado pequeño (ahora está a 650px). Ponlo a 750px y todo se verá mucho mejor
Además te recomiendo utilizar la etiqueta <main> para agrupar todo el contenido (en lugar de la etiqueta <header>)
Y si utilizas la etiqueta <section> no hace falta que añadas además la clase "section". Puedes dar estilos directamente con "section {}" (en lugar de section .section {})
Espero que te sirva ;-)
