Skip to content
Submitted over 3 years ago

Pricing Cards w/ toggle btn, Mobile First, only HTML & CSS

Yuko Horita•645
@Sloth247
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

Hi, I tried to achieve the price change only with CSS and the solution should work, however it didn't work. Can somebody help especially why.header__checkbox:checked ~ * .plan__price--monthly and .header__checkbox:checked ~ * .plan__price--annual do not work.

I also found it difficult to achieve this by javascript.

Also any comments are welcome on HTML semantics and other stylings.

I need your help! 😂

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    You need Javascript to toggle the prices

    Marked as helpful
    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    Well currently your cards in the desktop layout are overlaying each other and need some margin/gap/space between them

    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