Skip to content
Submitted about 3 years ago

Mobile First Approach (Responsive dimensions (rems,%)) + FLEXBOX

Paras Sharma•700
@imparassharma
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive pricing component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

It was great implementing this design. The only problem I faced is with the background color in the top-section of the body. It was overlapping on my slider-container. I tried z-index with relative positioning but didn't worked out. If anyone can help it would be very nice.

Community feedback

  • Alexis Enriquez•260
    @alexiscenriquezPosted about 3 years ago

    Hi Paras, in addition to what Shivam said, you should change from mobile view at around 700/800px. Also, when switching from monthly to yearly, change "/month" to "/year"

    Marked as helpful
    1
  • Shivam•520
    @shivjoshi1996Posted about 3 years ago

    Hey Paras,

    Great job on this. I regards to the background color, I believe there is an image that you should use for it rather than setting a color. It's in the image folder "bg-pattern.svg". If you add that to the body using background-image, set background-repeat: no-repeat and set the size to 100vw 50vh, I think that should work.

    I also noticed that when I clicked on the 25% off toggle it would increase the page views and cost per month x10. I think the correct prices should be listed in the README which you got when you downloaded the files, so if you want an extra challenge then take a look :)

    Marked as helpful
    0

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