2454 lines
107 KiB
HTML
2454 lines
107 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Template: Sepia - Photography Portfolio HTML Website Template
|
||
|
|
Author: Themetorium
|
||
|
|
URL: https://themetorium.net
|
||
|
|
-->
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<title>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 intro section /////
|
||
|
|
=========================== -->
|
||
|
|
<section id="tt-intro" class="slideshow-intro">
|
||
|
|
<div class="tt-intro-inner"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
<div class="gl-carousel-wrap no-padding"> <!-- Optional: use class "no-padding" to disable paddings -->
|
||
|
|
|
||
|
|
<!-- 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-5 cursor-grab dots-right bg-dark" data-items="1" data-loop="true" data-nav="true" data-nav-speed="500" data-dots-speed="500" data-autoplay="true" data-autoplay-timeout="8000" data-autoplay-speed="500" data-autoplay-hover-pause="true">
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Element cover -->
|
||
|
|
<span class="cover bg-transparent-3-dark"></span>
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image bg-image" style="background-image: url(assets/img/intro/intro-10.jpg); background-position: 50% 50%;"></div>
|
||
|
|
|
||
|
|
<!-- Begin intro caption
|
||
|
|
=========================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "intro-caption-xs", "intro-caption-sm", "intro-caption-lg", "intro-caption-xlg", "intro-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="intro-caption caption-animate intro-caption-xxlg center-left">
|
||
|
|
<h1 class="intro-title">Sepia</h1>
|
||
|
|
<h2 class="intro-subtitle">Photography Portfolio Theme</h2>
|
||
|
|
|
||
|
|
<p class="intro-description max-width-650">
|
||
|
|
Made for photographers, photo studios, design agencies. <br>
|
||
|
|
Create your own unique and beautiful photography website!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="margin-top-30">
|
||
|
|
<a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" class="btn btn-primary margin-top-5 margin-right-10" target="_blank">Buy It Now!</a>
|
||
|
|
<a href="albums-grid-fluid-2.html" class="btn btn-white-bordered margin-top-5">Discover More</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End intro caption -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Element cover -->
|
||
|
|
<span class="cover bg-transparent-3-dark"></span>
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image bg-image" style="background-image: url(assets/img/intro/intro-11.jpg); background-position: 50% 50%;"></div>
|
||
|
|
|
||
|
|
<!-- Begin intro caption
|
||
|
|
=========================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "intro-caption-xs", "intro-caption-sm", "intro-caption-lg", "intro-caption-xlg", "intro-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="intro-caption caption-animate intro-caption-xxlg center-left">
|
||
|
|
<h1 class="intro-title">Creative</h1>
|
||
|
|
<h2 class="intro-subtitle">Photography Portfolio Theme</h2>
|
||
|
|
|
||
|
|
<p class="intro-description max-width-650">
|
||
|
|
Made for photographers, photo studios, design agencies. <br>
|
||
|
|
Create your own unique and beautiful photography website!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="margin-top-30">
|
||
|
|
<a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" class="btn btn-primary margin-top-5 margin-right-10" target="_blank">Buy It Now!</a>
|
||
|
|
<a href="albums-grid-fluid-2.html" class="btn btn-white-bordered margin-top-5">Discover More</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End intro caption -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Element cover -->
|
||
|
|
<span class="cover bg-transparent-3-dark"></span>
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image bg-image" style="background-image: url(assets/img/intro/intro-12.jpg); background-position: 50% 50%;"></div>
|
||
|
|
|
||
|
|
<!-- Begin intro caption
|
||
|
|
=========================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "intro-caption-xs", "intro-caption-sm", "intro-caption-lg", "intro-caption-xlg", "intro-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="intro-caption caption-animate intro-caption-xxlg center-left">
|
||
|
|
<h1 class="intro-title">Powerful</h1>
|
||
|
|
<h2 class="intro-subtitle">Photography Portfolio Theme</h2>
|
||
|
|
|
||
|
|
<p class="intro-description max-width-650">
|
||
|
|
Made for photographers, photo studios, design agencies. <br>
|
||
|
|
Create your own unique and beautiful photography website!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="margin-top-30">
|
||
|
|
<a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" class="btn btn-primary margin-top-5 margin-right-10" target="_blank">Buy It Now!</a>
|
||
|
|
<a href="albums-grid-fluid-2.html" class="btn btn-white-bordered margin-top-5">Discover More</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End intro caption -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Element cover -->
|
||
|
|
<span class="cover bg-transparent-3-dark"></span>
|
||
|
|
|
||
|
|
<!-- cc image -->
|
||
|
|
<div class="cc-image bg-image" style="background-image: url(assets/img/intro/intro-13.jpg); background-position: 50% 50%;"></div>
|
||
|
|
|
||
|
|
<!-- Begin intro caption
|
||
|
|
=========================
|
||
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
||
|
|
* Size classes: "intro-caption-xs", "intro-caption-sm", "intro-caption-lg", "intro-caption-xlg", "intro-caption-xxlg".
|
||
|
|
-->
|
||
|
|
<div class="intro-caption caption-animate intro-caption-xxlg center-left">
|
||
|
|
<h1 class="intro-title">Perfect</h1>
|
||
|
|
<h2 class="intro-subtitle">Photography Portfolio Theme</h2>
|
||
|
|
|
||
|
|
<p class="intro-description max-width-650">
|
||
|
|
Made for photographers, photo studios, design agencies. <br>
|
||
|
|
Create your own unique and beautiful photography website!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="margin-top-30">
|
||
|
|
<a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" class="btn btn-primary margin-top-5 margin-right-10" target="_blank">Buy It Now!</a>
|
||
|
|
<a href="albums-grid-fluid-2.html" class="btn btn-white-bordered margin-top-5">Discover More</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End intro caption -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<!-- <div class="cc-item">
|
||
|
|
<a class="owl-video" href="https://vimeo.com/7282791"></a>
|
||
|
|
|
||
|
|
<div class="intro-caption caption-animate intro-caption-xxlg center-left">
|
||
|
|
<h1 class="intro-title">Sepia</h1>
|
||
|
|
<h2 class="intro-subtitle">Photography Portfolio Theme</h2>
|
||
|
|
|
||
|
|
<p class="intro-description max-width-650">
|
||
|
|
Made for photographers, photo studios, design agencies. <br>
|
||
|
|
Create your own unique and beautiful photography website!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="margin-top-30">
|
||
|
|
<a href="https://themeforest.net/item/sepia-photography-portfolio-html-website-template/20195226?ref=Themetorium" class="btn btn-primary margin-top-5 margin-right-10" target="_blank">Buy It Now!</a>
|
||
|
|
<a href="albums-grid-fluid-2.html" class="btn btn-white-bordered margin-top-5">Discover More</a>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End content carousel -->
|
||
|
|
|
||
|
|
</div> <!-- /.gl-carousel-wrap -->
|
||
|
|
</div> <!-- /.tt-intro-inner -->
|
||
|
|
</section>
|
||
|
|
<!-- End intro section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =============================
|
||
|
|
///// Begin about me section /////
|
||
|
|
============================== -->
|
||
|
|
<section id="about-me-section">
|
||
|
|
<div class="about-me-inner"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
|
||
|
|
<!-- ======================
|
||
|
|
///// Begin split box /////
|
||
|
|
based on: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
|
||
|
|
======================= -->
|
||
|
|
<div class="split-box about-me">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="row-lg-height">
|
||
|
|
|
||
|
|
<!-- Column -->
|
||
|
|
<div class="col-lg-5 col-lg-height split-box-image no-padding bg-image" style="background-image: url(assets/img/misc/me-2.jpg); background-position: 50% 50%;">
|
||
|
|
|
||
|
|
<!-- Split box image height
|
||
|
|
============================
|
||
|
|
* You can use prepared "padding-height-*" helper classes to set split box image height. Example: "padding-height-85" (useful if "split-box-content" contend/text is very short). Also you can use class "full-height-vh" for full height image. Find out "helper.css" file for more info. Note: class "sbi-height" is required.
|
||
|
|
-->
|
||
|
|
<div class="sbi-height padding-height-80"></div>
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<!-- Column -->
|
||
|
|
<div class="col-lg-7 col-lg-height col-lg-middle no-padding">
|
||
|
|
|
||
|
|
<div class="full-cover for-light-style bg-gray-3 bg-image" style="background-image: url(assets/img/pattern/bg-pattern-1-light.png); background-position: 50% 50%;"></div>
|
||
|
|
<div class="full-cover for-dark-style bg-gray-3 bg-image" style="background-image: url(assets/img/pattern/bg-pattern-1-dark.png); background-position: 50% 50%;"></div>
|
||
|
|
|
||
|
|
<!-- Begin split box content
|
||
|
|
=============================
|
||
|
|
* Use class "shifted-left" or "shifted-right" to enable shifted content (do not use for long content).
|
||
|
|
-->
|
||
|
|
<div class="split-box-content sb-content-right" >
|
||
|
|
|
||
|
|
<!-- 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">
|
||
|
|
<div class="tt-heading-inner">
|
||
|
|
<h1 class="tt-heading-title">About</h1>
|
||
|
|
<div class="tt-heading-subtitle">Who I am and what I do</div>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div> <!-- /.tt-heading-inner -->
|
||
|
|
</div>
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
<div class="margin-top-30">
|
||
|
|
<p>Hi, my name is <strong>Martin Vegas</strong>. I am an artist and photographer. Nemo enim ipsam voluptatem quia voluptas aspernatur aut odit aut fugit. Vivamus at nibh tincidunt, bibendum ligula id. Nemo enim ipsam voluptatem quiatotam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a href="about-me-fluid.html" class="btn btn-primary margin-top-20">Read More</a>
|
||
|
|
<a href="contact.html" class="btn btn-dark margin-top-20">Hire Me!</a>
|
||
|
|
|
||
|
|
<!-- Begin signature -->
|
||
|
|
<!-- <div class="signature">
|
||
|
|
<img class="signature-dark" src="assets/img/signature-dark.png" alt="">
|
||
|
|
<img class="signature-light" src="assets/img/signature-light.png" alt="">
|
||
|
|
</div> -->
|
||
|
|
<!-- End signature -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End split box content -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
</div> <!-- /.row-height -->
|
||
|
|
</div> <!-- /.row -->
|
||
|
|
</div> <!-- /.container -->
|
||
|
|
</div>
|
||
|
|
<!-- End split box -->
|
||
|
|
|
||
|
|
</div> <!-- /.about-me-inner -->
|
||
|
|
</section>
|
||
|
|
<!-- End about me section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =================================
|
||
|
|
///// Begin gallery list section /////
|
||
|
|
================================== -->
|
||
|
|
<section id="gallery-list-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 tt-heading-lg padding-on text-center">
|
||
|
|
<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">Latest Works</h1>
|
||
|
|
<div class="tt-heading-subtitle">My latest photo projects / <a href="categories-grid.html">View All</a></div>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div> <!-- /.tt-heading-inner -->
|
||
|
|
</div>
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
<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">
|
||
|
|
|
||
|
|
<!-- 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 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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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 -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// 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-4.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">12</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">Afternoon Photoshoot</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-5.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">96</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">Sit Back and Relax</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Portraits</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-6.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">56</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">Something In The Water vol.2</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a>, <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-7.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">53</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">Autumn Nights</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-8.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">71</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">Beauty & Fashion</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 -->
|
||
|
|
|
||
|
|
<!-- =====================
|
||
|
|
/// 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-9.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">68</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">No Colors This Time</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-10.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">32</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">Monday's Monochromes</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-11.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">13</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">Something In The Water</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Fashion</a>, <a href="albums-archive.html">Portraits</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-12.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>
|
||
|
|
<div class="img-count" title="Image count"><i class="fas fa-camera"></i> 32</div>
|
||
|
|
</li> -->
|
||
|
|
<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">11</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">Beautiful Bride</a></h2>
|
||
|
|
<span class="gl-item-category"><a href="albums-archive.html">Outdoor</a>, <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 -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 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 list section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ===========================
|
||
|
|
///// Begin prices section /////
|
||
|
|
============================ -->
|
||
|
|
<section id="prices-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 tt-heading-lg padding-on">
|
||
|
|
<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! ) -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-4">
|
||
|
|
|
||
|
|
<h1 class="tt-heading-title">Services & Pricing</h1>
|
||
|
|
<div class="tt-heading-subtitle">Please choose your package</div>
|
||
|
|
<hr class="hr-short">
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<div class="col-md-8">
|
||
|
|
<p>Nunc euismod ipsum vel metus rhoncus, a accumsan sapien mollis. Donec malesuada lacus rhoncus ipsum dignissim, sed fringilla orci faucibus. Proin non odio dui. Donec ut tristique dolor, at interdum sem. Quisque finibus viverra lectus vitae pulvinar.</p>
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
</div> <!-- /.row -->
|
||
|
|
|
||
|
|
</div> <!-- /.tt-heading-inner -->
|
||
|
|
</div>
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
<div class="prices-section-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
|
||
|
|
<!-- Begin price boxes container
|
||
|
|
================================= -->
|
||
|
|
<div class="price-boxes-container margin-bottom-80">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||
|
|
|
||
|
|
<!-- Begin price box -->
|
||
|
|
<div class="price-box">
|
||
|
|
<div class="pr-box price-heading bg-image" style="background-image: url(assets/img/misc/price-box-1.jpg);">
|
||
|
|
<div class="price-heading-inner">
|
||
|
|
<i class="fas fa-umbrella"></i>
|
||
|
|
<h3 class="price-title">Studio</h3>
|
||
|
|
<div class="price-heading-text">Studio Photo Session</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-box-price">
|
||
|
|
<div class="price"><span class="price-currency">$</span>59</div>
|
||
|
|
<!-- <div class="price-tenure">Per 1 Month</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-features">
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Ascimo Ellan Tareck</li>
|
||
|
|
<li>Fitrim Namzeck</li>
|
||
|
|
<li>Fartimo antera Maunos</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box">
|
||
|
|
<a href="contact.html" class="btn btn-price-box btn-dark btn-lg">Purchase Now</a>
|
||
|
|
<a href="page-dummy-classic-sidebar-right.html" class="btn btn-link btn-lg btn-block">or Read More...</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End price box -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||
|
|
|
||
|
|
<!-- Begin price box (featured) -->
|
||
|
|
<div class="price-box price-box-featured">
|
||
|
|
<div class="pr-box price-heading bg-image" style="background-image: url(assets/img/misc/price-box-2.jpg);">
|
||
|
|
<div class="price-heading-inner">
|
||
|
|
<i class="fas fa-tree"></i>
|
||
|
|
<h3 class="price-title">Outdoor</h3>
|
||
|
|
<div class="price-heading-text">Outdoor Photo Session</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-box-price">
|
||
|
|
<div class="price"><span class="price-currency">$</span>89</div>
|
||
|
|
<!-- <div class="price-tenure">Per 6 Month</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-features">
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Cunning Fuziness</li>
|
||
|
|
<li>Lartem Sainter Omna</li>
|
||
|
|
<li>Bullerti Naiten</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box">
|
||
|
|
<a href="contact.html" class="btn btn-price-box btn-dark btn-lg">Purchase Now</a>
|
||
|
|
<a href="page-dummy-classic-sidebar-right.html" class="btn btn-link btn-lg btn-block">or Read More...</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End price box -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||
|
|
|
||
|
|
<!-- Begin price box -->
|
||
|
|
<div class="price-box">
|
||
|
|
<div class="pr-box price-heading bg-image" style="background-image: url(assets/img/misc/price-box-3.jpg);">
|
||
|
|
<div class="price-heading-inner">
|
||
|
|
<i class="fas fa-user"></i>
|
||
|
|
<h3 class="price-title">Personal</h3>
|
||
|
|
<div class="price-heading-text">Personal Photo Session</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-box-price">
|
||
|
|
<div class="price"><span class="price-currency">$</span>129</div>
|
||
|
|
<!-- <div class="price-tenure">Per 1 Year</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-features">
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Artemize Naice Femme</li>
|
||
|
|
<li><strong>Putras Torrim</strong></li>
|
||
|
|
<li>10 Voites Trante</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box">
|
||
|
|
<a href="contact.html" class="btn btn-price-box btn-dark btn-lg">Purchase Now</a>
|
||
|
|
<a href="page-dummy-classic-sidebar-right.html" class="btn btn-link btn-lg btn-block">or Read More...</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End price box -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
|
||
|
|
|
||
|
|
<!-- Begin price box -->
|
||
|
|
<div class="price-box">
|
||
|
|
<div class="pr-box price-heading bg-image" style="background-image: url(assets/img/misc/price-box-4.jpg);">
|
||
|
|
<div class="price-heading-inner">
|
||
|
|
<i class="fas fa-gem"></i>
|
||
|
|
<h3 class="price-title">Wedding</h3>
|
||
|
|
<div class="price-heading-text">Wedding Photo Session</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-box-price">
|
||
|
|
<div class="price"><span class="price-currency">$</span>299</div>
|
||
|
|
<!-- <div class="price-tenure">Per 1 Year</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="pr-box price-features">
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li>Mollimo Namis Ferra</li>
|
||
|
|
<li><strong>Oppera Tulpas</strong></li>
|
||
|
|
<li><strong>Verrum Daster Hunza</strong></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="pr-box">
|
||
|
|
<a href="contact.html" class="btn btn-price-box btn-dark btn-lg">Purchase Now</a>
|
||
|
|
<a href="page-dummy-classic-sidebar-right.html" class="btn btn-link btn-lg btn-block">or Read More...</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End price box -->
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
</div> <!-- /.row -->
|
||
|
|
|
||
|
|
<div class="row margin-top-70 margin-auto max-width-800">
|
||
|
|
<div class="col-md-12 text-center">
|
||
|
|
<p>Duis mattis quam quis quam cursus, a rutrum ante luctus.
|
||
|
|
Phasellus porta ornare enim ac euismod. Nulla fringilla
|
||
|
|
lectus ac tincidunt viverra a accumsan <a href="#">sapien mollis</a>.</p>
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
</div> <!-- /.row -->
|
||
|
|
</div>
|
||
|
|
<!-- End price boxes container -->
|
||
|
|
|
||
|
|
</div> <!-- /.prices-section-inner -->
|
||
|
|
</section>
|
||
|
|
<!-- End prices section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- =================================
|
||
|
|
///// Begin testimonials section /////
|
||
|
|
================================== -->
|
||
|
|
<section id="testimonials-section" class="bg-dark bg-image-fixed" style="background-image: url(assets/img/misc/misc-4.jpg); background-position: 50% 50%;">
|
||
|
|
|
||
|
|
<!-- Element cover -->
|
||
|
|
<span class="cover bg-transparent-7-dark"></span>
|
||
|
|
|
||
|
|
<div class="testimonials-section-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
|
||
|
|
<!-- Begin testimonials carousel
|
||
|
|
=================================
|
||
|
|
* Use class "tm-hide-image" to hide testimonial image.
|
||
|
|
* Use class "tm-center" or "tm-right" to align testimonials.
|
||
|
|
-->
|
||
|
|
<div class="testimonials-carousel tm-center">
|
||
|
|
|
||
|
|
<!-- 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 text-center">
|
||
|
|
<div class="tt-heading-inner tt-wrap">
|
||
|
|
<h1 class="tt-heading-title text-white">Testimonials</h1>
|
||
|
|
<div class="tt-heading-subtitle text-gray-3">What customers say</div>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 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 cursor-grab nav-outside dots-outside" data-items="1" data-loop="true" data-autoheight="true" data-nav="true" data-nav-speed="500" data-dots-speed="500" data-autoplay="true" data-autoplay-timeout="8000" data-autoplay-speed="500" data-autoplay-hover-pause="true">
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin testimonial item -->
|
||
|
|
<div class="testimonial-item text-white">
|
||
|
|
<div class="tm-image bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-2.jpg); background-position: 50% 50%;"></div>
|
||
|
|
<blockquote>
|
||
|
|
<p>"Duis vel ligula non neque varius eleifend quis id elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse lacus dui, pellentesque ut porta et, consequat sit amet."</p>
|
||
|
|
<small>Anna Clarkson</small>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<!-- End testimonial item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin testimonial item -->
|
||
|
|
<div class="testimonial-item text-white">
|
||
|
|
<div class="tm-image bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-3.jpg); background-position: 50% 50%;"></div>
|
||
|
|
<blockquote>
|
||
|
|
<p>"Maecenas sit amet diam iaculis, lobortis tortor sed, bibendum quam. Nam mauris odio, sodales interdum facilisis in, dignissim et massa. In suscipit quam nisi."</p>
|
||
|
|
<small>John Smith</small>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<!-- End testimonial item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin testimonial item -->
|
||
|
|
<div class="testimonial-item text-white">
|
||
|
|
<div class="tm-image bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-4.jpg); background-position: 50% 50%;"></div>
|
||
|
|
<blockquote>
|
||
|
|
<p>"Proin at tincidunt leo. Morbi ut metus sit amet purus molestie sollicitudin. Maecenas convallis est vitae neque feugiat, in accumsan odio vestibulum. Pellentesque sodales fermentum porttitor."</p>
|
||
|
|
<small>Jack Paterson</small>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<!-- End testimonial item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End content carousel -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End testimonials carousel -->
|
||
|
|
|
||
|
|
</div> <!-- /.tt-intro-inner -->
|
||
|
|
</section>
|
||
|
|
<!-- End testimonials section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ================================
|
||
|
|
///// Begin latest news section /////
|
||
|
|
================================= -->
|
||
|
|
<section id="latest-news-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 tt-heading-lg padding-on text-center">
|
||
|
|
<div class="tt-heading-inner tt-wrap">
|
||
|
|
<h1 class="tt-heading-title">Latest From Blog</h1>
|
||
|
|
<div class="tt-heading-subtitle">News, Reviews, Tips & Tricks</div>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
<div class="latest-news-section-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
|
||
|
|
<!-- Begin latest news carousel
|
||
|
|
================================ -->
|
||
|
|
<div class="latest-news-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 cursor-grab nav-outside-top" data-items="3" data-margin="30" data-loop="true" data-dots="false" data-nav="true" data-nav-speed="500" data-autoplay="true" data-autoplay-timeout="5000" data-autoplay-speed="500" data-autoplay-hover-pause="true" data-tablet-landscape="3" data-tablet-portrait="2" data-mobile-landscape="1" data-mobile-portrait="1">
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin blog list item -->
|
||
|
|
<article class="blog-list-item">
|
||
|
|
|
||
|
|
<!-- Blog list item image -->
|
||
|
|
<a href="blog-single.html" class="bl-item-image"><img src="assets/img/blog/list/blog-1.jpg" alt="image"></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item info -->
|
||
|
|
<div class="bl-item-info">
|
||
|
|
<div class="bl-item-category"><a href="blog-archive.html">Photography</a></div>
|
||
|
|
<a href="blog-single.html" class="bl-item-title"><h2>5 Reasons You Should Fall In Love With Photography</h2></a>
|
||
|
|
<div class="bl-item-meta">
|
||
|
|
<span class="published">May 26, 2017</span>
|
||
|
|
<span class="posted-by">- by <a href="#" title="View all posts by Martin Vegas">Martin Vegas</a></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
||
|
|
<div class="bl-item-desc" data-max-words="14">Suspendisse imperdiet ante at tortor consequat consectetur. Quisque rhoncus blandit justo praesen congue convallis artula ellis.</div>
|
||
|
|
|
||
|
|
<a href="blog-single.html" class="bl-item-read-more" title="Read More"><span></span></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item attributes -->
|
||
|
|
<ul class="bl-item-attr">
|
||
|
|
<li>
|
||
|
|
<!-- Begin comments count -->
|
||
|
|
<a href="blog-single.html#blog-post-comments" class="bl-item-comments-count" title="Read the comments"><i class="far fa-comment"></i> 10</a>
|
||
|
|
<!-- End comments count -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn active">
|
||
|
|
<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">48</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End blog list item attributes -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End blog list item info -->
|
||
|
|
|
||
|
|
</article>
|
||
|
|
<!-- End blog list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin blog list item -->
|
||
|
|
<article class="blog-list-item">
|
||
|
|
|
||
|
|
<!-- Blog list item image -->
|
||
|
|
<a href="blog-single.html" class="bl-item-image"><img src="assets/img/blog/list/blog-2.jpg" alt="image"></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item info -->
|
||
|
|
<div class="bl-item-info">
|
||
|
|
<div class="bl-item-category"><a href="blog-archive.html">Equipment</a></div>
|
||
|
|
<a href="blog-single.html" class="bl-item-title"><h2>10 Top Choices for Aerial Photography</h2></a>
|
||
|
|
<div class="bl-item-meta">
|
||
|
|
<span class="published">May 26, 2017</span>
|
||
|
|
<span class="posted-by">- by <a href="#" title="View all posts by Martin Vegas">John Young</a></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
||
|
|
<div class="bl-item-desc" data-max-words="14">Suspendisse imperdiet ante at tortor consequat consectetur. Quisque rhoncus blandit justo praesen congue convallis artula ellis.</div>
|
||
|
|
|
||
|
|
<a href="blog-single.html" class="bl-item-read-more" title="Read More"><span></span></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item attributes -->
|
||
|
|
<ul class="bl-item-attr">
|
||
|
|
<li>
|
||
|
|
<!-- Begin comments count -->
|
||
|
|
<a href="blog-single.html#blog-post-comments" class="bl-item-comments-count" title="Read the comments"><i class="far fa-comment"></i> 66</a>
|
||
|
|
<!-- End comments count -->
|
||
|
|
</li>
|
||
|
|
<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">98</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End blog list item attributes -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End blog list item info -->
|
||
|
|
|
||
|
|
</article>
|
||
|
|
<!-- End blog list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin blog list item -->
|
||
|
|
<article class="blog-list-item">
|
||
|
|
|
||
|
|
<!-- Blog list item image -->
|
||
|
|
<a href="blog-single.html" class="bl-item-image"><img src="assets/img/blog/list/blog-3.jpg" alt="image"></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item info -->
|
||
|
|
<div class="bl-item-info">
|
||
|
|
<div class="bl-item-category"><a href="blog-archive.html">Travel</a></div>
|
||
|
|
<a href="blog-single.html" class="bl-item-title"><h2>How to Take Professional Travel Photos</h2></a>
|
||
|
|
<div class="bl-item-meta">
|
||
|
|
<span class="published">May 26, 2017</span>
|
||
|
|
<span class="posted-by">- by <a href="#" title="View all posts by Martin Vegas">Anna Vernik</a></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
||
|
|
<div class="bl-item-desc" data-max-words="14">Suspendisse imperdiet ante at tortor consequat consectetur. Quisque rhoncus blandit justo praesen congue convallis artula ellis.</div>
|
||
|
|
|
||
|
|
<a href="blog-single.html" class="bl-item-read-more" title="Read More"><span></span></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item attributes -->
|
||
|
|
<ul class="bl-item-attr">
|
||
|
|
<li>
|
||
|
|
<!-- Begin comments count -->
|
||
|
|
<a href="blog-single.html#blog-post-comments" class="bl-item-comments-count" title="Read the comments"><i class="far fa-comment"></i> 3</a>
|
||
|
|
<!-- End comments count -->
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<!-- Begin favorite button -->
|
||
|
|
<div class="favorite-btn active">
|
||
|
|
<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">54</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End blog list item attributes -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End blog list item info -->
|
||
|
|
|
||
|
|
</article>
|
||
|
|
<!-- End blog list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin blog list item -->
|
||
|
|
<article class="blog-list-item">
|
||
|
|
|
||
|
|
<!-- Blog list item image -->
|
||
|
|
<a href="blog-single.html" class="bl-item-image"><img src="assets/img/blog/list/blog-4.jpg" alt="image"></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item info -->
|
||
|
|
<div class="bl-item-info">
|
||
|
|
<div class="bl-item-category"><a href="blog-archive.html">Photography</a></div>
|
||
|
|
<a href="blog-single.html" class="bl-item-title"><h2>5 Tips Your Camera Manual Never Told You About Portrait Photography</h2></a>
|
||
|
|
<div class="bl-item-meta">
|
||
|
|
<span class="published">May 26, 2017</span>
|
||
|
|
<span class="posted-by">- by <a href="#" title="View all posts by Martin Vegas">Julia Beck</a></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
||
|
|
<div class="bl-item-desc" data-max-words="14">Suspendisse imperdiet ante at tortor consequat consectetur. Quisque rhoncus blandit justo praesen congue convallis artula ellis.</div>
|
||
|
|
|
||
|
|
<a href="blog-single.html" class="bl-item-read-more" title="Read More"><span></span></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item attributes -->
|
||
|
|
<ul class="bl-item-attr">
|
||
|
|
<li>
|
||
|
|
<!-- Begin comments count -->
|
||
|
|
<a href="blog-single.html#blog-post-comments" class="bl-item-comments-count" title="Read the comments"><i class="far fa-comment"></i> 0</a>
|
||
|
|
<!-- End comments count -->
|
||
|
|
</li>
|
||
|
|
<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">3</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End blog list item attributes -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End blog list item info -->
|
||
|
|
|
||
|
|
</article>
|
||
|
|
<!-- End blog list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin blog list item -->
|
||
|
|
<article class="blog-list-item">
|
||
|
|
|
||
|
|
<!-- Blog list item image -->
|
||
|
|
<a href="blog-single.html" class="bl-item-image"><img src="assets/img/blog/list/blog-5.jpg" alt="image"></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item info -->
|
||
|
|
<div class="bl-item-info">
|
||
|
|
<div class="bl-item-category"><a href="blog-archive.html">Photography</a></div>
|
||
|
|
<a href="blog-single.html" class="bl-item-title"><h2>Most Common Wedding Photography Mistakes Every Beginner Will Make</h2></a>
|
||
|
|
<div class="bl-item-meta">
|
||
|
|
<span class="published">May 26, 2017</span>
|
||
|
|
<span class="posted-by">- by <a href="#" title="View all posts by Martin Vegas">Martin Vegas</a></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
||
|
|
<div class="bl-item-desc" data-max-words="14">Suspendisse imperdiet ante at tortor consequat consectetur. Quisque rhoncus blandit justo praesen congue convallis artula ellis.</div>
|
||
|
|
|
||
|
|
<a href="blog-single.html" class="bl-item-read-more" title="Read More"><span></span></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item attributes -->
|
||
|
|
<ul class="bl-item-attr">
|
||
|
|
<li>
|
||
|
|
<!-- Begin comments count -->
|
||
|
|
<a href="blog-single.html#blog-post-comments" class="bl-item-comments-count" title="Read the comments"><i class="far fa-comment"></i> 8</a>
|
||
|
|
<!-- End comments count -->
|
||
|
|
</li>
|
||
|
|
<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">71</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End blog list item attributes -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End blog list item info -->
|
||
|
|
|
||
|
|
</article>
|
||
|
|
<!-- End blog list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
<!-- Begin carousel item
|
||
|
|
========================= -->
|
||
|
|
<div class="cc-item">
|
||
|
|
|
||
|
|
<!-- Begin blog list item -->
|
||
|
|
<article class="blog-list-item">
|
||
|
|
|
||
|
|
<!-- Blog list item image -->
|
||
|
|
<a href="blog-single.html" class="bl-item-image"><img src="assets/img/blog/list/blog-6.jpg" alt="image"></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item info -->
|
||
|
|
<div class="bl-item-info">
|
||
|
|
<div class="bl-item-category"><a href="blog-archive.html">Food</a> <a href="#">Photography</a></div>
|
||
|
|
<a href="blog-single.html" class="bl-item-title"><h2>The Serious Eats Guide to Food Photography</h2></a>
|
||
|
|
<div class="bl-item-meta">
|
||
|
|
<span class="published">May 26, 2017</span>
|
||
|
|
<span class="posted-by">- by <a href="#" title="View all posts by Martin Vegas">Martin Vegas</a></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
||
|
|
<div class="bl-item-desc" data-max-words="14">Suspendisse imperdiet ante at tortor consequat consectetur. Quisque rhoncus blandit justo praesen congue convallis artula ellis.</div>
|
||
|
|
|
||
|
|
<a href="blog-single.html" class="bl-item-read-more" title="Read More"><span></span></a>
|
||
|
|
|
||
|
|
<!-- Begin blog list item attributes -->
|
||
|
|
<ul class="bl-item-attr">
|
||
|
|
<li>
|
||
|
|
<!-- Begin comments count -->
|
||
|
|
<a href="blog-single.html#blog-post-comments" class="bl-item-comments-count" title="Read the comments"><i class="far fa-comment"></i> 28</a>
|
||
|
|
<!-- End comments count -->
|
||
|
|
</li>
|
||
|
|
<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">65</div>
|
||
|
|
</div>
|
||
|
|
<!-- End favorite button -->
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- End blog list item attributes -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End blog list item info -->
|
||
|
|
|
||
|
|
</article>
|
||
|
|
<!-- End blog list item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End carousel item -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End content carousel -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End latest news carousel -->
|
||
|
|
|
||
|
|
</div> <!-- /.latest-news-section-inner -->
|
||
|
|
</section>
|
||
|
|
<!-- End latest news section -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ===================================
|
||
|
|
///// Begin call to action section /////
|
||
|
|
==================================== -->
|
||
|
|
<section class="call-to-action-section bg-gray-3 margin-top-60">
|
||
|
|
|
||
|
|
<div class="full-cover for-light-style bg-image" style="background-image: url(assets/img/pattern/bg-pattern-2-light.png); background-position: 50% 50%;"></div>
|
||
|
|
<div class="full-cover for-dark-style bg-image" style="background-image: url(assets/img/pattern/bg-pattern-2-dark.png); background-position: 50% 50%;"></div>
|
||
|
|
|
||
|
|
<div class="call-to-action-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 text-center">
|
||
|
|
|
||
|
|
<!-- 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 text-center">
|
||
|
|
<div class="tt-heading-inner tt-wrap">
|
||
|
|
<h1 class="tt-heading-title">What Next?</h1>
|
||
|
|
<div class="tt-heading-subtitle">Interested in working with me?</div>
|
||
|
|
<hr class="hr-short">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- End tt-heading -->
|
||
|
|
|
||
|
|
<div class="margin-top-30 max-width-1000 margin-auto">
|
||
|
|
<p>Fusce et velit sed augue rhoncus tempor. Sed ac lacinia augue, nec lacinia felis. Sed sit amet diam leo. Praesent vel malesuada arcu. Donec mattis, arcu vel vehicula feugiat, sem turpis dignissim ex, eu sollicitudin neque.</p>
|
||
|
|
|
||
|
|
<div class="margin-top-30">
|
||
|
|
<a href="page-dummy-modern.html" class="btn btn-dark margin-top-5 margin-right-5">Read More</a>
|
||
|
|
<a href="contact.html" class="btn btn-primary margin-top-5">Let's Work Together!</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div> <!-- /.col -->
|
||
|
|
</div> <!-- /.row -->
|
||
|
|
</div> <!-- /.call-to-action-inner -->
|
||
|
|
</section>
|
||
|
|
<!-- End call to action 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 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>
|