diff --git a/css/main.css b/css/main.css index aa561706..bd487896 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,119 @@ -/* Add your CSS here */ -/* Dont' forget to link this file to your HTML in the */ + + body{ + background-color: var(--main-background-color); + width: 100%; + margin: 0px; + height: 0px; + padding: 0px; + } + + h1, h2, h3, h4, h5, h6, a, span{ + font-weight: lighter; + } + + button{ + background-color: var(--main-background-color); + border: solid var(--Black); + cursor: pointer!important; + border-width: medium; + } + + /* --------------------------------------- */ + + /* Header Section */ + + /* --------------------------------------- */ + .page-div-box{ + height: 9%; + position: fixed; + bottom: 0; + width: 100%; + background-color: #f9fafa; + } + + header { + background-color: var(--White); + display: flex; + justify-content: space-between; + align-items: flex-start; + + font-size: 23px; + font-family: var(--font1); + + position: fixed; + top: 0; + width: 100%; + } + + .navbar-icon { + margin: 39px 79px; + } + + .navbar-content { + display: flex; + align-items: center; + } + + .navbar-content-login { + font-size: 18px; + } + .navbar-content-login a { + text-decoration: none; + padding-right: 12px; + } + + .navbar-content-orderOnline button{ + padding: 31px 52px; + background-color: var(--Black); + color: var(--White); + font-size: 17px; + } + + /* --------------------------------------- */ + + /* fuel Your body Section */ + + /* --------------------------------------- */ + + .main-section-1{ + display: flex; + align-items: center; + flex-direction: column; + text-align: center; + background-color: var(--White); + padding-bottom: 15px; + + margin-top: 5%; + } + .main-section-1-heading h1{ + line-height: 1.2em; + font-size: 50px; + } + + .main-section-1-heading h3{ + font-size: 25px; + } + + .main-section-1-button button{ + padding: 23px 71px; + } + + /* --------------------------------------- */ + + /* fuel Your body Section */ + + /* --------------------------------------- */ + .heroBanner{ + display:flex; + + } + .heroBanner-image{ + background-image: url("https://static.wixstatic.com/media/c837a6_e9a98eea8cf6418088d411361c2f32a1~mv2.jpg/v1/fill/w_1903,h_903,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/c837a6_e9a98eea8cf6418088d411361c2f32a1~mv2.jpg"); + height: 600px; + width: auto; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-position: center; + } diff --git a/css/root.css b/css/root.css new file mode 100644 index 00000000..9fab04da --- /dev/null +++ b/css/root.css @@ -0,0 +1,38 @@ +:root { + /* colors */ + --red:blue; + --lylac: #f5e8ff; + --LightGreen: #E6FAC0; + --MediumGreen: #5E7D1F; + --DarkGreen: #394B2A; + --White: #fff; + --Black: #000; + + --main-background-color: #f9fafa; + + --font1: normal normal normal 30px/1.4em questrial,sans-serif; + + + + /* transition */ + --transit: border-color 0.4s ease 0s, background-color 0.4s ease 0s; + + + /* flex */ + --display: flex; + --display-center: center; + + + /* second flex */ + +} + +/* +header{ + transform: translateY(-500%); + transition: transform 9s ease-in-out; + } + + header.show { + transform: translateZ(0); + } */ \ No newline at end of file diff --git a/index.html b/index.html index cd704c69..b29c668c 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,244 @@ + - + + + + Juice Bar - Responsive grid project + + + + + + - +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+
+

Fuel Your Body. Balance Your Mind.

+

Organic Cold Pressed Juices & Smoothies

+
+
+ +
+
+ +
+
+ + +
+
+

Get 10% off your first Online Order. Try Now

+
+
+ +
+
+
+

Locally Sourced

+

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

+
+
+
+

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

+

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

+
+
+ +
+
+ +
+ +
+

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

+
+
+
+
+ +
+

Pure Hydration with Сold Pressed Juices

+

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

+
+ +
+
+ +
+

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.

+
+ +
+
+ +
+

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.

+
+
+
+ +
+
+ +
+
+ +
+
+

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. Feel free to drag and drop me + anywhere + you like on your page. 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.

+
+
+
+ +
+ + + +
+ +
+ + - -

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

+
\ No newline at end of file