This is a solution to the Product 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
- See hover and focus states for interactive elements
- Solution URL: GitHub
- Live Site URL: Product Preview Card Component
I opted for a mobile-first approach for this project. I found the majority of this project fairly easy to layout (wether or not my code looks nice is a different story), but the button was a pain so any input on how to deal with that is always welcome.
I used a media query and used the smallest point the desktop layout could go as the breakpoint which was 785px.
This was pretty straightforward and I am always happy to get pointers from others...
- Semantic HTML5 markup
- Flexbox
- Mobile-first workflow
I need to study buttons more!
- Website - TomoFromEarth
- Frontend Mentor - @tomofromearth
- Twitter - @tomofromearth