Stats Preview

A stats preview made with HTML and CSS/Sass.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Screenshot

Links

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

My process

Built with

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

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Primary

• Very dark blue (main background): hsl(233, 47%, 7%)
• Dark desaturated blue (card background): hsl(244, 38%, 16%)
• Soft violet (accent): hsl(277, 64%, 61%)

Neutral

• White (main heading, stats): hsl(0, 0%, 100%)
• Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
• Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)

Typography

Body Copy

• Font size: 15px

Font

• Family: Inter

• Weights: 400, 700

• Family: Lexend Deca

• Weights: 400