Page de destination - Musique

3,478 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 August 2025

Exemple d'animation de grille CSS

29 June 2025

Extrait de code du menu déroulant HTML

10 August 2025

Structure d'animation de bloc CSS

HTML

<!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>

CSS