negindn / responsive-grid-project

Create a website using a 12-column grid system

Make a website using Bootstrap's 12-column grid system

Choose one of the designs below, and re-create the design to perfection, using Bootstrap.

Note: Boostrap is already loaded into the head of index.html

Responsive grid reminder

Follow Boostrap grid rules with care:

• Apply the container class to each of your page sections (unless you have a background image or colour that you want to bleed to the edges of the page at all times, in which case you should nest the container inside your full-width section)
• Wrap each set of elements inside a row class (this is your flex container!)
• Apply a column class (col-[__]) to the elements you want to place on the grid.
• If the column class doesn't specify a breakpoint (e.g. col-md-6 uses the md breakpoint but col-6 doesn't) then it will apply for all screen sizes (equivalent of min-width: 0).
• Don't change the width, padding or margin of the items that have a col-[__] class on them. This would clash with the Boostrap CSS.

Style guide

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

DESIGN 1: Therapy

https://www.wix.com/website-template/view/html/2055

Fonts

Headings: Libre Baskeville 400
https://fonts.google.com/specimen/Libre+Baskerville
Subheadings: Libre Baskeville Italic 400
https://fonts.google.com/specimen/Libre+Baskerville
Body: Quicksand Light 300
https://fonts.google.com/specimen/Quicksand

Colors

Text colour: #2F2F2E

Lime green: #E2F6CD
Light grey: #F2F2F1
Light mint: #CFF4EC
Medium mint: #94D6C8
Dark green: #4D7369

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

DESIGN 2: Resume

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

Text colour: #000

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

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

DESIGN 3: Festival

https://www.wix.com/website-template/view/html/2332

Fonts

Headings: Cinzel Regular 400
https://fonts.google.com/specimen/Cinzel
Body: Quicksand Light 300
https://fonts.google.com/specimen/Quicksand

Colors

Text colour: #190E40

Golden brown: #C78003
Light pink: #F9A988
Powder blue: #5362AC
Navy blue: #190F3F
Jade green: #1B7B57

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

Crediting

Very important: please credit the designer in your footer with the sentence "This website was designed by Wix.com"