Webleb - Code-Snippets - weit weg gut chido

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Moderno</title>
    <link rel="stylesheet" href="../Ideas_diceño/ida1.css">
</head>
<body>
    <div class="container">
        
        <form class="form" id="loginForm">
            <h2>Iniciar Sesión</h2>
            <div class="inputBox">
                <input type="text" required>
                <span>Usuario</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="password" required>
                <span>Contraseña</span>
                <i></i>
            </div>
            <div class="links">
                <a href="#">¿Olvidaste tu contraseña?</a>
                <a href="#" id="showRegister">Registrarse</a>
            </div>
            <input type="submit" value="Entrar">
        </form>

<form class="register" id="registerForm">
            <h2>Crear Cuenta</h2>
            <div class="inputBox">
                <input type="text" required>
                <span>Nombre Completo</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="email" required>
                <span>Correo Electrónico</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="password" required>
                <span>Contraseña</span>
                <i></i>
            </div>
            <div class="inputBox">
                <input type="password" required>
                <span>Confirmar Contraseña</span>
                <i></i>
            </div>
            <input type="submit" value="Registrarse">
            <div class="toggle-form">
                <a href="#" id="showLogin">¿Ya tienes cuenta? Inicia sesión</a>
            </div>
        </form>
    </div>

</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background: #0a192f;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #fff;
        }

.container {
            position: relative;
            width: 380px;
            height: 420px;
            background: #112240;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

.container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, #45ffca, #45ffca);
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
        }

.container::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            background: linear-gradient(0deg, transparent, #45ffca, #45ffca);
            transform-origin: bottom right;
            animation: animate 6s linear infinite;
            animation-delay: -3s;
        }

@keyframes animate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

.form {
            position: absolute;
            inset: 2px;
            border-radius: 8px;
            background: #112240;
            z-index: 10;
            padding: 40px;
            display: flex;
            flex-direction: column;
        }

.form h2 {
            color: #45ffca;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0.1em;
            margin-bottom: 30px;
        }

.inputBox {
            position: relative;
            width: 100%;
            margin-top: 20px;
        }

.inputBox input {
            position: relative;
            width: 100%;
            padding: 20px 10px 10px;
            background: transparent;
            border: none;
            outline: none;
            color: #0a192f;
            font-size: 1em;
            letter-spacing: 0.05em;
            z-index: 10;
        }

.inputBox span {
            position: absolute;
            left: 0;
            padding: 20px 10px 10px;
            font-size: 1em;
            color: #8f8f8f;
            pointer-events: none;
            letter-spacing: 0.05em;
            transition: 0.5s;
        }

.inputBox input:valid ~ span,
        .inputBox input:focus ~ span {
            color: #45ffca;
            transform: translateY(-34px);
            font-size: 0.75em;
        }

.inputBox i {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: #45ffca;
            border-radius: 4px;
            transition: 0.5s;
            pointer-events: none;
            z-index: 9;
        }

.inputBox input:valid ~ i,
        .inputBox input:focus ~ i {
            height: 44px;
        }

.links {
            display: flex;
            justify-content: space-between;
            margin: 15px 0;
        }

.links a {
            color: #8f8f8f;
            text-decoration: none;
            font-size: 0.75em;
        }

.links a:hover {
            color: #45ffca;
        }

input[type="submit"] {
            border: none;
            outline: none;
            background: #45ffca;
            padding: 11px 25px;
            width: 100%;
            margin-top: 20px;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            color: #0a192f;
            transition: all 0.3s;
        }

input[type="submit"]:hover {
            background: #3ce6b7;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

/* Estilos para el registro */
        .register {
            display: none;
            position: absolute;
            inset: 2px;
            border-radius: 8px;
            background: #112240;
            z-index: 10;
            padding: 40px;
            flex-direction: column;
        }

.register h2 {
            color: #45ffca;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0.1em;
            margin-bottom: 30px;
        }

.toggle-form {
            text-align: center;
            margin-top: 20px;
        }

.toggle-form a {
            color: #45ffca;
            text-decoration: none;
            font-size: 0.9em;
            cursor: pointer;
        }

.toggle-form a:hover {
            text-decoration: underline;
        }

weit weg gut chido

Empfohlen

Weltweiter Automarkenführer (Türkisch)

zweites Zuhause mit farbenfrohem Hintergrund

Erweiterbarer animierter Kartenschieber

HTML

CSS

JS

Empfohlen

Weltweiter Automarkenführer (Türkisch)

zweites Zuhause mit farbenfrohem Hintergrund

Erweiterbarer animierter Kartenschieber

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS