Frontend Mentor - Tip calculator app solution
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for the app depending on their device’s screen size
- See hover states for all interactive elements on the page
- Calculate the correct tip and total cost of the bill per person
Screenshot

Links
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Flask - Python web framework
- Bootstrap 5 - For styles
What I learned
I learnt how to style a radio button that is on checked
input[type="radio"]:checked+label {
color: hsl(183, 100%, 15%);
background-color: hsl(172, 67%, 45%);
}
Author