Skip to content

Instantly share code, notes, and snippets.

@Mauryashubham

Mauryashubham/index.html

Last active July 31, 2017 12:12
Show Gist options
  • Save Mauryashubham/99fa4df35b1f349929beb560a9134988 to your computer and use it in GitHub Desktop.
Save Mauryashubham/99fa4df35b1f349929beb560a9134988 to your computer and use it in GitHub Desktop.
Download ZIP
Simple html Bootstrap login form
Raw
gistfile1.txt
Download the Project here : http://shubhammaurya.com/tuts/simple-html-bootstrap-login-form/
STAY CONNECTED FOR MORE
Raw
index.html
Hi all , Welcome to shubhammaurya.com , Today we are going to discuss ,
how to make a Simple html Bootstrap login form.
1.Make a file in notepad and save it as index.html and paste the below code.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="pop.css">
<style type="text/css">
.col{
color: #1c1c1c;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- col 1 -->
<div class="col-md-6">
<!-- login form -->
<div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" style="margin: 150px auto;">
<p class="text-center" style="font-size: -webkit-xxx-large;color: #0a0a0a">Type one</p>
<div class="loginmodal-container" style="background: url(binding_dark.png)repeat fixed;;color: white;">
<h1>Login to Your Account</h1><br>
<form method="post">
<input type="text" name="uname" placeholder="Username" autocomplete="off" required>
<input type="password" name="upass" placeholder="Password" autocomplete="off" required>
<input type="submit" name="login" class="login loginmodal-submit" value="Login" style="background-color:#F44336;">
</form>
<div class="login-help text-center">
<span ><strong class="" ><a href="index.php" style="color: white;opacity: 1;">Any Text Here</a></strong></span>
</div>
</div>
</div>
</div>
</div>
<!-- col 2 -->
<div class="col-md-6" style="background: url(binding_dark.png)repeat fixed;">
<!-- login form -->
<div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" style="margin: 150px auto;">
<p class="text-center" style="font-size: -webkit-xxx-large;color: white">Type Two</p>
<div class="loginmodal-container" style="background: #00a885;color: white;">
<h1 class="col">Login to Your Account</h1><br>
<form method="post">
<input type="text" name="uname" placeholder="Username" autocomplete="off" required>
<input type="password" name="upass" placeholder="Password" autocomplete="off" required>
<input type="submit" name="login" class="login loginmodal-submit" value="Login" style="background-color:#F44336;">
</form>
<div class="login-help text-center">
<span ><strong class="" ><a href="index.php" class="col" style="color: white;opacity: 1;">Any Text Here</a></strong></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
pop.css
@import url(http://fonts.googleapis.com/css?family=Roboto);
body{
// background: url(assets/images/binding_dark.png)repeat fixed;
background: #00a885;
}
:focus {
outline:none !important;
}
/****** LOGIN MODAL ******/
.loginmodal-container {
padding: 30px;
max-width: 350px;
width: 100% !important;
background-color: #F7F7F7;
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 0 35px #080808;
overflow: hidden;
font-family: roboto;
border-radius: 6px;
}
.loginmodal-container h1 {
text-align: center;
font-size: 1.8em;
font-family: roboto;
}
.loginmodal-container input[type=submit] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.loginmodal-container input[type=text], input[type=password] {
height: 44px;
color: black;
font-size: 14px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border:0;
/* border-radius: 2px; */
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
/*.loginmodal-container input[type=text]:hover, input[type=password]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}*/
.loginmodal {
text-align: center;
font-size: 14px;
font-family: 'Arial', sans-serif;
font-weight: 700;
height: 36px;
padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
user-select: none; */
}
.loginmodal-submit {
/* border: 1px solid #3079ed; */
border: 0px;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
padding: 17px 0px;
font-family: roboto;
font-size: 14px;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#4787ed)); */
}
.loginmodal-submit:hover {
/* border: 1px solid #2f5bb7; */
border: 0px;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
/* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d90fe), to(#357ae8)); */
}
.loginmodal-container a {
text-decoration: none;
color: #666;
font-weight: 400;
text-align: center;
display: inline-block;
opacity: 0.6;
transition: opacity ease 0.5s;
}
.login-help{
font-size: 12px;
}
a:hover, a:focus {
color: #FFF;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment