https://github.com/hirwa13/results-summary-component-main

https://github.com/hirwa13/results-summary-component-main

Last synced: 17 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/hirwa13/results-summary-component-main
• Owner: HIRWA13
• Created: 2023-03-03T15:04:13.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-04-24T06:28:32.000Z (over 1 year ago)
• Last Synced: 2023-09-09T01:59:33.502Z (over 1 year ago)
• Language: CSS
• Size: 267 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Live site

[Results Summary Design](https://sparkly-meringue-ade8a8.netlify.app/)

# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px

- Desktop: 1440px

## Colors

### Primary

- Light red: hsl(0, 100%, 67%)

- Orangey yellow: hsl(39, 100%, 56%)

- Green teal: hsl(166, 100%, 37%)

- Cobalt blue: hsl(234, 85%, 45%)

## Gradients

- Light slate blue (background): hsl(252, 100%, 67%)

- Light royal blue (background): hsl(241, 81%, 54%)

- Violet blue (circle): hsla(256, 72%, 46%, 1)

- Persian blue (circle): hsla(241, 72%, 46%, 0)

### Neutral

- White: hsl(0, 0%, 100%)

- Pale blue: hsl(221, 100%, 96%)

- Light lavender: hsl(241, 100%, 89%)

- Dark gray blue: hsl(224, 30%, 27%)

### Notes

Use transparency to get the colour variations necessary to match the design. Hint: look into using `hsla()`.

## Typography

### Body Copy

- Font size (paragraphs): 18px

### Font

- Family: [Hanken Grotesk](https://fonts.google.com/specimen/Hanken+Grotesk)

- Weights: 500, 700, 800

#### Coded by [ME]