This project is an interactive recipe card web application that allows users to view cooking details such as ingredients, preparation steps, and recipe information in a clean and engaging UI. The application focuses on improving user experience by presenting recipe content in a structured, visually appealing, and interactive format using HTML, CSS, and JavaScript. It demonstrates how static recipe content can be enhanced with interactivity, animations, and responsive design for better usability.

• ✅ Clean, boxed layout with title, image, ingredients, steps, prep time, servings.
• ✅ CSS hover effects and animated transitions (ingredients shimmer, collapsible sections, floating image).
• ✅ Animated progress bar that advances as steps are completed.
• ✅ JavaScript to toggle visibility of Ingredients/Steps.
• ✅ "Start Cooking" + "Next" flow highlights current step.
• ✅ Responsive via media queries (stacks on mobile, readable typography).
• ✅ Bonus: Countdown timer + Print-friendly stylesheet/button.

• Interactive recipe card layout with clean UI
• Display of recipe title, image, and details
• Ingredients list with structured formatting
• Step-by-step cooking instructions
• Toggle/show-hide functionality for sections
• Display of preparation time and serving size
• Smooth UI with CSS styling and basic animations
• Responsive design for different screen sizes
• Simple and user-friendly interface

• index.html – structure
• styles.css – styling, animations, responsive + print CSS
• script.js – interactivity (toggle sections, progress, cooking flow, timer)
• assets/dish.svg – local image (no external dependency)

https://tanish-sd26.github.io/Interactive_Recipe_Card/