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.
The code in this repository was created from frontendmentor.com so it is not part of a bigger project. Please feel free to use any parts of it should you find it of value.
If you're looking for a good challenge check out frontendmentor.com they have lots of really good challenges.
Users should be able to:
- View the optimal layout depending on their device's screen size
Above is what you should see when you click on the link below.
- HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned a lot about the differences between images and background-images and how they impact the layout. I also used CSS variables for the first time using :root pseudo-class, so that it can be applied globally across your HTML document.
I learnt how to display items in the container in reverse order using flex-direction: row-reverse, which can be seen in the below snippet.
@media (min-width: 768px) {
.container {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
padding: 0;
text-align: left;
}
- MDN - This helped me figure out how to control the order of content for medium devices. I really liked the simple diagrams for demonstrating how to order flex items.
- Website - Max Lockwood
- Frontend Mentor - @Max88-git