ReImagine Swiggy Webpage Redesign

Overview

Welcome to the redesigned UI of Swiggy's webpage, a project submitted for the ReImagine competition organized by The Sheryians Coding School. This repository contains the frontend code for a modern, responsive, and interactive Swiggy website.

About ReImagine Competition

ReImagine is a web design contest that invites participants to give a modern makeover to websites of well-known Indian and international brands. This competition emphasizes creating bold, fresh designs and learning through real-world examples. Participants are encouraged to choose any two of their favorite brands and redesign their websites with stunning details, animations, and micro-interactions.

Project Details

Objective

To redesign the UI of Swiggy's webpage, making it more engaging, user-friendly, and visually appealing while maintaining brand identity. This project focuses solely on the frontend part of the Swiggy website.

Features

• Loader Animation: An engaging preloader animation with floating particles and a progress bar.
• Responsive Design: Ensures the website is accessible and looks great on all devices.
• Interactive Elements: Includes a cursor follower, animated buttons, and hover effects.
• Modern Aesthetics: Uses gradients, bold typography, and high-quality images for a visually appealing design.
• Swiper Integration: A carousel showcasing Swiggy's top picks.

File Structure

├── index.html            # Main HTML file
├── style.css             # Main CSS file for general styling
├── menuStyle.css         # CSS file for menu-specific styles
├── responsive.css        # CSS file for responsive design
├── menuScript.js         # JavaScript file for menu interactions
├── script.js             # JavaScript file for general interactions
├── Assets/
│   ├── Images/           # Directory for image assets
│   ├── Videos/           # Directory for video assets

Technologies Used

• HTML5
• CSS3
• JavaScript
• GSAP (GreenSock Animation Platform)
• ScrollTrigger
• Swiper.js

How to Run

1. Clone the repository:

   git clone https://github.com/your-username/reimagine-swiggy.git

2. Navigate to the project directory:

   cd reimagine-swiggy

3. Open index.html in your web browser.

Acknowledgments

This project was developed as part of the ReImagine competition by The Sheryians Coding School. The aim was to reimagine the Swiggy website with a focus on modern UI/UX design principles, animations, and responsiveness.

Contact

For any inquiries or feedback, please contact adityasinghfc7@gmail.com

Enjoy exploring the new Swiggy experience!