diff --git a/attempt/05-Design/chair-1.jpg b/attempt/05-Design/chair-1.jpg new file mode 100644 index 000000000..3100aa168 Binary files /dev/null and b/attempt/05-Design/chair-1.jpg differ diff --git a/attempt/05-Design/chair-2.jpg b/attempt/05-Design/chair-2.jpg new file mode 100644 index 000000000..33c8d854c Binary files /dev/null and b/attempt/05-Design/chair-2.jpg differ diff --git a/attempt/05-Design/chair-3.jpg b/attempt/05-Design/chair-3.jpg new file mode 100644 index 000000000..f57fcf10e Binary files /dev/null and b/attempt/05-Design/chair-3.jpg differ diff --git a/attempt/05-Design/customers.jpg b/attempt/05-Design/customers.jpg new file mode 100644 index 000000000..2d1d4f851 Binary files /dev/null and b/attempt/05-Design/customers.jpg differ diff --git a/attempt/05-Design/hero.jpg b/attempt/05-Design/hero.jpg new file mode 100644 index 000000000..5532819b1 Binary files /dev/null and b/attempt/05-Design/hero.jpg differ diff --git a/attempt/05-Design/index.html b/attempt/05-Design/index.html new file mode 100644 index 000000000..c8b22e7a4 --- /dev/null +++ b/attempt/05-Design/index.html @@ -0,0 +1,381 @@ + + + + + + + + + + + Lisbon Chair Shop + + +
+
+
+

We design and build better chairs, for a better life

+

+ In a small shop in the heart of Lisbon, we spend our days + relentlessly perfecting the chair. The result is a perfect blend of + beauty and comfort, that will have a lasting impact on your health. +

+ Shop chairs +
+ Photo +
+ +
+

What makes our chairs special

+
+
+ + + + +

Science meets design

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus + similique adipisci praesentium. +

+
+ +
+ + + + +

+ Maximal comfort +

+

+ Reprehenderit optio placeat quasi excepturi architecto, explicabo + facilis perspiciatis error maxime magnam. +

+
+ +
+ + + + +

+ Ethical and sustainable +

+

+ Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat + omnis est laudantium voluptatem voluptas! +

+
+
+
+ +
+
+ People sitting on chairs +
+

"We couldn't live without these chairs anymore"

+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor + repellat at, nesciunt quia cum minima ipsum culpa totam sapiente + recusandae earum debitis doloribus in quasi voluptatibus! +
+

— Mary and Sarah Johnson

+
+
+
+ +
+

Our bestselling chairs

+
+
+ Chair +
+

The Laid Back

+
    +
  • + + + + + Leisure and relaxing +
    • +
  • + + + + Comfortable for 4h +
    • +
  • + + + + Vegan leather +
    • +
  • + + + + + Weighs 16 kg +
    • +
+
+ 250€ + Add to cart +
+
+
+ +
+ Chair +
+

The Worker Bee

+
    +
  • + + + + Work +
    • +
  • + + + + Comfortable for 8h +
    • +
  • + + + + Vegan leather +
    • +
  • + + + + Weighs 22 kg +
    • +
+
+ 525€ + Add to cart +
+
+
+ +
+ Chair +
+

The Chair 4/2

+
    +
  • + + + + Leisure and relaxing +
    • +
  • + + + + Comfortable all day! +
    • +
  • + + + + Organic cotton +
    • +
  • + + + + Weighs 80 kg +
    • +
+
+ 1450€ + Add to cart +
+
+
+
+
+ + +
+ + diff --git a/attempt/05-Design/style.css b/attempt/05-Design/style.css new file mode 100644 index 000000000..64f654f33 --- /dev/null +++ b/attempt/05-Design/style.css @@ -0,0 +1,221 @@ +/* +SPACING SYSTEM (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + +FONT SIZE SYSTEM (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 +*/ + +/* +MAIN COLOR: #087f5b +GREY COLOR: #343a40 +*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ------------------------ */ +/* GENERAL STYLES */ +/* ------------------------ */ +body { + font-family: "Inter", sans-serif; + color: #343a40; + border-bottom: 8px solid #087f5b; +} + +.container { + width: 960px; + margin: 0 auto; +} + +header, +section { + margin-bottom: 96px; +} + +h2 { + margin-bottom: 48px; + font-size: 36px; + letter-spacing: -0.5px; + /* 24 / 30 / 36 */ +} + +.grid-3-cols { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 80px; +} + +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + font-weight: 500; + + display: inline-block; + border-radius: 100px; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + +.btn--big { + font-size: 18px; + padding: 16px 32px; +} + +.btn--small { + font-size: 14px; + padding: 8px 12px; +} + +img { + border-radius: 12px; +} + +/* ------------------------ */ +/* COMPONENT STYLES */ +/* ------------------------ */ + +/* HEADER */ +header { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 80px; + margin-top: 64px; +} + +.header-text-box { + align-self: center; +} + +h1 { + margin-bottom: 32px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; + /* 44 / 52 / 62 */ + + /* text-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); */ +} + +.header-text { + margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; +} + +img { + width: 100%; +} + +/* FEATURES */ +.features-icon { + stroke: #087f5b; + width: 32px; + height: 32px; + margin-bottom: 24px; +} + +.features-title { + margin-bottom: 16px; + font-size: 20px; +} + +.features-text { + font-size: 18px; + line-height: 1.7; +} + +/* TESTIMONIAL */ +.testimonial-section { + background-color: #087f5b; + color: #fff; + padding: 24px; + border-radius: 12px; +} + +.testimonial-box { + grid-column: 2 / -1; + align-self: center; +} + +.testimonial-box h2 { + margin-bottom: 24px; + /* 20 / 24 / 30 */ + font-size: 24px; +} + +.testimonial-text { + font-style: italic; + margin-bottom: 24px; + font-size: 18px; + line-height: 1.7; + color: ##e6fcf5; +} + +.testimonial-author { + color: #c3fae8; +} + +/* CHAIRS */ +.chair { + box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.07); + border-radius: 12px; +} + +.chair img { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.chair-box { + padding: 32px; +} + +h3 { + margin-bottom: 24px; + font-size: 20px; +} + +.chair-details { + list-style: none; + margin-bottom: 48px; +} + +.chair-details li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +.chair-details li:last-child { + margin-bottom: 0; +} + +.chair-icon { + stroke: #087f5b; + width: 24px; + height: 24px; +} + +.chair-price { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 20px; +} + +footer { + margin-bottom: 48px; + font-size: 14px; + color: #495057; +} diff --git a/attempt/06-Components/01-accordian.html b/attempt/06-Components/01-accordian.html new file mode 100644 index 000000000..ffeadc3ae --- /dev/null +++ b/attempt/06-Components/01-accordian.html @@ -0,0 +1,222 @@ + + + + + + + + Accordion Component + + + +
+
+

01

+

Where are these chairs assembled?

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi + optio deleniti architecto officia, accusantium asperiores id + necessitatibus repudiandae ad! Iste, atque officiis. Nemo amet + aspernatur nostrum deserunt iste eaque temporibus? +

+
    +
  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    • +
  • Veritatis, qui totam quasi aperiam incidunt.
    • +
  • Laudantium eaque voluptates incidunt neque!
    • +
  • + Voluptate doloremque quisquam corporis facere facilis laborum. +
    • +
+
+
+ +
+

02

+

How long do I have to return my chair?

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi + optio deleniti architecto officia, accusantium asperiores id + necessitatibus repudiandae ad! Iste, atque officiis. Nemo amet + aspernatur nostrum deserunt iste eaque temporibus? +

+
    +
  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    • +
  • Veritatis, qui totam quasi aperiam incidunt.
    • +
  • Laudantium eaque voluptates incidunt neque!
    • +
  • + Voluptate doloremque quisquam corporis facere facilis laborum. +
    • +
+
+
+ +
+

03

+

Do you ship to countries outside the EU?

+ + + +
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi + optio deleniti architecto officia, accusantium asperiores id + necessitatibus repudiandae ad! Iste, atque officiis. Nemo amet + aspernatur nostrum deserunt iste eaque temporibus? +

+
    +
  • Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    • +
  • Veritatis, qui totam quasi aperiam incidunt.
    • +
  • Laudantium eaque voluptates incidunt neque!
    • +
  • + Voluptate doloremque quisquam corporis facere facilis laborum. +
    • +
+
+
+
+ + diff --git a/attempt/06-Components/02-carousel.html b/attempt/06-Components/02-carousel.html new file mode 100644 index 000000000..d298424aa --- /dev/null +++ b/attempt/06-Components/02-carousel.html @@ -0,0 +1,204 @@ + + + + + + + + Carousel Component + + + +
+ Maria de Almeida +
+

+ "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas + corrupti veritatis dolores reprehenderit doloribus facere molestiae + fugit dolorum minima, sit doloremque asperiores, saepe officia quaerat + itaque! Doloribus aliquid nostrum provident?" +

+

Maria de Almeida

+

Senior Product Manager at EDP Commercial

+
+ + + + + +
+ + + + +
+
+ + diff --git a/attempt/06-Components/03-table.html b/attempt/06-Components/03-table.html new file mode 100644 index 000000000..e46a3fba9 --- /dev/null +++ b/attempt/06-Components/03-table.html @@ -0,0 +1,112 @@ + + + + + + + + Table Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ChairThe Laid BackThe Worker BeeThe Chair 4/2
Width80 cm60 cm220 cm
Height100 cm110 cm90 cm
Depth70 cm65 cm80 cm
Weight16 kg22 kg80 kg
+ + diff --git a/attempt/06-Components/04-pagination.html b/attempt/06-Components/04-pagination.html new file mode 100644 index 000000000..4e3eb41ad --- /dev/null +++ b/attempt/06-Components/04-pagination.html @@ -0,0 +1,143 @@ + + + + + + + + Pagination Component + + + + + + diff --git a/attempt/06-Components/05-hero.html b/attempt/06-Components/05-hero.html new file mode 100644 index 000000000..9be2d6303 --- /dev/null +++ b/attempt/06-Components/05-hero.html @@ -0,0 +1,154 @@ + + + + + + + + + Omnifood Hero Section + + + +
+ + +
+
+

A healthy meal delivered to your door, every single day

+

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

+ Start eating well +
+
+
+
+
+

Some random heading

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero eius + dolores sed ipsum molestiae expedita temporibus ipsam modi, suscipit + excepturi cupiditate ratione, rerum repellendus eos nobis a aliquid + perferendis explicabo! +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero eius + dolores sed ipsum molestiae expedita temporibus ipsam modi, suscipit + excepturi cupiditate ratione, rerum repellendus eos nobis a aliquid + perferendis explicabo! +

+
+
+ + diff --git a/attempt/06-Components/06-app-layout.html b/attempt/06-Components/06-app-layout.html new file mode 100644 index 000000000..5638399ae --- /dev/null +++ b/attempt/06-Components/06-app-layout.html @@ -0,0 +1,117 @@ + + + + + + App Layout + + + + + + + + + + + +
+
Email 1
+
Email 2
+
Email 3
+
Email 4
+
Email 5
+
Email 6
+
Email 7
+
Email 8
+
Email 9
+
Email 10
+
+
Email view
+ + + diff --git a/attempt/06-Components/component.html b/attempt/06-Components/component.html new file mode 100644 index 000000000..80dcb2923 --- /dev/null +++ b/attempt/06-Components/component.html @@ -0,0 +1,42 @@ + + + + + + + + Component + + + + diff --git a/attempt/06-Components/hero.jpg b/attempt/06-Components/hero.jpg new file mode 100644 index 000000000..26f1847c8 Binary files /dev/null and b/attempt/06-Components/hero.jpg differ diff --git a/attempt/06-Components/maria.jpg b/attempt/06-Components/maria.jpg new file mode 100644 index 000000000..33fe230b9 Binary files /dev/null and b/attempt/06-Components/maria.jpg differ diff --git a/attempt/07-Omnifood-Desktop/content.md b/attempt/07-Omnifood-Desktop/content.md new file mode 100644 index 000000000..7193e017f --- /dev/null +++ b/attempt/07-Omnifood-Desktop/content.md @@ -0,0 +1,128 @@ +# Omnifood + +## About Omnifood + +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. + +## Branding + +Headline: A healthy meal delivered to your door, every single day + +Brand color: #e67e22 + +## Omnifood Website Content + +### Summary + +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! + +### Omnifood features + +Never cook again!: Our subscriptions cover 365 days per year, even including major holidays. +Local and organic: Our cooks only use local, fresh, and organic products to prepare your meals. +No waste: All our partners only use reusable containers to package all your meals. +Pause anytime: Going on vacation? Just pause your subscription, and we refund unused days. + +### How Omnifood works + +[Show big app images] + +**Your daily dose of health in 3 simple steps** + +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! + +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. + +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! + +### Omnifood works with any diet + +Vegetarian +Vegan +Pescatarian +Gluten-free +Lactose-free +Keto +Paleo +Low FODMAP +Kid-friendly + +### Sample meals + +**Omnifood AI chooses from 5,000+ recipes** + +Meal 1: Japanese Gyozas + +- Category: Vegetarian +- Calories: 650 +- NutriScore (Registered): 74 +- Average rating: 4.9 +- Number reviews: 537 + +Meal 2: Avocado Salad + +- Category: Vegan and Paleo +- Calories: 400 +- NutriScore (Registered): 92 +- Average rating: 4.8 +- Number reviews: 441 + +### We offer a free sample meal + +[Create simple form for users to sign up] + +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! + +### We have 2 pricing plans + +Prices include all applicable taxes. Users can cancel at any time. + +Starter: $399 per month + +- 1 meal per day +- Order times are between 11am and 9pm +- Delivery is free + +Complete: $649 per month + +- 2 meal2 per day +- Order 24/7 +- Delivery is free +- Get access to latest recipes + +### Photo gallery + +[Use the 12 photos we provided] + +### Customer testimonials + +[Photos of customers included] + +Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. (Dave Bryson) +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) +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) +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) + +### Section with logos of featured publications [see images] + +### Contact information + +Address: 623 Harrison St., 2nd Floor, San Francisco, CA 94107 +Phone: 415-201-6370 +Email: hello@omnifood.com + +Social profiles: instagram, facebook, twitter [links to them not available yet] + +### Additional links [links not available yet] + +Create account +Sign in +iOS app +Android app +About Omnifood +For Business +Cooking partners +Careers +Recipe directory +Help center +Privacy & terms diff --git a/attempt/07-Omnifood-Desktop/css/general.css b/attempt/07-Omnifood-Desktop/css/general.css new file mode 100644 index 000000000..4e8cb7052 --- /dev/null +++ b/attempt/07-Omnifood-Desktop/css/general.css @@ -0,0 +1,289 @@ +/* +--- 01 TYPOGRAPHY SYSTEM + +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Font weights +Default: 400 +Medium: 500 +Semi-bold: 600 +Bold: 700 + +- Line heights +Default: 1 +Small: 1.05 +Medium: 1.2 +Paragraph default: 1.6 +Large: 1.8 + +- Letter spacing +-0.5px +0.75px + +--- 02 COLORS + +- Primary: #e67e22 +- Tints: +#fdf2e9 +#fae5d3 +#eb984e + +- Shades: +#cf711f +#45260a + +- Accents: +- Greys + +#888 +#767676 (lightest grey allowed on #fff) +#6f6f6f (lightest grey allowed on #fdf2e9) +#555 +#333 + +--- 05 SHADOWS + +0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + +--- 06 BORDER-RADIUS + +Default: 9px +Medium: 11px + +--- 07 WHITESPACE + +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + /* font-size: 10px; */ + + /* 10px / 16px = 0.625 = 62.5% */ + /* Percentage of user's browser font-size setting */ + font-size: 62.5%; + overflow-x: hidden; +} + +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: #555; + + /* Only works if there is nothing absolutely positioned in relation to body */ + overflow-x: hidden; +} + +/**************************/ +/* GENRAL REUSABLE COMPONENTS */ +/**************************/ + +.container { + /* 1140px */ + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +.grid { + display: grid; + column-gap: 6.4rem; + row-gap: 9.6rem; + + /* margin-bottom: 9.6rem; */ +} + +/* .grid:last-child { + margin-bottom: 0; +} */ + +.grid:not(:last-child) { + margin-bottom: 9.6rem; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +/* .grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} */ + +.grid--center-v { + align-items: center; +} + +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: #333; + /* color: #45260a; */ + /* color: #343a40; */ + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 3.2rem; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.heading-tertiary { + font-size: 3rem; + line-height: 1.2; + margin-bottom: 3.2rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + color: #cf711f; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.btn, +.btn:link, +.btn:visited { + display: inline-block; + + text-decoration: none; + font-size: 2rem; + font-weight: 600; + padding: 1.6rem 3.2rem; + border-radius: 9px; + + /* Only necessary for .btn */ + border: none; + cursor: pointer; + font-family: inherit; + + /* Put transition on original "state" */ + /* transition: background-color 0.3s; */ + transition: all 0.3s; +} + +.btn--full:link, +.btn--full:visited { + background-color: #e67e22; + color: #fff; +} + +.btn--full:hover, +.btn--full:active { + background-color: #cf711f; +} + +.btn--outline:link, +.btn--outline:visited { + background-color: #fff; + color: #555; +} + +.btn--outline:hover, +.btn--outline:active { + background-color: #fdf2e9; + + /* border: 3px solid #fff; */ + + /* Trick to add border inside */ + box-shadow: inset 0 0 0 3px #fff; +} + +.btn--form { + background-color: #45260a; + color: #fdf2e9; + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: #555; +} + +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all 0.3s; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; + line-height: 1.2; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +*:focus { + outline: none; + /* outline: 4px dotted #e67e22; */ + /* outline-offset: 8px; */ + box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); +} + +/* HELPER/SETTINGS CLASSES */ +.margin-right-sm { + margin-right: 1.6rem !important; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +strong { + font-weight: 500; +} diff --git a/attempt/07-Omnifood-Desktop/css/queries.css b/attempt/07-Omnifood-Desktop/css/queries.css new file mode 100644 index 000000000..5f0cf2820 --- /dev/null +++ b/attempt/07-Omnifood-Desktop/css/queries.css @@ -0,0 +1,300 @@ +/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */ + +/**************************/ +/* BELOW 1344px (Smaller desktops) */ +/**************************/ + +@media (max-width: 84em) { + .hero { + max-width: 120rem; + } + + .heading-primary { + font-size: 4.4rem; + } + + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} + +/**************************/ +/* BELOW 1200px (Landscape Tablets) */ +/**************************/ + +@media (max-width: 75em) { + html { + /* 9px / 16px */ + font-size: 56.25%; + } + + .grid { + column-gap: 4.8rem; + row-gap: 6.4rem; + } + + .heading-secondary { + font-size: 3.6rem; + } + + .heading-tertiary { + font-size: 2.4rem; + } + + .header { + padding: 0 3.2rem; + } + + .main-nav-list { + gap: 3.2rem; + } + + .hero { + gap: 4.8rem; + } + + .testimonials-container { + padding: 9.6rem 3.2rem; + } +} + +/**************************/ +/* BELOW 944px (Tablets) */ +/**************************/ + +@media (max-width: 59em) { + html { + /* 8px / 16px = 0.5 = 50% */ + font-size: 50%; + } + + .hero { + grid-template-columns: 1fr; + padding: 0 8rem; + gap: 6.4rem; + } + + .hero-text-box, + .hero-img-box { + text-align: center; + } + + .hero-img { + width: 60%; + } + + .delivered-meals { + justify-content: center; + margin-top: 3.2rem; + } + + .logos img { + height: 2.4rem; + } + + .step-number { + font-size: 7.4rem; + } + + .meal-content { + padding: 2.4rem 3.2rem 3.2rem 3.2rem; + } + + .section-testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(6, 1fr); + } + + .cta { + /* 3/5 = 60% + 2/5 = 40% */ + grid-template-columns: 3fr 2fr; + } + + .cta-form { + grid-template-columns: 1fr; + } + + .btn--form { + margin-top: 1.2rem; + } + + /* MOBILE NAVIGATION */ + .btn-mobile-nav { + display: block; + } + + .main-nav { + background-color: rgba(255, 255, 255, 0.97); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + transform: translateX(100%); + + display: flex; + align-items: center; + justify-content: center; + transition: all 0.5s ease-in; + + /* Hide navigation */ + /* Allows NO transitions at all */ + /* display: none; */ + + /* 1) Hide it visually */ + opacity: 0; + + /* 2) Make it unaccessible to mouse and keyboard */ + pointer-events: none; + + /* 3) Hide it from screen readers */ + visibility: hidden; + } + + .nav-open .main-nav { + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: translateX(0); + } + + .nav-open .icon-mobile-nav[name="close-outline"] { + display: block; + } + + .nav-open .icon-mobile-nav[name="menu-outline"] { + display: none; + } + + .main-nav-list { + flex-direction: column; + gap: 4.8rem; + } + + .main-nav-link:link, + .main-nav-link:visited { + font-size: 3rem; + } +} + +/**************************/ +/* BELOW 704px (Smaller tablets) */ +/**************************/ + +@media (max-width: 44em) { + .grid--3-cols, + .grid--4-cols { + grid-template-columns: repeat(2, 1fr); + } + + .diets { + grid-column: 1 / -1; + justify-self: center; + } + + .heading-secondary { + margin-bottom: 4.8rem; + } + + .pricing-plan { + width: 100%; + } + + .grid--footer { + grid-template-columns: repeat(6, 1fr); + } + + .logo-col, + .address-col { + grid-column: span 3; + } + + .nav-col { + grid-row: 1; + grid-column: span 2; + margin-bottom: 3.2rem; + } +} + +/**************************/ +/* BELOW 544px (Phones) */ +/**************************/ + +@media (max-width: 34em) { + .grid { + row-gap: 4.8rem; + } + + .grid--2-cols, + .grid--3-cols, + .grid--4-cols { + grid-template-columns: 1fr; + } + + .btn, + .btn:link, + .btn:visited { + padding: 2.4rem 1.6rem; + } + + .section-hero { + padding: 2.4rem 0 6.4rem 0; + } + + .hero { + padding: 0 3.2rem; + } + + .hero-img { + width: 80%; + } + + .logos img { + height: 1.2rem; + } + + .step-img-box:nth-child(2) { + grid-row: 1; + } + + .step-img-box:nth-child(6) { + grid-row: 5; + } + + .step-img-box { + transform: translateY(2.4rem); + } + + .testimonials { + grid-template-columns: 1fr; + } + + .gallery { + grid-template-columns: repeat(4, 1fr); + gap: 1.2rem; + } + + .cta { + grid-template-columns: 1fr; + } + + .cta-text-box { + padding: 3.2rem; + } + + .cta-img-box { + height: 32rem; + grid-row: 1; + } +} + +/* +- Font sizes (px) +10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +- Spacing system (px) +2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 +*/ diff --git a/attempt/07-Omnifood-Desktop/css/style.css b/attempt/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..7ff3afc3a --- /dev/null +++ b/attempt/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,649 @@ +/**************************/ +/* HEADER */ +/**************************/ + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fdf2e9; + + /* Because we want header to be sticky later */ + height: 9.6rem; + padding: 0 4.8rem; + position: relative; +} + +.logo { + height: 2.2rem; +} + +/**************************/ +/* NAVIGATION */ +/**************************/ + +.main-nav-list { + list-style: none; + display: flex; + align-items: center; + gap: 3.2rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + font-weight: 500; + font-size: 1.8rem; + transition: all 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + color: #cf711f; +} + +.main-nav-link.nav-cta:link, +.main-nav-link.nav-cta:visited { + padding: 1.6rem 2.4rem; + border-radius: 9px; + color: #fff; + background-color: #e67e22; +} + +.main-nav-link.nav-cta:hover, +.main-nav-link.nav-cta:active { + background-color: #cf711f; +} + +/* MOBILE */ +.btn-mobile-nav { + border: none; + background: none; + cursor: pointer; + + display: none; +} + +.icon-mobile-nav { + height: 4.8rem; + width: 4.8rem; + color: #333; +} + +.icon-mobile-nav[name="close-outline"] { + display: none; +} + +/**************************/ +/* HERO SECTION */ +/**************************/ + +.section-hero { + background-color: #fdf2e9; + padding: 4.8rem 0 9.6rem 0; +} + +.hero { + max-width: 130rem; + margin: 0 auto; + padding: 0 3.2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 9.6rem; + align-items: center; +} + +.hero-description { + font-size: 2rem; + line-height: 1.6; + margin-bottom: 4.8rem; +} + +.hero-img { + width: 100%; +} + +.delivered-meals { + display: flex; + align-items: center; + gap: 1.6rem; + margin-top: 8rem; +} + +.delivered-imgs { + display: flex; +} + +.delivered-imgs img { + height: 4.8rem; + width: 4.8rem; + border-radius: 50%; + margin-right: -1.6rem; + border: 3px solid #fdf2e9; +} + +.delivered-imgs img:last-child { + margin: 0; +} + +.delivered-text { + font-size: 1.8rem; + font-weight: 600; +} + +.delivered-text span { + color: #cf711f; + font-weight: 700; +} + +/**************************/ +/* FEATURED IN SECTION */ +/**************************/ + +.section-featured { + padding: 4.8rem 0 3.2rem 0; +} + +.heading-featured-in { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + color: #888; +} + +.logos { + display: flex; + justify-content: space-around; +} + +.logos img { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + +/**************************/ +/* HOW IT WORKS SECTION */ +/**************************/ + +.section-how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin-bottom: 1.2rem; +} + +.step-description { + font-size: 2rem; + line-height: 1.8rem; +} + +.step-img-box { + position: relative; + + display: flex; + align-items: center; + justify-content: center; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + /* height: 60%; */ + + /* 60% of parents width */ + padding-bottom: 60%; + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background-color: #fae5d3; + z-index: -1; +} + +.step-img { + width: 35%; +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.section-meals { + padding: 9.6rem 0; +} + +.meal { + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); + border-radius: 11px; + overflow: hidden; + transition: all 0.4s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06); +} + +.meal-content { + padding: 3.2rem 4.8rem 4.8rem 4.8rem; +} + +.meal-tags { + margin-bottom: 1.2rem; + display: flex; + gap: 0.4rem; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + text-transform: uppercase; + color: #333; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegetarian { + background-color: #51cf66; +} + +.tag--vegan { + background-color: #94d82d; +} + +.tag--paleo { + background-color: #ffd43b; +} + +.meal-title { + font-size: 2.4rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + height: 2.4rem; + width: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; +} + +.all-recipes { + text-align: center; + font-size: 1.8rem; +} + +/**************************/ +/* TESTIMONIALS SECTION */ +/**************************/ + +.section-testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 4.8rem; + column-gap: 8rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-item img { + display: block; + width: 100%; + transition: all 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +/**************************/ +/* MEALS SECTION */ +/**************************/ + +.section-pricing { + padding: 9.6rem 0; +} + +.princing-plan { + border-radius: 11px; + + width: 75%; +} + +.princing-plan--starter { + justify-self: end; + border: 2px solid #fdf2e9; + padding: 4.6rem; +} + +.princing-plan--complete { + background-color: #fdf2e9; + padding: 4.8rem; + position: relative; + overflow: hidden; +} + +.princing-plan--complete::after { + content: "Best value"; + position: absolute; + top: 6%; + right: -18%; + + text-transform: uppercase; + font-size: 1.4rem; + font-weight: 700; + color: #333; + background-color: #ffd43b; + padding: 0.8rem 8rem; + transform: rotate(45deg); +} + +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} + +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} + +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} + +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} + +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} + +.plan-sing-up { + text-align: center; + margin-top: 4.8rem; +} + +.plan-details { + font-size: 1.6rem; + line-height: 1.6; + text-align: center; +} + +.feature-icon { + color: #e67e22; + height: 3.2rem; + width: 3.2rem; + background-color: #fdf2e9; + margin-bottom: 3.2rem; + padding: 1.6rem; + border-radius: 50%; +} + +.feature-title { + font-size: 2.4rem; + color: #333; + font-weight: 700; + margin-bottom: 1.6rem; +} + +.feature-text { + font-size: 1.8rem; + line-height: 1.8; +} + +/**************************/ +/* CTA SECTION */ +/**************************/ + +.section-cta { + /* top / right / bottom / left */ + /* padding: 4.8rem 0 12.8rem 0; */ + + /* top / horizontal / left */ + padding: 4.8rem 0 12.8rem; +} + +.cta { + display: grid; + grid-template-columns: 2fr 1fr; + background-color: #e67e22; + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 11px; + + background-image: linear-gradient(to right bottom, #eb984e, #e67e22); + overflow: hidden; + + height: 50rem; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: #45260a; +} + +.cta .heading-secondary { + color: #45260a; + margin-bottom: 3.2rem; +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url("../img/eating.jpg"); + background-size: cover; + background-position: center; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form input, +.cta-form select { + width: 100%; + padding: 1.2rem; + font-size: 1.8rem; + font-family: inherit; + color: inherit; + border: none; + background-color: #fdf2e9; + border-radius: 9px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: #aaa; +} + +.cta *:focus { + outline: none; + box-shadow: 0 0 0 0.8rem rgba(253, 242, 233, 0.5); +} + +/**************************/ +/* CTA SECTION */ +/**************************/ + +.footer { + padding: 12.8rem 0; + border-top: 1px solid #eee; +} + +.grid--footer { + grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr; +} + +.logo-col { + display: flex; + flex-direction: column; +} + +.footer-logo { + display: block; + margin-bottom: 3.2rem; +} + +.social-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + font-size: 1.4rem; + line-height: 1.6; + color: #767676; + margin-top: auto; +} + +.social-links { + list-style: none; + display: flex; + gap: 2.4rem; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.contacts { + font-style: normal; + font-size: 1.6rem; + line-height: 1.6; +} + +.address { + margin-bottom: 2.4rem; +} + +.footer-nav { + list-style: none; + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + font-size: 1.6rem; + color: #767676; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: #555; +} diff --git a/attempt/07-Omnifood-Desktop/img/app/app-screen-1.png b/attempt/07-Omnifood-Desktop/img/app/app-screen-1.png new file mode 100644 index 000000000..15b0a19e0 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/app/app-screen-1.png differ diff --git a/attempt/07-Omnifood-Desktop/img/app/app-screen-2.png b/attempt/07-Omnifood-Desktop/img/app/app-screen-2.png new file mode 100644 index 000000000..787da0239 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/app/app-screen-2.png differ diff --git a/attempt/07-Omnifood-Desktop/img/app/app-screen-3.png b/attempt/07-Omnifood-Desktop/img/app/app-screen-3.png new file mode 100644 index 000000000..72b57f387 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/app/app-screen-3.png differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/ben.jpg b/attempt/07-Omnifood-Desktop/img/customers/ben.jpg new file mode 100644 index 000000000..47266ea3a Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/ben.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/customer-1.jpg b/attempt/07-Omnifood-Desktop/img/customers/customer-1.jpg new file mode 100644 index 000000000..9c861c810 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/customer-1.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/customer-2.jpg b/attempt/07-Omnifood-Desktop/img/customers/customer-2.jpg new file mode 100644 index 000000000..d0754c364 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/customer-2.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/customer-3.jpg b/attempt/07-Omnifood-Desktop/img/customers/customer-3.jpg new file mode 100644 index 000000000..7830c94c6 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/customer-3.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/customer-4.jpg b/attempt/07-Omnifood-Desktop/img/customers/customer-4.jpg new file mode 100644 index 000000000..20ba92aa2 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/customer-4.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/customer-5.jpg b/attempt/07-Omnifood-Desktop/img/customers/customer-5.jpg new file mode 100644 index 000000000..db5771e36 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/customer-5.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/customer-6.jpg b/attempt/07-Omnifood-Desktop/img/customers/customer-6.jpg new file mode 100644 index 000000000..f8b85c672 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/customer-6.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/dave.jpg b/attempt/07-Omnifood-Desktop/img/customers/dave.jpg new file mode 100644 index 000000000..d6d808294 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/dave.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/hannah.jpg b/attempt/07-Omnifood-Desktop/img/customers/hannah.jpg new file mode 100644 index 000000000..ea609573a Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/hannah.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/customers/steve.jpg b/attempt/07-Omnifood-Desktop/img/customers/steve.jpg new file mode 100644 index 000000000..25dc72aff Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/customers/steve.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/eating.jpg b/attempt/07-Omnifood-Desktop/img/eating.jpg new file mode 100644 index 000000000..b5013f476 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/eating.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/favicon.png b/attempt/07-Omnifood-Desktop/img/favicon.png new file mode 100644 index 000000000..8ccd18fdd Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/favicon.png differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-1.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-1.jpg new file mode 100644 index 000000000..6c50e9ba6 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-1.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-10.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-10.jpg new file mode 100644 index 000000000..4d3328aa6 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-10.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-11.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-11.jpg new file mode 100644 index 000000000..c42a3bc4c Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-11.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-12.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-12.jpg new file mode 100644 index 000000000..c6f42b337 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-12.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-2.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-2.jpg new file mode 100644 index 000000000..e6a2e9aeb Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-2.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-3.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-3.jpg new file mode 100644 index 000000000..0da8bec74 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-3.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-4.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-4.jpg new file mode 100644 index 000000000..a2e9ac42d Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-4.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-5.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-5.jpg new file mode 100644 index 000000000..99d7e8c97 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-5.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-6.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-6.jpg new file mode 100644 index 000000000..0806cee78 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-6.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-7.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-7.jpg new file mode 100644 index 000000000..bba5502df Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-7.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-8.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-8.jpg new file mode 100644 index 000000000..7653df7cf Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-8.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/gallery/gallery-9.jpg b/attempt/07-Omnifood-Desktop/img/gallery/gallery-9.jpg new file mode 100644 index 000000000..96a380d41 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/gallery/gallery-9.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/hero.png b/attempt/07-Omnifood-Desktop/img/hero.png new file mode 100644 index 000000000..7bd8ca857 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/hero.png differ diff --git a/attempt/07-Omnifood-Desktop/img/logos/business-insider.png b/attempt/07-Omnifood-Desktop/img/logos/business-insider.png new file mode 100644 index 000000000..d8974ff23 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/logos/business-insider.png differ diff --git a/attempt/07-Omnifood-Desktop/img/logos/forbes.png b/attempt/07-Omnifood-Desktop/img/logos/forbes.png new file mode 100644 index 000000000..9d7dbfa18 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/logos/forbes.png differ diff --git a/attempt/07-Omnifood-Desktop/img/logos/techcrunch.png b/attempt/07-Omnifood-Desktop/img/logos/techcrunch.png new file mode 100644 index 000000000..a9149aa4f Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/logos/techcrunch.png differ diff --git a/attempt/07-Omnifood-Desktop/img/logos/the-new-york-times.png b/attempt/07-Omnifood-Desktop/img/logos/the-new-york-times.png new file mode 100644 index 000000000..d4a650367 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/logos/the-new-york-times.png differ diff --git a/attempt/07-Omnifood-Desktop/img/logos/usa-today.png b/attempt/07-Omnifood-Desktop/img/logos/usa-today.png new file mode 100644 index 000000000..935434ac3 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/logos/usa-today.png differ diff --git a/attempt/07-Omnifood-Desktop/img/meals/meal-1.jpg b/attempt/07-Omnifood-Desktop/img/meals/meal-1.jpg new file mode 100644 index 000000000..579345898 Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/meals/meal-1.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/meals/meal-2.jpg b/attempt/07-Omnifood-Desktop/img/meals/meal-2.jpg new file mode 100644 index 000000000..0a9f5621f Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/meals/meal-2.jpg differ diff --git a/attempt/07-Omnifood-Desktop/img/omnifood-logo.png b/attempt/07-Omnifood-Desktop/img/omnifood-logo.png new file mode 100644 index 000000000..2232b2efa Binary files /dev/null and b/attempt/07-Omnifood-Desktop/img/omnifood-logo.png differ diff --git a/attempt/07-Omnifood-Desktop/index.html b/attempt/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..6d69f1bab --- /dev/null +++ b/attempt/07-Omnifood-Desktop/index.html @@ -0,0 +1,700 @@ + + + + + + + + + + + + + + + + + + + + Omnifood + + +
+ + + + + + + +
+ +
+
+
+
+

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

+

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

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

+ 250,000+ meals delivered last year! +

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

As featured in

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

+ Your daily dose of health in 3 simple steps +

+
+ +
+ +
+

01

+

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

+

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

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

02

+

Approve your weekly meal plan

+

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

+
+ + +
+

03

+

Receive meals at convenient time

+

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

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

+ Omnifood AI chooses from 5,000+ recipes +

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

Japanese Gyozas

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

Avocado Salad

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

Works with any diet:

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

Once you try it, you can't go back

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

— Dave Bryson

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

— Ben Hadley

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

— Steve Miller

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

— Hannah Smith

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

+ Eating well without breaking the bank +

+
+ +
+
+
+

Starter

+

$399

+

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

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

Complete

+

$649

+

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

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

Never cook again!

+

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

+
+
+ +

Local and organic

+

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

+
+
+ +

No waste

+

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

+
+
+ +

Pause anytime

+

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

+
+
+
+ +
+
+
+
+

Get your first meal for free!

+

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

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + + + +
+
+ +
+
+
+
+ + + +