书籍分类筛选搜素列表页面效果代码
代码语言：html
所属分类：布局界面
代码描述：书籍分类筛选搜素列表页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/foundation.min.css">
<style>
/*
* Imports
*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
/*
* Variables
*/
/* Single Line truncation */
/* Multiline truncation */
/*
* Global styles
*/
html,
body,
.main,
.main-container {
height: 100%;
}
body {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #313131;
background: #ecf0f1;
}
.row {
max-width: 1024px;
}
/*
* Typography
*/
body,
p,
a,
li {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
}
a {
color: #219e9a;
}
h2,
h3 {
margin-top: 6px;
margin-bottom: 6px;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
color: #313131;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
margin-bottom: 12px;
font-size: 22px;
line-height: 40px;
color: rgba(49, 49, 49, 0.7);
}
p:not(.author) {
font-size: 15px;
font-weight: 300;
line-height: 1.4;
}
p.author {
margin-bottom: 10px;
letter-spacing: -1px;
font-weight: 400;
color: rgba(49, 49, 49, 0.5);
}
/*
* Button
*/
a.button {
margin-bottom: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
border-radius: 3px;
background-color: rgba(49, 49, 49, 0.5);
}
a.button:hover, a.button:focus {
background-color: #219e9a;
}
/*
* Header
*/
.page-header {
position: relative;
margin-bottom: 55px;
width: 100%;
border-bottom: 1px solid #d2d6d5;
background-color: #fff;
}
.main-logo {
display: inline-block;
padding: 1em;
width: auto;
}
.main-logo a.logo {
display: block;
width: 150px;
height: 40px;
font-size: 30px;
background-color: #fff;
-webkit-transition: background-color 250ms ease-out;
transition: background-color 250ms ease-out;
}
.main-logo a.logo:hover, .main-logo a.logo:focus {
background-color: #ecf0f1;
}
.menu-search {
float: right;
width: calc(100% - 200px);
}
/*
* Search Input
*/
.catalog-search {
position: relative;
margin: 0 20px;
max-width: 275px;
width: calc(100% - 2em);
vertical-align: top;
overflow: hidden;
float: right;
}
.input_field {
position: relative;
display: block;
float: right;
margin-top: 10px;
padding: 14px 7px 0;
width: 100%;
border: none;
border-radius: 0;
color: #313131;
font-weight: normal;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: none;
box-shadow: none;
-webkit-appearance: none;
/* for box shadows to show on iOS */
}
.input_field:focus {
outline: none;
border: none;
background: none;
box-shadow: none;
-webkit-appearance: none;
}
.input_field:focus .input_label-content {
bottom: 20px;
}
.input_label {
position: absolute;
display: inline-block;
bottom: 0;
left: 0;
padding: 0 0.25em;
width: 100%;
height: calc(100% - 1em);
color: #d2d6d5;
font-weight: light;
font-size: 15px;
text-align: left;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.input_label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 10px);
border-bottom: 1px solid rgba(49, 49, 49, 0.45);
}
.input_label:after {
content: '';
position: absolute;
top: 0;
left: 0;
margin-top: 2px;
width: 100%;
height: calc(100% - 10px);
border-bottom: 3px solid #219e9a;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.input_label-content {
position: absolute;
width: 100%;
bottom: 14px;
}
.input_label-search {
position: relative;
display: block;
color: rgba(49, 49, 49, 0.45);
}
.input_label-search:after {
content: '\f002';
position: absolute;
top: 7px;
right: 5px;
font-family: 'fontawesome';
}
.input_field:focus + .input_label::after,
.input--filled .input_label::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input_field:focus + .input_label .input_label-content,
.input--filled .input_label-content {
-webkit-animation: anim-1 0.3s forwards;
animation: anim-1 0.3s forwards;
}
@-webkit-keyframes anim-1 {
50% {
opacity: 0;
-webkit-transform: translate3d(1em, 0, 0);
transform: translate3d(1em, 0, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(-1em, -40%, 0);
transform: translate3d(-1em, -40%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0);
}
}
@keyframes anim-1 {
50% {
opacity: 0;
bottom: 24px;
-webkit-transform: translate3d(5em, 0, 0);
transform: translate3d(5em, 0, 0);
}
51% {
opacity: 0;
bottom: 24px;
-webkit-transform: translate3d(-5em, -40%, 0);
transform: translate3d(-5em, -40%, 0);
}
100% {
opacity: 1;
bottom: 24px;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0);
}
}
/*
* Menu
*/
.main-navigation {
position: relative;
float: right;
margin: 16px 0;
padding: 0 20px;
height: 40px;
border-left: 1px solid #d2d6d5;
}
.main-navigation a {
display: inline-block;
line-height: 40px;
vertical-align: middle;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #313131;
}
.main-navigation a:before {
content: '\f0c9';
position: relative;
display: inline-block;
padding-right: 10px;
font-family: "fontawesome";
font-size: 18px;
font-weight: 400;
color: rgba(49, 49, 49, 0.45);
vertical-align: middle;
}
/*
* Off Canvas Menu
*/
.main-container {
position: relative;
overflow-x: hidden;
}
.main-container.prevent-scroll, .main-container.nav-menu-open {
overflow: hidden;
}
.nav-menu {
position: absolute;
top: 0;
right: 0;
z-index: 100;
visibility: visible;
width: 300px;
height: 100%;
background: #219e9a;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.nav-menu:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
display: none;
}
.nav-menu h2 {
margin: 0;
padding: 1em;
color: rgba(0, 0, 0, 0.4);
text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
font-weight: 300;
font-size: 2em;
}
.nav-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-menu li a {
display: block;
padding: 1em 1em 1em 1.2em;
outline: none;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
color: #f3efe0;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-weight: 400;
-webkit-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
.nav-menu li:first-child a {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2);
}
.nav-menu li:hover {
background: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
color: #fff;
}
.nav-menu-open .nav-menu {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.nav-menu-open .nav-menu:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
/*
* book List
*/
.toolbar {
margin-bottom: 30px;
border-bottom: 1px solid #d2d6d5;
}
.toolbar select {
margin-bottom: 7px;
color: #313131;
font-size: 14px;
border: none;
background-color: transparent;
}
.toolbar .filter-options {
line-height: 40px;
}
.toolbar a.filter-item {
margin-right: 16px;
padding-bottom: 18px;
font-size: 14px;
color: #313131;
border-bottom: 0px solid transparent;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.toolbar a.filter-item:last-child {
margin-right: 0;
}
.toolbar a.filter-item.active {
padding-bottom: 15px;
color: #219e9a;
font-weight: bold;
border-bottom: 3px solid #219e9a;
}
#grid {
margin-bottom: 60px;
}
.book-item {
margin: 15px 0;
padding: 15px;
list-style-type: none;
}
.book-item:after {
content: '';
position: absolute;
top: 0;
right: 15px;
width: calc(100% - 105px);
height: 100%;
border-radius: 3px;
box-shadow: 0 0 0 0 transparent;
background-color: rgba(255, 255, 255, 0);
z-index: -1;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.book-item:hover:after {
box-shadow: 0px 1px 1px 1px rgba(210, 214, 213, 0.5);
background-color: #fff;
}
.book-item:hover .item-img img {
box-shadow: 0px 0px 10px 0px rgba(49, 49, 49, 0.25);
}
.book-item:hover a.button {
background-color: #219e9a;
}
.book-item:hover .bk-bookdefault {
-webkit-transform: rotate3d(0, 1, 0, 25deg);
transform: rotate3d(0, 1, 0, 25deg);
}
.book-item:hover .bk-back {
opacity: 1;
}
.book-item .item-img {
display: inline-block;
float: left;
padding-right: 30px;
}
.book-item .item-img img {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 250ms ease-out;
transition: all 250ms ease-out;
}
.book-item .item-details {
padding-right: 30px;
}
.book-item h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.book-item p:not(.author) {
display: block;
display: -webkit-box;
height: 63px;
/* Fallback for non-webkit */
font-size: 15px;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/*
* Book Rotate
*/
.bk-img {
position: relative;
display: inline-block;
float: left;
padding-right: 30px;
list-style: none;
/* Individual style & artwork */
}
.bk-img .bk-wrapper {
position: relative;
width: 150px;
height: 215px;
float: left;
z-index: 1;
-webkit-perspective: 1400px;
perspective: 1400px;
}
.bk-img .bk-wrapper:last-child {
margin-right: 0;
}
.bk-img .bk-book {
position: absolute;
width: 100%;
height: 215px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.bk-img .bk-book > div,
.bk-img .bk-front > div {
display: block;
position: absolute;
}
.bk-img .bk-front {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
-webkit-transform: translate3d(0, 0, 20px);
transform: translate3d(0, 0, 20px);
z-index: 10;
}
.bk-img .bk-front > div {
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 0 3px 3px 0;
box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
}
.bk-img .bk-front:after {
content: '';
position: absolute;
top: 1px;
bottom: 1px;
left: -1px;
width: 1px;
}
.bk-img .bk-front,
.bk-img .bk-back,
.bk-img .bk-front > div {
width: 150px;
height: 215px;
}
.bk-img .bk-left,
.bk-img .bk-right {
width: 40px;
left: -20px;
}
.bk-img .bk-back {
-webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
box-shadow: 5px 7px 15px rgba(0, 0, 0, 0.3);
border-radius: 3px 0 0 3px;
opacity: 0;
-webkit-transition: opacity 250ms ease-out;
transition: opacity 250ms ease-out;
}
.bk-img .bk-back:after {
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
width: 3px;
background: rgba(0, 0, 0, 0.06);
box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}
.bk-img .bk-left {
height: 215px;
-webkit-transform: rotate3d(0, 1, 0, -90deg);
transform: rotate3d(0, 1, 0, -90deg);
}
.bk-img .bk-left h2 {
width: 215px;
height: 40px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(90deg) translateY(-40px);
transform: rotate(90deg) translateY(-40px);
}
.bk-img .bk-cover {
/*background-image: url(../images/1.png);*/
background-repeat: no-repeat;
background-position: 10px 40px;
}
.bk-img .bk-cover:after {
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
width: 3px;
background: rgba(0, 0, 0, 0.06);
box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}
.bk-img .bk-cover {
background-repeat: no-repeat;
background-position: top left !important;
}
.bk-img .bk-front > div,
.bk-img .bk-left {
background-color: #219e9a;
}
/*
* Lightbox
*/
.main-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(49, 49, 49, 0.65);
}
.main-overlay .overlay-full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-overlay .overlay-details {
position: absolute;
display: block;
z-index: 1;
top: 50%;
left: 50%;
width: 100%;
max-width: 800px;
max-height: 480px;
padding: 40px;
overflow: hidden;
border-radius: 3px;
background-color: #fff;
box-shadow: 0px 2px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main-overlay .overlay-image {
display: inline-block;
margin-right: 30px;
max-width: 275px;
vertical-align: top;
}
.main-overlay .overlay-image img {
position: relative;
display: inline-block;
z-index: 1;
box-shadow: -12px 12px 15px -5px rgba(0, 0, 0, 0.3);
}
.main-overlay .overlay-image .back-color {
position: absolute;
top: 0;
left: 0;
width: 275px;
height: 100%;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: green;
}
.main-overlay .close-overlay-btn {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
opacity: 0.3;
text-indent: -9999px;
-webkit-transition: opacity 250ms ease-out;
transition: opacity 250ms ease-out;
}
.main-overlay .close-overlay-btn:hover {
opacity: 1;
}
.main-overlay .close-overlay-btn:before {
content: ' ';
position: absolute;
left: 15px;
width: 2px;
height: 33px;
background-color: #313131;
}
.main-overlay .close-overlay-btn:after {
content: ' ';
position: absolute;
left: 15px;
width: 2px;
height: 33px;
background-color: #313131;
}
.main-overlay .close-overlay-btn:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.main-overlay .close-overlay-btn:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.main-overlay .back-preview-btn {
position: absolute;
top: 7px;
left: -34px;
width: 30px;
height: 30px;
opacity: 0.3;
text-indent: -9999px;
-webkit-transition: opacity 250ms ease-out;
transition: opacity 250ms ease-out;
}
.main-overlay .back-preview-btn:hover {
opacity: 1;
}
.main-overlay .back-preview-btn:before {
content: ' ';
position: absolute;
left: 15px;
width: 2px;
height: 15px;
background-color: #313131;
}
.main-overlay .back-preview-btn:after {
content: ' ';
position: absolute;
top: 10px;
left: 15px;
width: 2px;
height: 15px;
background-color: #313131;
}
.main-overlay .back-preview-btn:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.main-overlay .back-preview-btn:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.main-overlay .overlay-desc {
display: inline-block;
margin-top: -400px;
width: calc(100% - 320px);
vertical-align: top;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.main-overlay .overlay-desc.activated {
display: inline-block;
margin-top: 0;
}
.main-overlay .overlay-preview {
position: relative;
display: inline-block;
float: right;
margin-top: 40px;
width: calc(100% - 310px);
vertical-align: top;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.main-overlay .overlay-preview.activated {
margin-top: -430px;
}
.main-overlay .preview-content {
padding-right: 24px;
padding-top: 10px;
display: block;
display: -webkit-box;
height: 360px;
/* Fallback for non-webkit */
font-size: 15px;
line-height: 1.5;
-webkit-line-clamp: 16;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
overflow: scroll;
text-overflow: clip;
font-weight: 400;
}
.main-overlay .preview-content h5,
.main-overlay .preview-content p {
font-family: 'Roboto Slab', serif;
}
.main-overlay .preview-content h5 {
font-weight: bold;
}
.main-overlay .preview-content p {
font-weight: normal;
}
.main-overlay .preview-content:before {
content: '';
position: absolute;
left: 0;
top: 40px;
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0);
background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), color-stop(0%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.8)), color-stop(80%, white));
background: linear-gradient(totop,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, white 80%);
}
.main-overlay .preview-content:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background: rgba(255, 255, 255, 0);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(0%, rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.8)), color-stop(80%, white));
background: linear-gradient(tobottom,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, white 80%);
}
.overlay-details {
display: none;
}
/*
* Footer
*/
#footer {
margin-top: 60px;
padding: 15px 0 20px;
border-top: 1px solid #fff;
background-color: rgba(49, 49, 49, 0.5);
}
#footer div,
#footer a,
#footer p {
color: #fff;
font-size: 12px;
text-align: center;
}
</style>
</head>
<body translate="no">
<div id="main-container" class="main-container nav-effect-1">
<nav class="nav-menu nav-effect-1" id="menu-1">
<h2 class="">The Library</h2>
<ul>
<li><a class="" href="#">Checkout</a></li>
<li><a class="" href="#">Return</a></li>
<li><a class="" href="#">About</a></li>
<li><a class="" href="#">Contact</a></li>
</ul>
</nav>
<div class="main clearfix">
<!-- Header Content -->
<header id="header" class="page-header">
<div class="page-header-container row">
<!-- Logo -->
<div class="main-logo">
<a href="#" class="logo">The Library</a>
</div>
<div class="menu-search">
<!-- Main Navigation -->
<div class="main-navigation">
<a href="#">Menu</a>
</div>
<!-- Search -->
<div class="catalog-search">
<input class="shuffle-search input_field " type="search" autocomplete="off" value="" maxlength="128" id="input-search" />
<label class="input_label" for="input-search">
<span class="input_label-content">Search Library</span>
<span class="input_label-search"></span>
</label>
</div>
</div>
</div>
</header>
<!-- Main Section -->
<div class="page-container">
<div class="page-title category-title">
<!-- <h1>Book Viewer</h1> -->
</div>
<section id="book_list">
<div class="toolbar row">
<div class="filter-options small-12 medium-9 columns">
<a href="#" class="filter-item active" data-group="all">All Categories</a>
<a href="#" class="filter-item" data-group="fantasy">Fantasy</a>
<a href="#" class="filter-item" data-group="sci-fi">Sci-Fi</a>
<a href="#" class="filter-item" data-group="classic">Classics</a>
<a href="#" class="filter-item" data-group="fairy">Fairy Tale</a>
<a href="#" class="filter-item" data-group="young">Young Adult</a>
</div>
<div class="small-12 medium-3 columns">
<select class="sort-options">
<option value="" disabled selected>Sort by</option>
<option value="">Featured</option>
<option value="title">Alphabetical</option>
<option value="date-created">Published</option>
</select>
</div>
</div>
<div class="grid-shuffle">
<ul id="grid" class="row">
<li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1937' data-title='Of Mice and Men' data-color='#fcc278'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('//repo.bfw.wiki/bfwrepo/image/5fb5e82a9230f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_190,h_270,/quality,q_90')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Of Mice and Men</h3>
<p class="author">
by John Steinbeck • 1937
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="//repo.bfw.wiki/bfwrepo/image/5fb5e82a9230f.png" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Of Mice and Men</h2>
<p class="author">
by John Steinbeck
</p>
<p class="published">
1937
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br> <br>
</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","young"]' data-date-created='1951' data-title='The Catcher in the Rye' data-color='#009c8b'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('//repo.bfw.wiki/bfwrepo/image/5fb5e85248e7c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_190,h_270,/quality,q_90')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">The Catcher in the Rye</h3>
<p class="author">
by J.D. Salinger • 1951
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="//repo.bfw.wiki/bfwrepo/image/5fb5e85248e7c.png" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">The Catcher in the Rye</h2>
<p class="author">
by J.D. Salinger
</p>
<p class="published">
1951
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br> <br>
</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","sci-fi"]' data-date-created='1949' data-title='1984' data-color='#9c9688'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_3-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">1984</h3>
<p class="author">
by George Orwell • 1949
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_3-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">1984</h2>
<p class="author">
by George Orwell
</p>
<p class="published">
1949
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br> <br>
</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","young"]' data-date-created='1954' data-title='Lord of the Flies' data-color='#db2e0f'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_4-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Lord of the Flies</h3>
<p class="author">
by William Golding • 1954
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_4-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Lord of the Flies</h2>
<p class="author">
by William Golding
</p>
<p class="published">
1954
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br> <br>
</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1925' data-title='The Great Gatsby' data-color='#e3b005'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_5-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">The Great Gatsby</h3>
<p class="author">
by F. Scott Fitzgerald • 1925
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_5-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">The Great Gatsby</h2>
<p class="author">
by F. Scott Fitzgerald
</p>
<p class="published">
1925
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br> <br>
</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1851' data-title='Moby Dick' data-color='#a9afad'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_6-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Moby Dick</h3>
<p class="author">
by Herman Melville • 1851
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_6-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Moby Dick</h2>
<p class="author">
by Herman Melville
</p>
<p class="published">
1851
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br> <br>
</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","sci-fi"]' data-date-created='1962' data-title='A Clockwork Orange' data-color='#fe7b21'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_7-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">A Clockwork Orange</h3>
<p class="author">
by Anthony Burgess • 1962
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_7-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">A Clockwork Orange</h2>
<p class="author">
by Anthony Burgess
</p>
<p class="published">
1962
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br> <br>
</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1835' data-title='The Princess and the Pea' data-color='#aea98c'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_8-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">The Princess and the Pea</h3>
<p class="author">
by Hans Christian Andersen • 1835
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.
</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_8-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">The Princess and the Pea</h2>
<p class="author">
by Hans Christian Andersen
</p>
<p class="published">
1835
</p>
<p class="synopsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luc.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0