Un code par fadlanbryan22

1,398 fadlanbryan22

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 June 2025

Un code de Metehan

11 February 2026

Code du jeu HTML Five Nights at Diddy's

29 December 2024

Une page d'accueil alternative

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Login Form</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div>

<div class="login-container">
        <div class="login-header">
            <h1>Welcome Back</h1>
            <p>Please login to your account</p>
        </div>

<form id="loginForm">
            <div class="input-group">
                <input type="email" id="email" required>
                <label for="email">Email</label>
                <div class="error-message" id="email-error">Please enter a valid email</div>
            </div>

<div class="input-group">
                <input type="password" id="password" required>
                <label for="password">Password</label>
                <div class="error-message" id="password-error">Password must be at least 6 characters</div>
            </div>

<div class="forgot-password">
                <a href="#">Forgot Password?</a>
            </div>

<button type="submit" class="login-button">Login</button>

<div class="signup-link">
                Don't have an account? <a href="#" class="signup-text">Sign up</a>
            </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-container {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90%;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    z-index: 10;
}

.login-container:hover {
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
    z-index: -1;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    20%, 100% {
        left: 100%;
    }
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-header h1 {
    color: #333;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.login-header p {
    color: #666;
    font-size: 14px;
}

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

.input-group input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    background-color: #f5f5f5;
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
}

.input-group input:focus {
    background-color: #e9e9e9;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-group label {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.input-group input:focus + label,
.input-group input:valid + label {
    top: -10px;
    left: 15px;
    font-size: 12px;
    background-color: #fff;
    padding: 0 5px;
    color: #764ba2;
}

.forgot-password {
    text-align: right;
    margin-bottom: 20px;
}

.forgot-password a {
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password a:hover {
    color: #764ba2;
}

.login-button {
    width: 100%;
    padding: 15px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
}

.login-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(118, 75, 162, 0.6);
}

.login-button:active {
    transform: translateY(0);
}

.signup-link {
    text-align: center;
    margin-top: 30px;
    color: #666;
    font-size: 14px;
}

.signup-link a.signup-text {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
}

.social-login {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-5px);
}

.facebook {
    background-color: #3b5998;
}

.google {
    background-color: #db4437;
}

.twitter {
    background-color: #1da1f2;
}

.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    border-radius: 50%;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

@media (max-width: 480px) {
    .login-container {
        padding: 30px 20px;
    }
    
    .login-header h1 {
        font-size: 24px;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('loginForm');
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('password');
    const emailError = document.getElementById('email-error');
    const passwordError = document.getElementById('password-error');

// Floating label functionality
    const inputs = document.querySelectorAll('.input-group input');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentNode.querySelector('label').classList.add('active');
        });
        
        input.addEventListener('blur', function() {
            if (this.value === '') {
                this.parentNode.querySelector('label').classList.remove('active');
            }
        });
        
        // Initialize labels if inputs have values
        if (input.value !== '') {
            input.parentNode.querySelector('label').classList.add('active');
        }
    });

// Form validation
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        let isValid = true;

// Email validation
        if (!validateEmail(emailInput.value)) {
            emailError.style.display = 'block';
            emailInput.parentNode.classList.add('error');
            isValid = false;
        } else {
            emailError.style.display = 'none';
            emailInput.parentNode.classList.remove('error');
        }

// Password validation
        if (passwordInput.value.length < 6) {
            passwordError.style.display = 'block';
            passwordInput.parentNode.classList.add('error');
            isValid = false;
        } else {
            passwordError.style.display = 'none';
            passwordInput.parentNode.classList.remove('error');
        }

if (isValid) {
            // Simulate successful login
            document.querySelector('.login-button').textContent = 'Logging in...';
            
            setTimeout(() => {
                alert('Login successful!');
                form.reset();
                document.querySelector('.login-button').textContent = 'Login';
                
                // Remove active class from labels
                inputs.forEach(input => {
                    input.parentNode.querySelector('label').classList.remove('active');
                });
            }, 1500);
        }
    });

function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }

// Add ripple effect to login button
    const loginButton = document.querySelector('.login-button');
    loginButton.addEventListener('click', function(e) {
        const x = e.clientX - e.target.getBoundingClientRect().left;
        const y = e.clientY - e.target.getBoundingClientRect().top;
        
        const ripple = document.createElement('span');
        ripple.classList.add('ripple');
        ripple.style.left = `${x}px`;
        ripple.style.top = `${y}px`;
        
        this.appendChild(ripple);
        
        setTimeout(() => {
            ripple.remove();
        }, 1000);
    });
});