Home » Transparent Login Form Using HTML and CSS

Transparent Login Form Using HTML and CSS

by techmidpoint
Transparent Login Form Using HTML and CSS

Transparent Login Form Using HTML and CSS

I am hoping you have learned different types of tutorials of web development in techmidpoint. When you create an attractive design that design would attract users. Today in this tutorial I am going to show a transparent login form using HTML and CSS.

HTML

<!DOCTYPE html>
<html>
<head>
<title> Transparent Login Form HTML and CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="loginBox">
  <img class="user" src="user.png">
  <h2>Log In </h2>
  <form>
    <input type="email" name="email" placeholder="Enter Email" required>
    <input type="password" name="password" placeholder="Enter Password">
    <input type="submit" name="sign-in" value="Sign In">
    <a href="#">Forget Password</a>
  </form>
</div>
</body>
</html> 

CSS

body {
    margin: 0;
    padding: 0;
    background: url(bg.jpg);
    background-size: cover;
    font-family: arial;
    text-align: center;
  }
  
  .loginBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 400px;
    padding: 70px 40px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 30px;
  }
  
  .user {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: calc(-100px/2);
    left: calc(50% - 50px);
    border: 3px dotted #d2dfe7;
    background: #fff;
  }
  
  h2 {
    margin: 0;
    padding: 0 0 26px;
    color: #d2dfe7;
    text-align: center;
    text-transform: uppercase;
  }
  
  
  .loginBox input {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .loginBox input[type="email"],
  .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, 0.5);
  }
  
  .loginBox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    color: #eee;
    font-size: 16px;
    background-color: #FF8C00;
    cursor: pointer;
    border-radius: 20px;
    margin: 12px 0 18px;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .loginBox input[type="submit"]:hover {
    background-color: #ff9719;
    color: #fff;
  }
  
  .loginBox a {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
   
  }
  

Download Source Code

For More Tutorials Please Click Here

You may also like

Leave a Comment