Frontend Mentor - Product preview card component solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Screenshot

Links

• Live Site URL: View it here

My process

Built with

• Semantic HTML5 markup
• Vanilla CSS
• CSS Grid

What I learned

I used a simple CSS grid for the main layout. Most of the text alignment was done with the margin property. One thing I was unsure about was how to change the image between desktop and mobile. In the process of doing research I came across the <picture> tag, which is nifty. Another interesting technique I came across was using inline-flex to center the button text.

Author

• Frontend Mentor - @tadaly