Mario Martinez• 50
@marioBytes
Submitted
Rodrigo Vergara
@UnTalPeluca
All comments
- Rodrigo Vergara• 680
@UnTalPeluca
Posted
The app works perfectly, congratulations! Adding some feedback when copying, such as a notification or message next to the password, would be a great enhancement. Otherwise, the user might not be sure if the copy operation worked; making it clear would provide a better user experience.
Marked as helpful
0 - Wasim• 90
@WasimAkramS
Submitted
Rodrigo Vergara• 680@UnTalPeluca
Posted
Your solution is really good. I notice than when hover the image you can notice that it has an empty space at the bottom, you can fix it by adding
display:blockto the product image.
Keep up the good work, you'll do very well. You can contact me on discord if you need any help Peluca#7132
Marked as helpful
1 - Harsh Kumar• 1,390
@thisisharsh7
Submitted
While building the project I found some problem on using border and box-shadow property in CSS and also I was unable to align the svg on the center when we hover on the card image (image overlay).
Rodrigo Vergara• 680@UnTalPeluca
Posted
For the box-shadow, not having the pro version, there's nothing wrong with looking at someone else's example and grabbing the properties with the element inspector.
https://html-css-js.com/css/generator/box-shadow/
Is a good tool to make box-shadows in an interactive way
try
box-shadow: 0 25px 50px 0 rgb(0 0 0 / 10%)Marked as helpful
1 - Harsh Kumar• 1,390
@thisisharsh7
Submitted
While building the project I found some problem on using border and box-shadow property in CSS and also I was unable to align the svg on the center when we hover on the card image (image overlay).
Rodrigo Vergara• 680@UnTalPeluca
Posted
Hi harsh! At first css can be overwhelming, in almost all the projects that you will have to do there will be more than one solution for the same problem, as someone who started as a beginner very recently I recommend you save certain tricks that you will reuse in the future, like this one that I like a lot.
I invite you to try this solution, remove #card-img:hover from your css and let's try an alternative.
I saw that you used position:absolute in the footer and that's why I wanted to give you this example so you can see that many things can be done with this property. An element with position:absolute can be positioned anywhere, if I put top:0 it would be positioned at the top of the site, but something curious would happen if you wrap the footer in a div and give this div the position:relative property , your footer would no longer be at the top of the page, it would be at the top of the div. In this example I use the ::before pseudoelement to create an element the same size as the product image on hover. You can copy and paste, and you will see that it works perfectly.
#card-img { cursor: pointer; position: relative; } #card-img:hover::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; background-color: rgba(0, 255, 255, 0.5); background-image: url("/images/icon-view.svg"); background-repeat: no-repeat; background-position: center; }I was also descriptive with the background properties so you could go through them one by one, but these can be shortened with
background: no-repeat rgba(0, 255, 255, 0.5) url("/images/icon-view.svg") center;There are many more ways to solve it, I invite you to contact me on discord if you need help at any time Peluca#7132
Marked as helpful
1 - Dia• 50
@DiaKarti
Submitted
This challenge went surprisingly smooth (except the picture overlay that overflows on the bottom a bit and I have no idea how to fix it), I was planning to use media queries but after using the clamp function I figured I didn't need to. As always feedback and suggestions are welcome !
Rodrigo Vergara• 680@UnTalPeluca
Posted
Divs use extra empty space at the bottom when they have an image inside, you can fix this by adding the "display: block" property to the image.
Marked as helpful
1 - sujit• 40
@SujitAdroja
Submitted
I thik putting eye icon over image is littele difficult.Still it is not working as shown in challange .
Rodrigo Vergara• 680@UnTalPeluca
Posted
For the eye icon you could wrap .main-img and .icon in a div. To this new div give it a "position: relative" and for the .icon give it a "position: absolute" and "top:0". You can remove the translate and left. "Absolute" elements take as reference the position of the closest "relative" parent element. By giving it top:0 it will position itself at the top of the div that wraps the image.
Marked as helpful
1 - Eero Liuska• 60
@eerolli
Submitted
Updated solution. Added hover effect on image
Rodrigo Vergara• 680@UnTalPeluca
Posted
Hi, I've been reading your code and it's very clean, I'm sure you'll do well in the future when you use tools like scss. In these cases I like to use ::before and ::after, to do so you have to wrap your img.card-image in a div, because these pseudo-elements don't work in imgs. Here is an example where I use ::before to create an element that is the same size as the image, has two backgrounds, and uses ::hover to make it visible.
.card-image-wrapper { cursor: pointer; position: relative; border-radius: 1rem; /* with this we don't have to specify */ overflow: hidden; /* the border radius on each element.*/ } .card-image-wrapper::before { content: ""; position: absolute; width: 100%; height: 100%; transition: opacity 0.4s ease-in; background: url(./images/icon-view.svg) no-repeat center, rgba(0,255,255, 0.5); opacity: 0; } .card-image-wrapper:hover::before { opacity: 1; } .card-image { width: 100%; display: block; /* When an image is inside a div, the div use an extra empty space at the bottom, this solves it */ }Marked as helpful
2 - Sergio Pinzón• 85
@sergiopin22
Submitted
Use Html and css only with flexbox, I still don't understand the part of the responsive design well, I would like your brothers to give me feedback :)
Rodrigo Vergara• 680@UnTalPeluca
Posted
As a suggestion, in order not to have to use margin above and below, a max-width so that it is separated from the borders. In .card you can use the css property "box-sizing: border-box" and give it a "padding: 25px", with border-box, padding does not enlarge our elements, but pushes them inwards, you will see that it will be a lot easier and faster to make your components with this. In the paragraph "Our Equilibrium collection ..." you can use "line-height: 24px" or something like that to give a bigger space between lines and finally for the white border that separates the information of the card with the creator you can use RGBA colors, these colors are very useful because you can change the opacity ("border-bottom: 1px solid rgba (0, 0, 0, 0.1)" for example) With this tool you can test https://rgbacolorpicker.com.
esp :D
Como sugerencia, para no tener que usar margin arriba y abajo, un max-width para que esté separado de los bordes. En .card puedes usar las propiedad de css "box-sizing: border-box" y darle un "padding: 25px", con border-box, el padding no agranda nuestros elementos, sino que los empuja hacia adentro, verás que será mucho mas facil y rapido hacer tus componentes con esto. En el parrafo "Our Equilibrium collection..." puedes usar "line-height: 24px" o algo asi para darle un espacio mas grande entre lineas y por ultimo para el border blanco quue separa la informacion de la tarjeta con el creador puedes utilizar colores RGBA, estos colores son muy utiles porque puedes cambiar la opacidad ("border-bottom: 1px solid rgba(0, 0, 0, 0.1)" por ejemplo) Con esta herramienta puedes testear https://rgbacolorpicker.com.
Marked as helpful
0
