codeyourfuture / html-css-coursework-week4

Create a multi-page, fully responsive website with CSS Grid

Make a multi-page responsive website using CSS Grid

Choose one of the designs below, and re-create the design to perfection, using CSS Grid, and media queries to make the site fully responsive.

Requirements

1. Create a mobile-first, responsive website
2. Use CSS Grid and flexbox for layouts and alignment
3. Save fonts and colours in CSS variables

Style guide

Here are 3 designs to choose from, along with suggested fonts and colours to use for your chosen projects:

DESIGN 1: Prickles & Co

An e-commerce site selling plants

Live demo here: https://www.wix.com/website-template/view/html/1995

Fonts

Headings: Fjalla One - Regular 400
https://fonts.google.com/specimen/Fjalla+One
Subheadings: Outfit - Extra-light 200
https://fonts.google.com/specimen/Outfit
Body: Outfit - Extra-light 200
https://fonts.google.com/specimen/Outfit

Colors

Red Brown: #A05941
Green Black: #133032
Light Grey: #EDEDEE
White: #FFF
Transparent White: rgba(0,0,0,0.75)

=====================================

DESIGN 2: Resume

A website to showcase skills and projects

Live demo here: https://www.wix.com/website-template/view/html/2622

Fonts

Headings: Poppins - Semi-bold 600
https://fonts.google.com/specimen/Poppins
Body: Quicksand - Light 300
https://fonts.google.com/specimen/Quicksand

Colors

Dark beige: #E6DACD
Light beige: #F4ECE6
Royal blue: #0150FD
Black: #000
White: #FFF

=====================================

DESIGN 3: Juice Bar

An e-commerce site for fruit juices

Live demo here: https://www.wix.com/website-template/view/html/2962

Fonts

Headings and subheadings: Questrial - Regular 400
https://fonts.google.com/specimen/Questrial
Buttons: Raleway - Regular 400
https://fonts.google.com/specimen/Raleway
Body: Roboto - Light 300
https://fonts.google.com/specimen/Roboto

Colors

Black: #000
White: #FFF
Lylac: #f5e8ff
Light Green: #E6FAC0
Medium Green: #5E7D1F
Dark Green: #394B2A

=====================================

Crediting

Very important: please credit the designer in your footer with the sentence "This website design was created by Wix.com, and is used here for strictly educational purposes."

html-css-coursework-week4's Issues

Missing PR template on HTML W4

Expected: a PR template to be available to trainees
Actual: there's no PR template on this week 4 repo.

Suggestion: add the github resources from Week 3 https://github.com/CodeYourFuture/HTML-CSS-Coursework-Week3/tree/master/.github

Mistake

The website link for assignment is no longer available in the wix Template

The website link for assignment is no longer available in the wix Template

https://github.com/CodeYourFuture/HTML-CSS-Coursework-Week4#design-1-prickles--co