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

BLOG

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

📘 The Code Magazine

+ + +
+ +
+
+

The Basic Language of the Web: HTML

+ + Laura jones face + +

Posted by Laura Jones on Monday, June 21st 2027

+ + HTML on a sc reen +
+ +

+ 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 the + MDN Web Docs. +

+ +

Why should you learn HTML?

+ +

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

+ + + +

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

+
+ +

Related posts

+ + + + + + diff --git a/starter/03-CSS-Fundamentals/challenges/index.html b/starter/03-CSS-Fundamentals/challenges/index.html new file mode 100644 index 000000000..b615d8ad0 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenges/index.html @@ -0,0 +1,46 @@ + + + + + + Document + + +
+

SALE

+

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

+ + +
+ + diff --git a/starter/03-CSS-Fundamentals/challenges/style.css b/starter/03-CSS-Fundamentals/challenges/style.css new file mode 100644 index 000000000..b3b9d80da --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenges/style.css @@ -0,0 +1,128 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: sans-serif; + line-height: 1.4; +} + +/* PRODUCT */ +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto; + + position: relative; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +.sale { + background-color: red; + position: absolute; + color: white; + font-size: 12px; + font-weight: bold; + padding: 7px 15px; + letter-spacing: 3px; + display: inline-block; + top: -20px; + left: -40px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +.more-info:link, +.more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; + margin-top: 30px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +.color { + background-color: black; + height: 22px; + width: 22px; + display: inline-block; + margin-right: 10px; +} + +.color-blue { + background-color: blue; +} + +.color-red { + background-color: red; +} + +.color-yellow { + background-color: yellow; +} + +.color-green { + background-color: green; +} + +.color-brown { + background-color: brown; +} + +/* 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; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} diff --git a/starter/03-CSS-Fundamentals/css-grid.html b/starter/03-CSS-Fundamentals/css-grid.html new file mode 100644 index 000000000..8e2560612 --- /dev/null +++ b/starter/03-CSS-Fundamentals/css-grid.html @@ -0,0 +1,123 @@ + + + + + + + CSS Grid + + + +
+
(1) HTML
+
(2) and
+
(3) CSS
+
(4) are
+
(5) amazing
+
(6) languages
+ +
(8) learn
+
+ +
+
(1)
+
(3)
+
(4)
+
(5)
+
(6)
+
(7)
+
+ + diff --git a/starter/03-CSS-Fundamentals/flexbox.html b/starter/03-CSS-Fundamentals/flexbox.html new file mode 100644 index 000000000..7ab992814 --- /dev/null +++ b/starter/03-CSS-Fundamentals/flexbox.html @@ -0,0 +1,92 @@ + + + + + + + Flexbox + + + +
+
HTML
+
and
+
CSS
+
are
+
amazing
+ + +
+ + diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..eb99be8c6 100644 --- a/starter/03-CSS-Fundamentals/index.html +++ b/starter/03-CSS-Fundamentals/index.html @@ -2,6 +2,8 @@ + + The Basic Language of the Web: HTML @@ -15,132 +17,167 @@
The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> -
-

📘 The Code Magazine

- - -
- -
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

Posted by Laura Jones on Monday, June 21st 2027

- - HTML code on a screen +
+
+

📘 The Code Magazine

+ + + +
-

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

- -

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

- -

What is HTML?

-

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

-

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

-

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

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

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

- -

Why should you learn HTML?

- -

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

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

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

-
- - - + + + + +

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

+ +

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

+ +

What is HTML?

+

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

+

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

+

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

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

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

+ +

Why should you learn HTML?

+ +

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

+ + + +

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

+ + + + + + + diff --git a/starter/03-CSS-Fundamentals/script.js b/starter/03-CSS-Fundamentals/script.js new file mode 100644 index 000000000..3918c74e4 --- /dev/null +++ b/starter/03-CSS-Fundamentals/script.js @@ -0,0 +1 @@ +"use strict"; diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..0c2a862d4 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,571 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 1200px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; /* Centers the container */ + /* position: relative; */ +} + +.main-header { + background-color: #f7f7f7; + padding: 20px 40px; + /* margin-bottom: 60px; */ + /* height: 80px; */ +} + +article { + /* margin-bottom: 60px; */ +} + +nav { + font-size: 18px; + /* text-align: center; */ +} + +.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 40px; +} + +/* SMALLER SECTIONS */ + +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; + margin-bottom: 30px; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; +} + +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; + margin-left: 0; +} + +/* .first-li { + font-weight: bold; +} */ + +/* pseudo class */ +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +/* li:nth-child(even) { + color: red; +} */ + +/* styling links */ +a:link { + color: #1098ad; + /* removes the default underline in links */ + text-decoration: none; +} + +a:visited { + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +/* active is when you click a link, it changes the active state */ +a:active { + background-color: black; + font-style: italic; +} +/* LVHA - Link - Visited - Hover - Active */ + +.post-img { + width: 100%; /* Percentage base comes from it's parent element */ + height: auto; + /* img is an inline block element */ +} + +nav a:link { + /* background-color: orange; + margin: 20px; + padding: 20px; + + display: block; */ + + margin-right: 30px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} + +button { + font-size: 22px; + padding: 20px; + cursor: pointer; + + position: absolute; + /* bottom: 50px; + left: 50px; */ + + bottom: 50px; + right: 50px; +} + +/* Psuedo Elements are written with two colons :: */ +h1::first-letter { + font-style: normal; + margin-right: 5px; +} + +/* Adjacent sibling selector */ +h3 + p::first-line { + /* color: red; */ +} + +h2 { + /* background-color: orange; */ + 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; +} + +/* Stopped at CSS Theory 1 */ +/* Thank you for this note! Do it again if you decide to pause the course again */ + +/* CSS Hierarchy */ +/* Highest Priority + +5 Declarations marked !important -> like a hack for last resort situations +4 Inline style (style attribute in HTML) +3 ID (#) selector +2 Class (.) or pseudo-class (:) selector +1 Element selector (p, div, li, etc.) +0 Universal selector (*) + +Lowest Priority */ + +/* Resolving conflicts */ +/* #copyright { + color: red; +} + +.copyright { + color: blue; +} + +.text { + color: yellow; +} + +footer p { + color: green !important; +} */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ + +/* Start Challenge #1 in CSS Fundamentals */ +/* If paused for long, review the difference between the body element and the universal selector - lesson in inherticance and different use cases you might be confused with */ + +/* Stopped at "Centering our Page" */ + +/* Block-Level Elements vs Inline Elements */ + +/* + BLOCK_LEVEL ELEMENTS + +- Elements are formatted visually as blocks +- Elements occupy 100% of parent element's width, no matter the content +- Elements are stacked vertically by default, one after another +- The box-model applies as showed earlier + +*Default elements*: body, main, header, footer, section, nav, aside, div, h1-h6, p, ul, ol, li, etc. + +*With CSS*: display: block + + INLINE ELEMENTS +- Occupies only the space necessary for its content +- Cause no line-breaks after or before the element +- Box model applies in a different way: heights and widths do not apply +- Paddings and margins are applied only horizontally (left and right) + +*Default elements*: a, img, strong, em, button, etc. + +With CSS: display: inline + + INLINE-BLOCK BOXES +- Looks like inline from the outside, behaves like block-level on the inside +- Occupies only content's space +- Cause no line-breaks +- Box-model applies as showed + +With CSS: display: inline-block + +*/ + +/* + + NORMAL FLOW VS. ABSOLUTE POSITIONING + +NORMAL FLOW +- Default positioning +- Element is "in flow" +- Elements are simply laid out according to their order in the HTML code + +Default positioning +position: relative + +ABSOLUTE POSITIONING +- Element is removed from the normal flow: "out of flow" +- No impact on surroundingg elements, might overlap them +- We use top, bottom, left or right to offset the element from its relatively positioned container + +position: absolute + +** Bro I've been reading so much about position: relative and absolute for so many times and the only time I've ever truly understood it was when Jonas was explaining it. Are you kidding me? I'm more of a visual learner ** + +*/ + +/* Stopped at Developer Skill #1: Googling and Reading Documentation */ + +/* CSS Layouts will still be done here */ + +/* FLOATS */ +/* + +** Floats are different from absolute positioning + +- Element is removed from the normal flow: "out of flow" +- Text and inline elements will wrap around the floated element +- The container will not adjust its height to the element *collapsing element or collapsed height + +float: left; +float: right; + +*/ + +/* +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +.clearfix::after { + clear: both; + content: ""; + display: block; +} + +article { + width: 825px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} + +/* THE BOX MODEL WITH BOX-SIZING: BORDER BOX */ +/* + +box-sizing: border-box; + +*/ + +/* Stopped at Challenge #1: CSS Layouts */ + +/* Copied html files from CSS Layouts to work with Flexbox intro */ + +/* FLEXBBOX */ + +/* + +FLEX CONTAINER +1. gap: 0 | +- To create space between items, without using margin + +2. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly +- To align items along main axis (horizontally, by default) + +3. align-items: stretch | flex-start | flex-end | center | baseline +- To align items along cross axis (vertically, by default) + +4. flex-direction: row | row-reverse | column | column-reverse +- To define which is the main axis + +5. flex-wrap: nowrap | wrap | wrap-reverse (😅 not discussed in this course bc it's too advanced for beginners) +- To allow items to wrap into a new line if they are too large + +6. align-content: stretch | flex-start | flex-end | center | space-between | space-around (😅 not discussed in this course bc it's too advanced for beginners) +- Only applies when there are multiple lines (flex-wrap: wrap) + +FLEX ITEMS +1. align-self: auto | stretch | flex-start | flex-end | center | baseline +- To overwrite align-items for individual flex items + +2. flex-grow: 0 | +- To allow an element to grow (0 means no, 1+ means yes) + +3. flex-shrink: 1 | +- To allow an element to shrink (0 means no, 1+ means yes + +4. flex-basis: auto | +- To define an item's width, instead of width property + +5. flex: 0 1 auto | +- Recommended shorthand for flex-grow, -shrink, -basis. + +6. order: 0 | integer +- Controls order of items, -1 makes item first, 1 makes it last + +*/ + +/* 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; +} + +/* FLEXBOX LAYOUT */ +/* .row { + align-items: flex-start; + display: flex; + 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; +} + +/* CSS GRID FUNDAMENTALS */ + +/* +- CSS Grid is a set of CSS properties for building 2-dimensional layouts +- The main idea behind CSS Grid is that we divide a container element into rows and column that can be filled with its child elements +- In two-dimensional contexts, CSS Grid allows us to write less nested HTML and easier-to-read CSS +- CSS Grid is not meant to replace flexbox! Instead, they work perfectly together. Need a 1D layout? Use flexbox. Need a 2D layout? Use CSS Grid. + +GRID CONTAINER +1. grid-template-rows: + grid-template-columns: + + - To establish the grid row and column tracks. One length unit for each track. Any unit can be used, new fr fills unused space + +2. row-gap: 0 | | gap: 0 | + column-gap: 0 | | + - To create empty space between tracks + +3. justify-items: stretch | start | center | end + align-items: stretch | start | center | end + - To align items inside rows / columns (horizontally / vertically) + +4. justify-content: start | start | center | end | ... + align-content: start | start | center | end |... + - To align entire grid inside grid container. Only applies if container is larger than the grid + * According to Jonas, this won't be discussed in this course to avoid confusion as it is an advanced topic for beginners + +GRID ITEMS +1. grid-column: / | span + grid-row: / | span + - To place a grid item into a specific cell, based on line numbers, span keyword can be used to span an item across more cells + +2. justify-self: stretch | start | center | end + align-self: stretch | start | center | end + - To overwrite justify-items/align-items for single items +*/ diff --git a/starter/04-CSS-Layouts/flexbox copy.html b/starter/04-CSS-Layouts/flexbox copy.html new file mode 100644 index 000000000..496ef372a --- /dev/null +++ b/starter/04-CSS-Layouts/flexbox copy.html @@ -0,0 +1,58 @@ + + + + + + + Flexbox + + + +
+
HTML
+
and
+
CSS
+
are
+
amazing
+
languages
+
to
+
learn
+
+ + diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..e3223d405 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -40,6 +40,7 @@ margin: 40px; /* FLEXBOX */ + display: flex; } diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..2bded1fe9 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -4,6 +4,12 @@ + + + Lisbon Chair Shop @@ -27,6 +33,21 @@

We design and build better chairs, for a better life

What makes our chairs special

+ + + +

Science meets design

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

What makes our chairs special

+ + + +

Maximal comfort

@@ -45,6 +81,21 @@

What makes our chairs special

+ + + +

Ethical and sustainable

@@ -80,16 +131,76 @@

Our bestselling chairs

The Laid Back

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

The Laid Back

The Worker Bee

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

The Worker Bee

The Chair 4/2

  • + + + Leisure and relaxing
  • + + + Comfortable all day!
  • + + + Organic cotton
  • + + + Weighs 80 kg
diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..a9ec76b2a 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 */ +/* +MAIN-COLOR: #087f5b +GREY-COLOR: #343a40 +*/ + * { margin: 0; padding: 0; @@ -16,7 +21,9 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; } .container { @@ -26,11 +33,13 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; } .grid-3-cols { @@ -39,6 +48,33 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + + display: inline-block; + font-weight: 500; + 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 +84,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,30 +92,48 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + /* text-shadow: 0 5px 3px rgba(0, 0, 0, 0.07); */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } 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 { @@ -89,32 +143,51 @@ img { .testimonial-box h2 { margin-bottom: 24px; + font-size: 24px; } .testimonial-text { font-style: italic; margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: #e6fcf5; +} + +.testimonial-author { + color: #c3fae8; } /* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + .chair-box { - padding: 24px; + padding: 32px; } h3 { margin-bottom: 24px; + font-size: 20px; } .chair-details { list-style: none; - margin-bottom: 24px; + margin-bottom: 48px; } .chair-details li { display: flex; align-items: center; gap: 12px; - margin-bottom: 24px; + margin-bottom: 16px; } .chair-details li:last-child { @@ -122,13 +195,26 @@ 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; } + +/* Completed video lecture on Web Design Rules #1: Typography */ + +/* Start at Web Design Rules #3: Images and Illustrations */ + +/* Start at Web Design Rules #8: Visual Hierarchy */ diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..6a2c9d74f --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,232 @@ + + + + + + + + Accordion Component + + + + +
+
+

01

+

Where are these chairs assembled?

+ + + + +
+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel quam + amet eos recusandae tempore accusamus. Facere labore saepe nam + quidem nisi placeat nulla deleniti deserunt aspernatur voluptas. + Iste, quis veniam. +

+
    +
  • Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    • +
  • + Est nam ut molestias sit quisquam similique, enim quasi, + veritatis. +
    • +
  • + Laudantium sunt reiciendis doloribus eaque quam unde ullam aut in. +
    • +
  • Illo dolores asperiores beatae dolorem et ut quisquam.
    • +
+
+
+ +
+

02

+

How long do I have to return my chair?

+ + + + +
+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel quam + amet eos recusandae tempore accusamus. Facere labore saepe nam + quidem nisi placeat nulla deleniti deserunt aspernatur voluptas. + Iste, quis veniam. +

+
    +
  • Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    • +
  • + Est nam ut molestias sit quisquam similique, enim quasi, + veritatis. +
    • +
  • + Laudantium sunt reiciendis doloribus eaque quam unde ullam aut in. +
    • +
  • Illo dolores asperiores beatae dolorem et ut quisquam.
    • +
+
+
+ +
+

03

+

Do you ship to counties outside the EU?

+ + + + +
+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel quam + amet eos recusandae tempore accusamus. Facere labore saepe nam + quidem nisi placeat nulla deleniti deserunt aspernatur voluptas. + Iste, quis veniam. +

+
    +
  • Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    • +
  • + Est nam ut molestias sit quisquam similique, enim quasi, + veritatis. +
    • +
  • + Laudantium sunt reiciendis doloribus eaque quam unde ullam aut in. +
    • +
  • Illo dolores asperiores beatae dolorem et ut quisquam.
    • +
+
+
+
+ + diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..33c6d3861 --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,199 @@ + + + + + + + + Carousel Component + + + + +
+ A woman with glasses: Maria +
+

+ "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, culpa + quo! At neque, incidunt ut placeat, maxime sunt minima earum + doloremque autem." +

+

Maria de Almeida

+

Senior Product Manager at EDP Comercial

+
+ + + + + +
+ + + + +
+
+ + diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html new file mode 100644 index 000000000..9ea192da4 --- /dev/null +++ b/starter/06-Components/03-table.html @@ -0,0 +1,113 @@ + + + + + + + + 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
+ + diff --git a/starter/06-Components/04-hero.html b/starter/06-Components/04-hero.html new file mode 100644 index 000000000..c8003a139 --- /dev/null +++ b/starter/06-Components/04-hero.html @@ -0,0 +1,138 @@ + + + + + + + + + Omnifood Hero Section + + +
+ + +
+
+

A healthy meal delivered to your door every single day

+

+ The smart 365-days-per-year food subsciption that will make you eath + healthy again. Tailored to your personal taste and nutritional needs +

+ Start eating well +
+
+
+ +
+
+

Some random heading

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, maxime + quia! Repellendus eveniet, neque, perferendis, nihil dolorum dolore + enim odio incidunt consectetur sint doloremque laborum excepturi + temporibus ipsam illo voluptates. Lorem ipsum dolor sit amet + consectetur, adipisicing elit. Iusto obcaecati fuga eos iste ea rerum + nemo nobis eum, doloremque praesentium voluptatem similique ipsa + soluta tempore magni eveniet officia quaerat vero? +

+
+
+ + diff --git a/starter/06-Components/05-app-layout.html b/starter/06-Components/05-app-layout.html new file mode 100644 index 000000000..28e957eab --- /dev/null +++ b/starter/06-Components/05-app-layout.html @@ -0,0 +1,114 @@ + + + + + + App Layout + + + + + + + + + + + +
+ + + + + + + + + + +
+
Email view
+ + + diff --git a/starter/06-Components/ch-pagination.html b/starter/06-Components/ch-pagination.html new file mode 100644 index 000000000..230b4955a --- /dev/null +++ b/starter/06-Components/ch-pagination.html @@ -0,0 +1,169 @@ + + + + + + + Pagination Challenge Component + + + + +
+ + + 1 + 2 + 3 + 4 + 5 + 6 + ... + 23 + + +
+ + diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content.md similarity index 95% rename from starter/07-Omnifood-Desktop/content/content.md rename to starter/07-Omnifood-Desktop/content.md index 7193e017f..e8849129c 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content.md @@ -119,10 +119,34 @@ Create account Sign in iOS app Android app + About Omnifood For Business Cooking partners Careers + Recipe directory Help center Privacy & terms + +######### + +## Sections + +- Logo + Navigation + +- Hero section + +- Featured in + +- How it works + +- Meals and list of diets + +- Testimonials + gallery + +- Pricing + features + +- Call to action (sample meal) + +- Footer diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/starter/07-Omnifood-Desktop/content/img/hero.png deleted file mode 100644 index 7bd8ca857..000000000 Binary files a/starter/07-Omnifood-Desktop/content/img/hero.png and /dev/null differ diff --git a/starter/07-Omnifood-Desktop/css/general.css b/starter/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..2364a9186 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,273 @@ +/* + +--- 01 TYPOGRAPHY SYSTEM --- + +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Font weights: +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +- Line heights: +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 +Large: 1.8 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS --- + +Primary: #e67e22 + +Tints: #fdf2e9, #fae5d3, #eb984e +Shades: #cf711f, ##45260a +Accents: #51cf66 +Greys: #555, #333, #6f6f6f (lightest grey allowed on #fdf2e9), #888, #767676 (lightest grey allowed on #fff) + +--- 03 SHADOWS --- + +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 04 BORDER-RADIUS --- +Default: 9px +Medium: 11px + +--- 05 WHITE SPACE --- + +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + /* 10px / 16px = 0.625 - 62.5% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; + overflow-x: hidden; + + scroll-behavior: smooth; +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; + + /* Only works if there is nothing absolutely positioned in relation to body */ + overflow-x: hidden; +} + +/**************************/ +/* GENERAL REUSABLE COMPONENTS */ +/**************************/ + +.container { + max-width: 120rem; + margin: 0 auto; + padding: 0 3.2rem; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; + + /* margin-bottom: 9.6rem; */ +} + +/* .grid:last-child { + margin-bottom: 0; +} */ + +/* If the .grid is NOT the :last-child, add the margin-bottom */ +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +/* .grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} */ + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary { + 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; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + text-decoration: none; + + /* Only necessary for the .btn */ + border: none; + cursor: pointer; + font-family: inherit; + + /* Always put transition on original "state" */ + /* transition: background-color 0.3s; */ + transition: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all 0.3s; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; + line-height: 1.2; +} + +*:focus { + outline: none; + /* outline: 4px dotted #e67e22; */ + /* outline-offset: 8px; */ + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +/* HELPER/SETTINGS CLASSES */ + +.margin-right-sm { + margin-right: 1.6rem !important; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} diff --git a/starter/07-Omnifood-Desktop/css/queries.css b/starter/07-Omnifood-Desktop/css/queries.css new file mode 100644 index 000000000..817b03c89 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/queries.css @@ -0,0 +1,314 @@ +/* rem and em do NOT depend on html font-size in media queries, instead we assume that 1rem = 1em = 16px + +wtf is em? em is the root font size and rem is the current font size + +*/ + +/**************************/ +/* BELOW 1344px (smaller desktops) */ +/**************************/ + +/* 1350/16 = 84 */ +@media (max-width: 84em) { + .hero { + max-width: 120rem; + text-align: center; + } + + .heading-primary { + font-size: 4.4rem; + } + + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} + +/**************************/ +/* BELOW 1200px (tablets: landscape) */ +/**************************/ + +@media (max-width: 75em) { + html { + /* 9px / 16px */ + font-size: 56.25%; + } + + .grid { + column-gap: 4.8rem; + row-gap: 6.4rem; + } + + .heading-secondary { + font-size: 3.6rem; + } + + .heading-tertiary { + font-size: 2.4rem; + } + + .header { + padding: 0 3.2rem; + } + + .main-nav-list { + gap: 3.2rem; + } + + .hero { + gap: 4.8rem; + } + + .testimonials-container { + padding: 9.6rem 3.2rem; + } +} + +/**************************/ +/* BELOW 944px (tablets) */ +/**************************/ + +@media (max-width: 59em) { + html { + /* 8px / 16px = 0.5 = 50% */ + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-text-box, + .hero-img-box { + text-align: center; + } + + .hero-img { + width: 60%; + } + + .delivered-meals { + justify-content: center; + margin-top: 3.2rem; + } + + .logos img { + height: 2.4rem; + } + + .step-number { + font-size: 7.4rem; + } + + .meal-content { + padding: 2.4rem 3.2rem 2.4rem 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + /* 3/5 = 60% + 2/5 = 40% */ + grid-template-columns: 3fr 2fr; + } + + .cta-form { + grid-template-columns: 1fr; + } + + .btn--form { + margin-top: 1.2rem; + } + + /* MOBILE NAVIGATION */ + + .btn-mobile-nav { + display: block; + z-index: 1000; + } + + .main-nav { + background-color: rgba(255, 255, 255, 0.97); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + transform: translateX(100%); + + display: flex; + align-items: center; + justify-content: center; + transition: all 0.5s ease-in; + + /* HIDE NAVIGATION */ + /* Transition are not allowed */ + /* display: none; */ + + /* 1) Hide it visually */ + opacity: 0; + + /* 2) Make it inaccessible to mouse and keyboard */ + pointer-events: none; + + /* 3) Hide it from screen readers */ + visibility: hidden; + } + + .nav-open .main-nav { + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: translateX(0); + } + + .nav-open .icon-mobile-nav[name="close-outline"] { + display: block; + } + + .nav-open .icon-mobile-nav[name="menu-outline"] { + display: none; + } + + .main-nav-list { + flex-direction: column; + gap: 4.8rem; + } + + .main-nav-link:link, + .main-nav-link:visited { + font-size: 3rem; + } +} + +/**************************/ +/* BELOW 704px (smaller tablets) */ +/**************************/ + +@media (max-width: 44em) { + .grid--3-cols, + .grid--4-cols { + grid-template-columns: repeat(2, 1fr); + } + + .diets { + grid-column: 1 / -1; + justify-self: center; + } + + .heading-secondary { + margin-bottom: 4.8rem; + } + + .pricing-plan { + width: 100%; + } + + .grid-footer { + grid-template-columns: repeat(6, 1fr); + } + + .logo-col, + .address-col { + grid-column: span 3; + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.2rem; + } +} + +/**************************/ +/* BELOW 544px (phones) */ +/**************************/ + +@media (max-width: 34em) { + .grid { + row-gap: 4.8rem; + } + + .grid--2-cols, + .grid--3-cols, + .grid--4-cols { + grid-template-columns: 1fr; + } + + .btn, + .btn:link, + .btn:visited { + padding: 2.4rem 1.6rem; + } + + .section-hero { + padding: 2.4rem 0 6.4rem 0; + } + + .hero { + padding: 0 3.2rem; + } + + .hero-img { + width: 80%; + } + + .logos img { + height: 1.2rem; + } + + /* Confusing but that's just how CSS */ + .step-img-box:nth-child(2) { + grid-row: 1; + } + + .step-img-box:nth-child(6) { + grid-row: 5; + } + + .step-img-box { + transform: translateY(2.4rem); + } + + .testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(4, 1fr); + gap: 1.2rem; + } + + .cta { + grid-template-columns: 1fr; + } + + .cta-img-box { + height: 32rem; + grid-row: 1; + } + + /* Course rule but I like the current spacing */ + /* .cta-text-box { + padding: 3.2rem; + } */ +} + +/* + +- FONT SIZES (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +*/ + +/* 09 Omnifood Project, 139 lecture is incomplete */ diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..a9f7dee24 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,662 @@ +/**************************/ +/* HEADER SECTION */ +/**************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + height: 9.6rem; + padding: 0 4.8rem; + position: relative; +} + +.logo { + height: 2.2rem; +} + +/**************************/ +/* NAVIGATION SECTION */ +/**************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 4.8rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/* MOBILE */ +.btn-mobile-nav { + border: none; + background-color: none; + cursor: pointer; + + display: none; +} + +.icon-mobile-nav { + height: 4.8rem; + width: 4.8rem; + color: #333; +} + +.icon-mobile-nav[name="close-outline"] { + display: none; +} + +/* STICKY NAVIGATION */ +.sticky .header { + position: fixed; + top: 0; + bottom: 0; + width: 100%; + height: 8rem; + padding-top: 0; + padding-bottom: 0; + background-color: rgba(255, 255, 255, 0.97); + z-index: 100; + box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03); +} + +.sticky .section-hero { + margin-top: 9.6rem; +} + +/**************************/ +/* HERO SECTION */ +/**************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.5; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 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.6rem 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: #767676; +} + +.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; + width: 60%; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: -1; +} + +.step-img-box::before { + width: 60%; + padding-bottom: 60%; + background-color: #fdf2e9; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; +} + +.step-img { + width: 35%; +} + +/**************************/ +/* SAMPLE 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: 4px; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + text-transform: uppercase; + color: white; + 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: 2rem; + 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: #fae5d3; + display: grid; + grid-template-columns: 50fr 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-plant--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.75px; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sign-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fdf2e9; + margin-bottom: 3.2rem; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8; +} + +/**************************/ +/* CTA SECTION */ +/**************************/ + +.section-cta { + /* TOP / RIGHT / BOTTOM / LEFT */ + /* padding: 9.6rem 0 12.8rem 0; */ + + /* TOP / HORIZONTAL / LEFT */ + padding: 4.8rem 0 12.8rem; +} + +.cta { + display: grid; + /* 2/3 = 66.6% + 1/3 = 33.3% */ + grid-template-columns: 2fr 1fr; + /* background-color: #e67e22; */ + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + 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-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta .heading-secondary { + /* color: #45260a; */ + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + color: inherit; + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: 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); +} + +/**************************/ +/* FOOTER */ +/**************************/ + +.footer { + padding: 12.8rem 0; + border-top: 1px solid #eee; +} + +.grid-footer { + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} + +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.social-icons { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + color: #767676; + line-height: 1.6; + margin-top: auto; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/starter/07-Omnifood-Desktop/img/android.png b/starter/07-Omnifood-Desktop/img/android.png new file mode 100644 index 000000000..71cb6e0dd Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/android.png differ 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/img/apple-touch-icon.png b/starter/07-Omnifood-Desktop/img/apple-touch-icon.png new file mode 100644 index 000000000..064f04da9 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/apple-touch-icon.png differ 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/img/favicon-192.png b/starter/07-Omnifood-Desktop/img/favicon-192.png new file mode 100644 index 000000000..535752da3 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon-192.png differ diff --git a/starter/07-Omnifood-Desktop/img/favicon-512.png b/starter/07-Omnifood-Desktop/img/favicon-512.png new file mode 100644 index 000000000..dfd0923b7 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon-512.png differ 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/img/hero-min.png b/starter/07-Omnifood-Desktop/img/hero-min.png new file mode 100644 index 000000000..ed1a69d5c Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/hero-min.png differ diff --git a/starter/07-Omnifood-Desktop/img/hero.png b/starter/07-Omnifood-Desktop/img/hero.png new file mode 100644 index 000000000..44e56d8ad Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/hero.png differ diff --git a/starter/07-Omnifood-Desktop/img/hero.webp b/starter/07-Omnifood-Desktop/img/hero.webp new file mode 100644 index 000000000..5929c2221 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/hero.webp differ 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..5f5650b8b --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,704 @@ + + + + + + + + + + + + + + + + + + + + + Omnifood — Never cook again! + + +
+ + + + + + +
+ +
+
+
+
+

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

+

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

+ Start eating well + Learn more ↓ +
+
+ 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 + + +
+
+
+ + + +
+
+ How it works +

+ Your daily dose of health in 3 simple steps +

+
+ +
+ +
+

01

+

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

+

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

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

02

+

Approve your weekly meal plan

+

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

+
+ + +
+

03

+

Receive meals at convenient time

+

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

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

+ Omnifood AI chooses from 5,000+ recipes +

+
+ +
+
+ Three bowls of Japanese Gyozas +
+
+ Vegetarian +
+

Japanese Gyozas

+
    +
  • + + 650 calories +
    • +
  • + NutriScore ® 74 +
    • +
  • + 4.9 rating (537) +
    • +
+
+
+ +
+ Bowl of avocado salad +
+
+ Vegan + Paleo +
+

Avocado Salad

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

Works with any diet:

+
    +
  • + Vegetarian +
    • +
  • + Vegan +
    • +
  • + Pescatarian +
    • +
  • + Gluten-free +
    • +
  • + Lactose-free +
    • +
  • + Keto +
    • +
  • + Paleo +
    • +
  • + Low FODMAP +
    • +
  • + Kid-friendly +
    • +
+
+
+ +
+ See all recipes → +
+
+ +
+
+ Testimonials +

Once you try it, you can't go back

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

— Dave Bryson

+
+ +
+ Photo of Ben +
+ 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 Steve +
+ 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 Hannah +
+ 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 beautifuly arranged food + +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly arranged food +
+
+ Photo of beautifuly 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 +
    • +
  • +   +
    • +
+ +
+ +
+
+

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

Never cook again!

+

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

+
+ +
+ +

Local and organic

+

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

+
+ +
+ +

No waste

+

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

+
+ +
+ +

Pause anytime

+

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

+
+
+
+ +
+
+
+
+

Get your first meal for free!

+

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

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ +
+
+
+
+ + + + diff --git a/starter/07-Omnifood-Desktop/js/script.js b/starter/07-Omnifood-Desktop/js/script.js new file mode 100644 index 000000000..b854f556e --- /dev/null +++ b/starter/07-Omnifood-Desktop/js/script.js @@ -0,0 +1,119 @@ +/////////////////////////////////////////////////////////// +console.log("Hello World!"); + +const myName = "Gillian Gavino"; +const h1 = document.querySelector(".heading-primary"); + +// h1.addEventListener("click", function () { +// h1.textContent = myName; +// h1.style.backgroundColor = "red"; +// h1.style.padding = "5rem"; +// }); + +/////////////////////////////////////////////////////////// +// Set current year +const yearEl = document.querySelector(".year"); +const currentYear = new Date().getFullYear(); +yearEl.textContent = currentYear; + +/////////////////////////////////////////////////////////// +// Make mobile navigation work +const btnNav = document.querySelector(".btn-mobile-nav"); +const headerEl = document.querySelector(".header"); + +btnNav.addEventListener("click", function () { + headerEl.classList.toggle("nav-open"); +}); + +/////////////////////////////////////////////////////////// +// Making nav sticky +const sectionHeroEl = document.querySelector(".section-hero"); +const bodyEl = document.querySelector("body"); + +const obs = new IntersectionObserver( + function (entries) { + const ent = entries[0]; + + if (!ent.isIntersecting) bodyEl.classList.add("sticky"); + + if (ent.isIntersecting) bodyEl.classList.remove("sticky"); + }, + { + root: null, + threshold: 0, + rootMargin: "-80px", + } +); +obs.observe(sectionHeroEl); + +// Fixing flexbox gap property missing in some Safari versions +function checkFlexGap() { + const flex = document.createElement("div"); + flex.style.display = "flex"; + flex.style.flexDirection = "column"; + flex.style.rowGap = "1px"; + + flex.appendChild(document.createElement("div")); + flex.appendChild(document.createElement("div")); + + document.body.appendChild(flex); + const isSupported = flex.scrollHeight === 1; + flex.parentNode.removeChild(flex); + console.log(isSupported); + + if (!isSupported) document.body.classList.add("no-flexbox-gap"); +} +checkFlexGap(); + +// https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js + +/* +.no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 4.8rem; +} + +.no-flexbox-gap .list-item:not(:last-child) { + margin-bottom: 1.6rem; +} + +.no-flexbox-gap .list-icon:not(:last-child) { + margin-right: 1.6rem; +} + +.no-flexbox-gap .delivered-faces { + margin-right: 1.6rem; +} + +.no-flexbox-gap .meal-attribute:not(:last-child) { + margin-bottom: 2rem; +} + +.no-flexbox-gap .meal-icon { + margin-right: 1.6rem; +} + +.no-flexbox-gap .footer-row div:not(:last-child) { + margin-right: 6.4rem; +} + +.no-flexbox-gap .social-links li:not(:last-child) { + margin-right: 2.4rem; +} + +.no-flexbox-gap .footer-nav li:not(:last-child) { + margin-bottom: 2.4rem; +} + +@media (max-width: 75em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 3.2rem; + } +} + +@media (max-width: 59em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 0; + margin-bottom: 4.8rem; + } +} +*/ diff --git a/starter/07-Omnifood-Desktop/manifest.webmanifest b/starter/07-Omnifood-Desktop/manifest.webmanifest new file mode 100644 index 000000000..270233703 --- /dev/null +++ b/starter/07-Omnifood-Desktop/manifest.webmanifest @@ -0,0 +1,6 @@ +{ + "icons": [ + { "src": "img/favicon-192.png", "type": "image/png", "sizes": "192x192" }, + { "src": "img/favicon-512.png", "type": "image/png", "sizes": "512x512" } + ] +} diff --git a/vscode-setup.md b/vscode-setup.md index 86916c36c..de62114b0 100644 --- a/vscode-setup.md +++ b/vscode-setup.md @@ -31,3 +31,5 @@ I use the `One Monokai` in all the course videos. This is a free theme, similar `Word Wrap` set to `on`, to avoid vertical scrollbars for long content `Tab Size` set to `2`, for better code readability + +`Trying something`