From e3429b02c8715c0c4542e5ff1addc2809892d77e Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Tue, 21 Feb 2023 13:35:08 +0000 Subject: [PATCH 1/3] html-css-coursework-week-4-Onur-Atas building a website --- css/main.css | 9 ++- index.html | 155 +++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 157 insertions(+), 7 deletions(-) diff --git a/css/main.css b/css/main.css index aa561706..eea6fa8e 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,8 @@ -/* Add your CSS here */ +body{ + background-color: white; + width: 100%; + margin: 0px; + height: 0px; + padding: 0px; -/* Dont' forget to link this file to your HTML in the */ +} \ No newline at end of file diff --git a/index.html b/index.html index cd704c69..081c218d 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,166 @@ + - + + + juice bar + - Responsive grid project + + + + +
+
+
+ +
+
+

juice bar

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

Fuel Your Body. Balance Your Mind.

+

Organic Cold Pressed Juices & Smoothies

+
+
+ +
+
+ +
+ +
+

Get 10% off your first Online Order.

+ Try Now +
+
+ +
+
+

What Makes Us Different

+
+
+
+

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

+
+
+
+

Local Delivery

+

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

+
+
+

In Store Pick Up

+

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

+
+
+

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 From 5f9e9f3d46775fbd62fd000e15de5e2c59c1cd44 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 8 Mar 2023 14:56:04 +0000 Subject: [PATCH 2/3] live --- .vscode/settings.json | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file From 6cc71c09e6c068d790ea2d50452c3dcaca25677f Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 26 Apr 2023 18:53:41 +0100 Subject: [PATCH 3/3] Update main.css --- css/main.css | 149 ++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 143 insertions(+), 6 deletions(-) diff --git a/css/main.css b/css/main.css index eea6fa8e..98e47fc0 100644 --- a/css/main.css +++ b/css/main.css @@ -1,8 +1,145 @@ -body{ - background-color: white; - width: 100%; - margin: 0px; - height: 0px; - padding: 0px; +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Quicksand:wght@300&display=swap'); +/* Colors */ +:root { + --dark-beige: #E6DACD; + --light-beige: #F4ECE6; + --royal-blue: #0150FD; + --black: #000; + --white: #FFF; +} + +/* Body */ +body { + font-family: 'Quicksand', sans-serif; + font-weight: 300; + margin: 0; + padding: 0; +} + +/* Headings */ +h1, h2 { + font-family: 'Poppins', sans-serif; + font-weight: 600; + margin: 0; +} + +/* Header */ +header { + background-color: var(--light-beige); + display: flex; + justify-content: space-between; + padding: 16px 32px; +} + +/* Navbar */ +.navbar { + display: flex; + align-items: center; +} + +.navbar-menu { + display: none; +} + +.navbar-title { + margin: 0 32px; +} + +.navbar-title h1 { + color: var(--royal-blue); +} + +.navbar-buttons-login { + display: flex; + align-items: center; + margin-right: 16px; +} + +.navbar-buttons-login a { + color: var(--black); + text-decoration: none; + margin-left: 8px; +} + +.navbar-buttons-orderonline { + background-color: var(--royal-blue); + padding: 8px 16px; + border-radius: 16px; +} + +.navbar-buttons-orderonline button { + color: var(--white); + font-weight: 600; + border: none; + background-color: transparent; + cursor: pointer; +} + +/* Content Section 1 */ +.content-section-1 { + display: flex; + justify-content: space-between; + padding: 32px; + background-color: var(--dark-beige); + color: var(--white); +} + +.content-section-1 h1 { + font-size: 48px; + margin-bottom: 16px; +} + +.content-section-1 h2 { + font-size: 24px; + margin-bottom: 32px; +} + +.content-section-1-explore-flavours button { + background-color: var(--white); + color: var(--royal-blue); + font-weight: 600; + border: none; + padding: 8px 16px; + border-radius: 16px; + cursor: pointer; +} + +/* Juice Banner */ +.juice-banner { + background-image: url('https://via.placeholder.com/1200x400'); + background-repeat: no-repeat; + background-size: cover; + height: 400px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.juice-banner p { + font-size: 24px; + margin-bottom: 16px; + color: var(--white); +} + +.juice-banner a { + background-color: var(--royal-blue); + color: var(--white); + font-weight: 600; + border: none; + padding: 16px 32px; + border-radius: 16px; + text-decoration: none; + cursor: pointer; +} + +/* Content Section 2 */ +.content-section-2 { + padding: 64px 32px; + text-align: center; +} + +.content-section-2 h1 { + font-size: 48 } \ No newline at end of file