diff --git a/final/04-CSS-Layouts/index.html b/final/04-CSS-Layouts/index.html index 33a6af10c..1ac240ef2 100644 --- a/final/04-CSS-Layouts/index.html +++ b/final/04-CSS-Layouts/index.html @@ -1,14 +1,15 @@ - - - - The Basic Language of the Web: HTML - + + + - - -
-
-

📘 The Code Magazine

- - - - +
+
+

📘 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

- -
- Headshot of Laura Jones - -

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

+

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

+ +

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

+ +

What is HTML?

+

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

+

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

+

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

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

- - - - - - -
- - + +
  • + Lightning +
    + The Unknown Powers of CSS +

    By Jim Dillon

    +
    +
    • +
  • + JavaScript code on a screen +
    + Why JavaScript is Awesome +

    By Matilda

    +
    +
    • + + + + + + + + \ No newline at end of file diff --git a/starter/01-TEST/index.html b/starter/01-TEST/index.html new file mode 100644 index 000000000..02a0bc290 --- /dev/null +++ b/starter/01-TEST/index.html @@ -0,0 +1,16 @@ + + + + + + + + My first webpage + + + +

    Hello, world!

    +

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

    + + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..a225a4982 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,17 @@ + + + + + + + + BLOG + + + +

    BLOG

    + Home + + + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/challenge2/index.html b/starter/02-HTML-Fundamentals/challenge2/index.html new file mode 100644 index 000000000..e0b730f26 --- /dev/null +++ b/starter/02-HTML-Fundamentals/challenge2/index.html @@ -0,0 +1,39 @@ + + + + + + + + Document + + + +
    +

    Converse Chuck Taylor All Star Low Top

    + Converse Shoes + +

    $65.00

    +

    Free shipping

    +

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

    + + More information → + +

    Product details

    + + +
    + + + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/challenges.jpg b/starter/02-HTML-Fundamentals/img/challenges.jpg similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to starter/02-HTML-Fundamentals/img/challenges.jpg 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..787fc33bb --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,121 @@ + + + + + + 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:

    + + + +

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

    + +
    + + + + + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge1/index.html b/starter/03-CSS-Fundamentals/challenge1/index.html new file mode 100644 index 000000000..0870d75d8 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge1/index.html @@ -0,0 +1,40 @@ + + + + + + + + + Document + + + +
    +

    Converse Chuck Taylor All Star Low Top

    + Converse Shoes + +

    $65.00

    +

    Free shipping

    +

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

    + + More information → + +

    Product details

    + + +
    + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge1/style.css b/starter/03-CSS-Fundamentals/challenge1/style.css new file mode 100644 index 000000000..251c00006 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge1/style.css @@ -0,0 +1,65 @@ +/* *, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} */ + +body { + font-family: sans-serif; + line-height: 1.4; +} + +h2, +h3 { + text-transform: uppercase; +} + +article { + border: 5px solid black; +} + +article h2 { + text-align: center; + background-color: rgba(194, 194, 194, 0.1); +} + +p>strong { + font-size: 22px; +} + +.article-shipping { + text-transform: uppercase; + color: #929292; + font-size: small; +} + +ul { + list-style-type: square; +} + +.article-info:link, +.article-info:visited { + color: black; +} + +.article-info:hover, +.article-info:active { + text-decoration: none; +} + +button { + background-color: black; + color: #fff; + border: none; + padding: 5px 10px 5px 10px; + text-transform: uppercase; + font-size: 20px; + cursor: pointer; +} + +button:hover { + background-color: #fff; + color: black; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge2/index.html b/starter/03-CSS-Fundamentals/challenge2/index.html new file mode 100644 index 000000000..17f2b9d72 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge2/index.html @@ -0,0 +1,40 @@ + + + + + + + + + Challenge #2 + + + +
    +
    +

    Converse Chuck Taylor All Star Low Top

    + Chuck Taylor All Star Shoe + +

    $65.00

    +

    Free shipping

    +

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

    +
    + More information → +
    +

    Product details

    + + + +
    + +
    + + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge2/style.css b/starter/03-CSS-Fundamentals/challenge2/style.css new file mode 100644 index 000000000..91569e768 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge2/style.css @@ -0,0 +1,92 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; +} + +/* PRODUCT */ +.product { + border: 4px solid black; + +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.container-more-info { + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge3/index.html b/starter/03-CSS-Fundamentals/challenge3/index.html new file mode 100644 index 000000000..3264df8d0 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge3/index.html @@ -0,0 +1,48 @@ + + + + + + + + + Challenge #2 + + + +
    +
    +

    Converse Chuck Taylor All Star Low Top

    + Chuck Taylor All Star Shoe + +

    $65.00

    +

    Free shipping

    +

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

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

    Product details

    + + + +
    + +
    + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/challenge3/style.css b/starter/03-CSS-Fundamentals/challenge3/style.css new file mode 100644 index 000000000..b73dca4ea --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge3/style.css @@ -0,0 +1,143 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; + position: relative; +} + +.container::before { + content: "sale"; + color: #fff; + background-color: #de1b1b; + display: inline-block; + font-weight: bold; + padding: 7px 15px; + letter-spacing: 2px; + text-align: center; + text-transform: uppercase; + position: absolute; + left: -40px; + top: -15px; +} + +.colors { + margin-bottom: 20px; +} + +.color { + display: inline-block; + height: 30px; + width: 30px; + margin-right: 10px; +} + +.color-black { + background-color: #000; +} + +.color-blue { + background-color: #0000ff; +} + +.color-red { + background-color: #ff0000; +} + +.color-yellow { + background-color: #ffff00; +} + +.color-green { + background-color: #008000; +} + +.color-brown { + background-color: #a52a2ab6; + margin-right: 0; +} + +/* PRODUCT */ +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.container-more-info { + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..afbbcd4ad 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -1,12 +1,14 @@ - - - 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 + Headshot of Laura Jones + +

    Posted by Laura Jones on Monday, June 21st 2027

    + + HTML code on a screen + +

    @@ -81,11 +77,7 @@

    What is HTML?

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

    Why should you learn HTML?

    @@ -112,35 +104,32 @@

    Why should you learn HTML?

    -
    Copyright © 2027 by The Code Magazine.
    - - +
    +

    + Copyright © 2027 by The Code Magazine. +

    +
    +
    + + + + \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..595f4a9a0 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,242 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ + +body { + font-family: sans-serif; + color: #444; + position: relative; +} + +.container { + width: 800px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +nav { + font-size: 18px; + text-align: center; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 0; + width: 500px; +} + +/* SMALLER ELEMENTS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin: 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; +} + +.related { + list-style: none; +} + +/* pseudo class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* +li:nth-child(2) { + 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; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; + padding: 20px; + display: block; */ + display: inline-block; + margin-right: 30px; + margin-top: 10px; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h3+p::first-line { + /* color: red; */ +} + +h2 { + position: relative; +} + +h2::after { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green; +} */ \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge1/index.html b/starter/04-CSS-Layouts/challenge1/index.html new file mode 100644 index 000000000..defd4e44e --- /dev/null +++ b/starter/04-CSS-Layouts/challenge1/index.html @@ -0,0 +1,51 @@ + + + + + + + + + Challenge #2 + + + +
    +
    +

    Converse Chuck Taylor All Star Low Top

    +
    + Chuck Taylor All Star Shoe +
    +

    $65.00

    +

    Free shipping

    +

    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
      • +
    +
    +
    + +
    + +
    + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge1/style.css b/starter/04-CSS-Layouts/challenge1/style.css new file mode 100644 index 000000000..47ecd6bc2 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge1/style.css @@ -0,0 +1,180 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; + position: relative; +} + +.container::before { + content: "sale"; + color: #fff; + background-color: #de1b1b; + display: inline-block; + font-weight: bold; + padding: 7px 15px; + letter-spacing: 2px; + text-align: center; + text-transform: uppercase; + position: absolute; + left: -40px; + top: -15px; +} + +.colors { + margin-bottom: 20px; +} + +.color { + display: inline-block; + height: 25px; + width: 25px; + margin-right: 10px; +} + +.color-black { + background-color: #000; +} + +.color-blue { + background-color: #0000ff; +} + +.color-red { + background-color: #ff0000; +} + +.color-yellow { + background-color: #ffff00; +} + +.color-green { + background-color: #008000; +} + +.color-brown { + background-color: #a52a2ab6; + margin-right: 0; +} + +/* PRODUCT */ +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; + float: left; +} + +.shipping-tag { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + float: right; + margin-top: 8px; +} + +.container-more-info { + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-top: 20px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} + +/* FlOAT LAYOUT */ +.product-img { + float: left; + margin-right: 40px; +} + +.product-details { + width: 247px; + float: left; + margin-right: 40px; + margin-top: 20px; +} + +.shipping-description { + clear: both; + display: inline-block; +} + +.details-container { + width: 240px; + float: left; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +/* .product-container { + background-color: pink; +} */ \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge2/index.html b/starter/04-CSS-Layouts/challenge2/index.html new file mode 100644 index 000000000..0da15d5be --- /dev/null +++ b/starter/04-CSS-Layouts/challenge2/index.html @@ -0,0 +1,53 @@ + + + + + + + + + Challenge #2 + + + +
    +
    +

    Converse Chuck Taylor All Star Low Top

    +
    + Chuck Taylor All Star Shoe +
    +
    +

    $65.00

    +

    Free shipping

    +
    +

    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
      • +
    +
    +
    + +
    + +
    + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge2/style.css b/starter/04-CSS-Layouts/challenge2/style.css new file mode 100644 index 000000000..99667aef4 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge2/style.css @@ -0,0 +1,199 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.7; +} + +/* CONTAINER */ +.container { + width: 825px; + margin: 50px auto; + position: relative; +} + +.container::before { + content: "sale"; + color: #fff; + background-color: #de1b1b; + display: inline-block; + font-weight: bold; + padding: 7px 15px; + letter-spacing: 2px; + text-align: center; + text-transform: uppercase; + position: absolute; + left: -40px; + top: -15px; +} + +.product-colors { + display: flex; + gap: 10px; + margin-bottom: 25px; +} + +.color { + height: 25px; + width: 25px; +} + +.color-black { + background-color: #000; +} + +.color-blue { + background-color: #0000ff; +} + +.color-red { + background-color: #ff0000; +} + +.color-yellow { + background-color: #ffff00; +} + +.color-green { + background-color: #008000; +} + +.color-brown { + background-color: #a52a2ab6; + margin-right: 0; +} + +/* PRODUCT */ +.product { + border: 4px solid black; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price-shipping { + display: flex; + align-items: center; + justify-content: space-between; + margin: 20px 0 10px; +} + +.price { + font-size: 24px; +} + +.shipping-tag { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + /* margin-top: 8px; */ +} + +.container-more-info { + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 10px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + border-top: 4px solid black; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 20px; + width: 100%; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} + +/* FlOAT LAYOUT */ +/* .product-img { + float: left; + margin-right: 40px; +} + +.product-details { + width: 247px; + float: left; + margin-right: 40px; + margin-top: 20px; +} + +.shipping-description { + clear: both; + display: inline-block; +} + +.details-container { + width: 240px; + float: left; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} */ + +/* FLEXBOX LAYOUT */ +.product-container { + display: flex; + gap: 40px; + /* background-color: red; */ +} + +.product-details { + flex: 1; + /* background-color: pink; */ +} + +.details-container { + flex: 1; + margin: 20px 0 25px; + /* background-color: green; */ +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge3/index.html b/starter/04-CSS-Layouts/challenge3/index.html new file mode 100644 index 000000000..cce867852 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge3/index.html @@ -0,0 +1,52 @@ + + + + + + + + + Challenge #2 + + + +
    +

    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.
      • +
    +
    + +
    + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/challenge3/style.css b/starter/04-CSS-Layouts/challenge3/style.css new file mode 100644 index 000000000..6afbd3fa8 --- /dev/null +++ b/starter/04-CSS-Layouts/challenge3/style.css @@ -0,0 +1,171 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +.product-img {} + +/* PRODUCT */ +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + position: relative; + + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; + grid-column: 1 / -1; +} + +/* PRODUCT INFORMATION */ +.product-info { + /* (825 - 8 - 250 - 80) / 2 */ + /* width: 243px; */ + flex: 1; + margin-top: 20px; +} + +.product-price { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.sale { + background-color: #ec2f2f; + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + padding: 7px 15px; + display: inline-block; + position: absolute; + top: -17px; + left: -38px; + + /* width: 40px; + text-align: center; */ +} + +.product-description { + margin-bottom: 10px; +} + +.more-info:link, +.more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.product-colors { + display: flex; + gap: 10px; +} + +.color { + background-color: #000; + height: 22px; + width: 22px; +} + +.color-blue { + background-color: #2f6ee2; +} + +.color-red { + background-color: #ec2f2f; +} + +.color-yellow { + background-color: #f0bf1e; +} + +.color-green { + background-color: #90cc20; +} + +.color-brown { + background-color: #885214; +} + +/* PRODUCT DETAILS */ +.product-details { + /* width: 243px; */ + margin-top: 20px; + flex: 1; +} + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; + border-top: 4px solid black; + grid-column: 1 / -1; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..70235acf1 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -1,80 +1,138 @@ - - - - - CSS Grid - - - -
    -
    (1) HTML
    -
    (2) and
    -
    (3) CSS
    -
    (4) are
    -
    (5) amazing
    -
    (6) languages
    -
    (7) to
    -
    (8) learn
    -
    - -
    -
    (1)
    -
    (3)
    -
    (4)
    -
    (5)
    -
    (6)
    -
    (7)
    -
    - - + + + + + + CSS Grid + + + + +
    +
    (1) HTML
    +
    (2) and
    +
    (3) CSS
    +
    (4) are
    +
    (5) amazing
    +
    (6) languages
    + +
    (8) learn
    +
    + +
    +
    (1)
    +
    (3)
    +
    (4)
    +
    (5)
    +
    (6)
    +
    (7)
    +
    + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/flexbox backup/index.html b/starter/04-CSS-Layouts/flexbox backup/index.html new file mode 100644 index 000000000..54b14a3d9 --- /dev/null +++ b/starter/04-CSS-Layouts/flexbox backup/index.html @@ -0,0 +1,140 @@ + + + + + + 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. +

    +
    +
    + + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/flexbox backup/style.css b/starter/04-CSS-Layouts/flexbox backup/style.css new file mode 100644 index 000000000..49b047d36 --- /dev/null +++ b/starter/04-CSS-Layouts/flexbox backup/style.css @@ -0,0 +1,297 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +/* PAGE SECTIONS */ + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 25px; +} + +/* SMALLER ELEMENTS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; + margin-left: 0; +} + +/* pseudo class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + display: inline-block; + margin-right: 30px; + /* margin-top: 10px; */ +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2 { + position: relative; +} + +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; +} + +/* FLOATS */ +/* .author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +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; + align-items: flex-start; + gap: 75px; + margin-bottom: 60px; +} + +article { + /* flex: 0 0 825px; */ + flex: 1; + margin-bottom: 0; +} + +aside { + flex: 0 0 300px; +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..b681a6485 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -1,58 +1,99 @@ - - - - - Flexbox - - - -
    -
    HTML
    -
    and
    -
    CSS
    -
    are
    -
    amazing
    -
    languages
    -
    to
    -
    learn
    -
    - - + + + + + + Flexbox + + + + +
    +
    HTML
    +
    and
    +
    CSS
    +
    are
    +
    amazing
    + +
    + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/float backup/index.html b/starter/04-CSS-Layouts/float backup/index.html new file mode 100644 index 000000000..dea809426 --- /dev/null +++ b/starter/04-CSS-Layouts/float backup/index.html @@ -0,0 +1,136 @@ + + + + + + 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. +

    +
    + +
    + + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/float backup/style.css b/starter/04-CSS-Layouts/float backup/style.css new file mode 100644 index 000000000..a58ef1b98 --- /dev/null +++ b/starter/04-CSS-Layouts/float backup/style.css @@ -0,0 +1,239 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + + box-sizing: inherit; +} + +/* PAGE SECTIONS */ + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #444; + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + margin-bottom: 60px; +} + +nav { + font-size: 18px; +} + +article { + margin-bottom: 60px; +} + +.post-header { + margin-bottom: 40px; +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + padding: 50px 25px; +} + +/* SMALLER ELEMENTS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin: 10px; +} + +li:last-child { + margin-bottom: 0; +} + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +.related { + list-style: none; + margin-left: 0; +} + +/* pseudo class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + display: inline-block; + margin-right: 30px; + /* margin-top: 10px; */ +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + position: absolute; + bottom: 50px; + right: 50px; +} + +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +h2 { + position: relative; +} + +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; +} + +/* FLOATS */ +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} \ No newline at end of file diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..32c5c1be0 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -1,14 +1,14 @@ - - - - The Basic Language of the Web: HTML - + + + The Basic Language of the Web: HTML + + - - -
    -
    -

    📘 The Code Magazine

    - - +
    +
    +

    📘 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

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

    -
    - -
    +
    + +
  • + Lightning +
    + The Unknown Powers of CSS

    By Jim Dillon

    -
    • -
  • - JavaScript code on a screen - Why JavaScript is Awesome +
    • + +
  • + JavaScript code on a screen +
    + Why JavaScript is Awesome

    By Matilda

    -
    • - - - - - - - + + + + + + + + + + + \ No newline at end of file diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..da46cdf9d 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -1,60 +1,57 @@ -* { - /* border-top: 10px solid #1098ad; */ +*, +*::after, +*::before { margin: 0; padding: 0; + + box-sizing: inherit; } /* PAGE SECTIONS */ + +html { + box-sizing: border-box; +} + body { - color: #444; font-family: sans-serif; - + color: #444; border-top: 10px solid #1098ad; position: relative; } .container { - width: 800px; - /* margin-left: auto; - margin-right: auto; */ + width: 1200px; margin: 0 auto; } .main-header { background-color: #f7f7f7; - /* padding: 20px; - padding-left: 40px; - padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; - /* height: 80px; */ + /* margin-bottom: 60px; */ } nav { font-size: 18px; - /* text-align: center; */ } article { - margin-bottom: 60px; + /* margin-bottom: 60px; */ } .post-header { margin-bottom: 40px; - /* position: relative; */ } aside { background-color: #f7f7f7; border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ - padding: 50px 0; - width: 500px; + padding: 50px 25px; } /* SMALLER ELEMENTS */ + h1, h2, h3 { @@ -82,6 +79,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -98,22 +96,13 @@ ol { li { font-size: 20px; - margin-bottom: 10px; - /* display: inline; */ + margin: 10px; } li:last-child { margin-bottom: 0; } -/* footer p { - font-size: 16px; -} */ - -/* article header p { - font-style: italic; -} */ - #author { font-style: italic; font-size: 18px; @@ -128,22 +117,12 @@ li:last-child { font-weight: bold; } -/* ul { - list-style: none; -} */ - .related { list-style: none; + margin-left: 0; } -body { - /* background-color: orangered; */ -} - -/* .first-li { - font-weight: bold; -} */ - +/* pseudo class */ li:first-child { font-weight: bold; } @@ -152,15 +131,6 @@ 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; @@ -168,7 +138,6 @@ a:link { } a:visited { - /* color: #777; */ color: #1098ad; } @@ -182,7 +151,6 @@ a:active { background-color: black; font-style: italic; } -/* LVHA */ .post-img { width: 100%; @@ -190,15 +158,9 @@ a:active { } nav a:link { - /* background-color: orangered; - margin: 20px; - padding: 20px; - - display: block; */ - - margin-right: 30px; - margin-top: 10px; display: inline-block; + margin-right: 30px; + /* margin-top: 10px; */ } nav a:link:last-child { @@ -209,10 +171,7 @@ button { font-size: 22px; padding: 20px; cursor: pointer; - position: absolute; - /* top: 50px; - left: 50px; */ bottom: 50px; right: 50px; } @@ -222,16 +181,11 @@ h1::first-letter { margin-right: 5px; } -h3 + p::first-line { - /* color: red; */ -} - h2 { - /* background-color: orange; */ position: relative; } -h2::before { +h2::after { content: "TOP"; background-color: #ffe70e; color: #444; @@ -244,24 +198,122 @@ h2::before { right: -25px; } -/* Resolving conflicts */ -/* #copyright { - color: red; +/* FLOATS */ +/* .author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +.clearfix::after { + content: ""; + display: block; + clear: both; +} + +h1 { + float: left; +} + +nav { + float: right; } -.copyright { - color: blue; +article { + width: 825px; + float: left; } -.text { - color: yellow; +aside { + width: 300px; + float: right; } -footer p { - color: green !important; +footer { + clear: both; } */ -/* nav a:link, -nav p { - font-size: 18px; +/* FLEXBOX LAYOUT */ + +.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; +} + +/* WE'LL DISABLE THIS PART IN ORDER TO USE GRID LAYOUT */ + +/* .row { + display: flex; + align-items: flex-start; + gap: 75px; + margin-bottom: 60px; +} + +article { + flex: 1; + margin-bottom: 0; +} + +aside { + flex: 0 0 300px; } */ + +/* CSS GRID LAYOUT */ +.container { + display: grid; + grid-template-columns: 1fr 300px; + column-gap: 75px; + row-gap: 60px; + align-items: start; +} + +.main-header { + grid-column: 1 / -1; +} + +article {} + +aside {} + +footer { + grid-column: 1 / -1; +} \ No newline at end of file diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..e70c49118 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -1,162 +1,242 @@ - - - - - - Lisbon Chair Shop - - -
    -
    -
    -

    We design and build better chairs, for a better life

    -

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

    +
    +
    +

    We design and build better chairs, for a better life

    +

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

    + Shop chairs +
    + Photo +
    + +
    +

    What makes our chairs special

    +
    +
    + + + +

    Science meets design

    +

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

    - Shop chairs
    - Photo -
    -
    -

    What makes our chairs special

    -
    -
    -

    Science meets design

    -

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

    -
    - -
    -

    - Maximal comfort -

    -

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

    -
    +
    + + + +

    + Maximal comfort +

    +

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

    +
    -
    -

    - Ethical and sustainable -

    -

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

    -
    +
    + + + +

    + Ethical and sustainable +

    +

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

    -
    +
    + -
    -
    - People sitting on chairs -
    -

    "We couldn't live without these chairs anymore"

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

    — Mary and Sarah Johnson

    -
    +
    +
    + People sitting on chairs +
    +

    "We couldn't live without these chairs anymore"

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

    — Mary and Sarah Johnson

    -
    +
    +
    -
    -

    Our bestselling chairs

    -
    -
    - Chair -
    -

    The Laid Back

    -
      -
    • - - Leisure and relaxing -
      • -
    • - Comfortable for 4h -
      • -
    • - Vegan leather -
      • -
    • - Weighs 16 kg -
      • -
    -
    - 250€ - Add to cart -
    +
    +

    Our bestselling chairs

    +
    +
    + Chair +
    +

    The Laid Back

    +
      +
    • + + + + + Leisure and relaxing +
      • +
    • + + + + Comfortable for 4h +
      • +
    • + + + + Vegan leather +
      • +
    • + + + + Weighs 16 kg +
      • +
    +
    + 250€ + Add to cart
    -
    +
    +
    -
    - Chair -
    -

    The Worker Bee

    -
      -
    • - Work -
      • -
    • - Comfortable for 8h -
      • -
    • - Vegan leather -
      • -
    • - Weighs 22 kg -
      • -
    -
    - 525€ - Add to cart -
    +
    + Chair +
    +

    The Worker Bee

    +
      +
    • + + + + Work +
      • +
    • + + + + Comfortable for 8h +
      • +
    • + + + + Vegan leather +
      • +
    • + + + + Weighs 22 kg +
      • +
    +
    + 525€ + Add to cart
    -
    +
    +
    -
    - Chair -
    -

    The Chair 4/2

    -
      -
    • - Leisure and relaxing -
      • -
    • - Comfortable all day! -
      • -
    • - Organic cotton -
      • -
    • - Weighs 80 kg -
      • -
    -
    - 1450€ - Add to cart -
    +
    + Chair +
    +

    The Chair 4/2

    +
      +
    • + + + + Leisure and relaxing +
      • +
    • + + + + Comfortable all day! +
      • +
    • + + + + Organic cotton +
      • +
    • + + + + Weighs 80 kg +
      • +
    +
    + 1450€ + Add to cart
    -
    -
    -
    + + + + + + + + - - - - + \ No newline at end of file diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..617e9297a 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,12 @@ 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 +22,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 +34,15 @@ body { header, section { - margin-bottom: 48px; + /* 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */ + margin-bottom: 96px; } h2 { + /* 24 / 30 / 36 */ margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +51,33 @@ 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--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 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,30 +95,50 @@ header { } h1 { - margin-bottom: 24px; + /* / 44 / 52 / 62 / */ + margin-bottom: 32px; + font-size: 44px; + line-height: 1.2; + letter-spacing: -1px; + /* text-shadow: 0 20px 3px rgb(0, 0, 0, 0.07); */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + /* 18 / 20 / 24 */ } img { width: 100%; + border-radius: 12px; } /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; } .features-title { margin-bottom: 16px; + font-size: 20px; } .features-text { + font-size: 18px; + line-height: 1.7; } /* TESTIMONIAL */ .testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; } .testimonial-box { @@ -88,33 +147,53 @@ img { } .testimonial-box h2 { + /* 20 / 24 / 30 */ margin-bottom: 24px; + font-size: 24px; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0 rgb(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 +201,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; +} \ No newline at end of file diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..66ee3518b --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,179 @@ + + + + + + + + + Accordion Component + + + + +
    +
    +

    01

    +

    Where are these chairs assemble?

    + + + +
    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ullam modi inventore quidem est, + distinctio, + aliquid optio eos iure sequi nemo nulla, tenetur praesentium animi maiores illo aliquam unde veniam? +

    + +
      +
    • Lorem ipsum dolor sit amet consectetur adipisicing elit.
      • +
    • Ullam voluptatem provident quia doloribus.
      • +
    • Neque quam saepe quidem aperiam tempora atque, sapiente non.
      • +
    • blanditiis natus iste nam voluptate ipsam distinctio perspiciatis
      • +
    +
    +
    + +
    +

    02

    +

    How long do I have to return my chair?

    + + + +
    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ullam modi inventore quidem est, + distinctio, + aliquid optio eos iure sequi nemo nulla, tenetur praesentium animi maiores illo aliquam unde veniam? +

    + +
      +
    • Lorem ipsum dolor sit amet consectetur adipisicing elit.
      • +
    • Ullam voluptatem provident quia doloribus.
      • +
    • Neque quam saepe quidem aperiam tempora atque, sapiente non.
      • +
    • blanditiis natus iste nam voluptate ipsam distinctio perspiciatis
      • +
    +
    +
    + +
    +

    03

    +

    Do you ship to countries outside the EU?

    + + + +
    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem ullam modi inventore quidem est, + distinctio, + aliquid optio eos iure sequi nemo nulla, tenetur praesentium animi maiores illo aliquam unde veniam? +

    + +
      +
    • Lorem ipsum dolor sit amet consectetur adipisicing elit.
      • +
    • Ullam voluptatem provident quia doloribus.
      • +
    • Neque quam saepe quidem aperiam tempora atque, sapiente non.
      • +
    • blanditiis natus iste nam voluptate ipsam distinctio perspiciatis
      • +
    +
    +
    +
    + + + + \ No newline at end of file diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..0a57df7a2 --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,169 @@ + + + + + + + + + Carousel Component + + + +
    + Maria de Almeida +
    +

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Quia quis unde tempora eaque sit ea est aliquid? Numquam.

    +

    Maria de Almeida

    +

    Senior Product Manager at EDP Comercial

    +
    + + + +
    + + + + +
    +
    + + + + + + + \ No newline at end of file diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..b8896c80d --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,110 @@ + + + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ChairThe Laid BackThe Worker BeeThe Chair 4/2
    width80 cm60 cm220 cm
    Height100 cm110 cm90 cm
    Depth70 cm65 cm80 cm
    weight16 kg22 kg80 kg
    + + + + \ No newline at end of file diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..ffc7efd84 --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,143 @@ + + + + + + + + + + + Omnifood Hero Section + + + + +
    + +
    +
    +

    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 taste and nutritional needs

    + Start eating well +
    +
    +
    + +
    +
    +

    Some random heading

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere fugiat aperiam blanditiis + delectus corrupti quod officiis perferendis beatae omnis et perspiciatis inventore illo, itaque rerum. + Blanditiis vero corporis ab dolore. Lorem ipsum dolor sit amet consectetur adipisicing elit. + Modi quod a pariatur, et natus, recusandae eveniet id atque doloribus quibusdam dolore dignissimos + perspiciatis eligendi dolorum? Eaque aliquam voluptate autem facere.

    +
    +
    + + + + \ No newline at end of file diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..00a50c609 --- /dev/null +++ b/starter/06-Components/06-app-layout.html @@ -0,0 +1,116 @@ + + + + + + + + App Layout + + + + + + + + + + + + +
    + + + + + + + + + + +
    +
    Email View
    + + + + + \ No newline at end of file diff --git a/starter/06-Components/component.html b/starter/06-Components/component.html new file mode 100644 index 000000000..c5c1753e0 --- /dev/null +++ b/starter/06-Components/component.html @@ -0,0 +1,43 @@ + + + + + + + + + Carousel Component + + + + + + + + + \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content.md similarity index 96% rename from starter/07-Omnifood-Desktop/content/content.md rename to starter/07-Omnifood-Desktop/content.md index 7193e017f..c37b08a49 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content.md @@ -126,3 +126,18 @@ Careers Recipe directory Help center Privacy & terms + + +######## + +## Sections + +- Logo + Navigation +- Hero +- features in +- How it works +- Meals (and list of diets) +- Testimonials + Gallery +- Pricing + Features +- CTA +- Footer \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/css/general.css b/starter/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..a0e270c70 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,281 @@ +/* + +--- 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 +heading-secondary: 1.2 +heading-primary: 1.05 +Paragraph default: 1.6 + +- Letter Spacing +-0.5px +0.75px + +--- 02 COLORS + +-- Primary: +#e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e +- Shades: +#cf711f +#45260a +-- Accent: +- Tints: +- Shades: + +-- Greys: +#555 #333 +- Tints: #6f6f6f (lightest grey allowed on #fdf2e9) + +- Shades: + +--- 05 SHADOWS + +box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 06 BORDER-RADIUS +9px +11px + +--- 07 WHITESPACE + + +- Spacing System (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 +/ 96 / 128 + +*/ + +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + /* 1rem = 10px */ + font-size: 62.5%; + box-sizing: border-box; +} + +body { + /* overflow-y: hidden; */ + font-family: 'Rubik', sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + +/*****************************/ +/* GENERAL REUSABLE COMPONENTS */ +/*****************************/ + +.container { + /* 1140px */ + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; + /* margin-bottom: 9.6rem; */ +} + +/* .grid:last-child { + margin-bottom: 0; +} */ + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--center-v { + align-items: center; +} + +/* .step-text-box { + align-self: center; +} */ + +.heading-primary, +.heading-secondary { + 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; + border-radius: 9px; + font-size: 2rem; + font-weight: 600; + text-decoration: none; + padding: 1.6rem 3.2rem; + /* transition: background-color .3s; */ + transition: all .3s; + + /* Only neccessary for .btn */ + border: none; + cursor: pointer; + font-family: inherit; +} + +.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; + /* border: 3px solid #fff; */ + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all .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-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +*:focus { + outline: none; + /* outline: 4px dotted #e67e22; + outline-offset: 8px; */ + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +/* Helper/settings Classes */ +.margin-right-sm { + margin-right: 1.6rem !important; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..8496e3c3a --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,538 @@ +/*****************************/ +/* HEADER */ +/*****************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* because we want header to be sticky later */ + height: 9.6rem; + padding: 0 4.8rem; +} + +.logo { + height: 2.2rem; +} + +/*****************************/ +/* NAVIGATION */ +/*****************************/ + +.main-nav-list { + list-style-type: 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 { + border-radius: 9px; + padding: 1.2rem 2.4rem; + 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; + align-items: center; + gap: 9.6rem; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; + +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/*****************************/ +/* FEATURED IN SECTION */ +/*****************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #888; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/*****************************/ +/* HOW IT WORKS SECTION */ +/*****************************/ + +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.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.06); +} + +.meal-content { + padding: 3.2rem 4.8rem 4.8rem 4.8rem; +} + +.meal-tags { + margin-bottom: 1.2rem; + display: flex; + gap: 0.4rem; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + text-transform: uppercase; + color: #333; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegetarian { + background-color: #51cf66; +} + +.tag--vegan { + background-color: #94d82d; +} + +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + font-size: 2.4rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + height: 2.4rem; + width: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +/*****************************/ +/* TESTIMONIALS SECTION */ +/*****************************/ + +.section-testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 4.8rem; + column-gap: 8rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-item img { + display: block; + width: 100%; + transition: all 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +/*****************************/ +/* PRICING SECTION */ +/*****************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.pricing-plan { + border-radius: 11px; + width: 75%; +} + +.pricing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.pricing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} + +.pricing-plan--complete::after { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} + +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} + +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: .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; + border-radius: 50%; + padding: 1.6rem; + margin-bottom: 3.2rem; +} + +.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: 9.6rem 0; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + background-color: #e67e22; + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta .heading-secondary { + /* color: #45260a; */ + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-img-box { + background-image: linear-gradient(to right bottom, rgba(235, 151, 78, 0.35), rgba(235, 151, 78, 0.35)), url("../img/eating.jpg"); + background-size: cover; + background-position: center; + +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta *:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); +} \ No newline at end of file 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/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..e61053231 --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,431 @@ + + + + + + + + + + + + + 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+ meals delivered 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 +
    +
    +
    + +
    +
    + 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) +
      • +
    +
    +
    +
    +

    Works with any diet:

    +
      +
    • + Vegetarian +
      • +
    • + Vegan +
      • +
    • + Vegan +
      • +
    • + 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 subscriptions cover 365 days per year, even including major holidays. +

    +
    +
    + +

    Local and organic

    +

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

    +
    +
    + +

    No waste

    +

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

    +
    +
    + +

    Pause anytime

    +

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

    +
    +
    +
    +
    +
    +
    +
    +

    Get your first meal for free!

    +

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

    +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + + +
    +
    + +
    +
    +
    +
    + + + + + + \ No newline at end of file