diff --git a/02-HTML-Fundamentals/blog.html b/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..d9a74cc52 --- /dev/null +++ b/02-HTML-Fundamentals/blog.html @@ -0,0 +1,29 @@ + + + + + Blog Page + + +
+

Converse Chuck Taylor All Star Low Top

+ Shoes +

$ 65.00

+

Free Shipping

+

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

+ + More Information → + +

Product Details

+
    +
  1. Lightweight, durable canvas sneaker
    2. +
  2. Lightly padded footbed for added comfort
    3. +
  3. Iconic Chuck Taylor ankle patch.
    4. +
+ +
+ + diff --git a/starter/02-HTML-Fundamentals/content.txt b/02-HTML-Fundamentals/content.txt similarity index 100% rename from starter/02-HTML-Fundamentals/content.txt rename to 02-HTML-Fundamentals/content.txt diff --git a/starter/02-HTML-Fundamentals/challenges.jpg b/02-HTML-Fundamentals/img/challenges.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to 02-HTML-Fundamentals/img/challenges.jpg diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/02-HTML-Fundamentals/img/laura-jones.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/laura-jones.jpg rename to 02-HTML-Fundamentals/img/laura-jones.jpg diff --git a/starter/02-HTML-Fundamentals/post-img.jpg b/02-HTML-Fundamentals/img/post-img.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/post-img.jpg rename to 02-HTML-Fundamentals/img/post-img.jpg diff --git a/starter/02-HTML-Fundamentals/related-1.jpg b/02-HTML-Fundamentals/img/related-1.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-1.jpg rename to 02-HTML-Fundamentals/img/related-1.jpg diff --git a/starter/02-HTML-Fundamentals/related-2.jpg b/02-HTML-Fundamentals/img/related-2.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-2.jpg rename to 02-HTML-Fundamentals/img/related-2.jpg diff --git a/starter/02-HTML-Fundamentals/related-3.jpg b/02-HTML-Fundamentals/img/related-3.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/related-3.jpg rename to 02-HTML-Fundamentals/img/related-3.jpg diff --git a/starter/03-CSS-Fundamentals/index.html b/02-HTML-Fundamentals/index.html similarity index 78% rename from starter/03-CSS-Fundamentals/index.html rename to 02-HTML-Fundamentals/index.html index df8a623a8..a182e71a5 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/02-HTML-Fundamentals/index.html @@ -6,14 +6,13 @@ - +
The Basic Language of the Web: HTML
-->

📘 The Code Magazine

@@ -29,16 +28,13 @@

📘 The Code Magazine

The Basic Language of the Web: HTML

- Headshot of Laura Jones -

Posted by Laura Jones on Monday, June 21st 2027

- HTML code on a screen

The Basic Language of the Web: HTML

All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the - web. + 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 @@ -72,70 +67,59 @@

What is HTML?

HTML and render HTML code as websites.

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

-
  1. The opening tag
  2. The closing tag
  3. The actual element
- -

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

- +

You can learn more at the MDN Web Docs.

Why should you learn HTML?

-

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

-
  • To be able to use the fundamental web dev language
    • -
  • - To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
    • +
  • To 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/03-CSS-Fundamentals/style.css similarity index 68% rename from starter/04-CSS-Layouts/style.css rename to 03-CSS-Fundamentals/style.css index c879e79d2..029cbff1d 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/03-CSS-Fundamentals/style.css @@ -1,60 +1,37 @@ * { - /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; } - -/* PAGE SECTIONS */ body { color: #444; font-family: sans-serif; - border-top: 10px solid #1098ad; position: relative; } - .container { width: 800px; - /* 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; + height: 80px; } .post-header { margin-bottom: 40px; - /* position: relative; */ } aside { background-color: #f7f7f7; border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ padding: 50px 0; width: 500px; } -/* SMALLER ELEMENTS */ h1, h2, h3 { @@ -89,7 +66,6 @@ p { line-height: 1.5; margin-bottom: 15px; } - ul, ol { margin-left: 50px; @@ -99,20 +75,19 @@ ol { li { font-size: 20px; margin-bottom: 10px; - /* display: inline; */ } li:last-child { margin-bottom: 0; } -/* footer p { +footer p { font-size: 16px; -} */ +} -/* article header p { +/*article header p { font-style: italic; -} */ +}*/ #author { font-style: italic; @@ -136,10 +111,6 @@ li:last-child { list-style: none; } -body { - /* background-color: orangered; */ -} - /* .first-li { font-weight: bold; } */ @@ -152,23 +123,18 @@ li:last-child { font-style: italic; } -li:nth-child(even) { - /* color: red; */ -} - -/* Misconception: this won't work! */ -article p:first-child { +/* article p:first-child { color: red; -} +} */ + +/* styling hyperlinks */ -/* Styling links */ a:link { color: #1098ad; text-decoration: none; } a:visited { - /* color: #777; */ color: #1098ad; } @@ -182,7 +148,6 @@ a:active { background-color: black; font-style: italic; } -/* LVHA */ .post-img { width: 100%; @@ -190,12 +155,6 @@ a:active { } nav a:link { - /* background-color: orangered; - margin: 20px; - padding: 20px; - - display: block; */ - margin-right: 30px; margin-top: 10px; display: inline-block; @@ -209,10 +168,7 @@ button { font-size: 22px; padding: 20px; cursor: pointer; - position: absolute; - /* top: 50px; - left: 50px; */ bottom: 50px; right: 50px; } @@ -222,12 +178,11 @@ h1::first-letter { margin-right: 5px; } -h3 + p::first-line { - /* color: red; */ -} +/* h3 + p::first-line { + color: red; +} */ h2 { - /* background-color: orange; */ position: relative; } @@ -243,25 +198,3 @@ h2::before { 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; -} */ diff --git a/04-CSS-Layouts/blog.css b/04-CSS-Layouts/blog.css new file mode 100644 index 000000000..43ed501b0 --- /dev/null +++ b/04-CSS-Layouts/blog.css @@ -0,0 +1,155 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +/* .container { + display: flex; + gap: 40px; + align-content: space-between; +} */ + +/* PRODUCT */ +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + position: relative; + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; + grid-column: 1/-1; +} + +/* PRODUCT INFORMATION */ +.product-info { + margin-top: 20px; +} + +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.sale { + background-color: #ec2f2f; + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + padding: 7px 15px; + display: inline-block; + position: absolute; + top: -17px; + left: -38px; +} + +.product-description { + margin-bottom: 10px; +} + +.more-info:link, +.more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.colors { + display: flex; + gap: 10px; +} + +.color { + background-color: #000; + height: 22px; + width: 22px; +} + +.color-blue { + background-color: #2f6ee2; +} +.color-red { + background-color: #ec2f2f; +} +.color-yellow { + background-color: #f0bf1e; +} +.color-green { + background-color: #90cc20; +} +.color-brown { + background-color: #885214; +} + +/* PRODUCT DETAILS */ +.product-details { + margin-top: 20px; +} + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +.row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; + border-top: 4px solid black; + grid-column: 1 / -1; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} diff --git a/04-CSS-Layouts/blog.html b/04-CSS-Layouts/blog.html new file mode 100644 index 000000000..ba7ff2ae0 --- /dev/null +++ b/04-CSS-Layouts/blog.html @@ -0,0 +1,56 @@ + + + + + Blog Page + + + +
+

Converse Chuck Taylor All Star Low Top

+ + Chuck Taylor All Star Shoe +
+
+

$65.00

+

Free shipping

+
+

Sale

+ +

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

+ More information → + +
+
+
+
+
+
+
+
+
+ +
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch.
    • +
+
+ + +
+ + diff --git a/starter/04-CSS-Layouts/content.txt b/04-CSS-Layouts/content.txt similarity index 100% rename from starter/04-CSS-Layouts/content.txt rename to 04-CSS-Layouts/content.txt diff --git a/starter/04-CSS-Layouts/css-grid.html b/04-CSS-Layouts/css-grid.html similarity index 70% rename from starter/04-CSS-Layouts/css-grid.html rename to 04-CSS-Layouts/css-grid.html index e2daa6d42..01a01634b 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/04-CSS-Layouts/css-grid.html @@ -36,12 +36,35 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 30px; margin: 40px; /* CSS GRID */ + display: grid; + /* grid-template-columns: 1fr 1fr 1fr 1fr; */ + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + /* gap: 30px; */ + column-gap: 20px; + row-gap: 40px; + + display: none; + } + + .el--8 { + grid-column: 2 / 3; + grid-row: 1/2; } + .el--2 { + grid-column: 1 / -1; + grid-row: 2; + } + + /* .el--6 { + grid-row: 3 / 6; + } */ + .container--2 { /* STARTER */ font-family: sans-serif; @@ -53,6 +76,17 @@ height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + gap: 50px; + + /* aligning */ + + justify-content: center; + align-content: center; + align-items: center; + justify-items: center; } diff --git a/starter/04-CSS-Layouts/flexbox.html b/04-CSS-Layouts/flexbox.html similarity index 81% rename from starter/04-CSS-Layouts/flexbox.html rename to 04-CSS-Layouts/flexbox.html index 496ef372a..5a4756106 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/04-CSS-Layouts/flexbox.html @@ -36,10 +36,27 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 34px; margin: 40px; /* FLEXBOX */ + display: flex; + align-items: center; + justify-content: flex-start; + gap: 30px; + } + + .el--1 { + align-self: flex-start; + } + + .el--5 { + align-self: stretch; + order: 1; + } + + .el--6 { + order: -1; } diff --git a/starter/04-CSS-Layouts/img/challenges.jpg b/04-CSS-Layouts/img/challenges.jpg similarity index 100% rename from starter/04-CSS-Layouts/img/challenges.jpg rename to 04-CSS-Layouts/img/challenges.jpg diff --git a/starter/04-CSS-Layouts/img/laura-jones.jpg b/04-CSS-Layouts/img/laura-jones.jpg similarity index 100% rename from starter/04-CSS-Layouts/img/laura-jones.jpg rename to 04-CSS-Layouts/img/laura-jones.jpg diff --git a/starter/04-CSS-Layouts/img/post-img.jpg b/04-CSS-Layouts/img/post-img.jpg similarity index 100% rename from starter/04-CSS-Layouts/img/post-img.jpg rename to 04-CSS-Layouts/img/post-img.jpg diff --git a/starter/04-CSS-Layouts/img/related-1.jpg b/04-CSS-Layouts/img/related-1.jpg similarity index 100% rename from starter/04-CSS-Layouts/img/related-1.jpg rename to 04-CSS-Layouts/img/related-1.jpg diff --git a/starter/04-CSS-Layouts/img/related-2.jpg b/04-CSS-Layouts/img/related-2.jpg similarity index 100% rename from starter/04-CSS-Layouts/img/related-2.jpg rename to 04-CSS-Layouts/img/related-2.jpg diff --git a/starter/04-CSS-Layouts/img/related-3.jpg b/04-CSS-Layouts/img/related-3.jpg similarity index 100% rename from starter/04-CSS-Layouts/img/related-3.jpg rename to 04-CSS-Layouts/img/related-3.jpg diff --git a/04-CSS-Layouts/index.html b/04-CSS-Layouts/index.html new file mode 100644 index 000000000..b67d1a869 --- /dev/null +++ b/04-CSS-Layouts/index.html @@ -0,0 +1,179 @@ + + + + + + + The Basic Language of the Web: HTML + + + + + +
+
+

📘 The Code Magazine

+ + + +
+ + + +
+
+

The Basic Language of the Web: HTML

+
+ Headshot of Laura Jones + +

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

+
+ + HTML code on a screen + +
+ +

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

+ +

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

+ +

What is HTML?

+

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

+

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

+

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

+ +
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+ +

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

+
+ + + +
+

+ Copyright © 2027 by The Code Magazine. +

+
+
+ + diff --git a/04-CSS-Layouts/style.css b/04-CSS-Layouts/style.css new file mode 100644 index 000000000..b93b98f29 --- /dev/null +++ b/04-CSS-Layouts/style.css @@ -0,0 +1,391 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + /* margin-bottom: 60px; */ + /* height: 80px; */ +} + +nav { + font-size: 18px; + /* text-align: center; */ +} + +/* article { + margin-bottom: 60px; +} */ + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 40px; +} + +/* SMALLER ELEMENTS */ +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; + margin-left: 0; + margin-top: 30px; +} + +/* body { */ +/* background-color: orangered; */ +/* } */ + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* li:nth-child(even) { */ +/* color: red; */ +/* } */ + +/* Misconception: this won't work! */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + + display: block; */ + + margin-right: 30px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ + +/* FLOATS */ +/* +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +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; +} */ + +/* FLEXBOX */ +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + 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 { + flex: 1; + margin-bottom: 0; +} + +aside { + flex: 0 0 300px; +} */ + +/* GRID */ + +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: flex-start; +} + +.main-header { + grid-column: 1 / -1; +} + +article { +} + +aside { +} + +footer { + grid-column: 1 / -1; +} diff --git a/starter/05-Design/chair-1.jpg b/05-Design/chair-1.jpg similarity index 100% rename from starter/05-Design/chair-1.jpg rename to 05-Design/chair-1.jpg diff --git a/starter/05-Design/chair-2.jpg b/05-Design/chair-2.jpg similarity index 100% rename from starter/05-Design/chair-2.jpg rename to 05-Design/chair-2.jpg diff --git a/starter/05-Design/chair-3.jpg b/05-Design/chair-3.jpg similarity index 100% rename from starter/05-Design/chair-3.jpg rename to 05-Design/chair-3.jpg diff --git a/starter/05-Design/customers.jpg b/05-Design/customers.jpg similarity index 100% rename from starter/05-Design/customers.jpg rename to 05-Design/customers.jpg diff --git a/starter/05-Design/hero.jpg b/05-Design/hero.jpg similarity index 100% rename from starter/05-Design/hero.jpg rename to 05-Design/hero.jpg diff --git a/starter/05-Design/index.html b/05-Design/index.html similarity index 100% rename from starter/05-Design/index.html rename to 05-Design/index.html diff --git a/starter/05-Design/style.css b/05-Design/style.css similarity index 100% rename from starter/05-Design/style.css rename to 05-Design/style.css diff --git a/starter/06-Components/hero.jpg b/06-Components/hero.jpg similarity index 100% rename from starter/06-Components/hero.jpg rename to 06-Components/hero.jpg diff --git a/starter/06-Components/maria.jpg b/06-Components/maria.jpg similarity index 100% rename from starter/06-Components/maria.jpg rename to 06-Components/maria.jpg diff --git a/06-Components/pagination.html b/06-Components/pagination.html new file mode 100644 index 000000000..76208aa8f --- /dev/null +++ b/06-Components/pagination.html @@ -0,0 +1,126 @@ + + + + + + + Pagination + + + + + + diff --git a/starter/07-Omnifood-Desktop/content/content.md b/07-Omnifood-Desktop/content.md similarity index 95% rename from starter/07-Omnifood-Desktop/content/content.md rename to 07-Omnifood-Desktop/content.md index 7193e017f..13b3d37f5 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/07-Omnifood-Desktop/content.md @@ -85,7 +85,7 @@ Starter: $399 per month Complete: $649 per month -- 2 meal2 per day +- 2 meals per day - Order 24/7 - Delivery is free - Get access to latest recipes @@ -119,10 +119,26 @@ Create account Sign in iOS app Android app + About Omnifood For Business Cooking partners Careers + Recipe directory Help center Privacy & terms + +###### + +## Sections + +- Logo + Navigation +- Hero +- Featured in +- How it works +- Meals (and list of diets) +- Testimonials + gallery +- Pricing + features +- CTA +- Footer diff --git a/07-Omnifood-Desktop/css/general.css b/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..7f3268862 --- /dev/null +++ b/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,264 @@ +/* +--- 01 TYPOGRAPHY SYSTEM + +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Font weights +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +- Line heights +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS + +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e + +- Shades: +#cf711f +#45260a + +- Accents: +- Greys + +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS + +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 06 BORDER-RADIUS + +Default: 9px +Medium: 11px + +--- 07 WHITESPACE + +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + +/****************************/ +/* 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:last-child { + margin-bottom: 0; +} */ + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn, +.btn:link, +.btn:visited { + display: inline-block; + + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + border: none; + cursor: pointer; + font-family: inherit; + + 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; + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all 0.3s; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +*:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +.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/07-Omnifood-Desktop/css/style.css b/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..5d727ffcc --- /dev/null +++ b/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,617 @@ +/****************************/ +/* HEADER */ +/****************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + height: 9.6rem; + padding: 0 4.8rem; +} + +.logo { + height: 2.2rem; +} + +/****************************/ +/* NAVIGATION */ +/****************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 3.2rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/****************************/ +/* HERO SECTION */ +/****************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8 rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin-right: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/****************************/ +/* HEADING FEATURED IN SECTION */ +/****************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #888; +} +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/****************************/ +/* HOW IT WORKS SECTION */ +/****************************/ + +.section-how { + padding: 9.6px 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + position: relative; + + display: flex; + align-items: center; + justify-content: center; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + /* height: 60%; */ + padding-bottom: 60%; + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + z-index: -1; +} + +.step-img { + width: 35%; +} + +/****************************/ +/* MEALS SECTION */ +/****************************/ + +.section-meals { + padding: 9.6rem 0; +} + +.meal { + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + border-radius: 11px; + overflow: hidden; + transition: all 0.4s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06s); +} + +.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; + background-color: #51cf66; + color: #333; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegetarian { + background-color: #51cf66; +} + +.tag--vegan { + background-color: #94d82d; +} + +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + font-size: 2.4rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + height: 2.4rem; + width: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +/****************************/ +/* TESTIMONIALS SECTION */ +/****************************/ + +.section-testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4.8rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-item img { + display: block; + width: 100%; + transition: all 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +/****************************/ +/* PRICING SECTION */ +/****************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + width: 75%; +} + +.pricing-plan--starter { + justify-self: end; + padding: calc(4.8rem - 2px); + border: 2px solid #fdf2e9; +} + +.pricing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + overflow: hidden; + position: relative; +} + +.pricing-plan--complete::after { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} + +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} + +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sing-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fdf2e9; + margin-bottom: 3.2rem; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8; +} + +/****************************/ +/* CTA SECTION */ +/****************************/ + +.section-cta { + padding: 4.8rem 0 12.8rem; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + background-color: #e67e22; + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta .heading-secondary { + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta-form *:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); +} + +/****************************/ +/* FOOTER */ +/****************************/ + +.footer { + padding: 12.8rem 0; +} + +.grid--footer { + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} + +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.social-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.6rem; + color: #767676; + margin-top: auto; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/07-Omnifood-Desktop/img/app/app-screen-1.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png rename to 07-Omnifood-Desktop/img/app/app-screen-1.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png b/07-Omnifood-Desktop/img/app/app-screen-2.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png rename to 07-Omnifood-Desktop/img/app/app-screen-2.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png b/07-Omnifood-Desktop/img/app/app-screen-3.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png rename to 07-Omnifood-Desktop/img/app/app-screen-3.png diff --git a/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg b/07-Omnifood-Desktop/img/customers/ben.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/ben.jpg rename to 07-Omnifood-Desktop/img/customers/ben.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/07-Omnifood-Desktop/img/customers/customer-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg rename to 07-Omnifood-Desktop/img/customers/customer-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/07-Omnifood-Desktop/img/customers/customer-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg rename to 07-Omnifood-Desktop/img/customers/customer-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/07-Omnifood-Desktop/img/customers/customer-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg rename to 07-Omnifood-Desktop/img/customers/customer-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/07-Omnifood-Desktop/img/customers/customer-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg rename to 07-Omnifood-Desktop/img/customers/customer-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/07-Omnifood-Desktop/img/customers/customer-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg rename to 07-Omnifood-Desktop/img/customers/customer-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/07-Omnifood-Desktop/img/customers/customer-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg rename to 07-Omnifood-Desktop/img/customers/customer-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg b/07-Omnifood-Desktop/img/customers/dave.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/dave.jpg rename to 07-Omnifood-Desktop/img/customers/dave.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/07-Omnifood-Desktop/img/customers/hannah.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg rename to 07-Omnifood-Desktop/img/customers/hannah.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg b/07-Omnifood-Desktop/img/customers/steve.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/steve.jpg rename to 07-Omnifood-Desktop/img/customers/steve.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/eating.jpg b/07-Omnifood-Desktop/img/eating.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/eating.jpg rename to 07-Omnifood-Desktop/img/eating.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/favicon.png b/07-Omnifood-Desktop/img/favicon.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/favicon.png rename to 07-Omnifood-Desktop/img/favicon.png diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/07-Omnifood-Desktop/img/gallery/gallery-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/07-Omnifood-Desktop/img/gallery/gallery-10.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-10.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/07-Omnifood-Desktop/img/gallery/gallery-11.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-11.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/07-Omnifood-Desktop/img/gallery/gallery-12.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-12.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/07-Omnifood-Desktop/img/gallery/gallery-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/07-Omnifood-Desktop/img/gallery/gallery-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/07-Omnifood-Desktop/img/gallery/gallery-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/07-Omnifood-Desktop/img/gallery/gallery-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/07-Omnifood-Desktop/img/gallery/gallery-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/07-Omnifood-Desktop/img/gallery/gallery-7.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-7.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/07-Omnifood-Desktop/img/gallery/gallery-8.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-8.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/07-Omnifood-Desktop/img/gallery/gallery-9.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg rename to 07-Omnifood-Desktop/img/gallery/gallery-9.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/07-Omnifood-Desktop/img/hero.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/hero.png rename to 07-Omnifood-Desktop/img/hero.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png b/07-Omnifood-Desktop/img/logos/business-insider.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/business-insider.png rename to 07-Omnifood-Desktop/img/logos/business-insider.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/forbes.png b/07-Omnifood-Desktop/img/logos/forbes.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/forbes.png rename to 07-Omnifood-Desktop/img/logos/forbes.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/07-Omnifood-Desktop/img/logos/techcrunch.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png rename to 07-Omnifood-Desktop/img/logos/techcrunch.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/07-Omnifood-Desktop/img/logos/the-new-york-times.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png rename to 07-Omnifood-Desktop/img/logos/the-new-york-times.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png b/07-Omnifood-Desktop/img/logos/usa-today.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/usa-today.png rename to 07-Omnifood-Desktop/img/logos/usa-today.png diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/07-Omnifood-Desktop/img/meals/meal-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg rename to 07-Omnifood-Desktop/img/meals/meal-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/07-Omnifood-Desktop/img/meals/meal-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg rename to 07-Omnifood-Desktop/img/meals/meal-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png b/07-Omnifood-Desktop/img/omnifood-logo.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/omnifood-logo.png rename to 07-Omnifood-Desktop/img/omnifood-logo.png diff --git a/07-Omnifood-Desktop/index.html b/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..6ebfd19ce --- /dev/null +++ b/07-Omnifood-Desktop/index.html @@ -0,0 +1,654 @@ + + + + + + + + + + + + Omnifood + + +
+
+ + + + +
+ +
+
+
+

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

+

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

+ Start eating well + Learn more ↓ +
+
+ Customer photo + Customer photo + Customer photo + Customer photo + Customer photo + Customer photo +
+

+ 250,000+ delivered meals last year! +

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

As featured in

+
+ Techcrunch logo + Business Insider logo + The New York Times logo + Forbes logo + USA TODAY logo +
+
+
+ +
+
+ How it works +

+ Your daily dose of health in 3 simple steps +

+
+ +
+ +
+

01

+

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

+

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

+
+
+ iPhone app preferences selection screen +
+ +
+ iPhone app meal approving plan screen +
+
+

02

+

Approve your weekly meal plan

+

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

+
+ +
+

03

+

Receive meals at convenient time

+

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

+
+
+ iPhone app delivery screen +
+
+
+ +
+
+ Sample Meals +

+ Omnifood AI chooses from 5,000+ recipes +

+
+
+
+ Japanese Gyozas +
+
+ Vegetarian +
+

Japanese Gyozas

+
    +
  • + + 650 calories +
    • +
  • + + + NutriScore ® 74 +
    • +
  • + + 4.9 rating (537) +
    • +
+
+
+
+ Avocado Salad +
+
+ Vegan + Paleo +
+

Avocado Salad

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

Omnifood 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

+
+
+ Photo of customer Dave Bryson +
+ Inexpensive, healthy and great-tasting meals, without even + having to order manually! It feels truly magical. +
+

— Dave Bryson

+
+
+ Photo of customer Ben Hadley +
+ The AI algorithm is crazy good, it chooses the right meals for + me every time. It's amazing not to worry about food anymore! +
+

— Ben Hadley

+
+
+ Photo of customer Steve Miller +
+ Omnifood is a life saver! I just started a company, so there's + no time for cooking. I couldn't live without my daily meals now! +
+

— Steve Miller

+
+
+ Photo of customer Hannah Smith +
+ I got Omnifood for the whole family, and it frees up so much + time! Plus, everything is organic and vegan and without plastic. +
+

— Hannah Smith

+
+
+
+
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+ Photo of beautifully + arranged food +
+
+
+ +
+
+ Pricing +

+ Eating well without breaking the bank +

+
+
+
+
+

Starter

+

$399

+

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

+
+
    +
  • + 1 meal per day +
    • +
  • + Order from 11am to 9pm +
    • +
  • + Delivery is free +
    • +
  • + +
    • +
+
+ Start eating well +
+
+
+
+

Complete

+

$649

+

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

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

Never Cook again!

+

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

+
+
+ +

Local and organic

+

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

+
+
+ +

No waste

+

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

+
+
+ +

Pause anytime

+

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

+
+
+
+ +
+
+
+
+

Get your first meal for free!

+

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

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+
+
+ + +
+ + + + diff --git a/starter/08-Omnifood-Responsive/content.md b/08-Omnifood-Responsive/content.md similarity index 100% rename from starter/08-Omnifood-Responsive/content.md rename to 08-Omnifood-Responsive/content.md diff --git a/starter/08-Omnifood-Responsive/css/general.css b/08-Omnifood-Responsive/css/general.css similarity index 98% rename from starter/08-Omnifood-Responsive/css/general.css rename to 08-Omnifood-Responsive/css/general.css index 879f58295..f89cc0c80 100644 --- a/starter/08-Omnifood-Responsive/css/general.css +++ b/08-Omnifood-Responsive/css/general.css @@ -67,6 +67,7 @@ html { /* 10px / 16px = 0.625 = 62.5% */ /* Percentage of user's browser font-size setting */ font-size: 62.5%; + overflow-x: hidden; } body { @@ -74,6 +75,7 @@ body { line-height: 1; font-weight: 400; color: #555; + overflow-x: hidden; } /**************************/ @@ -249,6 +251,7 @@ body { display: flex; align-items: center; gap: 1.6rem; + line-height: 1.2; } .list-icon { diff --git a/08-Omnifood-Responsive/css/queries.css b/08-Omnifood-Responsive/css/queries.css new file mode 100644 index 000000000..7b06b2aea --- /dev/null +++ b/08-Omnifood-Responsive/css/queries.css @@ -0,0 +1,256 @@ +@media (max-width: 84em) { + .hero { + max-width: 120rem; + } + + .heading-primary { + font-size: 4.4rem; + } + + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 75em) { + html { + font-size: 56.25%; + } + + .grid { + column-gap: 4.8rem; + row-gap: 6.4rem; + } + + .heading-secondary { + font-size: 3.6rem; + } + + .heading-tertiary { + font-size: 2.4rem; + } + + .header { + padding: 0 3.2rem; + } + .main-nav-list { + gap: 3.2rem; + } + + .hero { + gap: 4.8rem; + } + + .testimonials-container { + padding: 9.6rem 3.2rem; + } +} + +@media (max-width: 59em) { + html { + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-img { + width: 60%; + } + + .hero-text-box, + .hero-img-box { + text-align: center; + } + + .delivered-meals { + justify-content: center; + margin-top: 3.2rem; + } + + .logos img { + height: 2.4rem; + } + + .step-number { + font-size: 7rem; + } + + .meal-content { + padding: 2.4rem 3.2rem 3.2rem 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + grid-template-columns: 3fr 2fr; + } + + .cta-form { + grid-template-columns: 1fr; + } + + .btn--form { + margin-top: 1.2rem; + } + + .btn-mobile-nav { + display: block; + } + + .main-nav { + background-color: rgba(255, 255, 255, 0.97); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + transform: translateX(100%); + + display: flex; + align-items: center; + justify-content: center; + transition: all 0.5s ease-in; + + /* display: none; */ + opacity: 0; + pointer-events: none; + visibility: hidden; + } + + .nav-open .main-nav { + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: translateX(0%); + } + + .nav-open .icon-mobile-nav[name="menu-outline"] { + display: none; + } + + .nav-open .icon-mobile-nav[name="close-outline"] { + display: block; + } + + .main-nav-list { + flex-direction: column; + gap: 4.8rem; + } + + .main-nav-link:link, + .main-nav-link:visited { + font-size: 3rem; + } +} + +@media (max-width: 44em) { + .grid--3-cols, + .grid--4-cols { + grid-template-columns: repeat(2, 1fr); + } + + .diets { + grid-column: 1/-1; + justify-self: center; + } + + .heading-secondary { + margin-bottom: 4.8rem; + } + + .pricing-plan { + width: 100%; + } + + .grid--footer { + grid-template-columns: repeat(6, 1fr); + } + + .logo-col, + .address-col { + grid-column: span 3; + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.2rem; + } +} + +@media (max-width: 34em) { + .grid { + row-gap: 4.8rem; + } + + .grid--2-cols, + .grid--3-cols, + .grid--4-cols { + grid-template-columns: 1fr; + } + + .btn, + .btn:link, + .btn:visited { + padding: 2.4rem 1.6rem; + } + + .section-hero { + padding: 2.4rem 0 6.4rem 0; + } + + .hero { + padding: 0 3.2rem; + } + + .hero-img { + width: 80%; + } + + .logos img { + height: 1.2rem; + } + + .step-img-box:nth-child(2) { + grid-row: 1; + } + + .step-img-box:nth-child(5) { + grid-row: 1; + } + + .step-img-box { + transform: translateY(2.4rem); + } + + .testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(4, 1fr); + } + + .cta { + grid-template-columns: 1fr; + } + + .cta-text-box { + padding: 3.2rem; + } + + .cta-img-box { + height: 32rem; + grid-row: 1; + } +} diff --git a/starter/09-Omnifood-Optimizations/css/style.css b/08-Omnifood-Responsive/css/style.css similarity index 99% rename from starter/09-Omnifood-Optimizations/css/style.css rename to 08-Omnifood-Responsive/css/style.css index cc82b4fcf..490ce1ebb 100644 --- a/starter/09-Omnifood-Optimizations/css/style.css +++ b/08-Omnifood-Responsive/css/style.css @@ -3,6 +3,7 @@ /**************************/ .header { + position: relative; display: flex; justify-content: space-between; align-items: center; @@ -11,7 +12,6 @@ /* Because we want header to be sticky later */ height: 9.6rem; padding: 0 4.8rem; - position: relative; } .logo { @@ -57,12 +57,10 @@ background-color: #cf711f; } -/* MOBILE */ .btn-mobile-nav { border: none; background: none; cursor: pointer; - display: none; } @@ -497,7 +495,6 @@ .cta { display: grid; - /* 2/3 = 66.6% + 1/3 = 33.3% */ grid-template-columns: 2fr 1fr; /* background-color: #e67e22; */ box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-1.png b/08-Omnifood-Responsive/img/app/app-screen-1.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/app/app-screen-1.png rename to 08-Omnifood-Responsive/img/app/app-screen-1.png diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-2.png b/08-Omnifood-Responsive/img/app/app-screen-2.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/app/app-screen-2.png rename to 08-Omnifood-Responsive/img/app/app-screen-2.png diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-3.png b/08-Omnifood-Responsive/img/app/app-screen-3.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/app/app-screen-3.png rename to 08-Omnifood-Responsive/img/app/app-screen-3.png diff --git a/starter/08-Omnifood-Responsive/img/customers/ben.jpg b/08-Omnifood-Responsive/img/customers/ben.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/ben.jpg rename to 08-Omnifood-Responsive/img/customers/ben.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-1.jpg b/08-Omnifood-Responsive/img/customers/customer-1.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-1.jpg rename to 08-Omnifood-Responsive/img/customers/customer-1.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-2.jpg b/08-Omnifood-Responsive/img/customers/customer-2.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-2.jpg rename to 08-Omnifood-Responsive/img/customers/customer-2.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-3.jpg b/08-Omnifood-Responsive/img/customers/customer-3.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-3.jpg rename to 08-Omnifood-Responsive/img/customers/customer-3.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-4.jpg b/08-Omnifood-Responsive/img/customers/customer-4.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-4.jpg rename to 08-Omnifood-Responsive/img/customers/customer-4.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-5.jpg b/08-Omnifood-Responsive/img/customers/customer-5.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-5.jpg rename to 08-Omnifood-Responsive/img/customers/customer-5.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-6.jpg b/08-Omnifood-Responsive/img/customers/customer-6.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/customer-6.jpg rename to 08-Omnifood-Responsive/img/customers/customer-6.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/dave.jpg b/08-Omnifood-Responsive/img/customers/dave.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/dave.jpg rename to 08-Omnifood-Responsive/img/customers/dave.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/hannah.jpg b/08-Omnifood-Responsive/img/customers/hannah.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/hannah.jpg rename to 08-Omnifood-Responsive/img/customers/hannah.jpg diff --git a/starter/08-Omnifood-Responsive/img/customers/steve.jpg b/08-Omnifood-Responsive/img/customers/steve.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/customers/steve.jpg rename to 08-Omnifood-Responsive/img/customers/steve.jpg diff --git a/starter/08-Omnifood-Responsive/img/eating.jpg b/08-Omnifood-Responsive/img/eating.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/eating.jpg rename to 08-Omnifood-Responsive/img/eating.jpg diff --git a/starter/08-Omnifood-Responsive/img/favicon.png b/08-Omnifood-Responsive/img/favicon.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/favicon.png rename to 08-Omnifood-Responsive/img/favicon.png diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg b/08-Omnifood-Responsive/img/gallery/gallery-1.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-1.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg b/08-Omnifood-Responsive/img/gallery/gallery-10.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-10.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg b/08-Omnifood-Responsive/img/gallery/gallery-11.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-11.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg b/08-Omnifood-Responsive/img/gallery/gallery-12.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-12.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg b/08-Omnifood-Responsive/img/gallery/gallery-2.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-2.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg b/08-Omnifood-Responsive/img/gallery/gallery-3.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-3.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg b/08-Omnifood-Responsive/img/gallery/gallery-4.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-4.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg b/08-Omnifood-Responsive/img/gallery/gallery-5.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-5.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg b/08-Omnifood-Responsive/img/gallery/gallery-6.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-6.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg b/08-Omnifood-Responsive/img/gallery/gallery-7.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-7.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg b/08-Omnifood-Responsive/img/gallery/gallery-8.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-8.jpg diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg b/08-Omnifood-Responsive/img/gallery/gallery-9.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg rename to 08-Omnifood-Responsive/img/gallery/gallery-9.jpg diff --git a/starter/08-Omnifood-Responsive/img/hero.png b/08-Omnifood-Responsive/img/hero.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/hero.png rename to 08-Omnifood-Responsive/img/hero.png diff --git a/starter/08-Omnifood-Responsive/img/logos/business-insider.png b/08-Omnifood-Responsive/img/logos/business-insider.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/business-insider.png rename to 08-Omnifood-Responsive/img/logos/business-insider.png diff --git a/starter/08-Omnifood-Responsive/img/logos/forbes.png b/08-Omnifood-Responsive/img/logos/forbes.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/forbes.png rename to 08-Omnifood-Responsive/img/logos/forbes.png diff --git a/starter/08-Omnifood-Responsive/img/logos/techcrunch.png b/08-Omnifood-Responsive/img/logos/techcrunch.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/techcrunch.png rename to 08-Omnifood-Responsive/img/logos/techcrunch.png diff --git a/starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png b/08-Omnifood-Responsive/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 08-Omnifood-Responsive/img/logos/the-new-york-times.png diff --git a/starter/08-Omnifood-Responsive/img/logos/usa-today.png b/08-Omnifood-Responsive/img/logos/usa-today.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/logos/usa-today.png rename to 08-Omnifood-Responsive/img/logos/usa-today.png diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-1.jpg b/08-Omnifood-Responsive/img/meals/meal-1.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/meals/meal-1.jpg rename to 08-Omnifood-Responsive/img/meals/meal-1.jpg diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-2.jpg b/08-Omnifood-Responsive/img/meals/meal-2.jpg similarity index 100% rename from starter/08-Omnifood-Responsive/img/meals/meal-2.jpg rename to 08-Omnifood-Responsive/img/meals/meal-2.jpg diff --git a/starter/08-Omnifood-Responsive/img/omnifood-logo.png b/08-Omnifood-Responsive/img/omnifood-logo.png similarity index 100% rename from starter/08-Omnifood-Responsive/img/omnifood-logo.png rename to 08-Omnifood-Responsive/img/omnifood-logo.png diff --git a/starter/09-Omnifood-Optimizations/index.html b/08-Omnifood-Responsive/index.html similarity index 99% rename from starter/09-Omnifood-Optimizations/index.html rename to 08-Omnifood-Responsive/index.html index 6d69f1bab..1499d72d7 100644 --- a/starter/09-Omnifood-Optimizations/index.html +++ b/08-Omnifood-Responsive/index.html @@ -3,8 +3,6 @@ - - @@ -33,7 +31,6 @@ -