diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..e2eda3bf3 Binary files /dev/null and b/.DS_Store differ diff --git a/Dimuthu/02-HTML-Fundamentals/challenges.jpg b/Dimuthu/02-HTML-Fundamentals/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/Dimuthu/02-HTML-Fundamentals/challenges.jpg differ diff --git a/Dimuthu/02-HTML-Fundamentals/content.txt b/Dimuthu/02-HTML-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/Dimuthu/02-HTML-Fundamentals/content.txt @@ -0,0 +1,34 @@ +📘 The Code Magazine + +The Basic Language of the Web: HTML + +Posted by Laura Jones on Monday, June 21st 2027 + +All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. + +In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. + +What is HTML? + +HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language). + +HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites. + +In HTML, each element is made up of 3 parts: + +The opening tag +The closing tag +The actual element +You can learn more at the MDN Web Docs. + +Why should you learn HTML? + +There are countless reasons for learning the fundamental language of the web. Here are 5 of them: + +To be able to use the fundamental web dev language +To hand-craft beautiful websites instead of relying on tools like Worpress or Wix +To build web applications +To impress friends +To have fun 😃 + +Hopefully you learned something new here. See you next time! \ No newline at end of file diff --git a/Dimuthu/02-HTML-Fundamentals/laura-jones.jpg b/Dimuthu/02-HTML-Fundamentals/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/Dimuthu/02-HTML-Fundamentals/laura-jones.jpg differ diff --git a/Dimuthu/02-HTML-Fundamentals/post-img.jpg b/Dimuthu/02-HTML-Fundamentals/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/Dimuthu/02-HTML-Fundamentals/post-img.jpg differ diff --git a/Dimuthu/02-HTML-Fundamentals/related-1.jpg b/Dimuthu/02-HTML-Fundamentals/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/Dimuthu/02-HTML-Fundamentals/related-1.jpg differ diff --git a/Dimuthu/02-HTML-Fundamentals/related-2.jpg b/Dimuthu/02-HTML-Fundamentals/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/Dimuthu/02-HTML-Fundamentals/related-2.jpg differ diff --git a/Dimuthu/02-HTML-Fundamentals/related-3.jpg b/Dimuthu/02-HTML-Fundamentals/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/Dimuthu/02-HTML-Fundamentals/related-3.jpg differ diff --git a/Dimuthu/03-CSS-Fundamentals/blog.html b/Dimuthu/03-CSS-Fundamentals/blog.html new file mode 100644 index 000000000..3b9b6e328 --- /dev/null +++ b/Dimuthu/03-CSS-Fundamentals/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/Dimuthu/03-CSS-Fundamentals/content.txt b/Dimuthu/03-CSS-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/Dimuthu/03-CSS-Fundamentals/content.txt @@ -0,0 +1,34 @@ +📘 The Code Magazine + +The Basic Language of the Web: HTML + +Posted by Laura Jones on Monday, June 21st 2027 + +All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. + +In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. + +What is HTML? + +HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language). + +HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites. + +In HTML, each element is made up of 3 parts: + +The opening tag +The closing tag +The actual element +You can learn more at the MDN Web Docs. + +Why should you learn HTML? + +There are countless reasons for learning the fundamental language of the web. Here are 5 of them: + +To be able to use the fundamental web dev language +To hand-craft beautiful websites instead of relying on tools like Worpress or Wix +To build web applications +To impress friends +To have fun 😃 + +Hopefully you learned something new here. See you next time! \ No newline at end of file diff --git a/Dimuthu/03-CSS-Fundamentals/img/challenges.jpg b/Dimuthu/03-CSS-Fundamentals/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/Dimuthu/03-CSS-Fundamentals/img/challenges.jpg differ diff --git a/Dimuthu/03-CSS-Fundamentals/img/laura-jones.jpg b/Dimuthu/03-CSS-Fundamentals/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/Dimuthu/03-CSS-Fundamentals/img/laura-jones.jpg differ diff --git a/Dimuthu/03-CSS-Fundamentals/img/post-img.jpg b/Dimuthu/03-CSS-Fundamentals/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/Dimuthu/03-CSS-Fundamentals/img/post-img.jpg differ diff --git a/Dimuthu/03-CSS-Fundamentals/img/related-1.jpg b/Dimuthu/03-CSS-Fundamentals/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/Dimuthu/03-CSS-Fundamentals/img/related-1.jpg differ diff --git a/Dimuthu/03-CSS-Fundamentals/img/related-2.jpg b/Dimuthu/03-CSS-Fundamentals/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/Dimuthu/03-CSS-Fundamentals/img/related-2.jpg differ diff --git a/Dimuthu/03-CSS-Fundamentals/img/related-3.jpg b/Dimuthu/03-CSS-Fundamentals/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/Dimuthu/03-CSS-Fundamentals/img/related-3.jpg differ diff --git a/Dimuthu/03-CSS-Fundamentals/index.html b/Dimuthu/03-CSS-Fundamentals/index.html new file mode 100644 index 000000000..df8a623a8 --- /dev/null +++ b/Dimuthu/03-CSS-Fundamentals/index.html @@ -0,0 +1,146 @@ + + + + + The Basic Language of the Web: HTML + + + + + +

📘 The Code Magazine

+ + +

+ +

The Basic Language of the Web: HTML

+ +

Posted by Laura Jones on Monday, June 21st 2027

+ +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ +

+ In this post, let's focus on HTML. We will learn what HTML is all about, + and why you too should learn it. +

+ +

What is HTML?

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers understand + HTML and render HTML code as websites. +

In HTML, each element is made up of 3 parts:

+ +

The opening tag
The closing tag
The actual element

+ +

+ You can learn more at + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

+ There are countless reasons for learning the fundamental language of the + web. Here are 5 of them: +

+ +

To be able to use the fundamental web dev language
+ To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
To build web applications
To impress friends
To have fun 😃

+ +

Hopefully you learned something new here. See you next time!

+ + + + + + diff --git a/Dimuthu/04-CSS-Layouts/blog.html b/Dimuthu/04-CSS-Layouts/blog.html new file mode 100644 index 000000000..3b9b6e328 --- /dev/null +++ b/Dimuthu/04-CSS-Layouts/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/Dimuthu/04-CSS-Layouts/content.txt b/Dimuthu/04-CSS-Layouts/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/Dimuthu/04-CSS-Layouts/content.txt @@ -0,0 +1,34 @@ +📘 The Code Magazine + +The Basic Language of the Web: HTML + +Posted by Laura Jones on Monday, June 21st 2027 + +All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. + +In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. + +What is HTML? + +HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language). + +HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites. + +In HTML, each element is made up of 3 parts: + +The opening tag +The closing tag +The actual element +You can learn more at the MDN Web Docs. + +Why should you learn HTML? + +There are countless reasons for learning the fundamental language of the web. Here are 5 of them: + +To be able to use the fundamental web dev language +To hand-craft beautiful websites instead of relying on tools like Worpress or Wix +To build web applications +To impress friends +To have fun 😃 + +Hopefully you learned something new here. See you next time! \ No newline at end of file diff --git a/Dimuthu/04-CSS-Layouts/css-grid.html b/Dimuthu/04-CSS-Layouts/css-grid.html new file mode 100644 index 000000000..154c16bc7 --- /dev/null +++ b/Dimuthu/04-CSS-Layouts/css-grid.html @@ -0,0 +1,104 @@ + + + + + + + CSS Grid + + + +

(1) HTML

(2) and

(3) CSS

(4) are

(5) amazing

(6) languages

(7) to

(8) learn

+ +

(1)

(3)

(4)

(5)

(6)

(7)

+ + diff --git a/Dimuthu/04-CSS-Layouts/flexbox.html b/Dimuthu/04-CSS-Layouts/flexbox.html new file mode 100644 index 000000000..54579de0e --- /dev/null +++ b/Dimuthu/04-CSS-Layouts/flexbox.html @@ -0,0 +1,61 @@ + + + + + + + Flexbox + + + +

HTML

and

CSS

are

amazing

languages

learn

+ + diff --git a/Dimuthu/04-CSS-Layouts/img/challenges.jpg b/Dimuthu/04-CSS-Layouts/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/Dimuthu/04-CSS-Layouts/img/challenges.jpg differ diff --git a/Dimuthu/04-CSS-Layouts/img/laura-jones.jpg b/Dimuthu/04-CSS-Layouts/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/Dimuthu/04-CSS-Layouts/img/laura-jones.jpg differ diff --git a/Dimuthu/04-CSS-Layouts/img/post-img.jpg b/Dimuthu/04-CSS-Layouts/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/Dimuthu/04-CSS-Layouts/img/post-img.jpg differ diff --git a/Dimuthu/04-CSS-Layouts/img/related-1.jpg b/Dimuthu/04-CSS-Layouts/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/Dimuthu/04-CSS-Layouts/img/related-1.jpg differ diff --git a/Dimuthu/04-CSS-Layouts/img/related-2.jpg b/Dimuthu/04-CSS-Layouts/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/Dimuthu/04-CSS-Layouts/img/related-2.jpg differ diff --git a/Dimuthu/04-CSS-Layouts/img/related-3.jpg b/Dimuthu/04-CSS-Layouts/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/Dimuthu/04-CSS-Layouts/img/related-3.jpg differ diff --git a/Dimuthu/04-CSS-Layouts/index.html b/Dimuthu/04-CSS-Layouts/index.html new file mode 100644 index 000000000..c396ec997 --- /dev/null +++ b/Dimuthu/04-CSS-Layouts/index.html @@ -0,0 +1,163 @@ + + + + + + + The Basic Language of the Web: HTML + + + + + +

📘 The Code Magazine

+ +

+ + +

The Basic Language of the Web: HTML

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

+ +

+ All modern websites and web applications are built using three + fundamental + technologies: HTML, CSS and JavaScript. These are the languages of the + web. +

+ In this post, let's focus on HTML. We will learn what HTML is all + about, and why you too should learn it. +

What is HTML?

+ HTML stands for HyperText + Markup Language. It's a markup + language that web developers use to structure and describe the content + of a webpage (not a programming language). +

+ HTML consists of elements that describe different types of content: + paragraphs, links, headings, images, video, etc. Web browsers + understand HTML and render HTML code as websites. +

In HTML, each element is made up of 3 parts:

The opening tag
The closing tag
The actual element

+ You can learn more at + MDN Web Docs. +

Why should you learn HTML?

+ There are countless reasons for learning the fundamental language of + the web. Here are 5 of them: +

+ To be able to use the fundamental web dev language +
+ To hand-craft beautiful websites instead of relying on tools like + Worpress or Wix +
To build web applications
To impress friends
To have fun 😃

Hopefully you learned something new here. See you next time!

+ + + + +

+ + diff --git a/Dimuthu/04-CSS-Layouts/style.css b/Dimuthu/04-CSS-Layouts/style.css new file mode 100644 index 000000000..6d89eaaea --- /dev/null +++ b/Dimuthu/04-CSS-Layouts/style.css @@ -0,0 +1,374 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + /* margin-bottom: 60px; */ + /* height: 80px; */ +} + +nav { + font-size: 18px; + /* text-align: center; */ +} + +article { + /* margin-bottom: 60px; */ +} + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + /* padding-top: 50px; + padding-bottom: 50px; */ + padding: 50px 40px; + /* width: 500px; */ +} + +/* SMALLER ELEMENTS */ +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; + margin-left: 0; +} + +body { + /* background-color: orangered; */ +} + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work! */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + + display: block; */ + + margin-right: 30px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::before { + content: 'TOP'; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ + +/* Floats +.author-img { + float: left; + margin-bottom: 20px; +} +.author { + float: left; + margin-left: 20px; + margin-top: 10px; +} + +h1 { + float: left; +} +nav { + float: right; +} +.clear { + clear: both; +} + +.clear-fix::after { + clear: both; + content: ''; + display: block; +} + +article { + width: 825px; + float: left; +} +aside { + width: 300px; + float: right; +} +footer { + clear: both; +} +*/ + +.main-header { + display: flex; + justify-content: space-between; + align-items: center; +} +.author-box { + display: flex; + align-items: center; +} +.author { + margin-bottom: 0px; +} +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} +.related-author { + margin-bottom: 0px; + font-size: 14px; + font-weight: normal; + font-style: italic; +} +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + display: block; + margin-bottom: 5px; +} + +/* .row { + display: flex; + align-items: flex-start; + gap: 75px; + margin-bottom: 60px; +} +article { + flex: 1; + margin-bottom: 0; +} +aside { + flex: 0 0 300px; +} */ + +/* CSS GRID layout */ +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} +.main-header { + grid-column: 1 / span 2; +} +article { +} +aside { +} +footer { + background-color: #1098ad; + grid-column: 1 / span 2; +} diff --git a/Dimuthu/05-Design/chair-1.jpg b/Dimuthu/05-Design/chair-1.jpg new file mode 100644 index 000000000..3100aa168 Binary files /dev/null and b/Dimuthu/05-Design/chair-1.jpg differ diff --git a/Dimuthu/05-Design/chair-2.jpg b/Dimuthu/05-Design/chair-2.jpg new file mode 100644 index 000000000..33c8d854c Binary files /dev/null and b/Dimuthu/05-Design/chair-2.jpg differ diff --git a/Dimuthu/05-Design/chair-3.jpg b/Dimuthu/05-Design/chair-3.jpg new file mode 100644 index 000000000..f57fcf10e Binary files /dev/null and b/Dimuthu/05-Design/chair-3.jpg differ diff --git a/Dimuthu/05-Design/customers.jpg b/Dimuthu/05-Design/customers.jpg new file mode 100644 index 000000000..2d1d4f851 Binary files /dev/null and b/Dimuthu/05-Design/customers.jpg differ diff --git a/Dimuthu/05-Design/hero.jpg b/Dimuthu/05-Design/hero.jpg new file mode 100644 index 000000000..5532819b1 Binary files /dev/null and b/Dimuthu/05-Design/hero.jpg differ diff --git a/Dimuthu/05-Design/index.html b/Dimuthu/05-Design/index.html new file mode 100644 index 000000000..c53139bd9 --- /dev/null +++ b/Dimuthu/05-Design/index.html @@ -0,0 +1,379 @@ + + + + + + + + + + + + + Lisbon Chair Shop + + +

We design and build better chairs, for a better life

+ In a small shop in the heart of Lisbon, we spend our days + relentlessly perfecting the chair. The result is a perfect blend of + beauty and comfort, that will have a lasting impact on your health. +

+ Shop chairs +

+ +

What makes our chairs special

+ +

Science meets design

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus + similique adipisci praesentium. +

+ +

+ Maximal comfort +

+ Reprehenderit optio placeat quasi excepturi architecto, explicabo + facilis perspiciatis error maxime magnam. +

+ +

+ Ethical and sustainable +

+ Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat + omnis est laudantium voluptatem voluptas! +

+ +

"We couldn't live without these chairs anymore"

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor + repellat at, nesciunt quia cum minima ipsum culpa totam sapiente + recusandae earum debitis doloribus in quasi voluptatibus! +

— Mary and Sarah Johnson

+ +

Our bestselling chairs

+ +

+ + +

+ + diff --git a/Dimuthu/05-Design/style.css b/Dimuthu/05-Design/style.css new file mode 100644 index 000000000..e59262211 --- /dev/null +++ b/Dimuthu/05-Design/style.css @@ -0,0 +1,209 @@ +/* +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: #099268 + Gray color: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: 'Inter', sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; +} + +.container { + width: 960px; + margin: 0 auto; +} + +header, +section { + margin-bottom: 80px; +} + +h2 { + margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5; +} + +.grid-3-cols { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 80px; +} + +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + + display: inline-block; + font-weight: 500; + border-radius: 100px; +} +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--big { + padding: 16px 32px; + font-size: 18px; +} +.btn--small { + font-size: 14px; + padding: 8px 12px; +} +img { + border-radius: 12px; +} + +/* ------------------------ */ +/* COMPONENT STYLES */ +/* ------------------------ */ + +/* HEADER */ +header { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 80px; + margin-top: 64px; +} + +.header-text-box { + align-self: center; +} + +h1 { + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; +} + +.header-text { + margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; +} + +img { + width: 100%; +} + +/* FEATURES */ +.features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; +} + +.features-title { + margin-bottom: 16px; + font-size: 20px; +} + +.features-text { + font-size: 18px; + line-height: 1.7; +} + +/* TESTIMONIAL */ +.testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; +} + +.testimonial-box { + grid-column: 2 / -1; + align-self: center; +} + +.testimonial-box h2 { + margin-bottom: 24px; + font-size: 24px; +} + +.testimonial-text { + font-style: italic; + margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} +.testimonial-author { + color: #c3fae8; +} + +/* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); + border-radius: 12px; +} +.chair img { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} +.chair-box { + padding: 32px; +} + +h3 { + margin-bottom: 24px; + font-size: 20px; +} + +.chair-details { + list-style: none; + margin-bottom: 16px; +} + +.chair-details li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 24px; +} + +.chair-details li:last-child { + margin-bottom: 0; +} + +.chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; +} + +.chair-price { + display: flex; + justify-content: space-between; + font-size: 20px; + align-items: center; +} + +footer { + margin-bottom: 48px; + font-size: 14px; + color: #495057; +} diff --git a/Dimuthu/06-Components/01-accordion.html b/Dimuthu/06-Components/01-accordion.html new file mode 100644 index 000000000..448bc7b69 --- /dev/null +++ b/Dimuthu/06-Components/01-accordion.html @@ -0,0 +1,196 @@ + + + + + + + Accordion Component + + + + +

Where are these chairs assembled?

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis + perferendis, reiciendis, cum perspiciatis voluptatibus repellat + iusto, molestias blanditiis eligendi numquam commodi consequatur + nisi iure tempore? Ipsam tempora dicta quam esse. +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit molestiae quis nostrum quisquam dolor fugit ad nisi.
Harum nemo nisi perferendis voluptas nostrum!
Quisquam, recusandae quidem nisi optio commodi qui.

How long do I have to return my chair?

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit molestiae quis nostrum quisquam dolor fugit ad nisi.
Harum nemo nisi perferendis voluptas nostrum!
Quisquam, recusandae quidem nisi optio commodi qui.

Do you ship to countries outside of the EU?

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Velit molestiae quis nostrum quisquam dolor fugit ad nisi.
Harum nemo nisi perferendis voluptas nostrum!
Quisquam, recusandae quidem nisi optio commodi qui.

+ + diff --git a/Dimuthu/06-Components/02-carousel.html b/Dimuthu/06-Components/02-carousel.html new file mode 100644 index 000000000..b49faba16 --- /dev/null +++ b/Dimuthu/06-Components/02-carousel.html @@ -0,0 +1,176 @@ + + + + + + + Accordion Component + + + + +

+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos + cum ullam quo illum sunt, perferendis repellendus eos fugiat modi + numquam iste. Laborum libero molestias sunt cupiditate minus culpa + enim omnis. +
+
Maria de Almeda
+
Senior product manager at EDP Comercial
+

+ + +

+ + + + +

+ + diff --git a/Dimuthu/06-Components/03-table.html b/Dimuthu/06-Components/03-table.html new file mode 100644 index 000000000..9853a4d12 --- /dev/null +++ b/Dimuthu/06-Components/03-table.html @@ -0,0 +1,103 @@ + + + + + + + Accordion Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Chair +	The Laid Back +	The Worker Bee +	The Chair 4/2 +
Width +	80cm	60cm	220cm
Height +	100cm	110cm	90cm
Depth +	70cm	65cm	80cm
Weight +	16kg	22kg	80kg

+ + diff --git a/Dimuthu/06-Components/04-pagination.html b/Dimuthu/06-Components/04-pagination.html new file mode 100644 index 000000000..7b0d3942f --- /dev/null +++ b/Dimuthu/06-Components/04-pagination.html @@ -0,0 +1,136 @@ + + + + + + + Accordion Component + + + + +

+ + 1 + 2 + 3 + 4 + 5 + 6 + ... + 23 + +

+ + diff --git a/Dimuthu/06-Components/05-hero.html b/Dimuthu/06-Components/05-hero.html new file mode 100644 index 000000000..a87ef1a72 --- /dev/null +++ b/Dimuthu/06-Components/05-hero.html @@ -0,0 +1,126 @@ + + + + + + + Omnifood Hero Section + + + + + + +

+ + +

Some random heading

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt + iste distinctio quia est consequatur mollitia minima repellendus, + doloribus dicta accusantium, non corporis vero libero magnam accusamus + harum! Repellendus, hic asperiores? Lorem ipsum dolor sit amet + consectetur adipisicing elit. Rem accusamus iure consequuntur itaque + accusantium perferendis, sed, quae quidem eligendi non, officiis + cumque animi laborum soluta. Cum accusantium voluptatem odit + distinctio. +

+ + diff --git a/Dimuthu/06-Components/06-app-layout.html b/Dimuthu/06-Components/06-app-layout.html new file mode 100644 index 000000000..a64f8f7f8 --- /dev/null +++ b/Dimuthu/06-Components/06-app-layout.html @@ -0,0 +1,107 @@ + + + + + + + App Layout + + + + + + + + + + + +

Email 1

Email 2

Email 3

Email 4

Email 5

Email 6

Email 7

Email 8

Email 9

Email 10

Email view

+ + + diff --git a/Dimuthu/06-Components/component.html b/Dimuthu/06-Components/component.html new file mode 100644 index 000000000..048a8ac7c --- /dev/null +++ b/Dimuthu/06-Components/component.html @@ -0,0 +1,43 @@ + + + + + + + Accordion Component + + + + +

+ + diff --git a/Dimuthu/06-Components/hero.jpg b/Dimuthu/06-Components/hero.jpg new file mode 100644 index 000000000..26f1847c8 Binary files /dev/null and b/Dimuthu/06-Components/hero.jpg differ diff --git a/Dimuthu/06-Components/maria.jpg b/Dimuthu/06-Components/maria.jpg new file mode 100644 index 000000000..33fe230b9 Binary files /dev/null and b/Dimuthu/06-Components/maria.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/content.md b/Dimuthu/07-Omnifood-Desktop/content/content.md new file mode 100644 index 000000000..c729b5747 --- /dev/null +++ b/Dimuthu/07-Omnifood-Desktop/content/content.md @@ -0,0 +1,143 @@ +# Omnifood + +## About Omnifood + +We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. + +## Branding + +Headline: A healthy meal delivered to your door, every single day + +Brand color: #e67e22 + +## Omnifood Website Content + +### Summary + +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! + +### Omnifood features + +Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. +Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. +No waste: All our partners only use reusable containers to package all your meals. +Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. + +### How Omnifood works + +[Show big app images] + +**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! + +### Omnifood works with any diet + +Vegetarian +Vegan +Pescatarian +Gluten-free +Lactose-free +Keto +Paleo +Low FODMAP +Kid-friendly + +### Sample meals + +**Omnifood AI chooses from 5,000+ recipes** + +Meal 1: Japanese Gyozas + +- Category: Vegetarian +- Calories: 650 +- NutriScore (Registered): 74 +- Average rating: 4.9 +- Number reviews: 537 + +Meal 2: Avocado Salad + +- Category: Vegan and Paleo +- Calories: 400 +- NutriScore (Registered): 92 +- Average rating: 4.8 +- Number reviews: 441 + +### We offer a free sample meal + +[Create simple form for users to sign up] + +Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us! + +### We have 2 pricing plans + +Prices include all applicable taxes. Users can cancel at any time. + +Starter: $399 per month + +- 1 meal per day +- Order times are between 11am and 9pm +- Delivery is free + +Complete: $649 per month + +- 2 meal2 per day +- Order 24/7 +- Delivery is free +- Get access to latest recipes + +### Photo gallery + +[Use the 12 photos we provided] + +### Customer testimonials + +[Photos of customers included] + +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) + +### Section with logos of featured publications [see images] + +### Contact information + +Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 +Phone: 415-201-6370 +Email: hello@omnifood.com + +Social profiles: instagram, facebook, twitter [links to them not available yet] + +### Additional links [links not available yet] + +Create account +Sign in +iOS app +Android app +About Omnifood +For Business +Cooking partners +Careers +Recipe directory +Help center +Privacy & terms + +####### + +## Sections + +-Logo + Navigation +-Hero +-How it works +-Diets +-Meals +-CTA +-Pricing + Features +-Testimonials + Gallery +-Featured in +-Footer diff --git a/Dimuthu/07-Omnifood-Desktop/content/css/styles.css b/Dimuthu/07-Omnifood-Desktop/content/css/styles.css new file mode 100644 index 000000000..4c93c56bf --- /dev/null +++ b/Dimuthu/07-Omnifood-Desktop/content/css/styles.css @@ -0,0 +1,169 @@ +/* + ---TYPOGRAPHY SYSTEM + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + - FONT WEIGHTS: + + - LINE HEIGHTS: + Default: 1 + + --- 02 COLORS + +- Primary: #e67e22 +- Tints: #fdf2e9 +- Shades: #cf711f +- Accents: +- Grays: +#555 +#333 + +--- 05 SHADOWS + +--- 06 BORDER-RADIUS + +--- 07 WHITESPACE + + - Spacing system (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +html { + font-size: 62.5%; +} +body { + font-family: 'Rubik', sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + +/*****************************/ +/* GENERAL REUSABLE COMPONENTS */ +/*****************************/ +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + font-weight: 700; + letter-spacing: -0.5px; + color: #333; + margin-bottom: 3.2rem; +} +.btn:link, +.btn:visited { + font-size: 2rem; + font-weight: 600; + text-decoration: none; + display: inline-block; + padding: 1.6rem 3.2rem; + border-radius: 8px; + transition: background-color 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + /* border: 3px solid #fff; */ + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} +.margin-right-sm { + margin-right: 1.6rem !important; +} + +/*****************************/ +/* HEADER */ +/*****************************/ +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* because we want the header to be sticky */ + height: 9.6rem; + padding: 0 4.8re; +} +.logo { + height: 2.4rem; +} + +/*****************************/ +/* HERO SECTION */ +/*****************************/ + +.test { + max-width: 1000px; + background-color: red; + padding: 100px; +} +.section-hero { + background-color: #fdf2e9; + padding: 9.6rem 0px; +} +.hero { + max-width: 130rem; + margin: 0 auto; + display: grid; + align-items: center; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; +} + +.hero-description { + font-size: 2rem; + line-height: 1.5; + margin-bottom: 4.8rem; +} +.hero-img { + width: 100%; +} + +.delivered-meals { + margin-top: 8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} +.delivered-imgs { + display: flex; +} +.delivered-imgs img:last-child { + margin: 0; +} +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid; +} +.delivered-text { + font-size: 1.8rem; +} +.delivered-text span { + color: #cf711f; + font-weight: 700; +} diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-1.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-2.png b/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-2.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-3.png b/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/app/app-screen-3.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/ben.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/ben.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-1.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-2.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-3.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-4.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-5.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/customer-6.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/dave.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/dave.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/hannah.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/customers/steve.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/customers/steve.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/eating.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/eating.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/favicon.png b/Dimuthu/07-Omnifood-Desktop/content/img/favicon.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/favicon.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/hero.png b/Dimuthu/07-Omnifood-Desktop/content/img/hero.png new file mode 100644 index 000000000..7bd8ca857 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/hero.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/logos/business-insider.png b/Dimuthu/07-Omnifood-Desktop/content/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/logos/business-insider.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/logos/forbes.png b/Dimuthu/07-Omnifood-Desktop/content/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/logos/forbes.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/Dimuthu/07-Omnifood-Desktop/content/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/logos/techcrunch.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/Dimuthu/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/logos/usa-today.png b/Dimuthu/07-Omnifood-Desktop/content/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/logos/usa-today.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/meals/meal-1.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/Dimuthu/07-Omnifood-Desktop/content/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/meals/meal-2.jpg differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/img/omnifood-logo.png b/Dimuthu/07-Omnifood-Desktop/content/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/Dimuthu/07-Omnifood-Desktop/content/img/omnifood-logo.png differ diff --git a/Dimuthu/07-Omnifood-Desktop/content/index.html b/Dimuthu/07-Omnifood-Desktop/content/index.html new file mode 100644 index 000000000..eb5ae6455 --- /dev/null +++ b/Dimuthu/07-Omnifood-Desktop/content/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + + + + 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. +

+ Start eating well + Learn more ↓ +

+ 250,000+ meals delevered last year! +

Woman enjoying food, meals in storage container and
+ food bowls on a table

+ + diff --git a/Dimuthu/08-Omnifood-Responsive/content.md b/Dimuthu/08-Omnifood-Responsive/content.md new file mode 100644 index 000000000..092b60a6e --- /dev/null +++ b/Dimuthu/08-Omnifood-Responsive/content.md @@ -0,0 +1,144 @@ +# Omnifood + +## About Omnifood + +We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. + +## Branding + +Headline: A healthy meal delivered to your door, every single day + +Brand color: #e67e22 + +## Omnifood Website Content + +### Summary + +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! + +### Omnifood features + +Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. +Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. +No waste: All our partners only use reusable containers to package all your meals. +Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. + +### How Omnifood works + +[Show big app images] + +**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! + +### Omnifood works with any diet + +Vegetarian +Vegan +Pescatarian +Gluten-free +Lactose-free +Keto +Paleo +Low FODMAP +Kid-friendly + +### Sample meals + +**Omnifood AI chooses from 5,000+ recipes** + +Meal 1: Japanese Gyozas + +- Category: Vegetarian +- Calories: 650 +- NutriScore (Registered): 74 +- Average rating: 4.9 +- Number reviews: 537 + +Meal 2: Avocado Salad + +- Category: Vegan and Paleo +- Calories: 400 +- NutriScore (Registered): 92 +- Average rating: 4.8 +- Number reviews: 441 + +### We offer a free sample meal + +[Create simple form for users to sign up] + +Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us! + +### We have 2 pricing plans + +Prices include all applicable taxes. Users can cancel at any time. + +Starter: $399 per month + +- 1 meal per day +- Order times are between 11am and 9pm +- Delivery is free + +Complete: $649 per month + +- 2 meal2 per day +- Order 24/7 +- Delivery is free +- Get access to latest recipes + +### Photo gallery + +[Use the 12 photos we provided] + +### Customer testimonials + +[Photos of customers included] + +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) + +### Section with logos of featured publications [see images] + +### Contact information + +Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 +Phone: 415-201-6370 +Email: hello@omnifood.com + +Social profiles: instagram, facebook, twitter [links to them not available yet] + +### Additional links [links not available yet] + +Create account +Sign in +iOS app +Android app + +About Omnifood +For Business +Cooking partners +Careers + +Recipe directory +Help center +Privacy & terms + +###### + +## Sections + +- Logo + Navigation +- Hero +- Featured in +- How it works +- Meals (and list of diets) +- Testimonials + gallery +- Pricing + features +- CTA +- Footer diff --git a/Dimuthu/08-Omnifood-Responsive/css/general.css b/Dimuthu/08-Omnifood-Responsive/css/general.css new file mode 100644 index 000000000..879f58295 --- /dev/null +++ b/Dimuthu/08-Omnifood-Responsive/css/general.css @@ -0,0 +1,282 @@ +/* +--- 01 TYPOGRAPHY SYSTEM + +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Font weights +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +- Line heights +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS + +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e + +- Shades: +#cf711f +#45260a + +- Accents: +- Greys + +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS + +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 06 BORDER-RADIUS + +Default: 9px +Medium: 11px + +--- 07 WHITESPACE + +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + /* 10px / 16px = 0.625 = 62.5% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + +/**************************/ +/* GENRAL REUSABLE COMPONENTS */ +/**************************/ + +.container { + /* 1140px */ + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; + + /* margin-bottom: 9.6rem; */ +} + +/* .grid:last-child { + margin-bottom: 0; +} */ + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + /* color: #45260a; */ + /* color: #343a40; */ + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn, +.btn:link, +.btn:visited { + display: inline-block; + + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + /* Only necessary for .btn */ + border: none; + cursor: pointer; + font-family: inherit; + + /* Put transition on original "state" */ + /* transition: background-color 0.3s; */ + transition: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* border: 3px solid #fff; */ + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.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; +} + +.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; +} + +*:focus { + outline: none; + /* outline: 4px dotted #e67e22; */ + /* outline-offset: 8px; */ + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +/* HELPER/SETTINGS CLASSES */ +.margin-right-sm { + margin-right: 1.6rem !important; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} diff --git a/Dimuthu/08-Omnifood-Responsive/css/style.css b/Dimuthu/08-Omnifood-Responsive/css/style.css new file mode 100644 index 000000000..dde886185 --- /dev/null +++ b/Dimuthu/08-Omnifood-Responsive/css/style.css @@ -0,0 +1,628 @@ +/**************************/ +/* HEADER */ +/**************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* Because we want header to be sticky later */ + height: 9.6rem; + padding: 0 4.8rem; +} + +.logo { + height: 2.2rem; +} + +/**************************/ +/* NAVIGATION */ +/**************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 3.2rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/**************************/ +/* HERO SECTION */ +/**************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/**************************/ +/* FEATURED IN SECTION */ +/**************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #888; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/**************************/ +/* HOW IT WORKS SECTION */ +/**************************/ + +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + position: relative; + + display: flex; + align-items: center; + justify-content: center; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + /* height: 60%; */ + + /* 60% of parent's width */ + padding-bottom: 60%; + + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + z-index: -1; +} + +.step-img { + width: 35%; + /* z-index: 10; */ +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.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; + transition: all 0.4s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); +} + +.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--vegetarian { + background-color: #51cf66; +} +.tag--vegan { + background-color: #94d82d; +} +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + font-size: 2.4rem; + 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%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +/**************************/ +/* TESTIMONIALS SECTION */ +/**************************/ + +.section-testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials { + 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: all 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.princing-plan { + border-radius: 11px; + + width: 75%; +} + +.princing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.princing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} + +.princing-plan--complete::after { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} + +.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-sing-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fdf2e9; + margin-bottom: 3.2rem; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8; +} + +/**************************/ +/* CTA SECTION */ +/**************************/ + +.section-cta { + /* top / right / bottom / left */ + /* padding: 9.6rem 0 12.8rem 0; */ + + /* top / horizontal / left */ + padding: 4.8rem 0 12.8rem; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + /* background-color: #e67e22; */ + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta .heading-secondary { + /* color: #45260a; */ + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta *:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); +} + +/**************************/ +/* FOOTER */ +/**************************/ + +.footer { + padding: 12.8rem 0; + border-top: 1px solid #eee; +} + +.grid--footer { + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} + +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.social-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.6; + color: #767676; + margin-top: auto; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-1.png b/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-1.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-2.png b/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-2.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-3.png b/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/app/app-screen-3.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/ben.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/ben.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/customer-1.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-1.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/customer-2.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-2.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/customer-3.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-3.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/customer-4.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-4.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/customer-5.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-5.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/customer-6.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/customer-6.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/dave.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/dave.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/hannah.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/hannah.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/customers/steve.jpg b/Dimuthu/08-Omnifood-Responsive/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/customers/steve.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/eating.jpg b/Dimuthu/08-Omnifood-Responsive/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/eating.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/favicon.png b/Dimuthu/08-Omnifood-Responsive/img/favicon.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/favicon.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-1.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-1.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-10.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-10.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-11.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-11.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-12.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-12.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-2.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-2.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-3.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-3.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-4.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-4.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-5.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-5.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-6.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-6.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-7.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-7.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-8.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-8.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-9.jpg b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/gallery/gallery-9.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/hero.png b/Dimuthu/08-Omnifood-Responsive/img/hero.png new file mode 100644 index 000000000..7bd8ca857 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/hero.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/logos/business-insider.png b/Dimuthu/08-Omnifood-Responsive/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/logos/business-insider.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/logos/forbes.png b/Dimuthu/08-Omnifood-Responsive/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/logos/forbes.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/logos/techcrunch.png b/Dimuthu/08-Omnifood-Responsive/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/logos/techcrunch.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/logos/the-new-york-times.png b/Dimuthu/08-Omnifood-Responsive/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/logos/the-new-york-times.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/logos/usa-today.png b/Dimuthu/08-Omnifood-Responsive/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/logos/usa-today.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/meals/meal-1.jpg b/Dimuthu/08-Omnifood-Responsive/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/meals/meal-1.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/meals/meal-2.jpg b/Dimuthu/08-Omnifood-Responsive/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/meals/meal-2.jpg differ diff --git a/Dimuthu/08-Omnifood-Responsive/img/omnifood-logo.png b/Dimuthu/08-Omnifood-Responsive/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/Dimuthu/08-Omnifood-Responsive/img/omnifood-logo.png differ diff --git a/Dimuthu/08-Omnifood-Responsive/index.html b/Dimuthu/08-Omnifood-Responsive/index.html new file mode 100644 index 000000000..7cf37a8b0 --- /dev/null +++ b/Dimuthu/08-Omnifood-Responsive/index.html @@ -0,0 +1,688 @@ + + + + + + + + + + + + + + + + + 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. +

+ Start eating well + Learn more ↓ +

+ 250,000+ meals delivered last year! +

+ +

As featured in

+ +

+ 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! +

iPhone app
+ preferences selection screen

+ + +

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! +

+ +

+ Meals +

+ Omnifood AI chooses from 5,000+ recipes +

+ +

+ Vegetarian +

Japanese Gyozas

+ + 650 calories +
+ + NutriScore ® 74 +
+ + 4.9 rating (537) +

+ +

+ Vegan + Paleo +

Avocado Salad

+ + 400 calories +
+ + NutriScore ® 92 +
+ + 4.8 rating (441) +

+ +

Works with any diet:

+ + Vegetarian +
+ + Vegan +
+ + Pescatarian +
+ + Gluten-free +
+ + Lactose-free +
+ + Keto +
+ + Paleo +
+ + Low FODMAP +
+ + Kid-friendly +

+ +

+ See all recipes → +

+ +

+ Testimonials +

Once you try it, you can't go back

+ +

+ +

+ +

+ +

+ +

+ +

+ Pricing +

+ Eating well without breaking the bank +

+ +

Starter

$399

per month. That's just $13 per meal!

+ + 1 meal per day +
+ + Order from 11am to 9pm +
+ + Delivery is free +
+ +

+ Start eating well +

+ +

Complete

$649

per month. That's just $11 per meal!

+ + 2 meals per day +
+ + Order 24/7 +
+ + Delivery is free +
+ + Get access to latest recipes +

+ Start eating well +

+ +

Never cook again!

+ Our subscriptions cover 365 days per year, even including major + holidays. +

+ +

Local and organic

+ Our cooks only use local, fresh, and organic products to prepare + your meals. +

+ +

No waste

+ All our partners only use reusable containers to package all your + meals. +

+ +

Pause anytime

+ Going on vacation? Just pause your subscription, and we refund + unused days. +

+ +

Get your first meal for free!

+ Healthy, tasty and hassle-free meals are waiting for you. Start + eating well today. You can cancel or pause anytime. And the + first meal is on us! +

+ + +

+ + + + diff --git a/Dimuthu/09-Omnifood-Optimizations/content.md b/Dimuthu/09-Omnifood-Optimizations/content.md new file mode 100644 index 000000000..092b60a6e --- /dev/null +++ b/Dimuthu/09-Omnifood-Optimizations/content.md @@ -0,0 +1,144 @@ +# Omnifood + +## About Omnifood + +We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. + +## Branding + +Headline: A healthy meal delivered to your door, every single day + +Brand color: #e67e22 + +## Omnifood Website Content + +### Summary + +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! + +### Omnifood features + +Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. +Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. +No waste: All our partners only use reusable containers to package all your meals. +Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. + +### How Omnifood works + +[Show big app images] + +**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! + +### Omnifood works with any diet + +Vegetarian +Vegan +Pescatarian +Gluten-free +Lactose-free +Keto +Paleo +Low FODMAP +Kid-friendly + +### Sample meals + +**Omnifood AI chooses from 5,000+ recipes** + +Meal 1: Japanese Gyozas + +- Category: Vegetarian +- Calories: 650 +- NutriScore (Registered): 74 +- Average rating: 4.9 +- Number reviews: 537 + +Meal 2: Avocado Salad + +- Category: Vegan and Paleo +- Calories: 400 +- NutriScore (Registered): 92 +- Average rating: 4.8 +- Number reviews: 441 + +### We offer a free sample meal + +[Create simple form for users to sign up] + +Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us! + +### We have 2 pricing plans + +Prices include all applicable taxes. Users can cancel at any time. + +Starter: $399 per month + +- 1 meal per day +- Order times are between 11am and 9pm +- Delivery is free + +Complete: $649 per month + +- 2 meal2 per day +- Order 24/7 +- Delivery is free +- Get access to latest recipes + +### Photo gallery + +[Use the 12 photos we provided] + +### Customer testimonials + +[Photos of customers included] + +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) + +### Section with logos of featured publications [see images] + +### Contact information + +Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 +Phone: 415-201-6370 +Email: hello@omnifood.com + +Social profiles: instagram, facebook, twitter [links to them not available yet] + +### Additional links [links not available yet] + +Create account +Sign in +iOS app +Android app + +About Omnifood +For Business +Cooking partners +Careers + +Recipe directory +Help center +Privacy & terms + +###### + +## Sections + +- Logo + Navigation +- Hero +- Featured in +- How it works +- Meals (and list of diets) +- Testimonials + gallery +- Pricing + features +- CTA +- Footer diff --git a/Dimuthu/09-Omnifood-Optimizations/css/general.css b/Dimuthu/09-Omnifood-Optimizations/css/general.css new file mode 100644 index 000000000..4e8cb7052 --- /dev/null +++ b/Dimuthu/09-Omnifood-Optimizations/css/general.css @@ -0,0 +1,289 @@ +/* +--- 01 TYPOGRAPHY SYSTEM + +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Font weights +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +- Line heights +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 +Large: 1.8 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS + +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e + +- Shades: +#cf711f +#45260a + +- Accents: +- Greys + +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS + +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 06 BORDER-RADIUS + +Default: 9px +Medium: 11px + +--- 07 WHITESPACE + +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + + /* 10px / 16px = 0.625 = 62.5% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; + overflow-x: hidden; +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; + + /* Only works if there is nothing absolutely positioned in relation to body */ + overflow-x: hidden; +} + +/**************************/ +/* GENRAL REUSABLE COMPONENTS */ +/**************************/ + +.container { + /* 1140px */ + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; + + /* margin-bottom: 9.6rem; */ +} + +/* .grid:last-child { + margin-bottom: 0; +} */ + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +/* .grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} */ + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + /* color: #45260a; */ + /* color: #343a40; */ + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn, +.btn:link, +.btn:visited { + display: inline-block; + + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + /* Only necessary for .btn */ + border: none; + cursor: pointer; + font-family: inherit; + + /* Put transition on original "state" */ + /* transition: background-color 0.3s; */ + transition: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* border: 3px solid #fff; */ + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.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; +} + +.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; + line-height: 1.2; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +*:focus { + outline: none; + /* outline: 4px dotted #e67e22; */ + /* outline-offset: 8px; */ + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +/* HELPER/SETTINGS CLASSES */ +.margin-right-sm { + margin-right: 1.6rem !important; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} diff --git a/Dimuthu/09-Omnifood-Optimizations/css/queries.css b/Dimuthu/09-Omnifood-Optimizations/css/queries.css new file mode 100644 index 000000000..5f0cf2820 --- /dev/null +++ b/Dimuthu/09-Omnifood-Optimizations/css/queries.css @@ -0,0 +1,300 @@ +/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */ + +/**************************/ +/* BELOW 1344px (Smaller desktops) */ +/**************************/ + +@media (max-width: 84em) { + .hero { + max-width: 120rem; + } + + .heading-primary { + font-size: 4.4rem; + } + + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} + +/**************************/ +/* BELOW 1200px (Landscape Tablets) */ +/**************************/ + +@media (max-width: 75em) { + html { + /* 9px / 16px */ + font-size: 56.25%; + } + + .grid { + column-gap: 4.8rem; + row-gap: 6.4rem; + } + + .heading-secondary { + font-size: 3.6rem; + } + + .heading-tertiary { + font-size: 2.4rem; + } + + .header { + padding: 0 3.2rem; + } + + .main-nav-list { + gap: 3.2rem; + } + + .hero { + gap: 4.8rem; + } + + .testimonials-container { + padding: 9.6rem 3.2rem; + } +} + +/**************************/ +/* BELOW 944px (Tablets) */ +/**************************/ + +@media (max-width: 59em) { + html { + /* 8px / 16px = 0.5 = 50% */ + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-text-box, + .hero-img-box { + text-align: center; + } + + .hero-img { + width: 60%; + } + + .delivered-meals { + justify-content: center; + margin-top: 3.2rem; + } + + .logos img { + height: 2.4rem; + } + + .step-number { + font-size: 7.4rem; + } + + .meal-content { + padding: 2.4rem 3.2rem 3.2rem 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + /* 3/5 = 60% + 2/5 = 40% */ + grid-template-columns: 3fr 2fr; + } + + .cta-form { + grid-template-columns: 1fr; + } + + .btn--form { + margin-top: 1.2rem; + } + + /* MOBILE NAVIGATION */ + .btn-mobile-nav { + display: block; + } + + .main-nav { + background-color: rgba(255, 255, 255, 0.97); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + transform: translateX(100%); + + display: flex; + align-items: center; + justify-content: center; + transition: all 0.5s ease-in; + + /* Hide navigation */ + /* Allows NO transitions at all */ + /* display: none; */ + + /* 1) Hide it visually */ + opacity: 0; + + /* 2) Make it unaccessible to mouse and keyboard */ + pointer-events: none; + + /* 3) Hide it from screen readers */ + visibility: hidden; + } + + .nav-open .main-nav { + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: translateX(0); + } + + .nav-open .icon-mobile-nav[name="close-outline"] { + display: block; + } + + .nav-open .icon-mobile-nav[name="menu-outline"] { + display: none; + } + + .main-nav-list { + flex-direction: column; + gap: 4.8rem; + } + + .main-nav-link:link, + .main-nav-link:visited { + font-size: 3rem; + } +} + +/**************************/ +/* BELOW 704px (Smaller tablets) */ +/**************************/ + +@media (max-width: 44em) { + .grid--3-cols, + .grid--4-cols { + grid-template-columns: repeat(2, 1fr); + } + + .diets { + grid-column: 1 / -1; + justify-self: center; + } + + .heading-secondary { + margin-bottom: 4.8rem; + } + + .pricing-plan { + width: 100%; + } + + .grid--footer { + grid-template-columns: repeat(6, 1fr); + } + + .logo-col, + .address-col { + grid-column: span 3; + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.2rem; + } +} + +/**************************/ +/* BELOW 544px (Phones) */ +/**************************/ + +@media (max-width: 34em) { + .grid { + row-gap: 4.8rem; + } + + .grid--2-cols, + .grid--3-cols, + .grid--4-cols { + grid-template-columns: 1fr; + } + + .btn, + .btn:link, + .btn:visited { + padding: 2.4rem 1.6rem; + } + + .section-hero { + padding: 2.4rem 0 6.4rem 0; + } + + .hero { + padding: 0 3.2rem; + } + + .hero-img { + width: 80%; + } + + .logos img { + height: 1.2rem; + } + + .step-img-box:nth-child(2) { + grid-row: 1; + } + + .step-img-box:nth-child(6) { + grid-row: 5; + } + + .step-img-box { + transform: translateY(2.4rem); + } + + .testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(4, 1fr); + gap: 1.2rem; + } + + .cta { + grid-template-columns: 1fr; + } + + .cta-text-box { + padding: 3.2rem; + } + + .cta-img-box { + height: 32rem; + grid-row: 1; + } +} + +/* +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ diff --git a/Dimuthu/09-Omnifood-Optimizations/css/style.css b/Dimuthu/09-Omnifood-Optimizations/css/style.css new file mode 100644 index 000000000..cc82b4fcf --- /dev/null +++ b/Dimuthu/09-Omnifood-Optimizations/css/style.css @@ -0,0 +1,649 @@ +/**************************/ +/* HEADER */ +/**************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* Because we want header to be sticky later */ + height: 9.6rem; + padding: 0 4.8rem; + position: relative; +} + +.logo { + height: 2.2rem; +} + +/**************************/ +/* NAVIGATION */ +/**************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 4.8rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/* MOBILE */ +.btn-mobile-nav { + border: none; + background: none; + cursor: pointer; + + display: none; +} + +.icon-mobile-nav { + height: 4.8rem; + width: 4.8rem; + color: #333; +} + +.icon-mobile-nav[name="close-outline"] { + display: none; +} + +/**************************/ +/* HERO SECTION */ +/**************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/**************************/ +/* FEATURED IN SECTION */ +/**************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #888; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/**************************/ +/* HOW IT WORKS SECTION */ +/**************************/ + +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + position: relative; + + display: flex; + align-items: center; + justify-content: center; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + /* height: 60%; */ + + /* 60% of parent's width */ + padding-bottom: 60%; + + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + z-index: -1; +} + +.step-img { + width: 35%; + /* z-index: 10; */ +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.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; + transition: all 0.4s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); +} + +.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--vegetarian { + background-color: #51cf66; +} +.tag--vegan { + background-color: #94d82d; +} +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + font-size: 2.4rem; + 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%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +/**************************/ +/* TESTIMONIALS SECTION */ +/**************************/ + +.section-testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials { + 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: all 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + + width: 75%; +} + +.pricing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.pricing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} + +.pricing-plan--complete::after { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} + +.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-sing-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fdf2e9; + margin-bottom: 3.2rem; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8; +} + +/**************************/ +/* CTA SECTION */ +/**************************/ + +.section-cta { + /* top / right / bottom / left */ + /* padding: 9.6rem 0 12.8rem 0; */ + + /* top / horizontal / left */ + padding: 4.8rem 0 12.8rem; +} + +.cta { + display: grid; + /* 2/3 = 66.6% + 1/3 = 33.3% */ + grid-template-columns: 2fr 1fr; + /* background-color: #e67e22; */ + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta .heading-secondary { + /* color: #45260a; */ + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta *:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); +} + +/**************************/ +/* FOOTER */ +/**************************/ + +.footer { + padding: 12.8rem 0; + border-top: 1px solid #eee; +} + +.grid--footer { + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} + +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.social-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.6; + color: #767676; + margin-top: auto; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-1.png b/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-1.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-2.png b/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-2.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-3.png b/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/app/app-screen-3.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/ben.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/ben.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-1.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-1.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-2.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-2.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-3.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-3.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-4.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-4.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-5.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-5.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-6.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/customer-6.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/dave.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/dave.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/hannah.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/hannah.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/customers/steve.jpg b/Dimuthu/09-Omnifood-Optimizations/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/customers/steve.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/eating.jpg b/Dimuthu/09-Omnifood-Optimizations/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/eating.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/favicon.png b/Dimuthu/09-Omnifood-Optimizations/img/favicon.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/favicon.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/hero.png b/Dimuthu/09-Omnifood-Optimizations/img/hero.png new file mode 100644 index 000000000..7bd8ca857 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/hero.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/logos/business-insider.png b/Dimuthu/09-Omnifood-Optimizations/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/logos/business-insider.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/logos/forbes.png b/Dimuthu/09-Omnifood-Optimizations/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/logos/forbes.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/logos/techcrunch.png b/Dimuthu/09-Omnifood-Optimizations/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/logos/techcrunch.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/logos/the-new-york-times.png b/Dimuthu/09-Omnifood-Optimizations/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/logos/the-new-york-times.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/logos/usa-today.png b/Dimuthu/09-Omnifood-Optimizations/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/logos/usa-today.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/meals/meal-1.jpg b/Dimuthu/09-Omnifood-Optimizations/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/meals/meal-1.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/meals/meal-2.jpg b/Dimuthu/09-Omnifood-Optimizations/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/meals/meal-2.jpg differ diff --git a/Dimuthu/09-Omnifood-Optimizations/img/omnifood-logo.png b/Dimuthu/09-Omnifood-Optimizations/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/Dimuthu/09-Omnifood-Optimizations/img/omnifood-logo.png differ diff --git a/Dimuthu/09-Omnifood-Optimizations/index.html b/Dimuthu/09-Omnifood-Optimizations/index.html new file mode 100644 index 000000000..6d69f1bab --- /dev/null +++ b/Dimuthu/09-Omnifood-Optimizations/index.html @@ -0,0 +1,700 @@ + + + + + + + + + + + + + + + + + + + + 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. +

+ Start eating well + Learn more ↓ +

+ 250,000+ meals delivered last year! +

+ +

As featured in

+ +

+ How it works +

+ Your daily dose of health in 3 simple steps +

+ +

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

+ +

+ + +

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! +

+ +

+ Meals +

+ Omnifood AI chooses from 5,000+ recipes +

+ +

+ Vegetarian +

Japanese Gyozas

+ + 650 calories +
+ + NutriScore ® 74 +
+ + 4.9 rating (537) +

+ +

+ Vegan + Paleo +

Avocado Salad

+ + 400 calories +
+ + NutriScore ® 92 +
+ + 4.8 rating (441) +

+ +

Works with any diet:

+ + Vegetarian +
+ + Vegan +
+ + Pescatarian +
+ + Gluten-free +
+ + Lactose-free +
+ + Keto +
+ + Paleo +
+ + Low FODMAP +
+ + Kid-friendly +

+ +

+ See all recipes → +

+ +

+ Testimonials +

Once you try it, you can't go back

+ +

+ Pricing +

+ Eating well without breaking the bank +

+ +

Starter

$399

per month. That's just $13 per meal!

+ + 1 meal per day +
+ + Order from 11am to 9pm +
+ + Delivery is free +
+ +

+ Start eating well +

+ +

Complete

$649

per month. That's just $11 per meal!

+ + 2 meals per day +
+ + Order 24/7 +
+ + Delivery is free +
+ + Get access to latest recipes +

+ Start eating well +

+ +

Never cook again!

+ Our subscriptions cover 365 days per year, even including major + holidays. +

+ +

Local and organic

+ Our cooks only use local, fresh, and organic products to prepare + your meals. +

+ +

No waste

+ All our partners only use reusable containers to package all your + meals. +

+ +

Pause anytime

+ Going on vacation? Just pause your subscription, and we refund + unused days. +

+ +

Get your first meal for free!

+ Healthy, tasty and hassle-free meals are waiting for you. Start + eating well today. You can cancel or pause anytime. And the + first meal is on us! +

+ + +

+ + + + diff --git a/Dimuthu/09-Omnifood-Optimizations/script.js b/Dimuthu/09-Omnifood-Optimizations/script.js new file mode 100644 index 000000000..7b9977244 --- /dev/null +++ b/Dimuthu/09-Omnifood-Optimizations/script.js @@ -0,0 +1,72 @@ +/////////////////////////////////////////////////////////// +// Fixing flexbox gap property missing in some Safari versions +function checkFlexGap() { + var flex = document.createElement("div"); + flex.style.display = "flex"; + flex.style.flexDirection = "column"; + flex.style.rowGap = "1px"; + + flex.appendChild(document.createElement("div")); + flex.appendChild(document.createElement("div")); + + document.body.appendChild(flex); + var isSupported = flex.scrollHeight === 1; + flex.parentNode.removeChild(flex); + console.log(isSupported); + + if (!isSupported) document.body.classList.add("no-flexbox-gap"); +} +checkFlexGap(); + +// https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js + +/* +.no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 4.8rem; +} + +.no-flexbox-gap .list-item:not(:last-child) { + margin-bottom: 1.6rem; +} + +.no-flexbox-gap .list-icon:not(:last-child) { + margin-right: 1.6rem; +} + +.no-flexbox-gap .delivered-faces { + margin-right: 1.6rem; +} + +.no-flexbox-gap .meal-attribute:not(:last-child) { + margin-bottom: 2rem; +} + +.no-flexbox-gap .meal-icon { + margin-right: 1.6rem; +} + +.no-flexbox-gap .footer-row div:not(:last-child) { + margin-right: 6.4rem; +} + +.no-flexbox-gap .social-links li:not(:last-child) { + margin-right: 2.4rem; +} + +.no-flexbox-gap .footer-nav li:not(:last-child) { + margin-bottom: 2.4rem; +} + +@media (max-width: 75em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 3.2rem; + } +} + +@media (max-width: 59em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 0; + margin-bottom: 4.8rem; + } +} +*/ diff --git a/Dimuthu/challenge/index.html b/Dimuthu/challenge/index.html new file mode 100644 index 000000000..8fd27b1ef --- /dev/null +++ b/Dimuthu/challenge/index.html @@ -0,0 +1,58 @@ + + + + + + + Document + + + +

Converse Chuck Taylor All Star Low Top

+ +

$65.00

Free shipping

Sale

+ +

+ Ready to dress up or down, these classic canvas Chucks are an everyday + wardrobe staple. +

+ More information → + +

+ +

Product details

Lightweight, durable canvas sneaker
Lightly padded footbed for added comfort
Iconic Chuck Taylor ankle patch.

+ + +

+ + diff --git a/Dimuthu/challenge/styles.css b/Dimuthu/challenge/styles.css new file mode 100644 index 000000000..d0acc5f41 --- /dev/null +++ b/Dimuthu/challenge/styles.css @@ -0,0 +1,166 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.clearfix::after { + content: ''; + display: block; + clear: both; +} + +.product-img { +} + +/* PRODUCT */ +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + position: relative; + + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; + grid-column: 1 / -1; +} + +/* PRODUCT INFORMATION */ +.product-info { + /* (825 - 8 - 250 - 80) / 2 */ + /* width: 243px; */ + margin-top: 20px; + flex: 1; +} + +.product-price { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.sale { + background-color: #ec2f2f; + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + padding: 7px 15px; + display: inline-block; + position: absolute; + top: -17px; + left: -38px; + + /* width: 40px; + text-align: center; */ +} + +.product-description { + margin-bottom: 10px; +} + +.more-info:link, +.more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.product-colors { + display: flex; + gap: 10px; +} +.color { + background-color: #000; + height: 22px; + width: 22px; +} + +.color-blue { + background-color: #2f6ee2; +} +.color-red { + background-color: #ec2f2f; +} +.color-yellow { + background-color: #f0bf1e; +} +.color-green { + background-color: #90cc20; +} +.color-brown { + background-color: #885214; +} + +/* PRODUCT DETAILS */ +.product-details { + /* width: 243px; */ + margin-top: 20px; + flex: 1; +} + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; + border-top: 4px solid black; + grid-column: 1 / -1; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} diff --git a/starter/.DS_Store b/starter/.DS_Store new file mode 100644 index 000000000..ab2d5cfd5 Binary files /dev/null and b/starter/.DS_Store differ

BLOG

What is HTML?

Why should you learn HTML?

BLOG

What is HTML?

Why should you learn HTML?

What makes our chairs special

"We couldn't live without these chairs anymore"

Our bestselling chairs

The Laid Back

The Worker Bee

The Chair 4/2

Some random heading

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

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

As featured in

+ 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 +

Works with any diet:

Once you try it, you can't go back

+ Eating well without breaking the bank +

Get your first meal for free!

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

As featured in

+ 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 +

Works with any diet:

Once you try it, you can't go back

+ Eating well without breaking the bank +

Get your first meal for free!

Converse Chuck Taylor All Star Low Top

Product details