Crowdfunding product page --> work in progress
The challenge
Users are able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Make a selection of which pledge to make
- See an updated progress bar and total money raised based on their pledge total after confirming a pledge
- See the number of total backers increment by one after confirming a pledge
- Toggle whether or not the product is bookmarked
Colors
Primary
- Moderate cyan: hsl(176, 50%, 47%)
- Dark cyan: hsl(176, 72%, 28%)
Neutral
- Black: hsl(0, 0%, 0%)
- Dark gray: hsl(0, 0%, 48%)
Typography
Font
- Family: Commissioner
- Weights: 400, 500, 700
Stack
HTML5, CSS3, Vanilla JS
--> Frontend Mentor - @Alekususenpai