Landing Page - Music

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SonicWave - Revolutionize Your Music Experience</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --color-background: #000000;
            --color-text: #ffffff;
            --color-primary: #8B5CF6;
            --color-secondary: #4F46E5;
            --color-accent: #F59E0B;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--color-text);
            background-color: var(--color-background);
        }

h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header Styles */
        header {
            position: fixed;
            width: 100%;
            z-index: 1000;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            transition: background-color 0.3s ease;
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-text);
            text-decoration: none;
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 30px;
        }

.nav-links a {
            color: var(--color-text);
            text-decoration: none;
            font-weight: 300;
            transition: color 0.3s ease;
        }

.nav-links a:hover {
            color: var(--color-primary);
        }

/* Hero Section Styles */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translateX(-50%) translateY(-50%);
            z-index: -1;
        }

.hero-content {
            position: relative;
            z-index: 1;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards 0.5s;
        }

.hero p {
            font-size: 1.5rem;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards 0.7s;
        }

.cta-button {
            display: inline-block;
            background-color: var(--color-primary);
            color: var(--color-text);
            padding: 15px 30px;
            text-decoration: none;
            font-weight: 700;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            opacity: 0;
            transform: translateY(50px);
            animation: fadeInUp 1s ease forwards 0.9s;
        }

.cta-button:hover {
            background-color: var(--color-secondary);
        }

/* Features Section Styles */
        .features {
            padding: 100px 0;
            background-color: #111;
        }

.section-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 50px;
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.feature-card {
            background-color: #222;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s ease;
        }

.feature-card:hover {
            transform: translateY(-10px);
        }

.feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--color-primary);
        }

.feature-title {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

.feature-description {
            font-size: 1rem;
            color: #ccc;
        }

/* Product Showcase Styles */
        .product-showcase {
            padding: 100px 0;
            background-color: #000;
        }

.product-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

.product-image {
            flex: 1;
            max-width: 500px;
            margin-right: 50px;
        }

.product-image img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

.product-features {
            flex: 1;
            max-width: 500px;
        }

.product-feature {
            background-color: #222;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.product-feature:hover,
        .product-feature.active {
            background-color: var(--color-primary);
        }

.product-feature h3 {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

.product-feature p {
            font-size: 0.9rem;
            color: #ccc;
        }

/* Testimonials Styles */
        .testimonials {
            padding: 100px 0;
            background-color: #111;
        }

.testimonial-slider {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

.testimonial {
            display: none;
        }

.testimonial.active {
            display: block;
            animation: fadeIn 0.5s ease forwards;
        }

.testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 20px;
        }

.testimonial-author {
            font-weight: 700;
            color: var(--color-primary);
        }

.slider-dots {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            background-color: #444;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

.slider-dot.active {
            background-color: var(--color-primary);
        }

/* Call to Action Styles */
        .cta {
            padding: 100px 0;
            background-color: var(--color-primary);
            text-align: center;
        }

.cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

.cta p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.cta-form {
            display: flex;
            justify-content: center;
            max-width: 500px;
            margin: 0 auto;
        }

.cta-form input {
            flex: 1;
            padding: 15px;
            font-size: 1rem;
            border: none;
            border-radius: 5px 0 0 5px;
        }

.cta-form button {
            padding: 15px 30px;
            font-size: 1rem;
            font-weight: 700;
            background-color: #000;
            color: #fff;
            border: none;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.cta-form button:hover {
            background-color: #333;
        }

/* Footer Styles */
        footer {
            background-color: #000;
            color: #fff;
            padding: 50px 0;
        }

.footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

.footer-section {
            flex: 1;
            margin-bottom: 30px;
            min-width: 200px;
        }

.footer-section h3 {
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

.footer-section p,
        .footer-section a {
            color: #ccc;
            text-decoration: none;
            margin-bottom: 10px;
            display: block;
        }

.social-links a {
            font-size: 1.5rem;
            margin-right: 15px;
            color: #fff;
        }

.copyright {
            text-align: center;
            margin-top: 50px;
            padding-top: 20px;
            border-top: 1px solid #333;
            font-size: 0.9rem;
            color: #ccc;
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

/* Responsive Styles */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 3rem;
            }

.hero p {
                font-size: 1.2rem;
            }

.nav-links {
                display: none;
            }

.product-content {
                flex-direction: column;
            }

.product-image {
                margin-right: 0;
                margin-bottom: 50px;
            }

.cta-form {
                flex-direction: column;
            }

.cta-form input,
            .cta-form button {
                width: 100%;
                border-radius: 5px;
            }

.cta-form input {
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <a href="#" class="logo">SonicWave</a>
            <ul class="nav-links">
                <li><a href="#features">Features</a></li>
                <li><a href="#product">Product</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#cta">Pre-order</a></li>
            </ul>
        </nav>
    </header>

<main>
        <section class="hero">
            <video autoplay loop muted playsinline>
                <source src="https://videos.pexels.com/video-files/5091918/5091918-hd_1920_1080_25fps.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="hero-content container">
                <h1>Revolutionize Your Music Experience</h1>
                <p>Discover SonicWave, the next-generation music player that adapts to your mood and environment.</p>
                <a href="#cta" class="cta-button">Experience the Future of Sound</a>
            </div>
        </section>

<section id="features" class="features">
            <div class="container">
                <h2 class="section-title">Redefining Music Playback</h2>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M3 18v-6a9 9 0 0 1 18 0v6"></path>
                                <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path>
                            </svg>
                        </div>
                        <h3 class="feature-title">Adaptive Sound</h3>
                        <p class="feature-description">AI-powered audio adjustment based on your environment and preferences.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                            </svg>
                        </div>
                        <h3 class="feature-title">Lightning-Fast Streaming</h3>
                        <p class="feature-description">Ultra-low latency streaming for seamless playback across all your devices.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="4" y1="21" x2="4" y2="14"></line>
                                <line x1="4" y1="10" x2="4" y2="3"></line>
                                <line x1="12" y1="21" x2="12" y2="12"></line>
                                <line x1="12" y1="8" x2="12" y2="3"></line>
                                <line x1="20" y1="21" x2="20" y2="16"></line>
                                <line x1="20" y1="12" x2="20" y2="3"></line>
                                <line x1="1" y1="14" x2="7" y2="14"></line>
                                <line x1="9" y1="8" x2="15" y2="8"></line>
                                <line x1="17" y1="16" x2="23" y2="16"></line>
                            </svg>
                        </div>
                        <h3 class="feature-title">Personalized EQ</h3>
                        <p class="feature-description">Dynamic equalizer that learns and adapts to your unique hearing profile.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
                                <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
                                <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
                                <line x1="12" y1="20" x2="12" y2="20"></line>
                            </svg>
                        </div>
                        <h3 class="feature-title">Spatial Audio</h3>
                        <p class="feature-description">Immersive 3D sound that follows your movements for a truly captivating experience.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="product" class="product-showcase">
            <div class="container">
                <h2 class="section-title">Meet SonicWave</h2>
                <div class="product-content">
                    <div class="product-image">
                        <img src="https://images.pexels.com/photos/3756767/pexels-photo-3756767.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="SonicWave Music Player">
                    </div>
                    <div class="product-features">
                        <div class="product-feature active">
                            <h3>Sleek Design</h3>
                            <p>Ergonomic and stylish, fits comfortably in your hand.</p>
                        </div>
                        <div class="product-feature">
                            <h3>Touch Controls</h3>
                            <p>Intuitive touch interface for effortless control.</p>
                        </div>
                        <div class="product-feature">
                            <h3>Long Battery Life</h3>
                            <p>Up to 50 hours of playback on a single charge.</p>
                        </div>
                        <div class="product-feature">
                            <h3>Wireless Charging</h3>
                            <p>Simply place on any Qi-compatible charging pad.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials" class="testimonials">
            <div class="container">
                <h2 class="section-title">What Our Users Say</h2>
                <div class="testimonial-slider">
                    <div class="testimonial active">
                        <p class="testimonial-text">"SonicWave has completely transformed how I experience music. The adaptive sound is mind-blowing!"</p>
                        <p class="testimonial-author">Alex Johnson, Music Producer</p>
                    </div>
                    <div class="testimonial">
                        <p class="testimonial-text">"I've never heard my favorite tracks sound so crisp and immersive. It's like rediscovering my music library."</p>
                        <p class="testimonial-author">Sarah Lee, Audiophile</p>
                    </div>
                    <div class="testimonial">
                        <p class="testimonial-text">"The personalized EQ feature is a game-changer. It's like the music knows exactly what I want to hear."</p>
                        <p class="testimonial-author">Mike Chen, Tech Reviewer</p>
                    </div>
                </div>
                <div class="slider-dots">
                    <span class="slider-dot active"></span>
                    <span class="slider-dot"></span>
                    <span class="slider-dot"></span>
                </div>
            </div>
        </section>

<section id="cta" class="cta">
            <div class="container">
                <h2>Be the First to Experience SonicWave</h2>
                <p>Join our exclusive pre-launch list and get early access to the future of music playback.</p>
                <form class="cta-form">
                    <input type="email" placeholder="Enter your email" required>
                    <button type="submit">Get Early Access</button>
                </form>
            </div>
        </section>
    </main>

<footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>SonicWave</h3>
                    <p>Revolutionizing the way you experience music</p>
                </div>
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <a href="#features">Features</a>
                    <a href="#product">Product</a>
                    <a href="#testimonials">Testimonials</a>
                </div>
                <div class="footer-section">
                    <h3>Follow Us</h3>
                    <div class="social-links">
                        <a href="#" aria-label="Facebook">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                            </svg>
                        </a>
                        <a href="#" aria-label="Instagram">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                            </svg>
                        </a>
                        <a href="#" aria-label="Twitter">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>© 2024 SonicWave. All rights reserved.</p>
            </div>
        </div>
    </footer>

// Header background change on scroll
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            header.classList.toggle('scrolled', window.scrollY > 50);
        });

// Testimonials slider
        const testimonials = document.querySelectorAll('.testimonial');
        const dots = document.querySelectorAll('.slider-dot');
        let currentTestimonial = 0;

function showTestimonial(index) {
            testimonials.forEach(testimonial => testimonial.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            testimonials[index].classList.add('active');
            dots[index].classList.add('active');
        }

dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                currentTestimonial = index;
                showTestimonial(currentTestimonial);
            });
        });

setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 5000);

// Product features interaction
        const productFeatures = document.querySelectorAll('.product-feature');
        productFeatures.forEach(feature => {
            feature.addEventListener('click', () => {
                productFeatures.forEach(f => f.classList.remove('active'));
                feature.classList.add('active');
            });
        });

// Form submission (replace with your own logic)
        document.querySelector('.cta-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Thank you for your interest. We\'ll keep you updated on the launch of SonicWave!');
            this.reset();
        });
    </script>
</body>
</html>

Landing Page - Music

Recommended

Challenge 01-1 Multi-Button Animation

Smart To-Do List

Visa Card Checkout Page HTML Template

HTML

CSS

JS

Recommended

Challenge 01-1 Multi-Button Animation

Smart To-Do List

Visa Card Checkout Page HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS