Product Preview

This is a product preview for those who enjoy shopping online made with HTML and CSS/Sass.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Front End Style
• Colors
• Typography

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

• Solution URL: Solution URL here
• Live Site URL: Live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS, Sass
• Flexbox
• Desktop First Workflow

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Dark cyan: hsl(158, 36%, 37%)
• Cream: hsl(30, 38%, 92%)

Neutral

• Very dark blue: hsl(212, 21%, 14%)
• Dark grayish blue: hsl(228, 12%, 48%)
• White: hsl(0, 0%, 100%)

Typography

Body Copy

• Font size (paragraph): 14px

Font

• Family: Montserrat

• Weights: 500, 700

• Family: Fraunces

• Weights: 700