Login page design using Html and Css
Transparent background
Login page is need of every website. here i design a login page where you can login in your website and also option for login with google and Facebook and Instagram.
this login page is glassy you can add image in background of this glassy frame.
Please make sure you have add the font awesome link in this code
Html code:
<div class="newsbg">
<h2>Login Here</h2>
<form action="" method="post">
<div class="newsmenu">
<label>Usename</label><br>
<span class="fa fa-user"></span>
<input type="text" placeholder="YOUR Username">
</div>
<div class="newsmenu">
<label>Password</label><br>
<span class="fa fa-lock"></span>
<input type="password" placeholder="YOUR Password">
</div>
<a href=""> Forget password</a>
<div class="newsmenu">
<button class="newsloginbtn">LOG IN</button>
</div>
<div class="newsmenu">
<span style="color: white; display: flex;font-size:15px; margin-top: 15px;
width: 30%;margin-left: 30%; font-weight: bold;">Or Login with</span><br>
<button class="newsloginwith"><i class="fa fa-facebook-official" aria-hidden="true"></i> facebook</button>
<button class="newsloginwith" style="background: linear-gradient(#f2003c,#7E42BD);"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</button>
</div>
<div class="newmenusignup">
<span> Do Not Have Account?</span><a href="">SignUp</a>
</div>
</form>
</div>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
/*background: url("login.jpg") no-repeat center center/cover;*/
background: rgb(0, 0, 0,0.3) linear-gradient(#ad5389,#3c1053);
height: 100vh;
font-family: 'popins',sans-serif;
}
.newsbg{
position:absolute;
top: 16%;
left: 35%;
background: white;
height: 65%;
width: 25%;
background: rgba(0, 0, 0, 0.4);
box-shadow: -1px 4px 28px 0px rgba(171, 206, 13, 0.7);
padding: 50px 20px 20px 40px;
}
.newsbg h2{
position: relative;
left: 20%;
text-align: center;
color: white;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid white;
width: 50%;
text-shadow:6px 6px 5px rgba(5, 122, 255, 0.7);
}
label
{
color: white;
font-weight: bold;
font-size: 20px;
padding-bottom: 30px;
padding-left: 15px;
}
.newsmenu input
{
width: 80%;
border: none;
height: 40px;
border-bottom: 2px solid white;
outline: none;
background: transparent;
margin-bottom: 20px;
color: white;
transition: 0.6s;
}
.newsmenu input:hover{
width: 85%;
}
::placeholder
{
color: white;
opacity: 0.5;;
}
.newsmenu span{
width: 20px;
line-height: 20px;
}
.newsloginbtn
{
width: 65%;
display: flex;
height: 35px;
position: relative;
left: 12%;
justify-content: center;
padding-top: 8px;
font-size: 18px;
font-weight: bold;
border-radius: 17px;
outline: none;
border: none;
background-color: #1c8adb;
margin-top: 10px;
transition: 0.5s;
}
.newsloginbtn:hover{
width: 70%;
}
.newsbg a{
text-decoration: none;
color: rgb(0, 217, 255);
position: relative;
left: 20px
}
.newsloginwith
{
position: relative;
width: 40%;
height: 38px;
justify-content: center;
padding-top:3px ;
font-weight: bold;
font-size: 18px;
margin-left: 20px;
background: #3b5998;
color: white;
border: none;
}
.newmenusignup{
color: white;
margin-top: 20px;
margin-left: 17%;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/2b9c5e787e.js" crossorigin="anonymous"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
/* background: url("login.jpg") no-repeat center center/cover; */
background: rgb(0, 0, 0, 0.3) linear-gradient(#ad5389, #3c1053);
background-blend-mode: darken;
height: 100vh;
font-family: 'popins', sans-serif;
}
.newsbg {
position: absolute;
top: 16%;
left: 35%;
background: white;
height: 65%;
width: 25%;
background: rgba(0, 0, 0, 0.4);
box-shadow: -1px 4px 28px 0px rgba(171, 206, 13, 0.7);
padding: 50px 20px 20px 40px;
}
.newsbg h2 {
position: relative;
left: 20%;
text-align: center;
color: white;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid white;
width: 50%;
text-shadow: 6px 6px 5px rgba(5, 122, 255, 0.7);
}
label {
color: white;
font-weight: bold;
font-size: 20px;
padding-bottom: 30px;
padding-left: 15px;
}
.newsmenu input {
width: 80%;
border: none;
height: 40px;
border-bottom: 2px solid white;
outline: none;
background: transparent;
margin-bottom: 20px;
color: white;
transition: 0.6s;
}
.newsmenu input:hover {
width: 85%;
}
::placeholder {
color: white;
opacity: 0.5;
;
}
.newsmenu span {
width: 20px;
line-height: 20px;
}
.newsloginbtn {
width: 65%;
display: flex;
height: 35px;
position: relative;
left: 12%;
justify-content: center;
padding-top: 8px;
font-size: 18px;
font-weight: bold;
border-radius: 17px;
outline: none;
border: none;
background-color: #1c8adb;
margin-top: 10px;
transition: 0.5s;
}
.newsloginbtn:hover {
width: 70%;
}
.newsbg a {
text-decoration: none;
color: rgb(0, 217, 255);
position: relative;
left: 20px
}
.newsloginwith {
position: relative;
width: 40%;
height: 38px;
justify-content: center;
padding-top: 3px;
font-weight: bold;
font-size: 18px;
margin-left: 20px;
background: #3b5998;
color: white;
border: none;
}
.newmenusignup {
color: white;
margin-top: 20px;
margin-left: 17%;
}
</style>
</head>
<body>
<div class="newsbg">
<h2>Login Here</h2>
<form action="" method="post">
<div class="newsmenu">
<label>Usename</label><br>
<span class="fa fa-user"></span>
<input type="text" placeholder="YOUR Username">
</div>
<div class="newsmenu">
<label>Password</label><br>
<span class="fa fa-lock"></span>
<input type="password" placeholder="YOUR Password">
</div>
<a href=""> Forget password</a>
<div class="newsmenu">
<button class="newsloginbtn">LOG IN</button>
</div>
<div class="newsmenu">
<span style="color: white; display: flex;font-size:15px; margin-top: 15px;
width: 30%;margin-left: 30%; font-weight: bold;">Or Login with</span><br>
<button class="newsloginwith"><i class="fa fa-facebook-official" aria-hidden="true"></i>
facebook</button>
<button class="newsloginwith" style="background: linear-gradient(#f2003c,#7E42BD);"><i
class="fa fa-instagram" aria-hidden="true"></i> Instagram</button>
</div>
<div class="newmenusignup">
<span> Do Not Have Account?</span><a href="">SignUp</a>
</div>
</form>
</div>
</body>
</html>
Posts
0 Comments