<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="">
<center>
<h1 class="logo" style="color:orange">Login <small class="wellcome">Welcome to our place!</small></h1>
</center>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<center>
<h3 class="panel-title">A place to share knowledge and better understand the worlds</h3>
</center>
</div>
<br>
<div class="panel-body">
<div class="row">
<div class="col-md-5" >
<a href="#" class="google btn"><i class="fa fa-google fa-fw">
</i> Login with Google+
</a><br/><br>
<a href="#" class="fb btn">
<i class="fa fa-facebook fa-fw"></i> Login with Facebook
</a><br/><br>
<p><a>Continue With Email</a>. By signing up you indicate that you have read and agree to the,<a> Terms of Service</a> and <a>Privacy Policy</a>.</p>
</div>
<div class="col-md-7" style="border-left:1px solid #ccc;height:220px">
<form class="">
<fieldset>
<div class="form-group ">
<input id="textinput" name="textinput" type="text" placeholder="Enter User Name" class="form-control ">
</div>
<div class="form-group ">
<input id="textinput" name="textinput" type="text" placeholder="Enter Password" class="form-control ">
</div>
<div class="spacing"><input type="checkbox" name="checkboxes" id="checkboxes-0" value="1"><small> Remember me</small></div>
<div class="spacing"><a href="#"><small> Forgot Password?</small></a><br/></div>
<button id="singlebutton" name="singlebutton" class="btn btn-info btn-sm pull-right">Sign In</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="Email">
<a>Email Us</a>
</div>
<div class="lang">
<p><a href="#" target="_blank">About </a> <a href="#" target="_blank" rel="publisher">Careers </a> <a href="#" target="_blank">Business</a> <a href="#">Sitemap</a> <a href="#" target="_blank">privacy</a> <a href="#" target="_blank" rel="publisher">Terms</a> <a href="#" target="_blank"></a> <a href="#">contact</a> <a href="#" target="_blank">Deutsch</a> <a href="#">Italiano</a> </p>
</div>
</div>
</div>
</div>
body {
background: url(http://dailyhdwallpaper.com/wp-content/uploads/Art-Blue-Background-Design-HD-Wallpaper.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center fixed;
}
p {
color:#CCC;
}
#textinput {
height: 40px !important;
}
.spacing {
padding-top:7px;
padding-bottom:7px;
}
.logo {
color:#CCC;
font-size:50px;
}
.wellcome{
color:#f7370a;;
}
.panel-info > .panel-heading {
background-color:white;
color:gray;
}
.panel-title {
margin-top: 30px;
margin-bottom: 20px;
font-size: 16px;
color: inherit;
}
.lang{
background:#f7f7f7;
padding:10px;
}
.lang a{
color:gray;
padding:13px
}
.Email{
background:white;
border:1px solid #ccc;
text-align:center;
margin-top:-20px;
padding:10px;
cursor:pointer;
}
/* add appropriate colors to fb, twitter and google buttons */
.fb {
background-color: #3B5998;
color: white;
width:100%;
height:40px;
text-align:center;
}
.google {
background-color: #dd4b39;
color: white;
width:100%;
height:40px;
text-align:center;
}