Here is my HTML code for a login form:
<div class="middle-box text-center loginscreen">
<div>
<form class="" role="form" action="index.html">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required="">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="">
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
<a href="#"><small>Forgot password?</small></a>
</div>
</div>
<!-- footer -->
<footer>
<div class="container">
<div class="col-md-3">
<p><a class="navbar-brand" href="#">Ali Academy</a></p>
</div><!-- end of col -->
<div class="col-md-6">
<nav>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div><!-- end of col -->
<div class="col-md-3">
<p class="pull-right">© 2015 Ali Academy</p>
</div><!-- end of col -->
</div><!-- end of container -->
</footer>
This is the CSS included:
.middle-box {
height: 400px;
width: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -200px;
z-index: 100;
}
.lockscreen.middle-box {
width: 200px;
margin-left: -100px;
margin-top: -190px;
}
.loginscreen.middle-box {
width: 300px;
margin-left: -150px;
margin-top: -200px;
}
/* FOOTER */
footer {
background: #263949;
color: white;
padding: 20px 0px 0px;
font-size: 12px;
}
footer p {
margin: 0px;
}
footer a:link, footer a:visited {
color: white;
}
footer a:hover {
color: #dd5638;
}
The issues I am facing on the browser include:
https://i.sstatic.net/PhFEE.png
I would appreciate any help with this matter. Thank you.