Skip to content
Submitted about 2 years ago

Responsive Pricing component with toggle (using only HTML/CSS, no JS)

Ian•150
@blndcat
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

A fully responsive implementation using flexbox so it displays as it should at mobile and desktop sizes as well as sizes in-between. Implemented without using javascript.

I actually completed this a while back and never got round to submitting it. I used sass and sass variables but if I were to redo it I would probably use css custom properties.

Community feedback

  • Patrick•800
    @PPechmannPosted about 2 years ago

    Hi @blndcat,

    very well done on this challenge, I like it 💪🏻

    I do have a small improvement, to get it even closer to the original design:

    You can center the entire content with flexbox. For this you initially have to give the body {min-height: 100vh;} to cover the entire viewport. Then you can center it as follows:

    Display: flex;
align-items: center;
justify-content: center;

    This is not the only wat to center elements, but I do find it the easiest. I highly recommend checking out this small guide on centering, to have a full range of tools you can use anytime.

    Hope this helps!

    Happy coding 🙂

    Patrick

    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