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

GRID,FLEXBOX, JS-- Interactive pricing component

Koyun92 330

@Koyun92

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello,

It would be great to get yours feedbacks and hear some tips. I had a trouble with adjusting track so that it was moving behind the thumb... This is my first touch with BEM not sure it looks proper.

Thanks,

Community feedback

Aakash Verma 6,690

@skyv26

Posted

Hi! Koyun, Really nice you have complete this task, but i have noticed some issues in your work as mentioned below:

  1. Your design look and feel is not that much good. Like slider shadow is really too much. your buttons looks not great and also the detailing like hover effect is missing.

  2. In desktop mode your .submitBox_list data is not aligned properly to left side. Tip

.submitBox_list { list-style: none; text-align: center; }

from above css class rule cut text-align property and add it into the media queries for mobile, and Booom it will work.

  1. Also the problem that you had mentioned, please fix that too.

Fact I like

Your design is responsive it is really good to see your design on all width-screen consistently.

Overall Good Work!

Marked as helpful

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