Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview challenge no framework pure CSS

@AFranco-dev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@joykara

Posted

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

@AFranco-dev

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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