Precise landing page recreations of famous websites
🌐 View Projects • 📝 Report Bug • ✨ Request Feature
Live Demos: Disney Plus • Spotify
This repository contains frontend clones of popular streaming platforms, built as practice projects to improve HTML/CSS skills and demonstrate proficiency in replicating complex user interfaces.
A recreation of Disney+'s landing page featuring:
- Hero section with background video
- Subscription plans showcase
- Content categories
- Device compatibility section
- Footer with links
A recreation of Spotify's premium landing page featuring:
- Premium subscription banner
- Feature highlights
- Multiple pricing plans
- Free trial promotion
- Footer navigation
- ✅ Precise Design - Accurate recreation of original layouts
- 🎨 Responsive Layout - Works on all screen sizes
- 📱 Mobile-First Approach - Optimized for mobile devices
- 🖼️ High-Quality Images - Professional-grade visuals
- ⚡ Fast Loading - Optimized performance
- 🔧 Clean Code - Well-structured and commented HTML/CSS
- 🎯 Best Practices - Semantic HTML and modern CSS
- HTML5 - Semantic markup structure
- CSS3 - Advanced styling and layouts
- Flexbox
- CSS Grid
- Media Queries
- Animations
- Responsive Design - Mobile-first methodology
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No additional installations required!
-
Clone the repository
git clone https://github.com/adrian1715/frontend-website-clones.git cd frontend-website-clones -
Open the clones
Navigate to the desired clone folder and open
index.html:Disney+ Clone:
cd "Disney-Plus" open index.html # macOS # or start index.html # Windows
Spotify Clone:
cd Spotify open index.html # macOS # or start index.html # Windows
-
Or use a local server (recommended)
# Using Python 3 python -m http.server 8000 # Using Node.js http-server npx http-server
Then navigate to:
- Disney+:
http://localhost:8000/Disney-Plus/ - Spotify:
http://localhost:8000/Spotify/
- Disney+:
frontend-website-clones/
├── Disney-Plus/
│ ├── index.html # Disney+ main page
│ └── style.css # Disney+ styles
│
├── Spotify/
│ ├── index.html # Spotify main page
│ └── style.css # Spotify styles
│
├── images/ # Shared images folder
│ ├── disney-1.jpg
│ ├── disney-logo_1.jpg
│ ├── 2.png - 9.png # Spotify images
│ ├── facebook png.png
│ ├── twitter png.png
│ └── insta.png
│
└── README.md # Documentation (English)
└── README-ptbr.md # Documentation (Portuguese)
Features Implemented:
- ✅ Full-width hero section with video background
- ✅ Navigation bar with logo
- ✅ Subscription plans grid
- ✅ Content showcase sections
- ✅ Device compatibility display
- ✅ Footer with social links
- ✅ Responsive design for all devices
Tech Highlights:
- CSS Grid for layout
- Flexbox for components
- Media queries for responsiveness
- Custom fonts and icons
Features Implemented:
- ✅ Premium subscription banner
- ✅ Feature highlights section
- ✅ Pricing plans comparison
- ✅ Free trial promotion
- ✅ Footer with navigation
- ✅ Social media links
- ✅ Fully responsive layout
Tech Highlights:
- Flexbox-based layout
- Gradient backgrounds
- Hover effects and transitions
- Mobile-optimized navigation
Both clones are fully responsive and tested on:
- 📱 Mobile: 320px - 767px
- 📱 Tablet: 768px - 1024px
- 💻 Desktop: 1025px+
- ✅ iPhone (various models)
- ✅ iPad
- ✅ Android phones
- ✅ Desktop browsers
Building these clones helped me improve my skills in:
- ✅ Advanced CSS Layouts: Grid, Flexbox, positioning
- ✅ Responsive Design: Mobile-first approach, media queries
- ✅ CSS Best Practices: BEM methodology, DRY principles
- ✅ HTML Semantics: Proper use of semantic tags
- ✅ Cross-Browser Compatibility: Testing and fixing issues
- ✅ Performance Optimization: Image optimization, CSS minification
- ✅ Visual Design: Understanding spacing, typography, colors
- ✅ UI/UX Principles: User flow, navigation, accessibility
- ✅ Design Replication: Attention to detail, pixel perfection
- ✅ Brand Consistency: Maintaining visual identity
| Browser | Version | Status |
|---|---|---|
| Chrome | 90+ | ✅ Fully Supported |
| Firefox | 88+ | ✅ Fully Supported |
| Safari | 14+ | ✅ Fully Supported |
| Edge | 90+ | ✅ Fully Supported |
| Opera | 76+ | ✅ Fully Supported |
Contributions are welcome! If you'd like to improve these clones:
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Add more streaming service clones
- Improve accessibility
- Add JavaScript interactivity
- Optimize performance
- Fix bugs or issues
This project is open source and available under the MIT License.
Note: These clones are for educational purposes only. All trademarks, logos, and brand names are the property of their respective owners.
These are educational projects created to practice frontend development skills. They are not affiliated with, endorsed by, or connected to Disney+, Spotify, or any of their parent companies. All trademarks and copyrights belong to their respective owners.
These clones should not be used for:
- ❌ Commercial purposes
- ❌ Distribution as real applications
- ❌ Misrepresentation as official products
These clones are intended for:
- ✅ Learning and education
- ✅ Portfolio demonstration
- ✅ Skill development
- ✅ Inspiration for design
Adrian Lobato
- GitHub: @adrian1715
- LinkedIn: Adrian Lobato
- Portfolio: portfolio-website-adrian-lobato.onrender.com
- Disney+ and Spotify for the original designs that inspired these clones
- The frontend development community for resources and tutorials
- Bootstrap for responsive design inspiration
If you find these clones helpful, please give the repo a ⭐
I truly appreciate all your support!