<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; }