Frontend Mentor - Product preview card component solution

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Author

Overview

Build out a product preview card component and get it to look as close as possible to the design preview and style-guide.

Important note: I followed the screen sizing in the style guide literally, and so the webpage will only work at the specified 375px and 1440px. In the future, I will have the component change from vertical to horizontal at a screen width in-between the two.

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size:
  • Mobile: width = 375px
  • Desktop: width = 1440px
• See hover state for the "Add to Cart" button.

Screenshot

Links

• Solution URL: https://nablanco.github.io/product-preview-card/pages/index.html

My process

• Building out HTML to determine overall structure.
  • Create parent component which will hold image and story divs
  • Add mobile and desktop images to image div
  • Organize story div with approriate text elements
• Build out style sheet.

Built with

• Semantic HTML5
• CSS custom properties
• Flexbox
• CSS Flex
• Mobile-first workflow

Author

• Website - https://nicholasblanco.com/
• Frontend Mentor - https://www.frontendmentor.io/profile/nablanco