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: Gihub Pages
- Semantic HTML5 markup
- CSS
- Flexbox
- Mobile-first workflow
- Screen Reader - Visually hide
- How to add img/icon on button
- CSS Grid
- In depth CSS
- Image replace using css content property - This helped me for image replacement in media query.
- Website - Abhishek Baliyan - Coming soon
- Frontend Mentor - @abhishek-baliyan-dev
- Twitter - @Abhi___baliyan
The stackoverflow guide of image replacing by css solved my problem.