Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

27 May 2025

<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

Cartão de pagamento

Um Código de Metehan

Caixa de pesquisa

HTML

CSS

JS

Recomendado

Cartão de pagamento

Um Código de Metehan

Caixa de pesquisa

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS