🚗 EliteDrive - Premium Second-Hand Car Showcase

A modern, responsive website for showcasing premium second-hand cars with an elegant glassmorphism design, interactive features, and smooth animations.

🌟 Live Demo

Experience the live website with stunning animations and interactive features!

📸 Screenshots

Desktop View

• Modern hero section with gradient background
• Interactive car gallery with filters
• Smooth animations and transitions

Mobile View

• Responsive hamburger menu
• Touch-friendly interface
• Optimized for all screen sizes

🛠️ Technologies Used

Technology	Description	Badge
	HTML5	Semantic markup and structure
	CSS3	Modern styling with glassmorphism effects
	JavaScript	Dynamic functionality and interactions
	Font Awesome 6.0	Beautiful icons for UI elements

✨ Features

🎨 Modern UI Design

• Glassmorphism Effects - Frosted glass-like appearance with backdrop blur
• Smooth Gradients - Eye-catching color transitions
• Floating Particles - Animated background elements
• Responsive Layout - Mobile-first design approach

🌓 Dark/Light Mode

• Toggle between themes with Font Awesome icons
• Persistent across all sections
• Smooth transition effects
• Color-coded icons (moon for light mode, sun for dark mode)

📱 Responsive Navigation

• Desktop: Horizontal navigation bar with all links visible
• Mobile: Hamburger menu with slide-out navigation
• Sticky navbar with blur effect on scroll
• Smooth scrolling to page sections

🚙 Car Gallery

• Filter System - Sort by brand (All, Toyota, Honda, BMW, Mercedes)
• Hover Effects - Cards lift and scale on hover
• Modal Popups - Detailed car information in elegant overlays
• Loading Animations - Staggered card appearance

📧 Contact Form

• Beautiful glassmorphism design
• Form validation
• Smooth submission animation
• Responsive layout

🎭 Animations

• Slide-up entrance animations
• Floating elements
• Hover transformations
• Modal slide-in effects
• Intersection observer for scroll-triggered animations

📁 Project Structure

EliteDrive/
│
├── index.html          # Main HTML file with embedded CSS and JS
│
└── README.md          # Project documentation

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• No additional dependencies required!

Installation

1. Clone the repository

git clone https://github.com/akashasahu07/EliteDrive.git

2. Navigate to project directory

cd EliteDrive

3. Open in browser

# Simply open index.html in your browser
# Or use a local server:
python -m http.server 8000
# Or
npx serve

4. View the website

Open http://localhost:8000 in your browser

💻 Usage

Customizing Car Data

Edit the cars array in the JavaScript section to add/modify vehicles:

const cars = [
    {
        id: 1,
        brand: 'toyota',
        name: 'Toyota Camry 2020',
        year: 2020,
        price: 28500,
        image: 'your-image-url.jpg',
        mileage: '35,000 miles',
        description: 'Your description here'
    }
    // Add more cars...
];

Customizing Colors

Modify CSS variables in the :root section:

:root {
    --primary-color: #6366f1;
    --secondary-color: #0c0127;
    --accent-color: #06b6d4;
    /* Add more custom colors */
}

Adding New Filters

Add new filter buttons and update the filter logic:

<button class="filter-btn" data-filter="ford">Ford</button>

🎯 Key Features Breakdown

Glassmorphism Design

• backdrop-filter: blur(16px) for frosted glass effect
• Semi-transparent backgrounds
• Subtle borders and shadows
• Works in both light and dark modes

Responsive Design

• CSS Grid for car gallery
• Flexbox for navigation and layouts
• Media queries for mobile optimization
• Mobile-first approach

Performance Optimization

• Lightweight (single HTML file)
• Optimized images from CDN
• Smooth CSS animations
• Efficient JavaScript

🌐 Browser Support

Browser	Version
Chrome	Latest ✅
Firefox	Latest ✅
Safari	Latest ✅
Edge	Latest ✅
Opera	Latest ✅

Note: Backdrop filter may have limited support in older browsers

📱 Responsive Breakpoints

• Desktop: > 768px - Full navigation, multi-column grid
• Mobile: ≤ 768px - Hamburger menu, single column layout

🎨 Color Palette

Light Mode

• Primary: #6366f1 (Indigo)
• Secondary: #0c0127 (Deep Purple)
• Accent: #06b6d4 (Cyan)
• Background: #ffffff (White)

Dark Mode

• Background: #111827 (Dark Gray)
• Text: #f9fafb (Light Gray)

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Your Name

• GitHub: @akashasahu07
• LinkedIn: Akasha Sahu
• Email: akashasahu2001@gmail.com

🙏 Acknowledgments

• Font Awesome for icons
• Pixabay for car images
• Inspiration from modern web design trends
• Glassmorphism design principles

📊 Project Stats

🔮 Future Enhancements

• Add user authentication
• Implement car comparison feature
• Add search functionality
• Integrate with backend API
• Add favorites/wishlist feature
• Implement pagination for car gallery
• Add car details page with more images
• Integrate payment gateway
• Add testimonials section
• Implement live chat support

📞 Support

If you have any questions or need help, feel free to:

• Open an issue on GitHub
• Contact via email
• Join our community discussions

---

Made with ❤️ for car enthusiasts

⭐ Star this repo if you like it!