diff --git a/certificado_html.pdf b/certificado_html.pdf new file mode 100644 index 000000000..a9e09911b Binary files /dev/null and b/certificado_html.pdf differ diff --git a/starter/01-test/index.html b/starter/01-test/index.html new file mode 100644 index 000000000..324862f07 --- /dev/null +++ b/starter/01-test/index.html @@ -0,0 +1,13 @@ + + + + + + + My first webpage + + +

Hello, world

My Name Jorge and this is my first page

+ + diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..46cfc9243 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,9 @@ + + + + The Blog + + +

This is the Blog

+ + diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/starter/02-HTML-Fundamentals/img/laura-jones.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/laura-jones.jpg rename to starter/02-HTML-Fundamentals/img/laura-jones.jpg diff --git a/starter/02-HTML-Fundamentals/post-img.jpg b/starter/02-HTML-Fundamentals/img/post-img.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/post-img.jpg rename to starter/02-HTML-Fundamentals/img/post-img.jpg diff --git a/starter/02-HTML-Fundamentals/related-1.jpg b/starter/02-HTML-Fundamentals/img/related-1.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-1.jpg rename to starter/02-HTML-Fundamentals/img/related-1.jpg diff --git a/starter/02-HTML-Fundamentals/related-2.jpg b/starter/02-HTML-Fundamentals/img/related-2.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-2.jpg rename to starter/02-HTML-Fundamentals/img/related-2.jpg diff --git a/starter/02-HTML-Fundamentals/related-3.jpg b/starter/02-HTML-Fundamentals/img/related-3.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-3.jpg rename to starter/02-HTML-Fundamentals/img/related-3.jpg diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100644 index 000000000..6699b95f9 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,159 @@ + + + + + The Basic Language of the Web: HTML + + + + + +

📘 The Code Magazine

+ + +

+ +

The Basic Language of the Web: HTML

+ +

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

+ +

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

+ +

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

+ +

What is HTML?

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

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

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

+ +

The opening tag
The closing tag
The actual element

+ +

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

+ +

Why should you learn HTML?

+ +

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

+ +

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

+ +

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

+ + + + +

+ + + diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css new file mode 100644 index 000000000..dcd65fa95 --- /dev/null +++ b/starter/02-HTML-Fundamentals/style.css @@ -0,0 +1,193 @@ +* { + margin: 0; + padding: 0; +} +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} +.container { + width: 850px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} +nav { + font-size: 18px; + text-align: center; +} +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; + font-family: sans-serif; + margin-bottom: 30px; +} +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} +li { + font-size: 20px; + margin-bottom: 10px; +} +li:last-child { + margin-bottom: 0; +} +/* footer p { + font-size: 16px; +} */ +header p { + font-style: italic; +} +/* article > header > p > { + font-style: italic; +} */ +#author { + font-style: italic; + font-size: 18px; +} +#copyright { + font-size: 16px; +} +.related-author { + font-size: 18px; + font-weight: bold; +} +.decoration { + list-style: none; +} + +li:first-child { + font-weight: bold; +} +li:last-child { + font-style: italic; +} +li:nth-child(even) { + /* color: red; */ +} +/* Misconception: this won't work */ +article p:first-child { + /* color: rgb(146, 17, 17); */ +} + +/* styling links */ +a:link { + color: #1098ad; + text-decoration: none; + margin-right: 30px; + padding-top: 10px; + display: inline-block; +} +a:link:last-child { + margin-right: 0; +} +a:visited { + color: #1098ad; +} +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline wavy orangered; +} +a:active { + background-color: black; + font-style: italic; +} +button { + border-style: none; +} +h1::first-letter { + font-style: normal; + margin-right: 5px; +} +h3 + p::first-line { + color: red; +} +h2 { + /* background-color: salmon; */ + position: relative; +} +h2::before { + content: "TOP"; + font-size: 16px; + background-color: #ffe70e; + color: #444; + font-weight: bolder; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} +.post-img { + width: 100%; + height: auto; +} +nav a:link { + /* padding: 20px; + margin: 20px; + background-color: greenyellow; + display: block; */ +} +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + border-radius: 5px; + border: 1px solid black; + position: absolute; + right: 50px; + bottom: 50px; +} +button:hover { + border: none; + opacity: 0.9; +} diff --git a/starter/02-HTML-Fundamentals/test.html b/starter/02-HTML-Fundamentals/test.html new file mode 100644 index 000000000..9d3be0cd4 --- /dev/null +++ b/starter/02-HTML-Fundamentals/test.html @@ -0,0 +1,9 @@ + + + + prueva de como hacer la estructura + + +

solo como prueba de la estructura de HTML

+ + diff --git a/starter/04-CSS-Layouts/.vscode/settings.json b/starter/04-CSS-Layouts/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/starter/04-CSS-Layouts/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..00c4ff6b6 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -34,15 +34,24 @@ .container--1 { /* STARTER */ + font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 30px; margin: 40px; /* CSS GRID */ + display: grid; + grid-template-columns: 200px 100px 50px 250px; + grid-template-rows: 300px 200px; + /* Gap */ + /* gap: 30px; */ + column-gap: 30px; + row-gap: 60px; } .container--2 { + display: none; /* STARTER */ font-family: sans-serif; background-color: black; diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..7b38e8388 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -40,6 +40,9 @@ margin: 40px; /* FLEXBOX */ + display: flex; + align-items: center; + justify-content: flex-start; } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..678c92c89 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,143 +18,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 +

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.

- -

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

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

What is HTML?

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

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

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

- -

The opening tag
The closing tag
The actual element

- -

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

What is HTML?

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

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

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

+ +

The opening tag
The closing tag
The actual element

+ +

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

Why should you learn HTML?

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

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

- - +

+ 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/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..67902fcf4 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,19 +2,19 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ body { color: #444; font-family: sans-serif; - - border-top: 10px solid #1098ad; - position: relative; } .container { - width: 800px; + border-top: 10px solid #1098ad; + position: relative; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -48,10 +48,7 @@ aside { background-color: #f7f7f7; border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ - padding: 50px 0; - width: 500px; + padding: 50px 25px; } /* SMALLER ELEMENTS */ @@ -82,6 +79,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -134,10 +132,7 @@ li:last-child { .related { list-style: none; -} - -body { - /* background-color: orangered; */ + margin: 0; } /* .first-li { @@ -265,3 +260,100 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ +/* +.author-img { + float: left; + margin-bottom: 20px; +} +.author { + /* padding-left: 80px; */ +/* margin-top: 10px; + margin-left: 20px; + float: left; +} +h1 { + float: left; +} +nav { + float: right; +} +.clear { + clear: both; +} +.clearfix::after { + clear: both; + content: ""; + display: block; +} +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} +*/ +.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-weight: bold; + font-size: 17px; + font-style: normal; + margin-bottom: 5px; + display: block; +} +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} +.row { + display: flex; + gap: 75px; + margin-bottom: 60px; + align-items: flex-start; +} +article { + /* dejar que flex automaticamente ajuste el width */ + /* flex: 0 0 825px; */ + flex: 1; + margin-bottom: 0; +} +aside { + /* DEFAULTS: + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto + */ + flex: 0 0 300px; +} +footer { + text-align: center; +} diff --git a/starter/04-css-grid-practics/blog.html b/starter/04-css-grid-practics/blog.html new file mode 100644 index 000000000..3b9b6e328 --- /dev/null +++ b/starter/04-css-grid-practics/blog.html @@ -0,0 +1,10 @@ + + + + BLOG + + +

BLOG

+ Back to home + + diff --git a/starter/04-css-grid-practics/content.txt b/starter/04-css-grid-practics/content.txt new file mode 100644 index 000000000..ae01eb723 --- /dev/null +++ b/starter/04-css-grid-practics/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/starter/04-css-grid-practics/css-grid.html b/starter/04-css-grid-practics/css-grid.html new file mode 100644 index 000000000..00c4ff6b6 --- /dev/null +++ b/starter/04-css-grid-practics/css-grid.html @@ -0,0 +1,89 @@ + + + + + + + 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/starter/04-css-grid-practics/flexbox.html b/starter/04-css-grid-practics/flexbox.html new file mode 100644 index 000000000..7b38e8388 --- /dev/null +++ b/starter/04-css-grid-practics/flexbox.html @@ -0,0 +1,61 @@ + + + + + + + Flexbox + + + +

HTML

and

CSS

are

amazing

languages

learn

+ + diff --git a/starter/04-css-grid-practics/img/challenges.jpg b/starter/04-css-grid-practics/img/challenges.jpg new file mode 100644 index 000000000..319f22da5 Binary files /dev/null and b/starter/04-css-grid-practics/img/challenges.jpg differ diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-3.jpg b/starter/04-css-grid-practics/img/laura-jones.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-3.jpg rename to starter/04-css-grid-practics/img/laura-jones.jpg diff --git a/starter/04-css-grid-practics/img/post-img.jpg b/starter/04-css-grid-practics/img/post-img.jpg new file mode 100644 index 000000000..df3005e63 Binary files /dev/null and b/starter/04-css-grid-practics/img/post-img.jpg differ diff --git a/starter/04-css-grid-practics/img/related-1.jpg b/starter/04-css-grid-practics/img/related-1.jpg new file mode 100644 index 000000000..376e2e7b3 Binary files /dev/null and b/starter/04-css-grid-practics/img/related-1.jpg differ diff --git a/starter/04-css-grid-practics/img/related-2.jpg b/starter/04-css-grid-practics/img/related-2.jpg new file mode 100644 index 000000000..0e9e7ea18 Binary files /dev/null and b/starter/04-css-grid-practics/img/related-2.jpg differ diff --git a/starter/04-css-grid-practics/img/related-3.jpg b/starter/04-css-grid-practics/img/related-3.jpg new file mode 100644 index 000000000..9c5723b71 Binary files /dev/null and b/starter/04-css-grid-practics/img/related-3.jpg differ diff --git a/starter/04-css-grid-practics/index.html b/starter/04-css-grid-practics/index.html new file mode 100644 index 000000000..7550a30b9 --- /dev/null +++ b/starter/04-css-grid-practics/index.html @@ -0,0 +1,177 @@ + + + + + + + The Basic Language of the Web: HTML + + + + + +

📘 The Code Magazine

+ + + +

+ + +

The Basic Language of the Web: HTML

+ +

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

+ +

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

+ +

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

+ +

What is HTML?

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

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

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

+ +

The opening tag
The closing tag
The actual element

+ +

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

+ +

Why should you learn HTML?

+ +

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

+ +

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

+ +

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

+ + + + + +

+ + diff --git a/starter/04-css-grid-practics/style.css b/starter/04-css-grid-practics/style.css new file mode 100644 index 000000000..b0e81d48c --- /dev/null +++ b/starter/04-css-grid-practics/style.css @@ -0,0 +1,393 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* PAGE SECTIONS */ +body { + border-top: 10px solid #1098ad; + color: #444; + font-family: sans-serif; +} + +.container { + position: relative; + width: 1200px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + /* margin-bottom: 60px; */ + /* height: 80px; */ +} + +nav { + font-size: 18px; + /* text-align: center; */ +} + +article { + /* margin-bottom: 60px; */ +} + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 25px; +} + +/* SMALLER ELEMENTS */ +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + 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; + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; + margin: 0; +} + +body { + /* background-color: orangered; */ +} + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work! */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + + display: block; */ + + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ + +/* FLOATS */ +/* +.author-img { + float: left; + margin-bottom: 20px; +} +.author { + /* padding-left: 80px; */ +/* margin-top: 10px; + margin-left: 20px; + float: left; +} +h1 { + float: left; +} +nav { + float: right; +} +.clear { + clear: both; +} +.clearfix::after { + clear: both; + content: ""; + display: block; +} +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} +*/ +.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-weight: bold; + font-size: 17px; + font-style: normal; + margin-bottom: 5px; + display: block; +} +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} +/* .row { + display: flex; + gap: 75px; + margin-bottom: 60px; + align-items: flex-start; +} */ +/* article { + /* dejar que flex automaticamente ajuste el width + flex: 0 0 825px; + flex: 1; + margin-bottom: 0; +} +aside { + /* DEFAULTS: + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto + + flex: 0 0 300px; +} */ + +/* CSS GRID LAYOUT */ + +/* .row { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 44px; + align-items: flex-start; +} +aside { + /* gap: 20px 0; + +} +/* footer { + text-align: center; +} */ +/* Grid as the structor */ +.container { + display: grid; + grid-template-columns: 1fr 350px; + gap: 40px; +} +.main-header { + grid-column: 1 / -1; +} +aside { + align-self: flex-start; +} +footer { + grid-column: 1 /-1; + text-align: center; + background-image: cover; +} diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..63bf2a43d 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -4,7 +4,12 @@ - + + + Lisbon Chair Shop @@ -27,6 +32,43 @@

We design and build better chairs, for a better life

What makes our chairs special

Science meets design

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus @@ -35,6 +77,36 @@

What makes our chairs special

Maximal comfort

@@ -45,6 +117,24 @@

What makes our chairs special

Ethical and sustainable

@@ -80,16 +170,178 @@

Our bestselling chairs

The Laid Back

+ Leisure and relaxing
+ Comfortable for 4h
+ Vegan leather
+ Weighs 16 kg

@@ -106,15 +358,179 @@

The Laid Back

The Worker Bee

+ Work
+ Comfortable for 8h
+ Vegan leather
+ Weighs 22 kg

@@ -131,15 +547,177 @@

The Worker Bee

The Chair 4/2

+ Leisure and relaxing
+ Comfortable all day!
+ Organic cotton
+ Weighs 80 kg

diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..8f8ee3506 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ +/* +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 +*/ + * { margin: 0; padding: 0; @@ -16,7 +21,9 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +33,14 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; + /* 24/30/36 */ } .grid-3-cols { @@ -38,6 +48,28 @@ h2 { grid-template-columns: repeat(3, 1fr); column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: white; + 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; +} /* ------------------------ */ /* COMPONENT STYLES */ @@ -48,7 +80,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -57,29 +89,45 @@ header { h1 { margin-bottom: 24px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; /* option & up-down key to chenge decimal values*/ } img { width: 100%; + border-radius: 12px; } /* FEATURES */ .features-icon { + 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: white; + padding: 24px; + border-radius: 10px; } .testimonial-box { @@ -89,32 +137,49 @@ img { .testimonial-box h2 { margin-bottom: 24px; + /* 20 / 24 / 30 */ + font-size: 24px; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ +.chair { + box-shadow: 0px 20px 30px 0 rgba(0, 0, 0, 0.1); + border-radius: 12px; +} +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} .chair-box { - padding: 24px; + padding: 32px; } h3 { margin-bottom: 24px; + font-size: 20px; } .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { display: flex; align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 16px; } .chair-details li:last-child { @@ -122,13 +187,18 @@ h3 { } .chair-icon { + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + align-items: center; + font-size: 20px; } footer { margin-bottom: 48px; + font-size: 12px; } diff --git a/starter/06-Components/accordion/01-accordion.html b/starter/06-Components/accordion/01-accordion.html new file mode 100644 index 000000000..43a6766cc --- /dev/null +++ b/starter/06-Components/accordion/01-accordion.html @@ -0,0 +1,114 @@ + + + + + + + + + + + Accordion Component + + +

Where are the chairs assembled?

+ +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis + accusamus voluptas ab odit dolore ex. Provident sed, omnis suscipit, + mollitia officia hic, numquam vero neque veniam fuga quis est sequi? +

Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Tempora sint optio iusto quasi deleniti tenetur dignissimos
veniam cumque, neque quae eum eveniet, ducimus culpa,
expedita non quaerat omnis. Nobis, fugiat?

How long do I have to return my chair?

+ +

Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Tempora sint optio iusto quasi deleniti tenetur dignissimos
veniam cumque, neque quae eum eveniet, ducimus culpa,
expedita non quaerat omnis. Nobis, fugiat?

Do you ship to countries outside the EU?

+ +

Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Tempora sint optio iusto quasi deleniti tenetur dignissimos
veniam cumque, neque quae eum eveniet, ducimus culpa,
expedita non quaerat omnis. Nobis, fugiat?

+ + diff --git a/starter/06-Components/accordion/style.css b/starter/06-Components/accordion/style.css new file mode 100644 index 000000000..e2d513b10 --- /dev/null +++ b/starter/06-Components/accordion/style.css @@ -0,0 +1,89 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + line-height: 1; +} +.accordion { + width: 700px; + margin: 100px auto; + + display: flex; + flex-direction: column; + gap: 24px; +} +.item { + display: grid; + grid-template-columns: auto 1fr auto; + /* gap: 24px; */ + /* en grid gap pone espacion horizontal y vertical es por eso que usamos gap-column y gap row para poner valores diferentes. */ + column-gap: 24px; + row-gap: 32px; + + box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); + padding: 24px; + align-items: center; +} +.number, +.text { + font-size: 24px; + font-weight: 500; + /* color: #087f5b; */ +} +.number { + color: #ced4da; +} + +.icon { + width: 24px; + height: 24px; + stroke: #087f5b; +} +.hidden-box { + grid-column: 2; + display: none; +} +.hidden-box p { + line-height: 1.6; + margin-bottom: 24px; +} +.hidden-box ul { + color: #797f86; + margin-left: 18px; + display: flex; + flex-direction: column; + gap: 12px; +} + +/* para esconder la informacion se creo open class */ +.open { + border-top: 4px solid #087f5b; +} +.open .hidden-box { + display: block; +} +.open .number, +.open .text { + color: #087f5b; +} diff --git a/starter/06-Components/base-project/index.html b/starter/06-Components/base-project/index.html new file mode 100644 index 000000000..22d23f105 --- /dev/null +++ b/starter/06-Components/base-project/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + + Accordion Component + + + diff --git a/starter/06-Components/base-project/style.css b/starter/06-Components/base-project/style.css new file mode 100644 index 000000000..f04d72732 --- /dev/null +++ b/starter/06-Components/base-project/style.css @@ -0,0 +1,27 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; +} diff --git a/starter/06-Components/hero.jpg b/starter/06-Components/carousel/hero.jpg similarity index 100% rename from starter/06-Components/hero.jpg rename to starter/06-Components/carousel/hero.jpg diff --git a/starter/06-Components/carousel/index.html b/starter/06-Components/carousel/index.html new file mode 100644 index 000000000..0684348a6 --- /dev/null +++ b/starter/06-Components/carousel/index.html @@ -0,0 +1,68 @@ + + + + + + + + + + + CAROUSEL COMPONETE + + +

+
+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae + repellat aliquam distinctio minima earum harum sapiente praesentium + voluptas." +
+
Maria de Almeida
+
Senior Product Manager At EDP Comercial
+

+ + +

+ + + + +

+ + diff --git a/starter/06-Components/maria.jpg b/starter/06-Components/carousel/maria.jpg similarity index 100% rename from starter/06-Components/maria.jpg rename to starter/06-Components/carousel/maria.jpg diff --git a/starter/06-Components/carousel/style.css b/starter/06-Components/carousel/style.css new file mode 100644 index 000000000..75a752414 --- /dev/null +++ b/starter/06-Components/carousel/style.css @@ -0,0 +1,115 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + line-height: 1; +} + +.carousel { + width: 800px; + margin: 100px auto; + background-color: #087f5b; + border-radius: 8px; + /* padding: 30px; + padding-left: 86px; + padding-right: 48px; */ + padding: 32px 48px 30px 86px; + display: flex; + align-items: center; + gap: 86px; + position: relative; +} +img { + height: 200px; + border-radius: 8px; + transform: scale(1.5); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); +} +.testimonial-text { + font-size: 18px; + font-weight: 500; + line-height: 1.5; + margin-bottom: 32px; + color: #e6fcf5; +} +.testimonial-author { + font-size: 14px; + margin-bottom: 4px; + color: #c3fae8; +} +.testimonial-job { + font-size: 12px; + color: #c3fae8; +} +/* controls */ +.btn { + background-color: #fff; + border: none; + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + position: absolute; + + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); +} +.btn-left { + /* in relation to Parente Element */ + left: 0px; + top: 50%; + + /* In relation to Element Itself */ + transform: translate(-50%, -50%); +} +.btn-right { + right: 0px; + top: 50%; + transform: translate(50%, -50%); +} +.btn-icon { + height: 24px; + stroke: #087f5b; +} +.dots { + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 32px); + + display: flex; + gap: 12px; +} +.dot { + height: 12px; + width: 12px; + background-color: #fff; + border: 2px solid #087f5b; + border-radius: 50%; + cursor: pointer; +} +.dot-fill { + background-color: #087f5b; +} diff --git a/starter/06-Components/hero/hero.jpg b/starter/06-Components/hero/hero.jpg new file mode 100644 index 000000000..26f1847c8 Binary files /dev/null and b/starter/06-Components/hero/hero.jpg differ diff --git a/starter/06-Components/hero/index.html b/starter/06-Components/hero/index.html new file mode 100644 index 000000000..64ff15a97 --- /dev/null +++ b/starter/06-Components/hero/index.html @@ -0,0 +1,44 @@ + + + + + + + + Omifood Hero Section + + +

+ +

A healty meal delivered to your door, every single day

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

+ Start eating well +

+ +

Some random heading

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi + dolores voluptas omnis reprehenderit earum, impedit dolorum veniam + deserunt alias fugit vero eos praesentium iure blanditiis nesciunt + autem atque voluptatem Lorem ipsum dolor sit amet consectetur + adipisicing elit. Fugit deleniti, iusto tenetur sit reiciendis + voluptas fuga repellendus a similique velit, ullam molestiae omnis + voluptatibus quasi consequuntur! Est, laudantium! Reiciendis, + veritatis! +

+ + diff --git a/starter/06-Components/hero/maria.jpg b/starter/06-Components/hero/maria.jpg new file mode 100644 index 000000000..33fe230b9 Binary files /dev/null and b/starter/06-Components/hero/maria.jpg differ diff --git a/starter/06-Components/hero/styles.css b/starter/06-Components/hero/styles.css new file mode 100644 index 000000000..abaeb9f03 --- /dev/null +++ b/starter/06-Components/hero/styles.css @@ -0,0 +1,71 @@ +@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: "Rubik", sans-serif; + color: #444; +} +.container { + margin: 0 auto; + width: 1200px; +} +.heather-container { + width: 1200px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.heather-container-inner { + width: 50%; +} +header { + height: 100vh; + position: relative; + + background-image: linear-gradient( + rgba(34, 34, 34, 0.6), + rgba(34, 34, 34, 0.6) + ), + url(hero.jpg); + background-size: cover; + color: #fff; +} +nav { + font-size: 20px; + font-weight: 700; + display: flex; + justify-content: space-between; + padding-top: 32px; +} +h1 { + font-size: 52px; + margin-bottom: 32px; + line-height: 1.05; +} +p { + font-size: 20px; + line-height: 1.6; + margin-bottom: 48px; +} +.btn:link, +.btn:visited { + font-size: 20px; + font-weight: 600; + background-color: #e67e22; + color: #fff; + text-decoration: none; + display: inline-block; + padding: 16px 32px; + border-radius: 9px; +} +h2 { + font-size: 42px; + margin-bottom: 48px; +} +section { + padding: 96px 0; +} diff --git a/starter/06-Components/layoutWebApp/index.html b/starter/06-Components/layoutWebApp/index.html new file mode 100644 index 000000000..feea7293f --- /dev/null +++ b/starter/06-Components/layoutWebApp/index.html @@ -0,0 +1,34 @@ + + + + + + + + App Layout + + + + + + + + + + +

Email 1

Email 2

Email 3

Email 4

Email 5

Email 6

Email 7

Email 8

Email 9

Email 10

Emial View

+ + + diff --git a/starter/06-Components/layoutWebApp/styles.css b/starter/06-Components/layoutWebApp/styles.css new file mode 100644 index 000000000..f352b6c4a --- /dev/null +++ b/starter/06-Components/layoutWebApp/styles.css @@ -0,0 +1,71 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: sans-serif; + color: #343a40; + font-size: 24px; + height: 100vh; + text-align: center; + font-weight: bold; + + display: grid; + grid-template-columns: 80px 400px 1fr 250px; + grid-template-rows: 80px 1fr; +} +nav, +section, +main, +aside { + padding-top: 24px; +} +nav { + background-color: #343a40; + color: #fff; + grid-row: 1 /-1; +} +menu { + background-color: #7048e8; + grid-column: 2 / -1; + display: flex; + align-items: center; + gap: 12px; + padding: 0 40px; +} +button { + font-size: 16px; + font-weight: bold; + background-color: #5f3dc4; + border: none; + cursor: pointer; + color: #fff; + padding: 8px 12px; +} +button:last-child { + background-color: #d6336c; + margin-left: auto; +} +section { + background-color: #e9ecef; + padding: 40px; + + overflow: scroll; /*this does not work with flex, so you need to add flex-shring:0; to the items */ + + display: flex; + flex-direction: column; + gap: 40px; +} +.email { + background-color: #adb5bd; + height: 96px; + flex-shrink: 0; + + display: flex; + align-items: center; + justify-content: center; +} +aside { + background-color: #e9ecef; +} diff --git a/starter/06-Components/pagination/index.html b/starter/06-Components/pagination/index.html new file mode 100644 index 000000000..2ce60812a --- /dev/null +++ b/starter/06-Components/pagination/index.html @@ -0,0 +1,71 @@ + + + + + + + + + + + Pagination Component + + +

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

+ + diff --git a/starter/06-Components/pagination/style.css b/starter/06-Components/pagination/style.css new file mode 100644 index 000000000..dc7a5f160 --- /dev/null +++ b/starter/06-Components/pagination/style.css @@ -0,0 +1,79 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + display: flex; + justify-content: center; +} +.container { + display: flex; + justify-content: center; + align-items: center; + margin-top: 100px; + padding: 20px; +} +a { + color: #343a40; +} +.numbers:link, +.number:visited { + font-size: 18px; + color: #343a40; + text-decoration: none; + height: 36px; /* need to creat a space to de numbers to have equial sizes and make the round shape.*/ + width: 36px; + border-radius: 50%; + margin: 10px; + display: flex; + justify-content: center; + align-items: center; +} +.numbers:hover, +.numbers:active, +.number-active { + background-color: #087f5b; + color: #fff; +} +.btn-icon { + stroke: #087f5b; + height: 24px; +} +.btn { + background-color: #fff; + border: 1px solid #087f5b; + width: 48px; + height: 48px; + border-radius: 50%; + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; +} +.btn:hover { + background-color: #087f5b; +} + +.btn:hover .btn-icon { + stroke: #fff; +} diff --git a/starter/06-Components/table/index.html b/starter/06-Components/table/index.html new file mode 100644 index 000000000..21d916010 --- /dev/null +++ b/starter/06-Components/table/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

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

+ + diff --git a/starter/06-Components/table/style.css b/starter/06-Components/table/style.css new file mode 100644 index 000000000..2a1b4beef --- /dev/null +++ b/starter/06-Components/table/style.css @@ -0,0 +1,54 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + display: flex; + justify-content: center; +} +table { + width: 800px; + margin-top: 100px; + font-size: 18px; + /* border: 1px solid #343a40; */ + border-collapse: collapse; +} +th, +td { + /* border: 1px solid #343a40; */ + padding: 16px 24px; + text-align: left; +} +thead tr { + background-color: #087f5b; + color: #fff; +} +thead th { + width: 25%; +} +tbody tr:nth-child(odd) { + background-color: #f8f9fa; +} +tbody tr:nth-child(even) { + background-color: #e9ecef; +} diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content/content.md index 7193e017f..a91a05c17 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content/content.md @@ -119,10 +119,12 @@ Create account Sign in iOS app Android app + About Omnifood For Business Cooking partners Careers + Recipe directory Help center Privacy & terms diff --git a/starter/08-Omnifood-Responsive/css/general.css b/starter/07-Omnifood-Desktop/content/css/general.css similarity index 74% rename from starter/08-Omnifood-Responsive/css/general.css rename to starter/07-Omnifood-Desktop/content/css/general.css index 879f58295..2d8625ae1 100644 --- a/starter/08-Omnifood-Responsive/css/general.css +++ b/starter/07-Omnifood-Desktop/content/css/general.css @@ -1,74 +1,64 @@ /* --- 01 TYPOGRAPHY SYSTEM - -- Font sizes (px) +- FONT SIZE (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 -- Font weights +- FONT WEIGHTS Default: 400 Medium: 500 -Semi-bold: 600 +Semi-blod: 600 Bold: 700 -- Line heights +- Line Heights Default: 1 -Small: 1.05 +Small 1.05 Medium: 1.2 -Paragraph default: 1.6 +Paragraph default: 1.06 -- Letter spacing --0.5px +-- letter Spacing +0.05px 0.75px ---- 02 COLORS +--- 02 COLOR -- Primary: #e67e22 -- Tints: +- Primery: #e67e22 +- Tints: #fdf2e9 #fae5d3 #eb984e - -- Shades: -#cf711f +- Shades: #45260a - -- Accents: -- Greys - +#cf711f +- Accents: +- GRAY COLOR: #888 #767676 (lightest grey allowed on #fff) -#6f6f6f (lightest grey allowed on #fdf2e9) -#555 +#6f6f6f (lightest grey allowed on #fdf23e9) +#555 #333 --- 05 SHADOWS - -0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); - ---- 06 BORDER-RADIUS - +box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); +--- 06 BORDER_RADIUS Default: 9px -Medium: 11px +--- 07 WHITESPACE (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 ---- 07 WHITESPACE -- Spacing system (px) -2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 -*/ +*/ +/* @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"); */ * { padding: 0; margin: 0; box-sizing: border-box; } - html { - /* font-size: 10px; */ - /* 10px / 16px = 0.625 = 62.5% */ + /* font-size: 10px */ + /* 10px / 16px = 0.625 = 62.50% */ /* Percentage of user's browser font-size setting */ font-size: 62.5%; } - body { font-family: "Rubik", sans-serif; line-height: 1; @@ -76,50 +66,35 @@ body { color: #555; } -/**************************/ -/* GENRAL REUSABLE COMPONENTS */ -/**************************/ - +/*******************************/ +/* General Reusable Components */ +/*******************************/ .container { - /* 1140px */ max-width: 120rem; padding: 0 3.2rem; margin: 0 auto; } - .grid { display: grid; column-gap: 6.4rem; row-gap: 9.6rem; - - /* margin-bottom: 9.6rem; */ } - -/* .grid:last-child { - margin-bottom: 0; -} */ - .grid:not(:last-child) { margin-bottom: 9.6rem; } - -.grid--2-cols { +.grid--2--cols { grid-template-columns: repeat(2, 1fr); } - -.grid--3-cols { +.grid--3--cols { grid-template-columns: repeat(3, 1fr); } - -.grid--4-cols { +.grid--4--cols { grid-template-columns: repeat(4, 1fr); } - .grid--5-cols { grid-template-columns: repeat(5, 1fr); } - -.grid--center-v { +.grid--center--v { align-items: center; } @@ -137,23 +112,21 @@ body { font-size: 5.2rem; line-height: 1.05; margin-bottom: 3.2rem; + /* text-transform: uppercase; */ } - .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-size: 2rem; font-weight: 500; color: #cf711f; text-transform: uppercase; @@ -170,55 +143,46 @@ body { font-size: 2rem; font-weight: 600; padding: 1.6rem 3.2rem; - border-radius: 9px; + border-radius: 0.9rem; - /* Only necessary for .btn */ + /* onlu necessary for .btn */ border: none; cursor: pointer; font-family: inherit; - /* Put transition on original "state" */ - /* transition: background-color 0.3s; */ + /* Put trasition 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; } - .btn--outline:link, .btn--outline:visited { background-color: #fff; color: #555; } - .btn--outline:hover, .btn--outline:active { background-color: #fdf2e9; - - /* border: 3px solid #fff; */ - - /* Trick to add border inside */ + /* 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; + background-color: #fdf2e9; + color: #45260a; } .link:link, @@ -230,7 +194,6 @@ body { padding-bottom: 2px; transition: all 0.3s; } - .link:hover, .link:active { color: #cf711f; @@ -243,14 +206,12 @@ body { 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; @@ -259,8 +220,8 @@ body { *:focus { outline: none; - /* outline: 4px dotted #e67e22; */ - /* outline-offset: 8px; */ + /* outline: 4px dotted #e67e22; + outline-offset: 8px; */ box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); } @@ -268,15 +229,12 @@ body { .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/starter/08-Omnifood-Responsive/css/style.css b/starter/07-Omnifood-Desktop/content/css/styles.css similarity index 84% rename from starter/08-Omnifood-Responsive/css/style.css rename to starter/07-Omnifood-Desktop/content/css/styles.css index dde886185..91fd905d0 100644 --- a/starter/08-Omnifood-Responsive/css/style.css +++ b/starter/07-Omnifood-Desktop/content/css/styles.css @@ -1,7 +1,6 @@ -/**************************/ +/*******************************/ /* HEADER */ -/**************************/ - +/*******************************/ .header { display: flex; justify-content: space-between; @@ -10,24 +9,20 @@ /* Because we want header to be sticky later */ height: 9.6rem; - padding: 0 4.8rem; + padding: 0 4.6rem; } - .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; @@ -37,12 +32,10 @@ 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; @@ -50,29 +43,27 @@ color: #fff; background-color: #e67e22; } - .main-nav-link.nav-cta:hover, .main-nav-link.nav-cta:active { background-color: #cf711f; } -/**************************/ +/*******************************/ /* HERO SECTION */ -/**************************/ +/*******************************/ .section-hero { background-color: #fdf2e9; padding: 4.8rem 0 9.6rem 0; } - .hero { max-width: 130rem; margin: 0 auto; padding: 0 3.2rem; display: grid; grid-template-columns: 1fr 1fr; - gap: 9.6rem; align-items: center; + gap: 9.6rem; } .hero-description { @@ -91,11 +82,9 @@ gap: 1.6rem; margin-top: 8rem; } - .delivered-imgs { display: flex; } - .delivered-imgs img { height: 4.8rem; width: 4.8rem; @@ -103,27 +92,23 @@ margin-right: -1.6rem; border: 3px solid #fdf2e9; } - .delivered-imgs img:last-child { margin: 0; } - .delivered-text { font-size: 1.8rem; font-weight: 600; } - .delivered-text span { color: #cf711f; font-weight: 700; } -/**************************/ +/*******************************/ /* FEATURED IN SECTION */ -/**************************/ - +/*******************************/ .section-featured { - padding: 4.8rem 0 3.2rem 0; + margin: 4.8rem 0 3.2rem 0; } .heading-featured-in { @@ -135,120 +120,99 @@ margin-bottom: 2.4rem; color: #888; } - .logos { display: flex; - justify-content: space-around; + justify-content: space-evenly; } - .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 { +.step-img-box::after, +.step-img-box::before { content: ""; display: block; - border-radius: 50%; position: absolute; - top: 50%; + /* height: 60%; */ + /* height did not work so we used padding-bottom */ + /* no need this trcik because of Pseudo-elements (circles) are flex containers as the parent*/ + /* top: 50%; left: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); */ + border-radius: 50%; } .step-img-box::before { width: 60%; - /* height: 60%; */ - - /* 60% of parent's width */ - padding-bottom: 60%; - background-color: #fdf2e9; + padding-bottom: 60%; z-index: -2; } - .step-img-box::after { width: 45%; padding-bottom: 45%; background-color: #fae5d3; z-index: -1; } - .step-img { width: 35%; - /* z-index: 10; */ } -/**************************/ +/*******************************/ /* MEALS SECTION */ -/**************************/ - +/*******************************/ .section-meals { padding: 9.6rem 0; } - .meal { box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); - border-radius: 11px; + border-radius: 1.2rem; 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; } @@ -258,34 +222,29 @@ .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%; } @@ -295,113 +254,97 @@ font-size: 1.8rem; } -/**************************/ +/*******************************/ /* TESTIMONIALS SECTION */ -/**************************/ - +/*******************************/ .section-testimonials { background-color: #fdf2e9; display: grid; grid-template-columns: 55fr 45fr; - align-items: center; } - -.testimonials-container { +.testimonial-container { padding: 9.6rem; } - .testimonials { display: grid; grid-template-columns: 1fr 1fr; row-gap: 4.8rem; column-gap: 8rem; } - .testimonial-img { width: 6.4rem; border-radius: 50%; margin-bottom: 1.2rem; } - .testimonial-text { font-size: 1.8rem; line-height: 1.8; margin-bottom: 1.6rem; } - .testimonial-name { font-size: 1.6rem; color: #6f6f6f; } - .gallery { display: grid; grid-template-columns: repeat(3, 1fr); + align-content: center; gap: 1.6rem; padding: 1.6rem; } - .gallery-item { overflow: hidden; } - .gallery-item img { display: block; width: 100%; + /* height: 100%; */ transition: all 0.4s; } - .gallery-item img:hover { transform: scale(1.1); } -/**************************/ +/*******************************/ /* MEALS SECTION */ -/**************************/ - +/*******************************/ .section-pricing { padding: 9.6rem 0; } - -.princing-plan { +.pricing-plan { border-radius: 11px; - + /* */ width: 75%; } - -.princing-plan--starter { +.pricing-plan--starter { justify-self: end; border: 2px solid #fdf2e9; padding: 4.6rem; } - -.princing-plan--complete { +.pricing-plan-complete { background-color: #fdf2e9; padding: 4.8rem; position: relative; overflow: hidden; } - -.princing-plan--complete::after { +.pricing-plan-complete::after { content: "Best value"; position: absolute; - top: 6%; - right: -18%; + top: 7%; + right: -14%; text-transform: uppercase; font-size: 1.4rem; font-weight: 700; color: #333; background-color: #ffd43b; - padding: 0.8rem 8rem; + padding: 0.8rem 6rem; transform: rotate(45deg); } - .plan-header { text-align: center; margin-bottom: 4.8rem; } - .plan-name { color: #cf711f; font-weight: 600; @@ -410,99 +353,85 @@ letter-spacing: 0.75; margin-bottom: 3.2rem; } - .plan-price { font-size: 6.2rem; font-weight: 600; color: #333; margin-bottom: 1.6rem; } - .plan-price span { font-size: 3rem; font-weight: 500; margin-right: 0.8rem; } - .plan-text { font-size: 1.6rem; line-height: 1.6; + /* opacity: 95%; */ color: #6f6f6f; } - .plan-sing-up { text-align: center; margin-top: 4.8rem; } - .plan-details { font-size: 1.6rem; line-height: 1.6; text-align: center; } - .feature-icon { color: #e67e22; height: 3.2rem; width: 3.2rem; - background-color: #fdf2e9; + background-color: #fae5d3; margin-bottom: 3.2rem; padding: 1.6rem; border-radius: 50%; } - .feature-title { font-size: 2.4rem; color: #333; font-weight: 700; margin-bottom: 1.6rem; } - .feature-text { font-size: 1.8rem; line-height: 1.8; } -/**************************/ +/*******************************/ /* CTA SECTION */ -/**************************/ - +/*******************************/ .section-cta { - /* top / right / bottom / left */ - /* padding: 9.6rem 0 12.8rem 0; */ - - /* top / horizontal / left */ padding: 4.8rem 0 12.8rem; } - .cta { display: grid; grid-template-columns: 2fr 1fr; /* background-color: #e67e22; */ box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); border-radius: 11px; - background-image: linear-gradient(to right bottom, #eb984e, #e67e22); overflow: hidden; + + /* temp */ + /* height: 50rem; */ } .cta-text-box { padding: 4.8rem 6.4rem 6.4rem 6.4rem; - color: #45260a; + color: #2e1907; } - .cta .heading-secondary { - /* color: #45260a; */ + /* color: #2e1907; */ 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, @@ -513,21 +442,18 @@ 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%; @@ -536,30 +462,28 @@ font-family: inherit; color: inherit; border: none; - background-color: #fdf2e9; + background-color: #fdf2e9 !important; border-radius: 9px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } - .cta-form input::placeholder { color: #aaa; } - .cta *:focus { outline: none; + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); } -/**************************/ +/*******************************/ /* FOOTER */ -/**************************/ - +/*******************************/ .footer { padding: 12.8rem 0; border-top: 1px solid #eee; } - .grid--footer { + display: grid; grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; } @@ -567,61 +491,51 @@ display: flex; flex-direction: column; } - .footer-logo { display: block; margin-bottom: 3.2rem; } - .social-links { list-style: none; display: flex; gap: 2.4rem; } - .social-icon { height: 2.4rem; width: 2.4rem; } - .copyright { font-size: 1.4rem; line-height: 1.6; color: #767676; margin-top: auto; } - .footer-heading { font-size: 1.8rem; font-weight: 500; margin-bottom: 4rem; } - .contacts { font-style: normal; font-size: 1.6rem; line-height: 1.6; } - .address { margin-bottom: 2.4rem; } - .footer-nav { list-style: none; display: flex; flex-direction: column; gap: 2.4rem; } - .footer-link:link, .footer-link:visited { text-decoration: none; font-size: 1.6rem; color: #767676; - transition: all 0.3s; + transition: all cubic-bezier(0.39, 0.575, 0.565, 1); } - .footer-link:hover, .footer-link:active { color: #555; diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..697619951 --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,668 @@ + + + + + + + + + + + + Omnifood + + + +

+ A helthy 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 anjoying food. meals in storage container, and food bowls on a table

+ +

As features 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

+ 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 reting (537) +

+ Vegan + Paleo +

+ +

Avocado Salad

+ 400 calories +
+ NutriScore 92 +
+ 4.8 reting (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 and 9pm +

+ + Delivery is free +

+ + +

+ Start eating well +

+ +

Complete

$649

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

+ + 2 meal per day +

+ + Order 24/7 +

+ + Delivery is free +

+ + Get access to latest recipes +

+ Start eating well +

+ +

+ Never cook again! +

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

+ +

+ Local and organic +

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

+ +

+ No waste +

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

+ +

+ Pause anytime +

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

+ + +

+ We offer a free sample meal +

+ 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/starter/08-Omnifood-Responsive/content/app.js b/starter/08-Omnifood-Responsive/content/app.js new file mode 100644 index 000000000..b31caac82 --- /dev/null +++ b/starter/08-Omnifood-Responsive/content/app.js @@ -0,0 +1,20 @@ +const openEl = document.getElementById('open') +const closeEl = document.getElementById('close') + +openEl.addEventListener("click", () => { + el_close = document.querySelector(".header") + closeIcon(el_close) +}) + +function closeIcon(iconType){ + iconType.classList.add('nav-open') +} + +closeEl.addEventListener("click", () => { + el_close = document.querySelector(".header") + openIcon(el_close) +}) + +function openIcon(iconType){ + iconType.classList.remove('nav-open') +} diff --git a/starter/08-Omnifood-Responsive/content.md b/starter/08-Omnifood-Responsive/content/content.md similarity index 96% rename from starter/08-Omnifood-Responsive/content.md rename to starter/08-Omnifood-Responsive/content/content.md index 092b60a6e..a91a05c17 100644 --- a/starter/08-Omnifood-Responsive/content.md +++ b/starter/08-Omnifood-Responsive/content/content.md @@ -128,17 +128,3 @@ Careers Recipe directory Help center Privacy & terms - -###### - -## Sections - -- Logo + Navigation -- Hero -- Featured in -- How it works -- Meals (and list of diets) -- Testimonials + gallery -- Pricing + features -- CTA -- Footer diff --git a/starter/08-Omnifood-Responsive/content/css/general.css b/starter/08-Omnifood-Responsive/content/css/general.css new file mode 100644 index 000000000..fce6d5d70 --- /dev/null +++ b/starter/08-Omnifood-Responsive/content/css/general.css @@ -0,0 +1,248 @@ +/* +--- 01 TYPOGRAPHY SYSTEM +- FONT SIZE (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- FONT WEIGHTS +Default: 400 +Medium: 500 +Semi-blod: 600 +Bold: 700 + +- Line Heights +Default: 1 +Small 1.05 +Medium: 1.2 +Paragraph default: 1.06 +Large 1.8 + +-- letter Spacing +0.05px +0.75px + +--- 02 COLOR + +- Primery: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e +- Shades: +#45260a +#cf711f +- Accents: +- GRAY COLOR: +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf23e9) +#555 +#333 + +--- 05 SHADOWS +box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); +--- 06 BORDER_RADIUS +Default: 9px +--- 07 WHITESPACE (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + + +*/ +/* @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"); */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +html { + /* font-size: 10px */ + /* 10px / 16px = 0.625 = 62.50% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; + + /* Only works if there is noting absolutely positioned in relation to body */ + overflow-x: hidden; +} +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; + + /* Only works if there is noting absolutely positioned in relation to body */ + overflow-x: hidden; +} + +/*******************************/ +/* General Reusable Components */ +/*******************************/ +.container { + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} +.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; + /* color: #45260a; */ + /* color: #343a40; */ + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; + /* text-transform: uppercase; */ +} +.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: 2rem; + 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: 0.9rem; + + /* only necessary for .btn */ + border: none; + cursor: pointer; + font-family: inherit; + + /* Put trasition 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; +} +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + /* border: 3px solid #fff */ + /* trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} +.btn--form:hover { + background-color: #fdf2e9; + color: #45260a; +} + +.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; + line-height: 1.2; + display: flex; + align-items: center; + gap: 1.6rem; +} +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +*:focus { + outline: none; + /* outline: 4px dotted #e67e22; + outline-offset: 8px; */ + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +/* HELPER/SETTINGS CLASSES */ +.margin-right-sm { + margin-right: 1.6rem !important; +} +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} +.center-text { + text-align: center; +} +strong { + font-weight: 500; +} diff --git a/starter/08-Omnifood-Responsive/content/css/queries.css b/starter/08-Omnifood-Responsive/content/css/queries.css new file mode 100644 index 000000000..1b5ff789f --- /dev/null +++ b/starter/08-Omnifood-Responsive/content/css/queries.css @@ -0,0 +1,273 @@ +/* rem and em do NOT depend on html font-size in media queries! insted, 1 rem = 1em = 16px */ + +/*******************************/ +/* 1350px / 16px = 84.375em */ +/* BELOW 1344px (smaller desktops */ +/*******************************/ + +@media (max-width: 84em) { + .hero { + max-width: 120rem; + } + .heading-primary { + font-size: 4.4rem; + } + .gallery { + display: grid; + grid-template-columns: repeat(2, 1fr); + align-content: center; + gap: 1.6rem; + padding: 1.6rem; + } +} + +/*******************************/ +/* 1200px / 16px = 75em */ +/* BELOW 1200px (Landscape Tablets */ +/*******************************/ +@media (max-width: 75em) { + html { + /* 9px / 16px = 0.5625 */ + font-size: 56.25%; + } + .grid { + column-gap: 4.8rem; + row-gap: 6.4rem; + } + .heading-secondary { + font-size: 3.6rem; + } + .heading-tertianry { + font-size: 2.4rem; + } + .header { + padding: 0 3.2rem; + } + .main-nav-list { + gap: 3.2rem; + } + .hero { + gap: 4.8rem; + } + .testimonial-container { + padding: 9.6rem 3.2rem; + } +} + +/*******************************/ +/* 944px / 16px = 59em */ +/* BELOW 944px (Tablets) */ +/*******************************/ + +@media (max-width: 59em) { + html { + /* 8px / 16px = 0.5 = 50% */ + font-size: 50% !important; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + .hero-text-box, + .hero-img-box { + text-align: center; + } + .hero-img { + width: 60%; + } + .delivered-meals { + justify-content: center; + margin-top: 3.2rem; + } + .logos img { + height: 2.4rem; + } + .step-number { + font-size: 7.4rem; + } + .meal-content { + padding: 2.4rem 3.2rem 3.2rem 3.2rem; + } + .section-testimonials { + grid-template-columns: 1fr; + } + .gallery { + grid-template-columns: repeat(4, 1fr); + } + .cta { + /* 3/5 = 60% + 2/5 = 40% */ + grid-template-columns: 3fr 2fr; + } + .cta-form { + grid-template-columns: 1fr; + } + .btn--form { + margin-top: 1.2rem; + } + .pricing-plan { + width: 95%; + } + + /* MOVILE NAVIGATION */ + .btn-mobile-nav { + display: block; + } + .main-nav { + background-color: rgba(255, 255, 255, 0.97); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + transform: translateX(100%); + + display: flex; + align-items: center; + justify-content: center; + /* transition: all 0.5s; */ + transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; + + /* hide navigation */ + /* Allows NO trasitions */ + /* display: none; */ + + /* 1) hide it visually */ + opacity: 0; + + /* 2) Make it unaccessible to mouse an keyboards */ + pointer-events: none; + + /* 3) Hide it from secreen reader */ + 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; + } +} + +/*******************************/ +/* 704px / 16px = 44em */ +/* BELOW 704px (small Tablets) */ +/*******************************/ + +@media (max-width: 44em) { + .grid--3--cols, + .grid--4--cols { + grid-template-columns: repeat(2, 1fr); + } + .diets { + grid-column: 1 / -1; + justify-self: center; + } + .heading-secondary { + margin-bottom: 4.8rem; + } + .pricing-plan { + width: 100%; + } + .grid--footer { + grid-template-columns: repeat(6, 1fr); + } + .logo-col, + .address-col { + grid-column: span 3; + } + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.4rem; + } +} + +/*******************************/ +/* 550px / 16px = 34em */ +/* BELOW 544px ( small 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; + width: 100%; + } + .btn--full:link, + .btn--full:visited { + margin-bottom: 1rem; + } + .section-hero { + padding: 2.4rem 0 6.4rem 0; + } + .hero { + padding: 0 3.2rem; + } + .hero-img { + width: 90%; + } + .logos img { + height: 1.2rem; + } + /* need to place grid items into a specific cell */ + .step-img-box:nth-child(2) { + grid-row: 1; + } + .step-img-box:nth-child(6) { + grid-row: 5; + } + /* need to move the gap down */ + .step-img-box { + transform: translateY(2.4rem); + } + .testimonials { + grid-template-columns: 1fr; + } + .gallery { + grid-template-columns: repeat(4, 1fr); + gap: 1.4rem; + } + .cta { + grid-template-columns: 1fr; + } + .cta-text-box { + padding: 3.2rem; + } + .cta-img-box { + height: 36rem; + grid-row: 1; + } +} +/* +- FONT SIZE (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +--- 07 WHITESPACE (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +*/ diff --git a/starter/08-Omnifood-Responsive/content/css/styles.css b/starter/08-Omnifood-Responsive/content/css/styles.css new file mode 100644 index 000000000..572b3b176 --- /dev/null +++ b/starter/08-Omnifood-Responsive/content/css/styles.css @@ -0,0 +1,563 @@ +/*******************************/ +/* HEADER */ +/*******************************/ +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + position: relative; + + /* Because we want header to be sticky later */ + height: 9.6rem; + padding: 0 4.6rem; +} +.logo { + height: 2.2rem; +} +/*******************************/ +/* NAVIGATION */ +/*******************************/ +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 4.8rem; +} +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/* Mobile */ + +.btn-mobile-nav { + border: none; + background: none; + cursor: pointer; + display: none; +} +.icon-mobile-nav { + width: 4.8rem; + height: 4.8rem; + color: #333; + cursor: pointer; +} +.icon-mobile-nav[name="close-outline"] { + display: none; +} + +/*******************************/ +/* HERO SECTION */ +/*******************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 9.6rem; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} +.delivered-imgs { + display: flex; +} +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} +.delivered-imgs img:last-child { + margin: 0; +} +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/*******************************/ +/* FEATURED IN SECTION */ +/*******************************/ +.section-featured { + margin: 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-evenly; +} +.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::after, +.step-img-box::before { + content: ""; + display: block; + position: absolute; + /* height: 60%; */ + /* height did not work so we used padding-bottom */ + /* no need this trcik because of Pseudo-elements (circles) are flex containers as the parent*/ + /* top: 50%; + left: 50%; + transform: translate(-50%, -50%); */ + border-radius: 50%; +} + +.step-img-box::before { + width: 60%; + background-color: #fdf2e9; + padding-bottom: 60%; + z-index: -2; +} +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + 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: 1.2rem; + 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; + 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; +} +.testimonial-container { + padding: 9.6rem; +} +.testimonials { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 4.8rem; + column-gap: 8rem; +} +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-content: center; + gap: 1.6rem; + padding: 1.6rem; +} +.gallery-item { + overflow: hidden; +} +.gallery-item img { + display: block; + width: 100%; + /* height: 100%; */ + transition: all 0.4s; +} +.gallery-item img:hover { + transform: scale(1.1); +} + +/*******************************/ +/* MEALS SECTION */ +/*******************************/ +.section-pricing { + padding: 9.6rem 0; +} +.pricing-plan { + border-radius: 11px; + /* */ + width: 75%; +} +.pricing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} +.pricing-plan-complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} +.pricing-plan-complete::after { + content: "Best value"; + position: absolute; + top: 7%; + right: -14%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 6rem; + transform: rotate(45deg); +} +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + /* opacity: 95%; */ + color: #6f6f6f; +} +.plan-sing-up { + text-align: center; + margin-top: 4.8rem; +} +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fae5d3; + 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; +} +.cta { + display: grid; + /* 2/3 = 66.6% + 1/3 = 33.33% */ + 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; + + /* temp */ + /* height: 50rem; */ +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #2e1907; +} +.cta .heading-secondary { + /* color: #2e1907; */ + color: inherit; + margin-bottom: 3.2rem; +} +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9 !important; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); +} +.cta-form input::placeholder { + color: #aaa; +} +.cta *:focus { + outline: none; + + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); +} + +/*******************************/ +/* FOOTER */ +/*******************************/ +.footer { + padding: 12.8rem 0; + border-top: 1px solid #eee; +} +.grid--footer { + display: grid; + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} +.social-icon { + height: 2.4rem; + width: 2.4rem; +} +.copyright { + font-size: 1.4rem; + line-height: 1.6; + color: #767676; + margin-top: auto; +} +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} +.address { + margin-bottom: 2.4rem; +} +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all cubic-bezier(0.39, 0.575, 0.565, 1); +} +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-1.png b/starter/08-Omnifood-Responsive/content/img/app/app-screen-1.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/app/app-screen-1.png rename to starter/08-Omnifood-Responsive/content/img/app/app-screen-1.png diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-2.png b/starter/08-Omnifood-Responsive/content/img/app/app-screen-2.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/app/app-screen-2.png rename to starter/08-Omnifood-Responsive/content/img/app/app-screen-2.png diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-3.png b/starter/08-Omnifood-Responsive/content/img/app/app-screen-3.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/app/app-screen-3.png rename to starter/08-Omnifood-Responsive/content/img/app/app-screen-3.png diff --git a/starter/08-Omnifood-Responsive/img/customers/ben.jpg b/starter/08-Omnifood-Responsive/content/img/customers/ben.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/ben.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/ben.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-1.jpg b/starter/08-Omnifood-Responsive/content/img/customers/customer-1.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-1.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/customer-1.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-2.jpg b/starter/08-Omnifood-Responsive/content/img/customers/customer-2.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-2.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/customer-2.jpg diff --git a/starter/08-Omnifood-Responsive/content/img/customers/customer-3.jpg b/starter/08-Omnifood-Responsive/content/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/starter/08-Omnifood-Responsive/content/img/customers/customer-3.jpg differ diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-4.jpg b/starter/08-Omnifood-Responsive/content/img/customers/customer-4.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-4.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/customer-4.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-5.jpg b/starter/08-Omnifood-Responsive/content/img/customers/customer-5.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-5.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/customer-5.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-6.jpg b/starter/08-Omnifood-Responsive/content/img/customers/customer-6.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-6.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/customer-6.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/dave.jpg b/starter/08-Omnifood-Responsive/content/img/customers/dave.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/dave.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/dave.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/hannah.jpg b/starter/08-Omnifood-Responsive/content/img/customers/hannah.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/hannah.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/hannah.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/steve.jpg b/starter/08-Omnifood-Responsive/content/img/customers/steve.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/steve.jpg rename to starter/08-Omnifood-Responsive/content/img/customers/steve.jpg diff --git a/starter/08-Omnifood-Responsive/img/eating.jpg b/starter/08-Omnifood-Responsive/content/img/eating.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/eating.jpg rename to starter/08-Omnifood-Responsive/content/img/eating.jpg diff --git a/starter/08-Omnifood-Responsive/img/favicon.png b/starter/08-Omnifood-Responsive/content/img/favicon.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/favicon.png rename to starter/08-Omnifood-Responsive/content/img/favicon.png diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-1.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-1.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-10.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-10.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-11.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-11.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-12.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-12.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-2.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-2.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-3.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-3.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-4.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-4.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-5.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-5.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-6.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-6.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-7.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-7.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-8.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-8.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg b/starter/08-Omnifood-Responsive/content/img/gallery/gallery-9.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg rename to starter/08-Omnifood-Responsive/content/img/gallery/gallery-9.jpg diff --git a/starter/08-Omnifood-Responsive/img/hero.png b/starter/08-Omnifood-Responsive/content/img/hero.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/hero.png rename to starter/08-Omnifood-Responsive/content/img/hero.png diff --git a/starter/08-Omnifood-Responsive/img/logos/business-insider.png b/starter/08-Omnifood-Responsive/content/img/logos/business-insider.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/business-insider.png rename to starter/08-Omnifood-Responsive/content/img/logos/business-insider.png diff --git a/starter/08-Omnifood-Responsive/img/logos/forbes.png b/starter/08-Omnifood-Responsive/content/img/logos/forbes.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/forbes.png rename to starter/08-Omnifood-Responsive/content/img/logos/forbes.png diff --git a/starter/08-Omnifood-Responsive/img/logos/techcrunch.png b/starter/08-Omnifood-Responsive/content/img/logos/techcrunch.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/techcrunch.png rename to starter/08-Omnifood-Responsive/content/img/logos/techcrunch.png diff --git a/starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png b/starter/08-Omnifood-Responsive/content/img/logos/the-new-york-times.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png rename to starter/08-Omnifood-Responsive/content/img/logos/the-new-york-times.png diff --git a/starter/08-Omnifood-Responsive/img/logos/usa-today.png b/starter/08-Omnifood-Responsive/content/img/logos/usa-today.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/usa-today.png rename to starter/08-Omnifood-Responsive/content/img/logos/usa-today.png diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-1.jpg b/starter/08-Omnifood-Responsive/content/img/meals/meal-1.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/meals/meal-1.jpg rename to starter/08-Omnifood-Responsive/content/img/meals/meal-1.jpg diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-2.jpg b/starter/08-Omnifood-Responsive/content/img/meals/meal-2.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/meals/meal-2.jpg rename to starter/08-Omnifood-Responsive/content/img/meals/meal-2.jpg diff --git a/starter/08-Omnifood-Responsive/img/omnifood-logo.png b/starter/08-Omnifood-Responsive/content/img/omnifood-logo.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/omnifood-logo.png rename to starter/08-Omnifood-Responsive/content/img/omnifood-logo.png diff --git a/starter/08-Omnifood-Responsive/index.html b/starter/08-Omnifood-Responsive/index.html index 7cf37a8b0..8e7b883b3 100644 --- a/starter/08-Omnifood-Responsive/index.html +++ b/starter/08-Omnifood-Responsive/index.html @@ -4,49 +4,44 @@ - - + + - - - - - - - + + + Omnifood + + +

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

The smart 365-days-per-year food subscription that will make you @@ -59,12 +54,30 @@

Learn more ↓

- - - - - - + + + + + +

250,000+ meals delivered last year! @@ -73,9 +86,9 @@

@@ -83,19 +96,19 @@

-
As featured in
+
As features in

- + - - + +

@@ -108,7 +121,7 @@

@@ -124,20 +137,17 @@

@@ -149,28 +159,27 @@

Approve your weekly meal plan

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! + 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 @@ -179,42 +188,42 @@

Vegetarian

Japanese Gyozas

- - 650 calories + 650 calories
- NutriScore ® 74 + >NutriScore 74
- - 4.9 rating (537) + 4.9 reting (537)

@@ -222,29 +231,30 @@

Vegan Paleo

Avocado Salad

- - 400 calories + 400 calories
- NutriScore ® 92 + >NutriScore 92
- - 4.8 rating (441) + 4.8 reting (441)

Works with any diet:

@@ -285,14 +295,13 @@
Works with any diet:

See all recipes →

- +

Testimonials

Once you try it, you can't go back

@@ -300,8 +309,8 @@

Once you try it, you can't go back

- +

Pricing -

- Eating well without breaking the bank -

- -

Eating well without breaking the bank

+ +

Starter

$399

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

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

- Start eating well +

+ + 1 meal per day +

+ + Order from 11am - 9pm +

+ + Delivery is free +

+ + +

+ Start eating well

- -

+ +

Complete

$649

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

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

- Start eating well -

+ +

+ + 2 meal per day +

+ + Order 24/7 +

+ + Delivery is free +

+ + Get access to latest recipes +

+ Start eating well +

- +

- -

+ +

Never cook again!

+ Never cook again! +

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

Local and organic

+ Local and organic +

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

No waste

+ No waste +

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

Pause anytime

+ Pause anytime +

- Going on vacation? Just pause your subscription, and we refund - unused days. + 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! -

- - -

+ + +

+ We offer a free sample meal +

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

+ + + + +

- +

+ Email Address + +

+ Where did you hear from us? + +

+ + +

+ + + + + + + + + + diff --git a/starter/09-Omnifood-Optimizations/css/general.css b/starter/09-Omnifood-Optimizations/css/general.css index 4e8cb7052..4961d5063 100644 --- a/starter/09-Omnifood-Optimizations/css/general.css +++ b/starter/09-Omnifood-Optimizations/css/general.css @@ -70,6 +70,9 @@ html { /* Percentage of user's browser font-size setting */ font-size: 62.5%; overflow-x: hidden; + + /* Does NOT work on Safari */ + /* scroll-behavior: smooth; */ } body { diff --git a/starter/09-Omnifood-Optimizations/css/queries.css b/starter/09-Omnifood-Optimizations/css/queries.css index 5f0cf2820..a1f21f051 100644 --- a/starter/09-Omnifood-Optimizations/css/queries.css +++ b/starter/09-Omnifood-Optimizations/css/queries.css @@ -124,10 +124,12 @@ /* MOBILE NAVIGATION */ .btn-mobile-nav { display: block; + z-index: 1; } .main-nav { - background-color: rgba(255, 255, 255, 0.97); + background-color: rgba(255, 255, 255, 0.6); + -webkit-backdrop-filter: blur(10px); position: absolute; top: 0; left: 0; @@ -298,3 +300,56 @@ - Spacing system (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */ + +/**************************/ +/* Fixing Safari flex 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; + } +} diff --git a/starter/09-Omnifood-Optimizations/css/style.css b/starter/09-Omnifood-Optimizations/css/style.css index cc82b4fcf..91b5c6bf8 100644 --- a/starter/09-Omnifood-Optimizations/css/style.css +++ b/starter/09-Omnifood-Optimizations/css/style.css @@ -76,6 +76,23 @@ display: none; } +/* Sticky NAVEGATION */ +.sticky .header { + position: fixed; + top: 0; + bottom: 0; + width: 100%; + height: 8rem; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(255, 255, 255, 0.97); + z-index: 9; + box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03); +} +.sticky .section-hero { + margin-top: 9.6rem; +} + /**************************/ /* HERO SECTION */ /**************************/ diff --git a/starter/09-Omnifood-Optimizations/img/apple-touch-icon.png b/starter/09-Omnifood-Optimizations/img/apple-touch-icon.png new file mode 100644 index 000000000..030e95f27 Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/apple-touch-icon.png differ diff --git a/starter/09-Omnifood-Optimizations/img/favico.png b/starter/09-Omnifood-Optimizations/img/favico.png new file mode 100644 index 000000000..18f5ff4b5 Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/favico.png differ diff --git a/starter/09-Omnifood-Optimizations/img/favicon.png b/starter/09-Omnifood-Optimizations/img/favicon - Copy - Copy (2).png similarity index 100% rename from starter/09-Omnifood-Optimizations/img/favicon.png rename to starter/09-Omnifood-Optimizations/img/favicon - Copy - Copy (2).png diff --git a/starter/09-Omnifood-Optimizations/img/favicon - Copy.png b/starter/09-Omnifood-Optimizations/img/favicon - Copy.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/favicon - Copy.png differ diff --git a/starter/09-Omnifood-Optimizations/img/favicon-192.png b/starter/09-Omnifood-Optimizations/img/favicon-192.png new file mode 100644 index 000000000..00b124a72 Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/favicon-192.png differ diff --git a/starter/09-Omnifood-Optimizations/img/favicon-512.png b/starter/09-Omnifood-Optimizations/img/favicon-512.png new file mode 100644 index 000000000..55ca31450 Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/favicon-512.png differ diff --git a/starter/09-Omnifood-Optimizations/img/hero-compresed.png b/starter/09-Omnifood-Optimizations/img/hero-compresed.png new file mode 100644 index 000000000..793a14806 Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/hero-compresed.png differ diff --git a/starter/09-Omnifood-Optimizations/img/hero-min.png b/starter/09-Omnifood-Optimizations/img/hero-min.png new file mode 100644 index 000000000..a1364d76f Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/hero-min.png differ diff --git a/starter/09-Omnifood-Optimizations/img/hero.png b/starter/09-Omnifood-Optimizations/img/hero-original.png similarity index 100% rename from starter/09-Omnifood-Optimizations/img/hero.png rename to starter/09-Omnifood-Optimizations/img/hero-original.png diff --git a/starter/09-Omnifood-Optimizations/img/hero.webp b/starter/09-Omnifood-Optimizations/img/hero.webp new file mode 100644 index 000000000..e0e317417 Binary files /dev/null and b/starter/09-Omnifood-Optimizations/img/hero.webp differ diff --git a/starter/09-Omnifood-Optimizations/index.html b/starter/09-Omnifood-Optimizations/index.html index 6d69f1bab..b3436846e 100644 --- a/starter/09-Omnifood-Optimizations/index.html +++ b/starter/09-Omnifood-Optimizations/index.html @@ -3,10 +3,19 @@ + + + + + + - Omnifood + + + Omnifood — Never cook again!

@@ -36,11 +50,11 @@ @@ -62,10 +76,10 @@

eat healthy again. Tailored to your personal tastes and nutritional needs.
- Start eating well - Learn more ↓ + Learn more ↓

@@ -81,11 +95,21 @@

- + + + + +
@@ -109,7 +133,7 @@

As featured in

How it works

@@ -181,7 +205,7 @@

Receive meals at convenient time

Meals

@@ -301,7 +325,7 @@

Works with any diet:

Testimonials

Once you try it, you can't go back

@@ -450,7 +474,7 @@

Once you try it, you can't go back

Pricing

@@ -483,7 +507,7 @@

- Start eating well + Start eating well

@@ -512,7 +536,7 @@

- Start eating well + Start eating well
@@ -560,7 +584,7 @@

@@ -571,7 +595,7 @@

Get your first meal for free!

first meal is on us!

Where did you hear from us? - @@ -646,7 +672,8 @@

Get your first meal for free!

@@ -697,4 +724,5 @@

Get your first meal for free!

+ diff --git a/starter/09-Omnifood-Optimizations/js/script.js b/starter/09-Omnifood-Optimizations/js/script.js new file mode 100644 index 000000000..9c906e804 --- /dev/null +++ b/starter/09-Omnifood-Optimizations/js/script.js @@ -0,0 +1,142 @@ +console.log('hello world'); +// set current year +const yearEl = document.querySelector('.year'); +const fullYear = new Date().getFullYear(); +yearEl.textContent = fullYear; + +// Poner o quita una clase que abre o cierra la navegacion en mobile +const btnNavEl = document.querySelector('.btn-mobile-nav') +const headerEl = document.querySelector('.header') + +btnNavEl.addEventListener('click', function (){ + headerEl.classList.toggle('nav-open') +}) + +/////////////////////////////////////////////////////////// +// Smooth scrolling animation + +const allLinks = document.querySelectorAll("a:link") + +allLinks.forEach(link => { + link.addEventListener('click', (e) => { + const href = link.getAttribute('href') + // console.log(href); + // Scroll back to top + if (href === '#') { + e.preventDefault(); + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + } + + /// Scroll to other links + if (href !== '#' && href.startsWith('#')) { + console.log(href); + e.preventDefault(); + const sectionEl = document.querySelector(href); + sectionEl.scrollIntoView({ behavior: 'smooth' }); + } + + // Close mobile Navegation + if (link.classList.contains("main-nav-link")) { + headerEl.classList.toggle('nav-open') + } + }) +}); + +/////////////////////////////////////////////////////////// +// Sticky navigation + +const sectionHeroEl = document.querySelector('.section-hero'); + +const obs = new IntersectionObserver((entries)=> { + const ent = entries[0]; + console.log(ent); + if (!ent.isIntersecting) {// if is === false + document.body.classList.add("sticky") + } + if (ent.isIntersecting) { // if is === true + document.body.classList.remove("sticky") + } +}, + { + // In the viewport + root: null, + threshold: 0, + rootMargin: "-80px", + }); +obs.observe(sectionHeroEl); + +/////////////////////////////////////////////////////////// +// 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/starter/09-Omnifood-Optimizations/manifest.webmanifest b/starter/09-Omnifood-Optimizations/manifest.webmanifest new file mode 100644 index 000000000..421df7193 --- /dev/null +++ b/starter/09-Omnifood-Optimizations/manifest.webmanifest @@ -0,0 +1,6 @@ +{ + "icons": [ + { "src": "/img/favicon-192.png", "type": "image/png", "sizes": "192x192" }, + { "src": "/img/favicon-512.png", "type": "image/png", "sizes": "512x512" } + ] +} diff --git a/starter/09-Omnifood-Optimizations/script.js b/starter/09-Omnifood-Optimizations/script.js deleted file mode 100644 index 7b9977244..000000000 --- a/starter/09-Omnifood-Optimizations/script.js +++ /dev/null @@ -1,72 +0,0 @@ -/////////////////////////////////////////////////////////// -// 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; - } -} -*/

Hello, world

This is the Blog

What is HTML?

Why should you learn HTML?

solo como prueba de la estructura de HTML

The Basic Language of the Web: HTML

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

Learn more ↓ - - - - - - + + + + + + 250,000+ meals delivered last year! @@ -73,9 +86,9 @@

- As featured in + As features in - + - - + + @@ -108,7 +121,7 @@

As featured in

As features in

Approve your weekly meal plan

Receive meals at convenient time

Vegan Paleo

Works with any diet:

Works with any diet:

Once you try it, you can't go back

Once you try it, you can't go back

Once you try it, you can't go back

Once you try it, you can't go back

Once you try it, you can't go back

Once you try it, you can't go back

- Eating well without breaking the bank -

Get your first meal for free!

+ We offer a free sample meal +

Get your first meal for free!

Get your first meal for free!

Get your first meal for free!

Get your first meal for free!

Get your first meal for free!

Learn more ↓

- - - - - - + + + + + +

250,000+ meals delivered last year! @@ -73,9 +86,9 @@

-
As featured in
+
As features in

- + - - + +

@@ -108,7 +121,7 @@