Connexion Tissu

4,467 anelym

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 August 2024

Formulaire de connexion

25 May 2025

Meilleur portfolio avec connexion et publications système

14 October 2023

Formulaire de connexion

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;
}