hero section

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: [email protected]
+
+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

css/style.css

@@ -0,0 +1,172 @@
+/* 
+
+--- 01 TYPOGRAPHY SYSTEM
+
+- FONT SIZE SYSTEM(px)
+10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+
+- Font weights:
+Default: 400
+
+- Line heights: 
+Default : 1
+
+
+--- 02 COLORS
+- Primary: #e67e22
+- Tints: #fdf2e9
+- Shades: #cf711f
+- Accents: 
+- Greys: 
+#555
+#333
+
+--- 05 SHADOWS
+
+--- 06 BORDER-RADIUS
+
+--- 07 WHITESPACE
+- SPACIN SYSTEM (px)
+2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+
+
+UNSPLASH - Imagens
+UI FACES - Rostos de pessoas
+
+*/
+
+:root {
+    --primary-color: #e67e22;
+    --lighter-orange-background: #fdf2e9;
+    --darker-orange-background: #cf711f;
+    --white: #fff;
+    --medium-grey: #333;
+    --grey: #555;
+}
+
+* {
+    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 settings */
+    font-size: 62.5%;
+}
+
+body {
+    font-family: 'Rubik', sans-serif;
+    line-height: 1;
+    font-weight: 400;
+    color: var(--grey);
+}
+
+.section-hero {
+    background-color: var(--lighter-orange-background);
+    padding: 9.6rem 0;
+}
+
+.hero {
+    max-width: 130rem;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 9.6rem;
+    align-items: center;
+}
+
+.heading-primary {
+    font-size: 5.2rem;
+    font-weight: 700;
+    line-height: 1.05;
+    color: var(--medium-grey);
+    letter-spacing: -0.5px;
+    margin-bottom: 3.2rem;
+}
+
+.hero-description {
+    font-size: 2rem;
+    line-height: 1.6;
+    margin-bottom: 4.8rem;
+}
+
+.btn:link, 
+.btn:visited {
+    display: inline-block;
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--white);
+    text-decoration: none;
+    font-size: 2rem;
+    padding: 1.6rem 3.2rem;
+    border-radius: 9px;
+    transition: background-color 0.3s ease-in;
+}
+
+.btn--full:link, 
+.btn--full:visited {
+    background-color: var(--primary-color);
+}
+
+.btn--full:hover,
+.btn--full:active {
+    background-color: var(--darker-orange-background);
+}
+
+.btn--outline:link,
+.btn--outline:visited {
+    background-color: var(--white);
+    color: var(--grey);
+}
+
+.btn--outline:hover,
+.btn--outline:active {
+    background-color: var(--lighter-orange-background);
+    /* border: solid 3px var(--white); */
+    box-shadow: inset 0 0 0 3px var(--white);
+}
+
+.hero-img {
+    width: 100%;
+}
+
+.margin-right-sm {
+    margin-right: 1.6em !important;
+}
+
+.delivered-meals {
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    margin-top: 8.0rem;
+}
+
+.delivered-imgs {
+    display: flex;
+}
+
+.delivered-imgs img{
+    height: 4.8rem;
+    width: 4.8rem;
+    border-radius: 50%;
+    margin-right: -1.6rem;
+    border: 3px solid var(--lighter-orange-background);
+}
+
+.delivered-imgs img:last-child {
+    margin-right: 0;
+}
+
+
+.delivered-text {
+    font-size: 1.8rem;
+    font-weight: 600;
+}
+
+.delivered-text span{
+    color: var(--darker-orange-background);
+    font-weight: 700;
+}

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="./css/style.css">
+
+    <title>Omnifood</title>
+</head>
+<body>
+    <section class="section-hero">
+        <div class="hero">
+            <div class="hero-text-box">
+                <h1 class="heading-primary">A healthy meal delivered to your door, every single day</h1>
+                <p class="hero-description">The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs.</p>
+                <a href="#" class="btn btn--full margin-right-sm">Start eating well</a>
+                <a href="#" class="btn btn--outline">Lean more &darr;</a>
+
+            <div class="delivered-meals">
+                <div class="delivered-imgs">
+                    <img src="img/customers/customer-1.jpg" alt="Costumer photo" />
+                    <img src="img/customers/customer-2.jpg" alt="Costumer photo" />
+                    <img src="img/customers/customer-3.jpg" alt="Costumer photo" />
+                    <img src="img/customers/customer-4.jpg" alt="Costumer photo" />
+                    <img src="img/customers/customer-5.jpg" alt="Costumer photo" />
+                    <img src="img/customers/customer-6.jpg" alt="Costumer photo" />
+                </div>
+                <p class="delivered-text"><span>250,000+</span> meals delivered last year!</p>
+            </div>
+            </div>
+            <div class="hero-image-box">
+                <img src="./img/hero.png" class="hero-img" alt="Woman enjoying food, meals in storage container, and food bowls on a table">
+            </div>
+        </div>  
+    </section>
+</body>
+</html>