diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..4fbc41f72 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -11,10 +11,14 @@ } .el--2 { background-color: orangered; + grid-column: 1 / -1; + grid-row: 2; } .el--3 { background-color: green; height: 150px; + align-self: end; + justify-self: end; } .el--4 { background-color: goldenrod; @@ -30,6 +34,8 @@ } .el--8 { background-color: crimson; + grid-column: 2 / 3; + grid-row: 1 / 2; } .container--1 { @@ -40,6 +46,15 @@ margin: 40px; /* CSS GRID */ + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr 1fr; + + /* gap: 30px; */ + column-gap: 30px; + row-gap: 60px; + + display: none; } .container--2 { @@ -53,6 +68,19 @@ height: 600px; /* CSS GRID */ + display: grid; + grid-template-columns: 125px 200px 125px; + grid-template-rows: 250px 100px; + gap: 50px; + + /* Aligningi tracks inside container + distribut emty space */ + justify-content: center; + align-content: center; + + /* Aligning items INSIDE cells: moving items around inside cells */ + align-items: center; + justify-items: center; } diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html index 496ef372a..65f8fe339 100644 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -8,9 +8,12 @@ diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..c0edae936 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -18,66 +18,61 @@
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

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

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

What is HTML?

- HTML stands for HyperText - Markup Language. It's a markup - language that web developers use to structure and describe the content - of a webpage (not a programming language). + HTML 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. + 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:

@@ -89,28 +84,18 @@

What is HTML?

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

Why should you learn HTML?

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

    -
  • - To be able to use the fundamental web dev language -
    • -
  • - To hand-craft beautiful websites instead of relying on tools like - Worpress or Wix -
    • +
  • To 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 😃
    • @@ -123,43 +108,33 @@

    Why should you learn HTML?

    Related posts

    +
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css index c879e79d2..b37c00f9b 100644 --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -14,7 +15,7 @@ body { } .container { - width: 800px; + width: 1200px; /* margin-left: auto; margin-right: auto; */ margin: 0 auto; @@ -26,7 +27,7 @@ body { padding-left: 40px; padding-right: 40px; */ padding: 20px 40px; - margin-bottom: 60px; + /* margin-bottom: 60px; */ /* height: 80px; */ } @@ -36,7 +37,7 @@ nav { } article { - margin-bottom: 60px; + /* margin-bottom: 60px; */ } .post-header { @@ -48,10 +49,7 @@ aside { background-color: #f7f7f7; border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ - padding: 50px 0; - width: 500px; + padding: 50px 40px; } /* SMALLER ELEMENTS */ @@ -82,6 +80,7 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 30px; } p { @@ -134,6 +133,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } body { @@ -197,7 +197,6 @@ nav a:link { display: block; */ margin-right: 30px; - margin-top: 10px; display: inline-block; } @@ -232,7 +231,7 @@ h2 { } h2::before { - content: "TOP"; + content: 'TOP'; background-color: #ffe70e; color: #444; font-size: 16px; @@ -265,3 +264,137 @@ footer p { nav p { font-size: 18px; } */ + +/* FLOATS */ +/* +.author-img { + float: left; + margin-bottom: 20px; +} + +.author { + float: left; + margin-top: 10px; + margin-left: 20px; +} + +h1 { + float: left; +} + +nav { + float: right; +} + +.clear { + clear: both; +} + +.clearfix::after { + clear: both; + content: ''; + display: block; +} + +article { + width: 825px; + float: left; +} +aside { + width: 300px; + float: right; +} +footer { + clear: both; +} +*/ + +/* FlexBox */ +.main-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.author-box { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.author { + margin-bottom: 0; + margin-left: 15px; +} + +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} + +.related-post { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 30px; +} + +.related-link:link { + font-size: 17px; + font-weight: bold; + font-style: normal; + display: block; + margin-bottom: 5px; +} + +.related-author { + margin-bottom: 0; + font-size: 14px; + font-weight: normal; + font-style: italic; +} + +/* flexbox layout */ +/* +.row { + display: flex; + gap: 75px; + align-items: flex-start; + 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 { + /* align-self: start; */ +} + +footer { + grid-column: 1 / -1; +} diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..7c1f5737b 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -5,6 +5,13 @@ + + + + Lisbon Chair Shop @@ -14,9 +21,8 @@

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. + 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
@@ -27,30 +33,71 @@

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 - similique adipisci praesentium. + 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. + 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! + Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat omnis est laudantium voluptatem + voluptas!

@@ -62,9 +109,8 @@

What makes our chairs special

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

@@ -80,16 +126,72 @@

Our bestselling chairs

The Laid Back

@@ -106,15 +208,71 @@

The Laid Back

The Worker Bee

@@ -131,15 +289,71 @@

The Worker Bee

The Chair 4/2

@@ -153,9 +367,8 @@

The Chair 4/2

diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..04b258cf1 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -4,6 +4,11 @@ SPACING SYSTEM (px) FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +MAIN COLOR: #087f5b +GRAY COLOR: #343a40 + + */ * { @@ -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,36 @@ 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 { + padding: 16px 32px; + font-size: 18px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +img { + border-radius: 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -48,7 +87,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,11 +95,18 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + + /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */ } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; } img { @@ -69,17 +115,28 @@ img { /* 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 +146,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 +198,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + align-items: center; + font-size: 20px; } footer { margin-bottom: 48px; + font-size: 14px; + color: #495057; } diff --git a/starter/06-Components/accordion/01-accordion.html b/starter/06-Components/accordion/01-accordion.html new file mode 100644 index 000000000..0d5e6aed8 --- /dev/null +++ b/starter/06-Components/accordion/01-accordion.html @@ -0,0 +1,99 @@ + + + + + + + Accordion Component + + + + + + + + +
+
+

01

+

Where are these chairs assembled?

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum nobis et, dolorem repellat qui + dolorum ab iste sapiente architecto eveniet minus error voluptates earum. Atque, quibusdam? +

+
    +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit
    • +
  • Eveniet illum autem corrupti eos quidem et voluptates
    • +
  • architecto obcaecati molestias provident quibusdam suscipit
    • +
  • praesentium optio accusantium alias impedit modi ex
    • +
+
+
+ +
+

02

+

How long do I have to return my chair?

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum nobis et, dolorem repellat qui + dolorum ab iste sapiente architecto eveniet minus error voluptates earum. Atque, quibusdam? +

+
    +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit
    • +
  • Eveniet illum autem corrupti eos quidem et voluptates
    • +
  • architecto obcaecati molestias provident quibusdam suscipit
    • +
  • praesentium optio accusantium alias impedit modi ex
    • +
+
+
+ +
+

03

+

Do you ship to countries outside the EU?

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum nobis et, dolorem repellat qui + dolorum ab iste sapiente architecto eveniet minus error voluptates earum. Atque, quibusdam? +

+
    +
  • Lorem ipsum dolor sit amet consectetur adipisicing elit
    • +
  • Eveniet illum autem corrupti eos quidem et voluptates
    • +
  • architecto obcaecati molestias provident quibusdam suscipit
    • +
  • praesentium optio accusantium alias impedit modi ex
    • +
+
+
+
+ + diff --git a/starter/06-Components/accordion/accordion.css b/starter/06-Components/accordion/accordion.css new file mode 100644 index 000000000..88b918717 --- /dev/null +++ b/starter/06-Components/accordion/accordion.css @@ -0,0 +1,100 @@ +/* + SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + MAIN COLOR: #087f5b + GRAY COLOR: #343a40 + + +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: 'Inter', sans-serif; + color: #343a40; + line-height: 1; +} + +.accordion { + width: 700px; + margin: 100px auto; + display: flex; + flex-direction: column; + gap: 24px; +} + +.item { + box-shadow: 0 0 32px rgba(0, 0, 0, 0.1); + padding: 24px; + + display: grid; + grid-template-columns: auto 1fr auto; + column-gap: 24px; + row-gap: 32px; + align-items: center; +} +.number, +.text { + cursor: pointer; + + font-size: 24px; + font-weight: 500; + /* color: #087f5b; */ +} + +.number { + color: #ced4da; +} + +.icon { + cursor: pointer; + + width: 24px; + height: 24px; + /* stroke: #087f5b; */ +} + +.hidden-box { + grid-column: 2; + display: none; +} + +.hidden-box p { + line-height: 1.6; + margin-bottom: 24px; +} + +.hidden-box ul { + color: #868e96; + margin-left: 20px; + + display: flex; + flex-direction: column; + gap: 12px; +} + +.open { + border-top: 4px solid #087f5b; +} + +.open .hidden-box { + display: block; +} + +.open .number, +.open .text, +.open .icon { + color: #087f5b; + /* stroke: #087f5b; */ +} diff --git a/starter/06-Components/accordion/accorion.js b/starter/06-Components/accordion/accorion.js new file mode 100644 index 000000000..6b3adf037 --- /dev/null +++ b/starter/06-Components/accordion/accorion.js @@ -0,0 +1,7 @@ +const items = document.querySelectorAll('.item'); + +for (i = 0; i < items.length; i++) { + items[i].addEventListener('click', function () { + this.classList.toggle('open'); + }); +} diff --git a/starter/06-Components/app-layout/app-layout.css b/starter/06-Components/app-layout/app-layout.css new file mode 100644 index 000000000..bcc1575e3 --- /dev/null +++ b/starter/06-Components/app-layout/app-layout.css @@ -0,0 +1,87 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +nav, +menu, +section, +main, +aside { + padding-top: 24px; +} + +body { + font-family: sans-serif; + color: #343a40; + font-size: 24px; + height: 100vh; + text-align: center; + font-weight: bold; + + display: grid; + grid-template-columns: 80px 400px 1fr 250px; + grid-template-rows: 80px 1fr; +} + +nav { + background-color: #343a40; + color: #fff; + + grid-row: 1 / -1; +} + +menu { + background-color: #7048e8; + grid-column: 2 / -1; + + display: flex; + + align-items: center; + gap: 12px; + padding: 0 40px; +} + +button { + font-size: 16px; + background-color: #5f3dc4; + border: none; + cursor: pointer; + color: #fff; + padding: 8px 12px; + display: inline-block; + font-weight: bold; +} + +button:last-child { + background-color: #d6336c; + + /* Centers last chiled all the way to the right (sticky) */ + margin-left: auto; +} + +section { + background-color: #e9ecef; + padding: 40px; + + overflow-y: scroll; + + display: flex; + flex-direction: column; + gap: 40px; +} + +.email { + background-color: #adb5bd; + height: 96px; + flex-shrink: 0; + + display: flex; + align-items: center; + justify-content: center; +} + +aside { + background-color: #e9ecef; +} diff --git a/starter/06-Components/app-layout/app-layout.html b/starter/06-Components/app-layout/app-layout.html new file mode 100644 index 000000000..1f5293451 --- /dev/null +++ b/starter/06-Components/app-layout/app-layout.html @@ -0,0 +1,34 @@ + + + + + + + App Layout + + + + + + + + + + + +
+
Email 1
+
Email 2
+
Email 3
+
Email 4
+
Email 5
+
Email 6
+
Email 7
+
Email 8
+
Email 9
+
Email 10
+
+
Email view
+ + + diff --git a/starter/06-Components/carousel/carousel.css b/starter/06-Components/carousel/carousel.css new file mode 100644 index 000000000..2b1825cdf --- /dev/null +++ b/starter/06-Components/carousel/carousel.css @@ -0,0 +1,126 @@ +/* + SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + MAIN COLOR: #087f5b + GRAY COLOR: #343a40 + + +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: 'Inter', sans-serif; + color: #343a40; + line-height: 1; +} + +.carousel { + width: 800px; + margin: 100px auto; + background-color: #087f5b; + + padding: 32px 48px 32px 86px; + + border-radius: 8px; + position: relative; + + display: flex; + /* align-items: center; */ + gap: 86px; +} + +img { + height: 200px; + border-radius: 8px; + transform: scale(1.5); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25); +} + +.testimonial { +} + +.testimonial-text { + font-size: 18px; + font-weight: 500; + line-height: 1.5; + margin-bottom: 32px; + color: #e6fcf5; +} +.testimonial-author { + font-size: 14px; + margin-bottom: 4px; + color: #c3fae8; +} + +.testimonial-job { + font-size: 12px; + color: #c3fae8; +} + +.btn { + background-color: #fff; + border: none; + height: 40px; + width: 40px; + border-radius: 50%; + position: absolute; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); + + display: flex; + align-items: center; + justify-content: center; + + cursor: pointer; +} + +.btn--left { + left: 0; + top: 50%; + transform: translate(-50%, -50%); +} +.btn--right { + right: 0; + top: 50%; + transform: translate(50%, -50%); +} + +.btn-icon { + height: 24px; + width: 24px; + stroke: #087f5b; +} + +.dots { + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 32px); + + display: flex; + gap: 12px; +} + +.dot { + height: 12px; + width: 12px; + background-color: #fff; + border: 2px solid #087f5b; + border-radius: 50%; + cursor: pointer; +} + +.dot--fill { + background-color: #087f5b; +} diff --git a/starter/06-Components/carousel/carousel.html b/starter/06-Components/carousel/carousel.html new file mode 100644 index 000000000..0ca59eed9 --- /dev/null +++ b/starter/06-Components/carousel/carousel.html @@ -0,0 +1,57 @@ + + + + + + + Carousel Component + + + + +
+ Maria de Almeida +
+

+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, in qui culpa, tempore eos + ipsam sed assumenda odit neque quia perspiciatis!" +

+

Maria de Almeida

+

Senior Product Manager at EDP Comercial

+
+ + + + +
+ + + + +
+
+ + diff --git a/starter/06-Components/maria.jpg b/starter/06-Components/carousel/maria.jpg similarity index 100% rename from starter/06-Components/maria.jpg rename to starter/06-Components/carousel/maria.jpg diff --git a/starter/06-Components/hero/hero.css b/starter/06-Components/hero/hero.css new file mode 100644 index 000000000..52abc40c9 --- /dev/null +++ b/starter/06-Components/hero/hero.css @@ -0,0 +1,101 @@ +/* + SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + MAIN COLOR: #087f5b + GRAY COLOR: #343a40 + + +*/ + +@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ + +html { + font-family: 'Rubik', sans-serif; + color: #444; +} + +.container { + margin: 0 auto; + width: 1200px; +} + +nav { + font-size: 20px; + font-weight: 700; + display: flex; + justify-content: space-between; + padding-top: 32px; +} + +h1 { + font-size: 52px; + margin-bottom: 32px; + line-height: 1.05; +} + +h2 { + font-size: 44px; + margin-bottom: 48px; +} + +p { + font-size: 20px; + line-height: 1.6; + margin-bottom: 48px; +} + +section { + padding: 96px 0; +} + +.btn:link, +.btn:visited { + font-size: 20px; + font-weight: 600; + background-color: #e67e22; + color: #fff; + text-decoration: none; + display: inline-block; + padding: 16px 32px; + border-radius: 9px; +} + +header { + height: 100vh; + position: relative; + + background-image: url(hero.jpg); + background-image: linear-gradient(rgba(34, 34, 34, 0.6), rgba(34, 34, 34, 0.6)), url(hero.jpg); + + background-size: cover; + color: #fff; +} + +.header-container { + width: 1200px; + position: absolute; + + /* relation to parents size */ + left: 50%; + top: 50%; + /* Relation to element size */ + transform: translate(-50%, -50%); +} + +.header-container-inner { + width: 50%; +} diff --git a/starter/06-Components/hero/hero.html b/starter/06-Components/hero/hero.html new file mode 100644 index 000000000..cce3b255b --- /dev/null +++ b/starter/06-Components/hero/hero.html @@ -0,0 +1,43 @@ + + + + + + + Omifood Hero Section + + + + +
+ + +
+
+

A healty meal delivered to your door, every singel day

+

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

+ Start eating well +
+
+
+ +
+
+

Some random heading

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ullam in earum incidunt voluptatum + illo perferendis, nam voluptate necessitatibus ipsum adipisci libero quos possimus saepe minus + facilis, nemo corrupti magnam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque + impedit perferendis consequuntur dolor, distinctio eaque, dolore aperiam illum nisi harum corporis + quis nesciunt nulla, delectus rem. Hic, ea perspiciatis? Dignissimos! +

+
+
+ + diff --git a/starter/06-Components/hero.jpg b/starter/06-Components/hero/hero.jpg similarity index 100% rename from starter/06-Components/hero.jpg rename to starter/06-Components/hero/hero.jpg diff --git a/starter/06-Components/pagination/pagination.css b/starter/06-Components/pagination/pagination.css new file mode 100644 index 000000000..f011b4b74 --- /dev/null +++ b/starter/06-Components/pagination/pagination.css @@ -0,0 +1,92 @@ +/* + SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + MAIN COLOR: #087f5b + GRAY COLOR: #343a40 + + +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ + +body { + font-family: 'Inter', sans-serif; + color: #343a40; + line-height: 1; + + display: flex; + justify-content: center; +} + +.container { + margin-top: 200px; + display: flex; + align-items: center; + gap: 12px; +} + +.btn { + border: 1px solid #087f5b; + height: 48px; + width: 48px; + border-radius: 50%; + background: none; + cursor: pointer; +} + +.btn:hover { + background-color: #087f5b; +} + +.btn:hover .btn-icon { + stroke: #fff; +} + +.page-link:link, +.page-link:visited { + font-size: 18px; + color: #343a40; + text-decoration: none; + + height: 36px; + width: 36px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.page-link:hover, +.page-link:active, +.page-link.page-link--current { + background-color: #087f5b; + color: #fff; +} + +.btn-icon { + width: 24px; + height: 24px; + stroke: #087f5b; +} + +.dots { + color: #868e96; +} + +/* .fill { + background-color: #087f5b; + color: #fff; + padding: 12px; +} */ diff --git a/starter/06-Components/pagination/pagination.html b/starter/06-Components/pagination/pagination.html new file mode 100644 index 000000000..694d14aad --- /dev/null +++ b/starter/06-Components/pagination/pagination.html @@ -0,0 +1,50 @@ + + + + + + + Carousel Component + + + + +
+ + + 1 + 2 + 3 + 4 + 5 + 6 + ... + 23 + + +
+ + diff --git a/starter/06-Components/table/table.css b/starter/06-Components/table/table.css new file mode 100644 index 000000000..ec831a6a8 --- /dev/null +++ b/starter/06-Components/table/table.css @@ -0,0 +1,61 @@ +/* + SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + MAIN COLOR: #087f5b + GRAY COLOR: #343a40 + + +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ + +body { + font-family: 'Inter', sans-serif; + color: #343a40; + line-height: 1; + display: flex; + margin-top: 100px; + justify-content: center; +} + +table { + width: 800px; + margin-top: 100px; + border-collapse: collapse; + font-size: 18px; + + /* border: 1px solid #343a40; */ +} + +thead th { + background-color: #087f5b; + color: #fff; + width: 25%; +} + +tbody tr:nth-child(odd) { + background-color: #f8f9fa; +} + +tbody tr:nth-child(even) { + background-color: #e9ecef; +} + +th, +td { + /* border: 1px solid #343a40; */ + padding: 16px 24px; + text-align: left; +} diff --git a/starter/06-Components/table/table.html b/starter/06-Components/table/table.html new file mode 100644 index 000000000..9da4b9e72 --- /dev/null +++ b/starter/06-Components/table/table.html @@ -0,0 +1,56 @@ + + + + + + + Carousel 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/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..8b48c04f9 100644 --- a/starter/07-Omnifood-Desktop/content/content.md +++ b/starter/07-Omnifood-Desktop/content.md @@ -119,10 +119,26 @@ Create account Sign in iOS app Android app + About Omnifood For Business Cooking partners Careers + Recipe directory Help center Privacy & terms + +###### + +## Sections + +- Logo + Navigation +- Hero +- Featured in +- How it works +- Meals (and list of diets) +- Testemonials + Gallery +- Priceing + Features +- CTA +- 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..a2adb0a72 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,277 @@ +/* +--- 01 TYPOGRAPHY SYSTEM +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Font weights +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +- Line heights +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e +- Shades: +#cf711f +#45260a +- Accents: +- Greys +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 06 BORDER-RADIUS +Default: 9px +Medium: 11px + +--- 07 WHITESPACE +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + overflow-x: hidden; +} + +html { + /* font-size: 10px; */ + /* 10px / 16px = 0.625 = 62.5% */ + /* Percenteage of user's browser font-size settings */ + font-size: 62.5%; + /* scroll-behavior: smooth; */ +} + +body { + font-family: 'Rubik', sans-serif; + line-height: 1; + font-weight: 400; + color: #555; + position: relative; + + /* Only works if there is nothing absolutely positioned in relation to body */ +} + +/* body .sticky { + margin-top: 8rem; +} */ + +/****************************/ +/* GENERAL REUSEABLE COMPONENTS */ +/****************************/ + +.container { + /* 1140px also alot used */ + max-width: 120rem; + margin: 0 auto; +} + +.grid { + display: grid; + row-gap: 9.6rem; + column-gap: 6.4rem; + padding: 0 3.2rem; +} + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + color: #333; + font-weight: 700; + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn, +.btn:link, +.btn:visited { + display: inline-block; + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + /* Only for .btn it self */ + border: none; + cursor: pointer; + font-family: inherit; + + transition: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* Trick to add border inside button (avoid padding whole site) */ + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + align-self: end; + padding: 1.2rem; + + background-color: #45260a; + color: #fdf2e9; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.link:link, +.link:visited { + display: inline-block; + text-decoration: none; + color: #e67e22; + 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; + line-height: 1.2; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +*:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +/* Helpers */ + +.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..c73c44a0e --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/queries.css @@ -0,0 +1,339 @@ +/* rem and em do NOT depend on html font-size in media queries! +Insted, 1rem = 1em = 16px */ + +/* X px / 16 = EM */ + +/****************************/ +/* BELOW 1344 PX (smaller desktops) */ +/****************************/ +@media (max-width: 84em) { + .hero { + max-width: 120rem; + } + + .heading-primary { + font-size: 4.4rem; + } + + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} + +/****************************/ +/* BELOW 1200 PX (Landscape Tablets) */ +/****************************/ +@media (max-width: 75em) { + html { + /* 9px (/16px) = */ + font-size: 56%; + } + + .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 944 PX (tablets) */ +/****************************/ +@media (max-width: 59em) { + html { + /* 8px = 50% */ + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-text-box, + .hero-image-box { + text-align: center; + } + + .hero-img { + width: 60%; + } + + .delivered-meals { + justify-content: center; + margin-top: 3.2rem; + } + + .logos img { + height: 2.4rem; + } + + .stem-number { + font-size: 7.4rem; + } + + .meal-content { + padding: 2.4rem 3.2rem 3.2rem 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + 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: 9999; + } + + .main-nav { + background-color: rgba(255, 255, 255, 0.9); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + 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; + + /* 1) Hide it visually */ + opacity: 0; + /* 2) Make it unaccessible to mouse and keyboard */ + pointer-events: none; + /* 3) Hide it from screen readers */ + visibility: hidden; + } + + .nav-open .main-nav { + z-index: 20; + 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 704 PX (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; + } + + .priceing-plan { + width: 100%; + } + + .grid--footer { + grid-template-columns: repeat(6, 1fr); + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + } + + .adress-col, + .logo-col { + grid-column: span 3; + margin-bottom: 3.2rem; + } +} + +/****************************/ +/* BELOW 544 PX (Phone) */ +/****************************/ +@media (max-width: 34em) { + .grid { + row-gap: 4.8rem; + } + + .grid--2-cols, + .grid--3-cols, + .grid--4-cols { + grid-template-columns: 1fr; + } + + .hero { + padding: 0 3.2rem; + } + + .section-hero { + padding: 2.4rem 0 6.4rem; + } + + .btn, + .btn:link, + .btn:visited { + padding: 2.4rem 1.6rem; + } + + .hero-img { + width: 80%; + } + + .logos img { + height: 1.2rem; + } + + .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; + } + + .cta-text-box { + padding: 3.2rem; + } +} + +/**************************/ +/* Fixing Safari flexbox gap */ +/**************************/ +.no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 4.8rem; +} + +.no-flexbox-gap .list-item:not(:last-child) { + margin-bottom: 1.6rem; +} + +.no-flexbox-gap .list-icon:not(:last-child) { + margin-right: 1.6rem; +} + +.no-flexbox-gap .delivered-faces { + margin-right: 1.6rem; +} + +.no-flexbox-gap .meal-attribute:not(:last-child) { + margin-bottom: 2rem; +} + +.no-flexbox-gap .meal-icon { + margin-right: 1.6rem; +} + +.no-flexbox-gap .footer-row div:not(:last-child) { + margin-right: 6.4rem; +} + +.no-flexbox-gap .social-links li:not(:last-child) { + margin-right: 2.4rem; +} + +.no-flexbox-gap .footer-nav li:not(:last-child) { + margin-bottom: 2.4rem; +} + +@media (max-width: 75em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 3.2rem; + } +} + +@media (max-width: 59em) { + .no-flexbox-gap .main-nav-list li:not(:last-child) { + margin-right: 0; + margin-bottom: 4.8rem; + } +} diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..248ad2108 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,671 @@ +/****************************/ +/* HEADER */ +/****************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* Makes it easy to make it sticky later on */ + height: 9.6rem; + padding: 0 4.8rem; +} + +.logo { + height: 2.2rem; +} + +/****************************/ +/* NAVIGATION */ +/****************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 4.8rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/* MOBILE */ +.btn-mobile-nav { + border: none; + background: none; + cursor: pointer; + + display: none; +} + +.icon-mobile-nav { + 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%; + background-color: rgba(255, 255, 255, 0.95); + height: 8rem; + padding-top: 0; + padding-bottom: 0; + z-index: 999; + 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; + + position: relative; +} + +.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 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-text-box { +} + +.stem-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::after, +.step-img-box::before { + content: ''; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + /* height: 60%; */ + /* 60% of parents width */ + 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-img { + width: 100%; +} + +.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; +} + +.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 { +} + +.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 */ +.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); +} + +/****************************/ +/* PRICEING SECTION */ +/****************************/ + +.section-priceing { + padding: 9.6rem 0; +} + +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} + +.priceing-plan { + border-radius: 11px; + width: 75%; + /* box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); */ +} + +.priceing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.priceing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} + +.priceing-plan--complete::after { + content: 'Best value'; + position: absolute; + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + top: 6%; + right: -18%; + background-color: #ffd43b; + color: #333; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} + +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sign-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-detials { + text-align: center; + font-size: 1.6rem; + line-height: 1.6; + font-weight: 500; + color: #888; +} + +/* Features */ +.feature { +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + margin-bottom: 3.2; + background-color: #fdf2e9; + 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; + left: 1.8rem; +} + +/****************************/ +/* PRICEING SECTION */ +/****************************/ + +.section-cta { + padding: 4.8rem 2.4rem 12.8rem; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + overflow: hidden; +} + +/* text */ +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #2e1907; +} + +.cta .heading-secondary { + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +/* image */ +.cta-img-box { + background-image: linear-gradient(to right bottom, rgba(235, 151, 78, 0.3), rgba(230, 125, 34, 0.3)), + url(../img/eating.jpg); + background-size: cover; + background-position: center; +} + +/* form */ +.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.01); +} + +.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; +} + +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.social-icon { + width: 2.4rem; + height: 2.4rem; +} + +.logo-col { + display: flex; + flex-direction: column; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.6rem; + color: #767676; + margin-top: auto; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.adress { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/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/img/favicon180x180.png b/starter/07-Omnifood-Desktop/img/favicon180x180.png new file mode 100644 index 000000000..763281d35 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon180x180.png differ diff --git a/starter/07-Omnifood-Desktop/img/favicon192x192.png b/starter/07-Omnifood-Desktop/img/favicon192x192.png new file mode 100644 index 000000000..71ffb2bf7 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon192x192.png differ diff --git a/starter/07-Omnifood-Desktop/img/favicon512x512.png b/starter/07-Omnifood-Desktop/img/favicon512x512.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon512x512.png differ diff --git a/starter/07-Omnifood-Desktop/img/favicon64x64.png b/starter/07-Omnifood-Desktop/img/favicon64x64.png new file mode 100644 index 000000000..168d4b45d Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/favicon64x64.png differ 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-1200x1184-min.webp b/starter/07-Omnifood-Desktop/img/hero-1200x1184-min.webp new file mode 100644 index 000000000..e18b67f04 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/hero-1200x1184-min.webp differ diff --git a/starter/07-Omnifood-Desktop/img/hero1200x1184-min.png b/starter/07-Omnifood-Desktop/img/hero1200x1184-min.png new file mode 100644 index 000000000..8283b05e7 Binary files /dev/null and b/starter/07-Omnifood-Desktop/img/hero1200x1184-min.png 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..883c78f10 --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,617 @@ + + + + + + + + + + + + + + + + + + + + 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 enjoing good, 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 references section 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 +
    • +
  • + Pescatarian +
    • +
  • + Gluten-free +
    • +
  • + Lactose-free +
    • +
  • + Keto +
    • +
  • + Paleo +
    • +
  • + Low FODMAP +
    • +
  • + Kid-friendly +
    • +
+
+
+ +
+ See all recipes → +
+
+ +
+
+ Testimonials +

Once you try it, you can't go back

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

— Dave Bryson

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

— Ben Hadley

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

— Steve Miller

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

— Hannah Smith

+
+
+
+ +
+
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+ +
+ Photo of beautifully arraged food +
+
+
+ +
+
+ Priceing +

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..58780fb0c --- /dev/null +++ b/starter/07-Omnifood-Desktop/js/script.js @@ -0,0 +1,73 @@ +/////////////////////////////////////////////////////////// +// Fixing scrolling animation +const allLink = document.querySelectorAll('a:link'); +const headerEl = document.querySelector('.header'); + +allLink.forEach(function (link) { + link.addEventListener('click', function (e) { + e.preventDefault(); + const href = link.getAttribute('href'); + + // Scroll back to top + if (href === '#') window.scrollTo({ top: 0, behavior: 'smooth' }); + + // Scroll to spesific section + if (href !== '#' && href.startsWith('#')) { + const sectionEl = document.querySelector(href); + sectionEl.scrollIntoView({ behavior: 'smooth' }); + } + + // close mobile navigation + if (link.classList.contains('main-nav-link')) headerEl.classList.toggle('nav-open'); + }); +}); + +/////////////////////////////////////////////////////////// +// Sticky Navigation +const heroSection = document.getElementById('hero'); + +const obs = new IntersectionObserver( + function (entries) { + const ent = entries[0]; + if (!ent.isIntersecting) document.body.classList.add('sticky'); + else document.body.classList.remove('sticky'); + }, + { + // In the viewport + root: null, + threshold: 0, + rootMargin: '-80px', + } +); +obs.observe(heroSection); + +/////////////////////////////////////////////////////////// +// get and set current year in footer copy right +document.getElementById('year').textContent = new Date().getFullYear(); + +/////////////////////////////////////////////////////////// +// Make mobile navigation work +const btnNav = document.querySelector('.btn-mobile-nav'); +btnNav.addEventListener('click', () => { + headerEl.classList.toggle('nav-open'); +}); + +/////////////////////////////////////////////////////////// +// Fixing flexbox gap property missing in some Safari versions +function checkFlexGap() { + var flex = document.createElement('div'); + flex.style.display = 'flex'; + flex.style.flexDirection = 'column'; + flex.style.rowGap = '1px'; + + flex.appendChild(document.createElement('div')); + flex.appendChild(document.createElement('div')); + + document.body.appendChild(flex); + var isSupported = flex.scrollHeight === 1; + flex.parentNode.removeChild(flex); + console.log(isSupported); + + if (!isSupported) document.body.classList.add('no-flexbox-gap'); +} +checkFlexGap(); diff --git a/starter/07-Omnifood-Desktop/manifest.webmanifest b/starter/07-Omnifood-Desktop/manifest.webmanifest new file mode 100644 index 000000000..564250fd5 --- /dev/null +++ b/starter/07-Omnifood-Desktop/manifest.webmanifest @@ -0,0 +1,14 @@ +{ + "icons": [ + { + "src": "/img/favicon192x192.png", + "type":"image/png", + "sizes": "192x192" + }, + { + "src": "/img/favicon512x512.png", + "type":"image/png", + "sizes": "512x512" + } + ] +} \ No newline at end of file