Frontend_Mentor-Order-Summary-Card

frontend-mentor-Order-summary

This is the 1st challenge. Needed to reproduce an Order Summary component. Below is the style guide.

Brief: Your challenge is to build out this order summary card component and get it looking as close to the design as possible.

Style Guide:

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Pale blue: hsl(225, 100%, 94%)
• Bright blue: hsl(245, 75%, 52%)

Neutral

• Very pale blue: hsl(225, 100%, 98%)
• Desaturated blue: hsl(224, 23%, 55%)
• Dark blue: hsl(223, 47%, 23%)

Typography

Body Copy

• Font size (paragraph): 16px

Font

• Family: Red Hat Display
• Weights: 500, 700, 900