Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hirwa13/order-summary-component-main
https://github.com/hirwa13/order-summary-component-main
Last synced: 17 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hirwa13/order-summary-component-main
- Owner: HIRWA13
- Created: 2023-03-21T11:41:22.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-21T11:59:47.000Z (almost 2 years ago)
- Last Synced: 2023-09-09T01:59:32.722Z (over 1 year ago)
- Language: CSS
- Size: 118 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Order summary card solution
This is a solution to the [Order summary card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Overview
### The challenge
Users should be able to:
- See hover states for interactive elements
### Screenshot
See the design directory
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
### 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](https://fonts.google.com/specimen/Red+Hat+Display)
- Weights: 500, 700, 900