The Basic Language of the Web: HTML

- -

- Posted by Laura Jones on Monday, June 21st 2027 -

+ /> + +

+ Posted by Laura Jones on Monday, June 21st 2027 +

Date: Mon, 8 Aug 2022 18:14:42 +0700 Subject: [PATCH 10/18] update --- starter/05-Design/style.css | 33 ++++++++++- starter/06-Components/01-accordion.html | 74 +++++++++++++++++++++++++ 2 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 starter/06-Components/01-accordion.html diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..f5094ca1b 100755 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -1,11 +1,18 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); + /* SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +MAIN COLOR: #087f5b +GREY COLOR: #343a40 */ + + * { margin: 0; padding: 0; @@ -16,7 +23,8 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: 'Inter', sans-serif; + color: #343a40; } .container { @@ -39,6 +47,23 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + padding: 16px 32px; + font-weight: 500; + font-size: 18px; + display: inline-block; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -57,10 +82,16 @@ header { h1 { margin-bottom: 24px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.6; + letter-spacing: 0.5px; } img { diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..de5e925f4 --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,74 @@ + + + + + + + Accordion Component + + + +

What is HTML?

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam consequatur fugit itaque tempore qui aliquid! Quod impedit cumque tenetur odit?

Lorem ipsum dolor sit amet.
Eius illum pariatur ad quas!
Minima dignissimos accusantium in doloremque!

+ + \ No newline at end of file From 7de21de4ab7c1a95ea1be86d762f305ec8b5adb0 Mon Sep 17 00:00:00 2001 From: N0sBa Date: Tue, 9 Aug 2022 00:35:32 +0700 Subject: [PATCH 11/18] Update --- starter/06-Components/02-carousel.html | 118 +++++++++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 starter/06-Components/02-carousel.html diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..e5f32d2be --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,118 @@ + + + + + + + Carousel Document + + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat beatae, facilis hic qui sapiente illum sit placeat incidunt? Quidem, fugiat?

Maria Deia Kiags

Content Manager of Momo

+ + +

+ + + + +

+ + \ No newline at end of file From 547f92c1bacf01e1892d1e2b8fecdb33e9342f17 Mon Sep 17 00:00:00 2001 From: N0sBa Date: Wed, 10 Aug 2022 21:55:26 +0700 Subject: [PATCH 12/18] update --- starter/06-Components/06-app-layout.html | 89 ++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 starter/06-Components/06-app-layout.html diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..1ca704490 --- /dev/null +++ b/starter/06-Components/06-app-layout.html @@ -0,0 +1,89 @@ + + + + + + + + App Layout Document + + + + + + MENU +

Email 12

MAIN

+ + + + \ No newline at end of file From 33f91f83b444f48101cc385a67fc31fac6fa98df Mon Sep 17 00:00:00 2001 From: N0sBa Date: Mon, 15 Aug 2022 22:52:51 +0700 Subject: [PATCH 13/18] update --- starter/07-Omnifood-Desktop/index.html | 23 +++++++ starter/07-Omnifood-Desktop/style.css | 85 ++++++++++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 starter/07-Omnifood-Desktop/index.html create mode 100644 starter/07-Omnifood-Desktop/style.css diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..c37f6e7ef --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,23 @@ + + + + + + + Omnifood + + + +

A healthy meal delivered to your door, every single day

The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year!

+ Eating clean now + More information +

+ + \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/style.css b/starter/07-Omnifood-Desktop/style.css new file mode 100644 index 000000000..17afe2263 --- /dev/null +++ b/starter/07-Omnifood-Desktop/style.css @@ -0,0 +1,85 @@ +/* + SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + main-color: #e67e22; + grey-color: + tints: #fdf2e9; + shades: +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-family: sans-serif; + font-weight: 400; + line-height: 1; + font-size: 1.6rem; +} + +.hero-section { + display: flex; + max-width: 1200px; + background-color: #fdf2e9; + padding: 4.8rem; +} + +.hero-information { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.hero-information h1 { + font-size: 3.6rem; + word-spacing: -1px; +} + +.hero-information p { + margin-top: 4.4rem; +} + +.hero-cta { + margin-top: 4.4rem; +} + +.btn:link, +.btn:visited { + padding: 1.6rem 3.2rem; + text-decoration: none; + border-radius: 0.8rem; + transition: background-color 0.3s ease-in-out; +} + +.btn-main:link, +.btn-main:visited { + background-color: #e67e22; + color: #fff; +} + +.btn-main:hover, +.btn-main:active { + background-color: #cf711f; +} + +.btn-sub:link, +.btn-sub:visited { + background: #fff; + color: #555; +} + +.hero-image { + width: 100%; +} From 40155235ee75fb2c2cae5f09be0facf2e4f25e52 Mon Sep 17 00:00:00 2001 From: N0sBa Date: Tue, 16 Aug 2022 10:31:23 +0700 Subject: [PATCH 14/18] Update --- starter/06-Components/02-carousel.html | 16 ++- starter/06-Components/05-hero.html | 129 +++++++++++++++++++++++ starter/06-Components/06-app-layout.html | 50 +++++++++ 3 files changed, 190 insertions(+), 5 deletions(-) create mode 100644 starter/06-Components/05-hero.html create mode 100644 starter/06-Components/06-app-layout.html diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html index e5f32d2be..b27f3cc40 100644 --- a/starter/06-Components/02-carousel.html +++ b/starter/06-Components/02-carousel.html @@ -6,15 +6,21 @@ Carousel Document + + + +

+ + +

Some random heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque exercitationem ratione numquam ab + ducimus + reprehenderit. Soluta accusamus minus quas iusto dignissimos quidem debitis, ipsum quod adipisci + praesentium cum, vel hic quam molestias tempore ad excepturi error iste fuga harum, obcaecati + molestiae. + Earum dicta ab sint odio? Aspernatur earum placeat blanditiis. Lorem ipsum dolor, sit amet + consectetur + adipisicing elit. Suscipit vel laborum sunt. Eos maxime quidem dicta tempora odio tempore + dignissimos? +

+ + + \ No newline at end of file diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..fa570f206 --- /dev/null +++ b/starter/06-Components/06-app-layout.html @@ -0,0 +1,50 @@ + + + + + + + Document + + + + + Menu +

Inbox

Main

+ + + \ No newline at end of file From a011ba89e7ec27972a6bcb4bc1fdb01c625ed574 Mon Sep 17 00:00:00 2001 From: N0sBa Date: Mon, 22 Aug 2022 23:06:41 +0700 Subject: [PATCH 15/18] Update --- .DS_Store | Bin 0 -> 6148 bytes starter/07-Omnifood-Desktop/genreral.css | 197 +++++++++++++++++++++++ starter/07-Omnifood-Desktop/index.html | 131 +++++++++++++-- starter/07-Omnifood-Desktop/style.css | 184 +++++++++++++++------ 4 files changed, 456 insertions(+), 56 deletions(-) create mode 100644 .DS_Store create mode 100644 starter/07-Omnifood-Desktop/genreral.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0

+ Omnifood + + + + + + -

A healthy meal delivered to your door, every single day

The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year!

- Eating clean now - More information -

+ A healthy meal delivered to your door, every single day +

+ The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to + your + personal tastes and nutritional needs. +

+ Start earing well + Learn more + ↓ +

+ 250,000+ meals delivered last year! +

+ +

+ How it works +

+ Your daily dose of health in 3 simple steps +

+ +

+ Tell us what you like (and what not) +

+ Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized + weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no + matter what diet you follow! +

+ +

+ Approve your weekly meal plan: +

+ Once per week, approve the meal plan generated for you by Omnifood AI. You can change + ingredients, swap entire meals, or even add your own recipes. +

+ +

+ Receive meals at convenient time: +

+ Best chefs in town will cook your selected meal every day, and we will deliver it to your door + whenever works best for you. You can change delivery schedule and address daily! +

+ \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/style.css b/starter/07-Omnifood-Desktop/style.css index 17afe2263..2b990a3a4 100644 --- a/starter/07-Omnifood-Desktop/style.css +++ b/starter/07-Omnifood-Desktop/style.css @@ -5,81 +5,173 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 - main-color: #e67e22; - grey-color: - tints: #fdf2e9; - shades: + main-color: #e67e22 + grey-color: + tints: #fdf2e9 + shades: #cf711f */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; + +/*****************************************/ +/************** HEDAER *************/ +/*****************************************/ +.header { + padding: 3.2rem 0 0 0; } -html { - font-size: 62.5%; +.logo { + height: 2.4rem; } -body { - font-family: sans-serif; - font-weight: 400; - line-height: 1; +.main-nav { font-size: 1.6rem; + font-weight: 500; +} + +.main-nav-list { + list-style-type: none; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + padding: 1.2rem 2.4rem; + border-radius: 0.8rem; + transition: background-color,color 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + background-color: #e67e22; + color: #fff; +} + +.main-nav-link-active:link, +.main-nav-link-active:visited { + background-color: #e67e22; + color: #fff; +} + +/*****************************************/ +/************** HERO SECTION *************/ +/*****************************************/ +.hero { + padding: 3.2rem 0 9.6rem 0; } -.hero-section { +.hero-text-box { display: flex; - max-width: 1200px; + flex-direction: column; + justify-content: center; +} + +.hero-text { + font-size: 1.6rem; + font-weight: 400; + line-height: 1.2; +} + +.hero-img-box { + +} + +.hero-img { + width: 100%; +} + +.hero-btn-main:hover, +.hero-btn-main:active { + background-color: #cf711f; +} + +.hero-btn-sub:hover, +.hero-btn-sub:active { background-color: #fdf2e9; - padding: 4.8rem; + box-shadow: inset 0 0 0 3px #fff; } -.hero-information { +.delivered-meals-box { display: flex; - flex-direction: column; align-items: center; - justify-content: center; } -.hero-information h1 { - font-size: 3.6rem; - word-spacing: -1px; +.delivered-img { + width: 4.4rem; + height: 4.4rem; + border-radius: 50%; + border: 3px solid #fdf2e9; + margin-left: -1.2rem; } -.hero-information p { - margin-top: 4.4rem; +.delivered-img:first-child { + margin: 0; } -.hero-cta { - margin-top: 4.4rem; +.delivered-text { + font-size: 1.4rem; + font-weight: 500; } -.btn:link, -.btn:visited { - padding: 1.6rem 3.2rem; - text-decoration: none; - border-radius: 0.8rem; - transition: background-color 0.3s ease-in-out; +/*****************************************/ +/************** HOW IT WORKS SECTION *************/ +/*****************************************/ + +.how { + padding: 9.6rem 0; } -.btn-main:link, -.btn-main:visited { - background-color: #e67e22; - color: #fff; +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin: 0 0 1.2rem 0; } -.btn-main:hover, -.btn-main:active { - background-color: #cf711f; +.step-description { + font-size: 1.8rem; + line-height: 1.8; } -.btn-sub:link, -.btn-sub:visited { - background: #fff; - color: #555; +.step-img-box { + display: flex; + align-items: center; + justify-content: center; + + position: relative; } -.hero-image { - width: 100%; +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + padding-bottom: 60%; + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background: #fae5d3; + z-index: -1; } + +.step-text-box { + +} + +.step-img { + width: 35%; +} \ No newline at end of file From 8ccccc658c3feeaf672e3013af8e3e9c5425243e Mon Sep 17 00:00:00 2001 From: N0sBa Date: Thu, 1 Sep 2022 10:42:30 +0700 Subject: [PATCH 16/18] Update --- starter/07-Omnifood-Desktop/genreral.css | 4 ++++ starter/07-Omnifood-Desktop/index.html | 13 +++++++++++++ starter/07-Omnifood-Desktop/style.css | 12 ++++++++++++ 3 files changed, 29 insertions(+) diff --git a/starter/07-Omnifood-Desktop/genreral.css b/starter/07-Omnifood-Desktop/genreral.css index 9d1cb67e6..e1b2c7a7c 100644 --- a/starter/07-Omnifood-Desktop/genreral.css +++ b/starter/07-Omnifood-Desktop/genreral.css @@ -61,6 +61,10 @@ body { grid-template-columns: repeat(4, 1fr); } +.grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} + .gap-sm { gap: 1.6rem; } diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html index ef40cd8da..5a7fa9165 100644 --- a/starter/07-Omnifood-Desktop/index.html +++ b/starter/07-Omnifood-Desktop/index.html @@ -74,6 +74,19 @@

+
+
+
Featured in
+
+ + + + + +
+
+
+

How it works diff --git a/starter/07-Omnifood-Desktop/style.css b/starter/07-Omnifood-Desktop/style.css index 2b990a3a4..088742915 100644 --- a/starter/07-Omnifood-Desktop/style.css +++ b/starter/07-Omnifood-Desktop/style.css @@ -114,6 +114,18 @@ font-weight: 500; } +/* FEATURED-IN SECTION */ +.featured-in { + +} +.featured-in-tile { + text-align: center; +} +.featured-in-logo { + width: 100%; +} + + /*********************************/ / HOW IT WORKS SECTION */ /***************/ From 4afa8ad5bc942d8a9da98fa64902ab6f078895d8 Mon Sep 17 00:00:00 2001 From: N0sBa Date: Thu, 22 Sep 2022 07:29:16 +0700 Subject: [PATCH 17/18] update --- .../{ => css}/genreral.css | 10 +- .../07-Omnifood-Desktop/{ => css}/style.css | 89 +++- starter/07-Omnifood-Desktop/index.html | 405 ++++++++++++------ 3 files changed, 368 insertions(+), 136 deletions(-) rename starter/07-Omnifood-Desktop/{ => css}/genreral.css (94%) rename starter/07-Omnifood-Desktop/{ => css}/style.css (67%) diff --git a/starter/07-Omnifood-Desktop/genreral.css b/starter/07-Omnifood-Desktop/css/genreral.css similarity index 94% rename from starter/07-Omnifood-Desktop/genreral.css rename to starter/07-Omnifood-Desktop/css/genreral.css index e1b2c7a7c..e36a8c51f 100644 --- a/starter/07-Omnifood-Desktop/genreral.css +++ b/starter/07-Omnifood-Desktop/css/genreral.css @@ -1,4 +1,4 @@ -z/*/ +/*************/ / GENERAL */ /***********************************/ @@ -34,6 +34,10 @@ body { justify-content: space-between; } +.justify-content--space-around { + justify-content: space-around; +} + .align-item--center { align-items: center; } @@ -198,4 +202,8 @@ body { .margin-bottom-sm { margin-bottom: 1.6rem; +} + +strong { + font-weight: 500; } \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/style.css b/starter/07-Omnifood-Desktop/css/style.css similarity index 67% rename from starter/07-Omnifood-Desktop/style.css rename to starter/07-Omnifood-Desktop/css/style.css index 088742915..1098167d5 100644 --- a/starter/07-Omnifood-Desktop/style.css +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -116,13 +116,22 @@ /* FEATURED-IN SECTION */ .featured-in { - + padding: 4.8rem 0 3.2rem 0; } .featured-in-tile { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; text-align: center; + margin-bottom: 2.4rem; + text-align: center; + color: #888; } .featured-in-logo { - width: 100%; + height: 3.2rem; + filter: brightness(0); + opacity: 50%; } @@ -186,4 +195,80 @@ .step-img { width: 35%; +} + +/*********************************/ +/ HOW IT WORKS SECTION */ +/***/ + +.meals { + padding: 9.6rem 0; +} + +.meal { + box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.075); + border-radius: 11px; + overflow: hidden; +} + +.meal-content { + padding: 3.2rem 4.8rem 4.8rem 4.8rem; +} + +.meal-tags { + margin-bottom: 1.2rem; + display: flex; + gap: 0.4rem; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + text-transform: uppercase; + color:#333; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegeterian { + background-color: #51cf66; +} +.tag--vegan { + background-color: #94d82d; +} +.tag--paleo { + background-color: #ffd43b; +} + + +.meal-title { + font-size: 2rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + height: 2.4rem; + width: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; } \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html index 5a7fa9165..09d8a5aca 100644 --- a/starter/07-Omnifood-Desktop/index.html +++ b/starter/07-Omnifood-Desktop/index.html @@ -1,147 +1,286 @@ - - - - - + + + + Omnifood - - - - - - - + + + + + + + + + + - +
-
- -
-
-
- Section 1 -
-
- Section 2 -
-
- Section 3 -
-
- Section 4 -
-
- Section 5 -
-
-
-
+
+ +
+
+
+ Section 1 +
+
+ Section 2 +
+
+ Section 3 +
+
+ Section 4 +
+
+ Section 5 +
+
+
+

-
-
-
-
- A healthy meal delivered to your door, every single day -
-
- The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to - your - personal tastes and nutritional needs. -
-
- Start earing well - Learn more - ↓ -
-
- - - - - -
- 250,000+ meals delivered last year! -
-
-
-
- -
+
+
+
+
+ A healthy meal delivered to your door, every single day +
+
+ The smart 365-days-per-year food subscription that will make you + eat healthy again. Tailored to your personal tastes and + nutritional needs. +
+
+ Start earing well + Learn more ↓
-
- -
-
-
Featured in
-
- - - - - -
+
+ + + + + +
+ 250,000+ + meals delivered last year! +

-
+
+
+ +
+
+
-
-
- How it works -
- Your daily dose of health in 3 simple steps -
-
+
+
+
As featured in
+
+ + + + + +
+
+
-
- -
-
01
-
- Tell us what you like (and what not) -
-
- Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized - weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no - matter what diet you follow! -
-
-
- -
- -
- -
-
-
02
-
- Approve your weekly meal plan: -
-
- Once per week, approve the meal plan generated for you by Omnifood AI. You can change - ingredients, swap entire meals, or even add your own recipes. -
-
- -
-
03
-
- Receive meals at convenient time: -
-
- Best chefs in town will cook your selected meal every day, and we will deliver it to your door - whenever works best for you. You can change delivery schedule and address daily! -
-
-
- -
+
+
+ How it works +
+ Your daily dose of health in 3 simple steps +
+
+ +
+ +
+
01
+
+ Tell us what you like (and what not) +
+
+ Never again waste time thinking about what to eat! Omnifood AI + will create a 100% personalized weekly meal plan just for you. It + makes sure you get all the nutrients and vitamins you need, no + matter what diet you follow! +
+
+
+ +
+ +
+ +
+
+
02
+
Approve your weekly meal plan:
+
+ Once per week, approve the meal plan generated for you by Omnifood + AI. You can change ingredients, swap entire meals, or even add + your own recipes. +
+
+ +
+
03
+
Receive meals at convenient time:
+
+ Best chefs in town will cook your selected meal every day, and we + will deliver it to your door whenever works best for you. You can + change delivery schedule and address daily! +
+
+
+ +
+
+
+ +
+
+ Meals +
+ Omnifood AI chooses from 5,000+ recipes +
+
+ +
+
+ +
+
+ Vegetarian +
+
Japanese Gyozas
+
+
+ + 650 calories +
+
+ + NutriScores ® 74 +
+
+ + 4.9 rating (537) +
+
+
+
+
+ +
+
+ Vegan + Paleo +
+
Avocado Salad
+
+
+ + 400 calories +
+
+ + NutriScores ® 92 +
+
+ + 4.8 rating (441) +
+

-
+
+
List of diets
+ +
- - \ No newline at end of file + + From 89a95f979c64c98db7dce986dc28ae2eb069887a Mon Sep 17 00:00:00 2001 From: N0sBa Date: Fri, 23 Sep 2022 07:52:52 +0700 Subject: [PATCH 18/18] Update --- starter/07-Omnifood-Desktop/css/genreral.css | 50 ++- starter/07-Omnifood-Desktop/css/style.css | 120 ++++++- starter/07-Omnifood-Desktop/index.html | 314 ++++++++++++++++++- 3 files changed, 465 insertions(+), 19 deletions(-) diff --git a/starter/07-Omnifood-Desktop/css/genreral.css b/starter/07-Omnifood-Desktop/css/genreral.css index e36a8c51f..a1309af6c 100644 --- a/starter/07-Omnifood-Desktop/css/genreral.css +++ b/starter/07-Omnifood-Desktop/css/genreral.css @@ -53,6 +53,10 @@ body { align-items: center; } +.grid--center-h { + justify-items: center; +} + .grid--2-cols { grid-template-columns: repeat(2, 1fr); } @@ -169,13 +173,29 @@ body { text-decoration: none; font-weight: 500; font-size: 1.6rem; - transition: background-color 0.3s; + transition: all 0.3s; } .btn-padding-sm { padding: 1.6rem 3.2rem; } +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all 0.3s; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + .margin-right-sm { margin-right: 1.6rem; } @@ -204,6 +224,34 @@ body { margin-bottom: 1.6rem; } +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + strong { font-weight: 500; } \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css index 1098167d5..8563b561f 100644 --- a/starter/07-Omnifood-Desktop/css/style.css +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -198,7 +198,7 @@ } // -/ HOW IT WORKS SECTION / +/** MEALS SECTION */ /***/ .meals { @@ -209,6 +209,12 @@ box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.075); border-radius: 11px; overflow: hidden; + transition: transform 0.3s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 2.4rem 6.4rem rgba(0,0,0,0.06); } .meal-content { @@ -271,4 +277,116 @@ .meal-img { width: 100%; +} + +.all-receipes { + text-align: center; + font-size: 1.8rem; +} + +// +/ TESTIMONIALS SECTION / +/***/ +.testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials-side { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 4.8rem; + column-gap: 8rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-item img { + display: block; + width: 100%; + transition: transform 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +// +/ PRICING SECTION / +/*******************************/ +.pricing { + padding: 9.6rem 0; +} +.pricing-plan { + background-color: #fdf2e9; + border-radius: 11px; + padding: 4.8rem; + width: 75%; +} +.pricing-plan--stater { + justify-self: end; +} +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} +.plan-sign-up { + text-align: center; + margin-top: 4.8rem; } \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html index 09d8a5aca..e1b089974 100644 --- a/starter/07-Omnifood-Desktop/index.html +++ b/starter/07-Omnifood-Desktop/index.html @@ -8,15 +8,21 @@ - + - - - + + + @@ -220,18 +226,20 @@
Receive meals at convenient time:

-
- Meals +
+ Meals
Omnifood AI chooses from 5,000+ recipes

-
+

- +

Vegetarian @@ -243,7 +251,10 @@
650 calories
- + NutriScores ® 74

@@ -254,7 +265,11 @@

- +

Vegan @@ -267,7 +282,10 @@
400 calories
- + NutriScores ® 92

@@ -277,10 +295,272 @@

-
List of diets
+
+
Work with any diet:
+ +
+
+ + Vegetarian +
+
+ + Vegan +
+
+ + Pescatarian +
+
+ + Gluten-free +
+
+ + VKetto +
+
+ + Vegetarian +
+
+ + Vegetarian +
+
+ + Low FODMAP +
+
+
+
+ +
+ See all recipes → +
+
+ +
+
+ Testimonials +
Once you try it, you can't go back
+ +
+
+ +
+ Inexpensive, healthy and great-tasting meals, without even + having to order manually! It feels truly magical. +
+
— Dave Bryson
+
+ +
+ +
+ The AI algorithm is crazy good, it chooses the right meals for + me every time. It's amazing not to worry about food anymore! +
+
— Ben Hadley
+
+ +
+ +
+ Omnifood is a life saver! I just started a company, so there's + no time for cooking. I couldn't live without my daily meals now! +
+
— Steve Miller
+
+ +
+ +
+ I got Omnifood for the whole family, and it frees up so much + time! Plus, everything is organic and vegan and without plastic. +
+
— Hannah Smith
+
+
+
+ +
+
+ +
Caption
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +

- +
+
+ Pricing +
+ Eating well without breaking the bank +
+
+ +
+
+
+
Statter
+
$399
+
per month. That's just $13 per meal!
+
+
+
+ + 1 meal per day +
+
+ + Order times are between 11am and 9pm +
+
+ + Delivery is free +
+
+
+ Start earing well +
+
+
+
+
Complete
+
$649
+
per month. That's just $11 per meal!
+
+
+
+ + 2 meal per day +
+
+ + Order 24/7 +
+
+ + Delivery is free +
+
+ + Get access to latest recipes +
+
+
+ Start earing well +
+
+
+
+

+ This is my blog +

What is HTML?

+ Why should you learn HTML? +

Styling text

Font stack, default sopacng and more

Styling text

Font stack, default sopacng and more

Section 1

Section 2

Lorem, ipsum dolor.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, error.

Lorem, ipsum.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus.

Lorem ipsum dolor sit.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, itaque ipsa.

Lorem ipsum dolor sit amet.

$65.00

Product details

The Basic Language of the Web: HTML

$65.00

Product details

📘 The Code Magazine

$65.00

Product details

📘 The Code Magazine

A healthy meal delivered to your door, every single day

+ A healthy meal delivered to your door, every single day +

+ Your daily dose of health in 3 simple steps +

+ Tell us what you like (and what not) +

+ Approve your weekly meal plan: +

+ Receive meals at convenient time: +

- A healthy meal delivered to your door, every single day -

+ A healthy meal delivered to your door, every single day +

- Your daily dose of health in 3 simple steps -

As featured in

- Tell us what you like (and what not) -

- Approve your weekly meal plan: -

- Receive meals at convenient time: -

+ Your daily dose of health in 3 simple steps +

+ Tell us what you like (and what not) +

Approve your weekly meal plan:

Receive meals at convenient time:

+ Omnifood AI chooses from 5,000+ recipes +

Receive meals at convenient time:

Omnifood AI chooses from 5,000+ recipes

650 calories - + NutriScores ® 74 @@ -254,7 +265,11 @@

400 calories - + NutriScores ® 92 @@ -277,10 +295,272 @@

Work with any diet:

Once you try it, you can't go back

+ Eating well without breaking the bank +

650 calories
- + NutriScores ® 74

@@ -254,7 +265,11 @@

400 calories
- + NutriScores ® 92

@@ -277,10 +295,272 @@