Webleb - fragmentos de código - Muy lejos bien 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;
        }

Muy lejos bien chido

Recomendado

Iconos sociales con reflejos

Pantalla de bienvenida

escribiendo en la pantalla

HTML

CSS

JS

Recomendado

Iconos sociales con reflejos

Pantalla de bienvenida

escribiendo en la pantalla

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS