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.

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

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

An e-commerce site selling plants

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

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

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

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

A website to showcase skills and projects

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

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

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

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

An e-commerce site for fruit juices

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

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

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

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

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."