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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: Solution Code
- Live Site URL: Live Solution website
- Semantic HTML5 markup
- CSS
- Flexbox
- CSS Grid
- Mobile-first workflow
- In this project I learned how to use CSS Flexbox and grid together to achieve the required design.
- Moreover I also learned to use media queries for responsive web design.
.img-container::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
background-color: rgba(170, 92, 219, 0.6);
}
- Though I learned using media queries, but in the future, I will improve to make a good design for all screen sizes.
- Moreover, I will learn reactJS and bootstrap to make this design quickly and more beautiful.
- Faceboook - Nguyen Hoang An Facebook
- Frontend Mentor - @anhoang241998