Skip to content
Submitted over 2 years ago

Product preview challenge no framework pure CSS

Andre Franco•70
@AFranco-dev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The part that I found the most complicated was to set the prices in that position, I don't think I did it the best way so if anyone could tell me a better way to do it I would really appreciate it :)

How would be the best way to arrange the prices in that position?

Community feedback

  • Joy•80
    @joykaraPosted over 2 years ago

    Hello✨!!... I'd suggest trying to list the prices <li> in your HTML code using <ul>, then using CSS to style them to your desired output. e.g: in CSS have the list as ;

    list-style-type: none; display: flex; justify-content: space-between; .....

    and edit each of the lists as desired. You could try that out and see if it works for you. I previously tried it out in my nft-preview challenge. Hope this helps.😊

    Marked as helpful
    1
    Andre Franco•70
    @AFranco-devPosted over 2 years ago

    @joykara thank you I will try it next time :)

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord