Formulario de inicio de sesión de Glowing Light

2,854 Andev.web

Abrir en el editor Publica tu código

Formulario de inicio de sesión de Glowing Light

Recomendado

24 July 2024

Plantilla de sitio web de aplicaciones

1 April 2026

Código de inserción del juego Geometry Dash Lite HTML5

14 February 2025

Un código de Pedro_bugica

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

<h2>Login</h2>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="mail"></ion-icon>
                </span>
                <input type="email" required>
                <label>Email</label>
                <div class="input-line"></div>
            </div>
            <div class="input-box">
                <span class="icon">
                    <ion-icon name="lock-closed"></ion-icon>
                </span>
                <input type="password" required>
                <label>Password</label>
                <div class="input-line"></div>
            </div>
            <div class="remember-forgot">
                <label><input type="checkbox"> Remember me</label>
                <a href="#">Forgot Password?</a>
            </div>
            <button type="submit">Login</button>
            <div class="register-link">
                <p>Don't have an account? <a href="#">Register</a></p>
            </div>
        </form>
    </div>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&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: #151f28;
    overflow: hidden;
}

.login-box {
    position: relative;
    width: 400px;
    height: 450px;
    background: #191919;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

h2 {
    font-size: 2em;
    color: #fff;
    text-align: center;
    transition: .5s ease;
}

.input-check:checked~h2 {
    color: #00f7ff;
    text-shadow:
        0 0 15px #00f7ff,
        0 0 30px #00f7ff;
}

.input-box {
    position: relative;
    width: 310px;
    margin: 30px 0;
}

.input-box .input-line {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2.5px;
    background: #fff;
    transition: .5s ease;
}

.input-check:checked~.input-box .input-line {
    background: #00f7ff;
    box-shadow: 0 0 10px #00f7ff;
}

.input-box label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #fff;
    pointer-events: none;
    transition: .5s ease;
}

.input-box input:focus~label,
.input-box input:valid~label {
    top: -5px;
}

.input-check:checked~.input-box label {
    color: #00f7ff;
    text-shadow: 0 0 10px #00f7ff;
}

.input-box input {
    width: 100%;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #fff;
    padding: 0 35px 0 5px;
    transition: .5s ease;
}

.input-check:checked~.input-box input {
    color: #00f7ff;
    text-shadow: 0 0 5px #00f7ff;
}

.input-box .icon {
    position: absolute;
    right: 8px;
    color: #fff;
    font-size: 1.2em;
    line-height: 57px;
    transition: .5s ease;
}

.input-check:checked~.input-box .icon {
    color: #00f7ff;
    filter: drop-shadow(0 0 5px #00f7ff);
}

.remember-forgot {
    color: #fff;
    font-size: .9em;
    margin: -15px 0 15px;
    display: flex;
    justify-content: space-between;
    transition: .5s ease;
}

.input-check:checked~.remember-forgot {
    color: #00f7ff;
    text-shadow: 0 0 10px #00f7ff;
}

.remember-forgot label input {
    accent-color: #fff;
    margin-right: 3px;
    transition: .5s ease;
}

.input-check:checked~.remember-forgot label input {
    accent-color: #00f7ff;
}

.remember-forgot a {
    color: #fff;
    text-decoration: none;
    transition: color .5s ease;
}

.remember-forgot a:hover {
    text-decoration: underline;
}

.input-check:checked~.remember-forgot a {
    color: #00f7ff;
}

button {
    width: 100%;
    height: 40px;
    background: #fff;
    border: none;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 1em;
    color: #191919;
    font-weight: 500;
    transition: .5s ease;
}

.glowing-light {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 10px;
    background: #00f7ff;
    border-radius: 20px;
}

.input-check:checked~button {
    background: #00f7ff;
    box-shadow: 0 0 15px #00f7ff, 0 0 15px #00f7ff;
}

.register-link {
    color: #fff;
    font-size: .9em;
    text-align: center;
    margin: 25px 0 10px;
    transition: .5s ease;
}

.input-check:checked~.register-link {
    color: #00f7ff;
    text-shadow: 0 0 10px #00f7ff;
}

.register-link p a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color .5s ease;
}

.register-link p a:hover {
    text-decoration: underline;
}

.input-check:checked~.register-link p a {
    color: #00f7ff;
}

.light {
    position: absolute;
    top: -200%;
    left: 0;
    width: 100%;
    height: 950px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .3) -50%, rgba(255, 255, 255, 0) 90%);
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
    pointer-events: none;
    transition: .5s ease;
}

.input-check:checked~.light {
    top: -90%;
}

.toggle {
    position: absolute;
    top: 20px;
    right: -70px;
    width: 60px;
    height: 120px;
    background: #191919;
    border-radius: 10px;
}

.toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 80%;
    background: #000;
}

.toggle::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    background: #333;
    border: 2px solid #191919;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    transition: .5s ease;
}

.input-check:checked~.toggle::after {
    top: 65px;
}

.input-check {
    position: absolute;
    right: -70px;
    z-index: 1;
    opacity: 0;
}

.toggle .text {
    position: absolute;
    top: 17px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1em;
    z-index: 1;
    text-transform: uppercase;
    pointer-events: none;
    transition: .5s ease;
}

.toggle .text.off {
    opacity: 1;
}

.input-check:checked~.toggle .text.off {
    top: 76px;
    opacity: 0;
}

.toggle .text.on {
    opacity: 0;
}

.input-check:checked~.toggle .text.on {
    top: 76px;
    opacity: 1;
    color: #00f7ff;
    text-shadow:
        0 0 15px #00f7ff,
        0 0 30px #00f7ff,
        0 0 45px #00f7ff,
        0 0 60px #00f7ff;
}