Plantilla de formulario de inicio de sesión HTML para redes sociales

976 Skyrreum

Abrir en el editor Publica tu código

Plantilla de formulario de inicio de sesión HTML para redes sociales

Recomendado

30 November 2024

Arte de texto

11 July 2025

Menú de alternancia CSS con iconos de Font Awesome

8 February 2025

Un código de bachir123

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)';
        });
    });
});