diff --git a/myattempts/01-Test/index.html b/myattempts/01-Test/index.html new file mode 100644 index 000000000..0be7256f5 --- /dev/null +++ b/myattempts/01-Test/index.html @@ -0,0 +1,13 @@ + + + + + + + My first webpage + + +

Hello, world!

My name is Ricardo Antonio, and this is my very first webpage :D

+ + diff --git a/myattempts/02-HTML-Fundamentals/blog.html b/myattempts/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..cd38d9482 --- /dev/null +++ b/myattempts/02-HTML-Fundamentals/blog.html @@ -0,0 +1,11 @@ + + + + + BLOG + + +

BLOG

+ Back to home + + \ No newline at end of file diff --git a/myattempts/02-HTML-Fundamentals/content.txt b/myattempts/02-HTML-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/myattempts/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/myattempts/02-HTML-Fundamentals/img/challenges.jpg b/myattempts/02-HTML-Fundamentals/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/myattempts/02-HTML-Fundamentals/img/challenges.jpg differ diff --git a/myattempts/02-HTML-Fundamentals/img/laura-jones.jpg b/myattempts/02-HTML-Fundamentals/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/myattempts/02-HTML-Fundamentals/img/laura-jones.jpg differ diff --git a/myattempts/02-HTML-Fundamentals/img/post-img.jpg b/myattempts/02-HTML-Fundamentals/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/myattempts/02-HTML-Fundamentals/img/post-img.jpg differ diff --git a/myattempts/02-HTML-Fundamentals/img/related-1.jpg b/myattempts/02-HTML-Fundamentals/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/myattempts/02-HTML-Fundamentals/img/related-1.jpg differ diff --git a/myattempts/02-HTML-Fundamentals/img/related-2.jpg b/myattempts/02-HTML-Fundamentals/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/myattempts/02-HTML-Fundamentals/img/related-2.jpg differ diff --git a/myattempts/02-HTML-Fundamentals/img/related-3.jpg b/myattempts/02-HTML-Fundamentals/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/myattempts/02-HTML-Fundamentals/img/related-3.jpg differ diff --git a/myattempts/02-HTML-Fundamentals/index.html b/myattempts/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..745eb9d62 --- /dev/null +++ b/myattempts/02-HTML-Fundamentals/index.html @@ -0,0 +1,132 @@ + + + + + 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 the MDN Web Docs.

+ +

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

+ + + + + + + diff --git a/myattempts/03-CSS-Fundamentals/blog.html b/myattempts/03-CSS-Fundamentals/blog.html new file mode 100644 index 000000000..cd38d9482 --- /dev/null +++ b/myattempts/03-CSS-Fundamentals/blog.html @@ -0,0 +1,11 @@ + + + + + BLOG + + +

BLOG

+ Back to home + + \ No newline at end of file diff --git a/myattempts/03-CSS-Fundamentals/content.txt b/myattempts/03-CSS-Fundamentals/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/myattempts/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/myattempts/03-CSS-Fundamentals/img/challenges.jpg b/myattempts/03-CSS-Fundamentals/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/myattempts/03-CSS-Fundamentals/img/challenges.jpg differ diff --git a/myattempts/03-CSS-Fundamentals/img/laura-jones.jpg b/myattempts/03-CSS-Fundamentals/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/myattempts/03-CSS-Fundamentals/img/laura-jones.jpg differ diff --git a/myattempts/03-CSS-Fundamentals/img/post-img.jpg b/myattempts/03-CSS-Fundamentals/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/myattempts/03-CSS-Fundamentals/img/post-img.jpg differ diff --git a/myattempts/03-CSS-Fundamentals/img/related-1.jpg b/myattempts/03-CSS-Fundamentals/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/myattempts/03-CSS-Fundamentals/img/related-1.jpg differ diff --git a/myattempts/03-CSS-Fundamentals/img/related-2.jpg b/myattempts/03-CSS-Fundamentals/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/myattempts/03-CSS-Fundamentals/img/related-2.jpg differ diff --git a/myattempts/03-CSS-Fundamentals/img/related-3.jpg b/myattempts/03-CSS-Fundamentals/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/myattempts/03-CSS-Fundamentals/img/related-3.jpg differ diff --git a/myattempts/03-CSS-Fundamentals/index.html b/myattempts/03-CSS-Fundamentals/index.html new file mode 100644 index 000000000..e3ad8261b --- /dev/null +++ b/myattempts/03-CSS-Fundamentals/index.html @@ -0,0 +1,145 @@ + + + + + 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 the MDN Web Docs.

+ +

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

+ + + + +

+ + + + diff --git a/myattempts/03-CSS-Fundamentals/style.css b/myattempts/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..fb531bb36 --- /dev/null +++ b/myattempts/03-CSS-Fundamentals/style.css @@ -0,0 +1,212 @@ +* { + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ + +body { + color: #444; + font-family: sans-serif; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 700px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + height: 80px; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; + position: relative; +} + +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; +} + +/* footer p { + font-size: 16px; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; +} + + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; + margin-bottom: 0px; +} + +li:nth-child(even) { + /* color: red */ +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + display: inline-block; + margin-right: 30px; + margin-top: 10px +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2::after { + 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 +} */ \ No newline at end of file diff --git a/myattempts/04-CSS-Layouts/blog.html b/myattempts/04-CSS-Layouts/blog.html new file mode 100644 index 000000000..cd38d9482 --- /dev/null +++ b/myattempts/04-CSS-Layouts/blog.html @@ -0,0 +1,11 @@ + + + + + BLOG + + +

BLOG

+ Back to home + + \ No newline at end of file diff --git a/myattempts/04-CSS-Layouts/content.txt b/myattempts/04-CSS-Layouts/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/myattempts/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/myattempts/04-CSS-Layouts/css-grid.html b/myattempts/04-CSS-Layouts/css-grid.html new file mode 100644 index 000000000..fcf21c7dc --- /dev/null +++ b/myattempts/04-CSS-Layouts/css-grid.html @@ -0,0 +1,113 @@ + + + + + + + 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/myattempts/04-CSS-Layouts/flexbox.html b/myattempts/04-CSS-Layouts/flexbox.html new file mode 100644 index 000000000..d9bd6ef73 --- /dev/null +++ b/myattempts/04-CSS-Layouts/flexbox.html @@ -0,0 +1,86 @@ + + + + + + + Flexbox + + + +

HTML

and

CSS

are

amazing

languages

learn

+ + diff --git a/myattempts/04-CSS-Layouts/img/challenges.jpg b/myattempts/04-CSS-Layouts/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/myattempts/04-CSS-Layouts/img/challenges.jpg differ diff --git a/myattempts/04-CSS-Layouts/img/laura-jones.jpg b/myattempts/04-CSS-Layouts/img/laura-jones.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/myattempts/04-CSS-Layouts/img/laura-jones.jpg differ diff --git a/myattempts/04-CSS-Layouts/img/post-img.jpg b/myattempts/04-CSS-Layouts/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/myattempts/04-CSS-Layouts/img/post-img.jpg differ diff --git a/myattempts/04-CSS-Layouts/img/related-1.jpg b/myattempts/04-CSS-Layouts/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/myattempts/04-CSS-Layouts/img/related-1.jpg differ diff --git a/myattempts/04-CSS-Layouts/img/related-2.jpg b/myattempts/04-CSS-Layouts/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/myattempts/04-CSS-Layouts/img/related-2.jpg differ diff --git a/myattempts/04-CSS-Layouts/img/related-3.jpg b/myattempts/04-CSS-Layouts/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/myattempts/04-CSS-Layouts/img/related-3.jpg differ diff --git a/myattempts/04-CSS-Layouts/index.html b/myattempts/04-CSS-Layouts/index.html new file mode 100644 index 000000000..8f3ebb9ce --- /dev/null +++ b/myattempts/04-CSS-Layouts/index.html @@ -0,0 +1,155 @@ + + + + + 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 +

+ + HTML code on a screen

+ +

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

+ +

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

+ + + + +

+ + + + diff --git a/myattempts/04-CSS-Layouts/style.css b/myattempts/04-CSS-Layouts/style.css new file mode 100644 index 000000000..0f4d3fdc7 --- /dev/null +++ b/myattempts/04-CSS-Layouts/style.css @@ -0,0 +1,329 @@ +* { + 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: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; +} + +nav { + font-size: 18px; +} + +article { +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 40px; + +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; + position: relative; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} + +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; +} + +/* footer p { + font-size: 16px; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; + margin-left: 0; +} + + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; + margin-bottom: 0px; +} + +li:nth-child(even) { + /* color: red */ +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + display: inline-block; + margin-right: 30px; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2::after { + 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 +} */ + +/* FLOATS + +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} + + +*/ + + +/* FLEXBOX */ +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + display: block; + margin-bottom: 5px; +} + +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} + +/* FLEXBOX LAYOUT */ +/* .row { + display: flex; + gap: 75px; + margin-bottom: 60px; + align-items: flex-start; +} + +article { + flex: 1; + margin-bottom: 0; +} + +aside { + flex: 0 0 300px; +} */ + +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + grid-column: 1 / -1; +} + +footer { + grid-column: 1 / -1; +} \ No newline at end of file diff --git a/myattempts/05-Design/chair-1.jpg b/myattempts/05-Design/chair-1.jpg new file mode 100644 index 000000000..3100aa168 Binary files /dev/null and b/myattempts/05-Design/chair-1.jpg differ diff --git a/myattempts/05-Design/chair-2.jpg b/myattempts/05-Design/chair-2.jpg new file mode 100644 index 000000000..33c8d854c Binary files /dev/null and b/myattempts/05-Design/chair-2.jpg differ diff --git a/myattempts/05-Design/chair-3.jpg b/myattempts/05-Design/chair-3.jpg new file mode 100644 index 000000000..f57fcf10e Binary files /dev/null and b/myattempts/05-Design/chair-3.jpg differ diff --git a/myattempts/05-Design/customers.jpg b/myattempts/05-Design/customers.jpg new file mode 100644 index 000000000..2d1d4f851 Binary files /dev/null and b/myattempts/05-Design/customers.jpg differ diff --git a/myattempts/05-Design/hero.jpg b/myattempts/05-Design/hero.jpg new file mode 100644 index 000000000..5532819b1 Binary files /dev/null and b/myattempts/05-Design/hero.jpg differ diff --git a/myattempts/05-Design/index.html b/myattempts/05-Design/index.html new file mode 100644 index 000000000..24c906814 --- /dev/null +++ b/myattempts/05-Design/index.html @@ -0,0 +1,202 @@ + + + + + + + + + + + + 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/myattempts/05-Design/style.css b/myattempts/05-Design/style.css new file mode 100644 index 000000000..0a7d45c24 --- /dev/null +++ b/myattempts/05-Design/style.css @@ -0,0 +1,211 @@ +/* +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 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* + Main Color: #087f5b + Gray Color: #343a40 +*/ + +/* ------------------------ */ +/* 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: 96px; +} + +h2 { + margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; +} + +.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; + font-weight: 500; + display: inline-block; + border-radius: 100px; +} + +.btn:hover, .btn:active { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.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-author { + color:#c3fae8 +} +.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; +} + +/* CHAIRS */ +.chair { + box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.chair-box { + padding: 32px; +} + +h3 { + margin-bottom: 24px; + font-size: 20px; +} + +.chair-details { + list-style: none; + margin-bottom: 48px; +} + +.chair-details li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +.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/myattempts/06-Components/01-accordion.html b/myattempts/06-Components/01-accordion.html new file mode 100644 index 000000000..7082bac36 --- /dev/null +++ b/myattempts/06-Components/01-accordion.html @@ -0,0 +1,228 @@ + + + + + + + Accordion Component + + + + + + +

Where are these chairs assembled?

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel + possimus dignissimos laboriosam odio esse. Voluptatibus quis nam + ratione dolore deserunt cum a alias architecto, tempore iusto + accusantium, saepe, quidem distinctio. +

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+ A nostrum laborum, temporibus quibusdam quas numquam. +
+ Omnis vel qui architecto hic esse obcaecati provident unde minus! +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit? +

How long do I have to return my chair?

+ +

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+ A nostrum laborum, temporibus quibusdam quas numquam. +
+ Omnis vel qui architecto hic esse obcaecati provident unde minus! +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit? +

Do you ship to countries outside the EU?

+ +

Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+ A nostrum laborum, temporibus quibusdam quas numquam. +
+ Omnis vel qui architecto hic esse obcaecati provident unde minus! +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit? +

+ + diff --git a/myattempts/06-Components/02-carousel.html b/myattempts/06-Components/02-carousel.html new file mode 100644 index 000000000..13aea4b0b --- /dev/null +++ b/myattempts/06-Components/02-carousel.html @@ -0,0 +1,189 @@ + + + + + + + Carousel Component + + + + + + +

+
+ "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto + consectetur accusamus quos iusto velit dolorum at veniam deleniti + aspernatur id maxime ea." +
+
Maria de Almeida
+
Senior Product Manager at EDP Comercial
+

+ + + +

+ + + + +

+ + diff --git a/myattempts/06-Components/03-tables.html b/myattempts/06-Components/03-tables.html new file mode 100644 index 000000000..04e890bb2 --- /dev/null +++ b/myattempts/06-Components/03-tables.html @@ -0,0 +1,113 @@ + + + + + + + Carousel Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

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

+ + diff --git a/myattempts/06-Components/04-pagination.html b/myattempts/06-Components/04-pagination.html new file mode 100644 index 000000000..246727ae3 --- /dev/null +++ b/myattempts/06-Components/04-pagination.html @@ -0,0 +1,149 @@ + + + + + + + Carousel Component + + + + + + +

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

+ + diff --git a/myattempts/06-Components/06-app-layout.html b/myattempts/06-Components/06-app-layout.html new file mode 100644 index 000000000..4782e7a83 --- /dev/null +++ b/myattempts/06-Components/06-app-layout.html @@ -0,0 +1,116 @@ + + + + + + + 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/myattempts/06-Components/componets.html b/myattempts/06-Components/componets.html new file mode 100644 index 000000000..205d9fcfa --- /dev/null +++ b/myattempts/06-Components/componets.html @@ -0,0 +1,45 @@ + + + + + + + Carousel Component + + + + + + + + + diff --git a/myattempts/06-Components/hero.jpg b/myattempts/06-Components/hero.jpg new file mode 100644 index 000000000..26f1847c8 Binary files /dev/null and b/myattempts/06-Components/hero.jpg differ diff --git a/myattempts/06-Components/maria.jpg b/myattempts/06-Components/maria.jpg new file mode 100644 index 000000000..33fe230b9 Binary files /dev/null and b/myattempts/06-Components/maria.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/content.md b/myattempts/07-Omnifood-Desktop/content.md new file mode 100644 index 000000000..f0c1c1674 --- /dev/null +++ b/myattempts/07-Omnifood-Desktop/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 Section +- Featured in +- How it works +- Meals (and list of diets) +- Testimonials + Gallery +- Pricing + features +- CTA +- Footer diff --git a/myattempts/07-Omnifood-Desktop/css/general.css b/myattempts/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..05756f9e5 --- /dev/null +++ b/myattempts/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,266 @@ +/* +--- 01 TYPOGRAFY SYSTEM --- + +- Font size system (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 +Paragraph default: 1.6 + +- Letter spacing: +-0.05px +0.75px +--- 02 COLORS --- + +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5de +#eb984e +- Shades: #cf711f +- Accents: +- Greys: +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS --- +box-shadow: 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; +} + +/*****************************/ +/* GENERAL REUSABLE COMPONENTS */ +/*****************************/ + +.container { + max-width: 120rem; + margin: 0 auto; + padding: 0 3.2rem; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; +} + +.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; + 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: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; + color: #fff; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + color: #555; + + /* 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/SETINGS SELECTORS */ + +.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/myattempts/07-Omnifood-Desktop/css/style.css b/myattempts/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..c98364928 --- /dev/null +++ b/myattempts/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,633 @@ +/*****************************/ +/* 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.2rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.5; + 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-right: 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%; + /* height: 60%; */ + + /* 60% of parent's width */ + padding-bottom: 45%; + background-color: #fae5de; + z-index: -1; +} + +.step-img { + width: 35%; +} + +/*****************************/ +/* 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; + 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); +} + +/*****************************/ +/* PRICING SECTION */ +/*****************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + + width: 75%; +} + +.pricing-plan--sarter { + 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.6rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6rem; + color: #6f6f6f; +} + +.plan-sign-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 { + padding: 4.8rem 0 12.8rem 0; +} + +.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: 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, 150, 76, 0.3), + rgba(230, 125, 34, 0.3) + ), + 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; + /* outline: 4px dotted #e67e22; + outline-offset: 8px; */ + 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; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; + +} + +.copyright { + font-size: 1.4rem; + color: #767676; + line-height: 1.6; + margin-top: auto; +} + +.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/myattempts/07-Omnifood-Desktop/img/app/app-screen-1.png b/myattempts/07-Omnifood-Desktop/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/app/app-screen-1.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/app/app-screen-2.png b/myattempts/07-Omnifood-Desktop/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/app/app-screen-2.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/app/app-screen-3.png b/myattempts/07-Omnifood-Desktop/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/app/app-screen-3.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/ben.jpg b/myattempts/07-Omnifood-Desktop/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/ben.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/customer-1.jpg b/myattempts/07-Omnifood-Desktop/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/customer-1.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/customer-2.jpg b/myattempts/07-Omnifood-Desktop/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/customer-2.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/customer-3.jpg b/myattempts/07-Omnifood-Desktop/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/customer-3.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/customer-4.jpg b/myattempts/07-Omnifood-Desktop/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/customer-4.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/customer-5.jpg b/myattempts/07-Omnifood-Desktop/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/customer-5.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/customer-6.jpg b/myattempts/07-Omnifood-Desktop/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/customer-6.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/dave.jpg b/myattempts/07-Omnifood-Desktop/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/dave.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/hannah.jpg b/myattempts/07-Omnifood-Desktop/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/hannah.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/customers/steve.jpg b/myattempts/07-Omnifood-Desktop/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/customers/steve.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/eating.jpg b/myattempts/07-Omnifood-Desktop/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/eating.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/favicon.png b/myattempts/07-Omnifood-Desktop/img/favicon.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/favicon.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-1.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-1.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-10.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-10.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-11.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-11.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-12.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-12.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-2.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-2.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-3.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-3.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-4.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-4.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-5.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-5.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-6.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-6.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-7.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-7.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-8.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-8.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/gallery/gallery-9.jpg b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/gallery/gallery-9.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/hero.png b/myattempts/07-Omnifood-Desktop/img/hero.png new file mode 100644 index 000000000..7bd8ca857 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/hero.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/logos/business-insider.png b/myattempts/07-Omnifood-Desktop/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/logos/business-insider.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/logos/forbes.png b/myattempts/07-Omnifood-Desktop/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/logos/forbes.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/logos/techcrunch.png b/myattempts/07-Omnifood-Desktop/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/logos/techcrunch.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/logos/the-new-york-times.png b/myattempts/07-Omnifood-Desktop/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/logos/the-new-york-times.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/logos/usa-today.png b/myattempts/07-Omnifood-Desktop/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/logos/usa-today.png differ diff --git a/myattempts/07-Omnifood-Desktop/img/meals/meal-1.jpg b/myattempts/07-Omnifood-Desktop/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/meals/meal-1.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/meals/meal-2.jpg b/myattempts/07-Omnifood-Desktop/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/meals/meal-2.jpg differ diff --git a/myattempts/07-Omnifood-Desktop/img/omnifood-logo.png b/myattempts/07-Omnifood-Desktop/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/myattempts/07-Omnifood-Desktop/img/omnifood-logo.png differ diff --git a/myattempts/07-Omnifood-Desktop/index.html b/myattempts/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..84a42e7f9 --- /dev/null +++ b/myattempts/07-Omnifood-Desktop/index.html @@ -0,0 +1,649 @@ + + + + + + + + + + + + + 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! +

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

+ +

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

+ + +

+ +

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

+ +

Complete

$649

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

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

+ +

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/myattempts/08-Omnifood-Responsive/content.md b/myattempts/08-Omnifood-Responsive/content.md new file mode 100644 index 000000000..f0c1c1674 --- /dev/null +++ b/myattempts/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 Section +- Featured in +- How it works +- Meals (and list of diets) +- Testimonials + Gallery +- Pricing + features +- CTA +- Footer diff --git a/myattempts/08-Omnifood-Responsive/css/general.css b/myattempts/08-Omnifood-Responsive/css/general.css new file mode 100644 index 000000000..5511c6ec0 --- /dev/null +++ b/myattempts/08-Omnifood-Responsive/css/general.css @@ -0,0 +1,270 @@ +/* +--- 01 TYPOGRAFY SYSTEM --- + +- Font size system (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 +Paragraph default: 1.6 +Large> 1.8 + +- Letter spacing: +-0.05px +0.75px +--- 02 COLORS --- + +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5de +#eb984e +- Shades: #cf711f +- Accents: +- Greys: +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS --- +box-shadow: 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; + overflow-x: hidden; +} + +/*****************************/ +/* GENERAL REUSABLE COMPONENTS */ +/*****************************/ + +.container { + max-width: 120rem; + margin: 0 auto; + padding: 0 3.2rem; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; +} + +.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; + 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: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; + color: #fff; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + color: #555; + + /* 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/SETINGS SELECTORS */ + +.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/myattempts/08-Omnifood-Responsive/css/queries.css b/myattempts/08-Omnifood-Responsive/css/queries.css new file mode 100644 index 000000000..e3eec2ae8 --- /dev/null +++ b/myattempts/08-Omnifood-Responsive/css/queries.css @@ -0,0 +1,286 @@ +/* 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 1344px (Landscape Tablets) */ +/*****************************/ + +@media (max-width: 75em) { + html { + 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 944 (Tablets) */ +/*****************************/ + +@media (max-width: 59em) { + html { + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-img { + width: 60%; + } + + .hero-text-box, + .hero-img-box { + text-align: center; + } + + .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.2em 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + 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: #fff; + 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 */ + /* display: none no permite ningun tipo de animación*/ + + /* 1) Esconder su visibilidad */ + opacity: 0; + /* 2) Hacerlo inaccesible al ratón y al teclado */ + pointer-events: none; + /* 3) Esconderlo de los lectores de pantalla */ + 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 (Samller tablets) */ +/*****************************/ + +@media (max-width: 44em) { + .grid--4-cols, + .grid--3-cols { + grid-template-columns: 1fr 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); + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.2rem; + } + + .logo-col, + .address-col { + grid-column: span 3; + } +} + +/*****************************/ +/* 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-img-box { + height: 32rem; + grid-row: 1; + } + + .cta-text-box { + padding: 3.2rem; + } +} diff --git a/myattempts/08-Omnifood-Responsive/css/style.css b/myattempts/08-Omnifood-Responsive/css/style.css new file mode 100644 index 000000000..aa744393c --- /dev/null +++ b/myattempts/08-Omnifood-Responsive/css/style.css @@ -0,0 +1,653 @@ +/*****************************/ +/* 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; +} + +/*****************************/ +/* 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.2rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.5; + 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-right: 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%; + /* height: 60%; */ + + /* 60% of parent's width */ + padding-bottom: 45%; + background-color: #fae5de; + z-index: -1; +} + +.step-img { + width: 35%; +} + +/* MOBLIE */ +.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; +} + +/*****************************/ +/* 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; + 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); +} + +/*****************************/ +/* PRICING SECTION */ +/*****************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + + width: 75%; +} + +.pricing-plan--sarter { + 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.6rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6rem; + color: #6f6f6f; +} + +.plan-sign-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 { + padding: 4.8rem 0 12.8rem 0; +} + +.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: 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, 150, 76, 0.3), + rgba(230, 125, 34, 0.3) + ), + 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; + /* outline: 4px dotted #e67e22; + outline-offset: 8px; */ + 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; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; + +} + +.copyright { + font-size: 1.4rem; + color: #767676; + line-height: 1.6; + margin-top: auto; +} + +.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/myattempts/08-Omnifood-Responsive/img/app/app-screen-1.png b/myattempts/08-Omnifood-Responsive/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/app/app-screen-1.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/app/app-screen-2.png b/myattempts/08-Omnifood-Responsive/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/app/app-screen-2.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/app/app-screen-3.png b/myattempts/08-Omnifood-Responsive/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/app/app-screen-3.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/ben.jpg b/myattempts/08-Omnifood-Responsive/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/ben.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/customer-1.jpg b/myattempts/08-Omnifood-Responsive/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/customer-1.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/customer-2.jpg b/myattempts/08-Omnifood-Responsive/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/customer-2.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/customer-3.jpg b/myattempts/08-Omnifood-Responsive/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/customer-3.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/customer-4.jpg b/myattempts/08-Omnifood-Responsive/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/customer-4.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/customer-5.jpg b/myattempts/08-Omnifood-Responsive/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/customer-5.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/customer-6.jpg b/myattempts/08-Omnifood-Responsive/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/customer-6.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/dave.jpg b/myattempts/08-Omnifood-Responsive/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/dave.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/hannah.jpg b/myattempts/08-Omnifood-Responsive/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/hannah.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/customers/steve.jpg b/myattempts/08-Omnifood-Responsive/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/customers/steve.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/eating.jpg b/myattempts/08-Omnifood-Responsive/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/eating.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/favicon.png b/myattempts/08-Omnifood-Responsive/img/favicon.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/favicon.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-1.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-1.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-10.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-10.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-11.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-11.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-12.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-12.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-2.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-2.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-3.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-3.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-4.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-4.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-5.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-5.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-6.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-6.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-7.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-7.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-8.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-8.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/gallery/gallery-9.jpg b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/gallery/gallery-9.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/hero.png b/myattempts/08-Omnifood-Responsive/img/hero.png new file mode 100644 index 000000000..7bd8ca857 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/hero.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/logos/business-insider.png b/myattempts/08-Omnifood-Responsive/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/logos/business-insider.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/logos/forbes.png b/myattempts/08-Omnifood-Responsive/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/logos/forbes.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/logos/techcrunch.png b/myattempts/08-Omnifood-Responsive/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/logos/techcrunch.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/logos/the-new-york-times.png b/myattempts/08-Omnifood-Responsive/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/logos/the-new-york-times.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/logos/usa-today.png b/myattempts/08-Omnifood-Responsive/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/logos/usa-today.png differ diff --git a/myattempts/08-Omnifood-Responsive/img/meals/meal-1.jpg b/myattempts/08-Omnifood-Responsive/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/meals/meal-1.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/meals/meal-2.jpg b/myattempts/08-Omnifood-Responsive/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/meals/meal-2.jpg differ diff --git a/myattempts/08-Omnifood-Responsive/img/omnifood-logo.png b/myattempts/08-Omnifood-Responsive/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/myattempts/08-Omnifood-Responsive/img/omnifood-logo.png differ diff --git a/myattempts/08-Omnifood-Responsive/index.html b/myattempts/08-Omnifood-Responsive/index.html new file mode 100644 index 000000000..7c2a6e674 --- /dev/null +++ b/myattempts/08-Omnifood-Responsive/index.html @@ -0,0 +1,654 @@ + + + + + + + + + + + + + + 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 a 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 +
+ + +

+ +

Complete

$649

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

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

+ +

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/myattempts/09-Omnifood-Optimizations/content.md b/myattempts/09-Omnifood-Optimizations/content.md new file mode 100644 index 000000000..f0c1c1674 --- /dev/null +++ b/myattempts/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 Section +- Featured in +- How it works +- Meals (and list of diets) +- Testimonials + Gallery +- Pricing + features +- CTA +- Footer diff --git a/myattempts/09-Omnifood-Optimizations/css/general.css b/myattempts/09-Omnifood-Optimizations/css/general.css new file mode 100644 index 000000000..fd47dcea7 --- /dev/null +++ b/myattempts/09-Omnifood-Optimizations/css/general.css @@ -0,0 +1,272 @@ +/* +--- 01 TYPOGRAFY SYSTEM --- + +- Font size system (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 +Paragraph default: 1.6 +Large> 1.8 + +- Letter spacing: +-0.05px +0.75px +--- 02 COLORS --- + +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5de +#eb984e +- Shades: #cf711f +- Accents: +- Greys: +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS --- +box-shadow: 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; + /* Does NOT work on Safari */ + /* scroll-behavior: smooth; */ +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; + overflow-x: hidden; +} + +/*****************************/ +/* GENERAL REUSABLE COMPONENTS */ +/*****************************/ + +.container { + max-width: 120rem; + margin: 0 auto; + padding: 0 3.2rem; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; +} + +.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; + 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: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; + color: #fff; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + color: #555; + + /* 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/SETINGS SELECTORS */ + +.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/myattempts/09-Omnifood-Optimizations/css/queries.css b/myattempts/09-Omnifood-Optimizations/css/queries.css new file mode 100644 index 000000000..7b603f099 --- /dev/null +++ b/myattempts/09-Omnifood-Optimizations/css/queries.css @@ -0,0 +1,332 @@ +/* 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 1344px (Landscape Tablets) */ +/*****************************/ + +@media (max-width: 75em) { + html { + 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 944 (Tablets) */ +/*****************************/ + +@media (max-width: 59em) { + html { + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-img { + width: 60%; + } + + .hero-text-box, + .hero-img-box { + text-align: center; + } + + .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.2em 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + grid-template-columns: 3fr 2fr; + } + + .cta-form { + grid-template-columns: 1fr; + } + + .btn--form { + margin-top: 1.2rem; + } + + /* MOBILE NAVIGATION */ + .btn-mobile-nav { + display: block; + z-index: 9999; + } + + .main-nav { + background-color: rgb(255, 255, 255, 0.9); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(5px); + 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 */ + /* display: none no permite ningun tipo de animación*/ + + /* 1) Esconder su visibilidad */ + opacity: 0; + /* 2) Hacerlo inaccesible al ratón y al teclado */ + pointer-events: none; + /* 3) Esconderlo de los lectores de pantalla */ + 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 (Samller tablets) */ +/*****************************/ + +@media (max-width: 44em) { + .grid--4-cols, + .grid--3-cols { + grid-template-columns: 1fr 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); + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.2rem; + } + + .logo-col, + .address-col { + grid-column: span 3; + } +} + +/*****************************/ +/* 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-img-box { + height: 32rem; + grid-row: 1; + } + + .cta-text-box { + padding: 3.2rem; + } +} + +/*****************************/ +/* Fixing Safari flexbox gap */ +/*****************************/ + +.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; + } +} \ No newline at end of file diff --git a/myattempts/09-Omnifood-Optimizations/css/style.css b/myattempts/09-Omnifood-Optimizations/css/style.css new file mode 100644 index 000000000..3fc1b8e95 --- /dev/null +++ b/myattempts/09-Omnifood-Optimizations/css/style.css @@ -0,0 +1,671 @@ +/*****************************/ +/* 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; +} + +/* MOBLIE */ +.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; +} + +/* STICKY NAVIGATION */ +.sticky .header{ + position: fixed; + top: 0; + bottom: 0; + width: 100%; + height: 8rem; + padding-top: 0; + padding-bottom: 0; + background-color: rgb(255, 255, 255, 0.97); + z-index: 999; + box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03); +} + +.sticky .section-hero { + margin-top: 9.6rem; +} + +/*****************************/ +/* 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.2rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.5; + 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-right: 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%; + /* height: 60%; */ + + /* 60% of parent's width */ + padding-bottom: 45%; + background-color: #fae5de; + z-index: -1; +} + +.step-img { + width: 35%; +} + +/*****************************/ +/* 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; + 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); +} + +/*****************************/ +/* PRICING SECTION */ +/*****************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + + width: 75%; +} + +.pricing-plan--sarter { + 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.6rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6rem; + color: #6f6f6f; +} + +.plan-sign-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 { + padding: 4.8rem 0 12.8rem 0; +} + +.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: 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, 150, 76, 0.3), + rgba(230, 125, 34, 0.3) + ), + 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; + /* outline: 4px dotted #e67e22; + outline-offset: 8px; */ + 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; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; + +} + +.copyright { + font-size: 1.4rem; + color: #767676; + line-height: 1.6; + margin-top: auto; +} + +.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/myattempts/09-Omnifood-Optimizations/img/app/app-screen-1.png b/myattempts/09-Omnifood-Optimizations/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/app/app-screen-1.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/app/app-screen-2.png b/myattempts/09-Omnifood-Optimizations/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/app/app-screen-2.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/app/app-screen-3.png b/myattempts/09-Omnifood-Optimizations/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/app/app-screen-3.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/appe-touch-icon.png b/myattempts/09-Omnifood-Optimizations/img/appe-touch-icon.png new file mode 100644 index 000000000..1503daf06 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/appe-touch-icon.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/ben.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/ben.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/customer-1.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/customer-1.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/customer-2.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/customer-2.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/customer-3.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/customer-3.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/customer-4.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/customer-4.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/customer-5.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/customer-5.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/customer-6.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/customer-6.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/dave.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/dave.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/hannah.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/hannah.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/customers/steve.jpg b/myattempts/09-Omnifood-Optimizations/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/customers/steve.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/eating.jpg b/myattempts/09-Omnifood-Optimizations/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/eating.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/favicon-192.png b/myattempts/09-Omnifood-Optimizations/img/favicon-192.png new file mode 100644 index 000000000..f01562d51 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/favicon-192.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/favicon-512.png b/myattempts/09-Omnifood-Optimizations/img/favicon-512.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/favicon-512.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/favicon.png b/myattempts/09-Omnifood-Optimizations/img/favicon.png new file mode 100644 index 000000000..ece4df59c Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/favicon.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/hero-min.png b/myattempts/09-Omnifood-Optimizations/img/hero-min.png new file mode 100644 index 000000000..2b501f9f8 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/hero-min.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/hero.png b/myattempts/09-Omnifood-Optimizations/img/hero.png new file mode 100644 index 000000000..0913a1635 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/hero.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/hero.webp b/myattempts/09-Omnifood-Optimizations/img/hero.webp new file mode 100644 index 000000000..36291838d Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/hero.webp differ diff --git a/myattempts/09-Omnifood-Optimizations/img/logos/business-insider.png b/myattempts/09-Omnifood-Optimizations/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/logos/business-insider.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/logos/forbes.png b/myattempts/09-Omnifood-Optimizations/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/logos/forbes.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/logos/techcrunch.png b/myattempts/09-Omnifood-Optimizations/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/logos/techcrunch.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/logos/the-new-york-times.png b/myattempts/09-Omnifood-Optimizations/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/logos/the-new-york-times.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/logos/usa-today.png b/myattempts/09-Omnifood-Optimizations/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/logos/usa-today.png differ diff --git a/myattempts/09-Omnifood-Optimizations/img/meals/meal-1.jpg b/myattempts/09-Omnifood-Optimizations/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/meals/meal-1.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/meals/meal-2.jpg b/myattempts/09-Omnifood-Optimizations/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/meals/meal-2.jpg differ diff --git a/myattempts/09-Omnifood-Optimizations/img/omnifood-logo.png b/myattempts/09-Omnifood-Optimizations/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/myattempts/09-Omnifood-Optimizations/img/omnifood-logo.png differ diff --git a/myattempts/09-Omnifood-Optimizations/index.html b/myattempts/09-Omnifood-Optimizations/index.html new file mode 100644 index 000000000..b45e17c89 --- /dev/null +++ b/myattempts/09-Omnifood-Optimizations/index.html @@ -0,0 +1,682 @@ + + + + + + + + + + + + + + + + + + + Omnifood — Never cook again! + + + + +

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

+ +

Complete

$649

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

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

+ +

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/myattempts/09-Omnifood-Optimizations/js/script.js b/myattempts/09-Omnifood-Optimizations/js/script.js new file mode 100644 index 000000000..e3124ad1e --- /dev/null +++ b/myattempts/09-Omnifood-Optimizations/js/script.js @@ -0,0 +1,129 @@ +console.log("Hello world!"); + +// Set current year +const yearEl = document.querySelector(".year"); +const currentYear = new Date().getFullYear(); +yearEl.innerHTML = currentYear; + +// Make moile navigation work + +const btnNavEl = document.querySelector(".btn-mobile-nav"); +const headerEl = document.querySelector(".header"); + +btnNavEl.addEventListener("click", function () { + headerEl.classList.toggle("nav-open"); +}); + +/////////////////////////////////////////////////////////// +// Sicky navigation + +const sectionHeroEl = document.querySelector(".section-hero"); +const obs = new IntersectionObserver( + function (entries) { + const ent = entries[0]; + console.log(ent); + if (ent.isIntersecting === false) + document.body.classList.add('sticky') + if (ent.isIntersecting === true) + document.body.classList.remove('sticky') + }, + { + root: null, + threshold: 0, + rootMargin: '-80px' + } +); +obs.observe(sectionHeroEl); + +/////////////////////////////////////////////////////////// +// Smooth scrolling animation + +const allLinks = document.querySelectorAll("a:link"); +console.log(allLinks); + +allLinks.forEach(function (link) { + link.addEventListener("click", function (e) { + e.preventDefault(); + const href = link.getAttribute("href"); + + // Scroll back to top + if (href === "#") + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + + // Scroll to other links + if (href !== "#" && href.startsWith("#")) { + const sectionEl = document.querySelector(href); + sectionEl.scrollIntoView({ behavior: "smooth" }); + } + + // Close mobile navigtion + if (link.classList.contains("main-nav-link")) + headerEl.classList.toggle("nav-open"); + }); +}); + +/////////////////////////////////////////////////////////// +// 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/myattempts/09-Omnifood-Optimizations/manifest.webmanifest b/myattempts/09-Omnifood-Optimizations/manifest.webmanifest new file mode 100644 index 000000000..1f755cad9 --- /dev/null +++ b/myattempts/09-Omnifood-Optimizations/manifest.webmanifest @@ -0,0 +1,14 @@ +{ + "icons": [ + { + "src": "img/favicon-192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "img/favicon-512.png", + "type": "image/png", + "sizes": "512x512" + } + ] +}

Hello, world!

BLOG

What is HTML?

Why should you learn HTML?

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

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

As a 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 a 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 a 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!