Spotify Clone 🎵

A responsive web-based clone of the Spotify music streaming platform, built with vanilla HTML, CSS, and JavaScript. This project recreates the visual design and layout of Spotify's web interface.

• Responsive Design: Adapts to different screen sizes and devices
• Dark Theme: Authentic Spotify-like dark mode interface
• Interactive Elements: Hover effects and button animations
• Sidebar Navigation: Library section with playlist creation
• Modern UI: Clean and modern interface matching Spotify's design language

• HTML5: Semantic markup and structure
• CSS3: Styling, animations, and responsive design
• JavaScript: Interactive functionality (script.js)
• SVG Icons: Scalable vector graphics for logos and icons

spotify-clone/
├── index.html          # Main HTML file
├── style.css           # Main stylesheet
├── utility.css         # Utility classes for layout and styling
├── script.js           # JavaScript functionality
├── logo.svg            # Spotify logo
├── library.svg         # Library/add icon
├── home.svg            # Home icon
└── README.md           # Project documentation

• Left Sidebar: Contains user library and playlist creation section
• Header: Spotify logo and branding
• Dark Color Scheme: Black (#000000) and dark grey (#121212) backgrounds
• Interactive Buttons: Hover effects with smooth transitions
• Responsive Layout: Flexbox-based layout system

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Basic understanding of HTML, CSS, and JavaScript

1. Clone the repository

   git clone https://github.com/yourusername/spotify-clone.git

2. Navigate to the project directory

   cd spotify-clone

3. Open the project

   • Simply open index.html in your web browser
   • Or use a local server like Live Server in VS Code

• Option 1: Double-click on index.html to open in your default browser
• Option 2: Use VS Code Live Server extension for hot reloading
• Option 3: Use Python's built-in server:

  python -m http.server 8000

  Then visit http://localhost:8000

• Semantic HTML5 elements
• Proper accessibility attributes
• Clean and organized markup

• Flexbox Layout: Modern CSS layout system
• Custom Properties: CSS variables for consistent theming
• Responsive Design: Mobile-first approach
• Animations: Smooth hover effects and transitions

• Utility Classes: Reusable CSS classes in utility.css
• Component Styles: Specific component styling in style.css
• Dark Theme: Consistent dark color scheme throughout

The project uses a dark theme with these primary colors:

• Background: #000000 (Black)
• Secondary Background: #121212 (Dark Grey)
• Accent: #1db954 (Spotify Green)
• Text: #ffffff (White)
• Muted Text: #a7a7a7 (Light Grey)

1. New Components: Add HTML structure in index.html
2. Styling: Add styles in style.css or create utility classes
3. Functionality: Implement JavaScript features in script.js

The application is responsive and works on:

• Desktop: Full-width layout with sidebar
• Tablet: Adapted layout for medium screens
• Mobile: Mobile-optimized interface

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add some amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

• Music player functionality
• Search functionality
• User authentication
• Playlist management
• Audio streaming integration
• Mobile app version

• Spotify: For the original design inspiration
• Icons: SVG icons used in the interface
• Community: Thanks to all contributors and supporters

• GitHub: Mohit242-bit
• Email: mohit25rawat@gmail.com

⭐ Star this repository if you found it helpful! ⭐

This project is for educational purposes and is not affiliated with Spotify.