Skip to content
Submitted almost 5 years ago

Pricing component.

Felix Anducho•400
@Pleopleq
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 did the toggle function with JS. I dont know if it is possible to make it with CSS. Also, i dont know why, but when i open my page from Github the background is gone. It works with live server (VSC).

Community feedback

  • Ryan Abney•170
    @RCAbneyPosted almost 5 years ago

    @Pleopleq Nice job on this project.

    I see in the network tab of my console that the bg images are returning a 404 error. Try adjusting the url on your background-image rule to: url("../images/bg-top.svg") (along with the others adjusted as necessary) and see if that helps you out.

    One piece of feedback for your CSS: Your initial media query of min-width: 375px isn't necessary. I believe your intent is to have everything inside that as your global styles. As is, any browser width less than 375px (Samsung Galaxy S8/9 - 360px) won't include them.

    2
    Felix Anducho•400
    @PleopleqPosted almost 5 years ago

    I tried using url("../images/bg-top.svg") but the problem persist :(. Also, thanks for your comment my project and the feedback in my media query!

    0
    Felix Anducho•400
    @PleopleqPosted almost 5 years ago

    Nvm! i fixed it. The only problem was the quotation marks. Thanks again!

    0
  • Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    Nice work, Felix! As @RCAbney mentioned, you've just got one too many dots at the beginning of your file path. The challenge is possible in pure HTML and CSS, but it's fine to use JS as well.

    I would recommend avoiding the @import in your CSS files, as it slows down the loading of your CSS code. Instead, I would just use a single CSS file or use a pre-processor, like SASS, to build the single .css file from multiple .scss files.

    Keep up the great work!

    1
  • Felix Anducho•400
    @PleopleqPosted almost 5 years ago

    Thanks for the feedback! I didnt know that @import does that to my page. I just saw other projects using it and i thought it was okay haha. Really appreciate that. My next step is trying to learn SASS, thats for sure.

    0
    Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    @Pleopleq no problem. @import is absolutely fine in SASS, but in CSS it's no considered a good practice.

    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