ads_header

Home HTML CSS LOGIN Create Form Login Transparent HTML CSS VIEWS

Create Form Login Transparent HTML CSS

July 22, 2019
Read


Hello guys, this tutorial I will create a login form with transparent style with the background, which consists of entering an email and password and the Sign In button. The login form is the initial display of an application that allows users to fill in a username and password to identify the validity of a user in a system.





Now, create a project folder and create the index.html and style.css files in it and include the user logo and image for the background. When finished, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Transparent Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loginBox">
        <img src="user.png" class="user">
        <h2>Login</h2>
        <form>
            <p>Email</p>
            <input type="text" name="" placeholder="Enter Email">
            <p>Password</p>
            <input type="password" name="" placeholder="******">
            <input type="submit" name="" value="Sign In">
            <a href="#">Forget Password</a>
        </form>
    </div>
</body>
</html>

Next, open style.css and enter the following code

body{
    margin: 0;
    padding: 0;
    background: url(bg.jpg);
    background-size: cover;
    font-family: sans-serif;
}

.loginBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 420px;
    padding: 50px;
    border-radius: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,.5);
}

.user{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: calc(-100px/2);
    left: calc(50% - 50px);
}

h2{
    margin: 0;
    padding: 10px 0 20px;
    color: #efed40;
    text-align: center;
}

.loginBox p{
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #fff;
}

.loginBox input{
    width: 100%;
    margin-bottom: 20px;
}

.loginBox input[type="text"],
.loginBox input[type="password"]{
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}

::placeholder{
    color: rgba(255,255,255,.5);
}

.loginBox input[type="submit"]{
    border: none;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
    background: #ff267e;
    cursor: pointer;
    border-radius: 20px;
}

.loginBox input[type="submit"]:hover{
    background: #efed40;
    color: #262626;
}

.loginBox a{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

Save all files and run index.html
Tags :
Powered by Blogger.