Skip to content
OverviewSolutions
14
Comments
4
Ben
@vBenTec

All comments

  • Jennifer•220
    @Jennifer1919Submitted almost 3 years ago

    Does someone know how to add a purple overlay on the image? Here is the code I wrote but it does not work, I don't know why...

    img{ width: 100%; border-radius: 10px 10px 0px 0px; background-color:hsl(277, 64%, 61%); opacity: 0.3; }

    Stats preview card component Using Flexbox and CSS Grid

    4
    Ben•300
    @vBenTecPosted almost 3 years ago

    Hi Jennifer,

    What you can do is to add a div on top of your image with position relative, or absolute and then set a z-index to a positive integer and add pink background with an opacity.

    Another solution would be to use simply the filter generator to add a pink effect. You can try to use this one   👇 https://cssgenerator.org/filter-css-generator.html

    Marked as helpful
    0
  • Ben•300
    @vBenTecPosted almost 3 years ago

    Hello, What I would suggest is to implement the hover effect on the landing page on the explore button. Another thing you could do is to use the view heights unit on the pages, there is a good use-case for that so you do not have the scroll down the page and all content is within the viewport.

    You could also work a bit more on the responsiveness part. I noticed by resizing your window the page is stuck on the left side and you did not implement the mobile version, so work on your media queries. You could also have a look over your spacing.

    Rest well-done congrats.

    Marked as helpful
    0
  • Ben•300
    @vBenTecPosted almost 3 years ago

    Hello Wayne, Congrats for your work.

    I noticed some things you could improve.

    1. Background image
    2. Visual hierarchy paying more attention on the whitespace, line-spacing
    Marked as helpful
    1
  • Ben•300
    @vBenTecSubmitted almost 3 years ago

    Hey there, Here is my solution for the product landing page. Please if you are interested in my experience reading my markdown.

    Thanks for your everyone who want to spend some time giving me some feedback.

    Responsive design, grid, flex-box, custom variables,

    2
    Ben•300
    @vBenTecPosted almost 3 years ago

    Hey Mariusz, Thanks for checking out my solution! I saw the problem and fixed it. It occurred because I tried out some transition effect for the modal window and forgot to add back visibility:hidden, that why the modal window was partly invisible hiding the navbar. Thanks actually for the hover I did that on purpose, but you are right it might be a bit too slow :D. Yeah, especially with all dynamic data the span is a great element to use.

    For the amount input number, I reset the number, because actually when you submit the data for the cart I thought it is a nice effect because the little span above the cart icon shows then the current amount you have already in the cart.

    Have great day!

    0