Benjamin Lincoln• 20
@CuriousFullStacks
Submitted
any feedback or advice is appreciated! I had a lot of fun making this and I'm not sure if I could do anything better. I had some thoughts of possibly overusing rem units in this case?
Ridwanullah
@DanonymousCoder
All comments
- Ridwanullah• 210
@DanonymousCoder
Posted
Nice work bro, keep grinding. Your work is awesome you still need to do some little adjustment. Firstly, the element 'Perfume' isn't given the right color and also you need to add a letter spacing to it. Secondly, your slashed price is not in the right position. It should be at the upper part of the actual price. Thirdly the responsiveness is not looking really good, you should the image to the image given for the mobile view. And also, adjust the height of the container and make it automatically appear at the center of the screen.
Marked as helpful
2 - LuccaMauroMolina• 130
@LuccaMauroMolina
Submitted
I put a background image and it didn't put the image, what do I do? I also put a hover on the image but a part of that color comes out, how do I give it to the image?
Ridwanullah• 210@DanonymousCoder
Posted
/* Show the overlay and transform the image when hovered */ .image-container:hover img { transform: scale(1.1); }
.image-container:hover .overlay { opacity: 1; }
0 - LuccaMauroMolina• 130
@LuccaMauroMolina
Submitted
I put a background image and it didn't put the image, what do I do? I also put a hover on the image but a part of that color comes out, how do I give it to the image?
Ridwanullah• 210@DanonymousCoder
Posted
/* Style for the eye icon */ .image-container .overlay img { height: 50px; width: 50px; color: white; }
Marked as helpful
0 - LuccaMauroMolina• 130
@LuccaMauroMolina
Submitted
I put a background image and it didn't put the image, what do I do? I also put a hover on the image but a part of that color comes out, how do I give it to the image?
Ridwanullah• 210@DanonymousCoder
Posted
/* Style for the overlay */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 255, 255, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; border-radius: 10px; }
Marked as helpful
0 - LuccaMauroMolina• 130
@LuccaMauroMolina
Submitted
I put a background image and it didn't put the image, what do I do? I also put a hover on the image but a part of that color comes out, how do I give it to the image?
Ridwanullah• 210@DanonymousCoder
Posted
Nice work bro, keep grinding. I saw that you have a problem with the hover effect of the image. Firstly you have to remove the height with the background-color of cyan. Secondly you would need to create a CSS element like this element:hover .
Marked as helpful
0 - Dre• 610
@hadreemustaffa
Submitted
Any feedback is much appreciated.
Thanks in advance
Ridwanullah• 210@DanonymousCoder
Posted
Nice work bro, keep grinding. Your work is awesome but needs some little changes. firstly, there should be a little space between the cars and the header texts. Secondly, for the responsive site reduce the width of the containers and if needed the size of the element. Also, reduce the size of some element if needed. And lastly, make the container automatically aligned at the center for better User Experience.
Marked as helpful
2 - m-stavrakov• 20
@m-stavrakov
Submitted
Ridwanullah• 210@DanonymousCoder
Posted
Great work Bruh, keep grinding. Your work is awesome but there are some few glitches you still need to fix. Firstly, the image width should be increased to give it a more befitting look. Secondly, the element 'PERFUME' should have a color: hsl(228, 12%, 48%) not black and also increase the word spacing. Thirdly, the text 'Essence' should be on the same line with 'Gabrielle'. Fourthly, your slashed price should be up beside the actual price not directly beside it.
0 @Ezekiel-Great
Submitted
Ridwanullah• 210@DanonymousCoder
Posted
Nice work bro, your work is awesome but there is a little glitch in the outcome. Firstly, the parent container for the elements is too long, you can fix that by various ways. Secondly, the 'Jules Wyvern' hover effect is not active. If you are able to fix this your work would be more awesome.
Marked as helpful
0- Pedro Henrique Silva• 380
@GDF97
Submitted
Ridwanullah• 210@DanonymousCoder
Posted
Great work, keep pushing. I think the live site doesn't allow me to view the content fully. It is either hung at the top of the page or at the bottom of the page. I hope you can fix that. Btw cool animation.
Marked as helpful
0 @RuloMartearena
Submitted
Ridwanullah• 210@DanonymousCoder
Posted
Great work, keep grinding chief.
Marked as helpful
0- IamSahil1507• 30
@IamSahil1507
Submitted
Ridwanullah• 210@DanonymousCoder
Posted
And also, instead of using a button tag you can just use the anchor tag. E.g HTML <a href='#' >Add to cart</a> CSS text-decoration: none; background-color: hsl(158, 36%, 37%); padding: 15px; border-radius: 10px; color: white;
0 - Huy Hoang Le• 70
@b1tj
Submitted
All feedback is welcome! Thanks <3
Ridwanullah• 210@DanonymousCoder
Posted
Well done chief, I must say your project is awesome but there are few you can add to improve it. Firstly, your slashed price should be up but still beside the actual price. Secondly, the text 'perfume' isn't given the right color, check your style-guide-template.md and also there is also a letter spacing for the text. Thirdly, you didn't make it responsive. You can add the responsiveness by using -
@media (max-width: 375px) { /Your styles/ }
0
