login page using pure Html and CSS | 2020 login page
How to design responsive
and attractive login form using html and CSS?
Planics developer provides
you best design of 2020 in html and CSS. We are providing computer science
related content. If you still not follow
our blog and YouTube channel then please follow and share your query.
how to create signup form
in html and csshow to create login form
2020how to make websitehow to create websitehow to create form in htmlhow to create login form in
htmlhow to make signup form in
htmlhtml signup formlogin form designlogin form in html websitewebsite designhow to create a signup2020 new videotransparent login form html
csslogin formlogin form in html and csshtml registration formhtml tutorial
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible'
content='IE=edge'>
<title>welcome in login
form</title>
<meta name='viewport'
content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css'
media='screen' href='main.css'>
<script
src='main.js'></script>
<link rel='stylesheet' type='text/css'
href='blackform.css'>
</head>
<body>
<div class="container">
<div
class="form-container">
<h1
class="form-login-heading">Login</h1>
<form action="#"
method="post">
<lable
class="form-lable">username</lable>
<br>
<input
type="text" class="input-data" placeholder="Enter
Username"></input>
<br>
<lable
class="form-lable">Password</lable>
<br>
<input
type="password" class="input-data"
placeholder="enter password"></input>
<br>
<a
href="#"class="link">Forgot Password</a>
<br>
<button
type="submit" class="btn-login"> Login </button>
<br>
</form>
</div>
</div>
</body>
</html>
|
How to set Video as background in home page andnavigation bar ?
*
{
margin:00px;
padding:00px;
}
.container
{
height: 100vh;
width: 100%;
background-color: #0b132b;
display: flex;
justify-content: center;
align-items: center;
}
.form-lable
{
color:white;
font-weight: bold;
border-bottom: 1px solid white;
font-size: 17px;
}
.input-data
{
border: none;
margin: 10px 00px;
width: 250px;
padding:10px;
border-radius: 10px;
border: 2px solid #0466c8;
font-weight:bold;
}
.btn-login
{
border: none;
margin: 10px 00px;
width: 100px;
padding:10px;
margin: 15px 00px 10px 80px;
border-radius: 10px;
}
.btn-login:hover
{
background:linear-gradient(to right,
#ee0979,#ff6a00);
}
.form-login-heading
{
color: white;
margin:00px 00px 10px 80px;
}
.form-container
{
padding:30px;
border-radius: 15px;
box-shadow: 0 0 19px rgb(50, 67, 119);
}
.link
{
color:linear-gradient(to right
#833ab4,#fd1d1d,#2C5364);
text-decoration:none;
float: right;
margin-top: 10px;
}
|
0 coment�rios: