This is CKodes's solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- HTML | CSS
- Bootstrap 4.0 (card, responsive grid)
- Using Media Queries
For media queries I created two values.
max-width: 1190px was used to reduce the font-size of the .stats-para class for viewport widths which were in-between mobile and desktop. This is to ensure the string characters (COMPANIES, TEMPLATES, QUERIES) did not overflow for in-between widths.
max-width: 1024px was used to format and style the design to fit mobile and in-between widths. Most of the changes were for centering texts.
- Centering
The bulk of the centering came from the .mainholder and .cardholder classes where flexbox CSS properties were used.
- CSS Background Values
I learnt how to add url, color, and blend modes for background properties to add the image and its purple hue to the .right class.
- Add dark mode toggle
Another Frontend Mentor Solution Submission
- This helped me for the CSS Background Values that I added to the .right class.
- Frontend Mentor Profile @CKodes
Thank you to Dr. Angela Yu of The App Brewery for The Complete 2021 Web Development Bootcamp course and for introducing Frontend Mentor as a means to hone FE dev skills. This is my first Frontend Mentor challenge, and it was attempted after completing Lecture 84 - Media Query Breakpoints.