├── README.md ├── final ├── 02-HTML-Fundamentals │ ├── blog.html │ ├── content.txt │ ├── img │ │ ├── challenges.jpg │ │ ├── laura-jones.jpg │ │ ├── post-img.jpg │ │ ├── related-1.jpg │ │ ├── related-2.jpg │ │ └── related-3.jpg │ └── index.html ├── 03-CSS-Fundamentals │ ├── blog.html │ ├── content.txt │ ├── img │ │ ├── challenges.jpg │ │ ├── laura-jones.jpg │ │ ├── post-img.jpg │ │ ├── related-1.jpg │ │ ├── related-2.jpg │ │ └── related-3.jpg │ ├── index.html │ └── style.css ├── 04-CSS-Layouts │ ├── blog.html │ ├── content.txt │ ├── css-grid.html │ ├── flexbox.html │ ├── img │ │ ├── challenges.jpg │ │ ├── laura-jones.jpg │ │ ├── post-img.jpg │ │ ├── related-1.jpg │ │ ├── related-2.jpg │ │ └── related-3.jpg │ ├── index.html │ └── style.css ├── 05-Design │ ├── chair-1.jpg │ ├── chair-2.jpg │ ├── chair-3.jpg │ ├── customers.jpg │ ├── hero.jpg │ ├── index.html │ └── style.css ├── 06-Components │ ├── 01-accordion.html │ ├── 02-carousel.html │ ├── 03-table.html │ ├── 04-pagination.html │ ├── 05-hero.html │ ├── 06-app-layout.html │ ├── component.html │ ├── hero.jpg │ └── maria.jpg ├── 07-Omnifood-Desktop │ ├── content.md │ ├── css │ │ ├── general.css │ │ └── style.css │ ├── img │ │ ├── app │ │ │ ├── app-screen-1.png │ │ │ ├── app-screen-2.png │ │ │ └── app-screen-3.png │ │ ├── customers │ │ │ ├── ben.jpg │ │ │ ├── customer-1.jpg │ │ │ ├── customer-2.jpg │ │ │ ├── customer-3.jpg │ │ │ ├── customer-4.jpg │ │ │ ├── customer-5.jpg │ │ │ ├── customer-6.jpg │ │ │ ├── dave.jpg │ │ │ ├── hannah.jpg │ │ │ └── steve.jpg │ │ ├── eating.jpg │ │ ├── favicon.png │ │ ├── gallery │ │ │ ├── gallery-1.jpg │ │ │ ├── gallery-10.jpg │ │ │ ├── gallery-11.jpg │ │ │ ├── gallery-12.jpg │ │ │ ├── gallery-2.jpg │ │ │ ├── gallery-3.jpg │ │ │ ├── gallery-4.jpg │ │ │ ├── gallery-5.jpg │ │ │ ├── gallery-6.jpg │ │ │ ├── gallery-7.jpg │ │ │ ├── gallery-8.jpg │ │ │ └── gallery-9.jpg │ │ ├── hero.png │ │ ├── logos │ │ │ ├── business-insider.png │ │ │ ├── forbes.png │ │ │ ├── techcrunch.png │ │ │ ├── the-new-york-times.png │ │ │ └── usa-today.png │ │ ├── meals │ │ │ ├── meal-1.jpg │ │ │ └── meal-2.jpg │ │ └── omnifood-logo.png │ └── index.html ├── 08-Omnifood-Responsive │ ├── content.md │ ├── css │ │ ├── general.css │ │ ├── queries.css │ │ └── style.css │ ├── img │ │ ├── app │ │ │ ├── app-screen-1.png │ │ │ ├── app-screen-2.png │ │ │ └── app-screen-3.png │ │ ├── customers │ │ │ ├── ben.jpg │ │ │ ├── customer-1.jpg │ │ │ ├── customer-2.jpg │ │ │ ├── customer-3.jpg │ │ │ ├── customer-4.jpg │ │ │ ├── customer-5.jpg │ │ │ ├── customer-6.jpg │ │ │ ├── dave.jpg │ │ │ ├── hannah.jpg │ │ │ └── steve.jpg │ │ ├── eating.jpg │ │ ├── favicon.png │ │ ├── gallery │ │ │ ├── gallery-1.jpg │ │ │ ├── gallery-10.jpg │ │ │ ├── gallery-11.jpg │ │ │ ├── gallery-12.jpg │ │ │ ├── gallery-2.jpg │ │ │ ├── gallery-3.jpg │ │ │ ├── gallery-4.jpg │ │ │ ├── gallery-5.jpg │ │ │ ├── gallery-6.jpg │ │ │ ├── gallery-7.jpg │ │ │ ├── gallery-8.jpg │ │ │ └── gallery-9.jpg │ │ ├── hero.png │ │ ├── logos │ │ │ ├── business-insider.png │ │ │ ├── forbes.png │ │ │ ├── techcrunch.png │ │ │ ├── the-new-york-times.png │ │ │ └── usa-today.png │ │ ├── meals │ │ │ ├── meal-1.jpg │ │ │ └── meal-2.jpg │ │ └── omnifood-logo.png │ └── index.html └── 09-Omnifood-Optimizations │ ├── content.md │ ├── css │ ├── general.css │ ├── queries.css │ └── style.css │ ├── img │ ├── app │ │ ├── app-screen-1.png │ │ ├── app-screen-2.png │ │ └── app-screen-3.png │ ├── apple-touch-icon.png │ ├── customers │ │ ├── ben.jpg │ │ ├── customer-1.jpg │ │ ├── customer-2.jpg │ │ ├── customer-3.jpg │ │ ├── customer-4.jpg │ │ ├── customer-5.jpg │ │ ├── customer-6.jpg │ │ ├── dave.jpg │ │ ├── hannah.jpg │ │ └── steve.jpg │ ├── eating.jpg │ ├── favicon-192.png │ ├── favicon-512.png │ ├── favicon.png │ ├── gallery │ │ ├── gallery-1.jpg │ │ ├── gallery-10.jpg │ │ ├── gallery-11.jpg │ │ ├── gallery-12.jpg │ │ ├── gallery-2.jpg │ │ ├── gallery-3.jpg │ │ ├── gallery-4.jpg │ │ ├── gallery-5.jpg │ │ ├── gallery-6.jpg │ │ ├── gallery-7.jpg │ │ ├── gallery-8.jpg │ │ └── gallery-9.jpg │ ├── hero-min.png │ ├── hero.png │ ├── hero.webp │ ├── logos │ │ ├── business-insider.png │ │ ├── forbes.png │ │ ├── techcrunch.png │ │ ├── the-new-york-times.png │ │ └── usa-today.png │ ├── meals │ │ ├── meal-1.jpg │ │ └── meal-2.jpg │ └── omnifood-logo.png │ ├── index.html │ ├── js │ └── script.js │ └── manifest.webmanifest ├── starter ├── 02-HTML-Fundamentals │ ├── challenges.jpg │ ├── content.txt │ ├── laura-jones.jpg │ ├── post-img.jpg │ ├── related-1.jpg │ ├── related-2.jpg │ └── related-3.jpg ├── 03-CSS-Fundamentals │ ├── blog.html │ ├── content.txt │ ├── img │ │ ├── challenges.jpg │ │ ├── laura-jones.jpg │ │ ├── post-img.jpg │ │ ├── related-1.jpg │ │ ├── related-2.jpg │ │ └── related-3.jpg │ └── index.html ├── 04-CSS-Layouts │ ├── blog.html │ ├── content.txt │ ├── css-grid.html │ ├── flexbox.html │ ├── img │ │ ├── challenges.jpg │ │ ├── laura-jones.jpg │ │ ├── post-img.jpg │ │ ├── related-1.jpg │ │ ├── related-2.jpg │ │ └── related-3.jpg │ ├── index.html │ └── style.css ├── 05-Design │ ├── chair-1.jpg │ ├── chair-2.jpg │ ├── chair-3.jpg │ ├── customers.jpg │ ├── hero.jpg │ ├── index.html │ └── style.css ├── 06-Components │ ├── hero.jpg │ └── maria.jpg ├── 07-Omnifood-Desktop │ └── content │ │ ├── content.md │ │ └── img │ │ ├── app │ │ ├── app-screen-1.png │ │ ├── app-screen-2.png │ │ └── app-screen-3.png │ │ ├── customers │ │ ├── ben.jpg │ │ ├── customer-1.jpg │ │ ├── customer-2.jpg │ │ ├── customer-3.jpg │ │ ├── customer-4.jpg │ │ ├── customer-5.jpg │ │ ├── customer-6.jpg │ │ ├── dave.jpg │ │ ├── hannah.jpg │ │ └── steve.jpg │ │ ├── eating.jpg │ │ ├── favicon.png │ │ ├── gallery │ │ ├── gallery-1.jpg │ │ ├── gallery-10.jpg │ │ ├── gallery-11.jpg │ │ ├── gallery-12.jpg │ │ ├── gallery-2.jpg │ │ ├── gallery-3.jpg │ │ ├── gallery-4.jpg │ │ ├── gallery-5.jpg │ │ ├── gallery-6.jpg │ │ ├── gallery-7.jpg │ │ ├── gallery-8.jpg │ │ └── gallery-9.jpg │ │ ├── hero.png │ │ ├── logos │ │ ├── business-insider.png │ │ ├── forbes.png │ │ ├── techcrunch.png │ │ ├── the-new-york-times.png │ │ └── usa-today.png │ │ ├── meals │ │ ├── meal-1.jpg │ │ └── meal-2.jpg │ │ └── omnifood-logo.png ├── 08-Omnifood-Responsive │ ├── content.md │ ├── css │ │ ├── general.css │ │ └── style.css │ ├── img │ │ ├── app │ │ │ ├── app-screen-1.png │ │ │ ├── app-screen-2.png │ │ │ └── app-screen-3.png │ │ ├── customers │ │ │ ├── ben.jpg │ │ │ ├── customer-1.jpg │ │ │ ├── customer-2.jpg │ │ │ ├── customer-3.jpg │ │ │ ├── customer-4.jpg │ │ │ ├── customer-5.jpg │ │ │ ├── customer-6.jpg │ │ │ ├── dave.jpg │ │ │ ├── hannah.jpg │ │ │ └── steve.jpg │ │ ├── eating.jpg │ │ ├── favicon.png │ │ ├── gallery │ │ │ ├── gallery-1.jpg │ │ │ ├── gallery-10.jpg │ │ │ ├── gallery-11.jpg │ │ │ ├── gallery-12.jpg │ │ │ ├── gallery-2.jpg │ │ │ ├── gallery-3.jpg │ │ │ ├── gallery-4.jpg │ │ │ ├── gallery-5.jpg │ │ │ ├── gallery-6.jpg │ │ │ ├── gallery-7.jpg │ │ │ ├── gallery-8.jpg │ │ │ └── gallery-9.jpg │ │ ├── hero.png │ │ ├── logos │ │ │ ├── business-insider.png │ │ │ ├── forbes.png │ │ │ ├── techcrunch.png │ │ │ ├── the-new-york-times.png │ │ │ └── usa-today.png │ │ ├── meals │ │ │ ├── meal-1.jpg │ │ │ └── meal-2.jpg │ │ └── omnifood-logo.png │ └── index.html └── 09-Omnifood-Optimizations │ ├── content.md │ ├── css │ ├── general.css │ ├── queries.css │ └── style.css │ ├── img │ ├── app │ │ ├── app-screen-1.png │ │ ├── app-screen-2.png │ │ └── app-screen-3.png │ ├── customers │ │ ├── ben.jpg │ │ ├── customer-1.jpg │ │ ├── customer-2.jpg │ │ ├── customer-3.jpg │ │ ├── customer-4.jpg │ │ ├── customer-5.jpg │ │ ├── customer-6.jpg │ │ ├── dave.jpg │ │ ├── hannah.jpg │ │ └── steve.jpg │ ├── eating.jpg │ ├── favicon.png │ ├── gallery │ │ ├── gallery-1.jpg │ │ ├── gallery-10.jpg │ │ ├── gallery-11.jpg │ │ ├── gallery-12.jpg │ │ ├── gallery-2.jpg │ │ ├── gallery-3.jpg │ │ ├── gallery-4.jpg │ │ ├── gallery-5.jpg │ │ ├── gallery-6.jpg │ │ ├── gallery-7.jpg │ │ ├── gallery-8.jpg │ │ └── gallery-9.jpg │ ├── hero.png │ ├── logos │ │ ├── business-insider.png │ │ ├── forbes.png │ │ ├── techcrunch.png │ │ ├── the-new-york-times.png │ │ └── usa-today.png │ ├── meals │ │ ├── meal-1.jpg │ │ └── meal-2.jpg │ └── omnifood-logo.png │ ├── index.html │ └── script.js └── vscode-setup.md /README.md: -------------------------------------------------------------------------------- 1 | # Course Material and FAQ for "Build Responsive Real-World Websites with HTML and CSS" 2 | 3 | This repo contains starter files and final code for all sections and projects contained in the course. 4 | 5 | Use starter code to start each section, and **final code to compare it with your own code whenever something doesn't work**! 6 | 7 | 👇 **_Please read the following Frequently Asked Questions (FAQ) carefully before starting the course_** 👇 8 | 9 | ## FAQ 10 | 11 | ### Q1: How do I download the files? 12 | 13 | **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. 14 | 15 | ### Q2: I'm stuck! Where do I get help? 16 | 17 | **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. 18 | 19 | ### Q3: What VSCode theme are you using? What about extensions and settings? 20 | 21 | **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). 22 | 23 | ### Q4: Can I see the final version of the Omnifood project? 24 | 25 | **A:** Sure! Here you go: [Omnifood](https://www.omnifood.dev). 26 | 27 | ### Q5: Where can I find the coding challenge solutions? 28 | 29 | **A:** They are all on codepen, in [this collection](https://codepen.io/collection/7b5e288cb64df1ecc5da8d7a0e78c007?grid_type=list). 30 | 31 | ### Q6: Where is the resources page you keep mentioning? 32 | 33 | **A:** It's on my website at . You can subscribe for updates 😉 34 | 35 | ### Q7: Videos don't load, can you fix it? 36 | 37 | **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). 38 | 39 | ### Q8: Videos are blurred / have low quality, can you fix it? 40 | 41 | **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). 42 | 43 | ### Q9: I want to put these projects in my portfolio. Is that allowed? 44 | 45 | **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! 46 | 47 | ### Q10: I love your courses and want to get updates on new courses. How? 48 | 49 | **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 🔥 50 | 51 | ### Q11: How do I get my certificate of completion? 52 | 53 | **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). 54 | 55 | ### Q12: Can you add subtitles in my language? 56 | 57 | **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. 58 | 59 | ### Q13: Do you accept pull requests? 60 | 61 | **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. 62 | -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | BLOG 5 | 6 | 7 |

BLOG

8 | Back to home 9 | 10 | 11 | -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/content.txt: -------------------------------------------------------------------------------- 1 | 📘 The Code Magazine 2 | 3 | The Basic Language of the Web: HTML 4 | 5 | Posted by Laura Jones on Monday, June 21st 2027 6 | 7 | All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. 8 | 9 | In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. 10 | 11 | What is HTML? 12 | 13 | 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). 14 | 15 | 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. 16 | 17 | In HTML, each element is made up of 3 parts: 18 | 19 | The opening tag 20 | The closing tag 21 | The actual element 22 | You can learn more at the MDN Web Docs. 23 | 24 | Why should you learn HTML? 25 | 26 | There are countless reasons for learning the fundamental language of the web. Here are 5 of them: 27 | 28 | To be able to use the fundamental web dev language 29 | To hand-craft beautiful websites instead of relying on tools like Worpress or Wix 30 | To build web applications 31 | To impress friends 32 | To have fun 😃 33 | 34 | Hopefully you learned something new here. See you next time! -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/img/challenges.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/02-HTML-Fundamentals/img/challenges.jpg -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/img/laura-jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/02-HTML-Fundamentals/img/laura-jones.jpg -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/img/post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/02-HTML-Fundamentals/img/post-img.jpg -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/img/related-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/02-HTML-Fundamentals/img/related-1.jpg -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/img/related-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/02-HTML-Fundamentals/img/related-2.jpg -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/img/related-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/02-HTML-Fundamentals/img/related-3.jpg -------------------------------------------------------------------------------- /final/02-HTML-Fundamentals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Basic Language of the Web: HTML 6 | 7 | 8 | 9 | 17 | 18 |
19 |

📘 The Code Magazine

20 | 21 | 27 |
28 | 29 |
30 |
31 |

The Basic Language of the Web: HTML

32 | 33 | Headshot of Laura Jones 39 | 40 |

Posted by Laura Jones on Monday, June 21st 2027

41 | 42 | HTML code on a screen 48 |
49 | 50 |

51 | All modern websites and web applications are built using three 52 | fundamental 53 | technologies: HTML, CSS and JavaScript. These are the languages of the 54 | web. 55 |

56 | 57 |

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

61 | 62 |

What is HTML?

63 |

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

69 |

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

74 |

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

75 | 76 |
    77 |
  1. The opening tag
    2. 78 |
  2. The closing tag
    3. 79 |
  3. The actual element
    4. 80 |
81 | 82 |

83 | You can learn more at 84 | MDN Web Docs. 89 |

90 | 91 |

Why should you learn HTML?

92 | 93 |

94 | There are countless reasons for learning the fundamental language of the 95 | web. Here are 5 of them: 96 |

97 | 98 | 108 | 109 |

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

110 |
111 | 112 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | BLOG 5 | 6 | 7 |

BLOG

8 | Back to home 9 | 10 | 11 | -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/content.txt: -------------------------------------------------------------------------------- 1 | 📘 The Code Magazine 2 | 3 | The Basic Language of the Web: HTML 4 | 5 | Posted by Laura Jones on Monday, June 21st 2027 6 | 7 | All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. 8 | 9 | In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. 10 | 11 | What is HTML? 12 | 13 | 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). 14 | 15 | 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. 16 | 17 | In HTML, each element is made up of 3 parts: 18 | 19 | The opening tag 20 | The closing tag 21 | The actual element 22 | You can learn more at the MDN Web Docs. 23 | 24 | Why should you learn HTML? 25 | 26 | There are countless reasons for learning the fundamental language of the web. Here are 5 of them: 27 | 28 | To be able to use the fundamental web dev language 29 | To hand-craft beautiful websites instead of relying on tools like Worpress or Wix 30 | To build web applications 31 | To impress friends 32 | To have fun 😃 33 | 34 | Hopefully you learned something new here. See you next time! -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/img/challenges.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/03-CSS-Fundamentals/img/challenges.jpg -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/img/laura-jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/03-CSS-Fundamentals/img/laura-jones.jpg -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/img/post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/03-CSS-Fundamentals/img/post-img.jpg -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/img/related-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/03-CSS-Fundamentals/img/related-1.jpg -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/img/related-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/03-CSS-Fundamentals/img/related-2.jpg -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/img/related-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/03-CSS-Fundamentals/img/related-3.jpg -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Basic Language of the Web: HTML 8 | 9 | 10 | 11 | 19 | 20 |
21 |
22 |

📘 The Code Magazine

23 | 24 | 31 |
32 | 33 |
34 |
35 |

The Basic Language of the Web: HTML

36 | 37 | Headshot of Laura Jones 43 | 44 |

45 | Posted by Laura Jones on Monday, June 21st 2027 46 |

47 | 48 | HTML code on a screen 55 | 56 |
57 | 58 |

59 | All modern websites and web applications are built using three 60 | fundamental 61 | technologies: HTML, CSS and JavaScript. These are the languages of the 62 | web. 63 |

64 | 65 |

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

69 | 70 |

What is HTML?

71 |

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

77 |

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

82 |

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

83 | 84 |
    85 |
  1. The opening tag
    2. 86 |
  2. The closing tag
    3. 87 |
  3. The actual element
    4. 88 |
89 | 90 |

91 | You can learn more at 92 | MDN Web Docs. 97 |

98 | 99 |

Why should you learn HTML?

100 | 101 |

102 | There are countless reasons for learning the fundamental language of 103 | the web. Here are 5 of them: 104 |

105 | 106 |
    107 |
  • 108 | To be able to use the fundamental web dev language 109 |
    • 110 |
  • 111 | To hand-craft beautiful websites instead of relying on tools like 112 | Worpress or Wix 113 |
    • 114 |
  • To build web applications
    • 115 |
  • To impress friends
    • 116 |
  • To have fun 😃
    • 117 |
118 | 119 |

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

120 |
121 | 122 | 158 | 159 |
160 |

161 | Copyright © 2027 by The Code Magazine. 162 |

163 |
164 |
165 | 166 | 167 | -------------------------------------------------------------------------------- /final/03-CSS-Fundamentals/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* border-top: 10px solid #1098ad; */ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | /* PAGE SECTIONS */ 8 | body { 9 | color: #444; 10 | font-family: sans-serif; 11 | 12 | border-top: 10px solid #1098ad; 13 | position: relative; 14 | } 15 | 16 | .container { 17 | width: 800px; 18 | /* margin-left: auto; 19 | margin-right: auto; */ 20 | margin: 0 auto; 21 | } 22 | 23 | .main-header { 24 | background-color: #f7f7f7; 25 | /* padding: 20px; 26 | padding-left: 40px; 27 | padding-right: 40px; */ 28 | padding: 20px 40px; 29 | margin-bottom: 60px; 30 | /* height: 80px; */ 31 | } 32 | 33 | nav { 34 | font-size: 18px; 35 | /* text-align: center; */ 36 | } 37 | 38 | article { 39 | margin-bottom: 60px; 40 | } 41 | 42 | .post-header { 43 | margin-bottom: 40px; 44 | /* position: relative; */ 45 | } 46 | 47 | aside { 48 | background-color: #f7f7f7; 49 | border-top: 5px solid #1098ad; 50 | border-bottom: 5px solid #1098ad; 51 | /* padding-top: 50px; 52 | padding-bottom: 50px; */ 53 | padding: 50px 0; 54 | width: 500px; 55 | } 56 | 57 | /* SMALLER ELEMENTS */ 58 | h1, 59 | h2, 60 | h3 { 61 | color: #1098ad; 62 | } 63 | 64 | h1 { 65 | font-size: 26px; 66 | text-transform: uppercase; 67 | font-style: italic; 68 | } 69 | 70 | h2 { 71 | font-size: 40px; 72 | margin-bottom: 30px; 73 | } 74 | 75 | h3 { 76 | font-size: 30px; 77 | margin-bottom: 20px; 78 | margin-top: 40px; 79 | } 80 | 81 | h4 { 82 | font-size: 20px; 83 | text-transform: uppercase; 84 | text-align: center; 85 | } 86 | 87 | p { 88 | font-size: 22px; 89 | line-height: 1.5; 90 | margin-bottom: 15px; 91 | } 92 | 93 | ul, 94 | ol { 95 | margin-left: 50px; 96 | margin-bottom: 20px; 97 | } 98 | 99 | li { 100 | font-size: 20px; 101 | margin-bottom: 10px; 102 | /* display: inline; */ 103 | } 104 | 105 | li:last-child { 106 | margin-bottom: 0; 107 | } 108 | 109 | /* footer p { 110 | font-size: 16px; 111 | } */ 112 | 113 | /* article header p { 114 | font-style: italic; 115 | } */ 116 | 117 | #author { 118 | font-style: italic; 119 | font-size: 18px; 120 | } 121 | 122 | #copyright { 123 | font-size: 16px; 124 | } 125 | 126 | .related-author { 127 | font-size: 18px; 128 | font-weight: bold; 129 | } 130 | 131 | /* ul { 132 | list-style: none; 133 | } */ 134 | 135 | .related { 136 | list-style: none; 137 | } 138 | 139 | body { 140 | /* background-color: orangered; */ 141 | } 142 | 143 | /* .first-li { 144 | font-weight: bold; 145 | } */ 146 | 147 | li:first-child { 148 | font-weight: bold; 149 | } 150 | 151 | li:last-child { 152 | font-style: italic; 153 | } 154 | 155 | li:nth-child(even) { 156 | /* color: red; */ 157 | } 158 | 159 | /* Misconception: this won't work! */ 160 | article p:first-child { 161 | color: red; 162 | } 163 | 164 | /* Styling links */ 165 | a:link { 166 | color: #1098ad; 167 | text-decoration: none; 168 | } 169 | 170 | a:visited { 171 | /* color: #777; */ 172 | color: #1098ad; 173 | } 174 | 175 | a:hover { 176 | color: orangered; 177 | font-weight: bold; 178 | text-decoration: underline orangered; 179 | } 180 | 181 | a:active { 182 | background-color: black; 183 | font-style: italic; 184 | } 185 | /* LVHA */ 186 | 187 | .post-img { 188 | width: 100%; 189 | height: auto; 190 | } 191 | 192 | nav a:link { 193 | /* background-color: orangered; 194 | margin: 20px; 195 | padding: 20px; 196 | 197 | display: block; */ 198 | 199 | margin-right: 30px; 200 | margin-top: 10px; 201 | display: inline-block; 202 | } 203 | 204 | nav a:link:last-child { 205 | margin-right: 0; 206 | } 207 | 208 | button { 209 | font-size: 22px; 210 | padding: 20px; 211 | cursor: pointer; 212 | 213 | position: absolute; 214 | /* top: 50px; 215 | left: 50px; */ 216 | bottom: 50px; 217 | right: 50px; 218 | } 219 | 220 | h1::first-letter { 221 | font-style: normal; 222 | margin-right: 5px; 223 | } 224 | 225 | h3 + p::first-line { 226 | /* color: red; */ 227 | } 228 | 229 | h2 { 230 | /* background-color: orange; */ 231 | position: relative; 232 | } 233 | 234 | h2::before { 235 | content: "TOP"; 236 | background-color: #ffe70e; 237 | color: #444; 238 | font-size: 16px; 239 | font-weight: bold; 240 | display: inline-block; 241 | padding: 5px 10px; 242 | position: absolute; 243 | top: -10px; 244 | right: -25px; 245 | } 246 | 247 | /* Resolving conflicts */ 248 | /* #copyright { 249 | color: red; 250 | } 251 | 252 | .copyright { 253 | color: blue; 254 | } 255 | 256 | .text { 257 | color: yellow; 258 | } 259 | 260 | footer p { 261 | color: green !important; 262 | } */ 263 | 264 | /* nav a:link, 265 | nav p { 266 | font-size: 18px; 267 | } */ 268 | -------------------------------------------------------------------------------- /final/04-CSS-Layouts/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | BLOG 5 | 6 | 7 |

BLOG

8 | Back to home 9 | 10 | 11 | -------------------------------------------------------------------------------- /final/04-CSS-Layouts/content.txt: -------------------------------------------------------------------------------- 1 | 📘 The Code Magazine 2 | 3 | The Basic Language of the Web: HTML 4 | 5 | Posted by Laura Jones on Monday, June 21st 2027 6 | 7 | All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. 8 | 9 | In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. 10 | 11 | What is HTML? 12 | 13 | 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). 14 | 15 | 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. 16 | 17 | In HTML, each element is made up of 3 parts: 18 | 19 | The opening tag 20 | The closing tag 21 | The actual element 22 | You can learn more at the MDN Web Docs. 23 | 24 | Why should you learn HTML? 25 | 26 | There are countless reasons for learning the fundamental language of the web. Here are 5 of them: 27 | 28 | To be able to use the fundamental web dev language 29 | To hand-craft beautiful websites instead of relying on tools like Worpress or Wix 30 | To build web applications 31 | To impress friends 32 | To have fun 😃 33 | 34 | Hopefully you learned something new here. See you next time! -------------------------------------------------------------------------------- /final/04-CSS-Layouts/css-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Grid 8 | 108 | 109 | 110 |
111 |
(1) HTML
112 |
(2) and
113 |
(3) CSS
114 |
(4) are
115 |
(5) amazing
116 |
(6) languages
117 | 118 |
(8) learn
119 |
120 | 121 |
122 |
(1)
123 |
(3)
124 |
(4)
125 |
(5)
126 |
(6)
127 |
(7)
128 |
129 | 130 | 131 | -------------------------------------------------------------------------------- /final/04-CSS-Layouts/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flexbox 8 | 80 | 81 | 82 |
83 |
HTML
84 |
and
85 |
CSS
86 |
are
87 |
amazing
88 | 89 | 91 |
92 | 93 | 94 | -------------------------------------------------------------------------------- /final/04-CSS-Layouts/img/challenges.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/04-CSS-Layouts/img/challenges.jpg -------------------------------------------------------------------------------- /final/04-CSS-Layouts/img/laura-jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/04-CSS-Layouts/img/laura-jones.jpg -------------------------------------------------------------------------------- /final/04-CSS-Layouts/img/post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/04-CSS-Layouts/img/post-img.jpg -------------------------------------------------------------------------------- /final/04-CSS-Layouts/img/related-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/04-CSS-Layouts/img/related-1.jpg -------------------------------------------------------------------------------- /final/04-CSS-Layouts/img/related-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/04-CSS-Layouts/img/related-2.jpg -------------------------------------------------------------------------------- /final/04-CSS-Layouts/img/related-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/04-CSS-Layouts/img/related-3.jpg -------------------------------------------------------------------------------- /final/05-Design/chair-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/05-Design/chair-1.jpg -------------------------------------------------------------------------------- /final/05-Design/chair-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/05-Design/chair-2.jpg -------------------------------------------------------------------------------- /final/05-Design/chair-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/05-Design/chair-3.jpg -------------------------------------------------------------------------------- /final/05-Design/customers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/05-Design/customers.jpg -------------------------------------------------------------------------------- /final/05-Design/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/05-Design/hero.jpg -------------------------------------------------------------------------------- /final/05-Design/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | SPACING SYSTEM (px) 3 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 4 | 5 | FONT SIZE SYSTEM (px) 6 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 7 | */ 8 | 9 | /* 10 | MAIN COLOR: #087f5b 11 | GREY COLOR: #343a40 12 | */ 13 | 14 | * { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | /* ------------------------ */ 21 | /* GENERAL STYLES */ 22 | /* ------------------------ */ 23 | body { 24 | font-family: "Inter", sans-serif; 25 | color: #343a40; 26 | border-bottom: 8px solid #087f5b; 27 | } 28 | 29 | .container { 30 | width: 960px; 31 | margin: 0 auto; 32 | } 33 | 34 | header, 35 | section { 36 | margin-bottom: 96px; 37 | } 38 | 39 | h2 { 40 | margin-bottom: 48px; 41 | font-size: 36px; 42 | letter-spacing: -0.5px; 43 | /* 24 / 30 / 36 */ 44 | } 45 | 46 | .grid-3-cols { 47 | display: grid; 48 | grid-template-columns: repeat(3, 1fr); 49 | column-gap: 80px; 50 | } 51 | 52 | .btn:link, 53 | .btn:visited { 54 | background-color: #087f5b; 55 | color: #fff; 56 | text-decoration: none; 57 | text-transform: uppercase; 58 | font-weight: 500; 59 | 60 | display: inline-block; 61 | border-radius: 100px; 62 | } 63 | 64 | .btn:hover, 65 | .btn:active { 66 | background-color: #099268; 67 | } 68 | 69 | .btn--big { 70 | font-size: 18px; 71 | padding: 16px 32px; 72 | } 73 | 74 | .btn--small { 75 | font-size: 14px; 76 | padding: 8px 12px; 77 | } 78 | 79 | img { 80 | border-radius: 12px; 81 | } 82 | 83 | /* ------------------------ */ 84 | /* COMPONENT STYLES */ 85 | /* ------------------------ */ 86 | 87 | /* HEADER */ 88 | header { 89 | display: grid; 90 | grid-template-columns: repeat(2, 1fr); 91 | column-gap: 80px; 92 | margin-top: 64px; 93 | } 94 | 95 | .header-text-box { 96 | align-self: center; 97 | } 98 | 99 | h1 { 100 | margin-bottom: 32px; 101 | font-size: 44px; 102 | line-height: 1.1; 103 | letter-spacing: -1px; 104 | /* 44 / 52 / 62 */ 105 | 106 | /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */ 107 | } 108 | 109 | .header-text { 110 | margin-bottom: 24px; 111 | font-size: 18px; 112 | line-height: 1.7; 113 | } 114 | 115 | img { 116 | width: 100%; 117 | } 118 | 119 | /* FEATURES */ 120 | .features-icon { 121 | stroke: #087f5b; 122 | width: 32px; 123 | heigh: 32px; 124 | margin-bottom: 24px; 125 | } 126 | 127 | .features-title { 128 | margin-bottom: 16px; 129 | font-size: 20px; 130 | } 131 | 132 | .features-text { 133 | font-size: 18px; 134 | line-height: 1.7; 135 | } 136 | 137 | /* TESTIMONIAL */ 138 | .testimonial-section { 139 | background-color: #087f5b; 140 | color: #fff; 141 | padding: 24px; 142 | border-radius: 12px; 143 | } 144 | 145 | .testimonial-box { 146 | grid-column: 2 / -1; 147 | align-self: center; 148 | } 149 | 150 | .testimonial-box h2 { 151 | margin-bottom: 24px; 152 | /* 20 / 24 / 30 */ 153 | font-size: 24px; 154 | } 155 | 156 | .testimonial-text { 157 | font-style: italic; 158 | margin-bottom: 24px; 159 | font-size: 18px; 160 | line-height: 1.7; 161 | color: ##e6fcf5; 162 | } 163 | 164 | .testimonial-author { 165 | color: #c3fae8; 166 | } 167 | 168 | /* CHAIRS */ 169 | .chair { 170 | box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); 171 | border-radius: 12px; 172 | } 173 | 174 | .chair img { 175 | border-bottom-left-radius: 0; 176 | border-bottom-right-radius: 0; 177 | } 178 | 179 | .chair-box { 180 | padding: 32px; 181 | } 182 | 183 | h3 { 184 | margin-bottom: 24px; 185 | font-size: 20px; 186 | } 187 | 188 | .chair-details { 189 | list-style: none; 190 | margin-bottom: 48px; 191 | } 192 | 193 | .chair-details li { 194 | display: flex; 195 | align-items: center; 196 | gap: 12px; 197 | margin-bottom: 16px; 198 | } 199 | 200 | .chair-details li:last-child { 201 | margin-bottom: 0; 202 | } 203 | 204 | .chair-icon { 205 | stroke: #087f5b; 206 | width: 24px; 207 | height: 24px; 208 | } 209 | 210 | .chair-price { 211 | display: flex; 212 | justify-content: space-between; 213 | align-items: center; 214 | font-size: 20px; 215 | } 216 | 217 | footer { 218 | margin-bottom: 48px; 219 | font-size: 14px; 220 | color: #495057; 221 | } 222 | -------------------------------------------------------------------------------- /final/06-Components/02-carousel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Carousel Component 13 | 14 | 141 | 142 | 143 |
144 | Maria de Almeida 145 |
146 |

147 | "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia 148 | nesciunt aliquid ex atque quibusdam. Rerum officia unde suscipit quo 149 | sunt hic illo fugit." 150 |

151 |

Maria de Almeida

152 |

Senior Product Manager at EDP Comercial

153 |
154 | 155 | 171 | 187 |
188 | 189 | 190 | 191 | 192 |
193 |
194 | 195 | 196 | -------------------------------------------------------------------------------- /final/06-Components/03-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Accordion Component 13 | 14 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
ChairThe Laid BackThe Worker BeeThe Chair 4/2
Width80 cm60 cm220 cm
Height100 cm110 cm90 cm
Depth70 cm65 cm80 cm
Weight16 kg22 kg80 kg
111 | 112 | 113 | -------------------------------------------------------------------------------- /final/06-Components/04-pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Pagination Component 13 | 14 | 94 | 95 | 96 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /final/06-Components/05-hero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Omifood Hero Section 8 | 9 | 10 | 14 | 111 | 112 | 113 |
114 | 118 | 119 |
120 |
121 |

A healty meal delivered to your door, every single day

122 |

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

127 | Start eating well 128 |
129 |
130 |
131 | 132 |
133 |
134 |

Some random heading

135 |

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

144 |
145 |
146 | 147 | 148 | -------------------------------------------------------------------------------- /final/06-Components/06-app-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | App Layout 8 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 |
103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
114 |
Email view
115 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /final/06-Components/component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Accordion Component 13 | 14 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /final/06-Components/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/06-Components/hero.jpg -------------------------------------------------------------------------------- /final/06-Components/maria.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/06-Components/maria.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/content.md: -------------------------------------------------------------------------------- 1 | # Omnifood 2 | 3 | ## About Omnifood 4 | 5 | We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. 6 | 7 | ## Branding 8 | 9 | Headline: A healthy meal delivered to your door, every single day 10 | 11 | Brand color: #e67e22 12 | 13 | ## Omnifood Website Content 14 | 15 | ### Summary 16 | 17 | The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year! 18 | 19 | ### Omnifood features 20 | 21 | Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. 22 | Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. 23 | No waste: All our partners only use reusable containers to package all your meals. 24 | Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. 25 | 26 | ### How Omnifood works 27 | 28 | [Show big app images] 29 | 30 | **Your daily dose of health in 3 simple steps** 31 | 32 | 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! 33 | 34 | 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. 35 | 36 | 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! 37 | 38 | ### Omnifood works with any diet 39 | 40 | Vegetarian 41 | Vegan 42 | Pescatarian 43 | Gluten-free 44 | Lactose-free 45 | Keto 46 | Paleo 47 | Low FODMAP 48 | Kid-friendly 49 | 50 | ### Sample meals 51 | 52 | **Omnifood AI chooses from 5,000+ recipes** 53 | 54 | Meal 1: Japanese Gyozas 55 | 56 | - Category: Vegetarian 57 | - Calories: 650 58 | - NutriScore (Registered): 74 59 | - Average rating: 4.9 60 | - Number reviews: 537 61 | 62 | Meal 2: Avocado Salad 63 | 64 | - Category: Vegan and Paleo 65 | - Calories: 400 66 | - NutriScore (Registered): 92 67 | - Average rating: 4.8 68 | - Number reviews: 441 69 | 70 | ### We offer a free sample meal 71 | 72 | [Create simple form for users to sign up] 73 | 74 | 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! 75 | 76 | ### We have 2 pricing plans 77 | 78 | Prices include all applicable taxes. Users can cancel at any time. 79 | 80 | Starter: $399 per month 81 | 82 | - 1 meal per day 83 | - Order times are between 11am and 9pm 84 | - Delivery is free 85 | 86 | Complete: $649 per month 87 | 88 | - 2 meal2 per day 89 | - Order 24/7 90 | - Delivery is free 91 | - Get access to latest recipes 92 | 93 | ### Photo gallery 94 | 95 | [Use the 12 photos we provided] 96 | 97 | ### Customer testimonials 98 | 99 | [Photos of customers included] 100 | 101 | Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) 102 | 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) 103 | 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) 104 | 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) 105 | 106 | ### Section with logos of featured publications [see images] 107 | 108 | ### Contact information 109 | 110 | Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 111 | Phone: 415-201-6370 112 | Email: hello@omnifood.com 113 | 114 | Social profiles: instagram, facebook, twitter [links to them not available yet] 115 | 116 | ### Additional links [links not available yet] 117 | 118 | Create account 119 | Sign in 120 | iOS app 121 | Android app 122 | 123 | About Omnifood 124 | For Business 125 | Cooking partners 126 | Careers 127 | 128 | Recipe directory 129 | Help center 130 | Privacy & terms 131 | 132 | ###### 133 | 134 | ## Sections 135 | 136 | - Logo + Navigation 137 | - Hero 138 | - Featured in 139 | - How it works 140 | - Meals (and list of diets) 141 | - Testimonials + gallery 142 | - Pricing + features 143 | - CTA 144 | - Footer 145 | -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/css/general.css: -------------------------------------------------------------------------------- 1 | /* 2 | --- 01 TYPOGRAPHY SYSTEM 3 | 4 | - Font sizes (px) 5 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 6 | 7 | - Font weights 8 | Default: 400 9 | Medium: 500 10 | Semi-bold: 600 11 | Bold: 700 12 | 13 | - Line heights 14 | Default: 1 15 | Small: 1.05 16 | Medium: 1.2 17 | Paragraph default: 1.6 18 | 19 | - Letter spacing 20 | -0.5px 21 | 0.75px 22 | 23 | --- 02 COLORS 24 | 25 | - Primary: #e67e22 26 | - Tints: 27 | #fdf2e9 28 | #fae5d3 29 | #eb984e 30 | 31 | - Shades: 32 | #cf711f 33 | #45260a 34 | 35 | - Accents: 36 | - Greys 37 | 38 | #888 39 | #767676 (lightest grey allowed on #fff) 40 | #6f6f6f (lightest grey allowed on #fdf2e9) 41 | #555 42 | #333 43 | 44 | --- 05 SHADOWS 45 | 46 | 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); 47 | 48 | --- 06 BORDER-RADIUS 49 | 50 | Default: 9px 51 | Medium: 11px 52 | 53 | --- 07 WHITESPACE 54 | 55 | - Spacing system (px) 56 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 57 | */ 58 | 59 | * { 60 | padding: 0; 61 | margin: 0; 62 | box-sizing: border-box; 63 | } 64 | 65 | html { 66 | /* font-size: 10px; */ 67 | /* 10px / 16px = 0.625 = 62.5% */ 68 | /* Percentage of user's browser font-size setting */ 69 | font-size: 62.5%; 70 | } 71 | 72 | body { 73 | font-family: "Rubik", sans-serif; 74 | line-height: 1; 75 | font-weight: 400; 76 | color: #555; 77 | } 78 | 79 | /**************************/ 80 | /* GENRAL REUSABLE COMPONENTS */ 81 | /**************************/ 82 | 83 | .container { 84 | /* 1140px */ 85 | max-width: 120rem; 86 | padding: 0 3.2rem; 87 | margin: 0 auto; 88 | } 89 | 90 | .grid { 91 | display: grid; 92 | column-gap: 6.4rem; 93 | row-gap: 9.6rem; 94 | 95 | /* margin-bottom: 9.6rem; */ 96 | } 97 | 98 | /* .grid:last-child { 99 | margin-bottom: 0; 100 | } */ 101 | 102 | .grid:not(:last-child) { 103 | margin-bottom: 9.6rem; 104 | } 105 | 106 | .grid--2-cols { 107 | grid-template-columns: repeat(2, 1fr); 108 | } 109 | 110 | .grid--3-cols { 111 | grid-template-columns: repeat(3, 1fr); 112 | } 113 | 114 | .grid--4-cols { 115 | grid-template-columns: repeat(4, 1fr); 116 | } 117 | 118 | .grid--5-cols { 119 | grid-template-columns: repeat(5, 1fr); 120 | } 121 | 122 | .grid--center-v { 123 | align-items: center; 124 | } 125 | 126 | .heading-primary, 127 | .heading-secondary, 128 | .heading-tertiary { 129 | font-weight: 700; 130 | color: #333; 131 | /* color: #45260a; */ 132 | /* color: #343a40; */ 133 | letter-spacing: -0.5px; 134 | } 135 | 136 | .heading-primary { 137 | font-size: 5.2rem; 138 | line-height: 1.05; 139 | margin-bottom: 3.2rem; 140 | } 141 | 142 | .heading-secondary { 143 | font-size: 4.4rem; 144 | line-height: 1.2; 145 | margin-bottom: 9.6rem; 146 | } 147 | 148 | .heading-tertiary { 149 | font-size: 3rem; 150 | line-height: 1.2; 151 | margin-bottom: 3.2rem; 152 | } 153 | 154 | .subheading { 155 | display: block; 156 | font-size: 1.6rem; 157 | font-weight: 500; 158 | color: #cf711f; 159 | text-transform: uppercase; 160 | margin-bottom: 1.6rem; 161 | letter-spacing: 0.75px; 162 | } 163 | 164 | .btn, 165 | .btn:link, 166 | .btn:visited { 167 | display: inline-block; 168 | 169 | text-decoration: none; 170 | font-size: 2rem; 171 | font-weight: 600; 172 | padding: 1.6rem 3.2rem; 173 | border-radius: 9px; 174 | 175 | /* Only necessary for .btn */ 176 | border: none; 177 | cursor: pointer; 178 | font-family: inherit; 179 | 180 | /* Put transition on original "state" */ 181 | /* transition: background-color 0.3s; */ 182 | transition: all 0.3s; 183 | } 184 | 185 | .btn--full:link, 186 | .btn--full:visited { 187 | background-color: #e67e22; 188 | color: #fff; 189 | } 190 | 191 | .btn--full:hover, 192 | .btn--full:active { 193 | background-color: #cf711f; 194 | } 195 | 196 | .btn--outline:link, 197 | .btn--outline:visited { 198 | background-color: #fff; 199 | color: #555; 200 | } 201 | 202 | .btn--outline:hover, 203 | .btn--outline:active { 204 | background-color: #fdf2e9; 205 | 206 | /* border: 3px solid #fff; */ 207 | 208 | /* Trick to add border inside */ 209 | box-shadow: inset 0 0 0 3px #fff; 210 | } 211 | 212 | .btn--form { 213 | background-color: #45260a; 214 | color: #fdf2e9; 215 | align-self: end; 216 | padding: 1.2rem; 217 | } 218 | 219 | .btn--form:hover { 220 | background-color: #fff; 221 | color: #555; 222 | } 223 | 224 | .link:link, 225 | .link:visited { 226 | display: inline-block; 227 | color: #e67e22; 228 | text-decoration: none; 229 | border-bottom: 1px solid currentColor; 230 | padding-bottom: 2px; 231 | transition: all 0.3s; 232 | } 233 | 234 | .link:hover, 235 | .link:active { 236 | color: #cf711f; 237 | border-bottom: 1px solid transparent; 238 | } 239 | 240 | .list { 241 | list-style: none; 242 | display: flex; 243 | flex-direction: column; 244 | gap: 1.6rem; 245 | } 246 | 247 | .list-item { 248 | font-size: 1.8rem; 249 | display: flex; 250 | align-items: center; 251 | gap: 1.6rem; 252 | } 253 | 254 | .list-icon { 255 | width: 3rem; 256 | height: 3rem; 257 | color: #e67e22; 258 | } 259 | 260 | *:focus { 261 | outline: none; 262 | /* outline: 4px dotted #e67e22; */ 263 | /* outline-offset: 8px; */ 264 | box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); 265 | } 266 | 267 | /* HELPER/SETTINGS CLASSES */ 268 | .margin-right-sm { 269 | margin-right: 1.6rem !important; 270 | } 271 | 272 | .margin-bottom-md { 273 | margin-bottom: 4.8rem !important; 274 | } 275 | 276 | .center-text { 277 | text-align: center; 278 | } 279 | 280 | strong { 281 | font-weight: 500; 282 | } 283 | -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/app/app-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/app/app-screen-1.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/app/app-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/app/app-screen-2.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/app/app-screen-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/app/app-screen-3.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/ben.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/ben.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/customer-1.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/customer-2.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/customer-3.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/customer-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/customer-4.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/customer-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/customer-5.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/customer-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/customer-6.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/dave.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/hannah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/hannah.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/customers/steve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/customers/steve.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/eating.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/eating.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/favicon.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-10.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-11.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-12.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-5.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-6.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-7.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-8.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/gallery/gallery-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/gallery/gallery-9.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/hero.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/logos/business-insider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/logos/business-insider.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/logos/forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/logos/forbes.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/logos/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/logos/techcrunch.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/logos/the-new-york-times.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/logos/the-new-york-times.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/logos/usa-today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/logos/usa-today.png -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/meals/meal-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/meals/meal-1.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/meals/meal-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/meals/meal-2.jpg -------------------------------------------------------------------------------- /final/07-Omnifood-Desktop/img/omnifood-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/07-Omnifood-Desktop/img/omnifood-logo.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/content.md: -------------------------------------------------------------------------------- 1 | # Omnifood 2 | 3 | ## About Omnifood 4 | 5 | We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. 6 | 7 | ## Branding 8 | 9 | Headline: A healthy meal delivered to your door, every single day 10 | 11 | Brand color: #e67e22 12 | 13 | ## Omnifood Website Content 14 | 15 | ### Summary 16 | 17 | The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year! 18 | 19 | ### Omnifood features 20 | 21 | Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. 22 | Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. 23 | No waste: All our partners only use reusable containers to package all your meals. 24 | Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. 25 | 26 | ### How Omnifood works 27 | 28 | [Show big app images] 29 | 30 | **Your daily dose of health in 3 simple steps** 31 | 32 | 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! 33 | 34 | 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. 35 | 36 | 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! 37 | 38 | ### Omnifood works with any diet 39 | 40 | Vegetarian 41 | Vegan 42 | Pescatarian 43 | Gluten-free 44 | Lactose-free 45 | Keto 46 | Paleo 47 | Low FODMAP 48 | Kid-friendly 49 | 50 | ### Sample meals 51 | 52 | **Omnifood AI chooses from 5,000+ recipes** 53 | 54 | Meal 1: Japanese Gyozas 55 | 56 | - Category: Vegetarian 57 | - Calories: 650 58 | - NutriScore (Registered): 74 59 | - Average rating: 4.9 60 | - Number reviews: 537 61 | 62 | Meal 2: Avocado Salad 63 | 64 | - Category: Vegan and Paleo 65 | - Calories: 400 66 | - NutriScore (Registered): 92 67 | - Average rating: 4.8 68 | - Number reviews: 441 69 | 70 | ### We offer a free sample meal 71 | 72 | [Create simple form for users to sign up] 73 | 74 | 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! 75 | 76 | ### We have 2 pricing plans 77 | 78 | Prices include all applicable taxes. Users can cancel at any time. 79 | 80 | Starter: $399 per month 81 | 82 | - 1 meal per day 83 | - Order times are between 11am and 9pm 84 | - Delivery is free 85 | 86 | Complete: $649 per month 87 | 88 | - 2 meal2 per day 89 | - Order 24/7 90 | - Delivery is free 91 | - Get access to latest recipes 92 | 93 | ### Photo gallery 94 | 95 | [Use the 12 photos we provided] 96 | 97 | ### Customer testimonials 98 | 99 | [Photos of customers included] 100 | 101 | Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) 102 | 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) 103 | 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) 104 | 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) 105 | 106 | ### Section with logos of featured publications [see images] 107 | 108 | ### Contact information 109 | 110 | Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 111 | Phone: 415-201-6370 112 | Email: hello@omnifood.com 113 | 114 | Social profiles: instagram, facebook, twitter [links to them not available yet] 115 | 116 | ### Additional links [links not available yet] 117 | 118 | Create account 119 | Sign in 120 | iOS app 121 | Android app 122 | 123 | About Omnifood 124 | For Business 125 | Cooking partners 126 | Careers 127 | 128 | Recipe directory 129 | Help center 130 | Privacy & terms 131 | 132 | ###### 133 | 134 | ## Sections 135 | 136 | - Logo + Navigation 137 | - Hero 138 | - Featured in 139 | - How it works 140 | - Meals (and list of diets) 141 | - Testimonials + gallery 142 | - Pricing + features 143 | - CTA 144 | - Footer 145 | -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/app/app-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/app/app-screen-1.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/app/app-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/app/app-screen-2.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/app/app-screen-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/app/app-screen-3.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/ben.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/ben.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/customer-1.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/customer-2.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/customer-3.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/customer-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/customer-4.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/customer-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/customer-5.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/customer-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/customer-6.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/dave.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/hannah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/hannah.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/customers/steve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/customers/steve.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/eating.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/eating.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/favicon.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-10.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-11.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-12.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-5.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-6.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-7.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-8.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/gallery/gallery-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/gallery/gallery-9.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/hero.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/logos/business-insider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/logos/business-insider.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/logos/forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/logos/forbes.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/logos/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/logos/techcrunch.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/logos/the-new-york-times.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/logos/the-new-york-times.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/logos/usa-today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/logos/usa-today.png -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/meals/meal-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/meals/meal-1.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/meals/meal-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/meals/meal-2.jpg -------------------------------------------------------------------------------- /final/08-Omnifood-Responsive/img/omnifood-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/08-Omnifood-Responsive/img/omnifood-logo.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/content.md: -------------------------------------------------------------------------------- 1 | # Omnifood 2 | 3 | ## About Omnifood 4 | 5 | We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. 6 | 7 | ## Branding 8 | 9 | Headline: A healthy meal delivered to your door, every single day 10 | 11 | Brand color: #e67e22 12 | 13 | ## Omnifood Website Content 14 | 15 | ### Summary 16 | 17 | The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year! 18 | 19 | ### Omnifood features 20 | 21 | Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. 22 | Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. 23 | No waste: All our partners only use reusable containers to package all your meals. 24 | Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. 25 | 26 | ### How Omnifood works 27 | 28 | [Show big app images] 29 | 30 | **Your daily dose of health in 3 simple steps** 31 | 32 | 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! 33 | 34 | 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. 35 | 36 | 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! 37 | 38 | ### Omnifood works with any diet 39 | 40 | Vegetarian 41 | Vegan 42 | Pescatarian 43 | Gluten-free 44 | Lactose-free 45 | Keto 46 | Paleo 47 | Low FODMAP 48 | Kid-friendly 49 | 50 | ### Sample meals 51 | 52 | **Omnifood AI chooses from 5,000+ recipes** 53 | 54 | Meal 1: Japanese Gyozas 55 | 56 | - Category: Vegetarian 57 | - Calories: 650 58 | - NutriScore (Registered): 74 59 | - Average rating: 4.9 60 | - Number reviews: 537 61 | 62 | Meal 2: Avocado Salad 63 | 64 | - Category: Vegan and Paleo 65 | - Calories: 400 66 | - NutriScore (Registered): 92 67 | - Average rating: 4.8 68 | - Number reviews: 441 69 | 70 | ### We offer a free sample meal 71 | 72 | [Create simple form for users to sign up] 73 | 74 | 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! 75 | 76 | ### We have 2 pricing plans 77 | 78 | Prices include all applicable taxes. Users can cancel at any time. 79 | 80 | Starter: $399 per month 81 | 82 | - 1 meal per day 83 | - Order times are between 11am and 9pm 84 | - Delivery is free 85 | 86 | Complete: $649 per month 87 | 88 | - 2 meal2 per day 89 | - Order 24/7 90 | - Delivery is free 91 | - Get access to latest recipes 92 | 93 | ### Photo gallery 94 | 95 | [Use the 12 photos we provided] 96 | 97 | ### Customer testimonials 98 | 99 | [Photos of customers included] 100 | 101 | Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) 102 | 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) 103 | 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) 104 | 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) 105 | 106 | ### Section with logos of featured publications [see images] 107 | 108 | ### Contact information 109 | 110 | Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 111 | Phone: 415-201-6370 112 | Email: hello@omnifood.com 113 | 114 | Social profiles: instagram, facebook, twitter [links to them not available yet] 115 | 116 | ### Additional links [links not available yet] 117 | 118 | Create account 119 | Sign in 120 | iOS app 121 | Android app 122 | 123 | About Omnifood 124 | For Business 125 | Cooking partners 126 | Careers 127 | 128 | Recipe directory 129 | Help center 130 | Privacy & terms 131 | 132 | ###### 133 | 134 | ## Sections 135 | 136 | - Logo + Navigation 137 | - Hero 138 | - Featured in 139 | - How it works 140 | - Meals (and list of diets) 141 | - Testimonials + gallery 142 | - Pricing + features 143 | - CTA 144 | - Footer 145 | -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/app/app-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/app/app-screen-1.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/app/app-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/app/app-screen-2.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/app/app-screen-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/app/app-screen-3.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/apple-touch-icon.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/ben.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/ben.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/customer-1.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/customer-2.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/customer-3.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/customer-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/customer-4.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/customer-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/customer-5.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/customer-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/customer-6.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/dave.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/hannah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/hannah.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/customers/steve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/customers/steve.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/eating.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/eating.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/favicon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/favicon-192.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/favicon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/favicon-512.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/favicon.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/hero-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/hero-min.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/hero.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/hero.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/hero.webp -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/logos/business-insider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/logos/business-insider.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/logos/forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/logos/forbes.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/logos/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/logos/techcrunch.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/logos/the-new-york-times.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/logos/the-new-york-times.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/logos/usa-today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/logos/usa-today.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/meals/meal-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/meals/meal-1.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/meals/meal-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/meals/meal-2.jpg -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/img/omnifood-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/final/09-Omnifood-Optimizations/img/omnifood-logo.png -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/js/script.js: -------------------------------------------------------------------------------- 1 | console.log("Hello world!"); 2 | 3 | const myName = "Jonas Schmedtmann"; 4 | const h1 = document.querySelector(".heading-primary"); 5 | console.log(myName); 6 | console.log(h1); 7 | 8 | // h1.addEventListener("click", function () { 9 | // h1.textContent = myName; 10 | // h1.style.backgroundColor = "red"; 11 | // h1.style.padding = "5rem"; 12 | // }); 13 | 14 | /////////////////////////////////////////////////////////// 15 | // Set current year 16 | const yearEl = document.querySelector(".year"); 17 | const currentYear = new Date().getFullYear(); 18 | yearEl.textContent = currentYear; 19 | 20 | /////////////////////////////////////////////////////////// 21 | // Make mobile navigation work 22 | 23 | const btnNavEl = document.querySelector(".btn-mobile-nav"); 24 | const headerEl = document.querySelector(".header"); 25 | 26 | btnNavEl.addEventListener("click", function () { 27 | headerEl.classList.toggle("nav-open"); 28 | }); 29 | 30 | /////////////////////////////////////////////////////////// 31 | // Smooth scrolling animation 32 | 33 | const allLinks = document.querySelectorAll("a:link"); 34 | 35 | allLinks.forEach(function (link) { 36 | link.addEventListener("click", function (e) { 37 | e.preventDefault(); 38 | const href = link.getAttribute("href"); 39 | 40 | // Scroll back to top 41 | if (href === "#") 42 | window.scrollTo({ 43 | top: 0, 44 | behavior: "smooth", 45 | }); 46 | 47 | // Scroll to other links 48 | if (href !== "#" && href.startsWith("#")) { 49 | const sectionEl = document.querySelector(href); 50 | sectionEl.scrollIntoView({ behavior: "smooth" }); 51 | } 52 | 53 | // Close mobile naviagtion 54 | if (link.classList.contains("main-nav-link")) 55 | headerEl.classList.toggle("nav-open"); 56 | }); 57 | }); 58 | 59 | /////////////////////////////////////////////////////////// 60 | // Sticky navigation 61 | 62 | const sectionHeroEl = document.querySelector(".section-hero"); 63 | 64 | const obs = new IntersectionObserver( 65 | function (entries) { 66 | const ent = entries[0]; 67 | console.log(ent); 68 | 69 | if (ent.isIntersecting === false) { 70 | document.body.classList.add("sticky"); 71 | } 72 | 73 | if (ent.isIntersecting === true) { 74 | document.body.classList.remove("sticky"); 75 | } 76 | }, 77 | { 78 | // In the viewport 79 | root: null, 80 | threshold: 0, 81 | rootMargin: "-80px", 82 | } 83 | ); 84 | obs.observe(sectionHeroEl); 85 | 86 | /////////////////////////////////////////////////////////// 87 | // Fixing flexbox gap property missing in some Safari versions 88 | function checkFlexGap() { 89 | var flex = document.createElement("div"); 90 | flex.style.display = "flex"; 91 | flex.style.flexDirection = "column"; 92 | flex.style.rowGap = "1px"; 93 | 94 | flex.appendChild(document.createElement("div")); 95 | flex.appendChild(document.createElement("div")); 96 | 97 | document.body.appendChild(flex); 98 | var isSupported = flex.scrollHeight === 1; 99 | flex.parentNode.removeChild(flex); 100 | console.log(isSupported); 101 | 102 | if (!isSupported) document.body.classList.add("no-flexbox-gap"); 103 | } 104 | checkFlexGap(); 105 | 106 | // https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js 107 | 108 | /* 109 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 110 | margin-right: 4.8rem; 111 | } 112 | 113 | .no-flexbox-gap .list-item:not(:last-child) { 114 | margin-bottom: 1.6rem; 115 | } 116 | 117 | .no-flexbox-gap .list-icon:not(:last-child) { 118 | margin-right: 1.6rem; 119 | } 120 | 121 | .no-flexbox-gap .delivered-faces { 122 | margin-right: 1.6rem; 123 | } 124 | 125 | .no-flexbox-gap .meal-attribute:not(:last-child) { 126 | margin-bottom: 2rem; 127 | } 128 | 129 | .no-flexbox-gap .meal-icon { 130 | margin-right: 1.6rem; 131 | } 132 | 133 | .no-flexbox-gap .footer-row div:not(:last-child) { 134 | margin-right: 6.4rem; 135 | } 136 | 137 | .no-flexbox-gap .social-links li:not(:last-child) { 138 | margin-right: 2.4rem; 139 | } 140 | 141 | .no-flexbox-gap .footer-nav li:not(:last-child) { 142 | margin-bottom: 2.4rem; 143 | } 144 | 145 | @media (max-width: 75em) { 146 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 147 | margin-right: 3.2rem; 148 | } 149 | } 150 | 151 | @media (max-width: 59em) { 152 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 153 | margin-right: 0; 154 | margin-bottom: 4.8rem; 155 | } 156 | } 157 | */ 158 | -------------------------------------------------------------------------------- /final/09-Omnifood-Optimizations/manifest.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "icons": [ 3 | { "src": "img/favicon-192.png", "type": "image/png", "sizes": "192x192" }, 4 | { "src": "img/favicon-512.png", "type": "image/png", "sizes": "512x512" } 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /starter/02-HTML-Fundamentals/challenges.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/02-HTML-Fundamentals/challenges.jpg -------------------------------------------------------------------------------- /starter/02-HTML-Fundamentals/content.txt: -------------------------------------------------------------------------------- 1 | 📘 The Code Magazine 2 | 3 | The Basic Language of the Web: HTML 4 | 5 | Posted by Laura Jones on Monday, June 21st 2027 6 | 7 | All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. 8 | 9 | In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. 10 | 11 | What is HTML? 12 | 13 | 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). 14 | 15 | 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. 16 | 17 | In HTML, each element is made up of 3 parts: 18 | 19 | The opening tag 20 | The closing tag 21 | The actual element 22 | You can learn more at the MDN Web Docs. 23 | 24 | Why should you learn HTML? 25 | 26 | There are countless reasons for learning the fundamental language of the web. Here are 5 of them: 27 | 28 | To be able to use the fundamental web dev language 29 | To hand-craft beautiful websites instead of relying on tools like Worpress or Wix 30 | To build web applications 31 | To impress friends 32 | To have fun 😃 33 | 34 | Hopefully you learned something new here. See you next time! -------------------------------------------------------------------------------- /starter/02-HTML-Fundamentals/laura-jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/02-HTML-Fundamentals/laura-jones.jpg -------------------------------------------------------------------------------- /starter/02-HTML-Fundamentals/post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/02-HTML-Fundamentals/post-img.jpg -------------------------------------------------------------------------------- /starter/02-HTML-Fundamentals/related-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/02-HTML-Fundamentals/related-1.jpg -------------------------------------------------------------------------------- /starter/02-HTML-Fundamentals/related-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/02-HTML-Fundamentals/related-2.jpg -------------------------------------------------------------------------------- /starter/02-HTML-Fundamentals/related-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/02-HTML-Fundamentals/related-3.jpg -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | BLOG 5 | 6 | 7 |

BLOG

8 | Back to home 9 | 10 | 11 | -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/content.txt: -------------------------------------------------------------------------------- 1 | 📘 The Code Magazine 2 | 3 | The Basic Language of the Web: HTML 4 | 5 | Posted by Laura Jones on Monday, June 21st 2027 6 | 7 | All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. 8 | 9 | In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. 10 | 11 | What is HTML? 12 | 13 | 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). 14 | 15 | 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. 16 | 17 | In HTML, each element is made up of 3 parts: 18 | 19 | The opening tag 20 | The closing tag 21 | The actual element 22 | You can learn more at the MDN Web Docs. 23 | 24 | Why should you learn HTML? 25 | 26 | There are countless reasons for learning the fundamental language of the web. Here are 5 of them: 27 | 28 | To be able to use the fundamental web dev language 29 | To hand-craft beautiful websites instead of relying on tools like Worpress or Wix 30 | To build web applications 31 | To impress friends 32 | To have fun 😃 33 | 34 | Hopefully you learned something new here. See you next time! -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/img/challenges.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/03-CSS-Fundamentals/img/challenges.jpg -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/img/laura-jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/03-CSS-Fundamentals/img/laura-jones.jpg -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/img/post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/03-CSS-Fundamentals/img/post-img.jpg -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/img/related-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/03-CSS-Fundamentals/img/related-1.jpg -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/img/related-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/03-CSS-Fundamentals/img/related-2.jpg -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/img/related-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/03-CSS-Fundamentals/img/related-3.jpg -------------------------------------------------------------------------------- /starter/03-CSS-Fundamentals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Basic Language of the Web: HTML 6 | 7 | 8 | 9 | 17 | 18 |
19 |

📘 The Code Magazine

20 | 21 | 27 |
28 | 29 |
30 |
31 |

The Basic Language of the Web: HTML

32 | 33 | Headshot of Laura Jones 39 | 40 |

Posted by Laura Jones on Monday, June 21st 2027

41 | 42 | HTML code on a screen 48 |
49 | 50 |

51 | All modern websites and web applications are built using three 52 | fundamental 53 | technologies: HTML, CSS and JavaScript. These are the languages of the 54 | web. 55 |

56 | 57 |

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

61 | 62 |

What is HTML?

63 |

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

69 |

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

74 |

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

75 | 76 |
    77 |
  1. The opening tag
    2. 78 |
  2. The closing tag
    3. 79 |
  3. The actual element
    4. 80 |
81 | 82 |

83 | You can learn more at 84 | MDN Web Docs. 89 |

90 | 91 |

Why should you learn HTML?

92 | 93 |

94 | There are countless reasons for learning the fundamental language of the 95 | web. Here are 5 of them: 96 |

97 | 98 | 108 | 109 |

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

110 |
111 | 112 | 143 | 144 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | BLOG 5 | 6 | 7 |

BLOG

8 | Back to home 9 | 10 | 11 | -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/content.txt: -------------------------------------------------------------------------------- 1 | 📘 The Code Magazine 2 | 3 | The Basic Language of the Web: HTML 4 | 5 | Posted by Laura Jones on Monday, June 21st 2027 6 | 7 | All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. 8 | 9 | In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it. 10 | 11 | What is HTML? 12 | 13 | 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). 14 | 15 | 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. 16 | 17 | In HTML, each element is made up of 3 parts: 18 | 19 | The opening tag 20 | The closing tag 21 | The actual element 22 | You can learn more at the MDN Web Docs. 23 | 24 | Why should you learn HTML? 25 | 26 | There are countless reasons for learning the fundamental language of the web. Here are 5 of them: 27 | 28 | To be able to use the fundamental web dev language 29 | To hand-craft beautiful websites instead of relying on tools like Worpress or Wix 30 | To build web applications 31 | To impress friends 32 | To have fun 😃 33 | 34 | Hopefully you learned something new here. See you next time! -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/css-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Grid 8 | 58 | 59 | 60 |
61 |
(1) HTML
62 |
(2) and
63 |
(3) CSS
64 |
(4) are
65 |
(5) amazing
66 |
(6) languages
67 |
(7) to
68 |
(8) learn
69 |
70 | 71 |
72 |
(1)
73 |
(3)
74 |
(4)
75 |
(5)
76 |
(6)
77 |
(7)
78 |
79 | 80 | 81 | -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flexbox 8 | 45 | 46 | 47 |
48 |
HTML
49 |
and
50 |
CSS
51 |
are
52 |
amazing
53 |
languages
54 |
to
55 |
learn
56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/img/challenges.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/04-CSS-Layouts/img/challenges.jpg -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/img/laura-jones.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/04-CSS-Layouts/img/laura-jones.jpg -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/img/post-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/04-CSS-Layouts/img/post-img.jpg -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/img/related-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/04-CSS-Layouts/img/related-1.jpg -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/img/related-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/04-CSS-Layouts/img/related-2.jpg -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/img/related-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/04-CSS-Layouts/img/related-3.jpg -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Basic Language of the Web: HTML 8 | 9 | 10 | 11 | 19 | 20 |
21 |
22 |

📘 The Code Magazine

23 | 24 | 31 |
32 | 33 |
34 |
35 |

The Basic Language of the Web: HTML

36 | 37 | Headshot of Laura Jones 43 | 44 |

45 | Posted by Laura Jones on Monday, June 21st 2027 46 |

47 | 48 | HTML code on a screen 55 | 56 |
57 | 58 |

59 | All modern websites and web applications are built using three 60 | fundamental 61 | technologies: HTML, CSS and JavaScript. These are the languages of the 62 | web. 63 |

64 | 65 |

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

69 | 70 |

What is HTML?

71 |

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

77 |

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

82 |

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

83 | 84 |
    85 |
  1. The opening tag
    2. 86 |
  2. The closing tag
    3. 87 |
  3. The actual element
    4. 88 |
89 | 90 |

91 | You can learn more at 92 | MDN Web Docs. 97 |

98 | 99 |

Why should you learn HTML?

100 | 101 |

102 | There are countless reasons for learning the fundamental language of 103 | the web. Here are 5 of them: 104 |

105 | 106 |
    107 |
  • 108 | To be able to use the fundamental web dev language 109 |
    • 110 |
  • 111 | To hand-craft beautiful websites instead of relying on tools like 112 | Worpress or Wix 113 |
    • 114 |
  • To build web applications
    • 115 |
  • To impress friends
    • 116 |
  • To have fun 😃
    • 117 |
118 | 119 |

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

120 |
121 | 122 | 158 | 159 | 164 |
165 | 166 | 167 | -------------------------------------------------------------------------------- /starter/04-CSS-Layouts/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | /* border-top: 10px solid #1098ad; */ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | /* PAGE SECTIONS */ 8 | body { 9 | color: #444; 10 | font-family: sans-serif; 11 | 12 | border-top: 10px solid #1098ad; 13 | position: relative; 14 | } 15 | 16 | .container { 17 | width: 800px; 18 | /* margin-left: auto; 19 | margin-right: auto; */ 20 | margin: 0 auto; 21 | } 22 | 23 | .main-header { 24 | background-color: #f7f7f7; 25 | /* padding: 20px; 26 | padding-left: 40px; 27 | padding-right: 40px; */ 28 | padding: 20px 40px; 29 | margin-bottom: 60px; 30 | /* height: 80px; */ 31 | } 32 | 33 | nav { 34 | font-size: 18px; 35 | /* text-align: center; */ 36 | } 37 | 38 | article { 39 | margin-bottom: 60px; 40 | } 41 | 42 | .post-header { 43 | margin-bottom: 40px; 44 | /* position: relative; */ 45 | } 46 | 47 | aside { 48 | background-color: #f7f7f7; 49 | border-top: 5px solid #1098ad; 50 | border-bottom: 5px solid #1098ad; 51 | /* padding-top: 50px; 52 | padding-bottom: 50px; */ 53 | padding: 50px 0; 54 | width: 500px; 55 | } 56 | 57 | /* SMALLER ELEMENTS */ 58 | h1, 59 | h2, 60 | h3 { 61 | color: #1098ad; 62 | } 63 | 64 | h1 { 65 | font-size: 26px; 66 | text-transform: uppercase; 67 | font-style: italic; 68 | } 69 | 70 | h2 { 71 | font-size: 40px; 72 | margin-bottom: 30px; 73 | } 74 | 75 | h3 { 76 | font-size: 30px; 77 | margin-bottom: 20px; 78 | margin-top: 40px; 79 | } 80 | 81 | h4 { 82 | font-size: 20px; 83 | text-transform: uppercase; 84 | text-align: center; 85 | } 86 | 87 | p { 88 | font-size: 22px; 89 | line-height: 1.5; 90 | margin-bottom: 15px; 91 | } 92 | 93 | ul, 94 | ol { 95 | margin-left: 50px; 96 | margin-bottom: 20px; 97 | } 98 | 99 | li { 100 | font-size: 20px; 101 | margin-bottom: 10px; 102 | /* display: inline; */ 103 | } 104 | 105 | li:last-child { 106 | margin-bottom: 0; 107 | } 108 | 109 | /* footer p { 110 | font-size: 16px; 111 | } */ 112 | 113 | /* article header p { 114 | font-style: italic; 115 | } */ 116 | 117 | #author { 118 | font-style: italic; 119 | font-size: 18px; 120 | } 121 | 122 | #copyright { 123 | font-size: 16px; 124 | } 125 | 126 | .related-author { 127 | font-size: 18px; 128 | font-weight: bold; 129 | } 130 | 131 | /* ul { 132 | list-style: none; 133 | } */ 134 | 135 | .related { 136 | list-style: none; 137 | } 138 | 139 | body { 140 | /* background-color: orangered; */ 141 | } 142 | 143 | /* .first-li { 144 | font-weight: bold; 145 | } */ 146 | 147 | li:first-child { 148 | font-weight: bold; 149 | } 150 | 151 | li:last-child { 152 | font-style: italic; 153 | } 154 | 155 | li:nth-child(even) { 156 | /* color: red; */ 157 | } 158 | 159 | /* Misconception: this won't work! */ 160 | article p:first-child { 161 | color: red; 162 | } 163 | 164 | /* Styling links */ 165 | a:link { 166 | color: #1098ad; 167 | text-decoration: none; 168 | } 169 | 170 | a:visited { 171 | /* color: #777; */ 172 | color: #1098ad; 173 | } 174 | 175 | a:hover { 176 | color: orangered; 177 | font-weight: bold; 178 | text-decoration: underline orangered; 179 | } 180 | 181 | a:active { 182 | background-color: black; 183 | font-style: italic; 184 | } 185 | /* LVHA */ 186 | 187 | .post-img { 188 | width: 100%; 189 | height: auto; 190 | } 191 | 192 | nav a:link { 193 | /* background-color: orangered; 194 | margin: 20px; 195 | padding: 20px; 196 | 197 | display: block; */ 198 | 199 | margin-right: 30px; 200 | margin-top: 10px; 201 | display: inline-block; 202 | } 203 | 204 | nav a:link:last-child { 205 | margin-right: 0; 206 | } 207 | 208 | button { 209 | font-size: 22px; 210 | padding: 20px; 211 | cursor: pointer; 212 | 213 | position: absolute; 214 | /* top: 50px; 215 | left: 50px; */ 216 | bottom: 50px; 217 | right: 50px; 218 | } 219 | 220 | h1::first-letter { 221 | font-style: normal; 222 | margin-right: 5px; 223 | } 224 | 225 | h3 + p::first-line { 226 | /* color: red; */ 227 | } 228 | 229 | h2 { 230 | /* background-color: orange; */ 231 | position: relative; 232 | } 233 | 234 | h2::before { 235 | content: "TOP"; 236 | background-color: #ffe70e; 237 | color: #444; 238 | font-size: 16px; 239 | font-weight: bold; 240 | display: inline-block; 241 | padding: 5px 10px; 242 | position: absolute; 243 | top: -10px; 244 | right: -25px; 245 | } 246 | 247 | /* Resolving conflicts */ 248 | /* #copyright { 249 | color: red; 250 | } 251 | 252 | .copyright { 253 | color: blue; 254 | } 255 | 256 | .text { 257 | color: yellow; 258 | } 259 | 260 | footer p { 261 | color: green !important; 262 | } */ 263 | 264 | /* nav a:link, 265 | nav p { 266 | font-size: 18px; 267 | } */ 268 | -------------------------------------------------------------------------------- /starter/05-Design/chair-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/05-Design/chair-1.jpg -------------------------------------------------------------------------------- /starter/05-Design/chair-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/05-Design/chair-2.jpg -------------------------------------------------------------------------------- /starter/05-Design/chair-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/05-Design/chair-3.jpg -------------------------------------------------------------------------------- /starter/05-Design/customers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/05-Design/customers.jpg -------------------------------------------------------------------------------- /starter/05-Design/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/05-Design/hero.jpg -------------------------------------------------------------------------------- /starter/05-Design/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | SPACING SYSTEM (px) 3 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 4 | 5 | FONT SIZE SYSTEM (px) 6 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 7 | */ 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | box-sizing: border-box; 13 | } 14 | 15 | /* ------------------------ */ 16 | /* GENERAL STYLES */ 17 | /* ------------------------ */ 18 | body { 19 | font-family: sans-serif; 20 | } 21 | 22 | .container { 23 | width: 960px; 24 | margin: 0 auto; 25 | } 26 | 27 | header, 28 | section { 29 | margin-bottom: 48px; 30 | } 31 | 32 | h2 { 33 | margin-bottom: 48px; 34 | } 35 | 36 | .grid-3-cols { 37 | display: grid; 38 | grid-template-columns: repeat(3, 1fr); 39 | column-gap: 80px; 40 | } 41 | 42 | /* ------------------------ */ 43 | /* COMPONENT STYLES */ 44 | /* ------------------------ */ 45 | 46 | /* HEADER */ 47 | header { 48 | display: grid; 49 | grid-template-columns: repeat(2, 1fr); 50 | column-gap: 80px; 51 | margin-top: 48px; 52 | } 53 | 54 | .header-text-box { 55 | align-self: center; 56 | } 57 | 58 | h1 { 59 | margin-bottom: 24px; 60 | } 61 | 62 | .header-text { 63 | margin-bottom: 24px; 64 | } 65 | 66 | img { 67 | width: 100%; 68 | } 69 | 70 | /* FEATURES */ 71 | .features-icon { 72 | } 73 | 74 | .features-title { 75 | margin-bottom: 16px; 76 | } 77 | 78 | .features-text { 79 | } 80 | 81 | /* TESTIMONIAL */ 82 | .testimonial-section { 83 | } 84 | 85 | .testimonial-box { 86 | grid-column: 2 / -1; 87 | align-self: center; 88 | } 89 | 90 | .testimonial-box h2 { 91 | margin-bottom: 24px; 92 | } 93 | 94 | .testimonial-text { 95 | font-style: italic; 96 | margin-bottom: 24px; 97 | } 98 | 99 | /* CHAIRS */ 100 | .chair-box { 101 | padding: 24px; 102 | } 103 | 104 | h3 { 105 | margin-bottom: 24px; 106 | } 107 | 108 | .chair-details { 109 | list-style: none; 110 | margin-bottom: 24px; 111 | } 112 | 113 | .chair-details li { 114 | display: flex; 115 | align-items: center; 116 | gap: 12px; 117 | margin-bottom: 24px; 118 | } 119 | 120 | .chair-details li:last-child { 121 | margin-bottom: 0; 122 | } 123 | 124 | .chair-icon { 125 | } 126 | 127 | .chair-price { 128 | display: flex; 129 | justify-content: space-between; 130 | } 131 | 132 | footer { 133 | margin-bottom: 48px; 134 | } 135 | -------------------------------------------------------------------------------- /starter/06-Components/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/06-Components/hero.jpg -------------------------------------------------------------------------------- /starter/06-Components/maria.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/06-Components/maria.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/content.md: -------------------------------------------------------------------------------- 1 | # Omnifood 2 | 3 | ## About Omnifood 4 | 5 | We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. 6 | 7 | ## Branding 8 | 9 | Headline: A healthy meal delivered to your door, every single day 10 | 11 | Brand color: #e67e22 12 | 13 | ## Omnifood Website Content 14 | 15 | ### Summary 16 | 17 | The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year! 18 | 19 | ### Omnifood features 20 | 21 | Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. 22 | Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. 23 | No waste: All our partners only use reusable containers to package all your meals. 24 | Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. 25 | 26 | ### How Omnifood works 27 | 28 | [Show big app images] 29 | 30 | **Your daily dose of health in 3 simple steps** 31 | 32 | 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! 33 | 34 | 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. 35 | 36 | 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! 37 | 38 | ### Omnifood works with any diet 39 | 40 | Vegetarian 41 | Vegan 42 | Pescatarian 43 | Gluten-free 44 | Lactose-free 45 | Keto 46 | Paleo 47 | Low FODMAP 48 | Kid-friendly 49 | 50 | ### Sample meals 51 | 52 | **Omnifood AI chooses from 5,000+ recipes** 53 | 54 | Meal 1: Japanese Gyozas 55 | 56 | - Category: Vegetarian 57 | - Calories: 650 58 | - NutriScore (Registered): 74 59 | - Average rating: 4.9 60 | - Number reviews: 537 61 | 62 | Meal 2: Avocado Salad 63 | 64 | - Category: Vegan and Paleo 65 | - Calories: 400 66 | - NutriScore (Registered): 92 67 | - Average rating: 4.8 68 | - Number reviews: 441 69 | 70 | ### We offer a free sample meal 71 | 72 | [Create simple form for users to sign up] 73 | 74 | 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! 75 | 76 | ### We have 2 pricing plans 77 | 78 | Prices include all applicable taxes. Users can cancel at any time. 79 | 80 | Starter: $399 per month 81 | 82 | - 1 meal per day 83 | - Order times are between 11am and 9pm 84 | - Delivery is free 85 | 86 | Complete: $649 per month 87 | 88 | - 2 meal2 per day 89 | - Order 24/7 90 | - Delivery is free 91 | - Get access to latest recipes 92 | 93 | ### Photo gallery 94 | 95 | [Use the 12 photos we provided] 96 | 97 | ### Customer testimonials 98 | 99 | [Photos of customers included] 100 | 101 | Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) 102 | 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) 103 | 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) 104 | 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) 105 | 106 | ### Section with logos of featured publications [see images] 107 | 108 | ### Contact information 109 | 110 | Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 111 | Phone: 415-201-6370 112 | Email: hello@omnifood.com 113 | 114 | Social profiles: instagram, facebook, twitter [links to them not available yet] 115 | 116 | ### Additional links [links not available yet] 117 | 118 | Create account 119 | Sign in 120 | iOS app 121 | Android app 122 | About Omnifood 123 | For Business 124 | Cooking partners 125 | Careers 126 | Recipe directory 127 | Help center 128 | Privacy & terms 129 | -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/ben.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/customers/steve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/eating.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/eating.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/favicon.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/hero.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/logos/business-insider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/logos/forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/logos/forbes.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/logos/usa-today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg -------------------------------------------------------------------------------- /starter/07-Omnifood-Desktop/content/img/omnifood-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/content.md: -------------------------------------------------------------------------------- 1 | # Omnifood 2 | 3 | ## About Omnifood 4 | 5 | We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. 6 | 7 | ## Branding 8 | 9 | Headline: A healthy meal delivered to your door, every single day 10 | 11 | Brand color: #e67e22 12 | 13 | ## Omnifood Website Content 14 | 15 | ### Summary 16 | 17 | The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year! 18 | 19 | ### Omnifood features 20 | 21 | Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. 22 | Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. 23 | No waste: All our partners only use reusable containers to package all your meals. 24 | Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. 25 | 26 | ### How Omnifood works 27 | 28 | [Show big app images] 29 | 30 | **Your daily dose of health in 3 simple steps** 31 | 32 | 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! 33 | 34 | 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. 35 | 36 | 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! 37 | 38 | ### Omnifood works with any diet 39 | 40 | Vegetarian 41 | Vegan 42 | Pescatarian 43 | Gluten-free 44 | Lactose-free 45 | Keto 46 | Paleo 47 | Low FODMAP 48 | Kid-friendly 49 | 50 | ### Sample meals 51 | 52 | **Omnifood AI chooses from 5,000+ recipes** 53 | 54 | Meal 1: Japanese Gyozas 55 | 56 | - Category: Vegetarian 57 | - Calories: 650 58 | - NutriScore (Registered): 74 59 | - Average rating: 4.9 60 | - Number reviews: 537 61 | 62 | Meal 2: Avocado Salad 63 | 64 | - Category: Vegan and Paleo 65 | - Calories: 400 66 | - NutriScore (Registered): 92 67 | - Average rating: 4.8 68 | - Number reviews: 441 69 | 70 | ### We offer a free sample meal 71 | 72 | [Create simple form for users to sign up] 73 | 74 | 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! 75 | 76 | ### We have 2 pricing plans 77 | 78 | Prices include all applicable taxes. Users can cancel at any time. 79 | 80 | Starter: $399 per month 81 | 82 | - 1 meal per day 83 | - Order times are between 11am and 9pm 84 | - Delivery is free 85 | 86 | Complete: $649 per month 87 | 88 | - 2 meal2 per day 89 | - Order 24/7 90 | - Delivery is free 91 | - Get access to latest recipes 92 | 93 | ### Photo gallery 94 | 95 | [Use the 12 photos we provided] 96 | 97 | ### Customer testimonials 98 | 99 | [Photos of customers included] 100 | 101 | Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) 102 | 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) 103 | 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) 104 | 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) 105 | 106 | ### Section with logos of featured publications [see images] 107 | 108 | ### Contact information 109 | 110 | Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 111 | Phone: 415-201-6370 112 | Email: hello@omnifood.com 113 | 114 | Social profiles: instagram, facebook, twitter [links to them not available yet] 115 | 116 | ### Additional links [links not available yet] 117 | 118 | Create account 119 | Sign in 120 | iOS app 121 | Android app 122 | 123 | About Omnifood 124 | For Business 125 | Cooking partners 126 | Careers 127 | 128 | Recipe directory 129 | Help center 130 | Privacy & terms 131 | 132 | ###### 133 | 134 | ## Sections 135 | 136 | - Logo + Navigation 137 | - Hero 138 | - Featured in 139 | - How it works 140 | - Meals (and list of diets) 141 | - Testimonials + gallery 142 | - Pricing + features 143 | - CTA 144 | - Footer 145 | -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/css/general.css: -------------------------------------------------------------------------------- 1 | /* 2 | --- 01 TYPOGRAPHY SYSTEM 3 | 4 | - Font sizes (px) 5 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 6 | 7 | - Font weights 8 | Default: 400 9 | Medium: 500 10 | Semi-bold: 600 11 | Bold: 700 12 | 13 | - Line heights 14 | Default: 1 15 | Small: 1.05 16 | Medium: 1.2 17 | Paragraph default: 1.6 18 | 19 | - Letter spacing 20 | -0.5px 21 | 0.75px 22 | 23 | --- 02 COLORS 24 | 25 | - Primary: #e67e22 26 | - Tints: 27 | #fdf2e9 28 | #fae5d3 29 | #eb984e 30 | 31 | - Shades: 32 | #cf711f 33 | #45260a 34 | 35 | - Accents: 36 | - Greys 37 | 38 | #888 39 | #767676 (lightest grey allowed on #fff) 40 | #6f6f6f (lightest grey allowed on #fdf2e9) 41 | #555 42 | #333 43 | 44 | --- 05 SHADOWS 45 | 46 | 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); 47 | 48 | --- 06 BORDER-RADIUS 49 | 50 | Default: 9px 51 | Medium: 11px 52 | 53 | --- 07 WHITESPACE 54 | 55 | - Spacing system (px) 56 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 57 | */ 58 | 59 | * { 60 | padding: 0; 61 | margin: 0; 62 | box-sizing: border-box; 63 | } 64 | 65 | html { 66 | /* font-size: 10px; */ 67 | /* 10px / 16px = 0.625 = 62.5% */ 68 | /* Percentage of user's browser font-size setting */ 69 | font-size: 62.5%; 70 | } 71 | 72 | body { 73 | font-family: "Rubik", sans-serif; 74 | line-height: 1; 75 | font-weight: 400; 76 | color: #555; 77 | } 78 | 79 | /**************************/ 80 | /* GENRAL REUSABLE COMPONENTS */ 81 | /**************************/ 82 | 83 | .container { 84 | /* 1140px */ 85 | max-width: 120rem; 86 | padding: 0 3.2rem; 87 | margin: 0 auto; 88 | } 89 | 90 | .grid { 91 | display: grid; 92 | column-gap: 6.4rem; 93 | row-gap: 9.6rem; 94 | 95 | /* margin-bottom: 9.6rem; */ 96 | } 97 | 98 | /* .grid:last-child { 99 | margin-bottom: 0; 100 | } */ 101 | 102 | .grid:not(:last-child) { 103 | margin-bottom: 9.6rem; 104 | } 105 | 106 | .grid--2-cols { 107 | grid-template-columns: repeat(2, 1fr); 108 | } 109 | 110 | .grid--3-cols { 111 | grid-template-columns: repeat(3, 1fr); 112 | } 113 | 114 | .grid--4-cols { 115 | grid-template-columns: repeat(4, 1fr); 116 | } 117 | 118 | .grid--5-cols { 119 | grid-template-columns: repeat(5, 1fr); 120 | } 121 | 122 | .grid--center-v { 123 | align-items: center; 124 | } 125 | 126 | .heading-primary, 127 | .heading-secondary, 128 | .heading-tertiary { 129 | font-weight: 700; 130 | color: #333; 131 | /* color: #45260a; */ 132 | /* color: #343a40; */ 133 | letter-spacing: -0.5px; 134 | } 135 | 136 | .heading-primary { 137 | font-size: 5.2rem; 138 | line-height: 1.05; 139 | margin-bottom: 3.2rem; 140 | } 141 | 142 | .heading-secondary { 143 | font-size: 4.4rem; 144 | line-height: 1.2; 145 | margin-bottom: 9.6rem; 146 | } 147 | 148 | .heading-tertiary { 149 | font-size: 3rem; 150 | line-height: 1.2; 151 | margin-bottom: 3.2rem; 152 | } 153 | 154 | .subheading { 155 | display: block; 156 | font-size: 1.6rem; 157 | font-weight: 500; 158 | color: #cf711f; 159 | text-transform: uppercase; 160 | margin-bottom: 1.6rem; 161 | letter-spacing: 0.75px; 162 | } 163 | 164 | .btn, 165 | .btn:link, 166 | .btn:visited { 167 | display: inline-block; 168 | 169 | text-decoration: none; 170 | font-size: 2rem; 171 | font-weight: 600; 172 | padding: 1.6rem 3.2rem; 173 | border-radius: 9px; 174 | 175 | /* Only necessary for .btn */ 176 | border: none; 177 | cursor: pointer; 178 | font-family: inherit; 179 | 180 | /* Put transition on original "state" */ 181 | /* transition: background-color 0.3s; */ 182 | transition: all 0.3s; 183 | } 184 | 185 | .btn--full:link, 186 | .btn--full:visited { 187 | background-color: #e67e22; 188 | color: #fff; 189 | } 190 | 191 | .btn--full:hover, 192 | .btn--full:active { 193 | background-color: #cf711f; 194 | } 195 | 196 | .btn--outline:link, 197 | .btn--outline:visited { 198 | background-color: #fff; 199 | color: #555; 200 | } 201 | 202 | .btn--outline:hover, 203 | .btn--outline:active { 204 | background-color: #fdf2e9; 205 | 206 | /* border: 3px solid #fff; */ 207 | 208 | /* Trick to add border inside */ 209 | box-shadow: inset 0 0 0 3px #fff; 210 | } 211 | 212 | .btn--form { 213 | background-color: #45260a; 214 | color: #fdf2e9; 215 | align-self: end; 216 | padding: 1.2rem; 217 | } 218 | 219 | .btn--form:hover { 220 | background-color: #fff; 221 | color: #555; 222 | } 223 | 224 | .link:link, 225 | .link:visited { 226 | display: inline-block; 227 | color: #e67e22; 228 | text-decoration: none; 229 | border-bottom: 1px solid currentColor; 230 | padding-bottom: 2px; 231 | transition: all 0.3s; 232 | } 233 | 234 | .link:hover, 235 | .link:active { 236 | color: #cf711f; 237 | border-bottom: 1px solid transparent; 238 | } 239 | 240 | .list { 241 | list-style: none; 242 | display: flex; 243 | flex-direction: column; 244 | gap: 1.6rem; 245 | } 246 | 247 | .list-item { 248 | font-size: 1.8rem; 249 | display: flex; 250 | align-items: center; 251 | gap: 1.6rem; 252 | } 253 | 254 | .list-icon { 255 | width: 3rem; 256 | height: 3rem; 257 | color: #e67e22; 258 | } 259 | 260 | *:focus { 261 | outline: none; 262 | /* outline: 4px dotted #e67e22; */ 263 | /* outline-offset: 8px; */ 264 | box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); 265 | } 266 | 267 | /* HELPER/SETTINGS CLASSES */ 268 | .margin-right-sm { 269 | margin-right: 1.6rem !important; 270 | } 271 | 272 | .margin-bottom-md { 273 | margin-bottom: 4.8rem !important; 274 | } 275 | 276 | .center-text { 277 | text-align: center; 278 | } 279 | 280 | strong { 281 | font-weight: 500; 282 | } 283 | -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/app/app-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/app/app-screen-1.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/app/app-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/app/app-screen-2.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/app/app-screen-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/app/app-screen-3.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/ben.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/ben.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/customer-1.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/customer-2.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/customer-3.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/customer-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/customer-4.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/customer-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/customer-5.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/customer-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/customer-6.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/dave.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/hannah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/hannah.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/customers/steve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/customers/steve.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/eating.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/eating.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/favicon.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/hero.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/logos/business-insider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/logos/business-insider.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/logos/forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/logos/forbes.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/logos/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/logos/techcrunch.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/logos/usa-today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/logos/usa-today.png -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/meals/meal-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/meals/meal-1.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/meals/meal-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/meals/meal-2.jpg -------------------------------------------------------------------------------- /starter/08-Omnifood-Responsive/img/omnifood-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/08-Omnifood-Responsive/img/omnifood-logo.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/content.md: -------------------------------------------------------------------------------- 1 | # Omnifood 2 | 3 | ## About Omnifood 4 | 5 | We are a technology company first, but with a major focus on consumer well-being through a healthy diet. Most people are very busy with their jobs, family and friends, and other important activities, which doesn't leave much time for cooking. This might lead to a poor diet and lasting health consequences. We want to solve this problem by using an AI-centric approach. Users can use our app to select their diet and foods they like and dislike, and our AI algorithm will create a custom and individual weekly meal plan. But we don't stop there. We partner with restaurants and other cooking partners to actually cook and deliver all meals from the generated meal plans, in selected cities. All this will be packed up in a monthly subscription, where users can choose between receiving one or two meals per day, every single day of the month. 6 | 7 | ## Branding 8 | 9 | Headline: A healthy meal delivered to your door, every single day 10 | 11 | Brand color: #e67e22 12 | 13 | ## Omnifood Website Content 14 | 15 | ### Summary 16 | 17 | The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. We have delivered 250,000+ meals last year! 18 | 19 | ### Omnifood features 20 | 21 | Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. 22 | Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. 23 | No waste: All our partners only use reusable containers to package all your meals. 24 | Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. 25 | 26 | ### How Omnifood works 27 | 28 | [Show big app images] 29 | 30 | **Your daily dose of health in 3 simple steps** 31 | 32 | 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! 33 | 34 | 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. 35 | 36 | 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! 37 | 38 | ### Omnifood works with any diet 39 | 40 | Vegetarian 41 | Vegan 42 | Pescatarian 43 | Gluten-free 44 | Lactose-free 45 | Keto 46 | Paleo 47 | Low FODMAP 48 | Kid-friendly 49 | 50 | ### Sample meals 51 | 52 | **Omnifood AI chooses from 5,000+ recipes** 53 | 54 | Meal 1: Japanese Gyozas 55 | 56 | - Category: Vegetarian 57 | - Calories: 650 58 | - NutriScore (Registered): 74 59 | - Average rating: 4.9 60 | - Number reviews: 537 61 | 62 | Meal 2: Avocado Salad 63 | 64 | - Category: Vegan and Paleo 65 | - Calories: 400 66 | - NutriScore (Registered): 92 67 | - Average rating: 4.8 68 | - Number reviews: 441 69 | 70 | ### We offer a free sample meal 71 | 72 | [Create simple form for users to sign up] 73 | 74 | 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! 75 | 76 | ### We have 2 pricing plans 77 | 78 | Prices include all applicable taxes. Users can cancel at any time. 79 | 80 | Starter: $399 per month 81 | 82 | - 1 meal per day 83 | - Order times are between 11am and 9pm 84 | - Delivery is free 85 | 86 | Complete: $649 per month 87 | 88 | - 2 meal2 per day 89 | - Order 24/7 90 | - Delivery is free 91 | - Get access to latest recipes 92 | 93 | ### Photo gallery 94 | 95 | [Use the 12 photos we provided] 96 | 97 | ### Customer testimonials 98 | 99 | [Photos of customers included] 100 | 101 | Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) 102 | 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) 103 | 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) 104 | 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) 105 | 106 | ### Section with logos of featured publications [see images] 107 | 108 | ### Contact information 109 | 110 | Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 111 | Phone: 415-201-6370 112 | Email: hello@omnifood.com 113 | 114 | Social profiles: instagram, facebook, twitter [links to them not available yet] 115 | 116 | ### Additional links [links not available yet] 117 | 118 | Create account 119 | Sign in 120 | iOS app 121 | Android app 122 | 123 | About Omnifood 124 | For Business 125 | Cooking partners 126 | Careers 127 | 128 | Recipe directory 129 | Help center 130 | Privacy & terms 131 | 132 | ###### 133 | 134 | ## Sections 135 | 136 | - Logo + Navigation 137 | - Hero 138 | - Featured in 139 | - How it works 140 | - Meals (and list of diets) 141 | - Testimonials + gallery 142 | - Pricing + features 143 | - CTA 144 | - Footer 145 | -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/app/app-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/app/app-screen-1.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/app/app-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/app/app-screen-2.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/app/app-screen-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/app/app-screen-3.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/ben.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/ben.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/customer-1.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/customer-2.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/customer-3.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/customer-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/customer-4.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/customer-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/customer-5.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/customer-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/customer-6.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/dave.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/hannah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/hannah.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/customers/steve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/customers/steve.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/eating.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/eating.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/favicon.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/hero.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/logos/business-insider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/logos/business-insider.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/logos/forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/logos/forbes.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/logos/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/logos/techcrunch.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/logos/the-new-york-times.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/logos/the-new-york-times.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/logos/usa-today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/logos/usa-today.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/meals/meal-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/meals/meal-1.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/meals/meal-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/meals/meal-2.jpg -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/img/omnifood-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jonasschmedtmann/html-css-course/10de6bc4458bbe3506b52a61df9fcab0f10af92d/starter/09-Omnifood-Optimizations/img/omnifood-logo.png -------------------------------------------------------------------------------- /starter/09-Omnifood-Optimizations/script.js: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////// 2 | // Fixing flexbox gap property missing in some Safari versions 3 | function checkFlexGap() { 4 | var flex = document.createElement("div"); 5 | flex.style.display = "flex"; 6 | flex.style.flexDirection = "column"; 7 | flex.style.rowGap = "1px"; 8 | 9 | flex.appendChild(document.createElement("div")); 10 | flex.appendChild(document.createElement("div")); 11 | 12 | document.body.appendChild(flex); 13 | var isSupported = flex.scrollHeight === 1; 14 | flex.parentNode.removeChild(flex); 15 | console.log(isSupported); 16 | 17 | if (!isSupported) document.body.classList.add("no-flexbox-gap"); 18 | } 19 | checkFlexGap(); 20 | 21 | // https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js 22 | 23 | /* 24 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 25 | margin-right: 4.8rem; 26 | } 27 | 28 | .no-flexbox-gap .list-item:not(:last-child) { 29 | margin-bottom: 1.6rem; 30 | } 31 | 32 | .no-flexbox-gap .list-icon:not(:last-child) { 33 | margin-right: 1.6rem; 34 | } 35 | 36 | .no-flexbox-gap .delivered-faces { 37 | margin-right: 1.6rem; 38 | } 39 | 40 | .no-flexbox-gap .meal-attribute:not(:last-child) { 41 | margin-bottom: 2rem; 42 | } 43 | 44 | .no-flexbox-gap .meal-icon { 45 | margin-right: 1.6rem; 46 | } 47 | 48 | .no-flexbox-gap .footer-row div:not(:last-child) { 49 | margin-right: 6.4rem; 50 | } 51 | 52 | .no-flexbox-gap .social-links li:not(:last-child) { 53 | margin-right: 2.4rem; 54 | } 55 | 56 | .no-flexbox-gap .footer-nav li:not(:last-child) { 57 | margin-bottom: 2.4rem; 58 | } 59 | 60 | @media (max-width: 75em) { 61 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 62 | margin-right: 3.2rem; 63 | } 64 | } 65 | 66 | @media (max-width: 59em) { 67 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 68 | margin-right: 0; 69 | margin-bottom: 4.8rem; 70 | } 71 | } 72 | */ 73 | -------------------------------------------------------------------------------- /vscode-setup.md: -------------------------------------------------------------------------------- 1 | # VS Code setup used in the course 2 | 3 | I show how to set up VS Code with these themes, extensions and settings in the first section of the course, in lectures **Setting Up Our Code Editor** and **Installing Additional VS Code Extensions**. But for your convenience, here is a quick list of everything you need in order to set up VS Code to follow the course. 4 | 5 | ### Theme 6 | 7 | I use the `One Monokai` in all the course videos. This is a free theme, similar to my personal favourite Monokai Pro. [Link →](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai) 8 | 9 | ### Extensions 10 | 11 | `Auto Close Tag` to automatically close HTML tags. [Link →](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) 12 | 13 | `Auto Rename Tag` to automatically update matching HTML tags. [Link →](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 14 | 15 | `Color Highlight` to highlight colors in CSS code. [Link →](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) 16 | 17 | `Image Preview` to display an image preview next to the code [Link →](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview) 18 | 19 | `Prettier` to automatically format code. [Link →](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 20 | 21 | `Live Server` to create a live preview for the current project. [Link →](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 22 | 23 | ### Settings 24 | 25 | `Auto Save` set to `onFocusChange`, to automatically save files 26 | 27 | `Default Formatter` set to `Prettier - Code formatter (esbnp.prettier-vscode)`, to enable the Prettier extension to format our code 28 | 29 | `Format on Save` set to `true`, to have Prettier format our code each time we save it 30 | 31 | `Word Wrap` set to `on`, to avoid vertical scrollbars for long content 32 | 33 | `Tab Size` set to `2`, for better code readability 34 | --------------------------------------------------------------------------------