Login.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<img src="circleLogo.png"/>
<div class="textBox">
<input type="text" placeholder="Username"/>
</div>
<div class="textBox">
<input type="password" placeholder="Password"/>
</div>
<input class="btn" type="button" value="Login"/>
</div>
</body>
</html>
style.css
body{
background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(Laptop.jpg);
background-size:cover;
background-repeat:no-repeat;
}
.login-box{
width:300px;
position: absolute;
border-radius: 5px;
top: 50%;
left:50%;
padding: 20px;
transform: translate(-50%,-50%);
text-align: center;
background-color: #191919;
box-shadow: 5px 5px 10px #191919,-5px -5px 10px #191919;
}
.login-box img {
width: 100px;
height: 100px;
}
.login-box input[type="text"],.login-box input[type="password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid rgba(138,25,25);
padding: 14px 10px;
outline: none;
color: white;
border-radius: 20px;
transition: 0.5s;
}
.login-box input[type="text"]:focus,.login-box input[type="password"]:focus{
width: 250px;
border: 2px solid #348ba5;
}
.btn{
background: none;
border: 2px solid rgba(138,25,25);
color: rgba(138,25,25);
border-radius: 20px;
padding: 10px 20px;
}
.btn:hover{
background-color: rgba(138,25,25);
border: white;
color: white;
}
That is the image of my Login form
Login form Design Video :
Check out my YouTube channel for more such videos :
https://www.youtube.com/channel/UCrgTxZY_mtmFV0EpHeaRezg?view_as=subscriber
Follow me on my facebook page
https://www.facebook.com/Coding-Zone-101009098243029/?modal=admin_todo_tour
Post a Comment