NutriNow is a simple grocery store landing page. Built with Bootstrap 5 grid system,swiper and core html, css and js technologies. A complete guide about how to build this project from scratch is covered in this Youtube video
The website provides users with a simple and intuitive interface, NutriNow's user interface is simple and easy to navigate, with a clean and modern design and subtle animations that prioritizes usability and accessibility. The website is fully responsive and optimized for use on desktop and mobile devices.
- Download Entire code
- locate and open the folder named "final"
- Open the index.html file
Feel free to edit and use as you like,Free use of this software does NOT apply if you plan to produce your own course or tutorials based on this project. A credit to the original authors Israel Akinwumi and Xerax labs will be appreciated.
Need help making this project work, want to collaborate on future project or hire me? you can reach out via
- HTML
- CSS [ Styling ]
- Bootstrap icons [ Icons ]
- Swiper JS
Swiper break points
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 30,
},
1024: {
slidesPerView: 4,
spaceBetween: 20,
},
}Default variables used
/* Common page resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Common page resets */
/* variable declarations */
:root {
--white-color: #fff;
--support-color: #fb175f;
--box-shadow: rgb(0 0 0 / 16%) 0px 2px 8px;
--green-gradient: linear-gradient(
to right,
rgba(0, 128, 0, 0.7),
rgba(0, 128, 0, 0.5)
);
}
/* variable declarations */We do not claim to be the original authors of the images used in this project, all image credits belong to their respective owners. credits Unsplash
Nutrisnow is licensed under the MIT license.