Tela de Login

3660 anelym

Abrir en el editor Publica tu código

Recomendado

30 November 2024

Animaciones controladas por desplazamiento

15 September 2025

Ejemplo de animación de cuadrícula CSS

27 November 2024

Página de inicio - Modelo IA

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width-device-width", initial-scale="1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <title>Login</title>
</head>

<body>
    <div class="wrapper">
        <h2>Welcome</h2>
        <form action="#">
            <div class="input-field">
                <input type="email" id="email" placeholder="Email" required>
                <i class="bx bxs-user"></i>
            </div>
            <div class="input-field">
                <input type="password" id="password" placeholder="Password" required>
                <i class="bx bxs-lock-alt"></i>
            </div>
            <a href="#" class="forgot">
                <p>Forgot password?</p>
            </a>
            <button type="submit" class="login">Login</button>
            <p>Don't have an account? <a href="#" class="sing up">sign up</a></p>
        </form>
    </div>
</body>

</html>

CSS

body{
    background: url(https://static.vecteezy.com/system/resources/previews/007/218/724/original/beautiful-purple-particles-with-lens-flare-on-purple-gradient-color-background-luxury-background-design-element-free-photo.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 400px;
    height: 600px;
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 350px;
    text-align: center;
    border: 1px solid rgb(241, 241, 241);
    border-radius: 12px;
    padding: 10px 20px;
    background: transparent;
    backdrop-filter: blur(6px);
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}

.wrapper h2{
    font-size: 30px;
    color: #fffefe;
}

.input-field {
    position: relative;
}

.input-field input[type="email"],
.input-field input[type="password"] {
    border-radius: 10px;
    background: transparent;
    margin: 15px;
    border: 2px solid rgb(255, 255, 255);
    width: 280px;
    height: 2px;
    padding: 20px 40px 20px 20px;
    backdrop-filter: blur(15px);
}

.input-field i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    color: rgb(252, 252, 252);
}

input::placeholder {
    color: rgb(255, 255, 255);
}

.input-field input[type="email"]:focus::placeholder,
.input-field input[type="password"]:focus::placeholder {
    transform: translateY(-100%);
    transition: transform 0,2s ease-in-out;
    font-size: 14px;
}

.input-field input[type="email"]:not(:focus)::placeholder,
.input-field input[type="password"]:not(:focus)::placeholder {
    transform: translateY(0%);
    transition: transform 0.2s ease-in-out;
    font-size: 16px;
}

a.forgot {
    text-decoration: none;
    position: relative;
    color: rgb(255, 255, 255);
}

a.forgot:hover {
    text-decoration: underline;
    color: #fffffffd;
}

a.sign-up {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.712);
}

a.sign-up:hover {
    text-decoration: underline;
    color: #fffffffd;
}

.wrapper .login{
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-weight: 600px;
    border-radius: 45px;
    width: 200px;
    height: 30px;
}

Recomendado

Animaciones controladas por desplazamiento

Ejemplo de animación de cuadrícula CSS

Página de inicio - Modelo IA

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS