Connexion et inscription animées

2796 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 July 2024

Formulaire de paiement HTML et CSS

18 May 2024

Formulaire de connexion multicolore

19 May 2025

Montres connectées de luxe redéfinissant l'élégance et la technologie

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Iniciar sesión y registrarse</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h2 class="logo">Andev web</h2>
    <nav class="navigation">
        <button class="bthLogin-popup">Iniciar sesión</button>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
       
    </nav>
</header>
<div class="wrapper">
    <span class="icon-close">
        <ion-icon name="close"></ion-icon>
    </span>
    <div class="form-box login">
        <h2>Iniciar sesión</h2>
        <form action="#">
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="mail"></ion-icon>
                </span>
                <input type="email" required>
                <label>Correo electrónico</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="lock-closed"></ion-icon>
                </span>
                <input type="password" required>
                <label>Contraseña</label>
            </div>
            <div class="remember-forgot">
                <label><input type="checkbox" required>
                    Recordarme</label>
                <a href="#">¿Olvidaste la contraseña?</a>
            </div>
            <button type="submit" class="bth">Iniciar sesión</button>
            <div class="login-register">
                <p>¿No tienes una cuenta? <a href="#" class="register-link">Registrarse</a></p>
            </div>
        </form>
    </div>

<div class="form-box register">
        <h2>Registro</h2>
        <form action="#">
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="person"></ion-icon>
                </span>
                <input type="text" required>
                <label>Nombre de usuario</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="mail"></ion-icon>
                </span>
                <input type="email" required>
                <label>Correo electrónico</label>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="lock-closed"></ion-icon>
                </span>
                <input type="password" required>
                <label>Contraseña</label>
            </div>
            <div class="remember-forgot">
                <label><input type="checkbox" required>
                    Acepto los términos y condiciones</label>
            </div>
            <button type="submit" class="bth">Registrarse</button>
            <div class="login-register">
                <p>¿Ya tienes una cuenta? <a href="#" class="login-link">Iniciar sesión</a></p>
            </div>
        </form>
    </div>
</div>
<script src="script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>

CSS

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-size: cover;
    background: url('https://images.unsplash.com/photo-1716654195483-de7a5ad4d23c?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}
.logo {
    font-size: 2em;
    color: #ffffff;
    user-select: none;
}
.navigation a {
    position: relative;
    font-size: 1.1em;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 40px;
}
.navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 5px;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .5s;
}
.navigation a:hover::after {
    transform-origin: left;
    transform: scaleX(1);
}
.navigation .bthLogin-popup {
    width: 130px;
    height: 50px;
    background: transparent;
    border: 2px solid #ffffff;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    color: #ffffff;
    font-weight: 500;
    margin-left: 40px;
    transition: .5s;
}
.navigation .bthLogin-popup:hover {
    background: #ffffff;
    color: #162938;
}
.wrapper {
    position: relative;
    width: 400px;
    height: 440px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform: scale(0);
    transition: transform .5s ease, height .2s ease;
}
.wrapper.active-popup {
    transform: scale(1);
}
.wrapper.active {
    height: 520px;
}
.wrapper .form-box {
    width: 100%;
    padding: 40px;
}
.wrapper .form-box.login {
    transition: transfrom .18s ease;
    transform: translateX(0);
}
.wrapper.active .form-box.login {
    transition: none;
    transform: translateX(-400px);
}
.wrapper .form-box.register {
    position: absolute;
    transition: none;
    transform: translateX(400px);
}
.wrapper.active .form-box.register {
    transition: transfrom .18s ease;
    transform: translateX(0);
}
.wrapper .icon-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: #162938;
    font-size: 2em;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    z-index: 1;
}
.form-box h2 {
    font-size: 2em;
    color: #ffffff;
    text-align: center;
}
.input-box {
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #ffffff;
    margin: 30px 0;
}
.input-box label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #ffffff;
    font-weight: 500;
    pointer-events: none;
    transition: .5s;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label {
    top: -5px;
}
.input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #ffffff;
    font-weight: 600;
    padding: 0 35px 0 5px;
}
.input-box .icon {
    position: absolute;
    right: 8px;
    font-size: 1.2em;
    color: #ffffff;
    line-height: 57px;
}
.remember-forgot {
    font-size: .9em;
    color: #ffffff;
    font-weight: 500;
    margin: -15px 0 15px;
    display: flex;
    justify-content: space-between;
}
.remember-forgot label input {
    accent-color: #ffffff;
    margin-right: 3px;
}
.remember-forgot a {
    color: #ffffff;
    text-decoration: none;
}
.remember-forgot a:hover {
    text-decoration: underline;
}
.bth {
    width: 100%;
    height: 45px;
    background: #ffffff;
    border: none;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    color: #162938;
    font-weight: 500;
}
/*Andev Web*/
.login-register {
    font-size: .9em;
    color: #fff;
    text-align: center;
    font-weight: 500;
    margin: 25px 0 10px;
}
.login-register p a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.login-register p a:hover {
    text-decoration: underline;
}

Recommandé

Formulaire de paiement HTML et CSS

Formulaire de connexion multicolore

Montres connectées de luxe redéfinissant l'élégance et la technologie

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS