Nutrifood is a food delivery service that offers meal subscriptions for busy people with a wide range of healthy and nutritious meals that are tailored by expert chefs to suit different dietary needs and lifestyles, and are delivered throughout Stockholm.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Navigate the page via a navigation menu
- See hover and focus states for interactive elements
- Repository URL: https://github.com/jeanpierretouma/nutrifood
- Live Site URL: https://jeanpierretouma.github.io/nutrifood
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- jQuery
I learned how to make a sticky navigation bar and a mobile navigation bar with vanilla JavaScript by using JavaScript to toggle on and off classes in CSS to apply the stylings once the conditions are met.
This project is complete in terms of functionality and looks but it needs some animation effects which will be implemented later.
Another feature that I'll implement in this project is JS form validation to increase the security and interaction of the contact form of the landing page.
- Sticky Navigation Bar On Scroll Using Vanilla Javascript | Fixed Navbar on Scroll - This video helped me with building a sticky navigation bar by using a few lines of vanilla JavaScript.
- How TO - Smooth Scroll - This article provides a cross-browser solution for smooth scrolling by using jQuery.
- Website - Jean-Pierre Touma
Nutrifood website is inspired by Omnifood which is a restaurant website made to be the product of the Build Responsive Real-World Websites with HTML and CSS created by Jonas Schmedtmann.