1645 lines
81 KiB
HTML
1645 lines
81 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!--
|
|
Template: Sepia - Photography Portfolio HTML Website Template
|
|
Author: Themetorium
|
|
URL: https://themetorium.net
|
|
-->
|
|
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<!-- Title -->
|
|
<title>Blog / 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 blog list carousel section (categories) /////
|
|
===================================================== -->
|
|
<section id="blog-list-carousel-section" class="blc-categories">
|
|
<div class="bl-carousel-wrap padding-25 tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
|
|
|
|
<!-- 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-rounded dots-right" data-items="4" data-margin="25" data-loop="true" data-nav="true" data-nav-speed="400" data-autoplay="true" data-autoplay-timeout="8000" data-autoplay-speed="400" 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">
|
|
|
|
<!-- Element cover -->
|
|
<span class="cover bg-transparent-3-dark"></span>
|
|
|
|
<!-- cc image -->
|
|
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/blog/list/categories-carousel/blog-cat-1.jpg); background-position: 50% 50%;"></div>
|
|
|
|
<!-- Begin caption
|
|
===================
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
|
-->
|
|
<div class="cc-caption cc-caption-sm center">
|
|
<h2 class="cc-title">
|
|
<a href="blog-archive.html" title="View all entries in this category">Photography</a>
|
|
</h2>
|
|
</div>
|
|
<!-- End 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 full-cover bg-image" style="background-image: url(assets/img/blog/list/categories-carousel/blog-cat-2.jpg); background-position: 50% 50%;"></div>
|
|
|
|
<!-- Begin caption
|
|
===================
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
|
-->
|
|
<div class="cc-caption cc-caption-sm center">
|
|
<h2 class="cc-title">
|
|
<a href="blog-archive.html" title="View all entries in this category">Equipment</a>
|
|
</h2>
|
|
</div>
|
|
<!-- End 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 full-cover bg-image" style="background-image: url(assets/img/blog/list/categories-carousel/blog-cat-3.jpg); background-position: 50% 50%;"></div>
|
|
|
|
<!-- Begin caption
|
|
===================
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
|
-->
|
|
<div class="cc-caption cc-caption-sm center">
|
|
<h2 class="cc-title">
|
|
<a href="blog-archive.html" title="View all entries in this category">Travel</a>
|
|
</h2>
|
|
</div>
|
|
<!-- End 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 full-cover bg-image" style="background-image: url(assets/img/blog/list/categories-carousel/blog-cat-4.jpg); background-position: 50% 50%;"></div>
|
|
|
|
<!-- Begin caption
|
|
===================
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
|
-->
|
|
<div class="cc-caption cc-caption-sm center">
|
|
<h2 class="cc-title">
|
|
<a href="blog-archive.html" title="View all entries in this category">Fashion</a>
|
|
</h2>
|
|
</div>
|
|
<!-- End 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 full-cover bg-image" style="background-image: url(assets/img/blog/list/categories-carousel/blog-cat-5.jpg); background-position: 50% 50%;"></div>
|
|
|
|
<!-- Begin caption
|
|
===================
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
|
-->
|
|
<div class="cc-caption cc-caption-sm center">
|
|
<h2 class="cc-title">
|
|
<a href="blog-archive.html" title="View all entries in this category">Food</a>
|
|
</h2>
|
|
</div>
|
|
<!-- End 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 full-cover bg-image" style="background-image: url(assets/img/blog/list/categories-carousel/blog-cat-6.jpg); background-position: 50% 50%;"></div>
|
|
|
|
<!-- Begin caption
|
|
===================
|
|
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
|
|
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
|
|
-->
|
|
<div class="cc-caption cc-caption-sm center">
|
|
<h2 class="cc-title">
|
|
<a href="blog-archive.html" title="View all entries in this category">Macro</a>
|
|
</h2>
|
|
</div>
|
|
<!-- End caption -->
|
|
|
|
</div>
|
|
<!-- End carousel item -->
|
|
|
|
</div>
|
|
<!-- End content carousel -->
|
|
|
|
</div> <!-- /.gl-carousel-wrap -->
|
|
</section>
|
|
<!-- End blog list carousel section -->
|
|
|
|
|
|
<!-- ====================================
|
|
/////// Begin blog single cection ///////
|
|
===================================== -->
|
|
<section id="blog-single-cection">
|
|
<div class="blog-single-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 no-margin">
|
|
|
|
<!-- Content column -->
|
|
<div class="col-md-8 no-padding-left no-padding-right">
|
|
|
|
<!-- Begin blog single post
|
|
============================= -->
|
|
<article class="blog-single-post lightgallery">
|
|
|
|
<!-- Begin blog single featured image -->
|
|
<a href="assets/img/blog/list/blog-1.jpg" class="blog-single-featured-image lg-trigger" data-exthumbnail="assets/img/blog/list/blog-1.jpg">
|
|
<img src="assets/img/blog/list/blog-1.jpg" alt="">
|
|
</a>
|
|
<!-- End blog single featured image -->
|
|
|
|
<!-- Begin blog single heading -->
|
|
<div class="blog-single-post-heading">
|
|
<h1 class="blog-single-post-title">5 Reasons You Should Fall In Love With Photography</h1>
|
|
<div class="blog-single-post-category"><a href="blog-archive.html">Photography</a></div>
|
|
</div>
|
|
<!-- End blog single heading -->
|
|
|
|
<!-- Begin blog single post inner -->
|
|
<div class="blog-single-post-inner">
|
|
|
|
<!-- Begin blog single attributes -->
|
|
<div class="blog-single-attributes">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
|
|
<!-- Begin blog single meta -->
|
|
<div class="blog-single-meta-wrap">
|
|
|
|
<!-- Blog single author avatar -->
|
|
<a href="" class="author-avatar pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-1.jpg);"></a>
|
|
|
|
<div class="blog-single-meta">
|
|
<div class="article-author">by: <a href="#">Martin Vegas</a></div>
|
|
<div class="article-time-cat">
|
|
<span class="article-time">May 26, 2016</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- End blog single meta -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-sm-4">
|
|
|
|
<!-- Begin blog single links -->
|
|
<ul class="blog-single-links list-unstyled list-inline">
|
|
<li>
|
|
<!-- Begin comments count -->
|
|
<a href="#blog-post-comments" class="blog-single-comment-count sm-scroll" title="Read the comments"><i class="far fa-comment"></i> 9</a>
|
|
<!-- End comments count -->
|
|
</li>
|
|
<li>
|
|
<!-- Begin views count -->
|
|
<div class="blog-single-views-count" title="Post Views"><i class="fas fa-eye"></i> 924</div>
|
|
<!-- End views count -->
|
|
</li>
|
|
</ul>
|
|
<!-- End blog single links -->
|
|
|
|
</div> <!-- /.col -->
|
|
</div> <!-- /.row -->
|
|
</div>
|
|
<!-- End blog single attributes -->
|
|
|
|
<!-- Begin post content -->
|
|
<div class="post-content">
|
|
|
|
<p class="lead">Viverra ipsum libero consequatur sit lectus convallis in vehicula enim libero eget mauris consequat nonummy. Etiam varius porta. Quam nibh porta nam euismod in. Debitis sociis phasellus feugiat luctus diam. Vitae aenean odio ligula interdum suscipit. Viverra massa blandit. Tempor sit nam.</p>
|
|
|
|
<p>At tortor quis. Aut odio nibh. Aliquet neque dis gravida adipiscing feugiat. Elit amet metus. Magna suscipit risus. Arcu elementum accumsan. Pede tincidunt mauris lobortis aliquam sed fusce libero duis senectus nec ipsum. Libero amet mi. Tempor ante est non ut libero. Enim integer mauris dapibus rutrum hymenaeos leo bibendum quisque ac quis pellentesque. Tellus vestibulum aliquet praesent praesent rhoncus nam cras varius.</p>
|
|
|
|
<br>
|
|
|
|
<h3>Single Image</h3>
|
|
|
|
<p>Dolor elit condimentum erat dapibus ac purus eleifend amet sed ac pede. Condimentum volutpat nulla. Molestie est ac. Integer perferendis donec. Venenatis id diam at justo vulputate. Volutpat maecenas eget fugiat fringilla sapien. Ultrices quam habitant augue tincidunt a. Nulla lobortis commodo. Vivamus at tortor. Nunc eget volutpat eu fusce hac. Congue egestas reprehenderit vivamus amet quam est eu varius lacus elementum tellus. Non leo faucibus aenean a ut sed nam enim.</p>
|
|
|
|
<!-- Begin single post image -->
|
|
<figure class="single-post-image">
|
|
<a href="assets/img/blog/single/img-4.jpg" class="lg-trigger" data-exthumbnail="assets/img/blog/single/img-4.jpg" data-sub-html="<h4>Image Description</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>">
|
|
<img src="assets/img/blog/single/img-4.jpg" alt="image">
|
|
</a>
|
|
<figcaption class="single-post-image-caption">
|
|
Photo by <a target="_blank" href="http://unsplash.com/">Unsplash</a>
|
|
</figcaption>
|
|
</figure>
|
|
<!-- End single post image -->
|
|
|
|
<br>
|
|
|
|
<h3>Slideshow</h3>
|
|
|
|
<p>Iaculis molestie rhoncus. Amet maecenas ut orci id dui. Et dui morbi. Non mauris nullam. Wisi gravida quis quisque mattis dolor. Etiam sociis turpis nesciunt sed lacus sed hendrerit diam. Accumsan varius venenatis arcu maecenas nulla. Aliquet tempus lobortis. Tortor nibh erat vel gravida est accumsan ut ad. Orci malesuada morbi. Luctus pharetra lectus. Vestibulum proin etiam etiam eget in. Nibh wisi velit. Pellentesque justo tellus est cras ligula. Feugiat fringilla sequi. A nunc adipiscing nisl lorem morbi tincidunt gravida ut. Totam tempor eget. Mauris nunc sodales nulla urna tortor erat scelerisque consequat ullamcorper est enim maecenas ultrices condimentum.</p>
|
|
|
|
<!-- 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 slider).
|
|
* 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 slider).
|
|
* 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!).
|
|
====================================================================
|
|
* 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 dots-right dots-rounded" data-items="1" data-nav="true" data-loop="true">
|
|
|
|
<!-- Begin carousel item
|
|
========================= -->
|
|
<a href="assets/img/blog/single/big/img-1.jpg" class="cc-item bg-image lg-trigger" style="background-image: url(assets/img/blog/single/img-1.jpg); background-position: 50% 50%;" data-exthumbnail="assets/img/blog/single/img-1.jpg"></a>
|
|
<!-- End carousel item -->
|
|
|
|
<!-- Begin carousel item
|
|
========================= -->
|
|
<a href="assets/img/blog/single/big/img-2.jpg" class="cc-item bg-image lg-trigger" style="background-image: url(assets/img/blog/single/img-2.jpg); background-position: 50% 50%;" data-exthumbnail="assets/img/blog/single/img-2.jpg"></a>
|
|
<!-- End carousel item -->
|
|
|
|
<!-- Begin carousel item
|
|
========================= -->
|
|
<a href="assets/img/blog/single/big/img-3.jpg" class="cc-item bg-image lg-trigger" style="background-image: url(assets/img/blog/single/img-3.jpg); background-position: 50% 50%;" data-exthumbnail="assets/img/blog/single/img-3.jpg"></a>
|
|
<!-- End carousel item -->
|
|
|
|
</div>
|
|
<!-- End content carousel -->
|
|
|
|
<p>Purus pede eget neque eget a. Eget mauris justo vehicula et metus nec primis tincidunt. Sollicitudin mattis felis cursus magna mauris mus praesent nisl enim aenean fusce vehicula libero mauris vestibulum dictumst nunc luctus mollis vel. Et con nulla proin blandit.</p>
|
|
|
|
<br>
|
|
|
|
<h3>Blockquote</h3>
|
|
|
|
<blockquote>Non mauris nullam. Wisi gravida quis quisque mattis dolor. Etiam sociis turpis nesciunt sed lacus sed hendrerit diam. Accumsan varius venenatis arcu maecenas nulla. Aliquet tempus lobortis. Tortor nibh erat vel gravida est accumsan ut ad. Orci malesuada morbi. Luctus pharetra lectus.</blockquote>
|
|
|
|
<br>
|
|
|
|
<h3>Video Embed</h3>
|
|
|
|
<p>Quis ante id eros orci eget. Ac egestas praesent aliquam nisl in vitae aliquam vitae. Vivamus sed elementum. Sem sed sed. Hendrerit elit eget sem pellentesque a. Velit elit lacinia mattis amet nunc. Fames ipsum rhoncus. Natoque posuere nam commodo mattis orci. Aliquet praesent tempor ac dolor aliquet. Risus mi vitae hendrerit orci vitae amet libero id eget quis nullam. Sed elit cubilia blandit viverra dui semper donec congue. Ac vestibulum venenatis. Risus commodo senectus et natoque euismod quis eros mollis. Vel commodo sem vel nonummy purus.</p>
|
|
|
|
<!-- Begin Vimeo embed video -->
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe data-src="https://player.vimeo.com/video/126945693" allowfullscreen=""></iframe>
|
|
</div>
|
|
<!-- End Vimeo embed video -->
|
|
|
|
</div>
|
|
<!-- End post content -->
|
|
|
|
<!-- Begin blog single attributes -->
|
|
<div class="blog-single-attributes margin-top-60">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
|
|
<!-- Begin blog single tags -->
|
|
<div class="blog-single-tags">
|
|
<ul>
|
|
<li><span>Tags:</span></li>
|
|
<li><a href="">#photography</a> </li>
|
|
<li><a href="">#travel</a> </li>
|
|
<li><a href="">#motion</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End blog single tags -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-sm-4 text-right">
|
|
|
|
<!-- Begin blog single links -->
|
|
<ul class="blog-single-links list-unstyled list-inline">
|
|
<li>
|
|
<!-- Begin add to favorites button -->
|
|
<div class="favorite-btn">
|
|
<div class="fav-inner">
|
|
<div class="icon-heart">
|
|
<span class="icon-heart-empty" title="Like"></span>
|
|
<span class="icon-heart-filled" title="Unlike"></span>
|
|
</div>
|
|
</div>
|
|
<div class="fav-count" title="Like counter">56</div>
|
|
</div>
|
|
<!-- End add to favorites button -->
|
|
</li>
|
|
|
|
<li>
|
|
<!-- Begin leave a comment button -->
|
|
<a href="#post-comment-form" class="leave-comment-btn sm-scroll">Leave a Comment</a>
|
|
<!-- End leave a comment button -->
|
|
</li>
|
|
</ul>
|
|
<!-- End blog single links -->
|
|
|
|
</div> <!-- /.col -->
|
|
</div> <!-- /.col -->
|
|
</div>
|
|
<!-- End blog single attributes -->
|
|
|
|
<!-- Begin blog single post share -->
|
|
<div class="blog-single-share">
|
|
<ul>
|
|
<li class="bss-text">Share:</li>
|
|
<li><a href="#0" class="btn btn-social-min btn-facebook btn-sm" title="Share on facebook"><i class="fab fa-facebook-f"></i></a></li>
|
|
<li><a href="#0" class="btn btn-social-min btn-twitter btn-sm" title="Share on twitter"><i class="fab fa-twitter"></i></a></li>
|
|
<li><a href="#0" class="btn btn-social-min btn-google btn-sm" title="Share on google+"><i class="fab fa-google-plus-g"></i></a></li>
|
|
<li><a href="#0" class="btn btn-social-min btn-pinterest btn-sm" title="Share on pinterest"><i class="fab fa-pinterest-p"></i></a></li>
|
|
<li><a href="#0" class="btn btn-social-min btn-linkedin btn-sm" title="Share on linkedin"><i class="fab fa-linkedin-in"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End blog single post share -->
|
|
|
|
</div>
|
|
<!-- End blog single post inner -->
|
|
|
|
</article>
|
|
<!-- End blog single post -->
|
|
|
|
|
|
<!-- Begin blog single nav
|
|
=========================== -->
|
|
<div class="blog-single-nav">
|
|
<div class="bs-nav-col bs-nav-left">
|
|
<div class="bs-nav-text"><i class="fas fa-angle-left"></i> Prew Post</div>
|
|
<a href="" class="bs-nav-title"><h4>Best Lighting Tips For High Fashion Photography</h4></a>
|
|
</div>
|
|
<div class="bs-nav-col bs-nav-right">
|
|
<div class="bs-nav-text">Next Post <i class="fas fa-angle-right"></i></div>
|
|
<a href="" class="bs-nav-title"><h4>These Ideas Will Get Your Street Photography Rocking</h4></a>
|
|
</div>
|
|
</div>
|
|
<!-- End blog single nav -->
|
|
|
|
|
|
<!-- Begin related posts
|
|
========================= -->
|
|
<div class="related-posts">
|
|
<h3 class="related-posts-heading">You Might Also Like:</h3>
|
|
|
|
<!-- 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 slider).
|
|
* 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 slider).
|
|
* 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!).
|
|
====================================================================
|
|
* 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 nav-outside-top nav-light" data-items="3" data-margin="20" data-nav="true" data-dots="false" data-mobile-landscape="2" data-mobile-portrait="1">
|
|
|
|
<!-- Begin related posts item -->
|
|
<div class="related-posts-item">
|
|
<a href="" class="rp-item-image bg-image" style="background-image: url(assets/img/blog/list/blog-4.jpg);"></a>
|
|
<div class="rp-item-info">
|
|
<div class="rp-item-category"><a href="blog-archive.html">Photography</a></div>
|
|
<a href="" class="rp-item-title"><h4>5 Tips Your Camera Manual Never Told You About Portrait Photography</h4></a>
|
|
</div>
|
|
</div>
|
|
<!-- End related posts item -->
|
|
|
|
<!-- Begin related posts item -->
|
|
<div class="related-posts-item">
|
|
<a href="" class="rp-item-image bg-image" style="background-image: url(assets/img/blog/list/blog-5.jpg);"></a>
|
|
<div class="rp-item-info">
|
|
<div class="rp-item-category"><a href="blog-archive.html">Photography</a></div>
|
|
<a href="" class="rp-item-title"><h4>Most Common Wedding Photography Mistakes Every Beginner Will Make</h4></a>
|
|
</div>
|
|
</div>
|
|
<!-- End related posts item -->
|
|
|
|
<!-- Begin related posts item -->
|
|
<div class="related-posts-item">
|
|
<a href="" class="rp-item-image bg-image" style="background-image: url(assets/img/blog/list/blog-6.jpg);"></a>
|
|
<div class="rp-item-info">
|
|
<div class="rp-item-category"><a href="blog-archive.html">Food</a></div>
|
|
<a href="" class="rp-item-title"><h4>The Serious Eats Guide to Food Photography</h4></a>
|
|
</div>
|
|
</div>
|
|
<!-- End related posts item -->
|
|
|
|
<!-- Begin related posts item -->
|
|
<div class="related-posts-item">
|
|
<a href="" class="rp-item-image bg-image" style="background-image: url(assets/img/blog/list/blog-2.jpg);"></a>
|
|
<div class="rp-item-info">
|
|
<div class="rp-item-category"><a href="blog-archive.html">Equipment</a></div>
|
|
<a href="" class="rp-item-title"><h4>10 Top Choices for Aerial Photography</h4></a>
|
|
</div>
|
|
</div>
|
|
<!-- End related posts item -->
|
|
|
|
<!-- Begin related posts item -->
|
|
<div class="related-posts-item">
|
|
<a href="" class="rp-item-image bg-image" style="background-image: url(assets/img/blog/list/blog-3.jpg);"></a>
|
|
<div class="rp-item-info">
|
|
<div class="rp-item-category"><a href="blog-archive.html">Travel</a></div>
|
|
<a href="" class="rp-item-title"><h4>How to Take Professional Travel Photos</h4></a>
|
|
</div>
|
|
</div>
|
|
<!-- End related posts item -->
|
|
|
|
</div>
|
|
<!-- End content carousel -->
|
|
|
|
</div>
|
|
<!-- End related posts -->
|
|
|
|
|
|
<!-- Begin post comments
|
|
========================= -->
|
|
<div id="blog-post-comments">
|
|
|
|
<h4 class="comments-heading"><span>9</span> comments:</h4>
|
|
|
|
<!-- Begin media list -->
|
|
<ul class="media-list">
|
|
|
|
<!-- Begin media -->
|
|
<li class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-1.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Martin Vegas</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:00am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Quis ante id eros orci eget. Ac egestas praesent aliquam nisl in vitae aliquam vitae. Vivamus sed elementum. Sem sed sed. Hendrerit elit eget sem pellentesque a. Velit elit lacinia mattis amet nunc. Fames ipsum rhoncus. Natoque posuere nam commodo mattis orci. Aliquet praesent tempor ac dolor aliquet.</p>
|
|
</div>
|
|
</li>
|
|
<!-- End media -->
|
|
|
|
<!-- Begin media -->
|
|
<li class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-2.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Katie Ryan</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:02am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Deleniti lucilius appellantur pri at, nullam putent sea ad. Mutat liber saperet ex eum, omnium aliquando an qui. An pro solum iudico, per ea congue soluta saperet. Ex exerci commodo apeirian per, at invidunt mnesarchum pro.</p>
|
|
</div>
|
|
</li>
|
|
<!-- End media -->
|
|
|
|
<!-- Begin media -->
|
|
<li class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-3.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Ashton Brown</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:12am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Usu in labore bonorum. Te est dicant viderer, mei ea verear detraxit consulatu. Mei graeco omnesque ex, case oratio detraxit vim ex, has eu aeque similique.</p>
|
|
|
|
<!-- Begin nested media -->
|
|
<div class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-4.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Johnny Stevens</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:25am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Et prima luptatum dissentias pro. Legere percipit his id. At vidit facilis theophrastus per. Nec eu tale graece aeterno, ex sint nominati reformidans vim. Quidam eleifend ei eum, alienum voluptatibus ad vix.</p>
|
|
|
|
<!-- Begin nested media -->
|
|
<div class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-5.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Leslie Andrews</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:34am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Justo quando ex nec. Tation aliquid eam ne, eu modo illud mei, possim nonumes cum ad. Mea solet eloquentiam ad, nec at erat munere maluisset, in errem aliquam qui. Te mei ceteros maiorum, erant suavitate deseruisse ea nam, ea ferri convenire eam. Mel et malorum ullamcorper, mediocrem dissentias nec ex, vel te feugait consulatu. Ex luptatum vituperata sit, no graece comprehensam mea.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- End nested media -->
|
|
|
|
</div>
|
|
</div>
|
|
<!-- End nested media -->
|
|
|
|
<!-- Begin nested media -->
|
|
<div class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-3.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Ashton Brown</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:43am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Te duo luptatum insolens maluisset, ius te dicam prodesset. Idque adipisci adipiscing ea vix, eu sea audire scriptorem. Qui eu accusamus moderatius, at pericula persecuti moderatius pri, id duo facete tibique. Movet possit eum ea. Pri ne odio tation. At detraxit menandri mea, pri latine conceptam an. An quod torquatos gloriatur eos, est suas illum libris no, graeco tincidunt mel ut.</p>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- End nested media -->
|
|
|
|
</div>
|
|
</li>
|
|
<!-- End media -->
|
|
|
|
<!-- Begin media -->
|
|
<li class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-7.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Kate Dixon</a></h4>
|
|
<a href="#" class="article-time pull-left">May 26, 2016 at 12:49am</a>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">At vim omnes lucilius corrumpit, integre menandri hendrerit mea ut, affert alterum per et. Velit timeam inimicus vis te, vis ex offendit concludaturque. Est id hinc mutat. Cum te populo facete. Usu fugit oblique adolescens ut, modo congue vituperatoribus id mea. Mel ut dolor veniam.</p>
|
|
</div>
|
|
</li>
|
|
<!-- End media -->
|
|
|
|
<!-- Begin media -->
|
|
<li class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-8.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">David Bradley</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:51am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Erat mutat eleifend te ius. Hinc volumus accusam cu sea. Sea possit quodsi ex. No nostrud interpretaris est. Sea ex pertinacia dissentiunt, ex ius omittam sapientem, vim apeirian splendide cotidieque in.</p>
|
|
</div>
|
|
</li>
|
|
<!-- End media -->
|
|
|
|
<!-- Begin media -->
|
|
<li class="media">
|
|
<a href="#" class="media-object pull-left bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-9.jpg);"></a>
|
|
|
|
<div class="media-body">
|
|
<h4 class="media-heading"><a href="#">Brayan Peterson</a></h4>
|
|
<span class="article-time pull-left">May 26, 2016 at - 12:56am</span>
|
|
<span class="media-reply pull-right"><a href="#">Reply</a></span>
|
|
<p class="media-text">Enim nonumes nominati cu mel, an nec stet iriure neglegentur. Possim verear adipiscing eum ne. Nec ex option oportere, sed ex clita mollis accusamus. Duis vitae nonumes mea et. Vix ei nibh recteque signiferumque. Aeque malorum molestiae ei nam, at tollit blandit mnesarchum vim, ea ocurreret patrioque est.</p>
|
|
</div>
|
|
</li>
|
|
<!-- End media -->
|
|
|
|
</ul>
|
|
<!-- End media list -->
|
|
|
|
<!-- Begin post comment form -->
|
|
<form id="post-comment-form">
|
|
<h4>Leave a Comment:</h4>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" name="name" placeholder="Your Name*" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<input type="email" class="form-control" name="email" placeholder="Your Email*" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="form-group">
|
|
<textarea class="form-control" name="message" rows="5" placeholder="Your Comment*" required></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<button type="submit" class="btn btn-primary">Submit Comment</button>
|
|
<label class="checkbox reminder">
|
|
<input class="reminder-checkbox" checked="checked" type="checkbox"> Email me when this comment receives a reply. <br>
|
|
<input class="reminder-checkbox" checked="checked" type="checkbox"> Notify me of new posts by email.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- End post comment form -->
|
|
|
|
</div>
|
|
<!-- End post comments -->
|
|
|
|
</div> <!-- /.col (Content column) -->
|
|
|
|
<!-- Sidebar column -->
|
|
<div class="col-md-4 no-padding-left no-padding-right">
|
|
|
|
<!-- Begin sidebar (sidebar right)
|
|
=================================== -->
|
|
<div class="sidebar sidebar-right">
|
|
<div class="row">
|
|
|
|
<div class="col-sm-12">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget blog-author no-margin-top">
|
|
<h3 class="sidebar-heading">About Me</h3>
|
|
<a href="about-me.html" class="blog-author-img bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-1.jpg); background-position: 50% 50%;"></a>
|
|
<div class="blog-author-info">
|
|
<h4 class="blog-author-name"><a href="about-me.html">Martin Vegas</a></h4>
|
|
<div class="blog-author-sub">Artist & Photographer</div>
|
|
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
|
<p class="blog-author-text" data-max-words="15">Debitis sociis phasellus feugiat luctus diam. Vitae aenean odio ligula interdum suscipit antimoa arte lacus ante.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-sm-12">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-social">
|
|
<h3 class="sidebar-heading">Follow</h3>
|
|
<!-- Begin social buttons -->
|
|
<div class="social-buttons">
|
|
<ul>
|
|
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-facebook" 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-twitter" 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-google" 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-pinterest" 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-dribbble" title="Follow me on Dribbble" target="_blank"><i class="fab fa-dribbble"></i></a></li>
|
|
<li><a href="https://instagram.com" class="btn btn-social-min btn-instagram" title="Follow me on instagram" target="_blank"><i class="fab fa-instagram"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End social buttons -->
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-sm-12">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-search">
|
|
<h3 class="sidebar-heading">Search</h3>
|
|
<form id="blog-search-form" class="form-btn-inside" method="get" action="search-results.html">
|
|
<div class="form-group no-margin">
|
|
<input type="text" class="form-control" id="blog-search" name="search" placeholder="Search...">
|
|
<button type="submit"><i class="fas fa-search"></i></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-md-12 col-sm-6">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-categories">
|
|
<h3 class="sidebar-heading">Categories</h3>
|
|
<ul class="list-unstyled">
|
|
<li><a href="">Photography <span>26</span></a></li>
|
|
<li><a href="">Equipment <span>54</span></a></li>
|
|
<li><a href="">Travel <span>17</span></a></li>
|
|
<li><a href="">Fashion <span>19</span></a></li>
|
|
<li><a href="">Food <span>67</span></a></li>
|
|
<li><a href="">Macro <span>67</span></a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-md-12 col-sm-6">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-post-list">
|
|
<h3 class="sidebar-heading">Most Popular</h3>
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<a href="" class="post-thumb bg-image" style="background-image: url(assets/img/blog/small/img-13.jpg); background-position: 50% 50%;"></a>
|
|
<div class="post-data">
|
|
<h5 class="post-title"><a href="blog-single.html">10 Top Choices for Aerial Photography</a></h5>
|
|
<!-- <span class="author">By: <a href="">Martin Vegas</a></span> -->
|
|
<span class="date">May 26, 2017</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="" class="post-thumb bg-image" style="background-image: url(assets/img/blog/small/img-14.jpg); background-position: 50% 50%;"></a>
|
|
<div class="post-data">
|
|
<h5 class="post-title"><a href="blog-single.html">How to Take Professional Travel Photos</a></h5>
|
|
<!-- <span class="author">By: <a href="">John Doe</a></span> -->
|
|
<span class="date">May 12, 2017</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="" class="post-thumb bg-image" style="background-image: url(assets/img/blog/small/img-15.jpg); background-position: 50% 50%;"></a>
|
|
<div class="post-data">
|
|
<h5 class="post-title"><a href="blog-single.html">5 Tips Your Camera Manual Never Told You About Portrait Photography</a></h5>
|
|
<!-- <span class="author">By: <a href="">Henry Harrison</a></span> -->
|
|
<span class="date">April 17, 2017</span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a href="" class="post-thumb bg-image" style="background-image: url(assets/img/blog/small/img-10.jpg); background-position: 50% 50%;"></a>
|
|
<div class="post-data">
|
|
<h5 class="post-title"><a href="blog-single.html">Most Common Wedding Photography Mistakes Every Beginner Will Make</a></h5>
|
|
<!-- <span class="author">By: <a href="">Henry Harrison</a></span> -->
|
|
<span class="date">March 21, 2017</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-md-12 col-sm-6">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-comments-list">
|
|
<h3 class="sidebar-heading">Recent Comments</h3>
|
|
<ul class="list-unstyled">
|
|
<li class="sidebar-comment-wrap">
|
|
<a href="blog-single-no-sidebar.html" class="sidebar-comment-avatar bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-1.jpg); background-position: 50% 50%;"></a>
|
|
<div class="sidebar-comment-meta">
|
|
<div class="sidebar-comment-data">
|
|
<span class="author">By: <a href="">Martin Vegas</a></span>
|
|
<span class="date">May 26, 2017</span>
|
|
</div>
|
|
<div class="sidebar-comment">
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
|
<a href="blog-single-no-sidebar.html" data-max-words="15">Aliquet praesent tempor ac dolor aliquet. Risus mi vitae hendrerit orci vitae amet lacus tertis maurum entire satec tatus naite esek. Lacemus ante sider.</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="sidebar-comment-wrap">
|
|
<a href="blog-single-no-sidebar.html" class="sidebar-comment-avatar bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-3.jpg); background-position: 50% 50%;"></a>
|
|
<div class="sidebar-comment-meta">
|
|
<div class="sidebar-comment-data">
|
|
<span class="author">By: <a href="">David Bradley</a></span>
|
|
<span class="date">May 26, 2017</span>
|
|
</div>
|
|
<div class="sidebar-comment">
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
|
<a href="blog-single-no-sidebar.html" data-max-words="15">Laculis molestie rhoncus. Amet maecenas ut orci id dui. Et dui morbi. Non mauris nautis trettis sitamo egret laites mannis seti faktasi norem.</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="sidebar-comment-wrap">
|
|
<a href="blog-single-no-sidebar.html" class="sidebar-comment-avatar bg-image" style="background-image: url(assets/img/blog/small/avatar/avatar-2.jpg); background-position: 50% 50%;"></a>
|
|
<div class="sidebar-comment-meta">
|
|
<div class="sidebar-comment-data">
|
|
<span class="author">By: <a href="">Kate Dixon</a></span>
|
|
<span class="date">May 26, 2017</span>
|
|
</div>
|
|
<div class="sidebar-comment">
|
|
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
|
|
<a href="blog-single-no-sidebar.html" data-max-words="15">Feugiat fringilla sequi. Anunc adipiscing nisl lorem morbi tincidunt gravida vistrim nocktac fitset muita opimus necta vimavus canipantri levit naidum unimus.</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-md-12 col-sm-6">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-tags">
|
|
<h3 class="sidebar-heading">Popular Tags</h3>
|
|
<ul>
|
|
<li><a href="">#portfolio</a></li>
|
|
<li><a href="">#multipurpose</a></li>
|
|
<li><a href="">#minimal</a></li>
|
|
<li><a href="">#agency</a></li>
|
|
<li><a href="">#creatives</a></li>
|
|
<li><a href="">#freelancers</a></li>
|
|
<li><a href="">#design</a></li>
|
|
<li><a href="">#bootstrap</a></li>
|
|
<li><a href="">#responsive</a></li>
|
|
<li><a href="">#simple</a></li>
|
|
<li><a href="">#creative</a></li>
|
|
<li><a href="">#retina</a></li>
|
|
<li><a href="">#blog</a></li>
|
|
<li><a href="">#wordpress</a></li>
|
|
<li><a href="">#black & white</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-md-12 col-sm-6">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-photo-stream">
|
|
<h3 class="sidebar-heading"><i class="fab fa-instagram"></i> Instagram</h3>
|
|
|
|
<!-- Begin thumbnail list
|
|
==========================
|
|
* Use class "col-2", "col-3", "col-4" "col-5" or "col-6" for thumbnail list columns.
|
|
* Use class "gutter-1", "gutter-2", "gutter-3", "gutter-4" or "gutter-5" to add more space between items.
|
|
-->
|
|
<ul class="thumb-list col-4 gutter-5">
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-1.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-2.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-3.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-4.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-5.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-6.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-7.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-8.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-9.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-10.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-11.jpg);"></a></li>
|
|
<li><a href="#" class="thumb-list-item bg-image" style="background-image: url(assets/img/blog/small/img-12.jpg);"></a></li>
|
|
|
|
</ul>
|
|
<!-- End thumbnail list -->
|
|
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-md-12 col-sm-6">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-subscribe">
|
|
<h3 class="sidebar-heading">Subscribe</h3>
|
|
<p class="small text-gray">Subscribe to our newsletter and stay updated on the latest news! Do not worry, we will not send spam.</p>
|
|
|
|
<!-- Begin subscribe form -->
|
|
<form id="sidebar-subscribe-form">
|
|
<div class="form-group no-margin">
|
|
<input type="email" class="form-control" id="sidebar-subscribe" name="subscribe" placeholder="Enter your email address..." required="">
|
|
<button type="submit" class="btn btn-primary btn-block btn-lg">Subscribe</button>
|
|
</div>
|
|
</form>
|
|
<!-- End subscribe form -->
|
|
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
<div class="col-md-12 col-sm-6">
|
|
|
|
<!-- Begin sidebar widget -->
|
|
<div class="sidebar-widget sidebar-meta">
|
|
<h3 class="sidebar-heading">Meta</h3>
|
|
<ul class="list-unstyled">
|
|
<li><a href="">Log In</a></li>
|
|
<li><a href="">Entries RSS</a></li>
|
|
<li><a href="">Comments RSS</a></li>
|
|
<li><a href="https://wordpress.org/">WordPress.org</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- End sidebar widget -->
|
|
|
|
</div> <!-- /.col -->
|
|
|
|
</div> <!-- /.row -->
|
|
</div>
|
|
<!-- End sidebar -->
|
|
|
|
</div> <!-- /.col (Sidebar column) -->
|
|
|
|
</div> <!-- /.row -->
|
|
|
|
</div> <!-- /.blog-single-inner -->
|
|
</section>
|
|
<!-- End blog single cection -->
|
|
|
|
|
|
<!-- ===========================
|
|
///// Begin footer section /////
|
|
================================
|
|
* Use class "footer-dark" to enable dark footer.
|
|
* Use class "no-margin-top" if needed.
|
|
-->
|
|
<section id="footer" class="footer-dark">
|
|
<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 -->
|
|
|
|
</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> |