Skip to content
Submitted over 4 years ago

Responsive Web page using Sass.

Sahithyan•250
@sahithyandev
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

I designed this webpage for my desktop size 1366px; not for 1440px.

"Bonus: Complete the challenge with just HTML and CSS.", says your README.md.

And I wonder how can I toggle that pricing based on the toggle (annually-monthly toggle) without using JavaScript.

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Nice work Sahityan! I hope you enjoyed the challenge. To complete this challenge without JavaScript you can use a checkbox for the toggle and the :checked selector to then change the display of the prices. It's quite a nice challenge to see if you can do it that way. Keep up the great work!

    1
  • Sahithyan•250
    @sahithyandevPosted over 4 years ago

    I tried to do so. But I couldn't be able to find a solution. Can you please explain how to select an element using :checked selector?

    I tried to use the adjacent selector with :checked selector. But it didn't work.

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    @KSahithyan here's a very basic CodePen for the HTML structure and simple CSS that will hopefully explain it. You'd need to make sure that your HTML structure allows you to use the adjacent selector, but it sounds like you're definitely on the right track.

    1
    Sahithyan•250
    @sahithyandevPosted over 4 years ago

    @mattstuddert Thank you.

    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