Modèle de formulaire de connexion HTML réseaux sociaux

814 Skyrreum

Ouvrir dans l'éditeur Publiez votre code

Modèle de formulaire de connexion HTML réseaux sociaux

Recommandé

29 May 2025

Tableau de bord d'administration AdminHub v2.1

25 September 2025

Disposition de carte CSS avec arrière-plan dégradé

7 April 2026

GN-Math : Jeux débloqués, recherchez, triez et jouez

HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skyrreum Login</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="login-card">
            <div class="logo">
                <i class="fas fa-layer-group"></i>
            </div>
            <div class="title">Content de te revoir</div>
            <div class="subtitle">Connectez-vous à votre compte</div>

<button type="submit" class="btn-login">
                    Se connecter / Log In
                </button>
            </form>

<div class="social-login">
                <p>Ou continuez avec</p>
                <div class="social-icons">
                    <a href="#" class="social-btn"><i class="fab fa-google"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-btn"><i class="fab fa-github"></i></a>
                </div>
            </div>

<div class="footer-text">
                Pas de compte ? <a href="#">S'inscrire / Sign up</a>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

:root {
    --bg-color: #ecf0f3;
    --text-main: #555;
    --text-light: #a0a5a8;
    --shadow-light: #ffffff;
    --shadow-dark: #d1d9e6;
    --primary: #cbced1;
    --accent: #1da1f2;
    /* Example accent color for subtle highlights */
}

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

body {
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
}

.login-card {
    background-color: var(--bg-color);
    padding: 60px 40px 40px 40px;
    border-radius: 40px;
    text-align: center;
    box-shadow: 13px 13px 20px var(--shadow-dark),
        -13px -13px 20px var(--shadow-light);
}

.logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #333;
    box-shadow: 8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);
}

.title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 40px;
}

.input-group {
    position: relative;
    margin-bottom: 25px;
    border-radius: 25px;
    box-shadow: inset 8px 8px 8px var(--shadow-dark),
        inset -8px -8px 8px var(--shadow-light);
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--bg-color);
}

.input-group .icon {
    color: var(--text-light);
    padding-right: 15px;
}

.input-group input {
    border: none;
    outline: none;
    background: none;
    font-size: 16px;
    color: var(--text-main);
    width: 100%;
    height: 40px;
}

.input-group input::placeholder {
    color: var(--text-light);
}

.btn-login {
    width: 100%;
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background-color: #1da1f2;
    /* A bit of color for the primary action */
    border: none;
    outline: none;
    cursor: pointer;
    box-shadow: 8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-login:hover {
    background-color: #0d8bd9;
}

.btn-login:active {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -4px -4px 8px rgba(255, 255, 255, 0.1);
    transform: translateY(2px);
}

/* Social Login Styles */
.social-login {
    margin-top: 40px;
}

.social-login p {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-size: 20px;
    text-decoration: none;
    box-shadow: 8px 8px 16px var(--shadow-dark),
        -8px -8px 16px var(--shadow-light);
    transition: all 0.3s ease;
}

.social-btn:hover {
    color: var(--accent);
    transform: translateY(-2px);
}

.social-btn:active {
    box-shadow: inset 4px 4px 8px var(--shadow-dark),
        inset -4px -4px 8px var(--shadow-light);
    transform: translateY(2px);
}

.footer-text {
    margin-top: 30px;
    font-size: 14px;
    color: var(--text-light);
}

.footer-text a {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
}

.footer-text a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card {
        padding: 40px 20px;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const loginForm = document.querySelector('.login-form');
    const loginBtn = document.querySelector('.btn-login');

loginForm.addEventListener('submit', (e) => {
        e.preventDefault();

// Simulate loading state
        const originalText = loginBtn.innerText;
        loginBtn.innerText = 'Connexion...';
        loginBtn.style.opacity = '0.7';

setTimeout(() => {
            loginBtn.innerText = 'Succès !';
            loginBtn.style.backgroundColor = '#4CAF50'; // Green for success

setTimeout(() => {
                loginBtn.innerText = originalText;
                loginBtn.style.backgroundColor = '#1da1f2'; // Reset color
                loginBtn.style.opacity = '1';
                alert("Connexion réussie !");
            }, 1000);
        }, 1500);
    });

// Add satisfying click effects for all neumorphic buttons
    const buttons = document.querySelectorAll('.social-btn, .btn-login');
    buttons.forEach(btn => {
        btn.addEventListener('touchstart', function () {
            this.style.transform = 'scale(0.95)';
        });
        btn.addEventListener('touchend', function () {
            this.style.transform = 'scale(1)';
        });
    });
});