├── 09-Omnifood-Optimizations ├── img │ ├── hero.png │ ├── eating.jpg │ ├── hero.webp │ ├── favicon.png │ ├── hero-min.png │ ├── favicon-192.png │ ├── favicon-512.png │ ├── customers │ │ ├── ben.jpg │ │ ├── dave.jpg │ │ ├── hannah.jpg │ │ ├── steve.jpg │ │ ├── customer-1.jpg │ │ ├── customer-2.jpg │ │ ├── customer-3.jpg │ │ ├── customer-4.jpg │ │ ├── customer-5.jpg │ │ └── customer-6.jpg │ ├── logos │ │ ├── forbes.png │ │ ├── techcrunch.png │ │ ├── usa-today.png │ │ ├── business-insider.png │ │ └── the-new-york-times.png │ ├── meals │ │ ├── meal-1.jpg │ │ └── meal-2.jpg │ ├── omnifood-logo.png │ ├── app │ │ ├── app-screen-1.png │ │ ├── app-screen-2.png │ │ └── app-screen-3.png │ ├── apple-touch-icon.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 ├── manifest.webmanifest ├── README.md ├── js │ └── script.js ├── content.md ├── css │ ├── general.css │ ├── queries.css │ └── style.css └── index.html └── README.md /09-Omnifood-Optimizations/img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/hero.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/eating.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/eating.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/hero.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/hero.webp -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/favicon.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/hero-min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/hero-min.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/favicon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/favicon-192.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/favicon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/favicon-512.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/ben.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/ben.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/dave.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/dave.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/logos/forbes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/logos/forbes.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/meals/meal-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/meals/meal-1.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/meals/meal-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/meals/meal-2.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/omnifood-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/omnifood-logo.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/app/app-screen-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/app/app-screen-1.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/app/app-screen-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/app/app-screen-2.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/app/app-screen-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/app/app-screen-3.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/apple-touch-icon.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/hannah.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/hannah.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/steve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/steve.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/logos/techcrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/logos/techcrunch.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/logos/usa-today.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/logos/usa-today.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/gallery/gallery-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/customer-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/customer-1.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/customer-2.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/customer-3.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/customer-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/customer-4.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/customer-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/customer-5.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/customers/customer-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/customers/customer-6.jpg -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/logos/business-insider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/logos/business-insider.png -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/img/logos/the-new-york-times.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Andrew-Tsegaye/food-delivery-website/HEAD/09-Omnifood-Optimizations/img/logos/the-new-york-times.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/README.md: -------------------------------------------------------------------------------- 1 | 2 | # OMNIFOOD 3 | 4 | An online food ordering system – a website that allows customers to view the menu and place an order, 5 | and an admin interface that enables the restaurant to receive and fulfil customer orders. 6 | 7 | ## Used By 8 | 9 | This project is used by the following company: 10 | 11 | - Omnifood 12 | 13 | ## FAQ 14 | 15 | #### Where should I deploy it? 16 | 17 | Netlify is the best one! 18 | 19 | #### Can I use it as portfolio? 20 | 21 | of course, why not? 😉 22 | 23 | 24 | ## Author 25 | 26 | - Made with ❤ by [@Andrew Tsegaye](https://www.github.com/Andrew-Tsegaye) 27 | 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Food delivery Website 2 | 3 | Introducing Omnifood, the food delivery website that makes it easier than ever to enjoy your favorite meals. With a sleek and intuitive design, our platform makes it simple to browse through a variety of restaurants and menu options, and to place your order with just a few clicks. Whether you're looking for a quick bite during the workday or a gourmet feast for a special occasion, 4 | Omnifood has you covered. So why wait? Visit us today and discover the convenience of online food ordering. 5 | 6 | ![Omnifood](https://i.imgur.com/ct6hPsU.png) 7 | 8 | ## Tech Stack 9 | 10 | **Client:** JavaScript, HTML5, CSS3 11 | 12 | - Developed by [Andrew-Tsegaye](https://www.github.com/Andrew-Tsegaye) 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/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 | Large: 1.8 19 | 20 | - Letter spacing 21 | -0.5px 22 | 0.75px 23 | 24 | --- 02 COLORS 25 | 26 | - Primary: #e67e22 27 | - Tints: 28 | #fdf2e9 29 | #fae5d3 30 | #eb984e 31 | 32 | - Shades: 33 | #cf711f 34 | #45260a 35 | 36 | - Accents: 37 | - Greys 38 | 39 | #888 40 | #767676 (lightest grey allowed on #fff) 41 | #6f6f6f (lightest grey allowed on #fdf2e9) 42 | #555 43 | #333 44 | 45 | --- 05 SHADOWS 46 | 47 | 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); 48 | 49 | --- 06 BORDER-RADIUS 50 | 51 | Default: 9px 52 | Medium: 11px 53 | 54 | --- 07 WHITESPACE 55 | 56 | - Spacing system (px) 57 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 58 | */ 59 | 60 | * { 61 | padding: 0; 62 | margin: 0; 63 | box-sizing: border-box; 64 | } 65 | 66 | html { 67 | /* font-size: 10px; */ 68 | 69 | /* 10px / 16px = 0.625 = 62.5% */ 70 | /* Percentage of user's browser font-size setting */ 71 | font-size: 62.5%; 72 | overflow-x: hidden; 73 | 74 | /* Does NOT work on Safari */ 75 | /* scroll-behavior: smooth; */ 76 | } 77 | 78 | body { 79 | font-family: "Rubik", sans-serif; 80 | line-height: 1; 81 | font-weight: 400; 82 | color: #555; 83 | 84 | /* Only works if there is nothing absolutely positioned in relation to body */ 85 | overflow-x: hidden; 86 | } 87 | 88 | /**************************/ 89 | /* GENRAL REUSABLE COMPONENTS */ 90 | /**************************/ 91 | 92 | .container { 93 | /* 1140px */ 94 | max-width: 120rem; 95 | padding: 0 3.2rem; 96 | margin: 0 auto; 97 | } 98 | 99 | .grid { 100 | display: grid; 101 | column-gap: 6.4rem; 102 | row-gap: 9.6rem; 103 | 104 | /* margin-bottom: 9.6rem; */ 105 | } 106 | 107 | /* .grid:last-child { 108 | margin-bottom: 0; 109 | } */ 110 | 111 | .grid:not(:last-child) { 112 | margin-bottom: 9.6rem; 113 | } 114 | 115 | .grid--2-cols { 116 | grid-template-columns: repeat(2, 1fr); 117 | } 118 | 119 | .grid--3-cols { 120 | grid-template-columns: repeat(3, 1fr); 121 | } 122 | 123 | .grid--4-cols { 124 | grid-template-columns: repeat(4, 1fr); 125 | } 126 | 127 | /* .grid--5-cols { 128 | grid-template-columns: repeat(5, 1fr); 129 | } */ 130 | 131 | .grid--center-v { 132 | align-items: center; 133 | } 134 | 135 | .heading-primary, 136 | .heading-secondary, 137 | .heading-tertiary { 138 | font-weight: 700; 139 | color: #333; 140 | /* color: #45260a; */ 141 | /* color: #343a40; */ 142 | letter-spacing: -0.5px; 143 | } 144 | 145 | .heading-primary { 146 | font-size: 5.2rem; 147 | line-height: 1.05; 148 | margin-bottom: 3.2rem; 149 | } 150 | 151 | .heading-secondary { 152 | font-size: 4.4rem; 153 | line-height: 1.2; 154 | margin-bottom: 9.6rem; 155 | } 156 | 157 | .heading-tertiary { 158 | font-size: 3rem; 159 | line-height: 1.2; 160 | margin-bottom: 3.2rem; 161 | } 162 | 163 | .subheading { 164 | display: block; 165 | font-size: 1.6rem; 166 | font-weight: 500; 167 | color: #cf711f; 168 | text-transform: uppercase; 169 | margin-bottom: 1.6rem; 170 | letter-spacing: 0.75px; 171 | } 172 | 173 | .btn, 174 | .btn:link, 175 | .btn:visited { 176 | display: inline-block; 177 | 178 | text-decoration: none; 179 | font-size: 2rem; 180 | font-weight: 600; 181 | padding: 1.6rem 3.2rem; 182 | border-radius: 9px; 183 | 184 | /* Only necessary for .btn */ 185 | border: none; 186 | cursor: pointer; 187 | font-family: inherit; 188 | 189 | /* Put transition on original "state" */ 190 | /* transition: background-color 0.3s; */ 191 | transition: all 0.3s; 192 | } 193 | 194 | .btn--full:link, 195 | .btn--full:visited { 196 | background-color: #e67e22; 197 | color: #fff; 198 | } 199 | 200 | .btn--full:hover, 201 | .btn--full:active { 202 | background-color: #cf711f; 203 | } 204 | 205 | .btn--outline:link, 206 | .btn--outline:visited { 207 | background-color: #fff; 208 | color: #555; 209 | } 210 | 211 | .btn--outline:hover, 212 | .btn--outline:active { 213 | background-color: #fdf2e9; 214 | 215 | /* border: 3px solid #fff; */ 216 | 217 | /* Trick to add border inside */ 218 | box-shadow: inset 0 0 0 3px #fff; 219 | } 220 | 221 | .btn--form { 222 | background-color: #45260a; 223 | color: #fdf2e9; 224 | align-self: end; 225 | padding: 1.2rem; 226 | } 227 | 228 | .btn--form:hover { 229 | background-color: #fff; 230 | color: #555; 231 | } 232 | 233 | .link:link, 234 | .link:visited { 235 | display: inline-block; 236 | color: #e67e22; 237 | text-decoration: none; 238 | border-bottom: 1px solid currentColor; 239 | padding-bottom: 2px; 240 | transition: all 0.3s; 241 | } 242 | 243 | .link:hover, 244 | .link:active { 245 | color: #cf711f; 246 | border-bottom: 1px solid transparent; 247 | } 248 | 249 | .list { 250 | list-style: none; 251 | display: flex; 252 | flex-direction: column; 253 | gap: 1.6rem; 254 | } 255 | 256 | .list-item { 257 | font-size: 1.8rem; 258 | display: flex; 259 | align-items: center; 260 | gap: 1.6rem; 261 | line-height: 1.2; 262 | } 263 | 264 | .list-icon { 265 | width: 3rem; 266 | height: 3rem; 267 | color: #e67e22; 268 | } 269 | 270 | *:focus { 271 | outline: none; 272 | /* outline: 4px dotted #e67e22; */ 273 | /* outline-offset: 8px; */ 274 | box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); 275 | } 276 | 277 | /* HELPER/SETTINGS CLASSES */ 278 | .margin-right-sm { 279 | margin-right: 1.6rem !important; 280 | } 281 | 282 | .margin-bottom-md { 283 | margin-bottom: 4.8rem !important; 284 | } 285 | 286 | .center-text { 287 | text-align: center; 288 | } 289 | 290 | strong { 291 | font-weight: 500; 292 | } 293 | -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/css/queries.css: -------------------------------------------------------------------------------- 1 | /* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */ 2 | 3 | /**************************/ 4 | /* BELOW 1344px (Smaller desktops) */ 5 | /**************************/ 6 | 7 | @media (max-width: 84em) { 8 | .hero { 9 | max-width: 120rem; 10 | } 11 | 12 | .heading-primary { 13 | font-size: 4.4rem; 14 | } 15 | 16 | .gallery { 17 | grid-template-columns: repeat(2, 1fr); 18 | } 19 | } 20 | 21 | /**************************/ 22 | /* BELOW 1200px (Landscape Tablets) */ 23 | /**************************/ 24 | 25 | @media (max-width: 75em) { 26 | html { 27 | /* 9px / 16px */ 28 | font-size: 56.25%; 29 | } 30 | 31 | .grid { 32 | column-gap: 4.8rem; 33 | row-gap: 6.4rem; 34 | } 35 | 36 | .heading-secondary { 37 | font-size: 3.6rem; 38 | } 39 | 40 | .heading-tertiary { 41 | font-size: 2.4rem; 42 | } 43 | 44 | .header { 45 | padding: 0 3.2rem; 46 | } 47 | 48 | .main-nav-list { 49 | gap: 3.2rem; 50 | } 51 | 52 | .hero { 53 | gap: 4.8rem; 54 | } 55 | 56 | .testimonials-container { 57 | padding: 9.6rem 3.2rem; 58 | } 59 | } 60 | 61 | /**************************/ 62 | /* BELOW 944px (Tablets) */ 63 | /**************************/ 64 | 65 | @media (max-width: 59em) { 66 | html { 67 | /* 8px / 16px = 0.5 = 50% */ 68 | font-size: 50%; 69 | } 70 | 71 | .hero { 72 | grid-template-columns: 1fr; 73 | padding: 0 8rem; 74 | gap: 6.4rem; 75 | } 76 | 77 | .hero-text-box, 78 | .hero-img-box { 79 | text-align: center; 80 | } 81 | 82 | .hero-img { 83 | width: 60%; 84 | } 85 | 86 | .delivered-meals { 87 | justify-content: center; 88 | margin-top: 3.2rem; 89 | } 90 | 91 | .logos img { 92 | height: 2.4rem; 93 | } 94 | 95 | .step-number { 96 | font-size: 7.4rem; 97 | } 98 | 99 | .meal-content { 100 | padding: 2.4rem 3.2rem 3.2rem 3.2rem; 101 | } 102 | 103 | .section-testimonials { 104 | grid-template-columns: 1fr; 105 | } 106 | 107 | .gallery { 108 | grid-template-columns: repeat(6, 1fr); 109 | } 110 | 111 | .cta { 112 | /* 3/5 = 60% + 2/5 = 40% */ 113 | grid-template-columns: 3fr 2fr; 114 | } 115 | 116 | .cta-form { 117 | grid-template-columns: 1fr; 118 | } 119 | 120 | .btn--form { 121 | margin-top: 1.2rem; 122 | } 123 | 124 | /* MOBILE NAVIGATION */ 125 | .btn-mobile-nav { 126 | display: block; 127 | z-index: 9999; 128 | } 129 | 130 | .main-nav { 131 | background-color: rgba(255, 255, 255, 0.9); 132 | -webkit-backdrop-filter: blur(5px); 133 | backdrop-filter: blur(10px); 134 | position: absolute; 135 | top: 0; 136 | left: 0; 137 | width: 100%; 138 | height: 100vh; 139 | transform: translateX(100%); 140 | 141 | display: flex; 142 | align-items: center; 143 | justify-content: center; 144 | transition: all 0.5s ease-in; 145 | 146 | /* Hide navigation */ 147 | /* Allows NO transitions at all */ 148 | /* display: none; */ 149 | 150 | /* 1) Hide it visually */ 151 | opacity: 0; 152 | 153 | /* 2) Make it unaccessible to mouse and keyboard */ 154 | pointer-events: none; 155 | 156 | /* 3) Hide it from screen readers */ 157 | visibility: hidden; 158 | } 159 | 160 | .nav-open .main-nav { 161 | opacity: 1; 162 | pointer-events: auto; 163 | visibility: visible; 164 | transform: translateX(0); 165 | } 166 | 167 | .nav-open .icon-mobile-nav[name="close-outline"] { 168 | display: block; 169 | } 170 | 171 | .nav-open .icon-mobile-nav[name="menu-outline"] { 172 | display: none; 173 | } 174 | 175 | .main-nav-list { 176 | flex-direction: column; 177 | gap: 4.8rem; 178 | } 179 | 180 | .main-nav-link:link, 181 | .main-nav-link:visited { 182 | font-size: 3rem; 183 | } 184 | } 185 | 186 | /**************************/ 187 | /* BELOW 704px (Smaller tablets) */ 188 | /**************************/ 189 | 190 | @media (max-width: 44em) { 191 | .grid--3-cols, 192 | .grid--4-cols { 193 | grid-template-columns: repeat(2, 1fr); 194 | } 195 | 196 | .diets { 197 | grid-column: 1 / -1; 198 | justify-self: center; 199 | } 200 | 201 | .heading-secondary { 202 | margin-bottom: 4.8rem; 203 | } 204 | 205 | .pricing-plan { 206 | width: 100%; 207 | } 208 | 209 | .grid--footer { 210 | grid-template-columns: repeat(6, 1fr); 211 | } 212 | 213 | .logo-col, 214 | .address-col { 215 | grid-column: span 3; 216 | } 217 | 218 | .nav-col { 219 | grid-row: 1; 220 | grid-column: span 2; 221 | margin-bottom: 3.2rem; 222 | } 223 | } 224 | 225 | /**************************/ 226 | /* BELOW 544px (Phones) */ 227 | /**************************/ 228 | 229 | @media (max-width: 34em) { 230 | .grid { 231 | row-gap: 4.8rem; 232 | } 233 | 234 | .grid--2-cols, 235 | .grid--3-cols, 236 | .grid--4-cols { 237 | grid-template-columns: 1fr; 238 | } 239 | 240 | .btn, 241 | .btn:link, 242 | .btn:visited { 243 | padding: 2.4rem 1.6rem; 244 | } 245 | 246 | .section-hero { 247 | padding: 2.4rem 0 6.4rem 0; 248 | } 249 | 250 | .hero { 251 | padding: 0 3.2rem; 252 | } 253 | 254 | .hero-img { 255 | width: 80%; 256 | } 257 | 258 | .logos img { 259 | height: 1.2rem; 260 | } 261 | 262 | .step-img-box:nth-child(2) { 263 | grid-row: 1; 264 | } 265 | 266 | .step-img-box:nth-child(6) { 267 | grid-row: 5; 268 | } 269 | 270 | .step-img-box { 271 | transform: translateY(2.4rem); 272 | } 273 | 274 | .testimonials { 275 | grid-template-columns: 1fr; 276 | } 277 | 278 | .gallery { 279 | grid-template-columns: repeat(4, 1fr); 280 | gap: 1.2rem; 281 | } 282 | 283 | .cta { 284 | grid-template-columns: 1fr; 285 | } 286 | 287 | .cta-text-box { 288 | padding: 3.2rem; 289 | } 290 | 291 | .cta-img-box { 292 | height: 32rem; 293 | grid-row: 1; 294 | } 295 | } 296 | 297 | /* 298 | - Font sizes (px) 299 | 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 300 | 301 | - Spacing system (px) 302 | 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 303 | */ 304 | 305 | /**************************/ 306 | /* Fixing Safari flexbox gap */ 307 | /**************************/ 308 | 309 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 310 | margin-right: 4.8rem; 311 | } 312 | 313 | .no-flexbox-gap .list-item:not(:last-child) { 314 | margin-bottom: 1.6rem; 315 | } 316 | 317 | .no-flexbox-gap .list-icon:not(:last-child) { 318 | margin-right: 1.6rem; 319 | } 320 | 321 | .no-flexbox-gap .delivered-faces { 322 | margin-right: 1.6rem; 323 | } 324 | 325 | .no-flexbox-gap .meal-attribute:not(:last-child) { 326 | margin-bottom: 2rem; 327 | } 328 | 329 | .no-flexbox-gap .meal-icon { 330 | margin-right: 1.6rem; 331 | } 332 | 333 | .no-flexbox-gap .footer-row div:not(:last-child) { 334 | margin-right: 6.4rem; 335 | } 336 | 337 | .no-flexbox-gap .social-links li:not(:last-child) { 338 | margin-right: 2.4rem; 339 | } 340 | 341 | .no-flexbox-gap .footer-nav li:not(:last-child) { 342 | margin-bottom: 2.4rem; 343 | } 344 | 345 | @media (max-width: 75em) { 346 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 347 | margin-right: 3.2rem; 348 | } 349 | } 350 | 351 | @media (max-width: 59em) { 352 | .no-flexbox-gap .main-nav-list li:not(:last-child) { 353 | margin-right: 0; 354 | margin-bottom: 4.8rem; 355 | } 356 | } 357 | -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/css/style.css: -------------------------------------------------------------------------------- 1 | /**************************/ 2 | /* HEADER */ 3 | /**************************/ 4 | 5 | .header { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | background-color: #fdf2e9; 10 | 11 | /* Because we want header to be sticky later */ 12 | height: 9.6rem; 13 | padding: 0 4.8rem; 14 | position: relative; 15 | } 16 | 17 | .logo { 18 | height: 2.2rem; 19 | } 20 | 21 | /**************************/ 22 | /* NAVIGATION */ 23 | /**************************/ 24 | 25 | .main-nav-list { 26 | list-style: none; 27 | display: flex; 28 | align-items: center; 29 | gap: 4.8rem; 30 | } 31 | 32 | .main-nav-link:link, 33 | .main-nav-link:visited { 34 | display: inline-block; 35 | text-decoration: none; 36 | color: #333; 37 | font-weight: 500; 38 | font-size: 1.8rem; 39 | transition: all 0.3s; 40 | } 41 | 42 | .main-nav-link:hover, 43 | .main-nav-link:active { 44 | color: #cf711f; 45 | } 46 | 47 | .main-nav-link.nav-cta:link, 48 | .main-nav-link.nav-cta:visited { 49 | padding: 1.2rem 2.4rem; 50 | border-radius: 9px; 51 | color: #fff; 52 | background-color: #e67e22; 53 | } 54 | 55 | .main-nav-link.nav-cta:hover, 56 | .main-nav-link.nav-cta:active { 57 | background-color: #cf711f; 58 | } 59 | 60 | /* MOBILE */ 61 | .btn-mobile-nav { 62 | border: none; 63 | background: none; 64 | cursor: pointer; 65 | 66 | display: none; 67 | } 68 | 69 | .icon-mobile-nav { 70 | height: 4.8rem; 71 | width: 4.8rem; 72 | color: #333; 73 | } 74 | 75 | .icon-mobile-nav[name="close-outline"] { 76 | display: none; 77 | } 78 | 79 | /* STICKY NAVIGATION */ 80 | .sticky .header { 81 | position: fixed; 82 | top: 0; 83 | bottom: 0; 84 | width: 100%; 85 | height: 8rem; 86 | padding-top: 0; 87 | padding-bottom: 0; 88 | background-color: rgba(255, 255, 255, 0.97); 89 | z-index: 999; 90 | box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03); 91 | } 92 | 93 | .sticky .section-hero { 94 | margin-top: 9.6rem; 95 | } 96 | 97 | /**************************/ 98 | /* HERO SECTION */ 99 | /**************************/ 100 | 101 | .section-hero { 102 | background-color: #fdf2e9; 103 | padding: 4.8rem 0 9.6rem 0; 104 | } 105 | 106 | .hero { 107 | max-width: 130rem; 108 | margin: 0 auto; 109 | padding: 0 3.2rem; 110 | display: grid; 111 | grid-template-columns: 1fr 1fr; 112 | gap: 9.6rem; 113 | align-items: center; 114 | } 115 | 116 | .hero-description { 117 | font-size: 2rem; 118 | line-height: 1.6; 119 | margin-bottom: 4.8rem; 120 | } 121 | 122 | .hero-img { 123 | width: 100%; 124 | } 125 | 126 | .delivered-meals { 127 | display: flex; 128 | align-items: center; 129 | gap: 1.6rem; 130 | margin-top: 8rem; 131 | } 132 | 133 | .delivered-imgs { 134 | display: flex; 135 | } 136 | 137 | .delivered-imgs img { 138 | height: 4.8rem; 139 | width: 4.8rem; 140 | border-radius: 50%; 141 | margin-right: -1.6rem; 142 | border: 3px solid #fdf2e9; 143 | } 144 | 145 | .delivered-imgs img:last-child { 146 | margin: 0; 147 | } 148 | 149 | .delivered-text { 150 | font-size: 1.8rem; 151 | font-weight: 600; 152 | } 153 | 154 | .delivered-text span { 155 | color: #cf711f; 156 | font-weight: 700; 157 | } 158 | 159 | /**************************/ 160 | /* FEATURED IN SECTION */ 161 | /**************************/ 162 | 163 | .section-featured { 164 | padding: 4.8rem 0 3.2rem 0; 165 | } 166 | 167 | .heading-featured-in { 168 | font-size: 1.4rem; 169 | text-transform: uppercase; 170 | letter-spacing: 0.75px; 171 | font-weight: 500; 172 | text-align: center; 173 | margin-bottom: 2.4rem; 174 | color: #888; 175 | } 176 | 177 | .logos { 178 | display: flex; 179 | justify-content: space-around; 180 | } 181 | 182 | .logos img { 183 | height: 3.2rem; 184 | filter: brightness(0); 185 | opacity: 50%; 186 | } 187 | 188 | /**************************/ 189 | /* HOW IT WORKS SECTION */ 190 | /**************************/ 191 | 192 | .section-how { 193 | padding: 9.6rem 0; 194 | } 195 | 196 | .step-number { 197 | font-size: 8.6rem; 198 | font-weight: 600; 199 | color: #ddd; 200 | margin-bottom: 1.2rem; 201 | } 202 | 203 | .step-description { 204 | font-size: 1.8rem; 205 | line-height: 1.8; 206 | } 207 | 208 | .step-img-box { 209 | position: relative; 210 | 211 | display: flex; 212 | align-items: center; 213 | justify-content: center; 214 | } 215 | 216 | .step-img-box::before, 217 | .step-img-box::after { 218 | content: ""; 219 | display: block; 220 | border-radius: 50%; 221 | position: absolute; 222 | top: 50%; 223 | left: 50%; 224 | transform: translate(-50%, -50%); 225 | } 226 | 227 | .step-img-box::before { 228 | width: 60%; 229 | /* height: 60%; */ 230 | 231 | /* 60% of parent's width */ 232 | padding-bottom: 60%; 233 | 234 | background-color: #fdf2e9; 235 | z-index: -2; 236 | } 237 | 238 | .step-img-box::after { 239 | width: 45%; 240 | padding-bottom: 45%; 241 | background-color: #fae5d3; 242 | z-index: -1; 243 | } 244 | 245 | .step-img { 246 | width: 35%; 247 | /* z-index: 10; */ 248 | } 249 | 250 | /**************************/ 251 | /* MEALS SECTION */ 252 | /**************************/ 253 | 254 | .section-meals { 255 | padding: 9.6rem 0; 256 | } 257 | 258 | .meal { 259 | box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); 260 | border-radius: 11px; 261 | overflow: hidden; 262 | transition: all 0.4s; 263 | } 264 | 265 | .meal:hover { 266 | transform: translateY(-1.2rem); 267 | box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); 268 | } 269 | 270 | .meal-content { 271 | padding: 3.2rem 4.8rem 4.8rem 4.8rem; 272 | } 273 | 274 | .meal-tags { 275 | margin-bottom: 1.2rem; 276 | display: flex; 277 | gap: 0.4rem; 278 | } 279 | 280 | .tag { 281 | display: inline-block; 282 | padding: 0.4rem 0.8rem; 283 | font-size: 1.2rem; 284 | text-transform: uppercase; 285 | color: #333; 286 | border-radius: 100px; 287 | font-weight: 600; 288 | } 289 | 290 | .tag--vegetarian { 291 | background-color: #51cf66; 292 | } 293 | .tag--vegan { 294 | background-color: #94d82d; 295 | } 296 | .tag--paleo { 297 | background-color: #ffd43b; 298 | } 299 | 300 | .meal-title { 301 | font-size: 2.4rem; 302 | color: #333; 303 | font-weight: 600; 304 | margin-bottom: 3.2rem; 305 | } 306 | 307 | .meal-attributes { 308 | list-style: none; 309 | display: flex; 310 | flex-direction: column; 311 | gap: 2rem; 312 | } 313 | 314 | .meal-attribute { 315 | font-size: 1.8rem; 316 | display: flex; 317 | align-items: center; 318 | gap: 1.6rem; 319 | } 320 | 321 | .meal-icon { 322 | height: 2.4rem; 323 | width: 2.4rem; 324 | color: #e67e22; 325 | } 326 | 327 | .meal-img { 328 | width: 100%; 329 | } 330 | 331 | .all-recipes { 332 | text-align: center; 333 | font-size: 1.8rem; 334 | } 335 | 336 | /**************************/ 337 | /* TESTIMONIALS SECTION */ 338 | /**************************/ 339 | 340 | .section-testimonials { 341 | background-color: #fdf2e9; 342 | display: grid; 343 | grid-template-columns: 55fr 45fr; 344 | align-items: center; 345 | } 346 | 347 | .testimonials-container { 348 | padding: 9.6rem; 349 | } 350 | 351 | .testimonials { 352 | display: grid; 353 | grid-template-columns: 1fr 1fr; 354 | row-gap: 4.8rem; 355 | column-gap: 8rem; 356 | } 357 | 358 | .testimonial-img { 359 | width: 6.4rem; 360 | border-radius: 50%; 361 | margin-bottom: 1.2rem; 362 | } 363 | 364 | .testimonial-text { 365 | font-size: 1.8rem; 366 | line-height: 1.8; 367 | margin-bottom: 1.6rem; 368 | } 369 | 370 | .testimonial-name { 371 | font-size: 1.6rem; 372 | color: #6f6f6f; 373 | } 374 | 375 | .gallery { 376 | display: grid; 377 | grid-template-columns: repeat(3, 1fr); 378 | gap: 1.6rem; 379 | padding: 1.6rem; 380 | } 381 | 382 | .gallery-item { 383 | overflow: hidden; 384 | } 385 | 386 | .gallery-item img { 387 | display: block; 388 | width: 100%; 389 | transition: all 0.4s; 390 | } 391 | 392 | .gallery-item img:hover { 393 | transform: scale(1.1); 394 | } 395 | 396 | /**************************/ 397 | /* MEALS SECTION */ 398 | /**************************/ 399 | 400 | .section-pricing { 401 | padding: 9.6rem 0; 402 | } 403 | 404 | .pricing-plan { 405 | border-radius: 11px; 406 | 407 | width: 75%; 408 | } 409 | 410 | .pricing-plan--starter { 411 | justify-self: end; 412 | border: 2px solid #fdf2e9; 413 | padding: 4.6rem; 414 | } 415 | 416 | .pricing-plan--complete { 417 | background-color: #fdf2e9; 418 | padding: 4.8rem; 419 | position: relative; 420 | overflow: hidden; 421 | } 422 | 423 | .pricing-plan--complete::after { 424 | content: "Best value"; 425 | position: absolute; 426 | top: 6%; 427 | right: -18%; 428 | 429 | text-transform: uppercase; 430 | font-size: 1.4rem; 431 | font-weight: 700; 432 | color: #333; 433 | background-color: #ffd43b; 434 | padding: 0.8rem 8rem; 435 | transform: rotate(45deg); 436 | } 437 | 438 | .plan-header { 439 | text-align: center; 440 | margin-bottom: 4.8rem; 441 | } 442 | 443 | .plan-name { 444 | color: #cf711f; 445 | font-weight: 600; 446 | font-size: 2rem; 447 | text-transform: uppercase; 448 | letter-spacing: 0.75; 449 | margin-bottom: 3.2rem; 450 | } 451 | 452 | .plan-price { 453 | font-size: 6.2rem; 454 | font-weight: 600; 455 | color: #333; 456 | margin-bottom: 1.6rem; 457 | } 458 | 459 | .plan-price span { 460 | font-size: 3rem; 461 | font-weight: 500; 462 | margin-right: 0.8rem; 463 | } 464 | 465 | .plan-text { 466 | font-size: 1.6rem; 467 | line-height: 1.6; 468 | color: #6f6f6f; 469 | } 470 | 471 | .plan-sing-up { 472 | text-align: center; 473 | margin-top: 4.8rem; 474 | } 475 | 476 | .plan-details { 477 | font-size: 1.6rem; 478 | line-height: 1.6; 479 | text-align: center; 480 | } 481 | 482 | .feature-icon { 483 | color: #e67e22; 484 | height: 3.2rem; 485 | width: 3.2rem; 486 | background-color: #fdf2e9; 487 | margin-bottom: 3.2rem; 488 | padding: 1.6rem; 489 | border-radius: 50%; 490 | } 491 | 492 | .feature-title { 493 | font-size: 2.4rem; 494 | color: #333; 495 | font-weight: 700; 496 | margin-bottom: 1.6rem; 497 | } 498 | 499 | .feature-text { 500 | font-size: 1.8rem; 501 | line-height: 1.8; 502 | } 503 | 504 | /**************************/ 505 | /* CTA SECTION */ 506 | /**************************/ 507 | 508 | .section-cta { 509 | /* top / right / bottom / left */ 510 | /* padding: 9.6rem 0 12.8rem 0; */ 511 | 512 | /* top / horizontal / left */ 513 | padding: 4.8rem 0 12.8rem; 514 | } 515 | 516 | .cta { 517 | display: grid; 518 | /* 2/3 = 66.6% + 1/3 = 33.3% */ 519 | grid-template-columns: 2fr 1fr; 520 | /* background-color: #e67e22; */ 521 | box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); 522 | border-radius: 11px; 523 | 524 | background-image: linear-gradient(to right bottom, #eb984e, #e67e22); 525 | overflow: hidden; 526 | } 527 | 528 | .cta-text-box { 529 | padding: 4.8rem 6.4rem 6.4rem 6.4rem; 530 | color: #45260a; 531 | } 532 | 533 | .cta .heading-secondary { 534 | /* color: #45260a; */ 535 | color: inherit; 536 | margin-bottom: 3.2rem; 537 | } 538 | 539 | .cta-text { 540 | font-size: 1.8rem; 541 | line-height: 1.8; 542 | margin-bottom: 4.8rem; 543 | } 544 | 545 | .cta-img-box { 546 | background-image: linear-gradient( 547 | to right bottom, 548 | rgba(235, 151, 78, 0.35), 549 | rgba(230, 125, 34, 0.35) 550 | ), 551 | url("../img/eating.jpg"); 552 | background-size: cover; 553 | background-position: center; 554 | } 555 | 556 | .cta-form { 557 | display: grid; 558 | grid-template-columns: 1fr 1fr; 559 | column-gap: 3.2rem; 560 | row-gap: 2.4rem; 561 | } 562 | 563 | .cta-form label { 564 | display: block; 565 | font-size: 1.6rem; 566 | font-weight: 500; 567 | margin-bottom: 1.2rem; 568 | } 569 | 570 | .cta-form input, 571 | .cta-form select { 572 | width: 100%; 573 | padding: 1.2rem; 574 | font-size: 1.8rem; 575 | font-family: inherit; 576 | color: inherit; 577 | border: none; 578 | background-color: #fdf2e9; 579 | border-radius: 9px; 580 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 581 | } 582 | 583 | .cta-form input::placeholder { 584 | color: #aaa; 585 | } 586 | 587 | .cta *:focus { 588 | outline: none; 589 | box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); 590 | } 591 | 592 | /**************************/ 593 | /* FOOTER */ 594 | /**************************/ 595 | 596 | .footer { 597 | padding: 12.8rem 0; 598 | border-top: 1px solid #eee; 599 | } 600 | 601 | .grid--footer { 602 | grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; 603 | } 604 | 605 | .logo-col { 606 | display: flex; 607 | flex-direction: column; 608 | } 609 | 610 | .footer-logo { 611 | display: block; 612 | margin-bottom: 3.2rem; 613 | } 614 | 615 | .social-links { 616 | list-style: none; 617 | display: flex; 618 | gap: 2.4rem; 619 | } 620 | 621 | .social-icon { 622 | height: 2.4rem; 623 | width: 2.4rem; 624 | } 625 | 626 | .copyright { 627 | font-size: 1.4rem; 628 | line-height: 1.6; 629 | color: #767676; 630 | margin-top: auto; 631 | } 632 | 633 | .footer-heading { 634 | font-size: 1.8rem; 635 | font-weight: 500; 636 | margin-bottom: 4rem; 637 | } 638 | 639 | .contacts { 640 | font-style: normal; 641 | font-size: 1.6rem; 642 | line-height: 1.6; 643 | } 644 | 645 | .address { 646 | margin-bottom: 2.4rem; 647 | } 648 | 649 | .footer-nav { 650 | list-style: none; 651 | display: flex; 652 | flex-direction: column; 653 | gap: 2.4rem; 654 | } 655 | 656 | .footer-link:link, 657 | .footer-link:visited { 658 | text-decoration: none; 659 | font-size: 1.6rem; 660 | color: #767676; 661 | transition: all 0.3s; 662 | } 663 | 664 | .footer-link:hover, 665 | .footer-link:active { 666 | color: #555; 667 | } 668 | -------------------------------------------------------------------------------- /09-Omnifood-Optimizations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 | 26 | 27 | 31 | 35 | 36 | 40 | 41 | 42 | Omnifood — Never cook again! 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 61 | 62 | 66 |
67 | 68 |
69 |
70 |
71 |
72 |

73 | A healthy meal delivered to your door, every single day 74 |

75 |

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

80 | Start eating well 83 | 84 | Learn more ↓ 85 |
86 |
87 | Customer photo 88 | Customer photo 89 | Customer photo 90 | Customer photo 91 | Customer photo 92 | Customer photo 93 |
94 |

95 | 250,000+ meals delivered last year! 96 |

97 |
98 |
99 |
100 | 101 | 102 | 103 | 104 | Woman enjoying food, meals in storage container, and food bowls on a table 109 | 110 |
111 |
112 |
113 | 114 |
115 |
116 |

As featured in

117 |
118 | Techcrunch logo 119 | Business Insider logo 123 | The New York Times logo 127 | Forbes logo 128 | USA Today logo 129 |
130 |
131 |
132 | 133 |
134 |
135 | How it works 136 |

137 | Your daily dose of health in 3 simple steps 138 |

139 |
140 | 141 |
142 | 143 |
144 |

01

145 |

146 | Tell us what you like (and what not) 147 |

148 |

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

154 |
155 | 156 |
157 | iPhone app 161 | preferences selection screen 163 |
164 | 165 | 166 |
167 | iPhone app 171 | meal approving plan screen 173 |
174 |
175 |

02

176 |

Approve your weekly meal plan

177 |

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

182 |
183 | 184 | 185 |
186 |

03

187 |

Receive meals at convenient time

188 |

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

193 |
194 |
195 | iPhone app 199 | delivery screen 201 |
202 |
203 |
204 | 205 |
206 |
207 | Meals 208 |

209 | Omnifood AI chooses from 5,000+ recipes 210 |

211 |
212 | 213 |
214 |
215 | Japanese Gyozas 220 |
221 |
222 | Vegetarian 223 |
224 |

Japanese Gyozas

225 |
    226 |
  • 227 | 228 | 650 calories 229 |
    • 230 |
  • 231 | 235 | NutriScore ® 74 236 |
    • 237 |
  • 238 | 239 | 4.9 rating (537) 240 |
    • 241 |
242 |
243 |
244 | 245 |
246 | Avocado Salad 251 |
252 |
253 | Vegan 254 | Paleo 255 |
256 |

Avocado Salad

257 |
    258 |
  • 259 | 260 | 400 calories 261 |
    • 262 |
  • 263 | 267 | NutriScore ® 92 268 |
    • 269 |
  • 270 | 271 | 4.8 rating (441) 272 |
    • 273 |
274 |
275 |
276 | 277 |
278 |

Works with any diet:

279 |
    280 |
  • 281 | 282 | Vegetarian 283 |
    • 284 |
  • 285 | 286 | Vegan 287 |
    • 288 |
  • 289 | 290 | Pescatarian 291 |
    • 292 |
  • 293 | 294 | Gluten-free 295 |
    • 296 |
  • 297 | 298 | Lactose-free 299 |
    • 300 |
  • 301 | 302 | Keto 303 |
    • 304 |
  • 305 | 306 | Paleo 307 |
    • 308 |
  • 309 | 310 | Low FODMAP 311 |
    • 312 |
  • 313 | 314 | Kid-friendly 315 |
    • 316 |
317 |
318 |
319 | 320 |
321 | See all recipes → 322 |
323 |
324 | 325 |
326 |
327 | Testimonials 328 |

Once you try it, you can't go back

329 | 330 |
331 |
332 | Photo of customer Dave Bryson 337 |
338 | Inexpensive, healthy and great-tasting meals, without even 339 | having to order manually! It feels truly magical. 340 |
341 |

— Dave Bryson

342 |
343 | 344 |
345 | Photo of customer Ben Hadley 350 |
351 | The AI algorithm is crazy good, it chooses the right meals for 352 | me every time. It's amazing not to worry about food anymore! 353 |
354 |

— Ben Hadley

355 |
356 | 357 |
358 | Photo of customer Steve Miller 363 |
364 | Omnifood is a life saver! I just started a company, so there's 365 | no time for cooking. I couldn't live without my daily meals now! 366 |
367 |

— Steve Miller

368 |
369 | 370 |
371 | Photo of customer Hannah Smith 376 |
377 | I got Omnifood for the whole family, and it frees up so much 378 | time! Plus, everything is organic and vegan and without plastic. 379 |
380 |

— Hannah Smith

381 |
382 |
383 |
384 | 385 |
386 |
387 | Photo of beautifully 390 | arranged food 392 | 393 |
394 |
395 | Photo of beautifully 398 | arranged food 400 |
401 |
402 | Photo of beautifully 405 | arranged food 407 |
408 |
409 | Photo of beautifully 412 | arranged food 414 |
415 |
416 | Photo of beautifully 419 | arranged food 421 |
422 |
423 | Photo of beautifully 426 | arranged food 428 |
429 |
430 | Photo of beautifully 433 | arranged food 435 |
436 |
437 | Photo of beautifully 440 | arranged food 442 |
443 |
444 | Photo of beautifully 447 | arranged food 449 |
450 |
451 | Photo of beautifully 454 | arranged food 456 |
457 |
458 | Photo of beautifully 461 | arranged food 463 |
464 |
465 | Photo of beautifully 468 | arranged food 470 |
471 |
472 |
473 | 474 |
475 |
476 | Pricing 477 |

478 | Eating well without breaking the bank 479 |

480 |
481 | 482 |
483 |
484 |
485 |

Starter

486 |

$399

487 |

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

488 |
489 |
    490 |
  • 491 | 492 | 1 meal per day 493 |
    • 494 |
  • 495 | 496 | Order from 11am to 9pm 497 |
    • 498 |
  • 499 | 500 | Delivery is free 501 |
    • 502 |
  • 503 | 504 |
    • 505 |
506 |
507 | Start eating well 508 |
509 |
510 | 511 |
512 |
513 |

Complete

514 |

$649

515 |

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

516 |
517 |
    518 |
  • 519 | 520 | 2 meals per day 521 |
    • 522 |
  • 523 | 524 | Order 24/7 525 |
    • 526 |
  • 527 | 528 | Delivery is free 529 |
    • 530 |
  • 531 | 532 | Get access to latest recipes 533 |
    • 534 |
535 |
536 | Start eating well 537 |
538 |
539 |
540 | 541 |
542 | 546 |
547 | 548 |
549 |
550 | 551 |

Never cook again!

552 |

553 | Our subscriptions cover 365 days per year, even including major 554 | holidays. 555 |

556 |
557 |
558 | 559 |

Local and organic

560 |

561 | Our cooks only use local, fresh, and organic products to prepare 562 | your meals. 563 |

564 |
565 |
566 | 567 |

No waste

568 |

569 | All our partners only use reusable containers to package all your 570 | meals. 571 |

572 |
573 |
574 | 575 |

Pause anytime

576 |

577 | Going on vacation? Just pause your subscription, and we refund 578 | unused days. 579 |

580 |
581 |
582 |
583 | 584 |
585 |
586 |
587 |
588 |

Get your first meal for free!

589 |

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

594 | 595 |
596 |
597 | 598 | 605 |
606 | 607 |
608 | 609 | 616 |
617 | 618 |
619 | 620 | 628 |
629 | 630 | 631 | 632 | 634 |
635 |
636 | 641 |
642 |
643 |
644 |
645 | 646 | 723 | 724 | 725 | --------------------------------------------------------------------------------