"Pageflip Moleskin"
Bootstrap 3.3.0 Snippet by sergioaclo

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Moleskine Notebook with jQuery Booklet</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Moleskine Notebook with jQuery Booklet" />
<meta name="keywords" content="jquery, book, flip, pages, moleskine, booklet, plugin, css3 "/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://www.sergioaclo.com/test-delete/booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.sergioaclo.com/test-delete/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="http://www.sergioaclo.com/test-delete/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="http://www.sergioaclo.com/test-delete/cufon/cufon-yui.js" type="text/javascript"></script>
<script src="http://www.sergioaclo.com/test-delete/cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script src="http://www.sergioaclo.com/test-delete/cufon/Note_this_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,p,.b-counter');
Cufon.replace('.book_wrapper a', {hover:true});
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
</script>
</head>
<body>
<h1 class="title"><center>Moleskine Notebook with jQuery Booklet</center></h1>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
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
*{
margin:0;
padding:0;
}
body{
background:#ccc url(../images/wood.jpg) repeat top left;
font-family: Arial, Helvetica, sans-serif;
color:#444;
font-size:12px;
color: #000;
}
h1{
color:#2F1B0C;
font-size:40px;
margin:20px 0px 0px 20px;
}
span.reference{
font-family:Arial;
display:block;
font-size:12px;
text-align:center;
margin-bottom:10px;
}
span.reference a{
color:#000;
text-transform:uppercase;
text-decoration:none;
margin:0px 20px;
}
span.reference a:hover{
color:#ddd;
}
/* Booklet jQuery Plugin Style*/
.booklet{
-moz-box-shadow:0px 0px 1px #fff;
-webkit-box-shadow:0px 0px 1px #fff;
box-shadow:0px 0px 1px #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit PRO

Questions / Comments: