This is a solution to the Product preview card component challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
Learned about some minutiae surrounding color theory in UI design and employed Flexbox and Grid in the layout.
@media screen and (max-width: 650px) {
.container {
display: grid;
grid-template-columns: 100%;
height: 600px;
width: 350px;
}
}
I would like to be more thoughtful when naming classes in HTML. Also next time I would implement a Mobile First Design approach.