"library "
Bootstrap 3.3.0 Snippet by S-sohofi

Post to Facebook Tweet this

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="overally"></div>
<div class="container">
<div class="row library">
<div class="col-xs-4 col-md-2">
<ul class="bk-list clearfix book-list">
<li>
<div class="bk-book book-1 bk-bookdefault bk-bookview">
<div class="bk-front">
<div class="bk-cover-back"></div>
<div class="bk-cover">
</div>
</div>
<div class="bk-page">
<div class="bk-content bk-content-current">
<p>بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن
الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم
الله
الرحمن الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم
بسم
الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم
الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم
الله
الرحمن الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم
بسم
الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم
الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم
الله
الرحمن الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم
بسم
الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم
الرحیم بسم الله الرحمن الرحیم بسم الله الرحمن الرحیم بسم
الله
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
.container {
background-color: #f9efdf;
padding: 0 25px 25px;
min-height: 100vh;
box-shadow: inset 0px 0px 10px #d6ad6f;
}
.col-md-2 {
z-index: 9;
transition: 1s;
padding: 0px 20px;
position: relative;
display: block;
right:auto;
top:0px;
transform-origin: top left;
transition: 0.7s;
}
.col-md-2.centering:not:hover {
transform: scale(1.1);
transition: all 0.5s;
z-index: 10;
position: relative;
top: 0;
right:0;
}
.book {
padding: 30px 0 0 0;
margin: auto;
z-index: 99
}
.bk-list:before { /* Just to give a little puddle of a shadow without adding another element */
content: '';
display: block;
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
var Books = (function () {
var $books = $('.book-list > li > div.bk-book'),
booksCount = $books.length,
$mbook = $('.library');
$mbook.find('.col-md-2').on('click',function () {
$('.overally').toggle();
$(this).toggleClass('centering');
});
function init() {
$books.each(function () {
var $book = $(this),
$other = $books.not($book),
$parent = $book.parent(),
$page = $book.children('div.bk-page'),
$bookview = $parent.find('.bk-bookview'),
$content = $page.children('div.bk-content'), current = 0;
$parent.find('button.bk-bookback').on('click', function () {
$bookview.removeClass('bk-active');
if ($book.data('flip')) {
$book.data({opened: false, flip: false}).removeClass('bk-viewback').addClass('bk-bookdefault');
}
else {
$book.data({
opened: false,
flip: true
}).removeClass('bk-viewinside bk-bookdefault').addClass('bk-viewback');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Bootstrap Wizard

Questions / Comments: