"Day 001 - Login Form"
Bootstrap 3.3.0 Snippet by mouse0270

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="login-container"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4"> <div class="row"> <a href="#sign-in" class="btn btn-link active">Sign in</a> <a href="#sign-up" class="btn btn-link">Sign up</a> </div> </div> </div> </div> </section>
html, body { height: 100%; min-height: 1000px; width: 100%; } .login-container { background: transparent url(https://download.unsplash.com/photo-1428953773181-b4cf23cd7195) center center; background-size: cover; height: 100%; padding-top: 60px; width: 100%; } .login-container::before { background: -webkit-radial-gradient(center, ellipse cover, rgba(43,44,78,0.9) 0%,rgba(43,44,78,0.9) 1%,rgba(43,44,78,1) 74%,rgba(43,44,78,1) 75%,rgba(43,44,78,1) 100%); content: ""; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; } .login-container a.btn.btn-link { color: rgb(255, 255, 255); font-size: 180%; margin: 0px 27px; padding: 6px 0px; opacity: 0.7; text-transform: uppercase; } .login-container a.btn.btn-link.active { border-bottom: 2px solid rgb(23, 98, 238); opacity: 1; }

Related: See More


Questions / Comments: