"iPad Calendar Login"
Bootstrap 3.1.0 Snippet by DonSinDRom

<!-- Inspired by http://dribbble.com/shots/917819-iPad-Calendar-Login?list=shots&sort=views&timeframe=ever&offset=461 --> <div class="jumbotron"> <div class="container"> <span class="glyphicon glyphicon-list-alt"></span> <h2>Calendar</h2> <div class="box"> <input type="text" placeholder="username"> <input type="password" placeholder="password"> <button class="btn btn-default full-width"><span class="glyphicon glyphicon-ok"></span></button> </div> </div> </div>
/* Inspired by http://dribbble.com/shots/917819-iPad-Calendar-Login?list=shots&sort=views&timeframe=ever&offset=461 */ body { background: url(http://habrastorage.org/files/c9c/191/f22/c9c191f226c643eabcce6debfe76049d.jpg); } .jumbotron { text-align: center; width: 30rem; border-radius: 0.5rem; top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 4rem auto; background-color: #fff; padding: 2rem; } .container .glyphicon-list-alt { font-size: 10rem; margin-top: 3rem; color: #f96145; } input { width: 100%; margin-bottom: 1.4rem; padding: 1rem; background-color: #ecf2f4; border-radius: 0.2rem; border: none; } h2 { margin-bottom: 3rem; font-weight: bold; color: #ababab; } .btn { border-radius: 0.2rem; } .btn .glyphicon { font-size: 3rem; color: #fff; } .full-width { background-color: #8eb5e2; width: 100%; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .box { position: absolute; bottom: 0; left: 0; margin-bottom: 3rem; margin-left: 3rem; margin-right: 3rem; }

Similar snippets: See More


Zacharia Samuel Grierson 2014-06-04 11:54:58
    Wonderful, but breaks on my site.
Benny roger 2014-08-03 09:34:57
    Thanks. It works fine
Michael Calkins 2014-08-23 16:11:51
    Probably one of the sexiest logins I've seen ;)
bphilipnyc 2014-10-03 14:40:50
    I really liked this at first, but then I realized that I didn't see
options for "Forgot Password" or a "Remember Me" checkbox. I realize
that may clutter things a bit, but the login page is where users
typically expect to see those items.

Commenting will be back soon.