This website is dedicated to showcasing the virtual presence of a fictitious restaurant named "FoodKart." The platform encompasses two dynamic pages: the engaging landing page and the interactive shop page. Designed with a commitment to accessibility and user experience, this project is crafted to be fully responsive, seamlessly adapting to and optimizing the display on all screen sizes. Whether accessed on a desktop, tablet, or mobile device, users can enjoy a consistent and visually appealing experience, ensuring that "FoodKart" remains accessible and user-friendly across various devices.
check it out here
A screenshot of FoodKart's Homepage
A screenshot of the FoodKart's shop Page
A screenshot of the FoodKart on mobile
The primary objective of undertaking this project was to assess my proficiency and comprehension of CSS. I aimed to apply the knowledge gained from previous projects, pushing the boundaries to bring forth a sophisticated design that seamlessly adapts to various devices.
-
CSS Grid Integration: Throughout the project, I extensively utilized the CSS grid system. This involved crafting responsive grids, complemented by strategically placed media queries, ensuring a design that seamlessly translates across a diverse range of devices. Notably, I employed the grid to establish a three-column layout for the presentation of food items.
-
Harnessing the Webkit Prefix: To guarantee cross-browser compatibility, I employed my expertise in utilizing the webkit prefix. This was particularly evident in the creation of custom scroll bars for the project.
-
Incorporating Backdrop-filter and Filter Properties: Employing a combination of the backdrop filter and filter properties, I achieved the effect of a glowing card when hovered upon. This added a visually appealing dimension to the user interface.
-
Utilizing Overflow and Hover Pseudo-Class: By skillfully combining the overflow property with the hover pseudo-class, I successfully created an image carousel that becomes scrollable upon user interaction.
-
Leveraging CSS Animation: The implementation of CSS animation played a crucial role in crafting an eye-catching advertisement banner situated at the top of the webpage.
The following tools and resources where utilized in building this project.
- HTML5
- CSS3
- Images from pexels.com 🔗
- Color pallet from coolors.co 🔗
- Icons from icons8.con 🔗
- Resources from freecodecamp.org 🔗
Hi I'm Benedict, I'm learning to become a frontend developer. check out my blog where I'll be sharing my learning experiences, projects, and tips.
- Checkout it here 🔗
You can also connect with me on twitter