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.
- Create a mobile-first, responsive website
- Use CSS Grid and flexbox for layouts and alignment
- 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."