diff --git a/images/1. White.png b/images/1. White.png new file mode 100644 index 0000000..749cb87 Binary files /dev/null and b/images/1. White.png differ diff --git a/images/2. White.png b/images/2. White.png new file mode 100644 index 0000000..d87d92e Binary files /dev/null and b/images/2. White.png differ diff --git a/images/Logo.svg b/images/Logo.svg new file mode 100644 index 0000000..9388d38 --- /dev/null +++ b/images/Logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/ic_call.svg b/images/ic_call.svg new file mode 100644 index 0000000..3e44edf --- /dev/null +++ b/images/ic_call.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/ic_near_me.svg b/images/ic_near_me.svg new file mode 100644 index 0000000..9a802fb --- /dev/null +++ b/images/ic_near_me.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/ic_watch_later.svg b/images/ic_watch_later.svg new file mode 100644 index 0000000..ecdafcd --- /dev/null +++ b/images/ic_watch_later.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/placeholder(1).png b/images/placeholder(1).png new file mode 100644 index 0000000..5d01c9b Binary files /dev/null and b/images/placeholder(1).png differ diff --git a/images/placeholder(2).png b/images/placeholder(2).png new file mode 100644 index 0000000..b2f83e6 Binary files /dev/null and b/images/placeholder(2).png differ diff --git a/images/placeholder.png b/images/placeholder.png new file mode 100644 index 0000000..3856bf3 Binary files /dev/null and b/images/placeholder.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e790370 --- /dev/null +++ b/index.html @@ -0,0 +1,175 @@ + + + + + + Healthy Food Delivery + + + + + + + +
+ +
+ +
+ +
+

+ Your + favourite food + delivered + hot & fresh +

+ +

+ HEALTHY SWITCHER chefs do all the prep work, like peeling, chopping & + marinating, so you can cook a fresh homemade dinner in just 15 + minutes. +

+ + + + + +
+
+ icon watch +

Today 10:00 am - 7:00 pm

+

Working hours

+
+ +
+ icon near me +
+

Velyka Vasylkivska 100

+

Get Directions

+
+
+ +
+ icon call +
+ +38 (063)833 24 15 +

Call Online

+
+
+
+
+
+ + +
+
+

The Basic Of Healthy Food

+

ABOUT

+
+ +
+

+ In aliqua ea ullamco ad est ex non deserunt nulla. Consectetur sint ea + aliquip aliquip consectetur voluptate est. Eu minim dolore laboris + enim mollit voluptate irure esse aliquip. +

+ +
+ left-row + + section2 img1 + + section2 img2 + + right-row +
+
+
+ + +
+
+

How It Works

+

WORK

+
+
+ +
+
+

Pick Meals

+
+

+ Choose your meals from our diverse weekly menu. Find gluten or dairy + free, low carb & veggie options. +

+
+ +
+

Choose How Often

+
+

+ Our team of chefs do the prep work - no more chopping, measuring, or + sink full of dishes! +

+
+ +
+

Fast Deliveries

+
+

+ Your freshly prepped 15-min dinner kits arrive on your doorstep in a + refrigerated box. +

+
+ +
+

Tasty Meals

+
+

+ Gobble makes cooking fast, so you have more time to unwind and be + with family. +

+
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..05449e7 --- /dev/null +++ b/style.css @@ -0,0 +1,510 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + width: 100%; + height: 200vh; + background: linear-gradient( + to right, + #1a1a1a 0.01%, + #212121 50%, + #1a1a1a 99.99% + ); +} + +/* SITE MAIN */ +main { + height: 1080px; + background-image: url(./images/placeholder.png); + background-repeat: no-repeat; +} + +/* SITE HEADER */ +header { + position: sticky; + top: 1px; + border-bottom: 1px solid gray; + background: linear-gradient( + to right, + #1a1a1a 0.01%, + #212121 50%, + #1a1a1a 99.99% + ); +} + +/* SITE NAV BAR */ +nav { + width: 1110px; + height: 90px; + display: flex; + margin: auto; + align-items: center; + justify-content: space-around; +} + +nav div:hover { + transform: scale(1.1); +} + +nav div img { + width: 25px; + height: 24px; + align-items: center; +} + +nav div h6 { + width: 173.16px; + height: 10.46px; + display: inline-block; + color: #34c759; + font-size: 12px; + margin-left: 7px; + font-family: Arial, Helvetica, sans-serif; +} + +nav ul { + width: 303px; + height: 90px; + display: flex; + align-items: center; +} + +nav ul li { + list-style-type: none; +} + +nav ul li:hover { + transform: scale(1.2); +} + +nav ul li a { + width: auto; + height: 90px; + margin: 0 30px; + text-decoration: none; + color: white; + font-weight: 700; + font-size: 14px; + line-height: 90px; + font-family: Arial, Helvetica, sans-serif; +} + +.nav-main-list a { + color: #34c759; +} + +/* END OF SITE NAV BAR */ + +/* HERO SECTION */ + +.hero { + padding-top: 70px; +} +.hero h1 { + width: 1100px; + height: 163px; + font-family: Arial, Helvetica, sans-serif; + font-size: 72px; + line-height: 84.38px; + letter-spacing: 11px; + color: white; + align-items: center; + margin: 0 auto; + text-align: center; +} + +.hero h1 span { + font-family: "Roboto", sans-serif; + font-weight: 300; + font-size: 72px; + line-height: 60px; + letter-spacing: 10px; + align-items: center; +} + +.hero-p1 { + width: 595px; + height: 52px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 26px; + letter-spacing: -0.2px; + color: rgba(255, 255, 255, 0.7); + align-items: center; + text-align: center; + margin: 30px auto; +} + +.hero button { + width: 220px; + height: 72px; + background-color: #34c759; + border-top-left-radius: 40px; + border-top-right-radius: 40px; + border-bottom-left-radius: 40px; + border-bottom-right-radius: 40px; + border: none; + margin-left: 45%; + margin-top: 25px; + margin-bottom: 60px; +} + +.hero button:hover { + transform: scale(1.1); +} + +.hero button a { + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 21.78px; + letter-spacing: 2px; + color: #1a1a1a; +} + +/* CARD BOX */ +.hero-cardBoxDiv { + width: 1100px; + height: 130px; + display: flex; + margin-left: 13%; + justify-content: space-around; + align-items: center; +} + +.hero-cardBoxDiv div { + width: 245px; + height: 110px; +} + +.hero-cardBoxDiv div img { + width: 20.08px; + height: 20px; + margin: 7px 45%; +} + +.hero-cardBoxDiv div h4 { + width: auto; + height: 30px; + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + color: white; + font-weight: 400; + line-height: 30px; + text-align: center; + font-size: 16px; +} + +.hero-cardBoxDiv div p { + width: 122px; + height: 24px; + color: rgba(255, 255, 255, 0.5); + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 14px; + margin: 20px 30%; + font-style: normal; +} + +.hero-card3 address { + padding-top: 4px; +} + +.hero-card3 a { + width: auto; + height: 30px; + color: white; + margin-left: 23%; + text-decoration: none; + font-style: normal; +} + +.hero-card3 p { + padding-top: 12px; + padding-left: 15px; +} + +/* SECTION 2 */ +.section2 { + width: 1110px; + height: 650px; + background-color: #252525; + box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); + margin: -200px auto; +} + +.section2-mainDiv { + width: 577px; + height: 175px; + margin: auto; + position: relative; +} + +.section2-mainDiv h3 { + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 30px; + line-height: 60px; + letter-spacing: 8px; + position: absolute; + color: white; + left: 1%; + top: 25%; + z-index: 1; +} + +.section2-mainDiv h1 { + width: 351px; + height: 150px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 900; + font-size: 100px; + line-height: 150px; + letter-spacing: 18px; + color: rgba(211, 211, 211, 0.1); + position: absolute; + z-index: 0; + left: 8%; +} + +.section2-imgInfoDiv p { + width: 734px; + height: 60px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 30px; + text-align: center; + margin: 30px auto; + color: #a6a6a6; +} + +.section2-imgDiv { + width: 1000px; + height: 270px; + margin: auto; + display: flex; + justify-content: space-around; + align-items: center; +} + +.leftRow, +.rightRow { + width: 60px; + height: 60px; +} + +.section2-imgDiv img:hover { + transform: scale(1.1); +} + +/* SECTION 3 */ +.section3 { + width: 1110px; + height: 550px; + margin: auto; +} + +.section3-mainDiv { + width: 530px; + height: 150px; + margin-top: 350px; + margin-left: 28%; + position: relative; +} + +.section3-mainDiv h3 { + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 36px; + line-height: 90px; + letter-spacing: 8px; + color: white; + position: absolute; + z-index: 1; + left: 130px; + top: 35px; +} + +.section3-mainDiv h1 { + font-family: Arial, Helvetica, sans-serif; + font-weight: 900; + font-size: 100px; + line-height: 150px; + letter-spacing: 18px; + color: rgba(211, 211, 211, 0.1); + position: absolute; + z-index: 0; + left: 70px; +} + +.section3-mainDiv span hr { + width: 65px; + height: 2px; + border: 2px solid #34c759; + position: absolute; + left: 225px; + top: 145px; +} + +/* SECTION3 CARD BOX */ +.section3-cardBox { + width: 1110px; + height: 210px; + display: flex; + justify-content: space-around; + margin-top: 100px; +} + +.section3-cardBox div:hover { + transform: scale(1.1); +} + +.s3-card1 { + background-color: rgba(52, 199, 89, 1); + width: 255px; + height: 206px; + box-shadow: 0px 2px 5px 0px rgba(52, 199, 89, 1); +} + +.s3-card1 span hr { + width: 65px; + height: 2px; + border: 2px solid #191919; + margin-left: 50px; +} + +.s3-card2 span hr { + width: 65px; + height: 2px; + border: 2px solid #34c759; + margin-left: 50px; +} + +.s3-card3 span hr { + width: 65px; + height: 2px; + border: 2px solid #34c759; + margin-left: 50px; +} + +.s3-card4 span hr { + width: 65px; + height: 2px; + border: 2px solid #34c759; + margin-left: 50px; +} + +.s3-card1 h4 { + color: black; + width: 207px; + height: 32px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 25.65px; + letter-spacing: -0.28; + text-align: center; + margin: 20px 5px; +} + +.s3-card1 p { + color: rgba(25, 25, 25, 1); + width: 200px; + height: 72px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 18px; + letter-spacing: -0.16px; + margin: 55px auto; +} + +.s3-card2, +.s3-card3, +.s3-card4 { + width: 255px; + height: 206px; + background-color: rgba(37, 37, 37, 1); + box-shadow: 0px 2px 5px 0px rgba(37, 37, 37, 1); +} + +.s3-card2 h4 { + width: 207px; + height: 32px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 25.65px; + letter-spacing: -0.28; + text-align: center; + color: white; + margin: 20px auto; +} + +.s3-card3 h4 { + width: 207px; + height: 32px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 25.65px; + letter-spacing: -0.28; + text-align: center; + color: white; + margin: 20px auto; +} + +.s3-card4 h4 { + width: 207px; + height: 32px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 25.65px; + letter-spacing: -0.28; + text-align: center; + color: white; + margin: 20px auto; +} + +.s3-card2 p { + width: 200px; + height: 72px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 18px; + letter-spacing: -0.16px; + margin: 70px auto; + color: rgba(255, 255, 255, 0.5); +} + +.s3-card3 p { + width: 200px; + height: 72px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 18px; + letter-spacing: -0.16px; + margin: 70px auto; + color: rgba(255, 255, 255, 0.5); +} + +.s3-card4 p { + width: 200px; + height: 72px; + font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + font-size: 13px; + line-height: 18px; + letter-spacing: -0.16px; + margin: 70px auto; + color: rgba(255, 255, 255, 0.5); +}