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: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Media Query
Learnt how to centralize elements without using a flexbox property in the body Learnt how to use media query to make the site/page responsive across devices Learnt how to use the import url and the :root to give variables
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap");
:root {
--cyan: hsl(158, 36%, 37%);
--cream: hsl(30, 38%, 92%);
}
I intend to understand how to deal with spaces in the body of my page when i want to eliminate such spaces for mobile view to prevent scrolling
- Frontend Mentor - @apah-dev
- Twitter - @benson_apah