"Bootstrap Bookshelf by Pawan Mall"
Bootstrap 3.3.0 Snippet by pawan

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
<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 ---------->
<div class="container">
<div class="row">
<div class="col-md-4 text-center bookshelf">
<h1 class="heading">Bookshelf by Pawan Mall</h1>
<div class="book-holder">
<div class="book-container">
<div class="book">
<div class="book-cover" >
<div class="cover">
<span class="book-title">Great Book About India</span>
<span class="book-writer">By Pawan Mall</span>
</div>
</div>
<div class="book-spine">
<h1>Book About Delhi</h1>
</div>
</div>
</div>
</div>
<div class="book-holder">
<div class="book-container">
<div class="book">
<div class="book-cover" >
<div class="cover">
<span class="book-title">Great Book About Gorakhpur</span>
<span class="book-writer">By Pawan Mall</span>
</div>
</div>
<div class="book-spine">
<h1>Book About India</h1>
</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
body{
width: 100%;
height: 100%;
background: rgb(242,243,244);
background: -moz-radial-gradient(center, ellipse cover, rgba(242,243,244,1) 0%, rgba(212,213,214,1) 79%, rgba(193,193,193,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(242,243,244,1)), color-stop(79%,rgba(212,213,214,1)), color-stop(100%,rgba(193,193,193,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
background: radial-gradient(ellipse at center, rgba(242,243,244,1) 0%,rgba(212,213,214,1) 79%,rgba(193,193,193,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f3f4', endColorstr='#c1c1c1',GradientType=1 );
}
.heading{
color:#fff;
text-shadow: 1px 0px 5px #000;
padding-top:5%;
margin-bottom:5%;
}
.bookshelf{
background: #ccc;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
margin-top:10px;
padding-bottom:20px;
}
.book-holder {
width: 160px;
display:inline-block;
margin-left:5%;
}
.book-container {
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
perspective: 1300px;
-webkit-transition: 0.75s;
-o-transition: 0.75s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: