1467 lines
68 KiB
HTML
1467 lines
68 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Template: Sepia - Photography Portfolio HTML Website Template
|
||
|
|
Author: Themetorium
|
||
|
|
URL: https://themetorium.net
|
||
|
|
-->
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<title>The Coolest Photo Gallery I've Ever Created / 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" class="ph-lg">
|
||
|
|
|
||
|
|
<!-- 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-9.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 parallax-4 fade-out-scroll-4">
|
||
|
|
<h1 class="page-header-title">The Coolest Photo Project I've Ever Created</h1>
|
||
|
|
<div class="page-header-category"><a href="albums-archive-fluid.html">Outdoor</a></div>
|
||
|
|
|
||
|
|
<!-- 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>Fusce imperdiet, arcu non tempor aliquam, justo tortor cursus est, sed facilisis eros purus et felis. Sed eros sapien, iaculis eget gravida euismod, dapibus vitae turpis. Pellentesque men egestas odio mi, vitae egestas massa elementum ut. Cras dolor dui consequat massi.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Begin modal trigger -->
|
||
|
|
<a href="#0" class="ph-more-info-trigger" data-toggle="modal" data-target="#modal-67230981"><span class="ph-more-info-trigger-icon"></span> Show More...</a>
|
||
|
|
<!-- End modal trigger -->
|
||
|
|
|
||
|
|
<!-- Begin modal
|
||
|
|
=================
|
||
|
|
* Use class "modal-center" to enable modal center position (use for short content only!).
|
||
|
|
* Use class "modal-left" to enable left sidebar modal.
|
||
|
|
* Use class "modal-right" to enable right sidebar modal.
|
||
|
|
-->
|
||
|
|
<div id="modal-67230981" class="modal modal-left fade" tabindex="-1" role="dialog" aria-hidden="false">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="tt-close-btn"></i></button>
|
||
|
|
<h4 class="modal-title">Info:</h4>
|
||
|
|
</div> <!-- /.modal-header -->
|
||
|
|
|
||
|
|
<div class="modal-body">
|
||
|
|
|
||
|
|
<!-- Begin modal body image
|
||
|
|
============================
|
||
|
|
* Use class "modal-body-image-1" or "modal-body-image-2" to set modal body image style.
|
||
|
|
-->
|
||
|
|
<div class="modal-body-image-1 bg-image" style="background-image: url(assets/img/misc/page-header-bg-9.jpg); background-position: 50% 50%;"></div>
|
||
|
|
<!-- End modal body image -->
|
||
|
|
|
||
|
|
<!-- Begin modal body content -->
|
||
|
|
<div class="modal-body-content">
|
||
|
|
|
||
|
|
<!-- Begin tt-heading
|
||
|
|
======================
|
||
|
|
* Use class "padding-on" to enable heading paddings (useful if you use tt-heading as stand alone element).
|
||
|
|
* Use class "text-center" or "text-right" to align tt-heading.
|
||
|
|
* Use classes "tt-heading-xs", "tt-heading-sm", "tt-heading-lg", "tt-heading-xlg" or "tt-heading-xxlg" to set tt-heading size.
|
||
|
|
-->
|
||
|
|
<div class="tt-heading tt-heading-lg">
|
||
|
|
<div class="tt-heading-inner">
|
||
|
|
<h1 class="tt-heading-title">The Coolest Photo Project I've Ever Created</h1>
|
||
|
|
<!-- <div class="tt-heading-subtitle">Subtitle Here</div> -->
|
||
|
|
<!-- <hr class="hr-short"> -->
|
||
|
|
</div> <!-- /.tt-heading-inner -->
|
||
|
|
</div>
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
<div class="margin-top-20">
|
||
|
|
<p>Integer viverra arcu ac facilisis interdum. Proin dignissim sagittis tellus. Duis et pharetra est, vel ullamcorper libero. Fusce sed leo in dolor ornare fermentum. Sed facilisis eu justo at mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue malesuada eros, ut varius metus accumsan non. Pellentesque facilisis tortor risus, quis convallis nunc faucibus et. Proin egestas pulvinar sem, sit amet auctor ligula faucibus quis. Maecenas in libero nec turpis molestie dictum. Suspendisse id mi eget mi suscipit faucibus vitae eu metus.</p>
|
||
|
|
|
||
|
|
<p>Integer accumsan iaculis pharetra. Curabitur ultricies ut justo at hendrerit. Sed quis condimentum dui. In ac nunc leo. Quisque erat sem, consequat at rutrum at, ultricies nec sapien. Sed hendrerit libero augue, sit amet ultricies urna tincidunt at. In hac habitasse platea dictumst. Vivamus et sem nec velit scelerisque molestie. Suspendisse tempus posuere venenatis.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" class="btn btn-primary" target="_blank">Buy this theme!</a>
|
||
|
|
|
||
|
|
<!-- Begin social buttons share -->
|
||
|
|
<div class="social-buttons margin-top-40">
|
||
|
|
<ul>
|
||
|
|
<li><strong>Share:</strong> </li>
|
||
|
|
<li><a href="" class="btn btn-social-min btn-facebook btn-sm btn-rounded-full" title="Share on Facebook"><i class="fab fa-facebook-f"></i></a></li>
|
||
|
|
<li><a href="" class="btn btn-social-min btn-twitter btn-sm btn-rounded-full" title="Share on Twitter"><i class="fab fa-twitter"></i></a></li>
|
||
|
|
<li><a href="" class="btn btn-social-min btn-google btn-sm btn-rounded-full" title="Share on Google+"><i class="fab fa-google-plus-g"></i></a></li>
|
||
|
|
<li><a href="" class="btn btn-social-min btn-pinterest btn-sm btn-rounded-full" title="Share on Pinterest"><i class="fab fa-pinterest-p"></i></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- End social buttons share -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End modal body content -->
|
||
|
|
|
||
|
|
</div> <!-- /.modal-body -->
|
||
|
|
|
||
|
|
<div class="modal-footer">
|
||
|
|
© Sepia 2017 / All rights reserved
|
||
|
|
</div> <!-- /.modal-footer -->
|
||
|
|
|
||
|
|
</div> <!-- /.modal-content -->
|
||
|
|
</div> <!-- /.modal-dialog -->
|
||
|
|
</div>
|
||
|
|
<!-- End modal -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End page header caption -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End page header inner -->
|
||
|
|
|
||
|
|
<!-- Begin gallery single nav -->
|
||
|
|
<div class="gallery-single-nav parallax-2 fade-out-scroll-4">
|
||
|
|
<a href="" class="gsn-prew" title="Prew Project"><i class="fas fa-angle-left"></i></a>
|
||
|
|
<a href="albums-grid-fluid.html" class="gsn-back" title="Back to albums"><i class="fas fa-th"></i></a>
|
||
|
|
<a href="" class="gsn-next" title="Next Project"><i class="fas fa-angle-right"></i></a>
|
||
|
|
</div>
|
||
|
|
<!-- End gallery single nav -->
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<!-- End page header -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ===================================
|
||
|
|
///// Begin gallery single section /////
|
||
|
|
==================================== -->
|
||
|
|
<section id="gallery-single-section">
|
||
|
|
<div class="isotope-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-4 gutter-3">
|
||
|
|
|
||
|
|
<!-- Begin isotope top content -->
|
||
|
|
<div class="isotope-top-content">
|
||
|
|
|
||
|
|
<!-- Begin gallery share button
|
||
|
|
================================
|
||
|
|
* Use class "gs-right" to align gallery share button.
|
||
|
|
-->
|
||
|
|
<a href="#0" class="gallery-share gs-right" data-toggle="modal" data-target="#modal-64253091" title="Share this gallery"><i class="fas fa-share-alt"></i></a>
|
||
|
|
<!-- End gallery share button -->
|
||
|
|
|
||
|
|
<!-- Begin modal
|
||
|
|
=================
|
||
|
|
* Use class "modal-center" to enable modal center position (use for short content only!).
|
||
|
|
* Use class "modal-left" to enable left sidebar modal.
|
||
|
|
* Use class "modal-right" to enable right sidebar modal.
|
||
|
|
-->
|
||
|
|
<div id="modal-64253091" class="modal modal-center fade" tabindex="-1" role="dialog" aria-hidden="false">
|
||
|
|
<div class="modal-dialog">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="tt-close-btn"></i></button>
|
||
|
|
<h4 class="modal-title">Share This Gallery:</h4>
|
||
|
|
</div> <!-- /.modal-header -->
|
||
|
|
|
||
|
|
<div class="modal-body">
|
||
|
|
|
||
|
|
<!-- Begin modal body image
|
||
|
|
============================
|
||
|
|
* Use class "modal-body-image-1" or "modal-body-image-2" to set modal body image style.
|
||
|
|
-->
|
||
|
|
<div class="modal-body-image-1 bg-image" style="background-image: url(assets/img/misc/page-header-bg-9.jpg); background-position: 50% 50%;"></div>
|
||
|
|
<!-- End modal body image -->
|
||
|
|
|
||
|
|
<!-- Begin modal body content -->
|
||
|
|
<div class="modal-body-content">
|
||
|
|
|
||
|
|
<!-- Begin modal share -->
|
||
|
|
<div class="modal-share">
|
||
|
|
|
||
|
|
<!-- Begin social buttons -->
|
||
|
|
<div class="social-buttons">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#0" class="btn btn-social-min btn-facebook btn-rounded-full" title="Share on facebook"><i class="fab fa-facebook-f"></i></a></li>
|
||
|
|
<li><a href="#0" class="btn btn-social-min btn-twitter btn-rounded-full" title="Share on twitter"><i class="fab fa-twitter"></i></a></li>
|
||
|
|
<li><a href="#0" class="btn btn-social-min btn-google btn-rounded-full" title="Share on google+"><i class="fab fa-google-plus-g"></i></a></li>
|
||
|
|
<li><a href="#0" class="btn btn-social-min btn-pinterest btn-rounded-full" title="Share on pinterest"><i class="fab fa-pinterest-p"></i></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- End social buttons -->
|
||
|
|
|
||
|
|
<!-- modal share grab link -->
|
||
|
|
<input class="grab-link" type="text" readonly="" value="https://yoursite.com/your-gallery-link/" onclick="this.select()">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End modal share -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End modal body content -->
|
||
|
|
|
||
|
|
</div> <!-- /.modal-body -->
|
||
|
|
|
||
|
|
<div class="modal-footer">
|
||
|
|
© Sepia 2017 / All rights reserved
|
||
|
|
</div> <!-- /.modal-footer -->
|
||
|
|
|
||
|
|
</div> <!-- /.modal-content -->
|
||
|
|
</div> <!-- /.modal-dialog -->
|
||
|
|
</div>
|
||
|
|
<!-- End modal -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope top content -->
|
||
|
|
|
||
|
|
<!-- Begin isotope items wrap
|
||
|
|
==============================
|
||
|
|
* Use classes "gsi-color", "gsi-zoom" or "gsi-simple" to change gallery single item cover variations.
|
||
|
|
-->
|
||
|
|
<div id="gallery" class="isotope-items-wrap lightgallery gsi-color">
|
||
|
|
|
||
|
|
<!-- 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-1.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-1.jpg" data-sub-html="<p>Yes, you can use image captions :)</p>">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-1.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item image caption -->
|
||
|
|
<div class="gsi-image-caption">Yes, you can use image captions :)</div>
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-2.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-2.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-2.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="https://www.youtube.com/watch?v=ls0ayO5FIro" class="gallery-single-item lg-trigger">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-3.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-play"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-4.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-4.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-4.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-5.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-5.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-5.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="https://vimeo.com/20047720" class="gallery-single-item lg-trigger">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-6.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-play"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-7.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-7.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-7.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-8.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-8.jpg" data-sub-html="<p>Another awesome image caption :)</p>">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-8.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item image caption -->
|
||
|
|
<div class="gsi-image-caption">Another awesome image caption :)</div>
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-9.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-9.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-9.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-10.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-10.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-10.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-11.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-11.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-11.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-12.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-12.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-12.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-13.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-13.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-13.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-14.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-14.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-14.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-15.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-15.jpg" data-sub-html="<p>Yes, you can use a little longer image captions. Pellentesque men egestas odio mi, vitae egestas massa elementum utesa.</p>">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-15.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item image caption -->
|
||
|
|
<div class="gsi-image-caption">You can use a little longer image captions. Pellentesque men egestas odio mi, vitae egestas massa elementum utesa.</div>
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-16.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-16.jpg">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-16.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single 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">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item -->
|
||
|
|
<a href="assets/img/gallery/gallery-single/grid/big/gallery-single-big-17.jpg" class="gallery-single-item lg-trigger" data-exthumbnail="assets/img/gallery/gallery-single/grid/thumb/gallery-single-thumb-17.jpg" data-sub-html="<p>Yes, you can use a little longer image captions. Pellentesque men egestas odio mi, vitae egestas massa elementum utesa.</p>">
|
||
|
|
|
||
|
|
<!-- Begin gallery single item image -->
|
||
|
|
<img src="assets/img/gallery/gallery-single/grid/gallery-single-17.jpg" class="gs-item-image" alt="">
|
||
|
|
<!-- End gallery single item image -->
|
||
|
|
|
||
|
|
<!-- Gallery single item image caption -->
|
||
|
|
<div class="gsi-image-caption">You can use a little longer image captions. Pellentesque men egestas odio mi, vitae egestas massa elementum utesa.</div>
|
||
|
|
|
||
|
|
<!-- Gallery single item icon -->
|
||
|
|
<div class="gs-item-icon"><i class="fas fa-search"></i></div>
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End gallery single item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope items wrap -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Begin isotope pagination
|
||
|
|
============================== -->
|
||
|
|
<div class="isotope-pagination">
|
||
|
|
<div class="iso-load-more">
|
||
|
|
<a class="btn btn-dark-bordered btn-lg" href="">View More <i class="fas fa-refresh"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End isotope pagination -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End isotope -->
|
||
|
|
|
||
|
|
</div> <!-- /.isotope-wrap -->
|
||
|
|
</section>
|
||
|
|
<!-- End gallery single section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ==================================
|
||
|
|
///// Begin more projects cection /////
|
||
|
|
=================================== -->
|
||
|
|
<section id="more-projects-section">
|
||
|
|
|
||
|
|
<!-- Begin tt-heading
|
||
|
|
======================
|
||
|
|
* Use class "padding-on" to enable heading paddings (useful if you use tt-heading as stand alone element).
|
||
|
|
* Use class "text-center" or "text-right" to align tt-heading.
|
||
|
|
* Use classes "tt-heading-xs", "tt-heading-sm", "tt-heading-lg", "tt-heading-xlg" or "tt-heading-xxlg" to set tt-heading size.
|
||
|
|
-->
|
||
|
|
<div class="tt-heading padding-on text-center bg-gray-3">
|
||
|
|
<div class="tt-heading-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
<h1 class="tt-heading-title">More Projects You Might Like</h1>
|
||
|
|
<div class="tt-heading-subtitle">Please see my other projects</div>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div> <!-- /.tt-heading-inner -->
|
||
|
|
</div>
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
<div class="more-projects-inner"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
|
||
|
|
<!-- Begin project carousel
|
||
|
|
============================ -->
|
||
|
|
<div class="project-carousel">
|
||
|
|
|
||
|
|
<!-- Begin content carousel (https://owlcarousel2.github.io/OwlCarousel2/)
|
||
|
|
====================================================================
|
||
|
|
* Use class "nav-outside" for outside nav (requires boxed layout).
|
||
|
|
* Use class "nav-outside-top" for outside top nav (requires enough space at the top of the carousel).
|
||
|
|
* Use class "nav-bottom-right" for bottom right nav.
|
||
|
|
* Use class "nav-rounded" for rounded nav.
|
||
|
|
* Use class "nav-light" to enable nav light style.
|
||
|
|
* Use class "dots-outside" for outside dots (requires enough space at the bottom of the carousel).
|
||
|
|
* Use class "dots-left", "dots-right" or "dots-center-right" to align dots.
|
||
|
|
* Use class "dots-rounded" for rounded dots.
|
||
|
|
* Use class "owl-mousewheel" to enable mousewheel support.
|
||
|
|
* Use class "cursor-grab" to enable cursor grab icon (no effect on links!).
|
||
|
|
* Use class "cc-hover-light", "cc-hover-dark" or "cc-hover-zoom" to enable carousel items hover effect.
|
||
|
|
* Use class "cc-height-1", "cc-height-2", "cc-height-3", "cc-height-4", "cc-height-5", "cc-height-6" or "cc-height-full" to set carousel height (do not use with data-autoheight="true"!!!).
|
||
|
|
* Use class "cc-height-m" to set full height for small screens (do not use with data-autoheight="true"!!!).
|
||
|
|
================================================================
|
||
|
|
* Available carousel data attributes:
|
||
|
|
data-items="5".......................(items visible on desktop)
|
||
|
|
data-tablet-landscape="4"............(items visible on mobiles)
|
||
|
|
data-tablet-portrait="3".............(items visible on mobiles)
|
||
|
|
data-mobile-landscape="2"............(items visible on tablets)
|
||
|
|
data-mobile-portrait="1".............(items visible on tablets)
|
||
|
|
data-loop="true".....................(true/false)
|
||
|
|
data-margin="10".....................(space between items)
|
||
|
|
data-center="true"...................(true/false)
|
||
|
|
data-start-position="0"..............(item start position)
|
||
|
|
data-animate-in="fadeIn".............(fade-in animation)
|
||
|
|
data-animate-out="fadeOut"...........(fade-out animation)
|
||
|
|
data-mouse-drag="false"..............(true/false)
|
||
|
|
data-touch-drag="false"..............(true/false)
|
||
|
|
data-autoheight="true"...............(true/false)
|
||
|
|
data-autoplay="true".................(true/false)
|
||
|
|
data-autoplay-timeout="5000".........(milliseconds)
|
||
|
|
data-autoplay-hover-pause="true".....(true/false)
|
||
|
|
data-autoplay-speed="800"............(milliseconds)
|
||
|
|
data-drag-end-speed="800"............(milliseconds)
|
||
|
|
data-nav="true"......................(true/false)
|
||
|
|
data-nav-speed="800".................(milliseconds)
|
||
|
|
data-dots="false"....................(true/false)
|
||
|
|
data-dots-speed="800"................(milliseconds)
|
||
|
|
-->
|
||
|
|
<div class="owl-carousel cc-height-1 cc-hover-dark nav-outside-top" data-items="4" data-margin="0" data-dots="false" data-nav="true" data-nav-speed="800" data-mobile-portrait="1" data-tablet-landscape="3" data-tablet-portrait="2" data-mobile-landscape="1" data-mobile-portrait="1">
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<a href="" class="cc-item">
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-7.jpg);"></div>
|
||
|
|
|
||
|
|
<!-- Begin caption
|
||
|
|
===================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
|
||
|
|
<h2 class="cc-title">Afternoon Photoshoot</h2>
|
||
|
|
<div class="cc-category"><span>Outdoor</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- End caption -->
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<a href="" class="cc-item">
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-8.jpg);"></div>
|
||
|
|
|
||
|
|
<!-- Begin caption
|
||
|
|
===================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
|
||
|
|
<h2 class="cc-title">Black & White</h2>
|
||
|
|
<div class="cc-category"><span>Models</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- End caption -->
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<a href="" class="cc-item">
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-9.jpg);"></div>
|
||
|
|
|
||
|
|
<!-- Begin caption
|
||
|
|
===================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="cc-caption center max-width-400">
|
||
|
|
<h2 class="cc-title">One Day Shoot With Ordinary People</h2>
|
||
|
|
<div class="cc-category"><span>People</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- End caption -->
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<a href="" class="cc-item">
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-10.jpg);"></div>
|
||
|
|
|
||
|
|
<!-- Begin caption
|
||
|
|
===================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
|
||
|
|
<h2 class="cc-title">Dancing Is Everything</h2>
|
||
|
|
<div class="cc-category"><span>People</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- End caption -->
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<a href="" class="cc-item">
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-11.jpg);"></div>
|
||
|
|
|
||
|
|
<!-- Begin caption
|
||
|
|
===================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
|
||
|
|
<h2 class="cc-title">Redhead Beauty</h2>
|
||
|
|
<div class="cc-category"><span>Nature</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- End caption -->
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<a href="" class="cc-item">
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-12.jpg);"></div>
|
||
|
|
|
||
|
|
<!-- Begin caption
|
||
|
|
===================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
|
||
|
|
<h2 class="cc-title">Beautiful People</h2>
|
||
|
|
<div class="cc-category"><span>Nature</span></div>
|
||
|
|
</div>
|
||
|
|
<!-- End caption -->
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End content carousel -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End project carousel -->
|
||
|
|
|
||
|
|
</div> <!-- /.more-projects-inner -->
|
||
|
|
</section>
|
||
|
|
<!-- End more projects cection -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ===========================
|
||
|
|
///// Begin footer section /////
|
||
|
|
================================
|
||
|
|
* Use class "footer-dark" to enable dark footer.
|
||
|
|
* Use class "no-margin-top" if needed.
|
||
|
|
-->
|
||
|
|
<section id="footer" class="footer-dark no-margin-top">
|
||
|
|
<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>
|