This is my solution to the Product preview card component challenge on Frontend Mentor.
👩🏻💻 Frontend Mentor challenges help you improve your coding skills by building realistic projects.
⚡ This challenge was to build a responsive product preview card component.
🚀 I built this using HTML and CSS, with the help of Figma for studying the design.
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: frontendmentor.io/solutions/product-preview-card-component-9PWzkZv_hy
- Live Site URL: nix7amcm.github.io/FEM-product-preview-card-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Figma
- Tailwind.css - This helped me add fallback fonts to cover all browsers, and the sr-only class style for the hidden header with the h1 title, so that it could still be accessed by screen readers.
- box-shadow.dev - This is a great box-shadow generator! I've used a few of these to date and this is definitely one of the more straightforward options. You can style the element on the right similar to what you want to apply the shadow to in your project, tinker with the shadows, then simply copy the code for the box-shadow.