This is a solution to the Stats Preview Card Component Challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I'm transitioning back into Full-Time Web Development after a long hiatus away from the tech industry. From experience I know the fastest way to learn/relearn any skill is through consistent building and that is why I've found Front End Mentor Challenges to be the perfect fit for me at this stage in my career journey.
This is the second challenge I'm attempting, definitely excited for the future.
- Build out the Stats Preview Card Component challenge at [https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62/hub/stats-preview-card-component-gNNiiIEGt] as close to the original design as possible.
- Solution: [https://www.frontendmentor.io/solutions/stats-preview-card-component-solution-G-bRQv-gd]
- Live Site URL: [https://emmanueloloke.github.io/frontendmentor-stats-preview/]
- I started out with the HTML structuring of the stats preview card. Positioning the image, texts and buttons.
- Followed it up with styling each element to mimic what was presented in the challenge design files with CSS.
- HTML5 markup
- CSS3 custom properties
- Flexbox
- Improved ability working with CSS Flexbox
- CSS [height: 100% 100%] to make an image cover a div entirely without cropping and stay responsive.
- Tint image with linear gradient
- Looking forward to taking up a few more HTML & CSS challenges before later moving on to JS.
- Change hsl colors to rgb equivalent [https://htmlcolors.com/hsl-to-rgb]
- Emmanuel Oloke.
- Frontend Mentor - [https://www.frontendmentor.io/profile/EmmanuelOloke]
- Twitter - [https://twitter.com/I_am_Pope]