Login Form Demo Using Html CSS and Bootstrap.
In this, We will create a simple and awesome login form using Bootstrap Html and CSS. For this purpose, we will include bootstrap files in the new Project in the head tags i-e.
Html code:
<!DOCTYPE html>
<html>
<head>
<title>Rounded Login Form</title>
/* this is bootsrtap files that we import to use bootstrap.
for bootstrap.css files we used it head tag while it is on us that we use javascript or jquery files in body under script tag.,but in this case we use all in Head tag.
*\👇
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<h3>Rounded Login Form </h3>
<img src="user.jpg" class="rounded-circle" alt="user">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your Name">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="******">
</div>
<button type="button" class="btn-info float-right " >Login </button>
</form>
</div>
</div>
</div>
</body>
</html>
CSS code:
/* writing CSS code has many ways like inline, internal, and external CSS. Here we use Internal CSS under <style> tag in head
<style type="text/css">
body{
background-color: #006CA2;
}
.container{
width: 600px;
background-color: #fff;
padding: 30px;
border-radius: 50px;
margin-top: 50px;
}
.container h3{
text-align: center;
padding-top: 50px;
margin-top: 20px;
}
.container .form-group .form-control{
border-radius: 50px;
padding: 30px;
margin-top: 50px;
text-align: center;
}
.btn-info{
text-align: center;
height: 40px;
width: 90px;
border-radius: 50px;
margin-top: 20px;
background-color: #566676;
}
.container img{
height: 120px;
width: 120px;
position: absolute;
top: -70px;
left:220px;
box-shadow: 5px 5px 50px #566676;
}
/* {x y blur-radius background color} */
</style>
0 Comments