Un código de Yotva

1089 Yotva

Abrir en el editor Publica tu código

Recomendado

12 August 2025

Formulario de inicio de sesión HTML con fondo de matriz

13 July 2024

Plantilla de formulario de inicio de sesión más sencilla

12 July 2025

Plantilla HTML/CSS de reproductor de música similar a Spotify

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Authentification - Vagues Liquides</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Arial', sans-serif;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
        }

.wave-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

.wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 200px;
            background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
            animation: wave-animation 10s ease-in-out infinite;
            opacity: 0.7;
        }

.wave:nth-child(2) {
            height: 150px;
            background: linear-gradient(45deg, rgba(118, 75, 162, 0.6), rgba(240, 147, 251, 0.6));
            animation: wave-animation 8s ease-in-out infinite reverse;
            opacity: 0.5;
        }

.wave:nth-child(3) {
            height: 100px;
            background: linear-gradient(45deg, rgba(240, 147, 251, 0.4), rgba(245, 87, 108, 0.4));
            animation: wave-animation 6s ease-in-out infinite;
            opacity: 0.3;
        }

.wave::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            border-radius: 50% 50% 0 0;
        }

@keyframes wave-animation {
            0%, 100% {
                transform: translateX(-50%) translateY(0px);
                border-radius: 40% 60% 70% 30%;
            }
            25% {
                transform: translateX(-60%) translateY(-10px);
                border-radius: 30% 70% 50% 50%;
            }
            50% {
                transform: translateX(-70%) translateY(-20px);
                border-radius: 60% 40% 30% 70%;
            }
            75% {
                transform: translateX(-40%) translateY(-10px);
                border-radius: 50% 50% 60% 40%;
            }
        }

.floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

.bubble {
            position: absolute;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
            border-radius: 50%;
            backdrop-filter: blur(5px);
            animation: bubble-float 8s ease-in-out infinite;
        }

.bubble:nth-child(1) {
            width: 60px;
            height: 60px;
            left: 10%;
            animation-delay: 0s;
        }

.bubble:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 30%;
            animation-delay: 2s;
        }

.bubble:nth-child(3) {
            width: 80px;
            height: 80px;
            right: 20%;
            animation-delay: 4s;
        }

.bubble:nth-child(4) {
            width: 30px;
            height: 30px;
            right: 10%;
            animation-delay: 6s;
        }

@keyframes bubble-float {
            0%, 100% {
                transform: translateY(100vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                transform: scale(1);
            }
            90% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                transform: translateY(-100px) scale(0);
                opacity: 0;
            }
        }

.container {
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

.auth-box {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(25px);
            border-radius: 30px;
            padding: 50px;
            width: 420px;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
            animation: float-in 1s ease-out;
        }

@keyframes float-in {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

.auth-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, 
                rgba(255, 255, 255, 0.1) 0%, 
                rgba(255, 255, 255, 0.05) 50%, 
                rgba(255, 255, 255, 0.1) 100%);
            border-radius: 30px;
            animation: shimmer 3s ease-in-out infinite;
            pointer-events: none;
        }

@keyframes shimmer {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

.logo-section {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

.logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            font-weight: bold;
            animation: logo-pulse 2s ease-in-out infinite;
            box-shadow: 0 10px 30px rgba(255, 154, 158, 0.4);
        }

@keyframes logo-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

.logo-title {
            color: white;
            font-size: 2.2rem;
            font-weight: 300;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

.logo-subtitle {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            font-weight: 300;
        }

.tab-switcher {
            display: flex;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 5px;
            margin-bottom: 35px;
            position: relative;
            z-index: 2;
        }

.tab-btn {
            flex: 1;
            padding: 15px 25px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-size: 1rem;
            font-weight: 500;
            position: relative;
            z-index: 3;
        }

.tab-btn.active {
            color: white;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

.form-wrapper {
            position: relative;
            z-index: 2;
        }

.form-panel {
            display: none;
            animation: slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

.form-panel.active {
            display: block;
        }

@keyframes slide-in {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

.input-group {
            margin-bottom: 25px;
            position: relative;
        }

.input-label {
            display: block;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
            font-size: 0.95rem;
            font-weight: 500;
        }

.input-field {
            width: 100%;
            padding: 18px 22px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
        }

.input-field::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

.input-field:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

.submit-button {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            border: none;
            border-radius: 20px;
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 15px 35px rgba(255, 154, 158, 0.4);
            position: relative;
            overflow: hidden;
        }

.submit-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: translate(-50%, -50%);
        }

.submit-button:hover::before {
            width: 300px;
            height: 300px;
        }

.submit-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(255, 154, 158, 0.5);
        }

.submit-button:active {
            transform: translateY(-1px);
        }

.extra-options {
            text-align: center;
            margin-top: 25px;
        }

.extra-link {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }

.extra-link:hover {
            color: white;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

.social-section {
            margin-top: 30px;
            text-align: center;
        }

.social-divider {
            position: relative;
            margin-bottom: 20px;
        }

.social-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        }

.social-divider span {
            background: rgba(255, 255, 255, 0.1);
            padding: 0 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
            border-radius: 15px;
        }

.social-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

.social-btn {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            color: white;
            font-size: 1.2rem;
        }

.social-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="wave-container">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
    </div>

<div class="container">
        <div class="auth-box">
            <div class="logo-section">
                <div class="logo">L</div>
                <h1 class="logo-title">Liquid</h1>
                <p class="logo-subtitle">Expérience fluide</p>
            </div>

<div class="tab-switcher">
                <button class="tab-btn active" onclick="showForm('login')">Connexion</button>
                <button class="tab-btn" onclick="showForm('register')">Inscription</button>
            </div>

<div class="form-wrapper">
                <div class="form-panel active" id="loginPanel">
                    <form>
                        <div class="input-group">
                            <label class="input-label">Adresse email</label>
                            <input type="email" class="input-field" placeholder="exemple@email.com" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Mot de passe</label>
                            <input type="password" class="input-field" placeholder="Votre mot de passe" required>
                        </div>
                        <button type="submit" class="submit-button">Se connecter</button>
                    </form>
                    
                    <div class="extra-options">
                        <a href="#" class="extra-link">Mot de passe oublié ?</a>
                    </div>

<div class="social-section">
                        <div class="social-divider">
                            <span>ou continuez avec</span>
                        </div>
                        <div class="social-buttons">
                            <button class="social-btn">G</button>
                            <button class="social-btn">F</button>
                            <button class="social-btn">T</button>
                        </div>
                    </div>
                </div>

<div class="form-panel" id="registerPanel">
                    <form>
                        <div class="input-group">
                            <label class="input-label">Nom complet</label>
                            <input type="text" class="input-field" placeholder="Votre nom complet" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Adresse email</label>
                            <input type="email" class="input-field" placeholder="exemple@email.com" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Mot de passe</label>
                            <input type="password" class="input-field" placeholder="Créer un mot de passe" required>
                        </div>
                        <div class="input-group">
                            <label class="input-label">Confirmer le mot de passe</label>
                            <input type="password" class="input-field" placeholder="Répéter le mot de passe" required>
                        </div>
                        <button type="submit" class="submit-button">Créer un compte</button>
                    </form>

<div class="social-section">
                        <div class="social-divider">
                            <span>ou inscrivez-vous avec</span>
                        </div>
                        <div class="social-buttons">
                            <button class="social-btn">G</button>
                            <button class="social-btn">F</button>
                            <button class="social-btn">T</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

// Reset all tabs
            tabButtons.forEach(btn => btn.classList.remove('active'));
            loginPanel.classList.remove('active');
            registerPanel.classList.remove('active');

if (formType === 'login') {
                loginPanel.classList.add('active');
                tabButtons[0].classList.add('active');
            } else {
                registerPanel.classList.add('active');
                tabButtons[1].classList.add('active');
            }
        }

// Animation des inputs
        document.querySelectorAll('.input-field').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.style.transform = 'translateY(-2px)';
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.style.transform = 'translateY(0)';
            });
        });

// Effet de clic sur les boutons sociaux
        document.querySelectorAll('.social-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = 'scale(1)';
                }, 150);
            });
        });
    </script>
</body>
</html>

Recomendado

Formulario de inicio de sesión HTML con fondo de matriz

Plantilla de formulario de inicio de sesión más sencilla

Plantilla HTML/CSS de reproductor de música similar a Spotify

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS