diff --git a/README.md b/README.md index 88e3430a5..2400b0fcc 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,3 @@ -# Course Material and FAQ for "Build Responsive Real-World Websites with HTML and CSS" +# Initial Commerce Website -This repo contains starter files and final code for all sections and projects contained in the course. - -Use starter code to start each section, and **final code to compare it with your own code whenever something doesn't work**! - -👇 **_Please read the following Frequently Asked Questions (FAQ) carefully before starting the course_** 👇 - -## FAQ - -### Q1: How do I download the files? - -**A:** If you're new to GitHub and just want to download the entire code, hit the green button saying "Code", and then choose the "Download ZIP" option. If you can't see the button (on mobile), use [this link](https://github.com/jonasschmedtmann/html-css-course/archive/master.zip) instead. - -### Q2: I'm stuck! Where do I get help? - -**A:** Have you actually tried to fix the problem on your own? Have you compared your code to the final code? If you failed fixing your problem, please **post a detailed description of the problem to the Q&A area of that video over at Udemy**, along with a [codepen](https://codepen.io/pen/) containing your code. You will get help there. - -### Q3: What VSCode theme are you using? What about extensions and settings? - -**A:** I use [One Monokai](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai) in this course. [Here is the complete VS Code setup for this course](vscode-setup.md). - -### Q4: Can I see the final version of the Omnifood project? - -**A:** Sure! Here you go: [Omnifood](https://www.omnifood.dev). - -### Q5: Where can I find the coding challenge solutions? - -**A:** They are all on codepen, in [this collection](https://codepen.io/collection/7b5e288cb64df1ecc5da8d7a0e78c007?grid_type=list). - -### Q6: Where is the resources page you keep mentioning? - -**A:** It's on my website at . You can subscribe for updates 😉 - -### Q7: Videos don't load, can you fix it? - -**A:** Unfortunately, there is nothing I can do about it. The course is hosted on Udemy, and sometimes they have technical issues like this. Please just come back a bit later or [contact their support team](https://support.udemy.com/hc/en-us). - -### Q8: Videos are blurred / have low quality, can you fix it? - -**A:** Please open video settings and change the quality from 'Auto' to another value, for example 720p. If that doesn't help, please [contact the Udemy support team](https://support.udemy.com/hc/en-us). - -### Q9: I want to put these projects in my portfolio. Is that allowed? - -**A:** Absolutely! Just make sure you actually built them yourself by following the course, and that you understand what you did. What is **not allowed** is that you create your own course/videos/articles based on this course's content! - -### Q10: I love your courses and want to get updates on new courses. How? - -**A:** First, you can subscribe to my email list [at my website](http://codingheroes.io/resources). Plus, I make important announcements on twitter [@jonasschmedtman](https://twitter.com/jonasschmedtman), so you should definitely follow me there 🔥 - -### Q11: How do I get my certificate of completion? - -**A:** A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the "Your progress" indicator in the top right-hand corner of the course page. If you want to change your name on the certificate, please [contact the Udemy support team](https://support.udemy.com/hc/en-us). - -### Q12: Can you add subtitles in my language? - -**A:** No. I provide professional English captions, but Udemy is responsible for subtitles in all other languages (automatic translations). So please [contact the Udemy support team](https://support.udemy.com/hc/en-us) to request your own language. - -### Q13: Do you accept pull requests? - -**A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. However, please feel free to add an issue if you found one. +This repo contains the draft code for the first commerce page that will be used for sale of the company stuff diff --git a/starter/01-Test/index.html b/starter/01-Test/index.html new file mode 100644 index 000000000..302210ffe --- /dev/null +++ b/starter/01-Test/index.html @@ -0,0 +1,13 @@ + + + + + + + My first wepage + + +

Hello, world

+

My name is James and this is my redacted webpage

+ + diff --git a/starter/02-HTML-Fundamentals/, b/starter/02-HTML-Fundamentals/, new file mode 100644 index 000000000..e69de29bb diff --git a/starter/02-HTML-Fundamentals/Challenge2.html b/starter/02-HTML-Fundamentals/Challenge2.html new file mode 100644 index 000000000..35faa5681 --- /dev/null +++ b/starter/02-HTML-Fundamentals/Challenge2.html @@ -0,0 +1,27 @@ +
+

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/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100644 index 000000000..9cf2fa68d --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,13 @@ + + + + + + + BLOG + + +

BLOG

+ return to index + + 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..7c7d61be9 --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,140 @@ + + + + + The Basic Language of the web: HTML + + + + + +
+

📘 The Code Magazine

+ + +
+ +
+
+

The Basic Language of the Web: HTML

+ + Laura Jones Picture + +

Posted by Laura Jones on Monday, June 21st 2027

+ HTML code on a screen +
+

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

+

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

+

What is HTML?

+

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

+ +

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

+

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

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

+ You can learn more at 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!

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

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/challenge1/style.css b/starter/03-CSS-Fundamentals/challenge1/style.css new file mode 100644 index 000000000..f7c2fb427 --- /dev/null +++ b/starter/03-CSS-Fundamentals/challenge1/style.css @@ -0,0 +1,87 @@ +*{ + margin: 0; + padding: 0; +} + + +body { + font-family: sans-serif; + line-height: 1.4; +} + +/* .container{ + width: 825px; + margin: 0 auto; +} */ + +/* PRODUCT */ +.product { + border: 4px solid black; + width: 825px; + margin: 50px auto +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; +} + +/* PRODUCT INFORMATION */ +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; + margin-bottom: 20px; +} + +:link, +.more-info:visited { + color: black; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +/* PRODUCT DETAILS */ +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; + margin-top: 30px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} +.details-list li{ + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + width: 100%; + border-top: 4px solid black; +padding: 15px; +} + +.add-cart:hover { + color: #000; + background-color: #fff; + } diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html index df8a623a8..3f237030b 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 @@ -14,133 +16,152 @@

The Basic Language of the Web: HTML

The Basic Language of the Web: HTML
The Basic Language of the Web: HTML
--> - -
-

📘 The Code Magazine

- - -
- -
-
-

The Basic Language of the Web: HTML

- - Headshot of Laura Jones - -

Posted by Laura Jones on Monday, June 21st 2027

- - HTML code on a screen +
+
+

📘 The Code Magazine

+ +
-

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

- -

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

- -

What is HTML?

-

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

-

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

-

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

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

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

- -

Why should you learn HTML?

- -

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

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

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

-
- - - - + + + +

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

+ +

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

+ +

What is HTML?

+

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

+

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

+

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

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

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

+ +

Why should you learn HTML?

+ +

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

+ + + +

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

+ + + + + + + diff --git a/starter/03-CSS-Fundamentals/style.css b/starter/03-CSS-Fundamentals/style.css new file mode 100644 index 000000000..f9a8f8319 --- /dev/null +++ b/starter/03-CSS-Fundamentals/style.css @@ -0,0 +1,293 @@ +* { + /* border-top: 10px solid #1098ad; */ + margin: 0; + padding: 0; +} + +/* PAGE SECTIONS */ +body { + color: #444; + font-family: sans-serif; + + border-top: 10px solid #1098ad; + position: relative; +} + +.container { + width: 800px; + /* margin-left: auto; + margin-right: auto; */ + margin: 0 auto; +} + +.main-header { + background-color: #f7f7f7; + /* padding: 20px; + padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; + /* height: 80px; */ +} + +nav { + font-size: 18px; + /* text-align: center; */ +} + +article { + margin-bottom: 60px; +} + +<<<<<<< HEAD +.main-header { + background-color: #f7f7f7; + padding: 20px; + /* padding-left: 40px; + padding-right: 40px; */ + padding: 20px 40px; + margin-bottom: 60px; +} +======= +>>>>>>> fd3e78f7e0b319aae037e24ae655eb3f10115347 +.post-header { + margin-bottom: 40px; + /* position: relative; */ +} + +aside { + background-color: #f7f7f7; + border-top: 5px solid #1098ad; + border-bottom: 5px solid #1098ad; + /* padding-top: 50px; + padding-bottom: 50px; */ + padding: 50px 0; + width: 500px; +} + +/* SMALLER ELEMENTS */ +h1, +h2, +h3 { + color: #1098ad; +} + +h1 { + font-size: 26px; + text-transform: uppercase; + font-style: italic; +} + +h2 { + font-size: 40px; + margin-bottom: 30px; +} + +h3 { + font-size: 30px; + margin-bottom: 20px; + margin-top: 40px; +} + +h4 { + font-size: 20px; + text-transform: uppercase; + text-align: center; +} + +p { + font-size: 22px; + line-height: 1.5; + margin-bottom: 15px; +} + +ul, +ol { + margin-left: 50px; + margin-bottom: 20px; +} + +li { + font-size: 20px; + margin-bottom: 10px; + /* display: inline; */ +} + +li:last-child { + margin-bottom: 0; +} + +/* footer p { + font-size: 16px; +} */ + +/* article header p { + font-style: italic; +} */ + +#author { + font-style: italic; + font-size: 18px; +} + +#copyright { + font-size: 16px; +} + +.related-author { + font-size: 18px; + font-weight: bold; +} + +/* ul { + list-style: none; +} */ + +.related { + list-style: none; +} + +body { + /* background-color: orangered; */ +} + +/* .first-li { + font-weight: bold; +} */ + +li:first-child { + font-weight: bold; +} + +li:last-child { + font-style: italic; +} + +li:nth-child(even) { + /* color: red; */ +} + +/* Misconception: this won't work! */ +article p:first-child { + color: red; +} + +/* Styling links */ +a:link { + color: #1098ad; + text-decoration: none; +} + +a:visited { + /* color: #777; */ + color: #1098ad; +} + +a:hover { + color: orangered; + font-weight: bold; + text-decoration: underline orangered; +} + +a:active { + background-color: black; + font-style: italic; +} +/* LVHA */ + +.post-img { + width: 100%; + height: auto; +} + +nav a:link { + /* background-color: orangered; + margin: 20px; +<<<<<<< HEAD + padding: 20px; */ +======= + padding: 20px; + display: block; */ + +>>>>>>> fd3e78f7e0b319aae037e24ae655eb3f10115347 + margin-right: 30px; + margin-top: 10px; + display: inline-block; +} + +nav a:link:last-child { + margin-right: 0; +} +<<<<<<< HEAD +======= + +>>>>>>> fd3e78f7e0b319aae037e24ae655eb3f10115347 +button { + font-size: 22px; + padding: 20px; + cursor: pointer; +<<<<<<< HEAD + position: absolute; + bottom: 50px; + right: 50px; +} +======= + + position: absolute; + /* top: 50px; + left: 50px; */ + bottom: 50px; + right: 50px; +} + +>>>>>>> fd3e78f7e0b319aae037e24ae655eb3f10115347 +h1::first-letter { + font-style: normal; + margin-right: 5px; +} +<<<<<<< HEAD +/* resolving conflicts */ +/* #copyright { +======= + +h3 + p::first-line { +>>>>>>> fd3e78f7e0b319aae037e24ae655eb3f10115347 + color: red; +} + +h2 { + /* background-color: orange; */ + position: relative; +} + +h2::before { + content: "TOP"; + background-color: #ffe70e; + color: #444; + font-size: 16px; + font-weight: bold; + display: inline-block; + padding: 5px 10px; + position: absolute; + top: -10px; + right: -25px; +} + +/* Resolving conflicts */ +/* #copyright { + color: red; +} +.copyright { + color: blue; +} +.text { + color: yellow; +} +footer p { + color: green !important; +} */ + +/* nav a:link, +nav p { + font-size: 18px; +} */ diff --git a/starter/04-CSS-Layouts/codingchallenge/index.html b/starter/04-CSS-Layouts/codingchallenge/index.html new file mode 100644 index 000000000..9fa118ff1 --- /dev/null +++ b/starter/04-CSS-Layouts/codingchallenge/index.html @@ -0,0 +1,44 @@ +
+

Converse Chuck Taylor All Star Low Top

+ Chuck Taylor All Star Shoe +
+
+

$65.00

+

Free shipping

+
+

Sale

+ +

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

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

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch.
    • +
+
+ +
diff --git a/starter/04-CSS-Layouts/codingchallenge/stlye.css b/starter/04-CSS-Layouts/codingchallenge/stlye.css new file mode 100644 index 000000000..20c15e68c --- /dev/null +++ b/starter/04-CSS-Layouts/codingchallenge/stlye.css @@ -0,0 +1,158 @@ +* { + 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; + + display: grid; + grid-template-columns: 250px 1fr 1fr; + column-gap: 40px; +} + +.product-title { + text-align: center; + font-size: 22px; + text-transform: uppercase; + background-color: #f7f7f7; + padding: 15px; + grid-column: 1 / -1; +} + +/* PRODUCT INFORMATION */ +.product-info { + /* (825 - 8 - 250 - 80) / 2 */ + /* width: 243px; */ + flex: 1; + margin-top: 20px; +} + +.product-price { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; +} + +.price { + font-size: 24px; +} + +.shipping { + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + color: #777; +} + +.sale { + background-color: #ec2f2f; + color: #fff; + font-size: 12px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + padding: 7px 15px; + display: inline-block; + position: absolute; + top: -17px; + left: -38px; + + /* width: 40px; + text-align: center; */ +} + +.product-description { + margin-bottom: 10px; +} + +.more-info:link, +.more-info:visited { + color: black; + margin-bottom: 30px; + display: inline-block; +} + +.more-info:hover, +.more-info:active { + text-decoration: none; +} + +.product-colors { + display: flex; + gap: 10px; +} + +.color { + background-color: #000; + height: 22px; + width: 22px; +} + +.color-blue { + background-color: #2f6ee2; +} +.color-red { + background-color: #ec2f2f; +} +.color-yellow { + background-color: #f0bf1e; +} +.color-green { + background-color: #90cc20; +} +.color-brown { + background-color: #885214; +} + +/* PRODUCT DETAILS */ +.product-details { + /* width: 243px; */ + margin-top: 20px; + flex: 1; +} + +.details-title { + text-transform: uppercase; + font-size: 16px; + margin-bottom: 15px; +} + +.details-list { + list-style: square; + margin-left: 20px; +} + +.details-list li { + margin-bottom: 10px; +} + +/* BUTTON */ +.add-cart { + background-color: #000; + border: none; + color: #fff; + font-size: 20px; + text-transform: uppercase; + cursor: pointer; + padding: 15px; + width: 100%; + border-top: 4px solid black; + grid-column: 1 / -1; +} + +.add-cart:hover { + color: #000; + background-color: #fff; +} diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html index e2daa6d42..6d13364c1 100644 --- a/starter/04-CSS-Layouts/css-grid.html +++ b/starter/04-CSS-Layouts/css-grid.html @@ -1,4 +1,4 @@ - +git 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/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html index 15ecbeb77..0396ba281 100644 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -25,8 +25,8 @@

📘 The Code Magazine

Blog Challenges - Flexbox - CSS Grid + Flexbox + CSS Grid diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html index 92b74fd48..cc5f77b8a 100644 --- a/starter/05-Design/index.html +++ b/starter/05-Design/index.html @@ -5,6 +5,13 @@ + + + + Lisbon Chair Shop diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css index 77dfdffa3..e0eb152da 100644 --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -1,11 +1,15 @@ /* 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 +GREY COLOR: #343a40 +*/ + * { margin: 0; padding: 0; @@ -16,7 +20,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 +32,14 @@ body { header, section { - margin-bottom: 48px; + margin-bottom: 96px; } h2 { margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; + /* 24 / 30 / 36 */ } .grid-3-cols { @@ -39,6 +48,37 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + + display: inline-block; + border-radius: 50px 0 50px 0; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +img { + border-radius: 12px; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -48,7 +88,7 @@ header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; - margin-top: 48px; + margin-top: 64px; } .header-text-box { @@ -56,11 +96,19 @@ header { } h1 { - margin-bottom: 24px; + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + /* 44 / 52 / 62 */ + + /* 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 +117,28 @@ img { /* FEATURES */ .features-icon { + stroke: #087f5b; + width: 32px; + heigh: 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 +148,52 @@ img { .testimonial-box h2 { margin-bottom: 24px; + /* 20 / 24 / 30 */ + 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 +201,20 @@ h3 { } .chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; } .chair-price { display: flex; justify-content: space-between; + align-items: center; + font-size: 20px; } footer { - margin-bottom: 48px; + margin-bottom: 54px; + font-size: 14px; + color: #495057; } diff --git a/starter/06-Components/hero.jpg b/starter/06-Components/06-hero/hero.jpg similarity index 100% rename from starter/06-Components/hero.jpg rename to starter/06-Components/06-hero/hero.jpg diff --git a/starter/06-Components/06-hero/index.html b/starter/06-Components/06-hero/index.html new file mode 100644 index 000000000..63b70bd47 --- /dev/null +++ b/starter/06-Components/06-hero/index.html @@ -0,0 +1,50 @@ + + + + + + + Omifood Hero Section + + + + + +
+ + +
+
+

A healty meal delivered to your door, every single day

+

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

+ Start eating well +
+
+
+ +
+
+

Some random heading

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quas, + minus beatae sapiente debitis voluptatum, laudantium veritatis impedit + corrupti officia recusandae fugit, voluptates iure velit! Ad suscipit + vitae nobis optio. Lorem ipsum dolor sit, amet consectetur adipisicing + elit. Reiciendis sequi quam earum voluptas eum laboriosam at + cupiditate debitis in odio adipisci repudiandae enim ea, sint quos + similique! Debitis, facilis dolore? +

+
+
+ + diff --git a/starter/06-Components/06-hero/style.css b/starter/06-Components/06-hero/style.css new file mode 100644 index 000000000..887cee953 --- /dev/null +++ b/starter/06-Components/06-hero/style.css @@ -0,0 +1,96 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-family: "Rubik", sans-serif; + color: #444; +} + +.container { + margin: 0 auto; + width: 1200px; +} + +header { + /* background-color: orangered; */ + height: 100vh; + position: relative; + + background-image: linear-gradient( + rgba(34, 34, 34, 0.6), + rgba(34, 34, 34, 0.6) + ), + url(hero.jpg); + background-size: cover; + color: #fff; +} + +nav { + font-size: 20px; + font-weight: 700; + display: flex; + justify-content: space-between; + padding-top: 32px; + /* background-image: linear-gradient(to right, red, blue); */ + + /* background-color: green; */ +} + +.header-container { + width: 1200px; + position: absolute; + + /* In relation to PARENT size */ + left: 50%; + top: 50%; + + /* In relation to ELEMENT size */ + transform: translate(-50%, -50%); + + background-color: violet; + + /* text-align: center; */ +} + +.header-container-inner { + width: 50%; + + /* background-color: blue; */ +} + +h1 { + font-size: 52px; + margin-bottom: 32px; + line-height: 1.05; +} + +p { + font-size: 20px; + line-height: 1.6; + margin-bottom: 48px; +} + +.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; +} + +h2 { + font-size: 44px; + margin-bottom: 48px; +} + +section { + padding: 96px 0; + background-color: #f7f7f7; +} diff --git a/starter/06-Components/app-layout/index.html b/starter/06-Components/app-layout/index.html new file mode 100644 index 000000000..99ab26a61 --- /dev/null +++ b/starter/06-Components/app-layout/index.html @@ -0,0 +1,35 @@ + + + + + + + + + App Layout + + + + + + + + + + +
+ + + + + + + + + + +
+
Email view
+ + + diff --git a/starter/06-Components/app-layout/style.css b/starter/06-Components/app-layout/style.css new file mode 100644 index 000000000..6654efefe --- /dev/null +++ b/starter/06-Components/app-layout/style.css @@ -0,0 +1,82 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +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, +section, +main, +aside { + padding-top: 24px; +} + +nav { + background-color: #343a40; + color: white; + grid-row: 1 / -1; +} + +menu { + background-color: #7048e8; + grid-column: 2 / -1; + display: flex; + align-items: center; + gap: 12px; + padding: 0 40px; +} + +button { + display: inline-block; + font-size: 16px; + font-weight: bold; + background-color: #5f3dc4; + border: none; + cursor: pointer; + color: #fff; + padding: 8px 12px; +} + +button:last-child { + background-color: #d6336c; + margin-left: auto; +} + +section { + background-color: #e9ecef; + padding: 40px; + + /* How elements that don't fit into container appear */ + overflow: 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/challenge/index.html b/starter/06-Components/challenge/index.html new file mode 100644 index 000000000..882687088 --- /dev/null +++ b/starter/06-Components/challenge/index.html @@ -0,0 +1,60 @@ + + + + + + + + + Pagination Component + + + + + + + diff --git a/starter/06-Components/challenge/style.css b/starter/06-Components/challenge/style.css new file mode 100644 index 000000000..9b7d38d61 --- /dev/null +++ b/starter/06-Components/challenge/style.css @@ -0,0 +1,78 @@ +/* + 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 + GREY COLOR: #343a40 + */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Inter", sans-serif; + color: #343a40; + line-height: 1; + display: flex; + justify-content: center; +} + +.pagination { + display: flex; + align-items: center; + gap: 12px; + margin-top: 200px; +} + +.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; +} + +.btn-icon { + height: 24px; + width: 24px; + stroke: #087f5b; +} + +.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; +} + +.dots { + color: #868e96; +} diff --git a/starter/07-Omnifood-Desktop/css/general.css b/starter/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..6897f9e9d --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,267 @@ +/* +--- 01 TYPOGRAPHY SYSTEM +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +- Font weights +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 +- Line heights +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 +- Letter spacing +-0.5px +0.75px +--- 02 COLORS +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e +- Shades: +#cf711f +#45260a +- Accents: +- Greys +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 +--- 05 SHADOWS +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); +--- 06 BORDER-RADIUS +Default: 9px +Medium: 11px +--- 07 WHITESPACE +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + /* 10px / 16px = 0.625 = 62.5% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; +} + +/**************************/ +/* GENRAL REUSABLE COMPONENTS */ +/**************************/ + +.container { + /* 1140px */ + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; + + /* margin-bottom: 9.6rem; */ +} + +/* .grid:last-child { + margin-bottom: 0; +} */ + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + /* color: #45260a; */ + /* color: #343a40; */ + 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 necessary for .btn */ + border: none; + cursor: pointer; + font-family: inherit; + + /* 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; + + /* border: 3px solid #fff; */ + + /* 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-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +*: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/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..dde886185 --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,628 @@ +/**************************/ +/* HEADER */ +/**************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* Because we want header to be sticky later */ + height: 9.6rem; + padding: 0 4.8rem; +} + +.logo { + height: 2.2rem; +} + +/**************************/ +/* NAVIGATION */ +/**************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 3.2rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.2rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/**************************/ +/* HERO SECTION */ +/**************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/**************************/ +/* FEATURED IN SECTION */ +/**************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #888; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/**************************/ +/* HOW IT WORKS SECTION */ +/**************************/ + +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + position: relative; + + display: flex; + align-items: center; + justify-content: center; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + /* height: 60%; */ + + /* 60% of parent's 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%; + /* z-index: 10; */ +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.section-meals { + padding: 9.6rem 0; +} + +.meal { + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + border-radius: 11px; + overflow: hidden; + transition: all 0.4s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); +} + +.meal-content { + padding: 3.2rem 4.8rem 4.8rem 4.8rem; +} + +.meal-tags { + margin-bottom: 1.2rem; + display: flex; + gap: 0.4rem; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + text-transform: uppercase; + color: #333; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegetarian { + background-color: #51cf66; +} +.tag--vegan { + background-color: #94d82d; +} +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + font-size: 2.4rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + height: 2.4rem; + width: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +/**************************/ +/* TESTIMONIALS SECTION */ +/**************************/ + +.section-testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 4.8rem; + column-gap: 8rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-item img { + display: block; + width: 100%; + transition: all 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.princing-plan { + border-radius: 11px; + + width: 75%; +} + +.princing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.princing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} + +.princing-plan--complete::after { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} + +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} + +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sing-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fdf2e9; + margin-bottom: 3.2rem; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8; +} + +/**************************/ +/* CTA SECTION */ +/**************************/ + +.section-cta { + /* top / right / bottom / left */ + /* padding: 9.6rem 0 12.8rem 0; */ + + /* top / horizontal / left */ + padding: 4.8rem 0 12.8rem; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + /* background-color: #e67e22; */ + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta .heading-secondary { + /* color: #45260a; */ + color: inherit; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta *: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-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.6; + color: #767676; + margin-top: auto; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/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/content.md b/starter/07-Omnifood-Desktop/img/content.md similarity index 100% rename from starter/07-Omnifood-Desktop/content/content.md rename to starter/07-Omnifood-Desktop/img/content.md diff --git a/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg b/starter/07-Omnifood-Desktop/img/customers/ben.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/ben.jpg rename to starter/07-Omnifood-Desktop/img/customers/ben.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/starter/07-Omnifood-Desktop/img/customers/customer-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg rename to starter/07-Omnifood-Desktop/img/customers/customer-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg b/starter/07-Omnifood-Desktop/img/customers/dave.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/dave.jpg rename to starter/07-Omnifood-Desktop/img/customers/dave.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/starter/07-Omnifood-Desktop/img/customers/hannah.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg rename to starter/07-Omnifood-Desktop/img/customers/hannah.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg b/starter/07-Omnifood-Desktop/img/customers/steve.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/customers/steve.jpg rename to starter/07-Omnifood-Desktop/img/customers/steve.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/eating.jpg b/starter/07-Omnifood-Desktop/img/eating.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/eating.jpg rename to starter/07-Omnifood-Desktop/img/eating.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/favicon.png b/starter/07-Omnifood-Desktop/img/favicon.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/favicon.png rename to starter/07-Omnifood-Desktop/img/favicon.png diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-10.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-11.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-12.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-3.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-4.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-5.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-6.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-7.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-8.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg rename to starter/07-Omnifood-Desktop/img/gallery/gallery-9.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/starter/07-Omnifood-Desktop/img/hero.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/hero.png rename to starter/07-Omnifood-Desktop/img/hero.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png b/starter/07-Omnifood-Desktop/img/logos/business-insider.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/business-insider.png rename to starter/07-Omnifood-Desktop/img/logos/business-insider.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/forbes.png b/starter/07-Omnifood-Desktop/img/logos/forbes.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/forbes.png rename to starter/07-Omnifood-Desktop/img/logos/forbes.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/starter/07-Omnifood-Desktop/img/logos/techcrunch.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png rename to starter/07-Omnifood-Desktop/img/logos/techcrunch.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png rename to starter/07-Omnifood-Desktop/img/logos/the-new-york-times.png diff --git a/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png b/starter/07-Omnifood-Desktop/img/logos/usa-today.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/logos/usa-today.png rename to starter/07-Omnifood-Desktop/img/logos/usa-today.png diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/starter/07-Omnifood-Desktop/img/meals/meal-1.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg rename to starter/07-Omnifood-Desktop/img/meals/meal-1.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/starter/07-Omnifood-Desktop/img/meals/meal-2.jpg similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg rename to starter/07-Omnifood-Desktop/img/meals/meal-2.jpg diff --git a/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png b/starter/07-Omnifood-Desktop/img/omnifood-logo.png similarity index 100% rename from starter/07-Omnifood-Desktop/content/img/omnifood-logo.png rename to starter/07-Omnifood-Desktop/img/omnifood-logo.png diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..7cf37a8b0 --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,688 @@ + + + + + + + + + + + + + + + + + Omnifood + + +
+ + + + +
+ +
+
+
+
+

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

+

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

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

+ 250,000+ meals delivered last year! +

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

As featured in

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

+ Your daily dose of health in 3 simple steps +

+
+ +
+ +
+

01

+

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

+

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

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

02

+

Approve your weekly meal plan

+

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

+
+ + +
+

03

+

Receive meals at convenient time

+

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

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

+ Omnifood AI chooses from 5,000+ recipes +

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

Japanese Gyozas

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

Avocado Salad

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

Works with any diet:

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

Once you try it, you can't go back

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

— Dave Bryson

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

— Ben Hadley

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

— Steve Miller

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

— Hannah Smith

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

+ Eating well without breaking the bank +

+
+ +
+
+
+

Starter

+

$399

+

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

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

Complete

+

$649

+

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

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

Never cook again!

+

+ Our 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/08-Omnifood-Responsive/css/general.css b/starter/08-Omnifood-Responsive/css/general.css index 879f58295..c4f19c4d3 100644 --- a/starter/08-Omnifood-Responsive/css/general.css +++ b/starter/08-Omnifood-Responsive/css/general.css @@ -1,57 +1,43 @@ /* --- 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: - 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 */ @@ -64,9 +50,11 @@ Medium: 11px 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; } body { @@ -74,6 +62,9 @@ body { line-height: 1; font-weight: 400; color: #555; + + /* Only works if there is nothing absolutely positioned in relation to body */ + overflow-x: hidden; } /**************************/ @@ -115,9 +106,9 @@ body { grid-template-columns: repeat(4, 1fr); } -.grid--5-cols { +/* .grid--5-cols { grid-template-columns: repeat(5, 1fr); -} +} */ .grid--center-v { align-items: center; @@ -249,6 +240,7 @@ body { display: flex; align-items: center; gap: 1.6rem; + line-height: 1.2; } .list-icon { diff --git a/starter/08-Omnifood-Responsive/css/queries.css b/starter/08-Omnifood-Responsive/css/queries.css new file mode 100644 index 000000000..e24c6e732 --- /dev/null +++ b/starter/08-Omnifood-Responsive/css/queries.css @@ -0,0 +1,299 @@ +/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */ + +/**************************/ +/* BELOW 1344px (Smaller desktops) */ +/**************************/ + +@media (max-width: 84em) { + .hero { + max-width: 120rem; + } + + .heading-primary { + font-size: 4.4rem; + } + + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} + +/**************************/ +/* BELOW 1200px (Landscape Tablets) */ +/**************************/ + +@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 3.2rem 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; + } + + .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 */ + /* Allows NO transitions at all */ + /* display: none; */ + + /* 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 { + 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; + } + + .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-text-box { + padding: 3.2rem; + } + + .cta-img-box { + height: 32rem; + grid-row: 1; + } +} + +/* +- 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 +*/ diff --git a/starter/08-Omnifood-Responsive/css/style.css b/starter/08-Omnifood-Responsive/css/style.css index dde886185..cc82b4fcf 100644 --- a/starter/08-Omnifood-Responsive/css/style.css +++ b/starter/08-Omnifood-Responsive/css/style.css @@ -11,6 +11,7 @@ /* Because we want header to be sticky later */ height: 9.6rem; padding: 0 4.8rem; + position: relative; } .logo { @@ -25,7 +26,7 @@ list-style: none; display: flex; align-items: center; - gap: 3.2rem; + gap: 4.8rem; } .main-nav-link:link, @@ -56,6 +57,25 @@ 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; +} + /**************************/ /* HERO SECTION */ /**************************/ @@ -363,26 +383,26 @@ padding: 9.6rem 0; } -.princing-plan { +.pricing-plan { border-radius: 11px; width: 75%; } -.princing-plan--starter { +.pricing-plan--starter { justify-self: end; border: 2px solid #fdf2e9; padding: 4.6rem; } -.princing-plan--complete { +.pricing-plan--complete { background-color: #fdf2e9; padding: 4.8rem; position: relative; overflow: hidden; } -.princing-plan--complete::after { +.pricing-plan--complete::after { content: "Best value"; position: absolute; top: 6%; @@ -477,6 +497,7 @@ .cta { display: grid; + /* 2/3 = 66.6% + 1/3 = 33.3% */ grid-template-columns: 2fr 1fr; /* background-color: #e67e22; */ box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); diff --git a/starter/08-Omnifood-Responsive/index.html b/starter/08-Omnifood-Responsive/index.html index 7cf37a8b0..6d69f1bab 100644 --- a/starter/08-Omnifood-Responsive/index.html +++ b/starter/08-Omnifood-Responsive/index.html @@ -3,6 +3,8 @@ + + @@ -13,6 +15,7 @@ + + + +
@@ -122,6 +131,7 @@

matter what diet you follow!

+

-
+

Starter

$399

@@ -477,7 +487,7 @@

-
+

Complete

$649

@@ -639,6 +649,7 @@

Get your first meal for free!

Copyright © 2027 by Omnifood, Inc. All rights reserved.

+

Contact us

@@ -654,6 +665,7 @@

Get your first meal for free!

+