https://github.com/kgelli/web-programming-p1
https://github.com/kgelli/web-programming-p1
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kgelli/web-programming-p1
- Owner: kgelli
- Created: 2024-10-15T22:41:54.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-01-27T05:32:17.000Z (5 months ago)
- Last Synced: 2025-01-27T06:27:40.301Z (5 months ago)
- Language: HTML
- Size: 40.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Summary:
Our project, "Essence of India: Interactive Biryani and Side Dish Explorer", is a web-based interactive recipe website focusing on Indian cuisine, particularly Biryani and its accompanying side dishes. The website will utilize HTML and CSS to create an engaging user experience with interactive elements such as transformations, transitions, and animations. The project aims to make authentic Biryani recipes accessible to a global audience, catering to both experienced and beginner cooks.
## Key Features:
- Interactive recipe pages with popup ingredients and directions
- Flip card display for ingredient usage amounts on hover
- Estimated preparation time for each dish
- Interesting facts about the recipes
- Use of transforms, transitions, and animations for enhanced interactivity
## Proposed Wireframe:
The proposed wireframe for the project is as follows:
https://www.figma.com/proto/qznitOZUmrIaAUKQdFjmda/WP-Project1?node-id=1-5&t=YrvRyvm0i6IJ4j7U-1
## Homepage details (intro):
The homepage will feature a grid layout of dish images, each linking to its respective recipe page. It will include an introductory section about Biryani cuisine and the website's purpose.
- A central grid of clickable items, each representing a dish or element of the meal:
- Biryani
- Mirchi ka salan
- Paneer Curry
- Raita
- An animated text element displaying "EXPERIENCE THE MAGIC OF BIRYANI!"
- A message section explaining the purpose of the website
- A helper message instructing users to click on the dishes to view recipes
## Layouts:
The project will have the following unique screens:
- Homepage (Main Page): Displays an overview of dishes in a grid layout, serving as a hub for navigating to individual recipe pages.
- Biryani Recipe Page: A detailed page with ingredients, cooking steps, and facts about Biryani.
- Paneer Curry Recipe Page: A dedicated recipe page for Paneer Curry with interactive elements.
- Mirchi ka Salan Recipe Page: A page showcasing the recipe for Mirchi ka Salan, featuring interactive ingredient sections.
- Raita Recipe Page: A page detailing how to prepare Raita, with engaging animations and transitions.
## Recipe Page Details:
Each recipe page will contain:
- A header with the dish name
- An interactive ingredient section with flip cards
- Step-by-step cooking instructions and Estimated cooking time
- Cultural context and interesting facts about the dish