Skip to content
OverviewSolutions
5
Comments
19
Ridwanullah
@DanonymousCoder

All comments

  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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
    @LuccaMauroMolinaSubmitted over 1 year ago

    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?

    display flex, sass

    4
    Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    /* 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
    @LuccaMauroMolinaSubmitted over 1 year ago

    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?

    display flex, sass

    4
    Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    /* Style for the eye icon */ .image-container .overlay img { height: 50px; width: 50px; color: white; }

    Marked as helpful
    0
  • LuccaMauroMolina•130
    @LuccaMauroMolinaSubmitted over 1 year ago

    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?

    display flex, sass

    4
    Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    /* 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
    @LuccaMauroMolinaSubmitted over 1 year ago

    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?

    display flex, sass

    4
    Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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
  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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
  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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
  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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
  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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
  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    Great work, keep grinding chief.

    Marked as helpful
    0
  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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
  • Ridwanullah•210
    @DanonymousCoderPosted over 1 year ago

    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