"iPad Calendar Login"
Bootstrap 3.1.0 Snippet by DonSinDRom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<!--
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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: