Omnifood-Project

Description:

• Omnifood is a food delivery website that provides monthly plan for a meal comprising of different diets such as Vegan, Gluten-free, Lactose-free, Vegeterian, Keto and many more.
• Users can select among different meal plans and the meals will be delivered to them as per their requirement.
• The Omnifood App makes use of A.I. to provide the best meal to the users as per their diet.
• We have two options for delivery:

> One meal a day.
> Two meals a day.

• We have partnered with the top restaurants of the city to prepare and deliver the meals the user decide.

Project Overwiew:

• Designing and Building a landing page for Omnifood website using only HTML, CSS and very little to no Javascript.
• Making use of only pure HTML and CSS.
• No CSS Framework.
• Designing the layout using designing tools such as Figma.
• Deplyoing using Netlify.

Designing the Website:

• The company focuses on consumer well being by providing a healthy diet. So, the overall personality of the website need to be more consumer focused and easy to navigate.
• Different design elements for the website:

Selecting the different design elements and sketching a basic layout.

1. Design Inspiration: Source: Land Book , One Page Love and many more..

2. Typography: Selected 3 different fonts based on Sans-Serif typefaces.

Source:Google Fonts

• Rubik -> Family: sans-serif , Font-weight used : 400,500,600,700.

• Inter -> Family: sans-serif , Font-weight used : 400,500,600,700.

• Noto Sans -> Family: sans-serif , Font-weight used : 400,500,600,700.

3. Colors: Source : OpenColors , Coolors

• Main color: #e67e22

• Greys :

     - For long texts : #555555
     - For headings : #333333
     - #767676 :- Lightest grey on #ffffff
     - #808080
     - #6f6f6f
  

• Tints and Shades: Source: Tints and Shades generator

• Tints : #fdf2e9 , #fae5d3 , #45260a

• Shades: #cf711f

• Accents:

      - Paleo tag: `#ffd43b`
      - Vegan tag: `#94d82d`
      - Vegeterian tag: `#51cf66`
  

4. Images: Source: Unsplash , Pexels

Defining the different sections of the webpage.

• Logo + Navigation
• Hero Section
• Featured In
• How it works
• Meals(and list of Diets)
• Pictures + Testimonials
• Pricing + Features
• Call-to-action
• Footer

Setting the development environment

• To make the website responsive from start I used relative units for lengths such as rem, percentage instead of px

• Set the font-size of the root element of the page to 62.5% to make it easier for calculation(Default font size of browser is 16px so, 62.5% will convert it into 10px and thus 1 rem = 10px).

• Font size and spacing system defined:

Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
Letter spacing(px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

• Code Editor: VS Code