| Server IP : 103.65.238.20 / Your IP : 10.0.0.10 Web Server : Apache System : Linux localhost.localdomain 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64 User : www ( 1000) PHP Version : 7.3.32 Disable Function : passthru,exec,system,chroot,chgrp,chown,shell_exec,popen,proc_open,pcntl_exec,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,imap_open,apache_setenv MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /www/wwwroot/jdih/frontend/web/libraria/ |
Upload File : |
<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- Meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<!-- Title -->
<title>..:: LIBRARIA ::..</title>
<!-- Favicon -->
<link href="images/favicon.ico" rel="icon" type="image/x-icon" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i%7CLato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Mobile Menu -->
<link href="css/mmenu.css" rel="stylesheet" type="text/css" />
<link href="css/mmenu.positioning.css" rel="stylesheet" type="text/css" />
<!-- Accordion Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/jquery.accordion.css">
<!-- Stylesheet -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Start: Header Section -->
<header id="header-v1" class="navbar-wrapper inner-navbar-wrapper">
<div class="container">
<div class="row">
<nav class="navbar navbar-default">
<div class="row">
<div class="col-md-3">
<div class="navbar-header">
<div class="navbar-brand">
<h1>
<a href="index-2.html">
<img src="images/libraria-logo-v1.png" alt="LIBRARIA" />
</a>
</h1>
</div>
</div>
</div>
<div class="col-md-9">
<!-- Header Topbar -->
<div class="header-topbar hidden-sm hidden-xs">
<div class="row">
<div class="col-sm-6">
<div class="topbar-info">
<a href="tel:+61-3-8376-6284"><i class="fa fa-phone"></i>+61-3-8376-6284</a>
<span>/</span>
<a href="mailto:support@libraria.com"><i class="fa fa-envelope"></i>support@libraria.com</a>
</div>
</div>
<div class="col-sm-6">
<div class="topbar-links">
<a href="signin.html"><i class="fa fa-lock"></i>Login / Register</a>
<span>|</span>
<div class="header-cart dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="fa fa-shopping-cart"></i>
<small>0</small>
</a>
<div class="dropdown-menu cart-dropdown">
<ul>
<li class="clearfix">
<img src="images/header-cart-image-01.jpg" alt="cart item" />
<div class="item-info">
<div class="name">
<a href="#">The Great Gatsby</a>
</div>
<div class="author"><strong>Author:</strong> F. Scott Fitzgerald</div>
<div class="price">1 X $10.00</div>
</div>
<a class="remove" href="#"><i class="fa fa-trash-o"></i></a>
</li>
<li class="clearfix">
<img src="images/header-cart-image-02.jpg" alt="cart item" />
<div class="item-info">
<div class="name">
<a href="#">The Great Gatsby</a>
</div>
<div class="author"><strong>Author:</strong> F. Scott Fitzgerald</div>
<div class="price">1 X $10.00</div>
</div>
<a class="remove" href="#"><i class="fa fa-trash-o"></i></a>
</li>
<li class="clearfix">
<img src="images/header-cart-image-03.jpg" alt="cart item" />
<div class="item-info">
<div class="name">
<a href="#">The Great Gatsby</a>
</div>
<div class="author"><strong>Author:</strong> F. Scott Fitzgerald</div>
<div class="price">1 X $10.00</div>
</div>
<a class="remove" href="#"><i class="fa fa-trash-o"></i></a>
</li>
</ul>
<div class="cart-total">
<div class="title">SubTotal</div>
<div class="price">$30.00</div>
</div>
<div class="cart-buttons">
<a href="cart.html" class="btn btn-dark-gray">View Cart</a>
<a href="checkout.html" class="btn btn-primary">Checkout</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-collapse hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a data-toggle="dropdown" class="dropdown-toggle disabled" href="index-2.html">Home</a>
<ul class="dropdown-menu">
<li><a href="index-2.html">Home V1</a></li>
<li><a href="home-v2.html">Home V2</a></li>
<li><a href="home-v3.html">Home V3</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle disabled" href="books-media-list-view.html">Books & Media</a>
<ul class="dropdown-menu">
<li><a href="books-media-list-view.html">Books & Media List View</a></li>
<li><a href="books-media-gird-view-v1.html">Books & Media Grid View V1</a></li>
<li><a href="books-media-gird-view-v2.html">Books & Media Grid View V2</a></li>
<li><a href="books-media-detail-v1.html">Books & Media Detail V1</a></li>
<li><a href="books-media-detail-v2.html">Books & Media Detail V2</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle disabled" href="news-events-list-view.html">News & Events</a>
<ul class="dropdown-menu">
<li><a href="news-events-list-view.html">News & Events List View</a></li>
<li><a href="news-events-detail.html">News & Events Detail</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle disabled" href="#">Pages</a>
<ul class="dropdown-menu">
<li><a href="cart.html">Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="signin.html">Signin/Register</a></li>
<li><a href="404.html">404/Error</a></li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle disabled" href="blog.html">Blog</a>
<ul class="dropdown-menu">
<li><a href="blog.html">Blog Grid View</a></li>
<li><a href="blog-detail.html">Blog Detail</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="mobile-menu hidden-lg hidden-md">
<a href="#mobile-menu"><i class="fa fa-navicon"></i></a>
<div id="mobile-menu">
<ul>
<li class="mobile-title">
<h4>Navigation</h4>
<a href="#" class="close"></a>
</li>
<li>
<a href="index-2.html">Home</a>
<ul>
<li><a href="index-2.html">Home V1</a></li>
<li><a href="home-v2.html">Home V2</a></li>
<li><a href="home-v3.html">Home V3</a></li>
</ul>
</li>
<li>
<a href="books-media-list-view.html">Books & Media</a>
<ul>
<li><a href="books-media-list-view.html">Books & Media List View</a></li>
<li><a href="books-media-gird-view-v1.html">Books & Media Grid View V1</a></li>
<li><a href="books-media-gird-view-v2.html">Books & Media Grid View V2</a></li>
<li><a href="books-media-detail-v1.html">Books & Media Detail V1</a></li>
<li><a href="books-media-detail-v2.html">Books & Media Detail V2</a></li>
</ul>
</li>
<li>
<a href="news-events-list-view.html">News & Events</a>
<ul>
<li><a href="news-events-list-view.html">News & Events List View</a></li>
<li><a href="news-events-detail.html">News & Events Detail</a></li>
</ul>
</li>
<li>
<a href="#">Pages</a>
<ul>
<li><a href="cart.html">Cart</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="signin.html">Signin/Register</a></li>
<li><a href="404.html">404/Error</a></li>
</ul>
</li>
<li>
<a href="blog.html">Blog</a>
<ul>
<li><a href="blog.html">Blog Grid View</a></li>
<li><a href="blog-detail.html">Blog Detail</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<!-- End: Header Section -->
<!-- Start: Page Banner -->
<section class="page-banner services-banner">
<div class="container">
<div class="banner-header">
<h2>Books & Media Listing</h2>
<span class="underline center"></span>
<p class="lead">Proin ac eros pellentesque dolor pharetra tempo.</p>
</div>
<div class="breadcrumb">
<ul>
<li><a href="index-2.html">Home</a></li>
<li>Books & Media</li>
</ul>
</div>
</div>
</section>
<!-- End: Page Banner -->
<!-- Start: Products Section -->
<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main" class="site-main">
<div class="books-media-gird">
<div class="container">
<div class="row">
<!-- Start: Search Section -->
<section class="search-filters">
<div class="container">
<div class="filter-box">
<h3>What are you looking for at the library?</h3>
<form action="http://libraria.demo.presstigers.com/index.html" method="get">
<div class="col-md-4 col-sm-6">
<div class="form-group">
<label class="sr-only" for="keywords">Search by Keyword</label>
<input class="form-control" placeholder="Search by Keyword" id="keywords" name="keywords" type="text">
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<select name="catalog" id="catalog" class="form-control">
<option>Search the Catalog</option>
<option>Catalog 01</option>
<option>Catalog 02</option>
<option>Catalog 03</option>
<option>Catalog 04</option>
<option>Catalog 05</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<select name="category" id="category" class="form-control">
<option>All Categories</option>
<option>Category 01</option>
<option>Category 02</option>
<option>Category 03</option>
<option>Category 04</option>
<option>Category 05</option>
</select>
</div>
</div>
<div class="col-md-2 col-sm-6">
<div class="form-group">
<input class="form-control" type="submit" value="Search">
</div>
</div>
</form>
</div>
</div>
</section>
<!-- End: Search Section -->
</div>
<div class="row">
<div class="col-md-9 col-md-push-3">
<div class="filter-options margin-list">
<div class="row">
<div class="col-md-4 col-sm-4">
<select name="orderby">
<option selected="selected">Default sorting</option>
<option>Sort by popularity</option>
<option>Sort by rating</option>
<option>Sort by newness</option>
<option>Sort by price</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<div class="filter-result">Showing items 1 to 9 of 19 total</div>
</div>
<div class="col-md-3 col-sm-3 pull-right">
<div class="filter-toggle">
<a href="books-media-gird-view-v1.html" class="active"><i class="glyphicon glyphicon-th-large"></i></a>
<a href="books-media-list-view.html"><i class="glyphicon glyphicon-th-list"></i></a>
</div>
</div>
</div>
</div>
<div class="books-gird">
<ul>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-01.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon blue-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-02.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon blue-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-03.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon red-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-04.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon yellow-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-05.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon red-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-06.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon green-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-07.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon light-green-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-08.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon green-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-09.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon yellow-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-10.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon light-green-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-11.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon yellow-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
<li>
<figure>
<img src="images/books-media/gird-view/book-media-grid-12.jpg" alt="Book">
<figcaption>
<p><strong>The Great Gatsby</strong></p>
<p><strong>Author:</strong> F. Scott Fitzgerald</p>
</figcaption>
</figure>
<div class="book-list-icon red-icon"></div>
<div class="single-book-box">
<div class="post-detail">
<div class="books-social-sharing">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-rss"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="optional-links">
<ul>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Add TO CART">
<i class="fa fa-shopping-cart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Like">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Mail"><i class="fa fa-envelope"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Search">
<i class="fa fa-search"></i>
</a>
</li>
<li>
<a href="#" target="_blank" data-toggle="blog-tags" data-placement="top" title="Print">
<i class="fa fa-print"></i>
</a>
</li>
</ul>
</div>
<header class="entry-header">
<h3 class="entry-title"><a href="books-media-detail-v1.html">The Great Gatsby</a></h3>
<ul>
<li><strong>Author:</strong> F. Scott Fitzgerald</li>
<li><strong>ISBN:</strong> 9781581573268</li>
</ul>
</header>
<div class="entry-content">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<footer class="entry-footer">
<a class="btn btn-primary" href="books-media-detail-v1.html">Read More</a>
</footer>
</div>
</div>
</li>
</ul>
</div>
<nav class="navigation pagination text-center">
<h2 class="screen-reader-text">Posts navigation</h2>
<div class="nav-links">
<a class="prev page-numbers" href="#."><i class="fa fa-long-arrow-left"></i> Previous</a>
<a class="page-numbers" href="#.">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="#.">3</a>
<a class="page-numbers" href="#.">4</a>
<a class="next page-numbers" href="#.">Next <i class="fa fa-long-arrow-right"></i></a>
</div>
</nav>
</div>
<div class="col-md-3 col-md-pull-9">
<aside id="secondary" class="sidebar widget-area" data-accordion-group>
<div class="widget widget_related_search open" data-accordion>
<h4 class="widget-title" data-control>Related Searches</h4>
<div data-content>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Subject</h5>
<div class="widget_categories" data-content>
<ul>
<li><a href="#">Love stories <span>(18)</span></a></li>
<li><a href="#">Texas <span>(04)</span></a></li>
<li><a href="#">Rich people <span>(03)</span></a></li>
<li><a href="#">Humorous stories <span>(02)</span></a></li>
<li><a href="#">Widows <span>(02)</span></a></li>
<li><a href="#">Women <span>(11)</span></a></li>
<li><a href="#">Babysitters <span>(25)</span></a></li>
<li><a href="#">Law firms <span>(09)</span></a></li>
</ul>
</div>
</div>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Authors</h5>
<div class="widget_categories" data-content>
<ul>
<li><a href="#">Love stories <span>(18)</span></a></li>
<li><a href="#">Texas <span>(04)</span></a></li>
<li><a href="#">Rich people <span>(03)</span></a></li>
<li><a href="#">Humorous stories <span>(02)</span></a></li>
<li><a href="#">Widows <span>(02)</span></a></li>
<li><a href="#">Women <span>(11)</span></a></li>
<li><a href="#">Babysitters <span>(25)</span></a></li>
<li><a href="#">Law firms <span>(09)</span></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Series</h5>
<div class="widget_categories" data-content>
<ul>
<li><a href="#">Love stories <span>(18)</span></a></li>
<li><a href="#">Texas <span>(04)</span></a></li>
<li><a href="#">Rich people <span>(03)</span></a></li>
<li><a href="#">Humorous stories <span>(02)</span></a></li>
<li><a href="#">Widows <span>(02)</span></a></li>
<li><a href="#">Women <span>(11)</span></a></li>
<li><a href="#">Babysitters <span>(25)</span></a></li>
<li><a href="#">Law firms <span>(09)</span></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Other Searches</h5>
<div class="widget_categories" data-content>
<ul>
<li><a href="#">Love stories <span>(18)</span></a></li>
<li><a href="#">Texas <span>(04)</span></a></li>
<li><a href="#">Rich people <span>(03)</span></a></li>
<li><a href="#">Humorous stories <span>(02)</span></a></li>
<li><a href="#">Widows <span>(02)</span></a></li>
<li><a href="#">Women <span>(11)</span></a></li>
<li><a href="#">Babysitters <span>(25)</span></a></li>
<li><a href="#">Law firms <span>(09)</span></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="widget widget_narrow_search" data-accordion>
<h4 class="widget-title" data-control>Narrow your search</h4>
<div data-content>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Type of Material</h5>
<div class="widget_material" data-content>
<form action="#">
<label><input type="checkbox" name="material" value="books"> Books</label>
<label><input type="checkbox" name="material" value="electronic" checked> Electronic Resources</label>
<label><input type="checkbox" name="material" value="ebooks"> ebooks</label>
<label><input type="checkbox" name="material" value="soundrecording" checked> Sound Recording</label>
<label><input type="checkbox" name="material" value="largeprint"> Large Print</label>
<label><input type="checkbox" name="material" value="audioebooks" checked> Audio eBooks</label>
</form>
</div>
</div>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Publishing Date </h5>
<div class="widget widget_material" data-content>
<form action="#">
<label><input type="checkbox" name="material" value="books"> Books</label>
<label><input type="checkbox" name="material" value="electronic" checked> Electronic Resources</label>
<label><input type="checkbox" name="material" value="ebooks"> ebooks</label>
<label><input type="checkbox" name="material" value="soundrecording" checked> Sound Recording</label>
<label><input type="checkbox" name="material" value="largeprint"> Large Print</label>
<label><input type="checkbox" name="material" value="audioebooks" checked> Audio eBooks</label>
</form>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Popularity </h5>
<div class="widget widget_material" data-content>
<form action="#">
<label><input type="checkbox" name="material" value="books"> Books</label>
<label><input type="checkbox" name="material" value="electronic" checked> Electronic Resources</label>
<label><input type="checkbox" name="material" value="ebooks"> ebooks</label>
<label><input type="checkbox" name="material" value="soundrecording" checked> Sound Recording</label>
<label><input type="checkbox" name="material" value="largeprint"> Large Print</label>
<label><input type="checkbox" name="material" value="audioebooks" checked> Audio eBooks</label>
</form>
</div>
<div class="clearfix"></div>
</div>
<div data-accordion>
<h5 class="widget-sub-title" data-control>Language </h5>
<div class="widget widget_material" data-content>
<form action="#">
<label><input type="checkbox" name="material" value="books"> Books</label>
<label><input type="checkbox" name="material" value="electronic" checked> Electronic Resources</label>
<label><input type="checkbox" name="material" value="ebooks"> ebooks</label>
<label><input type="checkbox" name="material" value="soundrecording" checked> Sound Recording</label>
<label><input type="checkbox" name="material" value="largeprint"> Large Print</label>
<label><input type="checkbox" name="material" value="audioebooks" checked> Audio eBooks</label>
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="widget widget_recent_releases">
<h4 class="widget-title">New Releases</h4>
<ul>
<li><a href="#">Books</a></li>
<li><a href="#">eBooks</a></li>
<li><a href="#">DVDS</a></li>
<li><a href="#">Magazines</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">eAudio</a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="widget widget_recent_entries">
<h4 class="widget-title">On-Order Items</h4>
<ul>
<li>
<figure>
<img src="images/order-item-01.jpg" alt="product" />
</figure>
<a href="#">The Sonic Boom</a>
<span class="price"><strong>Author:</strong> F. Scott Fitzgerald</span>
<span><strong>ISBN:</strong> 978158157</span>
<div class="rating">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<div class="clearfix"></div>
</li>
<li>
<figure>
<img src="images/order-item-02.jpg" alt="product" />
</figure>
<a href="#">The Sonic Boom</a>
<span class="price"><strong>Author:</strong> F. Scott Fitzgerald</span>
<span><strong>ISBN:</strong> 978158157</span>
<div class="rating">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<div class="clearfix"></div>
</li>
<li>
<figure>
<img src="images/order-item-03.jpg" alt="product" />
</figure>
<a href="#">The Sonic Boom</a>
<span class="price"><strong>Author:</strong> F. Scott Fitzgerald</span>
<span><strong>ISBN:</strong> 978158157</span>
<div class="rating">
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<div class="clearfix"></div>
</li>
</ul>
<div class="clearfix"></div>
</div>
</aside>
</div>
</div>
</div>
<!-- Start: Staff Picks -->
<section class="team staff-picks">
<div class="container">
<div class="center-content">
<h2 class="section-title">Staff Picks</h2>
<span class="underline center"></span>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="team-list">
<div class="team-member">
<figure>
<img src="images/books-media/staff-pick/staff-picks-01.jpg" alt="Staff Pick" />
</figure>
<div class="content-block">
<div class="member-info">
<div class="member-thumb">
<img src="images/books-media/staff-pick/gail.jpg" alt="Katherine">
</div>
<div class="member-content">
<span class="designation">Downtown & Business</span>
<h4>The Collector</h4>
<ul class="social">
<li>
<a href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-skype"></i>
</a>
</li>
</ul>
</div>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here...</p>
<a class="btn btn-primary" href="#">Read More</a>
</div>
</div>
</div>
<div class="team-member">
<figure>
<img src="images/books-media/staff-pick/staff-picks-02.jpg" alt="Staff Pick" />
</figure>
<div class="content-block">
<div class="member-info">
<div class="member-thumb">
<img src="images/books-media/staff-pick/katherine.jpg" alt="Katherine">
</div>
<div class="member-content">
<span class="designation">Katherine, West End</span>
<h4>Mongolia</h4>
<ul class="social">
<li>
<a href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-skype"></i>
</a>
</li>
</ul>
</div>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here...</p>
<a class="btn btn-primary" href="#">Read More</a>
</div>
</div>
</div>
<div class="team-member">
<figure>
<img src="images/books-media/staff-pick/staff-picks-03.jpg" alt="Staff Pick" />
</figure>
<div class="content-block">
<div class="member-info">
<div class="member-thumb">
<img src="images/books-media/staff-pick/chris.jpg" alt="Katherine">
</div>
<div class="member-content">
<span class="designation">Chris, East Liberty</span>
<h4>The Revolution</h4>
<ul class="social">
<li>
<a href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-facebook-f"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#" target="_blank">
<i class="fa fa-skype"></i>
</a>
</li>
</ul>
</div>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here...</p>
<a class="btn btn-primary" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End: Staff Picks -->
</div>
</main>
</div>
</div>
<!-- End: Products Section -->
<!-- Start: Social Network -->
<section class="social-network section-padding">
<div class="container">
<div class="center-content">
<h2 class="section-title">Follow Us</h2>
<span class="underline center"></span>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<ul>
<li>
<a class="facebook" href="#" target="_blank">
<span>
<i class="fa fa-facebook-f"></i>
</span>
</a>
</li>
<li>
<a class="twitter" href="#" target="_blank">
<span>
<i class="fa fa-twitter"></i>
</span>
</a>
</li>
<li>
<a class="google" href="#" target="_blank">
<span>
<i class="fa fa-google-plus"></i>
</span>
</a>
</li>
<li>
<a class="rss" href="#" target="_blank">
<span>
<i class="fa fa-rss"></i>
</span>
</a>
</li>
<li>
<a class="linkedin" href="#" target="_blank">
<span>
<i class="fa fa-linkedin"></i>
</span>
</a>
</li>
<li>
<a class="youtube" href="#" target="_blank">
<span>
<i class="fa fa-youtube"></i>
</span>
</a>
</li>
</ul>
</div>
</section>
<!-- End: Social Network -->
<!-- Start: Footer -->
<footer class="site-footer">
<div class="container">
<div id="footer-widgets">
<div class="row">
<div class="col-md-4 col-sm-6 widget-container">
<div id="text-2" class="widget widget_text">
<h3 class="footer-widget-title">About Libraria</h3>
<span class="underline left"></span>
<div class="textwidget">
It is a long established fact that a reader will be distracted by the readable content of a page when looking.
</div>
<address>
<div class="info">
<i class="fa fa-location-arrow"></i>
<span>21 King Street, Melbourne, Victoria 3000 Australia</span>
</div>
<div class="info">
<i class="fa fa-envelope"></i>
<span><a href="mailto:support@libraria.com">support@libraria.com</a></span>
</div>
<div class="info">
<i class="fa fa-phone"></i>
<span><a href="tel:012-345-6789">+ 012-345-6789</a></span>
</div>
</address>
</div>
</div>
<div class="col-md-2 col-sm-6 widget-container">
<div id="nav_menu-2" class="widget widget_nav_menu">
<h3 class="footer-widget-title">Quick Links</h3>
<span class="underline left"></span>
<div class="menu-quick-links-container">
<ul id="menu-quick-links" class="menu">
<li><a href="#">Library News</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Meet Our Staff</a></li>
<li><a href="#">Board of Trustees</a></li>
<li><a href="#">Budget</a></li>
<li><a href="#">Annual Report</a></li>
</ul>
</div>
</div>
</div>
<div class="clearfix hidden-lg hidden-md hidden-xs tablet-margin-bottom"></div>
<div class="col-md-2 col-sm-6 widget-container">
<div id="text-4" class="widget widget_text">
<h3 class="footer-widget-title">Timing</h3>
<span class="underline left"></span>
<div class="timming-text-widget">
<time datetime="2017-02-13">Mon - Thu: 9 am - 9 pm</time>
<time datetime="2017-02-13">Fri: 9 am - 6 pm</time>
<time datetime="2017-02-13">Sat: 9 am - 5 pm</time>
<time datetime="2017-02-13">Sun: 1 pm - 6 pm</time>
<ul>
<li><a href="#">Closings</a></li>
<li><a href="#">Branches</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 widget-container">
<div class="widget twitter-widget">
<h3 class="footer-widget-title">Latest Tweets</h3>
<span class="underline left"></span>
<div id="twitter-feed">
<ul>
<li>
<p><a href="#">@TemplateLibraria</a> Sed ut perspiciatis unde omnis iste natus error sit voluptatem. <a href="#">template-libraria.com</a></p>
</li>
<li>
<p><a href="#">@TemplateLibraria</a> Sed ut perspiciatis unde omnis iste natus error sit voluptatem. <a href="#">template-libraria.com</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="footer-text col-md-3">
<p><a target="_blank" href="https://www.templateshub.net">Templates Hub</a></p>
</div>
<div class="col-md-9 pull-right">
<ul>
<li><a href="index-2.html">Home</a></li>
<li><a href="books-media-list-view.html">Books & Media</a></li>
<li><a href="news-events-list-view.html">News & Events</a></li>
<li><a href="#">Kids & Teens</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="#">Research</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- End: Footer -->
<!-- jQuery Latest Version 1.x -->
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- jQuery UI -->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<!-- jQuery Easing -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Mobile Menu -->
<script type="text/javascript" src="js/mmenu.min.js"></script>
<!-- Harvey - State manager for media queries -->
<script type="text/javascript" src="js/harvey.min.js"></script>
<!-- Waypoints - Load Elements on View -->
<script type="text/javascript" src="js/waypoints.min.js"></script>
<!-- Facts Counter -->
<script type="text/javascript" src="js/facts.counter.min.js"></script>
<!-- MixItUp - Category Filter -->
<script type="text/javascript" src="js/mixitup.min.js"></script>
<!-- Owl Carousel -->
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<!-- Accordion -->
<script type="text/javascript" src="js/accordion.min.js"></script>
<!-- Responsive Tabs -->
<script type="text/javascript" src="js/responsive.tabs.min.js"></script>
<!-- Responsive Table -->
<script type="text/javascript" src="js/responsive.table.min.js"></script>
<!-- Masonry -->
<script type="text/javascript" src="js/masonry.min.js"></script>
<!-- Carousel Swipe -->
<script type="text/javascript" src="js/carousel.swipe.min.js"></script>
<!-- bxSlider -->
<script type="text/javascript" src="js/bxslider.min.js"></script>
<!-- Custom Scripts -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>