diff --git a/1.jpeg b/1.jpeg new file mode 100644 index 00000000..261499d0 Binary files /dev/null and b/1.jpeg differ diff --git a/2.jpeg b/2.jpeg new file mode 100644 index 00000000..04ff2215 Binary files /dev/null and b/2.jpeg differ diff --git a/3.jpeg b/3.jpeg new file mode 100644 index 00000000..ec478e7f Binary files /dev/null and b/3.jpeg differ diff --git a/4.jpeg b/4.jpeg new file mode 100644 index 00000000..2e89cec5 Binary files /dev/null and b/4.jpeg differ diff --git a/css/main.css b/css/main.css index aa561706..026d877d 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,421 @@ -/* Add your CSS here */ -/* Dont' forget to link this file to your HTML in the */ + +:root { + --black: #000; + --white: #FFF; + --lylac: #f5e8ff; + --light-green: #E6FAC0; + --medium-green: #5E7D1F; + --dark-green: #394B2A; +} + +body { + margin: 0; + font-family: 'Roboto', sans-serif; + color: var(--black); + font-size: 1rem; + box-sizing: border-box; +} + +button { + font-family: 'Raleway', sans-serif; + background-color: transparent; +} + +h1, +h2, +h3, +h4 { + font-family: 'Questrial', sans-serif; + margin-top: 0; + margin-bottom: 0; +} + +p { + margin-top: 0; + margin-bottom: 0; + line-height: 1.8rem; +} + + +.header, +.footer { + padding: 0; + + margin: 0 auto; +} + +.main { + height: 100%; + + + /** HELP!! Is this correct using rem or should it be 5fr? **/ + grid-auto-rows: fit-content(15rem); +} + + + +/** Header **/ + +header { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + position: fixed; + right: 0; + left: 0; + z-index: 999; + background-color: white; +} + +.order_online { + grid-column: 1/-1; + display: flex; + justify-content: center; + padding: 1rem 0; + align-items: center; +} +.order_online button{ + background-color: white; +} +.order_online a { + background-color: var(--black); + color: var(--white); + text-decoration: none; + font-family: 'Questrial', sans-serif; + font-size: 1.5rem; + +} + +.juicebar_logo_menu { + grid-column: 1/-1; + background-color: var(--white); + display: flex; + justify-content: space-between; + padding: 1rem 0; +} + +.juicebar_logo_menu p { + font-size: 1.5rem; + font-family: 'Questrial', sans-serif; +} + +.header p{ + font-size: xx-large; + padding: 20px; + +} +/** Navigation **/ +/** Text Styles **/ +/** Buttons **/ + +button { + border: 2px solid var(--black); + padding: 0.8rem 3rem; + font-weight: 400; + align-self: center; + margin: 1rem; +} + +/** Content **/ + +.nav_list{ + display:none; +} +/** Hero **/ + +.hero { + grid-column: 1/-1; + background-color: var(--white); + padding: 2rem 0; + display: flex; + flex-direction: column; + text-align: center; +} + +.hero h1 { + font-size: 2rem; + font-weight: 500; +} + +.hero p { + font-weight: 400; + padding: 1rem 0; +} + +.hero_offer { + background-color: var(--lylac); +} + +.hero_offer a { + color: var(--black); +} + +/** Selling Points **/ + +.selling_points_section { + grid-column: 1/-1; + background-color: var(--white); + padding: 2rem; + display: flex; + flex-direction: column; + text-align: center; +} +.selling_points_row{ +display: flex; +} + +.selling_point { + margin: 1rem auto; + max-width: 200px; +} + +.selling_point h3 { + margin: 1rem auto; + max-width: 200px; +} + +/** Boosting Immunity **/ + +.boosting_immunity_section { + grid-column: 1/-1; + background-color: var(--light-green); + padding: 2rem; + display: flex; + flex-direction: column; + text-align: center; +} +.boosting_immunity{ + display: flex; + justify-content: center; +} +.boosting_immunity h2 { + margin: 1rem auto; + max-width: 200px; +} + +.boosting_immunity p { + margin: 1rem auto; + max-width: 250px; +} + +/** Wellness Product **/ + +.wellness{ + text-align: center; + padding: 20px; + margin:20px +} +.wellness_column{ + display: flex; +} + +.wellness_product{ + +} + +.wellness_path h2 { + margin-bottom: 1rem; +} + +.wellness_path h3 { + margin: 1rem auto; + max-width: 200px; +} + +.wellness_path p { + margin: 1rem auto; + max-width: 200px; +} + +/** Special Cleanse Kit **/ + +.special_cleanse_kit_section { + + background-color: var(--white); + padding: 2rem; + + flex-direction: column; + text-align: center; +} + +.special_cleanse_kit h2 { + margin: 1rem auto; + max-width: 200px; +} + +.special_cleanse_kit p { + margin: 1rem auto; + max-width: 250px; +} + + +/** Getting Juice **/ + +.get_juice_section { + + background-color: var(--light-green); + padding: 2rem; + display: flex; + flex-direction: column; + text-align: center; +} +.get_juice{ + display: flex; + justify-content: center; + +} +.getting_juice p:first-child{ + display: flex; + justify-content: space-around; + border: 1px solid black; + border-radius: 30px; + +} +.get_juice h2 { + margin-bottom: 1rem; +} + +.get_juice h3 { + margin: 1rem auto; + max-width: 200px; +} + +.get_juice p { + margin: 1rem auto; + max-width: 200px; +} + + +/** Follow Us **/ + +.follow_us_section { + grid-column: 1/-1; + background-color: var(--white); + padding: 2rem 0; + display: flex; + flex-direction: column; + text-align: center; +} + +.follow_us a { + color: var(--black); +} + +/** Gallery **/ + +.rotated_images_section { + grid-column-start: 6; + background-color: var(--white); + padding: 2rem 0; + display: flex; + flex-direction: column; + align-self: center; +} + +.rotated_images { + position: relative; + display: flex; + flex-direction: column; + align-self: center; +} + +.rotated_images img { + position: absolute; + z-index: 10; + display: block; + +} + +.img1 { + left: 2px; + top: 5rem; + transform: rotate(15deg); +} + +.img2 { + right: 2px; + transform: rotate(-15deg); +} + +.img3 { + right: 2px; + top: 10rem; + transform: rotate(15deg); +} + +.img4 { + transform: rotate(-25deg); + top: 15rem; +} + + + +/** Footer **/ + +.footer { + grid-column: 1/-1; + grid-row-end: auto; + background-color: var(--dark-green); + padding: 2rem; +} + +.footer_menu_socials { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 2rem; +} + +.footer_nav_list { + list-style-type: none; + padding: 0; +} + +.nav_link { + text-decoration: none; + color: var(--white); + line-height: 2rem; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +.mailing_list_form { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 2rem; +} + +.customer_email { + display: flex; + flex-direction: column; +} + +input[type=email] { + padding: 0.5rem 0; + background-color: transparent; + border: none; + border-bottom: 2px solid var(--white); +} + +.serving_safely { + font-size: 1.5rem; + color: var(--white); + margin-bottom: 2rem; +} + +.serving_safely a { + color: var(--white); +} + +.creators_credit { + margin: 2rem 0; + color: var(--white); +} + +/** Media Queries **/ diff --git a/css/main.js b/css/main.js new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html index cd704c69..78f192e3 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,339 @@ - - - - - + + + + + + + + - Responsive grid project - + Fruit Box + - + +
+
+ + +

Order Online

+ +
- +

Juice Bar

+ + + + +
+
+
+
+

Fuel Your Body.
Balance Your Mind.

+

Organic Cold Pressed Juices & Smoothies

+ - -

This website design was created by Wix.com, and is used here for strictly educational purposes.

- + Image of fresh fruit and juices - \ No newline at end of file +
+

+ Get 10% off your first online Order.
+ Try Now +

+
+
+ +
+

What Makes Us
Different

+
+
+ Locally Sourced Icon +

Locally Sourced

+

+ I'm a paragraph. Click here to add your own text and edit me. Let + your users get to know you. +

+
+ +
+ Natural Ingredients Icon +

100% Natural Ingredients

+

+ I'm a paragraph. Click here to add your own text and edit me. Let + your users get to know you. +

+
+ +
+ Just Picked Freshness Icon +

Just Picked Freshness

+

+ I'm a paragraph. Click here to add your own text and edit me. Let + your users get to know you. +

+
+
+
+ +
+
+ Image of immunity boosting fruit +
+

+ Boosting
Immunity the Way
+ Nature Intended +

+

+ I'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. I’m a great place for you to + tell a story and let your users know a little more about you. +

+ +
+ +
+
+ +
+

Choose Your Wellness Path

+
+
+ Image of cold pressed juices +

Pure Hydration with Cold Pressed Juices

+

+ I'm a paragraph. Click here to add your own text and edit me. + Let your users get to know you. +

+
+ +
+ Image of organic smoothies +

Soft & Creamy Organic Smoothies

+

+ I'm a paragraph. Click here to add your own text and edit me. + Let your users get to know you. +

+
+ +
+ Image of wellness shots +

The Power of Wellness Shots

+

+ I'm a paragraph. Click here to add your own text and edit me. + Let your users get to know you. +

+
+
+ +
+ +
+
+ Image of cleanse kit +

Discover Our Special Cleanse Kit

+

+ I'm a paragraph. Click here to add your own text and edit me. It’s + easy. Just click “Edit Text” or double click me to add your own + content and make changes to the font. I’m a great place for you to + tell a story and let your users know a little more about you. +

+ +
+
+ +
+ +

Get Juice Bar

+
+
+

01

+

Local Delivery

+

+ I'm a paragraph. Click here to add your own text and edit me. +

+
+ +
+

02

+

In Store Pick Up

+

+ I'm a paragraph. Click here to add your own text and edit me. +

+
+ +
+

03

+

Curbside Pick Up

+

+ I'm a paragraph. Click here to add your own text and edit me. +

+
+
+
+ + + +
+
+ Image of fruit in a bag + Image green fruit and juice + Image of yellow fruit and juice + Image of hand reaching for fruit +
+
+
+ + +
+ +

+ This website design was created by Wix.com, and is used here for strictly + educational purposes. +

+ + diff --git a/menu-hamburger.svg b/menu-hamburger.svg new file mode 100644 index 00000000..d97acc7f --- /dev/null +++ b/menu-hamburger.svg @@ -0,0 +1,3 @@ + + +