https://github.com/sauloroman/omnifood-landingpage

This is a landing page about a start-up which offers food plans.
https://github.com/sauloroman/omnifood-landingpage

css desktop-first flexbox-css grid-layout html javascript media-queries responsive-design

Last synced: 3 days ago
JSON representation

This is a landing page about a start-up which offers food plans.

• Host: GitHub
• URL: https://github.com/sauloroman/omnifood-landingpage
• Owner: sauloroman
• Created: 2022-07-18T18:58:57.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-01T18:56:36.000Z (about 2 years ago)
• Last Synced: 2024-12-03T02:11:45.001Z (2 months ago)
• Topics: css, desktop-first, flexbox-css, grid-layout, html, javascript, media-queries, responsive-design
• Language: HTML
• Homepage: https://omnifood-srsn.netlify.app/
• Size: 4.89 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Omnifood — LandingPage 🍝









Omnifood is a web page to buy some plans to eat better. It was developed to apply and improve my frontend skills into a real project. It has seven sections where you can find information about this start-up, and it's completely responsive.







Technologies used: 

  * HTML5

  * CSS3 ( Flexbox and CSS Grid )

  * JavaScript







You can check its functionality in: 

```

https://omnifood-srsn.netlify.app/

```




On the other hand, Javascript was used to add some animation at some sections of the site, to integrate a mobile menu, to make smooth scroll and to apply some css properties in old browsers. So, you don't need a deep expertice of Javascript to understand the code.







## UI Considerations

Colors used: 

  * Main color: #E67E22

  * Grays:   

    * Gray 1: #888

    * Gray 2: #767676

    * Gray 3: #6f6f6f

    * Gray 4: #555

    * Gray 5: #333

Breaking Points: 

It's important to mention that this project was developed based on "desktop first" methodology.

  * Phones: 550px 

  * Small tablets: 704px

  * Tablets: 940px

  * Landscape Tablets: 1200px

  * Laptops and Desktop: 1344px