Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

24 January 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

Um Código por sahrawilouay

Um código por mikey

Um código por simohdrca

HTML

CSS

JS

Recomendado

Um Código por sahrawilouay

Um código por mikey

Um código por simohdrca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS