Facebook login page - Real Helper

Shovit Nepal

4495

Neumorphism ui fb login page

 <html lang="en">
<head>
    <title>Facebook - Log In</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="login_box">
        <h1 class="title">facebook</h1><br>
     <form action="{{url_for('hi')}}" method="post">
       <input class="text" type="email" name="username" placeholder="Email address or phone number"required><br>
        <input class="text"type="password" name="password" placeholder="Password"required><br>
        <button><i class="fa fa-lock"></i>Login</button><br>
     </form>
         <p class="no_acc">Don't have an account?<a class="sign_up"href="https://www.facebook.com"> Sign Up</a></p><br>
     </div>
</body>
</html>

Try it Yourself >>

 body{
    background-color: #ECF0F3;
}

.login_box{
    background:  #ECF0F3;
    width: 380px;
    height: 480px;
    position: relative;
    margin: 8% auto;
    padding: 5px;
    border-radius: 80px;
    box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -10px -10px 15px white;
}

.login_box:hover{
    box-shadow: 12px 12px 19px rgb(163,177,198,0.6), -13px -13px 18px white;
}

form{
    display: inline-block;
     margin-left:auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
    width: 100%;
 }

.title{
    color:	#499DF5;
   font-family:Verdana;
   font-size: 30px;
   text-align: center;
   margin-top: 60px;
}

input {
    border: none;
    border-radius: 25px;
    box-shadow: inset 4px 4px 4px rgb(163,177,198,0.6), inset -3px -3px 3px  white;
    width: 215px;
    height: 35px;
    margin: 10px;
    text-align:left;
    padding-left:15px;
    padding-bottom: 3px;
    background: transparent;
    font-size: 12px;
    text-align: left;
    color:grey;
}

button{
    background:  #ECF0F3;
    box-sizing: border-box;
    color: #499DF5;;
     border-radius: 25px;
    font-size:12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 15px;
    height: 30px;
    width: 215px;
    margin-top:25px;
    box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -10px -10px 15px white;
    border: none;
}

button:hover{
    box-shadow: 7px 7px 14px rgb(163,177,198,0.6), -8px -8px 11px white;
    opacity:0.8;
}
.fa fa-lock{
  margin-right:6px;
  color: #499DF5;
  font-size: 12px;
}

::placeholder{
    color: darkgrey;
    opacity: 1;
}

.no_acc{
    margin-top: 60px;
    font-family: Verdana;
    color: grey;
    font-size: 12px;
    text-align: center;
}
.sign_up{
    text-decoration: none;
    color: #499DF5;
    font-size: 11px;
}
.sign_up:hover{
    opacity: 0.7;
}

Try it Yourself >>