Submitted about 2 years ago

Crowdfunding product page using CSS CUBE

mateusz96•110

@mhanak96

Preview site View code

This is a solution for...Crowdfunding product page

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Trobules that I had:

color change when selecting radio button
I don't know how to make working "bookmark button" and hide it's part on smaller screens - (currently a sudo element).
I don't know how to change svg's colors on click
I couldn't add "$" sign to input element (sudoclasses - are not working on them)
Do you know any better way, to create the breaklines near statistics section (currently borders of the middle element)? 🤔

Overall I thought that this challenge will be much easier - but i learned a lot so I'm happy 😅

Community feedback

Sahand Masoleh•1,210
@sahand-masolehPosted about 2 years ago
Dzien dobry Mateusz! Great job!

You can toggle a class on click to change the color, or anything else, and if you give it a transition property, you can animate it too.

You can use a media query and change the size of the container based on view port size.

Same thing, you can toggle classes. Just make sure that your SVG doesn't have colors hard-coded in it or it will override anything you define in CSS. A common technique is to set the fill property of the SVG to currentColor and set the color in CSS.

You can use the Intl.NumberFormat object in JS to format currency and many other things cleanly and natively.

There's nothing wrong with using border, but you can also use the <hr> element, a pseudo element, or even a decorative div, whichever you're more comfortable with.
Marked as helpful
1

Please log in to post a comment

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