From 90d2b2aab1e005add64786594ba797f4d9ac93ee Mon Sep 17 00:00:00 2001 From: batuncer Date: Wed, 15 Mar 2023 12:56:44 +0000 Subject: [PATCH 1/3] I couldnot finished yet but i added html and css files and context --- 1.jpeg | Bin 0 -> 988 bytes 2.jpeg | Bin 0 -> 1176 bytes 3.jpeg | Bin 0 -> 964 bytes 4.jpeg | Bin 0 -> 939 bytes css/main.css | 400 ++++++++++++++++++++++++++++++++++++++++++++- index.html | 340 ++++++++++++++++++++++++++++++++++++-- menu-hamburger.svg | 3 + 7 files changed, 728 insertions(+), 15 deletions(-) create mode 100644 1.jpeg create mode 100644 2.jpeg create mode 100644 3.jpeg create mode 100644 4.jpeg create mode 100644 menu-hamburger.svg diff --git a/1.jpeg b/1.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..261499d0cdc14b33119dfc41652003548c0a1875 GIT binary patch literal 988 zcmex=OMR*(oAJ5W+zfPsmT znVE@&m6;VH&B(;ez#_;hq-f|UED~6#WaN}MkZ*fad@4ZRzX+FKOKl0ENlE8Cffr+vPK z+uq6QJMJ;dp8RF~vz3oezW%3ewb)zA?D|B}z1$4h%G>f^S{({|cszhNSLW2861%qM zm7&tl<*RMiBnEA0ioMS*S1liPZ`+})?7+-MpWjc^H#`W{3Ryqvc7EiUz;c~mZHv|B zW*R%P?phstUh?pyJ8QhEg)DWiFztBqL~C!q+m?M9(_J>qJ9lH%{kvXWZ@KNvo=osg z5IE!cFhVMK$)19Z_$KzN>Br`*gHL8NYn^!!+xR>A zp?reYbf>6y!VBE4Z*%?Al5TF+GHJ!!C;j$%7f%KrWcWBQ^M*o$;|W`iCAVU3+xwi@ z{^`e}i)u}o@vjBNoQ~ho^OatBT*XRlzQ~c8LDy7^{8gJ6G7_Zt_*`ZBBpJUh$X?hX z!M1L-g`q!R$ZC(>GW|!xc5dyL;L7Wta9wdn{_S{;?NcTmI%Sk>cSJ0{wt26{?oC&| z{Jtx9>Qr`kquRvW)H#M3;fL~Dr_}tA`8?0(+gm0(c(%FEyt!DtDP-D-e^c%*D7-xJ+p3EEKmLz4?Ko%8$<}mD zyG&Pdx=O~7YC$h43EZOk? FCIIa(eR%)? literal 0 HcmV?d00001 diff --git a/2.jpeg b/2.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..04ff2215c749968343d605c93c31c9cfec5de4b5 GIT binary patch literal 1176 zcmex=HOX4n+V~Hb!O^CZL?L00R>v zGZQllCo?NVnvsc_frXV#P)IS*(5P{uu!xefV^Ct@LZ_sS>?)?tML?{7|9LFC$HnZsXsk%w7sP3io)){{*gS1Mt1jTxb59w`XNq;_xgX<^T zy}iBKqCa$(7mLjlzWwSGGs{1YJN=C-cQI-moHD`P!0|?x(QLikXItk!*xC7TCf}L9 z-GUFJUagj&+8pRIW38u#@b{cgIkr1)KbRzcrG4cyt#akm!rpzePJJ?(eCTMb|0lb) z)xvY;wmn<Z_wG~Px}@%r{Lk1uud0q2>VDmld$)3;|BVeIk7G}y zT>TmQpTXr`Pwf;2d!~7UGJ$(8=>#g<^p%AM?o?l}yy*6lD&3TdraL@~-OhyHVsNvp zyp&z}WZRCu3YjGv4N4L}C~umP`uTcg#w5*0TbooTF4fHC=&@;^SoZ3El*R8$v!`B+ z3{6W|wY2jMLteICUwgV+@Wr;P?6a1iF+7`@t#f+rd!6}L@@_v?%H5M!w>xj2sA0&i z{Ch9g`ZAY?-P3INd+?k5S%V{Qj3mg|Ld28tjKi}-iv+-ynF1v(XMYl z+vG&8L(K%|dM~>!Gw)isnB?2(k4@NTE4&K%Ebq14Q`c1_KqUV1C$`mFRChRd`itHE z@O#^HpW^L;DO;L-#R5N_&#&53e3pN4#ndTp7OzlSs-wSd4nd|w71JoJDFU6{QjNWefK1uDAw%OJXfw)vUO+q1Mke4 z`$BsrKiz7z>5^q+(%0Evd_rfuk4fQQB*#^|s79NA%~$R9+-d8!{SvTO2&&$_diKp) z-KR%3pZx6gwEtPJ;NN>mhXvF1?0u@7KJ!V>nbMr88b6W!Mf}N?t29>KY5#u{08ta= AS^xk5 literal 0 HcmV?d00001 diff --git a/3.jpeg b/3.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..ec478e7f35ee908f1bf403935a34a6f3330202ab GIT binary patch literal 964 zcmex=Ge90Rfm{8`LjVG-*v$&990(;fbdEr*S6u+FmTDsfTNV{$7nMscF zohpIa)>>ar-r}=39~17kcgcIfWeZt0P2lJf`>3MuTj|Mn+0}Yi(7f-WU=S zf8MAy^G@X)txuK8>=p+e)Z}Co+DN%B@?e;7OwM7ix%tff^E{vLk7}DFc;aieTB-ZQ z2jv!_J3Alh)V6&vs_)vhS>L4Mspo#FOvTFLohivW`tue(PHy6_N%$=o_~Ls|R7|(z zL67bk)69zQu`Ddl;i>gF{Vb?bLi-KVk{@h8RAlMd;Nz3C zH|mas_XfXdQ4uu0|76w*ECN_4Uq@Dl+ z6C*P-BO5C#R0SgwGXskttB|6hu#%%w;zTwP(ZEI{ZIQKe_D)`N$5-KVpwN?_$Dahfa%Ko=;&0Ea z@yD0vY3FVHcHP>Owb8=m#0M2ayY9Z03zJ?4%zTnDC|5lx!-r^w#M8yTO*vi zQ!FD?HTUm6z#t%P%jRHlTIz*%|Hbw07yrrjDou)?zOA!q#owDg79l|u4uOsq^&GY@zO_waedAKyS?=3Amj!Ivq**G< zoILTpd&{HHe=o27No(89Sz>*vRzu{;%e{P7eXi=EHAU55?X==84)-#Wo7^ha*vI!1)dmsMUz31I4 ztE>|?UC)*%cU{U`@++_T)0!Ra-XXId^q$U%ac}MyQ;^~3Ti$$j)luH3D=xiJnz>eX zb7irSfsp3Ywg{#-e>r6s=eaQ~+b6Q&SN!3s+}REaleANWju}q)?e=EkmFJeG*}kVI zsOB@AS^YjL*lcA(%#RP6SLHPqt~-3`^Wn)m?UiP%j9$)a+OurS`jvirJpQ`d7dn~U zPx~%9Da5zL&#-DrVNOl-pG7Jhd*=DC)wpOTao{j#@#I7Q8E)ki7-)s8Exop2ho+AG G|C<057-dob literal 0 HcmV?d00001 diff --git a/css/main.css b/css/main.css index aa561706..7fbaec60 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,399 @@ -/* 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; +} + +.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_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 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 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: 1px; + 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/index.html b/index.html index cd704c69..ba30f02e 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,335 @@ - - - - - + + + + + + + + - 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 @@ + + + From fac17f8927ff847e3c0b870e771e2b9d7530e1da Mon Sep 17 00:00:00 2001 From: batuncer Date: Thu, 16 Mar 2023 10:12:12 +0000 Subject: [PATCH 2/3] css editted --- css/main.css | 21 +++++++++++++++++++-- index.html | 9 +++++++-- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/css/main.css b/css/main.css index 7fbaec60..6917db7a 100644 --- a/css/main.css +++ b/css/main.css @@ -156,6 +156,9 @@ button { flex-direction: column; text-align: center; } +.selling_points_row{ +display: flex; +} .selling_point { margin: 1rem auto; @@ -177,7 +180,10 @@ button { flex-direction: column; text-align: center; } - +.boosting_immunity{ + display: flex; + justify-content: center; +} .boosting_immunity h2 { margin: 1rem auto; max-width: 200px; @@ -249,7 +255,18 @@ button { 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; + padding: 10px; +} .get_juice h2 { margin-bottom: 1rem; } diff --git a/index.html b/index.html index ba30f02e..787bc9ee 100644 --- a/index.html +++ b/index.html @@ -77,7 +77,7 @@

Fuel Your Body.
Balance Your Mind.

What Makes Us
Different

- +
Locally Sourced Icon

Locally Sourced

@@ -104,6 +104,7 @@

Just Picked Freshness

your users get to know you.

+
@@ -112,6 +113,7 @@

Just Picked Freshness

src="https://static.wixstatic.com/media/c837a6_8172122a715c426caa6320c37c94eb0b~mv2.jpg/v1/crop/x_3130,y_1104,w_2143,h_2917/fill/w_557,h_749,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/CHOSEN_IMG_0119%20(1).jpg" alt="Image of immunity boosting fruit" /> +

Boosting
Immunity the Way
Nature Intended @@ -123,6 +125,8 @@

tell a story and let your users know a little more about you.

+

+
@@ -186,8 +190,9 @@

Discover Our Special Cleanse Kit

-
+

Get Juice Bar

+

01

Local Delivery

From 5ff32cfa16b3c09f11754a9a05ae94e7cb2f39e8 Mon Sep 17 00:00:00 2001 From: batuncer Date: Fri, 17 Mar 2023 17:42:42 +0000 Subject: [PATCH 3/3] css and html editted --- css/main.css | 9 +++++++-- css/main.js | 0 index.html | 1 - 3 files changed, 7 insertions(+), 3 deletions(-) create mode 100644 css/main.js diff --git a/css/main.css b/css/main.css index 6917db7a..026d877d 100644 --- a/css/main.css +++ b/css/main.css @@ -61,6 +61,11 @@ 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 { @@ -265,7 +270,7 @@ display: flex; justify-content: space-around; border: 1px solid black; border-radius: 30px; - padding: 10px; + } .get_juice h2 { margin-bottom: 1rem; @@ -329,7 +334,7 @@ display: flex; } .img2 { - right: 1px; + right: 2px; transform: rotate(-15deg); } 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 787bc9ee..78f192e3 100644 --- a/index.html +++ b/index.html @@ -296,7 +296,6 @@

Follow Us

Join Our Mailing List

-