Skip to content
Submitted over 4 years ago

Pricing component with toggle using jQuery, CSS, HTML

Nikolina Pelivan•120
@NPelivan
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

Any feedback is welcomed.

Community feedback

  • Mahesh Yadav•1,220
    @Mahesh-yadavPosted over 4 years ago

    1. Text Annually and Monthly and the checkbox are not aligned vertically. One way to do is to make their container div element a flex box using display: flex and setting align-items: center.

    2. background of checkbox is not a color. you can use a linear-gradient. e.g. background: linear-gradient(to right, #color1, #color2)

    3. Similarly, button background should be set using linear-gradient.

    4. The background gradient on middle card is from top-left to bottom-right.

    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