<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Login Form</title>
</head>
<body>
    <div class="form">
        <h2>Login</h2>
            <div class="input">
                <div class="inputbox">
                    <label for="mail">Email</label>
                    <input type="email" name="mail" placeholder="exemple@xyz.com">
                </div>
                <div class="inputbox">
                    <label for="Password">Password</label>
                    <input type="text" name="Password" placeholder="********">
                </div>
                <div class="inputbox">
                    <input type="submit" name="validation" value="Sign In">
                </div>
            </div>
            <p class="forget">Oups, I forgot my password !<a href="#">Click Here</a></p>
    </div>
    
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Baloo+Paaji+2:700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Baloo Paaji 2', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1B2631;
}

.form{
    position: relative;
    width: 350px ;
    padding: 40px 40px 60px;
    background: #1B2631;
    border-radius: 10px;
    text-align: center;
    box-shadow: -5px -5px 10px rgba(255, 255, 255,0.05), 
                5px 5px 15px rgba(0, 0, 0, 0.5);
}

.form h2{
    color: #FBFCFC ;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.form .input{
    text-align: left;
    margin-top: 40px;
}

.form .input .inputbox{
    margin-top: 20px;
}

.form .input .inputbox label{
    display: block;
    color: #868686;
    margin-bottom: 5px;
    font-size: 18px;
}

.form .input .inputbox input{
    width: 100%;
    height: 50px;
    background: #1B2631;
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 5px 15px;
    font-size: 18px;
    color:#FFF;
    box-shadow: inset -2px -2px 6px rgba(255, 255, 255,0.1), 
                inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.form .input .inputbox input[type="submit"]{
    margin-top: 20px;
    box-shadow:  -2px -2px 6px rgba(255, 255, 255,0.1), 
                 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.form .input .inputbox input[type="submit"]:active{
    color: #82E0AA;
    margin-top: 20px;
    box-shadow: inset -2px -2px 6px rgba(255, 255, 255,0.1), 
                inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.form .input .inputbox input::placeholder{
    color: #82E0AA;
    font-size: 18px;
}

.forget{
    margin-top: 30px;
    font-size: 14px;
}

.forget a{
    color:#FFADA6;
    margin-left: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.