🎬 Interactive Web Experience

This project is a mini interactive website that combines the power of CSS3 animations and JavaScript functions to create a visually dynamic and engaging experience.

---

✨ Features

1. CSS3 Animations & Transitions

• Animated gradient background (@keyframes gradientShift).
• Smooth hover effects on buttons.
• Card flip animations using CSS3 transforms.
• Page load fade-in animations for a lively entrance.

2. JavaScript Functions

• Functions with parameters and return values.
• Demonstration of local vs global scope.
• Reusable logic to control animations and DOM changes.
• Function-driven card flip and modal toggle interactions.

3. Combined CSS + JS Magic

• Theme Switcher: Toggle between Light and Dark mode with smooth transitions.
• Card Flip Animation: Cards flip on click, revealing hidden content.
• Modal Popup: Opens and closes with fade/slide animations.
• WOW Effect: A modern, responsive, and visually engaging interface.

---

📂 Project Structure

interactive_web_experience/
│── index.html   # Main HTML structure
│── styles.css   # All styling, transitions, and keyframes
│── script.js    # JavaScript logic for interactivity
│── README.md    # Project documentation

---

🚀 How to Run

1. Download or clone this repository.
2. Open index.html in your browser.
3. Enjoy the interactive experience 🎉

---

🎨 Customization

• Update colors and gradients in styles.css.
• Add new cards or elements to index.html.
• Extend functionality in script.js.

---

📚 Learning Goals

This project was built as part of an assignment to demonstrate: - Mastery of CSS animations and transitions. - Understanding of JavaScript functions, scope, and reusability. - Ability to combine CSS and JS to create interactive, dynamic web experiences.

---

💡 Feel free to expand this project by adding more animations, interactive components, or even integrating libraries like GSAP for advanced effects.