4188 lines
159 KiB
HTML
4188 lines
159 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Template: Sepia - Photography Portfolio HTML Website Template
|
||
|
|
Author: Themetorium
|
||
|
|
URL: https://themetorium.net
|
||
|
|
-->
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<title>Portfolio - Sepia - Photography Portfolio HTML Website Template</title>
|
||
|
|
|
||
|
|
<!-- Meta -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="description" content="Responsive Photography HTML5 Website Template">
|
||
|
|
<meta name="keywords" content="HTML5, CSS3, Bootsrtrap, Responsive, Photography, Portfolio, Template, Theme, Website, Themetorium" />
|
||
|
|
<meta name="author" content="themetorium.net">
|
||
|
|
|
||
|
|
<!-- Mobile Metas -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
<!-- Favicon (http://www.favicon-generator.org/) -->
|
||
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
||
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
||
|
|
|
||
|
|
<!-- Google Analytics (https://analytics.google.com/) -->
|
||
|
|
<!-- Add your Google Analytics code here -->
|
||
|
|
|
||
|
|
<!-- Google fonts (https://www.google.com/fonts) -->
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet"> <!-- Global font -->
|
||
|
|
|
||
|
|
<!-- Bootstrap CSS (http://getbootstrap.com) -->
|
||
|
|
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css"> <!-- bootstrap CSS (http://getbootstrap.com) -->
|
||
|
|
|
||
|
|
<!-- Libs and Plugins CSS -->
|
||
|
|
<link rel="stylesheet" href="assets/vendor/animsition/css/animsition.min.css"> <!-- Animsition CSS (http://git.blivesta.com/animsition/) -->
|
||
|
|
<link rel="stylesheet" href="assets/vendor/fontawesome/css/fontawesome-all.min.css"> <!-- Font Icons CSS (https://fontawesome.com) Free version! -->
|
||
|
|
<link rel="stylesheet" href="assets/vendor/lightgallery/css/lightgallery.min.css"> <!-- lightGallery CSS (http://sachinchoolur.github.io/lightGallery) -->
|
||
|
|
<link rel="stylesheet" href="assets/vendor/owl-carousel/css/owl.carousel.min.css"> <!-- Owl Carousel CSS (https://owlcarousel2.github.io/OwlCarousel2/) -->
|
||
|
|
<link rel="stylesheet" href="assets/vendor/owl-carousel/css/owl.theme.default.min.css"> <!-- Owl Carousel CSS (https://owlcarousel2.github.io/OwlCarousel2/) -->
|
||
|
|
<link rel="stylesheet" href="assets/vendor/ytplayer/css/jquery.mb.YTPlayer.min.css"> <!-- YTPlayer CSS (more info: https://github.com/pupunzi/jquery.mb.YTPlayer) -->
|
||
|
|
|
||
|
|
<!-- Template master CSS -->
|
||
|
|
<link rel="stylesheet" href="assets/css/helper.css">
|
||
|
|
<link rel="stylesheet" href="assets/css/theme.css">
|
||
|
|
|
||
|
|
<!-- Template dark style CSS (just uncomment line below to enable dark style) -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/dark-style.css"> -->
|
||
|
|
|
||
|
|
<!-- Template round style CSS (just uncomment line below to enable round style) -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/round-style.css"> -->
|
||
|
|
|
||
|
|
<!-- Template color skins CSS (just uncomment line below to enable color skin. One line at a time!) -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/color-skins/skin-red.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/color-skins/skin-green.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/color-skins/skin-blue.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/color-skins/skin-orange.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/color-skins/skin-purple.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/color-skins/skin-pink.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/color-skins/skin-brown.css"> -->
|
||
|
|
|
||
|
|
<!-- Template RTL mode CSS (just uncomment all 3 lines below to enable right to left mode) -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap-rtl/bootstrap-rtl.min.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/rtl/theme-rtl.css"> -->
|
||
|
|
<!-- <link rel="stylesheet" href="assets/css/rtl/helper-rtl.css"> -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- HTML5 Shim and Respond.js 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<!-- ===========
|
||
|
|
///// Body /////
|
||
|
|
================
|
||
|
|
* Use class "animsition" to enable page transition while page loads.
|
||
|
|
* Use class "tt-boxed" to enable page boxed layout globally (affects all elements containing class "tt-wrap").
|
||
|
|
-->
|
||
|
|
<body id="body" class="animsition tt-boxed">
|
||
|
|
|
||
|
|
<!-- =================
|
||
|
|
//// Begin header ////
|
||
|
|
======================
|
||
|
|
* Use class "header-show-hide-on-scroll" to hide header on scroll down and show on scroll up.
|
||
|
|
* Use class "header-fixed-top" to set header to fixed position.
|
||
|
|
* Use class "header-transparent" to set header to transparent.
|
||
|
|
* Use class "menu-align-left" to align menu to left.
|
||
|
|
* Use class "menu-align-right" to align menu to right.
|
||
|
|
* Use class "menu-align-center" to align menu to center (do not use with header classes!).
|
||
|
|
-->
|
||
|
|
<header id="header" class="header-show-hide-on-scroll menu-align-right">
|
||
|
|
|
||
|
|
<!-- Begin header inner -->
|
||
|
|
<div class="header-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
|
||
|
|
<!-- Begin logo
|
||
|
|
================ -->
|
||
|
|
<div id="logo">
|
||
|
|
<a href="index.html" class="logo-dark"><img src="assets/img/logo-dark.png" alt="logo"></a>
|
||
|
|
<a href="index.html" class="logo-light"><img src="assets/img/logo-light.png" alt="logo"></a>
|
||
|
|
|
||
|
|
<!-- for small screens -->
|
||
|
|
<a href="index.html" class="logo-dark-m"><img src="assets/img/logo-dark-m.png" alt="logo"></a>
|
||
|
|
<a href="index.html" class="logo-light-m"><img src="assets/img/logo-light-m.png" alt="logo"></a>
|
||
|
|
</div>
|
||
|
|
<!-- End logo -->
|
||
|
|
|
||
|
|
<!-- ====================
|
||
|
|
//// Begin main menu ////
|
||
|
|
===================== -->
|
||
|
|
<nav class="tt-main-menu">
|
||
|
|
|
||
|
|
<!-- Begin mobile menu toggle button -->
|
||
|
|
<div id="tt-m-menu-toggle-btn">
|
||
|
|
<span></span>
|
||
|
|
</div>
|
||
|
|
<!-- End mobile menu toggle button -->
|
||
|
|
|
||
|
|
<!-- Begin menu tools
|
||
|
|
====================== -->
|
||
|
|
<div class="tt-menu-tools">
|
||
|
|
<ul>
|
||
|
|
<!-- Begin search -->
|
||
|
|
<li>
|
||
|
|
<a href="#" class="tt-clobal-search-trigger"><i class="fas fa-search"></i></a>
|
||
|
|
<div class="tt-clobal-search">
|
||
|
|
<div class="tt-clobal-search-inner">
|
||
|
|
<span class="tt-clobal-search-title">Search</span>
|
||
|
|
<form id="tt-clobal-search-form" class="form-btn-inside" method="get" action="search-results.html">
|
||
|
|
<input type="text" id="tt-clobal-search-input" name="search" placeholder="Type your keywords ...">
|
||
|
|
<button type="submit"><i class="fas fa-search"></i></button>
|
||
|
|
</form>
|
||
|
|
</div> <!-- /.tt-clobal-search-inner -->
|
||
|
|
<div class="tt-clobal-search-close"><i class="tt-close-btn tt-close-light"></i></div>
|
||
|
|
</div> <!-- /.tt-clobal-search -->
|
||
|
|
</li>
|
||
|
|
<!-- End search -->
|
||
|
|
|
||
|
|
<!-- Begin tt-dropdown (languages)
|
||
|
|
===================================
|
||
|
|
* Use class "tt-dropdown-dark" to enable dropdown dark style.
|
||
|
|
-->
|
||
|
|
<li class="tt-dropdown-wrap tt-dropdown-master tt-dropdown-dark tt-dropdown-right tt-tools-lang">
|
||
|
|
<a href="#0"><img src="assets/img/flags/gb.png" alt="English"> EN</a>
|
||
|
|
<ul class="tt-dropdown">
|
||
|
|
<li><a href="" title="English"><img src="assets/img/flags/gb.png" alt="English"> EN</a></li>
|
||
|
|
<li><a href="" title="French"><img src="assets/img/flags/fr.png" alt="French"> FR</a></li>
|
||
|
|
<li><a href="" title="Deutsch"><img src="assets/img/flags/de.png" alt="Deutsch"> DE</a></li>
|
||
|
|
</ul> <!-- /.tt-dropdown -->
|
||
|
|
</li>
|
||
|
|
<!-- End tt-dropdown -->
|
||
|
|
|
||
|
|
<!-- Begin call to action button -->
|
||
|
|
<li>
|
||
|
|
<a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" class="tt-tools-button" target="_blank">Buy<span class="hide-from-sm"> This Theme</span>!</a>
|
||
|
|
</li>
|
||
|
|
<!-- End call to action button -->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- End menu tools -->
|
||
|
|
|
||
|
|
<!-- Collect the nav links for toggling
|
||
|
|
========================================
|
||
|
|
* Use class "tt-submenu-dark" to enable submenu dark style.
|
||
|
|
-->
|
||
|
|
<div class="tt-menu-collapse tt-submenu-dark">
|
||
|
|
<ul class="tt-menu-nav">
|
||
|
|
|
||
|
|
<!-- Begin submenu (submenu master)
|
||
|
|
==================================== -->
|
||
|
|
<li class="tt-submenu-wrap tt-submenu-master">
|
||
|
|
<a href="#0">Home</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="home-landing.html">Home Landing</a></li>
|
||
|
|
<li><a href="home-intro-slideshow.html">Slideshow</a></li>
|
||
|
|
<li><a href="albums-slideshow.html">Slideshow + Thumb.</a></li>
|
||
|
|
<li><a href="home-intro-full-screen.html">Full Screen Slideshow</a></li>
|
||
|
|
<li><a href="categories-carousel.html">Categories Carousel</a></li>
|
||
|
|
<li><a href="home-intro-image.html">Static Image Intro</a></li>
|
||
|
|
<li><a href="home-intro-video.html">Video Intro</a></li>
|
||
|
|
<li><a href="home-intro-video-full-screen.html">Full Screen Video Intro</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu (sub-master) -->
|
||
|
|
|
||
|
|
<!-- Begin submenu (submenu master)
|
||
|
|
==================================== -->
|
||
|
|
<li class="tt-submenu-wrap tt-submenu-master">
|
||
|
|
<a href="#0">About</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="about-me.html">About Me</a></li>
|
||
|
|
<li><a href="about-me-fluid.html">About Me Fluid</a></li>
|
||
|
|
<li><a href="about-me-2.html">About Me 2</a></li>
|
||
|
|
<li><a href="about-me-2-fluid.html">About Me 2 Fluid</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu (sub-master) -->
|
||
|
|
|
||
|
|
<!-- Begin submenu (submenu master)
|
||
|
|
==================================== -->
|
||
|
|
<li class="tt-submenu-wrap tt-submenu-master">
|
||
|
|
<a href="#0">Portfolio</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Albums</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Grid</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="albums-grid.html">Grid Default</a></li>
|
||
|
|
<li><a href="albums-grid-2.html">Grid 2</a></li>
|
||
|
|
<li><a href="albums-grid-fluid.html">Grid Fluid</a></li>
|
||
|
|
<li><a href="albums-grid-fluid-2.html">Grid Fluid 2</a></li>
|
||
|
|
<li><a href="albums-grid-fluid-3.html">Grid Fluid 3</a></li>
|
||
|
|
<li><a href="albums-grid-fluid-4.html">Grid Fluid 4</a></li>
|
||
|
|
<li><a href="albums-grid-no-crop.html">Grid No Crop</a></li>
|
||
|
|
<li><a href="albums-grid-simple.html">Grid Simple</a></li>
|
||
|
|
<li><a href="albums-grid-styles.html">Grid Item Styles</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Carousel</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="albums-carousel.html">Albums Carousel</a></li>
|
||
|
|
<li><a href="albums-carousel-no-crop.html">Carousel No Crop</a></li>
|
||
|
|
<li><a href="albums-carousel-split.html">Carousel Split</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Archive</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="albums-archive.html">Archive Default</a></li>
|
||
|
|
<li><a href="albums-archive-fluid.html">Archive Fluid</a></li>
|
||
|
|
<li><a href="albums-archive-fluid-2.html">Archive Fluid 2</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<li><a href="albums-one-column.html">One Column</a></li>
|
||
|
|
<li><a href="albums-one-column-fluid.html">One Column Fluid</a></li>
|
||
|
|
<li><a href="albums-slideshow.html">Slideshow + Thumb.</a></li>
|
||
|
|
<li><a href="albums-thumbnails-list.html">Thumbnails List</a></li>
|
||
|
|
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Gallery</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Gallery Carousel</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="gallery-single-carousel.html">Carousel Default</a></li>
|
||
|
|
<li><a href="gallery-single-carousel-2.html">Carousel + Info</a></li>
|
||
|
|
<li><a href="gallery-single-carousel-center.html">Carousel Center</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Gallery Grid</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="gallery-single-grid.html">Grid Default</a></li>
|
||
|
|
<li><a href="gallery-single-grid-2.html">Grid 2</a></li>
|
||
|
|
<li><a href="gallery-single-grid-cropped.html">Grid Cropped</a></li>
|
||
|
|
<li><a href="gallery-single-grid-fluid.html">Grid Fluid</a></li>
|
||
|
|
<li><a href="gallery-single-grid-fluid-2.html">Grid Fluid 2</a></li>
|
||
|
|
<li><a href="gallery-single-grid-fluid-2-cropped.html">Grid Fluid 2 Cropped</a></li>
|
||
|
|
<li><a href="gallery-single-grid-fluid-3.html">Grid Fluid 3</a></li>
|
||
|
|
<li><a href="gallery-single-grid-fluid-3-cropped.html">Grid Fluid 3 Cropped</a></li>
|
||
|
|
<li><a href="gallery-single-grid-simple.html">Grid Simple</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Gallery + Sidebar</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="gallery-single-sidebar-left.html">Sidebar Left</a></li>
|
||
|
|
<li><a href="gallery-single-sidebar-left-simple.html">Sidebar Left Simple</a></li>
|
||
|
|
<li><a href="gallery-single-sidebar-right.html">Sidebar Right</a></li>
|
||
|
|
<li><a href="gallery-single-sidebar-right-simple.html">Sidebar Right Simple</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Gallery Styles</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="gallery-single-grid-style-default.html">Default</a></li>
|
||
|
|
<li><a href="gallery-single-grid-style-colored.html">Colored</a></li>
|
||
|
|
<li><a href="gallery-single-grid-style-zoom-only.html">Zoom Only</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Categories</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="categories-carousel.html">Carousel</a></li>
|
||
|
|
<li><a href="categories-grid.html">Grid</a></li>
|
||
|
|
<li><a href="categories-grid-fluid.html">Grid Fluid</a></li>
|
||
|
|
<li><a href="categories-grid-fluid-2.html">Grid Fluid 2</a></li>
|
||
|
|
<li><a href="categories-grid-fluid-3.html">Grid Fluid 3</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu (sub-master) -->
|
||
|
|
|
||
|
|
<!-- Begin submenu (submenu master)
|
||
|
|
==================================== -->
|
||
|
|
<li class="tt-submenu-wrap tt-submenu-master">
|
||
|
|
<a href="#0">Blog</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Blog List</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="blog-list-classic.html">Classic</a></li>
|
||
|
|
<li><a href="blog-list-simple.html">Classic Simple</a></li>
|
||
|
|
<li><a href="blog-list-grid.html">Grid</a></li>
|
||
|
|
<li><a href="blog-list-grid-fluid.html">Grid Fluid</a></li>
|
||
|
|
<li><a href="blog-list-grid-no-sidebar.html">Grid No Sidebar</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Blog Single Post</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="blog-single.html">Default</a></li>
|
||
|
|
<li><a href="blog-single-alter.html">Alternate</a></li>
|
||
|
|
<li><a href="blog-single-simple.html">Simple</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Blog Archive</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="blog-archive.html">Archive Default</a></li>
|
||
|
|
<li><a href="blog-archive-2.html">Archive Classic</a></li>
|
||
|
|
<li><a href="blog-archive-3.html">Archive Grid</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu (sub-master) -->
|
||
|
|
|
||
|
|
<!-- Begin submenu (submenu master)
|
||
|
|
==================================== -->
|
||
|
|
<li class="tt-submenu-wrap tt-submenu-master">
|
||
|
|
<a href="#0">Contact</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="contact.html">Contact Default</a></li>
|
||
|
|
<li><a href="contact-fluid.html">Contact Fluid</a></li>
|
||
|
|
<li><a href="contact-simple.html">Contact Simple</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu (sub-master) -->
|
||
|
|
|
||
|
|
<!-- Begin submenu (submenu master)
|
||
|
|
==================================== -->
|
||
|
|
<li class="tt-submenu-wrap tt-submenu-master">
|
||
|
|
<a href="#0">More</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
|
||
|
|
<!-- Begin submenu
|
||
|
|
=================== -->
|
||
|
|
<li class="tt-submenu-wrap">
|
||
|
|
<a href="#0">Dummy Pages</a>
|
||
|
|
<ul class="tt-submenu">
|
||
|
|
<li><a href="page-dummy-classic.html">No Sidebar</a></li>
|
||
|
|
<li><a href="page-dummy-classic-sidebar-left.html">Sidebar Left</a></li>
|
||
|
|
<li><a href="page-dummy-classic-sidebar-right.html">Sidebar Right</a></li>
|
||
|
|
<li><a href="page-dummy-modern.html">Modern</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu -->
|
||
|
|
|
||
|
|
<li><a href="page-404.html">404 Error</a></li>
|
||
|
|
<li><a href="page-404-2.html">404 Error 2</a></li>
|
||
|
|
<li><a href="page-faq.html">FAQ</a></li>
|
||
|
|
<li><a href="page-pricing.html">Pricing</a></li>
|
||
|
|
<li><a href="search-results.html">Search Results</a></li>
|
||
|
|
<li><a href="page-password.html">Password Protected</a></li>
|
||
|
|
<li><a href="footer-styles.html">Footer Styles</a></li>
|
||
|
|
</ul> <!-- /.tt-submenu -->
|
||
|
|
</li>
|
||
|
|
<!-- End submenu (sub-master) -->
|
||
|
|
|
||
|
|
</ul> <!-- /.tt-menu-nav -->
|
||
|
|
</div> <!-- /.tt-menu-collapse -->
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
<!-- End main menu -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End header inner -->
|
||
|
|
|
||
|
|
</header>
|
||
|
|
<!-- End header -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- *************************************
|
||
|
|
*********** Begin body content ***********
|
||
|
|
************************************** -->
|
||
|
|
<div id="body-content">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ========================
|
||
|
|
///// Begin page header /////
|
||
|
|
=============================
|
||
|
|
* Use classes "ph-xs", "ph-sm", "ph-lg" or "ph-xlg" to set page header size.
|
||
|
|
* Use class "ph-center" or "ph-right" to align page header caption.
|
||
|
|
-->
|
||
|
|
<section id="page-header">
|
||
|
|
|
||
|
|
<!-- Begin page header image
|
||
|
|
=============================
|
||
|
|
* Use class "parallax-bg-1" up to "parallax-bg-6" to enable background image parallax effect.
|
||
|
|
* Use class "fade-out-scroll-3" to enable fade out effect if page scroll.
|
||
|
|
* Use class "hide-ph-image" to hide page header image without removing the code.
|
||
|
|
-->
|
||
|
|
<div class="page-header-image parallax-bg-3 bg-image" style="background-image: url(assets/img/misc/page-header-bg-7.jpg);">
|
||
|
|
|
||
|
|
<!-- Element cover
|
||
|
|
===================
|
||
|
|
* You can use prepared background transparent classes depends on brightness of your page header image. More info: file "helper.css".
|
||
|
|
-->
|
||
|
|
<div class="cover bg-transparent-5-dark"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End page header image -->
|
||
|
|
|
||
|
|
<!-- Begin page header inner -->
|
||
|
|
<div class="page-header-inner tt-wrap">
|
||
|
|
|
||
|
|
<!-- Begin page header caption
|
||
|
|
===============================
|
||
|
|
* Use classes "ph-caption-xs", "ph-caption-sm", "ph-caption-lg" or "ph-caption-xlg" to set page header size.
|
||
|
|
* Use class "parallax-1" up to "parallax-6" to enable parallax effect.
|
||
|
|
* Use class "fade-out-scroll-1" up to "fade-out-scroll-6" to enable fade out effect if page scroll.
|
||
|
|
-->
|
||
|
|
<div class="page-header-caption ph-caption-lg parallax-5 fade-out-scroll-3">
|
||
|
|
<h1 class="page-header-title">Album Styles</h1>
|
||
|
|
<hr class="hr-short">
|
||
|
|
|
||
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
||
|
|
<div class="page-header-description" data-max-words="40">
|
||
|
|
<p>Demonstration of the album styles that you can use.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End page header caption -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End page header inner -->
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<!-- End page header -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================================================================================
|
||
|
|
///// Begin gallery list section (THIS SECTION IS FOR DEMONSTRATION PURPOSE ONLY!!!) /////
|
||
|
|
====================================================================================== -->
|
||
|
|
<section id="gallery-list-section">
|
||
|
|
<div class="isotope-wrap tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
|
||
|
|
<!-- Begin isotope
|
||
|
|
===================
|
||
|
|
* Use class "gutter-1", "gutter-2" or "gutter-3" to add more space between items.
|
||
|
|
* Use class "col-1", "col-2", "col-3", "col-4", "col-5" or "col-6" for columns.
|
||
|
|
-->
|
||
|
|
<div class="isotope col-3 gutter-3">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1>Style 1 - Default</h1>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 1 - Colored</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-colored">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 1 - Dark</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-dark">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 1 - Framed</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-frame">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 2</h1>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-1">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 2 - Framed</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-1 gli-frame">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 3</h1>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-2">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 3 - Framed</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-2 gli-frame">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 4</h1>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-3">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 4 - Framed</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-3 gli-frame">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 5</h1>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-4">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 5 - Colored</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-4 gli-colored">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 5 - Dark</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-4 gli-dark">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 5 - Framed</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-4 gli-frame">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 6</h1>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-5">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 6 - Colored</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-5 gli-colored">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 6 - Dark</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-5 gli-dark">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="margin-top-60 margin-left-3-p">
|
||
|
|
<h1 class="margin-top-60">Style 6 - Framed</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use class "gli-alter-1", "gli-alter-2", "gli-alter-3", "gli-alter-4" or "gli-alter-5" to change gallery list item style.
|
||
|
|
* Use class "gli-dark" or "gli-colored" to enable colored hover overlay (effect only with default hover overlay and "gli-alter-4", "gli-alter-5" classes!).
|
||
|
|
* Use class "gli-frame" to enable image frames.
|
||
|
|
-->
|
||
|
|
<div class="isotope-items-wrap gli-alter-5 gli-frame">
|
||
|
|
|
||
|
|
<!-- Grid sizer (do not remove!!!) -->
|
||
|
|
<div class="grid-sizer"></div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-1.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">49</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">The Old Man Dreams</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-2.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">85</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">These Wonderful Freckles</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Black & White</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// Begin isotope item ///
|
||
|
|
==========================
|
||
|
|
* If you use background image on isotope-item child element, then you need to use class "iso-height-1" or "iso-height-2" to set the item height. If you use simple image tag, then don't use height classes.
|
||
|
|
-->
|
||
|
|
<div class="isotope-item iso-height-1">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item -->
|
||
|
|
<div class="gallery-list-item">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image -->
|
||
|
|
<div class="gl-item-image-wrap">
|
||
|
|
|
||
|
|
<!-- Begin gallery list item image inner -->
|
||
|
|
<a href="gallery-single-grid.html" class="gl-item-image-inner">
|
||
|
|
<div class="gl-item-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/gallery-list-3.jpg); background-position: 50% 50%"></div>
|
||
|
|
|
||
|
|
<span class="gl-item-image-zoom"></span>
|
||
|
|
</a>
|
||
|
|
<!-- End gallery list item image inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item meta -->
|
||
|
|
<ul class="gli-meta">
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn">
|
||
|
|
<div class="fav-inner">
|
||
|
|
<div class="icon-heart">
|
||
|
|
<span class="icon-heart-empty"></span>
|
||
|
|
<span class="icon-heart-filled"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="fav-count">7</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End gallery list item meta -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item image -->
|
||
|
|
|
||
|
|
<!-- Begin gallery list item info -->
|
||
|
|
<div class="gl-item-info">
|
||
|
|
<div class="gl-item-caption">
|
||
|
|
<h2 class="gl-item-title"><a href="gallery-single-grid.html">Paris Fashion Week</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item info -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End gallery list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope -->
|
||
|
|
|
||
|
|
</div> <!-- /.isotope-wrap -->
|
||
|
|
</section>
|
||
|
|
<!-- End gallery list section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ===========================
|
||
|
|
///// Begin footer section /////
|
||
|
|
================================
|
||
|
|
* Use class "footer-dark" to enable dark footer.
|
||
|
|
* Use class "no-margin-top" if needed.
|
||
|
|
-->
|
||
|
|
<section id="footer" class="footer-dark">
|
||
|
|
<div class="footer-inner">
|
||
|
|
<div class="footer-container tt-wrap">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3">
|
||
|
|
|
||
|
|
<!-- Begin footer logo -->
|
||
|
|
<div id="footer-logo">
|
||
|
|
<a href="index.html" class="logo-dark"><img src="assets/img/logo-dark.png" alt="logo"></a>
|
||
|
|
<a href="index.html" class="logo-light"><img src="assets/img/logo-light.png" alt="logo"></a>
|
||
|
|
|
||
|
|
<!-- for small screens -->
|
||
|
|
<a href="index.html" class="logo-dark-m"><img src="assets/img/logo-dark-m.png" alt="logo"></a>
|
||
|
|
<a href="index.html" class="logo-light-m"><img src="assets/img/logo-light-m.png" alt="logo"></a>
|
||
|
|
</div>
|
||
|
|
<!-- End footer logo -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<div class="col-md-5">
|
||
|
|
|
||
|
|
<!-- Begin footer text -->
|
||
|
|
<div class="footer-text">
|
||
|
|
<h4>- Creative Photo Studio</h4>
|
||
|
|
Sed non auctor magna. Nunc eu ultrices orci. Donec commodo ligula in massa ultricies volutpat. Fusce vel cursus lectus. Cras commodo odio mi, eu cursus nibh iaculis ut.
|
||
|
|
</div>
|
||
|
|
<!-- End footer text -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<div class="col-md-4">
|
||
|
|
|
||
|
|
<!-- Begin social buttons -->
|
||
|
|
<div class="social-buttons">
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Facebook" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
|
||
|
|
<li><a href="https://twitter.com/Themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Twitter" target="_blank"><i class="fab fa-twitter"></i></a></li>
|
||
|
|
<li><a href="https://plus.google.com/+SiiliOnu" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Google+" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
|
||
|
|
<li><a href="https://www.pinterest.com/themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Pinterest" target="_blank"><i class="fab fa-pinterest-p"></i></a></li>
|
||
|
|
<li><a href="https://dribbble.com/Themetorium" class="btn btn-social-min btn-default btn-rounded-full" title="Follow me on Dribbble" target="_blank"><i class="fab fa-dribbble"></i></a></li>
|
||
|
|
<li><a href="contact.html" class="btn btn-social-min btn-default btn-rounded-full" title="Drop me a line" target="_blank"><i class="fas fa-envelope"></i></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- End social buttons -->
|
||
|
|
|
||
|
|
<!-- Begin footer subscribe form -->
|
||
|
|
<form id="footer-subscribe-form" class="form-btn-inside">
|
||
|
|
<div class="form-group">
|
||
|
|
<input type="email" class="form-control no-bg" id="footer-subscribe" name="subscribe" placeholder="Subscribe. Enter your email address..." required="">
|
||
|
|
<button type="submit"><i class="fas fa-paper-plane"></i></button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<!-- End footer subscribe form -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
</div> <!-- /.row -->
|
||
|
|
</div> <!-- /.footer-container -->
|
||
|
|
|
||
|
|
<div class="footer-bottom">
|
||
|
|
<div class="footer-container tt-wrap">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6 col-md-push-6">
|
||
|
|
|
||
|
|
<!-- Begin footer menu -->
|
||
|
|
<ul class="footer-menu">
|
||
|
|
<li><a href="index.html">Home</a></li>
|
||
|
|
<li><a href="about-me.html">About</a></li>
|
||
|
|
<li><a href="albums-grid-fluid-2.html">Portfolio</a></li>
|
||
|
|
<li><a href="blog-list-grid.html">Blog</a></li>
|
||
|
|
<li><a href="page-faq.html">FAQ</a></li>
|
||
|
|
<li><a href="contact.html">Contact</a></li>
|
||
|
|
</ul>
|
||
|
|
<!-- End footer menu -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<div class="col-md-6 col-md-pull-6">
|
||
|
|
|
||
|
|
<!-- Begin footer copyright -->
|
||
|
|
<div class="footer-copyright">
|
||
|
|
<p>© Sepia 2017 / All rights reserved</p>
|
||
|
|
<p>Design by: <a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" target="_blank">Themetorium</a></p>
|
||
|
|
</div>
|
||
|
|
<!-- End footer copyright -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
</div> <!-- /.row -->
|
||
|
|
</div> <!-- /.footer-container -->
|
||
|
|
</div> <!-- /.footer-bottom -->
|
||
|
|
|
||
|
|
</div> <!-- /.footer-inner -->
|
||
|
|
|
||
|
|
<!-- Scroll to top button -->
|
||
|
|
<a href="#body" class="scrolltotop sm-scroll" title="Scroll to top"><i class="fas fa-chevron-up"></i></a>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<!-- End footer section -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End body content -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ====================
|
||
|
|
///// Scripts below /////
|
||
|
|
===================== -->
|
||
|
|
|
||
|
|
<!-- Core JS -->
|
||
|
|
<script src="assets/vendor/jquery/jquery.min.js"></script> <!-- jquery JS (https://jquery.com) -->
|
||
|
|
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script> <!-- bootstrap JS (http://getbootstrap.com) -->
|
||
|
|
|
||
|
|
<!-- Libs and Plugins JS -->
|
||
|
|
<script src="assets/vendor/animsition/js/animsition.min.js"></script> <!-- Animsition JS (http://git.blivesta.com/animsition/) -->
|
||
|
|
<script src="assets/vendor/jquery.easing.min.js"></script> <!-- Easing JS (http://gsgd.co.uk/sandbox/jquery/easing/) -->
|
||
|
|
<script src="assets/vendor/isotope.pkgd.min.js"></script> <!-- Isotope JS (http://isotope.metafizzy.co) -->
|
||
|
|
<script src="assets/vendor/imagesloaded.pkgd.min.js"></script> <!-- ImagesLoaded JS (https://github.com/desandro/imagesloaded) -->
|
||
|
|
<script src="assets/vendor/owl-carousel/js/owl.carousel.min.js"></script> <!-- Owl Carousel JS (https://owlcarousel2.github.io/OwlCarousel2/) -->
|
||
|
|
<script src="assets/vendor/jquery.mousewheel.min.js"></script> <!-- A jQuery plugin that adds cross browser mouse wheel support (https://github.com/jquery/jquery-mousewheel) -->
|
||
|
|
<script src="assets/vendor/ytplayer/js/jquery.mb.YTPlayer.min.js"></script> <!-- YTPlayer JS (more info: https://github.com/pupunzi/jquery.mb.YTPlayer) -->
|
||
|
|
|
||
|
|
<script src="assets/vendor/lightgallery/js/lightgallery-all.min.js"></script> <!-- lightGallery Plugins JS (http://sachinchoolur.github.io/lightGallery) -->
|
||
|
|
|
||
|
|
<!-- Theme master JS -->
|
||
|
|
<script src="assets/js/theme.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|