From e7947fce2ceadd63c590729e23225271a1b0d44f Mon Sep 17 00:00:00 2001 From: Kaio Luiz Marques Date: Thu, 28 Dec 2023 20:10:26 -0300 Subject: [PATCH 1/3] Minhas atividades --- starter/02-HTML-Fundamentals/challenge2.html | 23 ++ .../{ => img}/laura-jones.jpg | Bin .../{ => img}/post-img.jpg | Bin .../{ => img}/related-1.jpg | Bin .../{ => img}/related-2.jpg | Bin .../{ => img}/related-3.jpg | Bin starter/02-HTML-Fundamentals/index.html | 108 ++++++++ starter/03-CSS-Fundamentals/challenge1.html | 44 +++ starter/03-CSS-Fundamentals/index.html | 258 ++++++++++-------- .../03-CSS-Fundamentals/style-challenge.css | 128 +++++++++ starter/03-CSS-Fundamentals/style.css | 228 ++++++++++++++++ 11 files changed, 668 insertions(+), 121 deletions(-) create mode 100644 starter/02-HTML-Fundamentals/challenge2.html rename starter/02-HTML-Fundamentals/{ => img}/laura-jones.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/post-img.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-1.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-2.jpg (100%) rename starter/02-HTML-Fundamentals/{ => img}/related-3.jpg (100%) create mode 100644 starter/02-HTML-Fundamentals/index.html create mode 100644 starter/03-CSS-Fundamentals/challenge1.html create mode 100644 starter/03-CSS-Fundamentals/style-challenge.css create mode 100644 starter/03-CSS-Fundamentals/style.css diff --git a/starter/02-HTML-Fundamentals/challenge2.html b/starter/02-HTML-Fundamentals/challenge2.html new file mode 100644 index 000000000..d11b92ef4 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge2.html @@ -0,0 +1,23 @@ +
+

Converse Chuck Taylor All Star Low Top

+ Foto do All Star +

$65.00

+

Free Shipping

+

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

+ More information → +

Product Details

+ + +
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..1e60dfedf --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,108 @@ + + + + + + The Basic Language of the Web: HTML + + + + +
+

The Chode 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 + fundamentals technologies: HTML, CSS and JavaScript. There 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. +

+

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

+

+ HTML consistes of elements that describe different types of content: + paragraphs, links, heading, 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 closung tag
    3. +
  3. The actual element
    4. +
+ +

+ You can learn more at + MDN Web Docs +

+ +

Why should you learn HTML?

+ +

+ There ar ecountless reasons for learning the fundamental language of the + web. Where are 5 of them: +

+ + + +

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

+
+ + + + diff --git a/starter/03-CSS-Fundamentals/challenge1.html b/starter/03-CSS-Fundamentals/challenge1.html new file mode 100644 index 000000000..66fbdb232 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge1.html @@ -0,0 +1,44 @@ + + + + + + Document + + + +
+

Converse Chuck Taylor All Star Low Top

+ Foto do All Star +

$65.00

+

Free Shipping

+

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

+ More information → + + + +

Product Details

+ + +
+ + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..1f4746da8 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,7 @@ + The Basic Language of the Web: HTML @@ -15,132 +16,147 @@
The Basic Language of the Web: HTML
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 +
+
+

📘 The Code Magazine

+ +
-

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

-
- - - - + + + +

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

+ + + +

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

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/style-challenge.css b/starter/03-CSS-Fundamentals/style-challenge.css new file mode 100644 index 000000000..8493e69a7 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style-challenge.css @@ -0,0 +1,128 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product { + width: 825px; + margin: 50px auto; + border: 5px solid black; + position: relative; +} + +.product::before { + content: "Sale"; + text-transform: uppercase; + letter-spacing: 5px; + display: inline-block; + font-weight: bold; + font-size: 12px; + padding: 7px 15px; + background-color: #db3a3a; + color: white; + position: absolute; + top: -20px; + left: -20px; +} + +.product-title { + font-size: 18px; + text-transform: uppercase; + background-color: #c1c1c1; + color: black; + text-align: center; + padding: 10px; +} + +.price { + font-weight: bold; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.add-cart { + text-transform: uppercase; + border: none; + background-color: black; + color: white; + cursor: pointer; + width: 100%; + padding: 5px; + border-top: 4px solid black; +} + +.add-cart:hover { + background-color: white; + color: black; +} + +.details-title { + margin-top: 20px; + margin-bottom: 20px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +.colors-list { + list-style: none; +} + +.colors-list li { + display: inline-block; + width: 15px; + height: 15px; + margin: 4px; + margin-top: 20px; +} + +.colors-list .black { + background-color: black; +} + +.colors-list .blue { + background-color: #3737aa; +} + +.colors-list .red { + background-color: #c04141; +} + +.colors-list .orange { + background-color: #e9ca33; +} + +.colors-list .green { + background-color: #58b158; +} + +.colors-list .brown { + background-color: #693535; +} diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..56ba8cb58 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,228 @@ +* { + padding: 0; + margin: 0; +} + +body { + font-family: sans-serif; + border-top: 20px solid #1098ad; + color: #444; +} + +.container { + position: relative; + width: 700px; + /*margin: auto; + margin-right: auto;*/ + margin: 0 auto; +} + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; + position: relative; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; +} + +/*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; +} + +.related { + list-style: none; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px;*/ + padding: 20px 40px; + margin-bottom: 60px; + /*height: 80px;*/ +} + +.post-header { + margin-bottom: 40px; +} + +nav { + font-size: 18px; + text-align: center; +} + +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: 0; +} + +article { + margin-bottom: 60px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + /*padding-bottom: 50px;*/ + + padding: 50px 0; + width: 500px; +} + +li { + margin-bottom: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +/*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; + text-decoration: underline orangered; +} + +a:active { + background-color: black; +} + +.post-image { + width: 100%; + height: auto; +} + +/* +#copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +}*/ + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3 + p::first-line { + /*color: red;*/ +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} From 7d6d966234ca06aa19da4c616cd28e8eafc03c3d Mon Sep 17 00:00:00 2001 From: Kaio Luiz Marques Date: Sat, 30 Dec 2023 15:47:09 -0300 Subject: [PATCH 2/3] Atualizando --- .../04-CSS-Layouts/challenge1/challenge1.html | 48 ++++++ .../challenge1/style-challenge.css | 155 +++++++++++++++++ .../04-CSS-Layouts/challenge2/challenge2.html | 53 ++++++ .../challenge2/style-challenge.css | 159 ++++++++++++++++++ starter/04-CSS-Layouts/css-grid.html | 44 ++++- starter/04-CSS-Layouts/flexbox.html | 14 +- starter/04-CSS-Layouts/index.html | 59 ++++--- starter/04-CSS-Layouts/style.css | 134 ++++++++++++++- 8 files changed, 629 insertions(+), 37 deletions(-) create mode 100644 starter/04-CSS-Layouts/challenge1/challenge1.html create mode 100644 starter/04-CSS-Layouts/challenge1/style-challenge.css create mode 100644 starter/04-CSS-Layouts/challenge2/challenge2.html create mode 100644 starter/04-CSS-Layouts/challenge2/style-challenge.css diff --git a/starter/04-CSS-Layouts/challenge1/challenge1.html b/starter/04-CSS-Layouts/challenge1/challenge1.html new file mode 100644 index 000000000..ec163475e --- /dev/null +++ b/starter/04-CSS-Layouts/challenge1/challenge1.html @@ -0,0 +1,48 @@ + + + + + + Document + + + +
+

Converse Chuck Taylor All Star Low Top

+ Foto do All Star +
+

$65.00

+

Free Shipping

+

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

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

Product Details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly paddled foothed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+ +
+ + diff --git a/starter/04-CSS-Layouts/challenge1/style-challenge.css b/starter/04-CSS-Layouts/challenge1/style-challenge.css new file mode 100644 index 000000000..b9b30e6a9 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge1/style-challenge.css @@ -0,0 +1,155 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product { + width: 825px; + margin: 50px auto; + border: 5px solid black; + position: relative; +} + +.product::before { + content: "Sale"; + text-transform: uppercase; + letter-spacing: 5px; + display: inline-block; + font-weight: bold; + font-size: 12px; + padding: 7px 15px; + background-color: #db3a3a; + color: white; + position: absolute; + top: -20px; + left: -20px; +} + +.product-title { + font-size: 18px; + text-transform: uppercase; + background-color: #c1c1c1; + color: black; + text-align: center; + padding: 10px; +} + +.price { + font-weight: bold; + float: left; + margin-right: 20px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.add-cart { + text-transform: uppercase; + border: none; + background-color: black; + color: white; + cursor: pointer; + width: 100%; + padding: 5px; + border-top: 4px solid black; +} + +.add-cart:hover { + background-color: white; + color: black; +} + +/*.details-title { + margin-top: 20px; + margin-bottom: 20px; +}*/ + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +.colors-list { + list-style: none; +} + +.colors-list li { + display: inline-block; + width: 15px; + height: 15px; + margin: 4px; + margin-top: 20px; +} + +.colors-list .black { + background-color: black; +} + +.colors-list .blue { + background-color: #3737aa; +} + +.colors-list .red { + background-color: #c04141; +} + +.colors-list .orange { + background-color: #e9ca33; +} + +.colors-list .green { + background-color: #58b158; +} + +.colors-list .brown { + background-color: #693535; +} + +.product-img { + float: left; +} + +.info-left { + float: left; + width: 280px; + padding: 5px; + padding-top: 25px; +} + +.info-right { + float: right; + width: 280px; + padding: 5px; + padding-top: 25px; +} + +.clear::after { + float: both; + content: ""; + display: block; +} diff --git a/starter/04-CSS-Layouts/challenge2/challenge2.html b/starter/04-CSS-Layouts/challenge2/challenge2.html new file mode 100644 index 000000000..4595dce49 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge2/challenge2.html @@ -0,0 +1,53 @@ + + + + + + Document + + + +
+

Converse Chuck Taylor All Star Low Top

+ +
+ Foto do All Star +
+
+

$65.00

+

Free Shipping

+
+

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

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

Product Details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly paddled foothed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+
+ +
+ + diff --git a/starter/04-CSS-Layouts/challenge2/style-challenge.css b/starter/04-CSS-Layouts/challenge2/style-challenge.css new file mode 100644 index 000000000..e5afe6096 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge2/style-challenge.css @@ -0,0 +1,159 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product { + width: 825px; + margin: 50px auto; + border: 5px solid black; + position: relative; +} + +.product::before { + content: "Sale"; + text-transform: uppercase; + letter-spacing: 5px; + display: inline-block; + font-weight: bold; + font-size: 12px; + padding: 7px 15px; + background-color: #db3a3a; + color: white; + position: absolute; + top: -20px; + left: -20px; +} + +.product-title { + font-size: 18px; + text-transform: uppercase; + background-color: #c1c1c1; + color: black; + text-align: center; + padding: 10px; +} + +.price-row { + display: flex; + justify-content: space-between; +} + +.price { + font-weight: bold; + margin-right: 20px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.add-cart { + text-transform: uppercase; + border: none; + background-color: black; + color: white; + cursor: pointer; + width: 100%; + padding: 5px; + border-top: 4px solid black; +} + +.add-cart:hover { + background-color: white; + color: black; +} + +/*.details-title { + margin-top: 20px; + margin-bottom: 20px; +}*/ + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +.colors-list { + list-style: none; +} + +.colors-row { + display: flex; + gap: 10px; + margin-top: 10px; +} + +.colors { + width: 15px; + height: 15px; +} + +.color-black { + background-color: black; +} + +.color-blue { + background-color: #3737aa; +} + +.color-red { + background-color: #c04141; +} + +.color-orange { + background-color: #e9ca33; +} + +.color-green { + background-color: #58b158; +} + +.color-brown { + background-color: #693535; +} + +.product-img { + float: left; +} + +.info-row { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 15px; +} + +.info-left { + align-self: flex-start; + margin-top: 50px; + flex: 1; +} + +.info-right { + flex: 1; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..fca68c82d 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -36,10 +36,29 @@ /* STARTER */ font-family: sans-serif; background-color: #ddd; - font-size: 40px; + font-size: 20px; margin: 40px; /* CSS GRID */ + display: grid; + display: none; + /*grid-template-columns: 1fr 1fr 1fr auto;*/ + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + + column-gap: 20px; + row-gap: 40px; + } + + .el--8 { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + + .el--2 { + /*grid-column: 1 / span 4;*/ + grid-column: 1 / -1; + grid-row: 2 / 3; } .container--2 { @@ -47,12 +66,29 @@ font-family: sans-serif; background-color: black; font-size: 40px; - margin: 100px; + margin: 40px; - width: 1000px; + width: 700px; height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + gap: 50px; + + /* Aligning tracks inside container: + distribute empty space */ + + justify-content: center; + /*justify-content: space-between;*/ + + align-content: center; + + /* Aligning items INSIDE cells: + moving items around insdie cells */ + align-items: start; + justify-items: stretch; } @@ -64,7 +100,7 @@
(4) are
(5) amazing
(6) languages
-
(7) to
+
(8) learn
diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..356a6f55b 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -36,10 +36,22 @@ /* 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; + } + + .el { + /* + DEFAULTS: + flex-grow: 0; + flex-shrink: 1; + flex-basis:auto; + */ } diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..330319661 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,32 +18,37 @@
The Basic Language of the Web: HTML
-->
-
+

📘 The Code Magazine

-
+ +
+ +

The Basic Language of the Web: HTML

+
+ Headshot of Laura Jones - Headshot of Laura Jones - -

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

+

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

+

Why should you learn HTML?

Related posts

- +

Copyright © 2027 by The Code Magazine. diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..da5939064 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -14,7 +15,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -26,7 +27,6 @@ body { padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; /* height: 80px; */ } @@ -36,7 +36,6 @@ nav { } article { - margin-bottom: 60px; } .post-header { @@ -48,10 +47,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 40px; } /* SMALLER ELEMENTS */ @@ -65,6 +61,7 @@ h1 { font-size: 26px; text-transform: uppercase; font-style: italic; + margin-bottom: 30px; } h2 { @@ -134,6 +131,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } body { @@ -197,7 +195,6 @@ nav a:link { display: block; */ margin-right: 30px; - margin-top: 10px; display: inline-block; } @@ -265,3 +262,124 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ +/* +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + padding-left: 20px; + padding-top: 10px; + 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; +} +*/ +/* 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-style: italic; + font-weight: normal; +} +/*FLEXBOX +.row { + display: flex; + gap: 75px; + margin-bottom: 60px; + align-items: flex-start; +} + +article { + flex: 1; + bottom: 0; +} + +aside { + flex: 0 0 300px; +} +*/ +/* CSS Grid Layout */ + +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + grid-column: 1/-1; +} + +article { +} + +footer { + grid-column: 1 / span 2; +} From d41afb521f06bfd5e035e84e058471087653f0ea Mon Sep 17 00:00:00 2001 From: Kaio Luiz Marques Date: Tue, 16 Jan 2024 22:19:57 -0300 Subject: [PATCH 3/3] Omnifood project --- .../04-CSS-Layouts/challenge3/challenge3.html | 53 ++ .../challenge3/style-challenge.css | 162 +++++ starter/05-Design/index.html | 223 +++++- starter/05-Design/style.css | 96 ++- starter/06-Components/01-accordion.html | 234 ++++++ starter/06-Components/02-carrousel.html | 195 +++++ starter/06-Components/03-table.html | 115 +++ starter/06-Components/04-pagination.html | 142 ++++ starter/06-Components/05-hero.html | 128 ++++ starter/06-Components/06-app-layout.html | 115 +++ .../content.md | 6 +- .../css/general.css | 147 +--- .../css/style.css | 184 +++-- .../{content => }/img/app/app-screen-1.png | Bin .../{content => }/img/app/app-screen-2.png | Bin .../{content => }/img/app/app-screen-3.png | Bin .../{content => }/img/customers/ben.jpg | Bin .../img/customers/customer-1.jpg | Bin .../img/customers/customer-2.jpg | Bin .../img/customers/customer-3.jpg | Bin .../img/customers/customer-4.jpg | Bin .../img/customers/customer-5.jpg | Bin .../img/customers/customer-6.jpg | Bin .../{content => }/img/customers/dave.jpg | Bin .../{content => }/img/customers/hannah.jpg | Bin .../{content => }/img/customers/steve.jpg | Bin .../{content => }/img/eating.jpg | Bin .../{content => }/img/favicon.png | Bin .../{content => }/img/gallery/gallery-1.jpg | Bin .../{content => }/img/gallery/gallery-10.jpg | Bin .../{content => }/img/gallery/gallery-11.jpg | Bin .../{content => }/img/gallery/gallery-12.jpg | Bin .../{content => }/img/gallery/gallery-2.jpg | Bin .../{content => }/img/gallery/gallery-3.jpg | Bin .../{content => }/img/gallery/gallery-4.jpg | Bin .../{content => }/img/gallery/gallery-5.jpg | Bin .../{content => }/img/gallery/gallery-6.jpg | Bin .../{content => }/img/gallery/gallery-7.jpg | Bin .../{content => }/img/gallery/gallery-8.jpg | Bin .../{content => }/img/gallery/gallery-9.jpg | Bin .../{content => }/img/hero.png | Bin .../img/logos/business-insider.png | Bin .../{content => }/img/logos/forbes.png | Bin .../{content => }/img/logos/techcrunch.png | Bin .../img/logos/the-new-york-times.png | Bin .../{content => }/img/logos/usa-today.png | Bin .../{content => }/img/meals/meal-1.jpg | Bin .../{content => }/img/meals/meal-2.jpg | Bin .../{content => }/img/omnifood-logo.png | Bin .../index.html | 292 ++++---- .../content.md | 14 + .../07-Omnifood-Responsive/css/general.css | 193 +++++ starter/07-Omnifood-Responsive/css/style.css | 676 ++++++++++++++++++ .../img/app/app-screen-1.png | Bin .../img/app/app-screen-2.png | Bin .../img/app/app-screen-3.png | Bin .../img/customers/ben.jpg | Bin .../img/customers/customer-1.jpg | Bin .../img/customers/customer-2.jpg | Bin .../img/customers/customer-3.jpg | Bin .../img/customers/customer-4.jpg | Bin .../img/customers/customer-5.jpg | Bin .../img/customers/customer-6.jpg | Bin .../img/customers/dave.jpg | Bin .../img/customers/hannah.jpg | Bin .../img/customers/steve.jpg | Bin .../img/eating.jpg | Bin .../img/favicon.png | Bin .../img/gallery/gallery-1.jpg | Bin .../img/gallery/gallery-10.jpg | Bin .../img/gallery/gallery-11.jpg | Bin .../img/gallery/gallery-12.jpg | Bin .../img/gallery/gallery-2.jpg | Bin .../img/gallery/gallery-3.jpg | Bin .../img/gallery/gallery-4.jpg | Bin .../img/gallery/gallery-5.jpg | Bin .../img/gallery/gallery-6.jpg | Bin .../img/gallery/gallery-7.jpg | Bin .../img/gallery/gallery-8.jpg | Bin .../img/gallery/gallery-9.jpg | Bin .../img/hero.png | Bin .../img/logos/business-insider.png | Bin .../img/logos/forbes.png | Bin .../img/logos/techcrunch.png | Bin .../img/logos/the-new-york-times.png | Bin .../img/logos/usa-today.png | Bin .../img/meals/meal-1.jpg | Bin .../img/meals/meal-2.jpg | Bin .../img/omnifood-logo.png | Bin starter/07-Omnifood-Responsive/index.html | 670 +++++++++++++++++ 90 files changed, 3291 insertions(+), 354 deletions(-) create mode 100644 starter/04-CSS-Layouts/challenge3/challenge3.html create mode 100644 starter/04-CSS-Layouts/challenge3/style-challenge.css create mode 100644 starter/06-Components/01-accordion.html create mode 100644 starter/06-Components/02-carrousel.html create mode 100644 starter/06-Components/03-table.html create mode 100644 starter/06-Components/04-pagination.html create mode 100644 starter/06-Components/05-hero.html create mode 100644 starter/06-Components/06-app-layout.html rename starter/{08-Omnifood-Responsive => 07-Omnifood-Desktop}/content.md (98%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Desktop}/css/general.css (59%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Desktop}/css/style.css (78%) rename starter/07-Omnifood-Desktop/{content => }/img/app/app-screen-1.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/app/app-screen-2.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/app/app-screen-3.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/ben.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-1.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-2.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-3.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-4.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-5.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/customer-6.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/dave.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/hannah.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/customers/steve.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/eating.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/favicon.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-1.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-10.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-11.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-12.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-2.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-3.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-4.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-5.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-6.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-7.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-8.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/gallery/gallery-9.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/hero.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/business-insider.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/forbes.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/techcrunch.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/the-new-york-times.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/logos/usa-today.png (100%) rename starter/07-Omnifood-Desktop/{content => }/img/meals/meal-1.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/meals/meal-2.jpg (100%) rename starter/07-Omnifood-Desktop/{content => }/img/omnifood-logo.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Desktop}/index.html (75%) rename starter/{07-Omnifood-Desktop/content => 07-Omnifood-Responsive}/content.md (96%) create mode 100644 starter/07-Omnifood-Responsive/css/general.css create mode 100644 starter/07-Omnifood-Responsive/css/style.css rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/app/app-screen-1.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/app/app-screen-2.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/app/app-screen-3.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/ben.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/customer-1.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/customer-2.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/customer-3.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/customer-4.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/customer-5.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/customer-6.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/dave.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/hannah.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/customers/steve.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/eating.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/favicon.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-1.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-10.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-11.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-12.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-2.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-3.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-4.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-5.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-6.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-7.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-8.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/gallery/gallery-9.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/hero.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/logos/business-insider.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/logos/forbes.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/logos/techcrunch.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/logos/the-new-york-times.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/logos/usa-today.png (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/meals/meal-1.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/meals/meal-2.jpg (100%) rename starter/{08-Omnifood-Responsive => 07-Omnifood-Responsive}/img/omnifood-logo.png (100%) create mode 100644 starter/07-Omnifood-Responsive/index.html diff --git a/starter/04-CSS-Layouts/challenge3/challenge3.html b/starter/04-CSS-Layouts/challenge3/challenge3.html new file mode 100644 index 000000000..6984b5aa7 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge3/challenge3.html @@ -0,0 +1,53 @@ + + + + + + Document + + + +

+

Converse Chuck Taylor All Star Low Top

+ + + Foto do All Star +
+
+

$65.00

+

Free Shipping

+
+

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

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

Product Details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly paddled foothed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch
    • +
+
+ + +
+ + diff --git a/starter/04-CSS-Layouts/challenge3/style-challenge.css b/starter/04-CSS-Layouts/challenge3/style-challenge.css new file mode 100644 index 000000000..dfa3b3555 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge3/style-challenge.css @@ -0,0 +1,162 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +/*.product::before { + content: "Sale"; + text-transform: uppercase; + letter-spacing: 5px; + display: inline-block; + font-weight: bold; + font-size: 12px; + padding: 7px 15px; + background-color: #db3a3a; + color: white; + position: absolute; + top: -20px; + left: -20px; +}*/ + +.price-row { + display: flex; + justify-content: space-between; +} + +.price { + font-weight: bold; + margin-right: 20px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.add-cart { + text-transform: uppercase; + border: none; + background-color: black; + color: white; + cursor: pointer; + width: 100%; + padding: 5px; + border-top: 4px solid black; + grid-column: 1 / -1; +} + +.add-cart:hover { + background-color: white; + color: black; +} + +/*.details-title { + margin-top: 20px; + margin-bottom: 20px; +}*/ + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +.colors-list { + list-style: none; +} + +.colors-row { + display: flex; + gap: 10px; + margin-top: 10px; +} + +.colors { + width: 15px; + height: 15px; +} + +.color-black { + background-color: black; +} + +.color-blue { + background-color: #3737aa; +} + +.color-red { + background-color: #c04141; +} + +.color-orange { + background-color: #e9ca33; +} + +.color-green { + background-color: #58b158; +} + +.color-brown { + background-color: #693535; +} + +.product-img { + float: left; +} + +.info-row { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 15px; +} + +.product { + width: 825px; + margin: 50px auto; + border: 5px solid black; + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + font-size: 18px; + text-transform: uppercase; + background-color: #c1c1c1; + color: black; + /*text-align: center;*/ + /*padding: 10px;*/ + + grid-column: 1 / -1; +} + +.info-left { + align-self: center; +} + +.info-right { + align-self: center; +} diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..b2faf28ca 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -4,7 +4,12 @@ - + + + Lisbon Chair Shop @@ -27,6 +32,20 @@

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 +54,21 @@

What makes our chairs special

+ + + +

Maximal comfort

@@ -45,6 +79,21 @@

What makes our chairs special

+ + + +

Ethical and sustainable

@@ -80,16 +129,76 @@

Our bestselling chairs

The Laid Back

  • + + + + Leisure and relaxing
  • + + + + Comfortable for 4h
  • + + + + Vegan leather
  • + + + + Weighs 16 kg
@@ -106,15 +215,71 @@

The Laid Back

The Worker Bee

  • + + + Work
  • + + + Comfortable for 8h
  • + + + Vegan leather
  • + + + Weighs 22 kg
@@ -131,15 +296,71 @@

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..2abaff769 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 +Grey 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,13 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5; } .grid-3-cols { @@ -39,6 +48,36 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + display: inline-block; + border-radius: 100px; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +img { + border-radius: 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -48,7 +87,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,11 +95,16 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -2px; } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.6; } img { @@ -69,17 +113,27 @@ img { /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 40px; } - .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: 12px; } .testimonial-box { @@ -89,32 +143,51 @@ img { .testimonial-box h2 { margin-bottom: 24px; + font-size: 24px; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ +.chair { + box-shadow: 0px 20px 30px 0 rgba(0, 0, 0, 0.07); + 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 +195,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + align-items: center; + font-size: 20px; } footer { margin-bottom: 48px; + font-size: 14px; + color: #495057; } diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..58ae246e7 --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,234 @@ + + + + + + Accordion Component + + + + + +
+
+

01

+

Acrodião numero 1

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic tempora + dolores ut assumenda ducimus temporibus ipsa ea delectus reiciendis + quae nobis laborum aut deleniti, facilis rerum maiores sint cumque + iste. +

+
    +
  • + Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis + esse provident +
    • +
  • Dolorem rerum sunt incidunt, tempora laborum. Inventore
    • +
  • + neque provident delectus tempora sunt a ut quae sit, autem cum + error? +
    • +
+
+
+ +
+

02

+

Um texto de exemplo para fazer acordião

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic tempora + dolores ut assumenda ducimus temporibus ipsa ea delectus reiciendis + quae nobis laborum aut deleniti, facilis rerum maiores sint cumque + iste. +

+
    +
  • + Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis + esse provident +
    • +
  • Dolorem rerum sunt incidunt, tempora laborum. Inventore
    • +
  • + neque provident delectus tempora sunt a ut quae sit, autem cum + error? +
    • +
+
+
+ +
+

03

+

Acordião numero 3

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic tempora + dolores ut assumenda ducimus temporibus ipsa ea delectus reiciendis + quae nobis laborum aut deleniti, facilis rerum maiores sint cumque + iste. +

+
    +
  • + Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis + esse provident +
    • +
  • Dolorem rerum sunt incidunt, tempora laborum. Inventore
    • +
  • + neque provident delectus tempora sunt a ut quae sit, autem cum + error? +
    • +
+
+
+
+ + + diff --git a/starter/06-Components/02-carrousel.html b/starter/06-Components/02-carrousel.html new file mode 100644 index 000000000..abe65b4de --- /dev/null +++ b/starter/06-Components/02-carrousel.html @@ -0,0 +1,195 @@ + + + + + + Accordion Component + + + + + +
+ Maria de Almeida +
+

+ "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci + soluta numquam praesentium distinctio reiciendis animi iusto tempore, + illum officia sint" +

+

Maria de Almeida

+

Senior Product Manager at EDP Comercial

+
+ + +
+ + + + +
+
+ + diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..a2c412ead --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,115 @@ + + + + + + Accordion Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ChairThe Laid BackThe Worker BeeThe Chair 4/2
Width80cm60cm220cm
Depth70cm65cm80cm
Wieght16cm22cm80cm
Wieght16cm22cm80cm
+ + diff --git a/starter/06-Components/04-pagination.html b/starter/06-Components/04-pagination.html new file mode 100644 index 000000000..574a87712 --- /dev/null +++ b/starter/06-Components/04-pagination.html @@ -0,0 +1,142 @@ + + + + + + Accordion Component + + + + + + + diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..04c97716a --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,128 @@ + + + + + + Ominifood Hero Section + + + + + + +
+ +
+
+

A healthy meal delivered to your door, every single day

+

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

+ Start eating well +
+
+
+
+
+

Some random heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, + maxime placeat. Sint sed ea similique, dicta mollitia illum facilis + eveniet adipisci doloribus, placeat accusamus aliquam repellendus + provident animi. Eos, incidunt. +

+
+
+ + diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..a412da701 --- /dev/null +++ b/starter/06-Components/06-app-layout.html @@ -0,0 +1,115 @@ + + + + + + App Layout + + + + + + + + + + + +
+ + + + + + + + + + +
+
Email View
+ + + diff --git a/starter/08-Omnifood-Responsive/content.md b/starter/07-Omnifood-Desktop/content.md similarity index 98% rename from starter/08-Omnifood-Responsive/content.md rename to starter/07-Omnifood-Desktop/content.md index 092b60a6e..e3b6aca71 100644 --- a/starter/08-Omnifood-Responsive/content.md +++ b/starter/07-Omnifood-Desktop/content.md @@ -131,14 +131,12 @@ Privacy & terms ###### -## Sections - - Logo + Navigation - Hero - Featured in - How it works - Meals (and list of diets) -- Testimonials + gallery -- Pricing + features +- Testimonials + Gallery +- Pricing + Features - CTA - Footer diff --git a/starter/08-Omnifood-Responsive/css/general.css b/starter/07-Omnifood-Desktop/css/general.css similarity index 59% rename from starter/08-Omnifood-Responsive/css/general.css rename to starter/07-Omnifood-Desktop/css/general.css index 879f58295..13696e2cb 100644 --- a/starter/08-Omnifood-Responsive/css/general.css +++ b/starter/07-Omnifood-Desktop/css/general.css @@ -1,84 +1,6 @@ -/* ---- 01 TYPOGRAPHY SYSTEM - -- Font sizes (px) -10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 - -- Font weights -Default: 400 -Medium: 500 -Semi-bold: 600 -Bold: 700 - -- Line heights -Default: 1 -Small: 1.05 -Medium: 1.2 -Paragraph default: 1.6 - -- Letter spacing --0.5px -0.75px - ---- 02 COLORS - -- Primary: #e67e22 -- Tints: -#fdf2e9 -#fae5d3 -#eb984e - -- Shades: -#cf711f -#45260a - -- Accents: -- Greys - -#888 -#767676 (lightest grey allowed on #fff) -#6f6f6f (lightest grey allowed on #fdf2e9) -#555 -#333 - ---- 05 SHADOWS - -0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); - ---- 06 BORDER-RADIUS - -Default: 9px -Medium: 11px - ---- 07 WHITESPACE - -- Spacing system (px) -2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 -*/ - -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -html { - /* font-size: 10px; */ - /* 10px / 16px = 0.625 = 62.5% */ - /* Percentage of user's browser font-size setting */ - font-size: 62.5%; -} - -body { - font-family: "Rubik", sans-serif; - line-height: 1; - font-weight: 400; - color: #555; -} - -/**************************/ -/* GENRAL REUSABLE COMPONENTS */ -/**************************/ +/* ********************** */ +/* GENERAL REUSEBLE COMPONENTS */ +/* ********************** */ .container { /* 1140px */ @@ -91,14 +13,8 @@ body { 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; } @@ -119,7 +35,7 @@ body { grid-template-columns: repeat(5, 1fr); } -.grid--center-v { +.grid--center-vertically { align-items: center; } @@ -128,8 +44,6 @@ body { .heading-tertiary { font-weight: 700; color: #333; - /* color: #45260a; */ - /* color: #343a40; */ letter-spacing: -0.5px; } @@ -158,28 +72,37 @@ body { color: #cf711f; text-transform: uppercase; margin-bottom: 1.6rem; - letter-spacing: 0.75px; } .btn, .btn:link, .btn:visited { display: inline-block; - + background-color: #e67e22; text-decoration: none; - font-size: 2rem; + font-size: 2em; font-weight: 600; padding: 1.6rem 3.2rem; border-radius: 9px; - /* Only necessary for .btn */ + transition: all 0.3s; + + /*for inputs */ border: none; cursor: pointer; font-family: inherit; +} - /* Put transition on original "state" */ - /* transition: background-color 0.3s; */ - transition: all 0.3s; +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; } .btn--full:link, @@ -191,6 +114,7 @@ body { .btn--full:hover, .btn--full:active { background-color: #cf711f; + color: #fff; } .btn--outline:link, @@ -202,28 +126,12 @@ body { .btn--outline:hover, .btn--outline:active { background-color: #fdf2e9; - - /* border: 3px solid #fff; */ - - /* Trick to add border inside */ + /*border: 3px solid #fff;*/ 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; @@ -259,12 +167,15 @@ body { *:focus { outline: none; - /* outline: 4px dotted #e67e22; */ - /* outline-offset: 8px; */ - box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); + /*outline: 4px dotted #e67e22; + outline-offset: 8px;*/ + box-shadow: 0 0 0 0.8rem rgb(230, 126, 34, 0.5); } -/* HELPER/SETTINGS CLASSES */ +/* ----------------------------- */ +/* ---HELPER/SETTINGS CLASSES--- */ +/* ----------------------------- */ + .margin-right-sm { margin-right: 1.6rem !important; } diff --git a/starter/08-Omnifood-Responsive/css/style.css b/starter/07-Omnifood-Desktop/css/style.css similarity index 78% rename from starter/08-Omnifood-Responsive/css/style.css rename to starter/07-Omnifood-Desktop/css/style.css index dde886185..5f9041913 100644 --- a/starter/08-Omnifood-Responsive/css/style.css +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -1,14 +1,73 @@ -/**************************/ -/* HEADER */ -/**************************/ +/* +----- 01 TYPOGRAPHY +- SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +Font weights: +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700; + +Line-heights: +Default: 1; +Small: 1.05 +Paragraph Default: 1.6 + +- FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +-- 02 COLORS + +- Primary: #e67e22 +- Tints: #fdf2e9 +- Shades: #cf711f +- Accents: +- Greys: +#555 +#333 + +---- 05 SHADOWS + + +---- 06 BORDER RADIUS +Default: 9px; + +---- 07 WHITE SPACE + +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; + 10px / 16px = 0.625 = 62.5% + Percantage of user's browser font-size setting + */ + font-size: 62.5%; +} +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 480; + color: #555; +} + +/* ********************** */ +/* HEADER */ +/* ********************** */ .header { display: flex; justify-content: space-between; align-items: center; background-color: #fdf2e9; - /* Because we want header to be sticky later */ + /*Because we want it to be sticky*/ height: 9.6rem; padding: 0 4.8rem; } @@ -17,10 +76,9 @@ height: 2.2rem; } -/**************************/ +/* ********************** */ /* NAVIGATION */ -/**************************/ - +/* ********************** */ .main-nav-list { list-style: none; display: flex; @@ -40,7 +98,7 @@ .main-nav-link:hover, .main-nav-link:active { - color: #cf711f; + color: #e67e22; } .main-nav-link.nav-cta:link, @@ -56,9 +114,9 @@ background-color: #cf711f; } -/**************************/ +/* ********************** */ /* HERO SECTION */ -/**************************/ +/* ********************** */ .section-hero { background-color: #fdf2e9; @@ -118,10 +176,9 @@ font-weight: 700; } -/**************************/ -/* FEATURED IN SECTION */ -/**************************/ - +/* ********************** */ +/* FEATURED IN */ +/* ********************** */ .section-featured { padding: 4.8rem 0 3.2rem 0; } @@ -147,12 +204,12 @@ opacity: 50%; } -/**************************/ -/* HOW IT WORKS SECTION */ -/**************************/ +/* ********************** */ +/* HOW IT WORKS */ +/* ********************** */ .section-how { - padding: 9.6rem 0; + padding: 9.6rem; } .step-number { @@ -169,7 +226,6 @@ .step-img-box { position: relative; - display: flex; align-items: center; justify-content: center; @@ -179,26 +235,23 @@ .step-img-box::after { content: ""; display: block; - border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + border-radius: 50%; } .step-img-box::before { width: 60%; - /* height: 60%; */ - - /* 60% of parent's width */ + /*height: 60%;*/ padding-bottom: 60%; - background-color: #fdf2e9; z-index: -2; } .step-img-box::after { - width: 45%; + width: 50%; padding-bottom: 45%; background-color: #fae5d3; z-index: -1; @@ -206,15 +259,14 @@ .step-img { width: 35%; - /* z-index: 10; */ } -/**************************/ +/* ********************** */ /* MEALS SECTION */ -/**************************/ +/* ********************** */ .section-meals { - padding: 9.6rem 0; + padding: 9.6rem; } .meal { @@ -225,7 +277,7 @@ } .meal:hover { - transform: translateY(-1.2rem); + transform: translateY(-1rem); box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); } @@ -244,6 +296,7 @@ padding: 0.4rem 0.8rem; font-size: 1.2rem; text-transform: uppercase; + background-color: #51cf66; color: #333; border-radius: 100px; font-weight: 600; @@ -252,6 +305,7 @@ .tag--vegetarian { background-color: #51cf66; } + .tag--vegan { background-color: #94d82d; } @@ -266,14 +320,14 @@ margin-bottom: 3.2rem; } -.meal-attributes { +.meal-atributes { list-style: none; display: flex; flex-direction: column; gap: 2rem; } -.meal-attribute { +.meal-atribute { font-size: 1.8rem; display: flex; align-items: center; @@ -295,9 +349,9 @@ font-size: 1.8rem; } -/**************************/ -/* TESTIMONIALS SECTION */ -/**************************/ +/* ********************** */ +/* TESTIMONIALS */ +/* ********************** */ .section-testimonials { background-color: #fdf2e9; @@ -355,34 +409,33 @@ transform: scale(1.1); } -/**************************/ -/* MEALS SECTION */ -/**************************/ +/* ********************** */ +/* PRICING */ +/* ********************** */ .section-pricing { padding: 9.6rem 0; } -.princing-plan { +.pricing-plan { border-radius: 11px; - + padding: 4.6rem; width: 75%; } -.princing-plan--starter { +.pricing-plan--starter { justify-self: end; border: 2px solid #fdf2e9; - padding: 4.6rem; } -.princing-plan--complete { - background-color: #fdf2e9; +.pricing-plan--complete { padding: 4.8rem; + background-color: #fdf2e9; position: relative; overflow: hidden; } -.princing-plan--complete::after { +.pricing-plan--complete::before { content: "Best value"; position: absolute; top: 6%; @@ -392,7 +445,7 @@ font-size: 1.4rem; font-weight: 700; color: #333; - background-color: #ffd43b; + background: #ffd43b; padding: 0.8rem 8rem; transform: rotate(45deg); } @@ -410,14 +463,12 @@ letter-spacing: 0.75; margin-bottom: 3.2rem; } - .plan-price { font-size: 6.2rem; - font-weight: 600; + font-weight: bold; color: #333; margin-bottom: 1.6rem; } - .plan-price span { font-size: 3rem; font-weight: 500; @@ -430,7 +481,7 @@ color: #6f6f6f; } -.plan-sing-up { +.plan-sign-up { text-align: center; margin-top: 4.8rem; } @@ -463,25 +514,20 @@ 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); + background-color: #e67e22; + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.015); border-radius: 11px; - background-image: linear-gradient(to right bottom, #eb984e, #e67e22); overflow: hidden; } @@ -492,7 +538,6 @@ } .cta .heading-secondary { - /* color: #45260a; */ color: inherit; margin-bottom: 3.2rem; } @@ -506,8 +551,8 @@ .cta-img-box { background-image: linear-gradient( to right bottom, - rgba(235, 151, 78, 0.35), - rgba(230, 125, 34, 0.35) + rgba(235, 152, 78, 0.3), + rgba(230, 126, 34, 0.3) ), url("../img/eating.jpg"); background-size: cover; @@ -547,12 +592,14 @@ .cta *:focus { outline: none; - box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); + /*outline: 4px dotted #e67e22; + outline-offset: 8px;*/ + box-shadow: 0 0 0 0.8rem rgb(253, 242, 233, 0.5); } -/**************************/ +/* ********************** */ /* FOOTER */ -/**************************/ +/* ********************** */ .footer { padding: 12.8rem 0; @@ -560,6 +607,7 @@ } .grid--footer { + display: grid; grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; } @@ -574,7 +622,7 @@ } .social-links { - list-style: none; + list-style-type: none; display: flex; gap: 2.4rem; } @@ -598,7 +646,7 @@ } .contacts { - font-style: normal; + font-size: normal; font-size: 1.6rem; line-height: 1.6; } @@ -608,7 +656,7 @@ } .footer-nav { - list-style: none; + list-style-type: none; display: flex; flex-direction: column; gap: 2.4rem; diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/starter/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 starter/07-Omnifood-Desktop/img/app/app-screen-1.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png b/starter/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 starter/07-Omnifood-Desktop/img/app/app-screen-2.png diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png b/starter/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 starter/07-Omnifood-Desktop/img/app/app-screen-3.png diff --git a/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg b/starter/07-Omnifood-Desktop/img/customers/ben.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/ben.jpg rename to starter/07-Omnifood-Desktop/img/customers/ben.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/starter/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 starter/07-Omnifood-Desktop/img/customers/customer-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/starter/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 starter/07-Omnifood-Desktop/img/customers/customer-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/starter/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 starter/07-Omnifood-Desktop/img/customers/customer-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/starter/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 starter/07-Omnifood-Desktop/img/customers/customer-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/starter/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 starter/07-Omnifood-Desktop/img/customers/customer-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/starter/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 starter/07-Omnifood-Desktop/img/customers/customer-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg b/starter/07-Omnifood-Desktop/img/customers/dave.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/dave.jpg rename to starter/07-Omnifood-Desktop/img/customers/dave.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/starter/07-Omnifood-Desktop/img/customers/hannah.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg rename to starter/07-Omnifood-Desktop/img/customers/hannah.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg b/starter/07-Omnifood-Desktop/img/customers/steve.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/steve.jpg rename to starter/07-Omnifood-Desktop/img/customers/steve.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/eating.jpg b/starter/07-Omnifood-Desktop/img/eating.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/eating.jpg rename to starter/07-Omnifood-Desktop/img/eating.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/favicon.png b/starter/07-Omnifood-Desktop/img/favicon.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/favicon.png rename to starter/07-Omnifood-Desktop/img/favicon.png diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/starter/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 starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/starter/07-Omnifood-Desktop/img/hero.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/hero.png rename to starter/07-Omnifood-Desktop/img/hero.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png b/starter/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 starter/07-Omnifood-Desktop/img/logos/business-insider.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/forbes.png b/starter/07-Omnifood-Desktop/img/logos/forbes.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/forbes.png rename to starter/07-Omnifood-Desktop/img/logos/forbes.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/starter/07-Omnifood-Desktop/img/logos/techcrunch.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png rename to starter/07-Omnifood-Desktop/img/logos/techcrunch.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/starter/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 starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png b/starter/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 starter/07-Omnifood-Desktop/img/logos/usa-today.png diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/starter/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 starter/07-Omnifood-Desktop/img/meals/meal-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/starter/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 starter/07-Omnifood-Desktop/img/meals/meal-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png b/starter/07-Omnifood-Desktop/img/omnifood-logo.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/omnifood-logo.png rename to starter/07-Omnifood-Desktop/img/omnifood-logo.png diff --git a/starter/08-Omnifood-Responsive/index.html b/starter/07-Omnifood-Desktop/index.html similarity index 75% rename from starter/08-Omnifood-Responsive/index.html rename to starter/07-Omnifood-Desktop/index.html index 7cf37a8b0..f8f610225 100644 --- a/starter/08-Omnifood-Responsive/index.html +++ b/starter/07-Omnifood-Desktop/index.html @@ -2,27 +2,25 @@ - - - + + + + - - - + - Omnifood @@ -32,15 +30,14 @@
-
@@ -67,7 +64,8 @@

Customer photo

- 250,000+ meals delivered last year! + We have delivered 250,000+ meals delivered last + year!

@@ -85,17 +83,11 @@

As featured in

- Techcrunch logo - Business Insider logo - The New York Times logo - Forbes logo - USA Today logo + Techcrunch + Techcrunch + Techcrunch + Techcrunch + Techcrunch
@@ -106,67 +98,64 @@

As featured in

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

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

-
+ +
+ iPhone app meal approving plan +
+
+

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

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 +
@@ -178,39 +167,37 @@

Omnifood AI chooses from 5,000+ recipes

-
Japanese Gyozas
Vegetarian

Japanese Gyozas

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

Paleo

Avocado Salad

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

Works with any diet:

+

Works with any diet

  • Vegetarian
    • +
  • + + Vegetarian +
  • Vegan @@ -295,7 +286,6 @@

    Works with any diet:

    Testimonials

    Once you try it, you can't go back

    -

    Once you try it, you can't go back

    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

    +

    — Hannah Smit

    -
    Photo of beautifully + alt= -
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    Photo of beautifully + alt=
    @@ -448,21 +436,21 @@

    -
    -
    +
    +

    Starter

    $399

    -

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

    +

    per month. That's just $13 per meal

    • - 1 meal per day + 1 meal per day
    • - Order from 11am to 9pm + Order from 11am and 9pm
    • @@ -470,23 +458,26 @@

    • +
    -
    - Start eating well +
    -
    +

    Complete

    $649

    -

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

    +

    per month. That's just $11 per meal

    • - 2 meals per day + 2 meals per day
    • @@ -498,18 +489,20 @@

    • - Get access to latest recipes + Get access to later recipes
    -
    - Start eating well +
    -
    +
    @@ -549,12 +542,11 @@

    -
    -

    Get your first meal for free!

    +

    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 @@ -571,9 +563,8 @@

    Get your first meal for free!

    required />
    -
    - +

    Get your first meal for free!

    required />
    -
    - +
    - - -

    Get your first meal for free!

- Copyright © 2027 by Omnifood, Inc. All rights reserved. + Copyright © 2024 by Omnifood, Inc. All rights reserved.

-
-

Contact us

-
+
+

Contact Us

+

- 623 Harrison St., 2nd Floor, San Francisco, CA 94107 + Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107

415-201-6370

Get your first meal for free!

>hello@omnifood.com

-
+
- -