Skip to content
OverviewSolutions
3
Comments
5
pvkom26
@pvkom26

All comments

  • pvkom26•50
    @pvkom26Posted about 2 years ago

    Add transition property to the buttons. For example like this: .btn { transition: background-color 0.3s; }; in this case you're saying that you want background-color on .btn change in 0.3s. It's a simple line of code but it makes a lot of difference when it comes to user experience!

    Also, don't forget cursor: pointer on the buttons as well. People want to know for sure that these are supposed to be clickable.

    There are also some issues with the container (.flexcontainer). I haven't seen the design files but I highly doubt it's supposed to be 100% width at all times... Is it? In any case, try playing with @media query a little bit - the three-column layouts stays for way too long when I shrink the browser window. Personally, I wouldn't keep it anywhere below 700px.

    Everything else looks good. Good luck and don't give up!

    0
  • pvkom26•50
    @pvkom26Posted about 2 years ago

    Add transition property to the links and the image, it will make user experience so much better!

    Here is my solution, you can inspect the styles via dev tools in your browser. Hope that helps - https://pvkom26-nft-challenge.netlify.app/

    Marked as helpful
    0
  • pvkom26•50
    @pvkom26Posted about 2 years ago

    I really think you need to go back to basics and watch some tutorials on how to work with <flex> elements. This challenge really isn't as complicated as you made it out to be!

    Just use flex to position it all vertically and add padding to the text elements.

    Good luck! Don't give up

    0
  • pvkom26•50
    @pvkom26Posted about 2 years ago

    Well, it looks like you forgot to style the heading (called "product-title" here). Change the font-family to 'Fraunces' and adjust the line-height

    0
  • pvkom26•50
    @pvkom26Posted about 2 years ago

    Accesibility report appears to be not working as it is supposed to - and marking even the starting code as containing errors.

    0