This commit is contained in:
despiegk 2024-10-07 04:21:48 +03:00
parent 260da5aa1a
commit 86c52dfe04
559 changed files with 134896 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
start

View File

@ -1,2 +1,6 @@
# www_veda2 # www_veda2
```bash
cd ~/code/git.ourworld.tf/veda/www_veda2
./start.vsh
```

9
start.vsh Executable file
View File

@ -0,0 +1,9 @@
#!/usr/bin/env -S v -n -w -gc none -no-retry-compilation -cc tcc -d use_openssl -enable-globals run
import os
import freeflowuniverse.crystallib.osal
import web
mut app := web.new()
app.run()

1
web/README.md Normal file
View File

@ -0,0 +1 @@
# Website template

38
web/factory.v Normal file
View File

@ -0,0 +1,38 @@
module web
import freeflowuniverse.crystallib.osal
import veb
import rand
import os
import json
import time
pub struct Context {
veb.Context
}
pub struct App {
veb.StaticHandler
pub:
adminkey string
}
// Main entry point
pub fn new() &App {
mut app := &App{}
// Start the Veb web server on port 8080
app.static_mime_types['.map'] = 'txt/plain'
app.mount_static_folder_at('${os.dir(@FILE)}/static', '/static') or { panic(err) }
return app
}
@[params]
pub struct RunParams {
port int = 8080
}
pub fn (mut app App) run(params RunParams) {
veb.run[App, Context](mut app, params.port)
}

68
web/static/css/global.css Normal file
View File

@ -0,0 +1,68 @@
* {
box-sizing: border-box;
}
html {
color-scheme: dark;
background-color: #111;
}
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0px;
}
body {
display: flex;
flex-direction: column;
}
.header {
max-width: 500px;
padding-inline: 2rem;
}
.header > img {
display: block;
margin: auto;
max-width: 100%;
}
.header > h2 {
font-family: 'TWK Everett', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1.25rem;
line-height: 144%;
text-align: center;
color: rgba(255, 255, 255, 0.6);
}
footer {
width: 100%;
padding: 1.5rem 2rem;
text-align: center;
color: rgba(255, 255, 255, 0.6);
background-color: var(--lk-bg);
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
footer a,
h2 a {
color: #ff6352;
text-decoration-color: #a33529;
text-underline-offset: 0.125em;
}
footer a:hover,
h2 a {
text-decoration-color: #ff6352;
}
h2 a {
text-decoration: none;
}

29
web/templates/.htaccess Normal file
View File

@ -0,0 +1,29 @@
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
## Enable compression ##
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## Enable compression ##

View File

@ -0,0 +1,622 @@
<!DOCTYPE html>
<!--
Template: Sepia - Photography Portfolio HTML Website Template
Author: Themetorium
URL: https://themetorium.net
-->
<html lang="en">
<head>
<!-- Title -->
<title>About Me - 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">
<!-- =================
//// 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="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! ) --> <!-- 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 about me section /////
============================== -->
<section id="about-me-section" class="about-me-simple">
<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-6 col-lg-height split-box-image no-padding bg-image" style="background-image: url(assets/img/misc/me-3.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 full-height-vh"></div>
</div> <!-- /.col -->
<!-- Column -->
<div class="col-lg-6 col-lg-height col-lg-middle no-padding">
<!-- 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 shifted-left">
<!-- 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">Martin Vegas</h1>
<div class="tt-heading-subtitle">Artist &amp; Photographer</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="margin-top-30">
<p>I am an artist and photographer. Sollicitudin diam vitae, amet lacus donec eu, donec vulputate duis nullam nulla, suscipit nulla orci, ornare maecenas eget gravida. Curae sollicitudin lobortis phasellus. Fusce sapien, metus mi et libero enim sed lorem.</p>
</div>
<a href="contact-simple.html" class="btn btn-primary margin-top-20">Hire Me!</a>
<a href="categories-carousel.html" class="btn btn-dark margin-top-20">View All My Work</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 footer section (footer minimal) /////
=================================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-minimal no-margin-top bg-transparent">
<div class="footer-inner">
<div class="footer-container tt-wrap">
<div class="row">
<div class="col-md-6 col-md-push-6">
<!-- Begin social buttons -->
<div class="social-buttons">
<ul>
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-default btn-link" 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-link" 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-link" 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-link" 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-link" 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-link" title="Drop me a line" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
<!-- End social buttons -->
</div> <!-- /.col -->
<div class="col-md-6 col-md-pull-6">
<!-- Begin footer copyright -->
<div class="footer-copyright">
<p>&copy; 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-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>

View File

@ -0,0 +1,887 @@
<!DOCTYPE html>
<!--
Template: Sepia - Photography Portfolio HTML Website Template
Author: Themetorium
URL: https://themetorium.net
-->
<html lang="en">
<head>
<!-- Title -->
<title>About Me - 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 about me section /////
============================== -->
<section id="about-me-section" class="about-me-simple">
<div class="about-me-inner tt-wrap"> <!-- 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-6 col-lg-height split-box-image no-padding bg-image" style="background-image: url(assets/img/misc/me-3.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-100"></div>
</div> <!-- /.col -->
<!-- Column -->
<div class="col-lg-6 col-lg-height col-lg-middle no-padding">
<!-- 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">Martin Vegas</h1>
<div class="tt-heading-subtitle">Artist &amp; Photographer</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="margin-top-30">
<p>I am an artist and photographer. Sollicitudin diam vitae, amet lacus donec eu, donec vulputate duis nullam nulla, suscipit nulla orci, ornare maecenas eget gravida. Curae sollicitudin lobortis phasellus. Fusce sapien, metus mi et libero enim sed lorem.</p>
</div>
<a href="contact.html" class="btn btn-primary margin-top-20">Hire Me!</a>
<a href="categories-grid.html" class="btn btn-dark margin-top-20">View All My Work</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 latest work cection /////
================================= -->
<section id="latest-work-section" class="margin-top-40"> <!-- margin class is optional ) -->
<!-- Begin tt-heading
======================
* Use class "padding-on" to enable heading paddings (useful if you use tt-heading as stand alone element).
* Use class "text-center" or "text-right" to align tt-heading.
* Use classes "tt-heading-xs", "tt-heading-sm", "tt-heading-lg", "tt-heading-xlg" or "tt-heading-xxlg" to set tt-heading size.
-->
<div class="tt-heading padding-on text-center">
<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 Projects</h1>
<div class="tt-heading-subtitle">My latest photo projects</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="latest-work-inner"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
<!-- Begin project carousel
============================ -->
<div class="project-carousel">
<!-- Begin content carousel (https://owlcarousel2.github.io/OwlCarousel2/)
====================================================================
* Use class "nav-outside" for outside nav (requires boxed layout).
* Use class "nav-outside-top" for outside top nav (requires enough space at the top of the carousel).
* Use class "nav-bottom-right" for bottom right nav.
* Use class "nav-rounded" for rounded nav.
* Use class "nav-light" to enable nav light style.
* Use class "dots-outside" for outside dots (requires enough space at the bottom of the carousel).
* Use class "dots-left", "dots-right" or "dots-center-right" to align dots.
* Use class "dots-rounded" for rounded dots.
* Use class "owl-mousewheel" to enable mousewheel support.
* Use class "cursor-grab" to enable cursor grab icon (no effect on links!).
* Use class "cc-hover-light", "cc-hover-dark" or "cc-hover-zoom" to enable carousel items hover effect.
* Use class "cc-height-1", "cc-height-2", "cc-height-3", "cc-height-4", "cc-height-5", "cc-height-6" or "cc-height-full" to set carousel height (do not use with data-autoheight="true"!!!).
* Use class "cc-height-m" to set full height for small screens (do not use with data-autoheight="true"!!!).
================================================================
* Available carousel data attributes:
data-items="5".......................(items visible on desktop)
data-tablet-landscape="4"............(items visible on mobiles)
data-tablet-portrait="3".............(items visible on mobiles)
data-mobile-landscape="2"............(items visible on tablets)
data-mobile-portrait="1".............(items visible on tablets)
data-loop="true".....................(true/false)
data-margin="10".....................(space between items)
data-center="true"...................(true/false)
data-start-position="0"..............(item start position)
data-animate-in="fadeIn".............(fade-in animation)
data-animate-out="fadeOut"...........(fade-out animation)
data-mouse-drag="false"..............(true/false)
data-touch-drag="false"..............(true/false)
data-autoheight="true"...............(true/false)
data-autoplay="true".................(true/false)
data-autoplay-timeout="5000".........(milliseconds)
data-autoplay-hover-pause="true".....(true/false)
data-autoplay-speed="800"............(milliseconds)
data-drag-end-speed="800"............(milliseconds)
data-nav="true"......................(true/false)
data-nav-speed="800".................(milliseconds)
data-dots="false"....................(true/false)
data-dots-speed="800"................(milliseconds)
-->
<div class="owl-carousel cc-height-1 cc-hover-dark nav-outside-top" data-items="4" data-margin="0" data-dots="false" data-nav="true" data-nav-speed="800" data-mobile-portrait="1" data-tablet-landscape="3" data-tablet-portrait="2" data-mobile-landscape="1" data-mobile-portrait="1">
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-7.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Afternoon Photoshoot</h2>
<div class="cc-category"><span>Outdoor</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-8.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Black &amp; White</h2>
<div class="cc-category"><span>Models</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-9.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400">
<h2 class="cc-title">One Day Shoot With Ordinary People</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-10.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Dancing Is Everything</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-11.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Redhead Beauty</h2>
<div class="cc-category"><span>Nature</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-12.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Beautiful People</h2>
<div class="cc-category"><span>Nature</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
</div>
<!-- End content carousel -->
</div>
<!-- End project carousel -->
</div> <!-- /.latest-work-inner -->
</section>
<!-- End latest work cection -->
<!-- ===========================
///// Begin footer section /////
================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-dark no-margin-top"> <!-- margin class is optional -->
<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>&copy; 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>

File diff suppressed because it is too large Load Diff

546
web/templates/about-me.html Normal file
View File

@ -0,0 +1,546 @@
<!-- *************************************
*********** Begin body content ***********
************************************** -->
<div id="body-content">
<!-- ========================
///// Begin page header /////
=============================
* Use classes "ph-xs", "ph-sm", "ph-lg" or "ph-xlg" to set page header size.
* Use class "ph-center" or "ph-right" to align page header caption.
-->
<section id="page-header">
<!-- Begin page header image
=============================
* Use class "parallax-bg-1" up to "parallax-bg-6" to enable background image parallax effect.
* Use class "fade-out-scroll-3" to enable fade out effect if page scroll.
* Use class "hide-ph-image" to hide page header image without removing the code.
-->
<div class="page-header-image parallax-bg-3 bg-image" style="background-image: url(assets/img/misc/page-header-bg-4.jpg);">
<!-- Element cover
===================
* You can use prepared background transparent classes depends on brightness of your page header image. More info: file "helper.css".
-->
<div class="cover bg-transparent-5-dark"></div>
</div>
<!-- End page header image -->
<!-- Begin page header inner -->
<div class="page-header-inner tt-wrap">
<!-- Begin page header caption
===============================
* Use classes "ph-caption-xs", "ph-caption-sm", "ph-caption-lg" or "ph-caption-xlg" to set page header size.
* Use class "parallax-1" up to "parallax-6" to enable parallax effect.
* Use class "fade-out-scroll-1" up to "fade-out-scroll-6" to enable fade out effect if page scroll.
-->
<div class="page-header-caption ph-caption-lg parallax-4 fade-out-scroll-3">
<h1 class="page-header-title">Martin Vegas</h1>
<hr class="hr-short">
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="page-header-description" data-max-words="40">
Artist &amp; Photographer
</div>
</div>
<!-- End page header caption -->
</div>
<!-- End page header inner -->
</section>
<!-- End page header -->
<!-- =============================
///// Begin about me section /////
============================== -->
<section id="about-me-section">
<div class="about-me-inner tt-wrap"> <!-- 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-6 col-lg-height split-box-image no-padding bg-image" style="background-image: url(assets/img/misc/me-1.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-85"></div>
</div> <!-- /.col -->
<!-- Column -->
<div class="col-lg-6 col-lg-height col-lg-middle no-padding">
<!-- 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">Who I am?</h1>
<div class="tt-heading-subtitle">A little bit about me</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. Sollicitudin diam vitae, amet lacus donec eu, donec vulputate duis nullam nulla, suscipit nulla orci, ornare maecenas eget gravida.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit 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 quia voluptas enimoa.</p>
</div>
<!-- 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 -->
<!-- ======================
///// Begin split box /////
based on: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
======================= -->
<div class="split-box what-i-do">
<div class="container-fluid">
<div class="row">
<div class="row-lg-height">
<!-- Column -->
<div class="col-lg-6 col-lg-push-6 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-85"></div>
</div> <!-- /.col -->
<!-- Column -->
<div class="col-lg-6 col-lg-pull-6 col-lg-height col-lg-middle no-padding">
<!-- 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-left">
<!-- 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">What I Do?</h1>
<div class="tt-heading-subtitle">A little bit of my work</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="margin-top-30">
<p>Pellentesque nec convallis nisi, in mollis nulla. Aliquam eget elit risus. Quisque vitae commodo libero, eu efficitur ligula. Cras vulputate arcu id interdum pretium. Cras eu blandit massa, at semper est. Curabitur id blandit purus. Curabitur egestas, lacus quis facilisis tempor.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<a href="contact.html" class="btn btn-primary margin-top-20">Hire Me!</a>
<a href="categories-grid.html" class="btn btn-dark margin-top-20">View All My Work</a>
</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 latest work cection /////
================================= -->
<section id="latest-work-section" class="margin-top-40"> <!-- margin class is optional ) -->
<!-- Begin tt-heading
======================
* Use class "padding-on" to enable heading paddings (useful if you use tt-heading as stand alone element).
* Use class "text-center" or "text-right" to align tt-heading.
* Use classes "tt-heading-xs", "tt-heading-sm", "tt-heading-lg", "tt-heading-xlg" or "tt-heading-xxlg" to set tt-heading size.
-->
<div class="tt-heading padding-on text-center">
<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 Projects</h1>
<div class="tt-heading-subtitle">My latest photo projects</div>
<hr class="hr-short">
</div> <!-- /.tt-heading-inner -->
</div>
<!-- End tt-heading -->
<div class="latest-work-inner"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
<!-- Begin project carousel
============================ -->
<div class="project-carousel">
<!-- Begin content carousel (https://owlcarousel2.github.io/OwlCarousel2/)
====================================================================
* Use class "nav-outside" for outside nav (requires boxed layout).
* Use class "nav-outside-top" for outside top nav (requires enough space at the top of the carousel).
* Use class "nav-bottom-right" for bottom right nav.
* Use class "nav-rounded" for rounded nav.
* Use class "nav-light" to enable nav light style.
* Use class "dots-outside" for outside dots (requires enough space at the bottom of the carousel).
* Use class "dots-left", "dots-right" or "dots-center-right" to align dots.
* Use class "dots-rounded" for rounded dots.
* Use class "owl-mousewheel" to enable mousewheel support.
* Use class "cursor-grab" to enable cursor grab icon (no effect on links!).
* Use class "cc-hover-light", "cc-hover-dark" or "cc-hover-zoom" to enable carousel items hover effect.
* Use class "cc-height-1", "cc-height-2", "cc-height-3", "cc-height-4", "cc-height-5", "cc-height-6" or "cc-height-full" to set carousel height (do not use with data-autoheight="true"!!!).
* Use class "cc-height-m" to set full height for small screens (do not use with data-autoheight="true"!!!).
================================================================
* Available carousel data attributes:
data-items="5".......................(items visible on desktop)
data-tablet-landscape="4"............(items visible on mobiles)
data-tablet-portrait="3".............(items visible on mobiles)
data-mobile-landscape="2"............(items visible on tablets)
data-mobile-portrait="1".............(items visible on tablets)
data-loop="true".....................(true/false)
data-margin="10".....................(space between items)
data-center="true"...................(true/false)
data-start-position="0"..............(item start position)
data-animate-in="fadeIn".............(fade-in animation)
data-animate-out="fadeOut"...........(fade-out animation)
data-mouse-drag="false"..............(true/false)
data-touch-drag="false"..............(true/false)
data-autoheight="true"...............(true/false)
data-autoplay="true".................(true/false)
data-autoplay-timeout="5000".........(milliseconds)
data-autoplay-hover-pause="true".....(true/false)
data-autoplay-speed="800"............(milliseconds)
data-drag-end-speed="800"............(milliseconds)
data-nav="true"......................(true/false)
data-nav-speed="800".................(milliseconds)
data-dots="false"....................(true/false)
data-dots-speed="800"................(milliseconds)
-->
<div class="owl-carousel cc-height-1 cc-hover-dark nav-outside-top" data-items="4" data-margin="0" data-dots="false" data-nav="true" data-nav-speed="800" data-mobile-portrait="1" data-tablet-landscape="3" data-tablet-portrait="2" data-mobile-landscape="1" data-mobile-portrait="1">
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-7.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Afternoon Photoshoot</h2>
<div class="cc-category"><span>Outdoor</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-8.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Black &amp; White</h2>
<div class="cc-category"><span>Models</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-9.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400">
<h2 class="cc-title">One Day Shoot With Ordinary People</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-10.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Dancing Is Everything</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-11.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Redhead Beauty</h2>
<div class="cc-category"><span>Nature</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-grid.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-12.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Beautiful People</h2>
<div class="cc-category"><span>Nature</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
</div>
<!-- End content carousel -->
</div>
<!-- End project carousel -->
</div> <!-- /.latest-work-inner -->
</section>
<!-- End latest work cection -->
<!-- ===========================
///// Begin footer section /////
================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-dark no-margin-top"> <!-- margin class is optional -->
<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>&copy; 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>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,782 @@
<!DOCTYPE html>
<!--
Template: Sepia - Photography Portfolio HTML Website Template
Author: Themetorium
URL: https://themetorium.net
-->
<html lang="en">
<head>
<!-- Title -->
<title>Albums - 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">
<!-- =================
//// 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="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 gallery list section /////
================================== -->
<section id="gallery-list-section" class="gallery-list-carousel glc-no-crop">
<!-- Begin page background (usually the same as gallery featured image) -->
<div class="page-background bg-image" style="background-image: url(assets/img/misc/page-bg-1.jpg);"></div>
<!-- End page background -->
<div class="gallery-list-carousel-inner tt-wrap"> <!-- add/remove class "tt-wrap" to enable/disable element boxed layout (class "tt-boxed" is required in <body> tag! ) -->
<div class="gl-carousel-wrap">
<!-- 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-full owl-mousewheel nav-light cc-hover-zoom" data-items="4" data-margin="60" data-dots="false" data-nav="true" data-nav-speed="800" data-autowidth="true" data-tablet-landscape="3" data-tablet-portrait="3" data-mobile-landscape="2" data-mobile-portrait="1">
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-2.html" class="cc-item">
<!-- cc auto width img -->
<img class="cc-image cc-auto-width-img" src="assets/img/gallery/gallery-list/auto-width/gallery-auto-width-1.jpg" alt="img">
<!-- cc auto width img for small devices -->
<div class="cc-image cc-auto-width-img-bg bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-1.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg bottom-left max-width-400"> <!-- max width class is optional -->
<div class="cc-category"><span>Events</span></div>
<h2 class="cc-title">Wedding Day</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="cc-description">
Sed at placerat odio, duis leo dui, porta in rutrum sit amet consequat.
</div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-2.html" class="cc-item">
<!-- cc auto width img -->
<img class="cc-image cc-auto-width-img" src="assets/img/gallery/gallery-list/auto-width/gallery-auto-width-2.jpg" alt="img">
<!-- cc auto width img for small devices -->
<div class="cc-image cc-auto-width-img-bg bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-2.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg bottom-left max-width-400"> <!-- max width class is optional -->
<div class="cc-category"><span>Models</span></div>
<h2 class="cc-title">Three Mysterious Woman</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="cc-description">
Sed at placerat odio, duis leo dui, porta in rutrum sit amet consequat.
</div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-2.html" class="cc-item">
<!-- cc auto width img -->
<img class="cc-image cc-auto-width-img" src="assets/img/gallery/gallery-list/auto-width/gallery-auto-width-3.jpg" alt="img">
<!-- cc auto width img for small devices -->
<div class="cc-image cc-auto-width-img-bg bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-3.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg bottom-left max-width-400">
<div class="cc-category"><span>People</span></div>
<h2 class="cc-title">One Day Shoot With Ordinary People</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="cc-description">
Sed at placerat odio, duis leo dui, porta in rutrum sit amet consequat.
</div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-2.html" class="cc-item">
<!-- cc auto width img -->
<img class="cc-image cc-auto-width-img" src="assets/img/gallery/gallery-list/auto-width/gallery-auto-width-4.jpg" alt="img">
<!-- cc auto width img for small devices -->
<div class="cc-image cc-auto-width-img-bg bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-4.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg bottom-left max-width-400"> <!-- max width class is optional -->
<div class="cc-category"><span>People</span></div>
<h2 class="cc-title">Little Girl &amp; Book</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="cc-description">
Sed at placerat odio, duis leo dui, porta in rutrum sit amet consequat.
</div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-2.html" class="cc-item">
<!-- cc auto width img -->
<img class="cc-image cc-auto-width-img" src="assets/img/gallery/gallery-list/auto-width/gallery-auto-width-5.jpg" alt="img">
<!-- cc auto width img for small devices -->
<div class="cc-image cc-auto-width-img-bg bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-5.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg bottom-left max-width-400"> <!-- max width class is optional -->
<div class="cc-category"><span>Art</span></div>
<h2 class="cc-title">Happy Moments With You</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="cc-description">
Sed at placerat odio, duis leo dui, porta in rutrum sit amet consequat.
</div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-2.html" class="cc-item">
<!-- cc auto width img -->
<img class="cc-image cc-auto-width-img" src="assets/img/gallery/gallery-list/auto-width/gallery-auto-width-6.jpg" alt="img">
<!-- cc auto width img for small devices -->
<div class="cc-image cc-auto-width-img-bg bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-6.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg bottom-left max-width-400"> <!-- max width class is optional -->
<div class="cc-category"><span>People</span></div>
<h2 class="cc-title">Two Sleeping Woman</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<div class="cc-description">
Sed at placerat odio, duis leo dui, porta in rutrum sit amet consequat.
</div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
</div>
<!-- End content carousel -->
</div> <!-- /.gl-carousel-wrap -->
</div> <!-- /.gallery-list-carousel-inner -->
</section>
<!-- End gallery list section -->
<!-- ============================================
///// Begin footer section (footer minimal) /////
=================================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-minimal no-margin-top bg-transparent">
<div class="footer-inner">
<div class="footer-container tt-wrap">
<div class="row">
<div class="col-md-6 col-md-push-6">
<!-- Begin social buttons -->
<div class="social-buttons">
<ul>
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-default btn-link" 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-link" 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-link" 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-link" 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-link" 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-link" title="Drop me a line" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
<!-- End social buttons -->
</div> <!-- /.col -->
<div class="col-md-6 col-md-pull-6">
<!-- Begin footer copyright -->
<div class="footer-copyright">
<p>&copy; 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-inner -->
</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>

View File

@ -0,0 +1,723 @@
<!DOCTYPE html>
<!--
Template: Sepia - Photography Portfolio HTML Website Template
Author: Themetorium
URL: https://themetorium.net
-->
<html lang="en">
<head>
<!-- Title -->
<title>Albums - 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">
<!-- =================
//// 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="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 gallery list section /////
================================== -->
<section id="gallery-list-section" class="gallery-list-carousel glc-split">
<div class="gallery-list-carousel-inner tt-wrap"> <!-- 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: add 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-full cc-height-m owl-mousewheel cc-hover-dark cc-hover-zoom" data-items="2" data-margin="0" data-dots="false" data-nav="true" data-nav-speed="800" data-mobile-portrait="1">
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-7.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Afternoon Photoshoot</h2>
<div class="cc-category"><span>Outdoor</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-8.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Black &amp; White</h2>
<div class="cc-category"><span>Models</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-9.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg center max-width-400">
<h2 class="cc-title">One Day Shoot With Ordinary People</h2>
<div class="cc-category"><span>Outdoor</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-10.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Dancing Is Everything</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-11.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Redhead Beauty</h2>
<div class="cc-category"><span>Outdoor</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image full-cover bg-image" style="background-image: url(assets/img/gallery/gallery-list/auto-width/gallery-auto-width-12.jpg);"></div>
<!-- Begin caption
===================
* Position classes: "top-left", "top-center", "top-right", "center-left", "center", "center-right", "bottom-left", "bottom-center", "bottom-right".
* Size classes: "cc-caption-xs", "cc-caption-sm", "cc-caption-lg", "cc-caption-xlg", "cc-caption-xxlg".
-->
<div class="cc-caption cc-caption-lg center max-width-400"> <!-- max width class is optional -->
<h2 class="cc-title">Beautiful People</h2>
<div class="cc-category"><span>People</span></div>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
</div>
<!-- End content carousel -->
</div> <!-- /.gl-carousel-wrap -->
</div> <!-- /.gallery-list-carousel-inner -->
</section>
<!-- End gallery list section -->
<!-- ============================================
///// Begin footer section (footer minimal) /////
=================================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-minimal no-margin-top bg-transparent">
<div class="footer-inner">
<div class="footer-container tt-wrap">
<div class="row">
<div class="col-md-6 col-md-push-6">
<!-- Begin social buttons -->
<div class="social-buttons">
<ul>
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-default btn-link" 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-link" 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-link" 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-link" 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-link" 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-link" title="Drop me a line" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
<!-- End social buttons -->
</div> <!-- /.col -->
<div class="col-md-6 col-md-pull-6">
<!-- Begin footer copyright -->
<div class="footer-copyright">
<p>&copy; 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-inner -->
</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>

View File

@ -0,0 +1,723 @@
<!DOCTYPE html>
<!--
Template: Sepia - Photography Portfolio HTML Website Template
Author: Themetorium
URL: https://themetorium.net
-->
<html lang="en">
<head>
<!-- Title -->
<title>Albums - 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">
<!-- =================
//// 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="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 gallery list section /////
================================== -->
<section id="gallery-list-section" class="gallery-list-carousel">
<div class="gallery-list-carousel-inner tt-wrap"> <!-- 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: add 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-full owl-mousewheel nav-bottom-right cc-hover-dark cc-hover-zoom" data-items="4" data-dots="false" data-nav="true" data-nav-speed="800" data-autoplay="true" data-autoplay-timeout="8000" data-autoplay-speed="800" data-autoplay-hover-pause="true" data-tablet-landscape="3" data-tablet-portrait="3" data-mobile-landscape="2" data-mobile-portrait="1">
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/striped/gallery-striped-8.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-lg bottom-left"> <!-- max width class is optional -->
<div class="cc-category"><span>Fashion</span></div>
<h2 class="cc-title">New Fashion <br>Collection</h2>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/striped/gallery-striped-9.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-lg bottom-left"> <!-- max width class is optional -->
<div class="cc-category"><span>Technology</span></div>
<h2 class="cc-title">Old Cars</h2>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/striped/gallery-striped-10.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-lg bottom-left">
<div class="cc-category"><span>Outdoor</span></div>
<h2 class="cc-title">One Day Shoot <br> With Ordinary People</h2>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/striped/gallery-striped-11.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-lg bottom-left"> <!-- max width class is optional -->
<div class="cc-category"><span>Nature</span></div>
<h2 class="cc-title">Beautiful <br>Leaves</h2>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/striped/gallery-striped-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-lg bottom-left"> <!-- max width class is optional -->
<div class="cc-category"><span>Nature</span></div>
<h2 class="cc-title">Waterfall &amp; <br>Woman</h2>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<a href="gallery-single-carousel-center.html" class="cc-item">
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/striped/gallery-striped-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-lg bottom-left"> <!-- max width class is optional -->
<div class="cc-category"><span>Nature</span></div>
<h2 class="cc-title">Wild <br>Animals</h2>
</div>
<!-- End caption -->
</a>
<!-- End carousel item -->
</div>
<!-- End content carousel -->
</div> <!-- /.gl-carousel-wrap -->
</div> <!-- /.gallery-list-carousel-inner -->
</section>
<!-- End gallery list section -->
<!-- ============================================
///// Begin footer section (footer minimal) /////
=================================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-minimal no-margin-top bg-transparent">
<div class="footer-inner">
<div class="footer-container tt-wrap">
<div class="row">
<div class="col-md-6 col-md-push-6">
<!-- Begin social buttons -->
<div class="social-buttons">
<ul>
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-default btn-link" 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-link" 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-link" 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-link" 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-link" 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-link" title="Drop me a line" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
<!-- End social buttons -->
</div> <!-- /.col -->
<div class="col-md-6 col-md-pull-6">
<!-- Begin footer copyright -->
<div class="footer-copyright">
<p>&copy; 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-inner -->
</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>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,806 @@
<!DOCTYPE html>
<!--
Template: Sepia - Photography Portfolio HTML Website Template
Author: Themetorium
URL: https://themetorium.net
-->
<html lang="en">
<head>
<!-- Title -->
<title>Albums - 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">
<!-- =================
//// 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="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-center.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 gallery list section /////
================================== -->
<section id="gallery-list-section" class="gallery-list-carousel">
<div class="gallery-list-slideshow-inner tt-wrap"> <!-- 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: add 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-full nav-bottom-right bg-dark cc-hover-zoom" data-items="1" data-mouse-drag="false" data-loop="true" data-dots="false" data-nav="true" data-animate-in="fadeIn" data-animate-out="fadeOut" data-autoplay="true" data-autoplay-timeout="8000" data-autoplay-hover-pause="true">
<!-- Begin carousel item
========================= -->
<div class="cc-item">
<!-- Element cover -->
<span class="cover bg-transparent-4-dark"></span>
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/gallery-slideshow-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-xxlg bottom-left caption-animate max-width-550">
<h2 class="cc-title">Summer Beauty</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<p class="cc-description">
Curabitur nec orci quis neque ultricies porta. Suspendisse blandit ipsum nec nibh.
</p>
<a href="gallery-single-carousel-center.html" class="btn btn-primary margin-top-25">View Gallery</a>
</div>
<!-- End caption -->
<!-- Begin thumbnail list (album preview thumbnails) Not displayed on smaller screens!!!
==========================================
* Use class "col-2", "col-3", "col-4" "col-5" or "col-6" for thumbnail list columns.
* Use class "tl-rotate" to rotate items randomly.
-->
<ul class="thumb-list col-3 tl-rotate">
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-1.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-2.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-3.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-4.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-5.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-6.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-7.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-8.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-9.jpg);"></a></li>
</ul>
<!-- End thumbnail list -->
</div>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<div class="cc-item">
<!-- Element cover -->
<span class="cover bg-transparent-4-dark"></span>
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/gallery-slideshow-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-xxlg bottom-left caption-animate max-width-550">
<h2 class="cc-title">Happy People</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<p class="cc-description">
Morbi elit metus, mollis eu vestibulum id, egestas id massa. Donec vehicula mollis justo aliquet laoreet.
</p>
<a href="gallery-single-carousel-center.html" class="btn btn-primary margin-top-25">View Gallery</a>
</div>
<!-- End caption -->
<!-- Begin thumbnail list (album preview thumbnails) Not displayed on smaller screens!!!
==========================================
* Use class "col-2", "col-3", "col-4" "col-5" or "col-6" for thumbnail list columns.
* Use class "tl-rotate" to rotate items randomly.
-->
<ul class="thumb-list col-3 tl-rotate">
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-10.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-11.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-12.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-13.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-14.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-15.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-16.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-17.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-18.jpg);"></a></li>
</ul>
<!-- End thumbnail list -->
</div>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<div class="cc-item">
<!-- Element cover -->
<span class="cover bg-transparent-4-dark"></span>
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/gallery-slideshow-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-xxlg bottom-left caption-animate max-width-550">
<h2 class="cc-title">Little Angels</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<p class="cc-description">
Sed at placerat odio, duis leo dui, porta in rutrum sit amet consequat.
</p>
<a href="gallery-single-carousel-center.html" class="btn btn-primary margin-top-25">View Gallery</a>
</div>
<!-- End caption -->
<!-- Begin thumbnail list (album preview thumbnails) Not displayed on smaller screens!!!
==========================================
* Use class "col-2", "col-3", "col-4" "col-5" or "col-6" for thumbnail list columns.
* Use class "tl-rotate" to rotate items randomly.
-->
<ul class="thumb-list col-3 tl-rotate">
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-19.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-20.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-21.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-22.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-23.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-24.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-25.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-26.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-27.jpg);"></a></li>
</ul>
<!-- End thumbnail list -->
</div>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<div class="cc-item">
<!-- Element cover -->
<span class="cover bg-transparent-4-dark"></span>
<!-- cc image -->
<div class="cc-image bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/gallery-slideshow-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-xxlg bottom-left caption-animate max-width-550">
<h2 class="cc-title">Black &amp; White</h2>
<!-- Use data attributes to set text maximum characters or words (example: data-max-characters="120" or data-max-words="40") -->
<p class="cc-description">
Vivamus neque lectus, luctus et malesuada sed, pulvinar nec lacus.
</p>
<a href="gallery-single-carousel-center.html" class="btn btn-primary margin-top-25">View Gallery</a>
</div>
<!-- End caption -->
<!-- Begin thumbnail list (album preview thumbnails) Not displayed on smaller screens!!!
==========================================
* Use class "col-2", "col-3", "col-4" "col-5" or "col-6" for thumbnail list columns.
* Use class "tl-rotate" to rotate items randomly.
-->
<ul class="thumb-list col-3 tl-rotate">
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-28.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-29.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-30.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-31.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-32.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-33.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-34.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-35.jpg);"></a></li>
<li><a href="gallery-single-carousel-center.html" class="thumb-list-item bg-image" style="background-image: url(assets/img/gallery/gallery-list/slideshow/small/gallery-single-36.jpg);"></a></li>
</ul>
<!-- End thumbnail list -->
</div>
<!-- End carousel item -->
<!-- Begin carousel item
========================= -->
<!-- <div class="cc-item">
<a class="owl-video" href="https://vimeo.com/99653121"></a>
<div class="cc-caption cc-caption-xxlg bottom-left caption-animate max-width-550">
<h2 class="cc-title">Beauty &amp; Fashion</h2>
<p class="cc-description">
Nunc felis lorem, faucibus nec aliquet malesuada a ligula ultrices vulputate.
</p>
<a href="gallery-single-carousel-center.html" class="btn btn-primary margin-top-25">View Gallery</a>
</div>
</div> -->
<!-- End carousel item -->
</div>
<!-- End content carousel -->
</div> <!-- /.gl-carousel-wrap -->
</div> <!-- /.gallery-list-carousel-inner -->
</section>
<!-- End gallery list section -->
<!-- ============================================
///// Begin footer section (footer minimal) /////
=================================================
* Use class "footer-dark" to enable dark footer.
* Use class "no-margin-top" if needed.
-->
<section id="footer" class="footer-minimal no-margin-top bg-transparent">
<div class="footer-inner">
<div class="footer-container tt-wrap">
<div class="row">
<div class="col-md-6 col-md-push-6">
<!-- Begin social buttons -->
<div class="social-buttons">
<ul>
<li><a href="https://www.facebook.com/themetorium" class="btn btn-social-min btn-default btn-link" 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-link" 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-link" 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-link" 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-link" 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-link" title="Drop me a line" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>
</div>
<!-- End social buttons -->
</div> <!-- /.col -->
<div class="col-md-6 col-md-pull-6">
<!-- Begin footer copyright -->
<div class="footer-copyright">
<p>&copy; 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-inner -->
</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>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,358 @@
/* --------------------------------------------------------------------
* Template color skin CSS (Blue)
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Template skin main color: #0b8aca;
* Hover color: #0172ab;
*
* Read template documentation about how to enable color skin!
----------------------------------------------------------------------- */
a {
color: #0b8aca;
}
a:hover, a:focus {
color: #0172ab;
text-decoration: none;
}
::selection {
background: #0b8aca;
}
::-moz-selection {
background: #0b8aca; /* Firefox */
}
::-webkit-selection {
background: #0b8aca; /* Safari */
}
hr.hr-short {
border-color: #0b8aca;
}
.animsition-loading {
border-color: #0b8aca;
}
.tt-menu-nav > li > a:after {
background-color: #0b8aca;
}
.tt-menu-nav > li.active > a:after {
background-color: #0b8aca;
}
.tt-submenu li > a:hover {
-webkit-box-shadow: inset 3px 0 0 0 #0b8aca;
box-shadow: inset 3px 0 0 0 #0b8aca;
}
.tt-submenu > li.active > a {
-webkit-box-shadow: 3px 0 0 0 #0b8aca;
box-shadow: inset 3px 0 0 0 #0b8aca;
}
.tt-menu-nav > li.active > a {
box-shadow: inset 4px 0 0 0 #0b8aca;
}
.tt-submenu > li.active > a {
box-shadow: inset 4px 0 0 0 #0b8aca;
}
.tt-clobal-search #tt-clobal-search-input:focus {
border-bottom-color: #0b8aca;
}
.tt-tools-button {
background-color: #0b8aca;
}
#tt-intro .cc-category {
background-color: #0b8aca;
}
ul.isotope-filter-links > li > a:after {
background-color: #0b8aca;
}
.isotope-filter-button {
background-color: #0b8aca;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a:hover {
color: #0b8aca;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a.active {
color: #0b8aca;
}
.gl-item-title a:hover {
color: #0b8aca;
}
.gli-alter-2 .gl-item-title a:hover {
color: #0b8aca;
}
.gli-alter-3 .gl-item-title a:hover {
color: #0b8aca;
}
.gli-colored .gallery-list-item .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-5 .gallery-list-item:hover .gl-item-image-inner:before {
background-color: #0b8aca !important;
}
.gtb-heading-category a,
.gtb-heading-category span {
background-color: #0b8aca;
}
#gallery.gsi-color .gallery-single-item:before {
background-color: #0b8aca;
}
.gallery-share {
background-color: #0b8aca;
}
ul.gallery-meta > li a:hover {
color: #0b8aca;
}
.gallery-single-carousel ul.gallery-meta > li a:hover {
color: #0b8aca;
}
.icon-heart-filled:before {
color: #0b8aca;
}
.sr-item-category a,
.sr-item-category span {
background-color: #0b8aca;
color: #FFF;
}
.sr-item-title:hover,
.sr-item-title > a:hover {
color: #0b8aca;
}
.sr-item-meta a:hover {
color: #0b8aca;
}
ul.sr-item-attr > li a:hover {
color: #0b8aca
}
.price-box.price-box-featured .btn-price-box {
background-color: #0b8aca;
border-color: #0b8aca;
}
.price-box.price-box-featured .btn-price-box:hover {
background-color: #0172ab;
border-color: #0172ab;
}
.nav-outside-top .owl-nav button.owl-prev:hover, .nav-outside-top .owl-nav button.owl-next:hover {
background-color: #0b8aca !important;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
background-color: #0b8aca;
}
.owl-carousel .cc-title a:hover {
/* color: #0b8aca; */
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span {
background-color: #0b8aca;
}
.cc-meta a:hover {
color: #0b8aca;
}
.owl-carousel ul.cc-item-attr > li a:hover {
color: #0b8aca;
}
#blog-list-carousel-section .owl-carousel .cc-category a:hover {
background-color: #0b8aca;
}
.bl-item-category a,
.bl-item-category span {
background-color: #0b8aca;
color: #FFF;
}
.bl-item-title:hover, .bl-item-title:focus,
.bl-item-title h2:hover, .bl-item-title h2:focus {
color: #0b8aca;
}
.bl-item-meta a:hover {
color: #0b8aca;
}
.blog-list-item .bl-item-read-more:hover span,
.blog-list-item .bl-item-read-more:hover span:before,
.blog-list-item .bl-item-read-more:hover span:after {
background-color: #0b8aca;
}
ul.bl-item-attr > li a:hover {
color: #0b8aca;
}
.blog-single-post-category a {
background-color: #0b8aca;
color: #FFF;
}
.single-post-image-caption a {
color: #0b8aca;
}
.blog-single-meta .article-author a:hover {
color: #0b8aca;
}
.blog-single-meta .article-time-cat a:hover {
color: #0b8aca;
}
.blog-single-links a:hover, .blog-single-links a:focus, .blog-single-links .favorite-btn:hover {
color: #0b8aca;
}
.blog-single-tags a:hover {
background-color: #0b8aca;
}
.bs-nav-title:hover, .bs-nav-title h4:hover {
color: #0b8aca;
}
.related-posts-heading {
border-color: #0b8aca;
}
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover {
color: #0b8aca;
}
.related-posts-item .rp-item-category a {
background-color: #0b8aca;
}
.media-heading a:hover {
color: #0b8aca;
}
.media-reply a:hover {
color: #0b8aca;
}
.sidebar-heading {
border-color: #0b8aca;
}
.sidebar hr {
border-color: #0b8aca;
}
.blog-author-name a:hover {
color: #0b8aca;
}
.sidebar-categories > ul > li > a:hover {
color: #0b8aca;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #0b8aca;
}
.sidebar-post-list .post-data .post-title a:hover {
color: #0b8aca;
}
.sidebar-post-list .post-data .author a:hover {
color: #0b8aca;
}
.sidebar-comment-data .author a:hover {
color: #0b8aca;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #0b8aca;
}
.sidebar-tags a:hover {
background-color: #0b8aca;
}
.sidebar-meta ul > li > a:hover {
color: #0b8aca;
}
#tt-post-password-form button {
background-color: #0b8aca;
}
.page-header-category > a {
background-color: #0b8aca;
color: #FFF;
}
.ph-more-info-trigger-icon {
border: 2px solid #0b8aca;
}
.ph-more-info-trigger-icon:before,
.ph-more-info-trigger-icon:after {
background-color: #0b8aca;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: #0b8aca;
border-color: #0b8aca;
}
.form-control:focus {
border-color: #0b8aca !important;
}
.btn-primary { /* same as template main color */
background-color: #0b8aca;
border-color: #0b8aca;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #0172ab;
border-color: #0172ab;
}
.btn-primary.btn-link {
color: #0b8aca;
}
.btn-primary-bordered {
color: #0b8aca;
border-color: #0b8aca;
}
.btn-link {
color: #0b8aca; /* same as template main link color */
}
.btn-link:hover,
.btn-link.focus,
.btn-link:focus,
.btn-link.active,
.btn-link:active,
.btn-link.active.focus,
.btn-link.active:focus,
.btn-link.active:hover,
.btn-link:active.focus,
.btn-link:active:focus,
.btn-link:active:hover,
.open > .dropdown-toggle.btn-link,
.open > .dropdown-toggle.btn-link.focus,
.open > .dropdown-toggle.btn-link:focus,
.open > .dropdown-toggle.btn-link:hover {
color: #0b8aca;
}
.follow-me-buttons a:hover {
color: #0b8aca;
}
.footer-copyright a {
color: #0b8aca;
}
.scrolltotop:hover,
.scrolltotop:focus {
background-color: #0b8aca;
}
/* ------------------------------------------------------------- *
* Helper classes
/* ------------------------------------------------------------- */
.text-main { color: #0b8aca !important; }
.link-main a { color: #0b8aca !important; }
.bg-main { background-color: #0b8aca !important; }
.border-main { border-color: #0b8aca !important; }
.border-top-main { border-top-color: #0b8aca !important; }
.border-bottom-main { border-bottom-color: #0b8aca !important; }
.border-left-main { border-left-color: #0b8aca !important; }
.border-right-main { border-right-color: #0b8aca !important; }

View File

@ -0,0 +1,358 @@
/* --------------------------------------------------------------------
* Template color skin CSS (Brown)
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Template skin main color: #947900;
* Hover color: #7b6605;
*
* Read template documentation about how to enable color skin!
----------------------------------------------------------------------- */
a {
color: #947900;
}
a:hover, a:focus {
color: #7b6605;
text-decoration: none;
}
::selection {
background: #947900;
}
::-moz-selection {
background: #947900; /* Firefox */
}
::-webkit-selection {
background: #947900; /* Safari */
}
hr.hr-short {
border-color: #947900;
}
.animsition-loading {
border-color: #947900;
}
.tt-menu-nav > li > a:after {
background-color: #947900;
}
.tt-menu-nav > li.active > a:after {
background-color: #947900;
}
.tt-submenu li > a:hover {
-webkit-box-shadow: inset 3px 0 0 0 #947900;
box-shadow: inset 3px 0 0 0 #947900;
}
.tt-submenu > li.active > a {
-webkit-box-shadow: 3px 0 0 0 #947900;
box-shadow: inset 3px 0 0 0 #947900;
}
.tt-menu-nav > li.active > a {
box-shadow: inset 4px 0 0 0 #947900;
}
.tt-submenu > li.active > a {
box-shadow: inset 4px 0 0 0 #947900;
}
.tt-clobal-search #tt-clobal-search-input:focus {
border-bottom-color: #947900;
}
.tt-tools-button {
background-color: #947900;
}
#tt-intro .cc-category {
background-color: #947900;
}
ul.isotope-filter-links > li > a:after {
background-color: #947900;
}
.isotope-filter-button {
background-color: #947900;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a:hover {
color: #947900;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a.active {
color: #947900;
}
.gl-item-title a:hover {
color: #947900;
}
.gli-alter-2 .gl-item-title a:hover {
color: #947900;
}
.gli-alter-3 .gl-item-title a:hover {
color: #947900;
}
.gli-colored .gallery-list-item .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-5 .gallery-list-item:hover .gl-item-image-inner:before {
background-color: #947900 !important;
}
.gtb-heading-category a,
.gtb-heading-category span {
background-color: #947900;
}
#gallery.gsi-color .gallery-single-item:before {
background-color: #947900;
}
.gallery-share {
background-color: #947900;
}
ul.gallery-meta > li a:hover {
color: #947900;
}
.gallery-single-carousel ul.gallery-meta > li a:hover {
color: #947900;
}
.icon-heart-filled:before {
color: #947900;
}
.sr-item-category a,
.sr-item-category span {
background-color: #947900;
color: #FFF;
}
.sr-item-title:hover,
.sr-item-title > a:hover {
color: #947900;
}
.sr-item-meta a:hover {
color: #947900;
}
ul.sr-item-attr > li a:hover {
color: #947900
}
.price-box.price-box-featured .btn-price-box {
background-color: #947900;
border-color: #947900;
}
.price-box.price-box-featured .btn-price-box:hover {
background-color: #7b6605;
border-color: #7b6605;
}
.nav-outside-top .owl-nav button.owl-prev:hover, .nav-outside-top .owl-nav button.owl-next:hover {
background-color: #947900 !important;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
background-color: #947900;
}
.owl-carousel .cc-title a:hover {
/* color: #947900; */
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span {
background-color: #947900;
}
.cc-meta a:hover {
color: #947900;
}
.owl-carousel ul.cc-item-attr > li a:hover {
color: #947900;
}
#blog-list-carousel-section .owl-carousel .cc-category a:hover {
background-color: #947900;
}
.bl-item-category a,
.bl-item-category span {
background-color: #947900;
color: #FFF;
}
.bl-item-title:hover, .bl-item-title:focus,
.bl-item-title h2:hover, .bl-item-title h2:focus {
color: #947900;
}
.bl-item-meta a:hover {
color: #947900;
}
.blog-list-item .bl-item-read-more:hover span,
.blog-list-item .bl-item-read-more:hover span:before,
.blog-list-item .bl-item-read-more:hover span:after {
background-color: #947900;
}
ul.bl-item-attr > li a:hover {
color: #947900;
}
.blog-single-post-category a {
background-color: #947900;
color: #FFF;
}
.single-post-image-caption a {
color: #947900;
}
.blog-single-meta .article-author a:hover {
color: #947900;
}
.blog-single-meta .article-time-cat a:hover {
color: #947900;
}
.blog-single-links a:hover, .blog-single-links a:focus, .blog-single-links .favorite-btn:hover {
color: #947900;
}
.blog-single-tags a:hover {
background-color: #947900;
}
.bs-nav-title:hover, .bs-nav-title h4:hover {
color: #947900;
}
.related-posts-heading {
border-color: #947900;
}
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover {
color: #947900;
}
.related-posts-item .rp-item-category a {
background-color: #947900;
}
.media-heading a:hover {
color: #947900;
}
.media-reply a:hover {
color: #947900;
}
.sidebar-heading {
border-color: #947900;
}
.sidebar hr {
border-color: #947900;
}
.blog-author-name a:hover {
color: #947900;
}
.sidebar-categories > ul > li > a:hover {
color: #947900;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #947900;
}
.sidebar-post-list .post-data .post-title a:hover {
color: #947900;
}
.sidebar-post-list .post-data .author a:hover {
color: #947900;
}
.sidebar-comment-data .author a:hover {
color: #947900;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #947900;
}
.sidebar-tags a:hover {
background-color: #947900;
}
.sidebar-meta ul > li > a:hover {
color: #947900;
}
#tt-post-password-form button {
background-color: #947900;
}
.page-header-category > a {
background-color: #947900;
color: #FFF;
}
.ph-more-info-trigger-icon {
border: 2px solid #947900;
}
.ph-more-info-trigger-icon:before,
.ph-more-info-trigger-icon:after {
background-color: #947900;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: #947900;
border-color: #947900;
}
.form-control:focus {
border-color: #947900 !important;
}
.btn-primary { /* same as template main color */
background-color: #947900;
border-color: #947900;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #7b6605;
border-color: #7b6605;
}
.btn-primary.btn-link {
color: #947900;
}
.btn-primary-bordered {
color: #947900;
border-color: #947900;
}
.btn-link {
color: #947900; /* same as template main link color */
}
.btn-link:hover,
.btn-link.focus,
.btn-link:focus,
.btn-link.active,
.btn-link:active,
.btn-link.active.focus,
.btn-link.active:focus,
.btn-link.active:hover,
.btn-link:active.focus,
.btn-link:active:focus,
.btn-link:active:hover,
.open > .dropdown-toggle.btn-link,
.open > .dropdown-toggle.btn-link.focus,
.open > .dropdown-toggle.btn-link:focus,
.open > .dropdown-toggle.btn-link:hover {
color: #947900;
}
.follow-me-buttons a:hover {
color: #947900;
}
.footer-copyright a {
color: #947900;
}
.scrolltotop:hover,
.scrolltotop:focus {
background-color: #947900;
}
/* ------------------------------------------------------------- *
* Helper classes
/* ------------------------------------------------------------- */
.text-main { color: #947900 !important; }
.link-main a { color: #947900 !important; }
.bg-main { background-color: #947900 !important; }
.border-main { border-color: #947900 !important; }
.border-top-main { border-top-color: #947900 !important; }
.border-bottom-main { border-bottom-color: #947900 !important; }
.border-left-main { border-left-color: #947900 !important; }
.border-right-main { border-right-color: #947900 !important; }

View File

@ -0,0 +1,359 @@
/* --------------------------------------------------------------------
* Template color skin CSS (Green)
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Template skin main color: #25a70b;
* Hover color: #1b9004;
*
* Read template documentation about how to enable color skin!
----------------------------------------------------------------------- */
a {
color: #25a70b;
}
a:hover, a:focus {
color: #1b9004;
text-decoration: none;
}
::selection {
background: #25a70b;
}
::-moz-selection {
background: #25a70b; /* Firefox */
}
::-webkit-selection {
background: #25a70b; /* Safari */
}
hr.hr-short {
border-color: #25a70b;
}
.animsition-loading {
border-color: #25a70b;
}
.tt-menu-nav > li > a:after {
background-color: #25a70b;
}
.tt-menu-nav > li.active > a:after {
background-color: #25a70b;
}
.tt-submenu li > a:hover {
-webkit-box-shadow: inset 3px 0 0 0 #25a70b;
box-shadow: inset 3px 0 0 0 #25a70b;
}
.tt-submenu > li.active > a {
-webkit-box-shadow: 3px 0 0 0 #25a70b;
box-shadow: inset 3px 0 0 0 #25a70b;
}
.tt-menu-nav > li.active > a {
box-shadow: inset 4px 0 0 0 #25a70b;
}
.tt-submenu > li.active > a {
box-shadow: inset 4px 0 0 0 #25a70b;
}
.tt-clobal-search #tt-clobal-search-input:focus {
border-bottom-color: #25a70b;
}
.tt-tools-button {
background-color: #25a70b;
}
#tt-intro .cc-category {
background-color: #25a70b;
}
ul.isotope-filter-links > li > a:after {
background-color: #25a70b;
}
.isotope-filter-button {
background-color: #25a70b;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a:hover {
color: #25a70b;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a.active {
color: #25a70b;
}
.gl-item-title a:hover {
color: #25a70b;
}
.gli-alter-2 .gl-item-title a:hover {
color: #25a70b;
}
.gli-alter-3 .gl-item-title a:hover {
color: #25a70b;
}
.gli-colored .gallery-list-item .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-5 .gallery-list-item:hover .gl-item-image-inner:before {
background-color: #25a70b !important;
}
.gtb-heading-category a,
.gtb-heading-category span {
background-color: #25a70b;
}
#gallery.gsi-color .gallery-single-item:before {
background-color: #25a70b;
}
.gallery-share {
background-color: #25a70b;
}
ul.gallery-meta > li a:hover {
color: #25a70b;
}
.gallery-single-carousel ul.gallery-meta > li a:hover {
color: #25a70b;
}
.icon-heart-filled:before {
color: #25a70b;
}
.sr-item-category a,
.sr-item-category span {
background-color: #25a70b;
color: #FFF;
}
.sr-item-title:hover,
.sr-item-title > a:hover {
color: #25a70b;
}
.sr-item-meta a:hover {
color: #25a70b;
}
ul.sr-item-attr > li a:hover {
color: #25a70b
}
.price-box.price-box-featured .btn-price-box {
background-color: #25a70b;
border-color: #25a70b;
}
.price-box.price-box-featured .btn-price-box:hover {
background-color: #1b9004;
border-color: #1b9004;
}
.nav-outside-top .owl-nav button.owl-prev:hover, .nav-outside-top .owl-nav button.owl-next:hover {
background-color: #25a70b !important;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
background-color: #25a70b;
}
.owl-carousel .cc-title a:hover {
/* color: #25a70b; */
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span {
background-color: #25a70b;
}
.cc-meta a:hover {
color: #25a70b;
}
.owl-carousel ul.cc-item-attr > li a:hover {
color: #25a70b;
}
#blog-list-carousel-section .owl-carousel .cc-category a:hover {
background-color: #25a70b;
}
.bl-item-category a,
.bl-item-category span {
background-color: #25a70b;
color: #FFF;
}
.bl-item-title:hover, .bl-item-title:focus,
.bl-item-title h2:hover, .bl-item-title h2:focus {
color: #25a70b;
}
.bl-item-meta a:hover {
color: #25a70b;
}
.blog-list-item .bl-item-read-more:hover span,
.blog-list-item .bl-item-read-more:hover span:before,
.blog-list-item .bl-item-read-more:hover span:after {
background-color: #25a70b;
}
ul.bl-item-attr > li a:hover {
color: #25a70b;
}
.blog-single-post-category a {
background-color: #25a70b;
color: #FFF;
}
.single-post-image-caption a {
color: #25a70b;
}
.blog-single-meta .article-author a:hover {
color: #25a70b;
}
.blog-single-meta .article-time-cat a:hover {
color: #25a70b;
}
.blog-single-links a:hover, .blog-single-links a:focus, .blog-single-links .favorite-btn:hover {
color: #25a70b;
}
.blog-single-tags a:hover {
background-color: #25a70b;
}
.bs-nav-title:hover, .bs-nav-title h4:hover {
color: #25a70b;
}
.related-posts-heading {
border-color: #25a70b;
}
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover {
color: #25a70b;
}
.related-posts-item .rp-item-category a {
background-color: #25a70b;
}
.media-heading a:hover {
color: #25a70b;
}
.media-reply a:hover {
color: #25a70b;
}
.sidebar-heading {
border-color: #25a70b;
}
.sidebar hr {
border-color: #25a70b;
}
.blog-author-name a:hover {
color: #25a70b;
}
.sidebar-categories > ul > li > a:hover {
color: #25a70b;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #25a70b;
}
.sidebar-post-list .post-data .post-title a:hover {
color: #25a70b;
}
.sidebar-post-list .post-data .author a:hover {
color: #25a70b;
}
.sidebar-comment-data .author a:hover {
color: #25a70b;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #25a70b;
}
.sidebar-tags a:hover {
background-color: #25a70b;
}
.sidebar-meta ul > li > a:hover {
color: #25a70b;
}
#tt-post-password-form button {
background-color: #25a70b;
}
.page-header-category > a {
background-color: #25a70b;
color: #FFF;
}
.ph-more-info-trigger-icon {
border: 2px solid #25a70b;
}
.ph-more-info-trigger-icon:before,
.ph-more-info-trigger-icon:after {
background-color: #25a70b;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: #25a70b;
border-color: #25a70b;
}
.form-control:focus {
border-color: #25a70b !important;
}
.btn-primary { /* same as template main color */
background-color: #25a70b;
border-color: #25a70b;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #1b9004;
border-color: #1b9004;
}
.btn-primary.btn-link {
color: #25a70b;
}
.btn-primary-bordered {
color: #25a70b;
border-color: #25a70b;
}
.btn-link {
color: #25a70b; /* same as template main link color */
}
.btn-link:hover,
.btn-link.focus,
.btn-link:focus,
.btn-link.active,
.btn-link:active,
.btn-link.active.focus,
.btn-link.active:focus,
.btn-link.active:hover,
.btn-link:active.focus,
.btn-link:active:focus,
.btn-link:active:hover,
.open > .dropdown-toggle.btn-link,
.open > .dropdown-toggle.btn-link.focus,
.open > .dropdown-toggle.btn-link:focus,
.open > .dropdown-toggle.btn-link:hover {
color: #25a70b;
}
.follow-me-buttons a:hover {
color: #25a70b;
}
.footer-copyright a {
color: #25a70b;
}
.scrolltotop:hover,
.scrolltotop:focus {
background-color: #25a70b;
}
/* ------------------------------------------------------------- *
* Helper classes
/* ------------------------------------------------------------- */
.text-main { color: #25a70b !important; }
.link-main a { color: #25a70b !important; }
.bg-main { background-color: #25a70b !important; }
.border-main { border-color: #25a70b !important; }
.border-top-main { border-top-color: #25a70b !important; }
.border-bottom-main { border-bottom-color: #25a70b !important; }
.border-left-main { border-left-color: #25a70b !important; }
.border-right-main { border-right-color: #25a70b !important; }

View File

@ -0,0 +1,358 @@
/* --------------------------------------------------------------------
* Template color skin CSS (Orange)
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Template skin main color: #ff8a00;
* Hover color: #e47c01;
*
* Read template documentation about how to enable color skin!
----------------------------------------------------------------------- */
a {
color: #ff8a00;
}
a:hover, a:focus {
color: #e47c01;
text-decoration: none;
}
::selection {
background: #ff8a00;
}
::-moz-selection {
background: #ff8a00; /* Firefox */
}
::-webkit-selection {
background: #ff8a00; /* Safari */
}
hr.hr-short {
border-color: #ff8a00;
}
.animsition-loading {
border-color: #ff8a00;
}
.tt-menu-nav > li > a:after {
background-color: #ff8a00;
}
.tt-menu-nav > li.active > a:after {
background-color: #ff8a00;
}
.tt-submenu li > a:hover {
-webkit-box-shadow: inset 3px 0 0 0 #ff8a00;
box-shadow: inset 3px 0 0 0 #ff8a00;
}
.tt-submenu > li.active > a {
-webkit-box-shadow: 3px 0 0 0 #ff8a00;
box-shadow: inset 3px 0 0 0 #ff8a00;
}
.tt-menu-nav > li.active > a {
box-shadow: inset 4px 0 0 0 #ff8a00;
}
.tt-submenu > li.active > a {
box-shadow: inset 4px 0 0 0 #ff8a00;
}
.tt-clobal-search #tt-clobal-search-input:focus {
border-bottom-color: #ff8a00;
}
.tt-tools-button {
background-color: #ff8a00;
}
#tt-intro .cc-category {
background-color: #ff8a00;
}
ul.isotope-filter-links > li > a:after {
background-color: #ff8a00;
}
.isotope-filter-button {
background-color: #ff8a00;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a:hover {
color: #ff8a00;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a.active {
color: #ff8a00;
}
.gl-item-title a:hover {
color: #ff8a00;
}
.gli-alter-2 .gl-item-title a:hover {
color: #ff8a00;
}
.gli-alter-3 .gl-item-title a:hover {
color: #ff8a00;
}
.gli-colored .gallery-list-item .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-5 .gallery-list-item:hover .gl-item-image-inner:before {
background-color: #ff8a00 !important;
}
.gtb-heading-category a,
.gtb-heading-category span {
background-color: #ff8a00;
}
#gallery.gsi-color .gallery-single-item:before {
background-color: #ff8a00;
}
.gallery-share {
background-color: #ff8a00;
}
ul.gallery-meta > li a:hover {
color: #ff8a00;
}
.gallery-single-carousel ul.gallery-meta > li a:hover {
color: #ff8a00;
}
.icon-heart-filled:before {
color: #ff8a00;
}
.sr-item-category a,
.sr-item-category span {
background-color: #ff8a00;
color: #FFF;
}
.sr-item-title:hover,
.sr-item-title > a:hover {
color: #ff8a00;
}
.sr-item-meta a:hover {
color: #ff8a00;
}
ul.sr-item-attr > li a:hover {
color: #ff8a00
}
.price-box.price-box-featured .btn-price-box {
background-color: #ff8a00;
border-color: #ff8a00;
}
.price-box.price-box-featured .btn-price-box:hover {
background-color: #e47c01;
border-color: #e47c01;
}
.nav-outside-top .owl-nav button.owl-prev:hover, .nav-outside-top .owl-nav button.owl-next:hover {
background-color: #ff8a00 !important;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
background-color: #ff8a00;
}
.owl-carousel .cc-title a:hover {
/* color: #ff8a00; */
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span {
background-color: #ff8a00;
}
.cc-meta a:hover {
color: #ff8a00;
}
.owl-carousel ul.cc-item-attr > li a:hover {
color: #ff8a00;
}
#blog-list-carousel-section .owl-carousel .cc-category a:hover {
background-color: #ff8a00;
}
.bl-item-category a,
.bl-item-category span {
background-color: #ff8a00;
color: #FFF;
}
.bl-item-title:hover, .bl-item-title:focus,
.bl-item-title h2:hover, .bl-item-title h2:focus {
color: #ff8a00;
}
.bl-item-meta a:hover {
color: #ff8a00;
}
.blog-list-item .bl-item-read-more:hover span,
.blog-list-item .bl-item-read-more:hover span:before,
.blog-list-item .bl-item-read-more:hover span:after {
background-color: #ff8a00;
}
ul.bl-item-attr > li a:hover {
color: #ff8a00;
}
.blog-single-post-category a {
background-color: #ff8a00;
color: #FFF;
}
.single-post-image-caption a {
color: #ff8a00;
}
.blog-single-meta .article-author a:hover {
color: #ff8a00;
}
.blog-single-meta .article-time-cat a:hover {
color: #ff8a00;
}
.blog-single-links a:hover, .blog-single-links a:focus, .blog-single-links .favorite-btn:hover {
color: #ff8a00;
}
.blog-single-tags a:hover {
background-color: #ff8a00;
}
.bs-nav-title:hover, .bs-nav-title h4:hover {
color: #ff8a00;
}
.related-posts-heading {
border-color: #ff8a00;
}
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover {
color: #ff8a00;
}
.related-posts-item .rp-item-category a {
background-color: #ff8a00;
}
.media-heading a:hover {
color: #ff8a00;
}
.media-reply a:hover {
color: #ff8a00;
}
.sidebar-heading {
border-color: #ff8a00;
}
.sidebar hr {
border-color: #ff8a00;
}
.blog-author-name a:hover {
color: #ff8a00;
}
.sidebar-categories > ul > li > a:hover {
color: #ff8a00;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #ff8a00;
}
.sidebar-post-list .post-data .post-title a:hover {
color: #ff8a00;
}
.sidebar-post-list .post-data .author a:hover {
color: #ff8a00;
}
.sidebar-comment-data .author a:hover {
color: #ff8a00;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #ff8a00;
}
.sidebar-tags a:hover {
background-color: #ff8a00;
}
.sidebar-meta ul > li > a:hover {
color: #ff8a00;
}
#tt-post-password-form button {
background-color: #ff8a00;
}
.page-header-category > a {
background-color: #ff8a00;
color: #FFF;
}
.ph-more-info-trigger-icon {
border: 2px solid #ff8a00;
}
.ph-more-info-trigger-icon:before,
.ph-more-info-trigger-icon:after {
background-color: #ff8a00;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: #ff8a00;
border-color: #ff8a00;
}
.form-control:focus {
border-color: #ff8a00 !important;
}
.btn-primary { /* same as template main color */
background-color: #ff8a00;
border-color: #ff8a00;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #e47c01;
border-color: #e47c01;
}
.btn-primary.btn-link {
color: #ff8a00;
}
.btn-primary-bordered {
color: #ff8a00;
border-color: #ff8a00;
}
.btn-link {
color: #ff8a00; /* same as template main link color */
}
.btn-link:hover,
.btn-link.focus,
.btn-link:focus,
.btn-link.active,
.btn-link:active,
.btn-link.active.focus,
.btn-link.active:focus,
.btn-link.active:hover,
.btn-link:active.focus,
.btn-link:active:focus,
.btn-link:active:hover,
.open > .dropdown-toggle.btn-link,
.open > .dropdown-toggle.btn-link.focus,
.open > .dropdown-toggle.btn-link:focus,
.open > .dropdown-toggle.btn-link:hover {
color: #ff8a00;
}
.follow-me-buttons a:hover {
color: #ff8a00;
}
.footer-copyright a {
color: #ff8a00;
}
.scrolltotop:hover,
.scrolltotop:focus {
background-color: #ff8a00;
}
/* ------------------------------------------------------------- *
* Helper classes
/* ------------------------------------------------------------- */
.text-main { color: #ff8a00 !important; }
.link-main a { color: #ff8a00 !important; }
.bg-main { background-color: #ff8a00 !important; }
.border-main { border-color: #ff8a00 !important; }
.border-top-main { border-top-color: #ff8a00 !important; }
.border-bottom-main { border-bottom-color: #ff8a00 !important; }
.border-left-main { border-left-color: #ff8a00 !important; }
.border-right-main { border-right-color: #ff8a00 !important; }

View File

@ -0,0 +1,358 @@
/* --------------------------------------------------------------------
* Template color skin CSS (Pink)
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Template skin main color: #e83e96;
* Hover color: #c12476;
*
* Read template documentation about how to enable color skin!
----------------------------------------------------------------------- */
a {
color: #e83e96;
}
a:hover, a:focus {
color: #c12476;
text-decoration: none;
}
::selection {
background: #e83e96;
}
::-moz-selection {
background: #e83e96; /* Firefox */
}
::-webkit-selection {
background: #e83e96; /* Safari */
}
hr.hr-short {
border-color: #e83e96;
}
.animsition-loading {
border-color: #e83e96;
}
.tt-menu-nav > li > a:after {
background-color: #e83e96;
}
.tt-menu-nav > li.active > a:after {
background-color: #e83e96;
}
.tt-submenu li > a:hover {
-webkit-box-shadow: inset 3px 0 0 0 #e83e96;
box-shadow: inset 3px 0 0 0 #e83e96;
}
.tt-submenu > li.active > a {
-webkit-box-shadow: 3px 0 0 0 #e83e96;
box-shadow: inset 3px 0 0 0 #e83e96;
}
.tt-menu-nav > li.active > a {
box-shadow: inset 4px 0 0 0 #e83e96;
}
.tt-submenu > li.active > a {
box-shadow: inset 4px 0 0 0 #e83e96;
}
.tt-clobal-search #tt-clobal-search-input:focus {
border-bottom-color: #e83e96;
}
.tt-tools-button {
background-color: #e83e96;
}
#tt-intro .cc-category {
background-color: #e83e96;
}
ul.isotope-filter-links > li > a:after {
background-color: #e83e96;
}
.isotope-filter-button {
background-color: #e83e96;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a:hover {
color: #e83e96;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a.active {
color: #e83e96;
}
.gl-item-title a:hover {
color: #e83e96;
}
.gli-alter-2 .gl-item-title a:hover {
color: #e83e96;
}
.gli-alter-3 .gl-item-title a:hover {
color: #e83e96;
}
.gli-colored .gallery-list-item .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-5 .gallery-list-item:hover .gl-item-image-inner:before {
background-color: #e83e96 !important;
}
.gtb-heading-category a,
.gtb-heading-category span {
background-color: #e83e96;
}
#gallery.gsi-color .gallery-single-item:before {
background-color: #e83e96;
}
.gallery-share {
background-color: #e83e96;
}
ul.gallery-meta > li a:hover {
color: #e83e96;
}
.gallery-single-carousel ul.gallery-meta > li a:hover {
color: #e83e96;
}
.icon-heart-filled:before {
color: #e83e96;
}
.sr-item-category a,
.sr-item-category span {
background-color: #e83e96;
color: #FFF;
}
.sr-item-title:hover,
.sr-item-title > a:hover {
color: #e83e96;
}
.sr-item-meta a:hover {
color: #e83e96;
}
ul.sr-item-attr > li a:hover {
color: #e83e96
}
.price-box.price-box-featured .btn-price-box {
background-color: #e83e96;
border-color: #e83e96;
}
.price-box.price-box-featured .btn-price-box:hover {
background-color: #c12476;
border-color: #c12476;
}
.nav-outside-top .owl-nav button.owl-prev:hover, .nav-outside-top .owl-nav button.owl-next:hover {
background-color: #e83e96 !important;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
background-color: #e83e96;
}
.owl-carousel .cc-title a:hover {
/* color: #e83e96; */
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span {
background-color: #e83e96;
}
.cc-meta a:hover {
color: #e83e96;
}
.owl-carousel ul.cc-item-attr > li a:hover {
color: #e83e96;
}
#blog-list-carousel-section .owl-carousel .cc-category a:hover {
background-color: #e83e96;
}
.bl-item-category a,
.bl-item-category span {
background-color: #e83e96;
color: #FFF;
}
.bl-item-title:hover, .bl-item-title:focus,
.bl-item-title h2:hover, .bl-item-title h2:focus {
color: #e83e96;
}
.bl-item-meta a:hover {
color: #e83e96;
}
.blog-list-item .bl-item-read-more:hover span,
.blog-list-item .bl-item-read-more:hover span:before,
.blog-list-item .bl-item-read-more:hover span:after {
background-color: #e83e96;
}
ul.bl-item-attr > li a:hover {
color: #e83e96;
}
.blog-single-post-category a {
background-color: #e83e96;
color: #FFF;
}
.single-post-image-caption a {
color: #e83e96;
}
.blog-single-meta .article-author a:hover {
color: #e83e96;
}
.blog-single-meta .article-time-cat a:hover {
color: #e83e96;
}
.blog-single-links a:hover, .blog-single-links a:focus, .blog-single-links .favorite-btn:hover {
color: #e83e96;
}
.blog-single-tags a:hover {
background-color: #e83e96;
}
.bs-nav-title:hover, .bs-nav-title h4:hover {
color: #e83e96;
}
.related-posts-heading {
border-color: #e83e96;
}
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover {
color: #e83e96;
}
.related-posts-item .rp-item-category a {
background-color: #e83e96;
}
.media-heading a:hover {
color: #e83e96;
}
.media-reply a:hover {
color: #e83e96;
}
.sidebar-heading {
border-color: #e83e96;
}
.sidebar hr {
border-color: #e83e96;
}
.blog-author-name a:hover {
color: #e83e96;
}
.sidebar-categories > ul > li > a:hover {
color: #e83e96;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #e83e96;
}
.sidebar-post-list .post-data .post-title a:hover {
color: #e83e96;
}
.sidebar-post-list .post-data .author a:hover {
color: #e83e96;
}
.sidebar-comment-data .author a:hover {
color: #e83e96;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #e83e96;
}
.sidebar-tags a:hover {
background-color: #e83e96;
}
.sidebar-meta ul > li > a:hover {
color: #e83e96;
}
#tt-post-password-form button {
background-color: #e83e96;
}
.page-header-category > a {
background-color: #e83e96;
color: #FFF;
}
.ph-more-info-trigger-icon {
border: 2px solid #e83e96;
}
.ph-more-info-trigger-icon:before,
.ph-more-info-trigger-icon:after {
background-color: #e83e96;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: #e83e96;
border-color: #e83e96;
}
.form-control:focus {
border-color: #e83e96 !important;
}
.btn-primary { /* same as template main color */
background-color: #e83e96;
border-color: #e83e96;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #c12476;
border-color: #c12476;
}
.btn-primary.btn-link {
color: #e83e96;
}
.btn-primary-bordered {
color: #e83e96;
border-color: #e83e96;
}
.btn-link {
color: #e83e96; /* same as template main link color */
}
.btn-link:hover,
.btn-link.focus,
.btn-link:focus,
.btn-link.active,
.btn-link:active,
.btn-link.active.focus,
.btn-link.active:focus,
.btn-link.active:hover,
.btn-link:active.focus,
.btn-link:active:focus,
.btn-link:active:hover,
.open > .dropdown-toggle.btn-link,
.open > .dropdown-toggle.btn-link.focus,
.open > .dropdown-toggle.btn-link:focus,
.open > .dropdown-toggle.btn-link:hover {
color: #e83e96;
}
.follow-me-buttons a:hover {
color: #e83e96;
}
.footer-copyright a {
color: #e83e96;
}
.scrolltotop:hover,
.scrolltotop:focus {
background-color: #e83e96;
}
/* ------------------------------------------------------------- *
* Helper classes
/* ------------------------------------------------------------- */
.text-main { color: #e83e96 !important; }
.link-main a { color: #e83e96 !important; }
.bg-main { background-color: #e83e96 !important; }
.border-main { border-color: #e83e96 !important; }
.border-top-main { border-top-color: #e83e96 !important; }
.border-bottom-main { border-bottom-color: #e83e96 !important; }
.border-left-main { border-left-color: #e83e96 !important; }
.border-right-main { border-right-color: #e83e96 !important; }

View File

@ -0,0 +1,358 @@
/* --------------------------------------------------------------------
* Template color skin CSS (Purple)
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Template skin main color: #9e009e;
* Hover color: #80067f;
*
* Read template documentation about how to enable color skin!
----------------------------------------------------------------------- */
a {
color: #9e009e;
}
a:hover, a:focus {
color: #80067f;
text-decoration: none;
}
::selection {
background: #9e009e;
}
::-moz-selection {
background: #9e009e; /* Firefox */
}
::-webkit-selection {
background: #9e009e; /* Safari */
}
hr.hr-short {
border-color: #9e009e;
}
.animsition-loading {
border-color: #9e009e;
}
.tt-menu-nav > li > a:after {
background-color: #9e009e;
}
.tt-menu-nav > li.active > a:after {
background-color: #9e009e;
}
.tt-submenu li > a:hover {
-webkit-box-shadow: inset 3px 0 0 0 #9e009e;
box-shadow: inset 3px 0 0 0 #9e009e;
}
.tt-submenu > li.active > a {
-webkit-box-shadow: 3px 0 0 0 #9e009e;
box-shadow: inset 3px 0 0 0 #9e009e;
}
.tt-menu-nav > li.active > a {
box-shadow: inset 4px 0 0 0 #9e009e;
}
.tt-submenu > li.active > a {
box-shadow: inset 4px 0 0 0 #9e009e;
}
.tt-clobal-search #tt-clobal-search-input:focus {
border-bottom-color: #9e009e;
}
.tt-tools-button {
background-color: #9e009e;
}
#tt-intro .cc-category {
background-color: #9e009e;
}
ul.isotope-filter-links > li > a:after {
background-color: #9e009e;
}
.isotope-filter-button {
background-color: #9e009e;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a:hover {
color: #9e009e;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a.active {
color: #9e009e;
}
.gl-item-title a:hover {
color: #9e009e;
}
.gli-alter-2 .gl-item-title a:hover {
color: #9e009e;
}
.gli-alter-3 .gl-item-title a:hover {
color: #9e009e;
}
.gli-colored .gallery-list-item .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-5 .gallery-list-item:hover .gl-item-image-inner:before {
background-color: #9e009e !important;
}
.gtb-heading-category a,
.gtb-heading-category span {
background-color: #9e009e;
}
#gallery.gsi-color .gallery-single-item:before {
background-color: #9e009e;
}
.gallery-share {
background-color: #9e009e;
}
ul.gallery-meta > li a:hover {
color: #9e009e;
}
.gallery-single-carousel ul.gallery-meta > li a:hover {
color: #9e009e;
}
.icon-heart-filled:before {
color: #9e009e;
}
.sr-item-category a,
.sr-item-category span {
background-color: #9e009e;
color: #FFF;
}
.sr-item-title:hover,
.sr-item-title > a:hover {
color: #9e009e;
}
.sr-item-meta a:hover {
color: #9e009e;
}
ul.sr-item-attr > li a:hover {
color: #9e009e
}
.price-box.price-box-featured .btn-price-box {
background-color: #9e009e;
border-color: #9e009e;
}
.price-box.price-box-featured .btn-price-box:hover {
background-color: #80067f;
border-color: #80067f;
}
.nav-outside-top .owl-nav button.owl-prev:hover, .nav-outside-top .owl-nav button.owl-next:hover {
background-color: #9e009e !important;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
background-color: #9e009e;
}
.owl-carousel .cc-title a:hover {
/* color: #9e009e; */
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span {
background-color: #9e009e;
}
.cc-meta a:hover {
color: #9e009e;
}
.owl-carousel ul.cc-item-attr > li a:hover {
color: #9e009e;
}
#blog-list-carousel-section .owl-carousel .cc-category a:hover {
background-color: #9e009e;
}
.bl-item-category a,
.bl-item-category span {
background-color: #9e009e;
color: #FFF;
}
.bl-item-title:hover, .bl-item-title:focus,
.bl-item-title h2:hover, .bl-item-title h2:focus {
color: #9e009e;
}
.bl-item-meta a:hover {
color: #9e009e;
}
.blog-list-item .bl-item-read-more:hover span,
.blog-list-item .bl-item-read-more:hover span:before,
.blog-list-item .bl-item-read-more:hover span:after {
background-color: #9e009e;
}
ul.bl-item-attr > li a:hover {
color: #9e009e;
}
.blog-single-post-category a {
background-color: #9e009e;
color: #FFF;
}
.single-post-image-caption a {
color: #9e009e;
}
.blog-single-meta .article-author a:hover {
color: #9e009e;
}
.blog-single-meta .article-time-cat a:hover {
color: #9e009e;
}
.blog-single-links a:hover, .blog-single-links a:focus, .blog-single-links .favorite-btn:hover {
color: #9e009e;
}
.blog-single-tags a:hover {
background-color: #9e009e;
}
.bs-nav-title:hover, .bs-nav-title h4:hover {
color: #9e009e;
}
.related-posts-heading {
border-color: #9e009e;
}
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover {
color: #9e009e;
}
.related-posts-item .rp-item-category a {
background-color: #9e009e;
}
.media-heading a:hover {
color: #9e009e;
}
.media-reply a:hover {
color: #9e009e;
}
.sidebar-heading {
border-color: #9e009e;
}
.sidebar hr {
border-color: #9e009e;
}
.blog-author-name a:hover {
color: #9e009e;
}
.sidebar-categories > ul > li > a:hover {
color: #9e009e;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #9e009e;
}
.sidebar-post-list .post-data .post-title a:hover {
color: #9e009e;
}
.sidebar-post-list .post-data .author a:hover {
color: #9e009e;
}
.sidebar-comment-data .author a:hover {
color: #9e009e;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #9e009e;
}
.sidebar-tags a:hover {
background-color: #9e009e;
}
.sidebar-meta ul > li > a:hover {
color: #9e009e;
}
#tt-post-password-form button {
background-color: #9e009e;
}
.page-header-category > a {
background-color: #9e009e;
color: #FFF;
}
.ph-more-info-trigger-icon {
border: 2px solid #9e009e;
}
.ph-more-info-trigger-icon:before,
.ph-more-info-trigger-icon:after {
background-color: #9e009e;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: #9e009e;
border-color: #9e009e;
}
.form-control:focus {
border-color: #9e009e !important;
}
.btn-primary { /* same as template main color */
background-color: #9e009e;
border-color: #9e009e;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #80067f;
border-color: #80067f;
}
.btn-primary.btn-link {
color: #9e009e;
}
.btn-primary-bordered {
color: #9e009e;
border-color: #9e009e;
}
.btn-link {
color: #9e009e; /* same as template main link color */
}
.btn-link:hover,
.btn-link.focus,
.btn-link:focus,
.btn-link.active,
.btn-link:active,
.btn-link.active.focus,
.btn-link.active:focus,
.btn-link.active:hover,
.btn-link:active.focus,
.btn-link:active:focus,
.btn-link:active:hover,
.open > .dropdown-toggle.btn-link,
.open > .dropdown-toggle.btn-link.focus,
.open > .dropdown-toggle.btn-link:focus,
.open > .dropdown-toggle.btn-link:hover {
color: #9e009e;
}
.follow-me-buttons a:hover {
color: #9e009e;
}
.footer-copyright a {
color: #9e009e;
}
.scrolltotop:hover,
.scrolltotop:focus {
background-color: #9e009e;
}
/* ------------------------------------------------------------- *
* Helper classes
/* ------------------------------------------------------------- */
.text-main { color: #9e009e !important; }
.link-main a { color: #9e009e !important; }
.bg-main { background-color: #9e009e !important; }
.border-main { border-color: #9e009e !important; }
.border-top-main { border-top-color: #9e009e !important; }
.border-bottom-main { border-bottom-color: #9e009e !important; }
.border-left-main { border-left-color: #9e009e !important; }
.border-right-main { border-right-color: #9e009e !important; }

View File

@ -0,0 +1,358 @@
/* --------------------------------------------------------------------
* Template color skin CSS (Red)
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Template skin main color: #da0d0d;
* Hover color: #bd0707;
*
* Read template documentation about how to enable color skin!
----------------------------------------------------------------------- */
a {
color: #da0d0d;
}
a:hover, a:focus {
color: #bd0707;
text-decoration: none;
}
::selection {
background: #da0d0d;
}
::-moz-selection {
background: #da0d0d; /* Firefox */
}
::-webkit-selection {
background: #da0d0d; /* Safari */
}
hr.hr-short {
border-color: #da0d0d;
}
.animsition-loading {
border-color: #da0d0d;
}
.tt-menu-nav > li > a:after {
background-color: #da0d0d;
}
.tt-menu-nav > li.active > a:after {
background-color: #da0d0d;
}
.tt-submenu li > a:hover {
-webkit-box-shadow: inset 3px 0 0 0 #da0d0d;
box-shadow: inset 3px 0 0 0 #da0d0d;
}
.tt-submenu > li.active > a {
-webkit-box-shadow: 3px 0 0 0 #da0d0d;
box-shadow: inset 3px 0 0 0 #da0d0d;
}
.tt-menu-nav > li.active > a {
box-shadow: inset 4px 0 0 0 #da0d0d;
}
.tt-submenu > li.active > a {
box-shadow: inset 4px 0 0 0 #da0d0d;
}
.tt-clobal-search #tt-clobal-search-input:focus {
border-bottom-color: #da0d0d;
}
.tt-tools-button {
background-color: #da0d0d;
}
#tt-intro .cc-category {
background-color: #da0d0d;
}
ul.isotope-filter-links > li > a:after {
background-color: #da0d0d;
}
.isotope-filter-button {
background-color: #da0d0d;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a:hover {
color: #da0d0d;
}
.isotope-filter.fi-to-button ul.isotope-filter-links > li > a.active {
color: #da0d0d;
}
.gl-item-title a:hover {
color: #da0d0d;
}
.gli-alter-2 .gl-item-title a:hover {
color: #da0d0d;
}
.gli-alter-3 .gl-item-title a:hover {
color: #da0d0d;
}
.gli-colored .gallery-list-item .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-colored.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before,
.gli-colored.gli-alter-5 .gallery-list-item:hover .gl-item-image-inner:before {
background-color: #da0d0d !important;
}
.gtb-heading-category a,
.gtb-heading-category span {
background-color: #da0d0d;
}
#gallery.gsi-color .gallery-single-item:before {
background-color: #da0d0d;
}
.gallery-share {
background-color: #da0d0d;
}
ul.gallery-meta > li a:hover {
color: #da0d0d;
}
.gallery-single-carousel ul.gallery-meta > li a:hover {
color: #da0d0d;
}
.icon-heart-filled:before {
color: #da0d0d;
}
.sr-item-category a,
.sr-item-category span {
background-color: #da0d0d;
color: #FFF;
}
.sr-item-title:hover,
.sr-item-title > a:hover {
color: #da0d0d;
}
.sr-item-meta a:hover {
color: #da0d0d;
}
ul.sr-item-attr > li a:hover {
color: #da0d0d
}
.price-box.price-box-featured .btn-price-box {
background-color: #da0d0d;
border-color: #da0d0d;
}
.price-box.price-box-featured .btn-price-box:hover {
background-color: #bd0707;
border-color: #bd0707;
}
.nav-outside-top .owl-nav button.owl-prev:hover, .nav-outside-top .owl-nav button.owl-next:hover {
background-color: #da0d0d !important;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
background-color: #da0d0d;
}
.owl-carousel .cc-title a:hover {
/* color: #da0d0d; */
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span {
background-color: #da0d0d;
}
.cc-meta a:hover {
color: #da0d0d;
}
.owl-carousel ul.cc-item-attr > li a:hover {
color: #da0d0d;
}
#blog-list-carousel-section .owl-carousel .cc-category a:hover {
background-color: #da0d0d;
}
.bl-item-category a,
.bl-item-category span {
background-color: #da0d0d;
color: #FFF;
}
.bl-item-title:hover, .bl-item-title:focus,
.bl-item-title h2:hover, .bl-item-title h2:focus {
color: #da0d0d;
}
.bl-item-meta a:hover {
color: #da0d0d;
}
.blog-list-item .bl-item-read-more:hover span,
.blog-list-item .bl-item-read-more:hover span:before,
.blog-list-item .bl-item-read-more:hover span:after {
background-color: #da0d0d;
}
ul.bl-item-attr > li a:hover {
color: #da0d0d;
}
.blog-single-post-category a {
background-color: #da0d0d;
color: #FFF;
}
.single-post-image-caption a {
color: #da0d0d;
}
.blog-single-meta .article-author a:hover {
color: #da0d0d;
}
.blog-single-meta .article-time-cat a:hover {
color: #da0d0d;
}
.blog-single-links a:hover, .blog-single-links a:focus, .blog-single-links .favorite-btn:hover {
color: #da0d0d;
}
.blog-single-tags a:hover {
background-color: #da0d0d;
}
.bs-nav-title:hover, .bs-nav-title h4:hover {
color: #da0d0d;
}
.related-posts-heading {
border-color: #da0d0d;
}
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover {
color: #da0d0d;
}
.related-posts-item .rp-item-category a {
background-color: #da0d0d;
}
.media-heading a:hover {
color: #da0d0d;
}
.media-reply a:hover {
color: #da0d0d;
}
.sidebar-heading {
border-color: #da0d0d;
}
.sidebar hr {
border-top: 2px solid #da0d0d;
}
.blog-author-name a:hover {
color: #da0d0d;
}
.sidebar-categories > ul > li > a:hover {
color: #da0d0d;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #da0d0d;
}
.sidebar-post-list .post-data .post-title a:hover {
color: #da0d0d;
}
.sidebar-post-list .post-data .author a:hover {
color: #da0d0d;
}
.sidebar-comment-data .author a:hover {
color: #da0d0d;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #da0d0d;
}
.sidebar-tags a:hover {
background-color: #da0d0d;
}
.sidebar-meta ul > li > a:hover {
color: #da0d0d;
}
#tt-post-password-form button {
background-color: #da0d0d;
}
.page-header-category > a {
background-color: #da0d0d;
color: #FFF;
}
.ph-more-info-trigger-icon {
border: 2px solid #da0d0d;
}
.ph-more-info-trigger-icon:before,
.ph-more-info-trigger-icon:after {
background-color: #da0d0d;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
background-color: #da0d0d;
border-color: #da0d0d;
}
.form-control:focus {
border-color: #da0d0d !important;
}
.btn-primary { /* same as template main color */
background-color: #da0d0d;
border-color: #da0d0d;
}
.btn-primary:hover,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #bd0707;
border-color: #bd0707;
}
.btn-primary.btn-link {
color: #da0d0d;
}
.btn-primary-bordered {
color: #da0d0d;
border-color: #da0d0d;
}
.btn-link {
color: #da0d0d; /* same as template main link color */
}
.btn-link:hover,
.btn-link.focus,
.btn-link:focus,
.btn-link.active,
.btn-link:active,
.btn-link.active.focus,
.btn-link.active:focus,
.btn-link.active:hover,
.btn-link:active.focus,
.btn-link:active:focus,
.btn-link:active:hover,
.open > .dropdown-toggle.btn-link,
.open > .dropdown-toggle.btn-link.focus,
.open > .dropdown-toggle.btn-link:focus,
.open > .dropdown-toggle.btn-link:hover {
color: #da0d0d;
}
.follow-me-buttons a:hover {
color: #da0d0d;
}
.footer-copyright a {
color: #da0d0d;
}
.scrolltotop:hover,
.scrolltotop:focus {
background-color: #da0d0d;
}
/* ------------------------------------------------------------- *
* Helper classes
/* ------------------------------------------------------------- */
.text-main { color: #da0d0d !important; }
.link-main a { color: #da0d0d !important; }
.bg-main { background-color: #da0d0d !important; }
.border-main { border-color: #da0d0d !important; }
.border-top-main { border-top-color: #da0d0d !important; }
.border-bottom-main { border-bottom-color: #da0d0d !important; }
.border-left-main { border-left-color: #da0d0d !important; }
.border-right-main { border-right-color: #da0d0d !important; }

View File

@ -0,0 +1,646 @@
/* --------------------------------------------------------------------------
* Template Dark Style CSS
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: http://themetorium.net
*
* Read template documentation about how to enable dark style!
-------------------------------------------------------------------------- */
/* Table of Content
====================
# General
# Page preloader
# Header
# Menu
# Mobile header
# Follow me buttons
# Gallery list
# Gallery single
# Blog list
# Blog single
# Pagination
# OWL carousel
# Buttons
# Forms
# Modal
# Split box
# Contact
# Demos
# Display element on light or dark style only
# Miscellaneous
*/
/* general */
body {
background-color: #0a0a0a;
color: #CCC;
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
color: #EEE;
}
/* page preloader */
.pace-active {
background-color: #0a0a0a;
}
/* header */
#header {
background-color: #111;
color: #BBB;
}
#header.menu-align-center {
background-color: transparent;
}
@media (min-width: 768px) {
#header.header-transparent {
background-color: transparent;
}
}
#header.header-transparent.header-filled {
background-color: #111;
}
/* logo */
#logo .logo-dark {
display: none;
}
@media (min-width: 992px) {
#logo .logo-light {
display: block;
}
#header.header-transparent.header-filled #logo .logo-dark {
display: none;
}
#header.header-transparent.header-filled #logo .logo-light {
display: block;
}
}
#logo .logo-dark-m {
display: none;
}
@media (max-width: 991px) {
#logo .logo-light-m {
display: block;
}
}
/* menu */
#tt-m-menu-toggle-btn span,
#tt-m-menu-toggle-btn span:before,
#tt-m-menu-toggle-btn span:after {
background-color: #FFF;
}
.tt-menu-nav > li > a {
color: #DDD;
}
/* menu submenu (same as "tt-submenu-dark") */
.tt-submenu {
background-color: #111;
}
@media (min-width: 992px) {
.tt-submenu {
background-color: rgba(25, 25, 25, 0.95);
}
}
.tt-submenu-master > .tt-submenu {
box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8);
}
.tt-submenu li > a {
color: #CCC;
}
.tt-submenu li > a:hover {
color: #FFF;
}
.tt-submenu > li.active > a {
color: #FFF;
}
/* menu tools */
.tt-menu-tools > ul > li > a {
color: #DDD;
}
.tt-menu-tools > ul > li > a:hover {
color: #FFF;
}
/* tt-dropdown */
.tt-dropdown {
background-color: rgba(25, 25, 25, 0.95);
}
.tt-dropdown-master > .tt-dropdown {
box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: inset 0 0 0 1px rgba(99, 99, 99, 0.1), inset 0 22px 10px -20px rgba(0, 0, 0, 0.8);
}
.tt-dropdown li > a {
color: #AAA;
}
.tt-dropdown li > a:hover {
color: #FFF;
}
.tt-dropdown > li.active > a {
color: #FFF;
}
/* search */
#big-search-input {
}
.sr-item-title,
.sr-item-title > a {
color: #CCC;
}
.sr-item-title > a:hover {
color: #08c1b8;
}
.big-search-input-wrap button {
color: #333 !important;
}
/* page header */
#page-header,
.page-header-title,
.page-header-subtitle,
#page-header .page-header-description {
color: #CCC;
}
#page-header.ph-image-on,
#page-header.ph-image-on .page-header-description {
color: #EEE;
}
/* isotope filter */
ul.isotope-filter-links > li > a {
color: #CCC;
}
/* gallery list */
.gallery-list-item .gl-item-image-inner:hover:before,
.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:before,
.gli-alter-4 .gallery-list-item:hover .gl-item-image-inner:hover:before {
background-color: #000;
opacity: .75;
}
.gli-frame .gl-item-image-wrap {
background-color: #111 !important;
border-color: #222 !important;
}
.gli-alter-2 .gl-item-info {
background-color: rgba(0, 0, 0, 0.8) !important;
}
.gli-alter-3 .gl-item-info {
background-color: #111 !important;
}
.gl-item-title,
.gl-item-title a,
.gli-alter-1 .gl-item-title,
.gli-alter-1 .gl-item-title a,
.gli-alter-2 .gl-item-title,
.gli-alter-2 .gl-item-title a,
.gli-alter-3 .gl-item-title,
.gli-alter-3 .gl-item-title a {
color: #EEE;
}
.gli-alter-1 .gl-item-title,
.gli-alter-1 .gl-item-title a,
.gli-alter-4 .gl-item-title,
.gli-alter-4 .gl-item-title a,
.gli-alter-4 .gl-item-title a:hover {
color: #FFF;
}
.gli-alter-1 .gl-item-title a:hover {
color: #FFF;
opacity: .85;
}
.gl-item-title a:hover,
.gli-alter-2 .gl-item-title a:hover,
.gli-alter-3 .gl-item-title a:hover {
color: #08c1b8;
}
.gli-alter-2 .gl-item-category,
.gli-alter-2 .gl-item-category a,
.gli-alter-3 .gl-item-category,
.gli-alter-3 .gl-item-category a,
.gli-alter-4 .gl-item-category,
.gli-alter-4 .gl-item-category a {
color: #CCC;
}
.gallery-list-item .gli-meta,
.gallery-list-item .gli-meta a {
color: #CCC;
}
.gallery-list-item .gl-item-image-zoom:before,
.gallery-list-item .gl-item-image-zoom:after {
background-color: #FFF;
}
.gallery-list-item .gl-item-image-lock {
color: #FFF;
}
/* gallery single */
.gallery-single-carousel .cc-item .gsi-image-caption {
background-color: rgba(0, 0, 0, 0.6);
color: #FFF;
}
.gallery-single-carousel ul.gallery-meta {
background-color: rgba(0, 0, 0, 0.8);
color: #CCC;
}
.gallery-single-carousel ul.gallery-meta > li a {
color: #CCC;
}
.gs-carousel-info {
background-color: rgba(0, 0, 0, 0.55);
}
.gallery-single-nav a,
#page-header .gallery-single-nav a {
color: #CCC;
}
.ph-more-info-trigger {
color: #CCC;
}
.ph-more-info-trigger:hover {
color: #FFF;
}
.gs-sidebar-info {
background-color: rgba(125, 125, 125, 0.1);
border: none;
}
/* blog list */
.blog-list-grid .bl-item-info {
background-color: #111;
}
.bl-item-title,
.bl-item-title h2 {
color: #CCC;
}
.bl-item-title:hover,
.bl-item-title:focus,
.bl-item-title h2:hover,
.bl-item-title h2:focus {
color: #08c1b8;
}
.bl-item-desc {
color: #888;
}
.bl-item-read-more span,
.bl-item-read-more span:before,
.bl-item-read-more span:after {
background-color: #4e4e4e;
}
.bl-item-info {
background-color: #111;
}
.isotope.col-1 .bl-item-info {
background-color: #080808;
}
.blog-single-tags span,
.sidebar-categories > ul > li > a,
.sidebar-post-list .post-data .post-title a,
.sidebar-comment-data .author a,
.blog-author-name a {
color: #CCC;
}
.sidebar-comment-wrap .sidebar-comment a,
.blog-single-tags a,
.sidebar-tags a,
.blog-author-more {
color: #888;
}
.sidebar-post-list .post-data .post-title a:hover,
.sidebar-comment-data .author a:hover,
.sidebar-categories > ul > li > a:hover,
.blog-author-name a:hover {
color: #08c1b8;
}
.sidebar-categories > ul > li > a span {
background-color: #292929;
color: #999;
}
.sidebar-categories > ul > li > a:hover span {
background-color: #08c1b8;
color: #FFF;
}
.sidebar-comment-wrap .sidebar-comment a:hover {
color: #CCC;
}
.blog-single-tags a:hover,
.sidebar-tags a:hover {
color: #FFF;
}
#blog-list-carousel-section {
background-color: #000;
}
/* blog single */
.blog-single-post-heading {
background-color: #0a0a0a;
}
.media-body,
#post-comment-form {
background-color: #111;
}
.blog-single-post-title,
.blog-single-meta .article-author,
.blog-single-meta .article-author a,
.bs-nav-title,
.bs-nav-title h4,
.related-posts-item .rp-item-title,
.related-posts-item .rp-item-title h4 {
color: #CCC;
}
.blog-single-links,
.blog-single-links a,
.media-heading a {
color: #999;
}
.blog-single-meta .article-author a:hover,
.blog-single-links a:hover,
.blog-single-links a:focus,
.blog-single-links .favorite-btn:hover,
.bs-nav-title:hover, .bs-nav-title h4:hover,
.related-posts-item .rp-item-title:hover,
.related-posts-item .rp-item-title h4:hover,
.media-heading a:hover {
color: #08c1b8;
}
@media (max-width: 992px) {
.blog-single-share {
background-color: rgba(17, 17, 17, 0.67);
}
}
/* pagination */
.pagination > li > a,
.pagination > li > span {
color: #CCC;
background-color: #222;
border: 1px solid #292929;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
color: #FFF;
background-color: #08c1b8;
border-color: #08c1b8;
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
color: #FFF;
background-color: #313131;
border-color: #313131;
}
/* owl carousel */
.nav-outside-top .owl-nav button.owl-prev {
background-image: url(../vendor/owl-carousel/img/arrow-left-light.png);
}
.nav-outside-top .owl-nav button.owl-next {
background-image: url(../vendor/owl-carousel/img/arrow-right-light.png);
}
.nav-light .owl-nav button.owl-prev,
.nav-light .owl-nav button.owl-next {
background-color: rgba(0, 0, 0, 0.6);
}
.nav-light .owl-nav button.owl-prev:hover, .owl-carousel.nav-light .owl-nav button.owl-prev:hover,
.nav-light .owl-nav button.owl-next:hover, .owl-carousel.nav-light .owl-nav button.owl-next:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.nav-light .owl-nav button.owl-prev {
background-image: url(../vendor/owl-carousel/img/arrow-left-light.png) !important;
}
.nav-light .owl-nav button.owl-next {
background-image: url(../vendor/owl-carousel/img/arrow-right-light.png) !important;
}
.owl-carousel.cc-hover-light .cc-item:before,
.owl-carousel.cc-item-hovered.cc-hover-light:hover .cc-item:before {
background-color: #000;
}
@media (min-width: 992px) {
.owl-carousel.cc-hover-light:hover .cc-item:before {
background-color: #000;
}
}
.nav-light .owl-nav button.owl-prev,
.nav-light .owl-nav button.owl-next,
.nav-light.nav-bottom-right .owl-nav button.owl-prev,
.nav-light.nav-bottom-right .owl-nav button.owl-next {
background-color: #000;
}
/* buttons */
.btn-default {
color: #DDD;
background-color: rgba(189, 189, 189, 0.25);
}
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open > .dropdown-toggle.btn-default {
color: #FFF;
background-color: rgba(189, 189, 189, 0.43)
}
.btn-dark {
background-color: #3c3c3c;
border-color: #3c3c3c;
}
.btn-dark-bordered {
color: #CCC;
border-color: #CCC;
}
.btn-dark-bordered.active,
.btn-dark-bordered.focus,
.btn-dark-bordered:active,
.btn-dark-bordered:focus,
.btn-dark-bordered:hover,
.open > .dropdown-toggle.btn-dark-bordered {
color: #222;
background-color: #FFF;
border-color: #FFF;
}
/* forms */
.form-control {
background-color: #101010;
color: #CCC;
}
.form-btn-inside button {
color: #CCC;
}
select option {
color: #CCC;
}
/* modal */
.modal {
background-color: rgba(0, 0, 0, 0.7);
}
.modal-dialog {
background-color: #111;
color: #CCC;
}
.modal-share .grab-link {
background-color: rgba(128, 128, 128, 0.11);
border: none;
}
.modal-header .close {
color: #CCC;
}
.modal-header .tt-close-btn:before,
.modal-header .tt-close-btn:after {
background-color: #FFF;
}
/* split box */
.split-box-content.shifted-left,
.split-box-content.shifted-right {
background-color: #0a0a0a;
}
/* contact */
.contact-simple {
background-color: #111;
}
#contact-section .cover {
background-color: rgba(0, 0, 0, 0.3) !important;
}
.contact-info-wrap,
.contact-simple .contact-info-wrap {
background-color: rgba(0, 0, 0, 0.85);
}
/* accordion */
.accordion-wrap .bg-gray-2 {
background-color: #222 !important;
}
.accordion-wrap .panel-title,
.accordion-wrap .panel-title > a {
color: #CCC;
}
/* about */
.signature .signature-dark {
display: none;
}
.signature .signature-light {
display: block;
}
/* footer */
#footer {
background-color: #121212;
color: #CCC;
}
#footer .footer-menu > li > a {
color: #BBB;
}
#footer .footer-menu > li > a:hover {
color: #FFF;
}
#footer .btn-default {
color: #DDD;
background-color: rgba(189, 189, 189, 0.13);
}
#footer .btn-default:hover {
background-color: rgba(189, 189, 189, 0.35);
color: #FFF;
}
#footer .form-control {
background-color: #101010;
color: #CCC;
}
#footer .form-btn-inside button {
color: #CCC;
}
#footer #footer-logo .logo-dark {
display: none;
}
#footer #footer-logo .logo-light {
display: inline-block;
}
@media (max-width: 767px) {
#footer #footer-logo .logo-light {
display: none;
}
#footer #footer-logo .logo-dark-m {
display: none;
}
#footer #footer-logo .logo-light-m {
display: inline-block;
}
}
.footer-bottom {
background-color: #0a0a0a;
border-top-color: rgba(128, 128, 128, 0.08);
}
/* demos */
.demo-thumbnails-section {
background-color: #000;
}
.demo-thumbnail-btn {
color: #CCC;
}
.demo-thumbnail-btn:hover,
.demo-thumbnail-btn:focus {
color: #08c1b8;
}
.demo-thumbnail-image-wrap {
border-color: #1f1f1f;
}
/* display element on light or dark style only (use classes "for-light-style" or "for-tt-dark-style") */
.for-light-style { display: none; }
.for-dark-style { display: block; }
/* miscellaneous */
#page-section .ps-page-simple {
background-color: #111;
}
.page-background:before {
background-color: #000;
opacity: .93;
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,236 @@
/* --------------------------------------------------------------------------
* Template Round Style CSS
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: http://themetorium.net
*
* Read template documentation about how to enable round style!
-------------------------------------------------------------------------- */
.sidebar-post-list .post-thumb,
.sidebar-comment-avatar,
#blog-post-comments .media-object,
.blog-author-img,
.blog-single-post .author-avatar,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.nav-bottom-right .owl-nav button.owl-prev,
.nav-bottom-right .owl-nav button.owl-next {
border-radius: 100%;
}
.btn,
.hr-short,
.tt-tools-button,
.owl-carousel .cc-category a,
.owl-carousel .cc-category span,
.form-control,
.page-header-category > a,
.modal-share .grab-link,
.bl-item-category a,
.bl-item-category span,
.gtb-heading-category a,
.gtb-heading-category span,
.pagination > li > a,
.pagination > li > span,
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span,
.gallery-single-carousel ul.gallery-meta,
.sidebar-tags a,
.blog-single-tags a,
.sidebar-categories > ul > li > a span,
.related-posts-item .rp-item-category a,
.blog-single-post-category a,
.sr-item-category a,
.sr-item-category span,
.accordion-wrap .panel-heading a,
.big-search-box,
#big-search-input {
border-radius: 100px;
}
.isotope.gutter-1 .gallery-list-item,
.isotope.gutter-2 .gallery-list-item,
.isotope.gutter-3 .gallery-list-item,
.isotope.gutter-1 .gl-item-image-inner,
.isotope.gutter-2 .gl-item-image-inner,
.isotope.gutter-3 .gl-item-image-inner,
.isotope.gutter-1 .gli-frame .gl-item-image-wrap,
.isotope.gutter-2 .gli-frame .gl-item-image-wrap,
.isotope.gutter-3 .gli-frame .gl-item-image-wrap,
.isotope.gutter-1 .gallery-single-item,
.isotope.gutter-2 .gallery-single-item,
.isotope.gutter-3 .gallery-single-item,
.gs-sidebar-info,
.gss-item-image img,
.modal-dialog,
.price-box,
.bl-item-image img,
.bl-item-info,
.blog-single-featured-image img,
.blog-single-post-heading,
.single-post-image img,
.split-box-content,
.isotope-filter.fi-to-button ul.isotope-filter-links,
.gtl-item,
.gs-carousel-info,
.gsi-image-caption,
.gallery-list-carousel .owl-carousel[data-margin] .owl-item,
.gallery-single-carousel .owl-carousel[data-margin] .owl-item,
.blc-categories .owl-carousel[data-margin] .owl-item,
.blc-featured .owl-carousel[data-margin] .owl-item,
.owl-dots button.owl-dot span,
.blog-single-post .owl-item,
.thumb-list.gutter-1 .thumb-list-item,
.thumb-list.gutter-2 .thumb-list-item,
.thumb-list.gutter-3 .thumb-list-item,
.thumb-list.gutter-4 .thumb-list-item,
.thumb-list.gutter-5 .thumb-list-item,
.thumb-list.gutter-6 .thumb-list-item,
.embed-responsive,
.related-posts-item .rp-item-image,
#post-comment-form,
#blog-post-comments .media-body,
textarea.form-control,
/* select.form-control, */
.archive-info-box,
.sr-item-img,
.contact-info-wrap,
#map,
.page-sidebar img,
body.tt-boxed .tt-wrap .split-box-image,
.sr-item-img,
.sr-item-img.glc-gallery {
border-radius: 5px;
}
.form-btn-inside button {
border-radius: 0 100px 100px 0;
}
.gli-alter-1 .gl-item-info,
.isotope.gutter-2 .gli-alter-1 .gallery-list-item .gl-item-info,
.isotope.gutter-3 .gli-alter-1 .gallery-list-item .gl-item-info,
.gli-alter-3 .gl-item-info,
.isotope.gutter-2 .gli-alter-3 .gallery-list-item .gl-item-info,
.isotope.gutter-3 .gli-alter-3 .gallery-list-item .gl-item-info,
.tt-submenu,
.tt-dropdown {
border-radius: 0 0 5px 5px;
}
.price-box,
.sr-item-img.glc-gallery {
overflow: hidden;
}
.owl-carousel .cc-category a,
.owl-carousel .cc-category span,
.gtb-heading-category a,
.gtb-heading-category span,
.page-header-category > a,
.bl-item-category a,
.bl-item-category span,
.related-posts-item .rp-item-category a,
.blog-single-post-category a,
.sr-item-category a,
.sr-item-category span {
padding: 0 7px;
}
.btn {
padding-left: 22px;
padding-right: 22px;
}
.btn-group-lg > .btn, .btn-lg {
padding-left: 28px;
padding-right: 28px;
}
.tt-tools-button {
padding-left: 18px;
padding-right: 18px;
}
.sidebar-post-list .post-thumb {
width: 65px;
height: 65px;
}
.sidebar-categories > ul > li > a span {
padding: 6px 6px 4px 6px;
}
.accordion-wrap .panel-heading a > .acc-arrow {
right: 15px;
}
@media (min-width: 768px) {
.big-search-box {
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 767px) {
.big-search-box {
border-radius: 5px;
}
}
@media (min-width: 480px) {
.big-search-options-wrap {
padding-left: 30px;
padding-right: 30px;
}
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
width: 60px;
height: 60px;
line-height: 60px;
}
.nav-outside-top .owl-nav button.owl-prev,
.nav-outside-top .owl-nav button.owl-next {
width: 32px;
height: 32px;
line-height: 32px;
}
.owl-carousel:hover .owl-nav button.owl-prev {
left: 20px;
}
.owl-carousel:hover .owl-nav button.owl-next {
right: 20px;
}
.owl-carousel.nav-outside:hover .owl-nav button.owl-prev {
left: -70px;
}
.owl-carousel.nav-outside:hover .owl-nav button.owl-next {
right: -70px;
}
@media (max-width: 1540px) {
.owl-carousel.nav-outside:hover .owl-nav button.owl-prev {
left: 15px;
}
.owl-carousel.nav-outside:hover .owl-nav button.owl-next {
right: 15px;
}
}
.owl-carousel.nav-outside-top:hover .owl-nav button.owl-prev {
left: 0;
}
.owl-carousel.nav-outside-top:hover .owl-nav button.owl-next {
right: 0;
}
.owl-carousel.nav-bottom-right:hover .owl-nav button.owl-prev {
left: 0;
}
.owl-carousel.nav-bottom-right:hover .owl-nav button.owl-next {
right: 0;
}

View File

@ -0,0 +1,193 @@
/* --------------------------------------------------------------------
* Template helper RTL CSS
*
* Template: Sepia - Photography Portfolio HTML Website Template
* Author: Themetorium
* URL: https://themetorium.net
*
* Read template documentation about how to enable RTL mode!
----------------------------------------------------------------------- */
/* Table of Content
====================
# Various classes
# Center align
# Borders classes
# Paddings classes
# Margin classes
# Bootstrap responsive columns of same height
*/
/* ------------------------------------------------------------- *
* Various classes
/* ------------------------------------------------------------- */
.text-left { text-align: right !important; }
.text-right { text-align: left !important; }
/* -------------------------------------------------------------------------- *
* Center align classes (parent element must contain "position: relative;")
/* -------------------------------------------------------------------------- */
.align-center {
right: 50% !important;
left: auto !important;
}
.horisontal-align-center {
right: 50% !important;
left: auto !important;
}
/* ------------------------------------------------------------- *
* Borders classes
/* ------------------------------------------------------------- */
.border-left { border-right: 1px solid rgba(132, 132, 132, 0.13) !important; }
.border-right { border-left: 1px solid rgba(132, 132, 132, 0.13) !important; }
/* no border classes */
.no-border-left { border-right: none !important; }
.no-border-right { border-left: none !important; }
/* ------------------------------------------------------------- *
* Paddings classes
/* ------------------------------------------------------------- */
/* no paddings classes */
.no-padding-left { padding-right: 0 !important; }
.no-padding-right { padding-left: 0 !important; }
/* ------------------------------------------------------------- *
* Margin classes
/* ------------------------------------------------------------- */
/* margin left */
.margin-left-5 { margin-right: 5px !important; margin-left: auto !important; }
.margin-left-10 { margin-right: 10px !important; margin-left: auto !important; }
.margin-left-15 { margin-right: 15px !important; margin-left: auto !important; }
.margin-left-20 { margin-right: 20px !important; margin-left: auto !important; }
.margin-left-25 { margin-right: 25px !important; margin-left: auto !important; }
.margin-left-30 { margin-right: 30px !important; margin-left: auto !important; }
.margin-left-35 { margin-right: 35px !important; margin-left: auto !important; }
.margin-left-40 { margin-right: 40px !important; margin-left: auto !important; }
.margin-left-45 { margin-right: 45px !important; margin-left: auto !important; }
.margin-left-50 { margin-right: 50px !important; margin-left: auto !important; }
.margin-left-55 { margin-right: 55px !important; margin-left: auto !important; }
.margin-left-60 { margin-right: 60px !important; margin-left: auto !important; }
.margin-left-65 { margin-right: 65px !important; margin-left: auto !important; }
.margin-left-70 { margin-right: 70px !important; margin-left: auto !important; }
.margin-left-75 { margin-right: 75px !important; margin-left: auto !important; }
.margin-left-80 { margin-right: 80px !important; margin-left: auto !important; }
.margin-left-85 { margin-right: 85px !important; margin-left: auto !important; }
.margin-left-90 { margin-right: 90px !important; margin-left: auto !important; }
.margin-left-95 { margin-right: 95px !important; margin-left: auto !important; }
.margin-left-100 { margin-right: 100px !important; margin-left: auto !important; }
/* margin left (percent) */
.margin-left-1-p { margin-right: 1% !important; margin-left: auto !important; }
.margin-left-2-p { margin-right: 2% !important; margin-left: auto !important; }
.margin-left-3-p { margin-right: 3% !important; margin-left: auto !important; }
.margin-left-4-p { margin-right: 4% !important; margin-left: auto !important; }
.margin-left-5-p { margin-right: 5% !important; margin-left: auto !important; }
.margin-left-6-p { margin-right: 6% !important; margin-left: auto !important; }
.margin-left-7-p { margin-right: 7% !important; margin-left: auto !important; }
.margin-left-8-p { margin-right: 8% !important; margin-left: auto !important; }
.margin-left-9-p { margin-right: 9% !important; margin-left: auto !important; }
.margin-left-10-p { margin-right: 10% !important; margin-left: auto !important; }
.margin-left-11-p { margin-right: 11% !important; margin-left: auto !important; }
.margin-left-12-p { margin-right: 12% !important; margin-left: auto !important; }
.margin-left-13-p { margin-right: 13% !important; margin-left: auto !important; }
.margin-left-14-p { margin-right: 14% !important; margin-left: auto !important; }
.margin-left-15-p { margin-right: 15% !important; margin-left: auto !important; }
.margin-left-16-p { margin-right: 16% !important; margin-left: auto !important; }
.margin-left-17-p { margin-right: 17% !important; margin-left: auto !important; }
.margin-left-18-p { margin-right: 18% !important; margin-left: auto !important; }
.margin-left-19-p { margin-right: 19% !important; margin-left: auto !important; }
.margin-left-20-p { margin-right: 20% !important; margin-left: auto !important; }
/* margin right */
.margin-right-5 { margin-left: 5px !important; margin-right: auto !important; }
.margin-right-10 { margin-left: 10px !important; margin-right: auto !important; }
.margin-right-15 { margin-left: 15px !important; margin-right: auto !important; }
.margin-right-20 { margin-left: 20px !important; margin-right: auto !important; }
.margin-right-25 { margin-left: 25px !important; margin-right: auto !important; }
.margin-right-30 { margin-left: 30px !important; margin-right: auto !important; }
.margin-right-35 { margin-left: 35px !important; margin-right: auto !important; }
.margin-right-40 { margin-left: 40px !important; margin-right: auto !important; }
.margin-right-45 { margin-left: 45px !important; margin-right: auto !important; }
.margin-right-50 { margin-left: 50px !important; margin-right: auto !important; }
.margin-right-55 { margin-left: 55px !important; margin-right: auto !important; }
.margin-right-60 { margin-left: 60px !important; margin-right: auto !important; }
.margin-right-65 { margin-left: 65px !important; margin-right: auto !important; }
.margin-right-70 { margin-left: 70px !important; margin-right: auto !important; }
.margin-right-75 { margin-left: 75px !important; margin-right: auto !important; }
.margin-right-80 { margin-left: 80px !important; margin-right: auto !important; }
.margin-right-85 { margin-left: 85px !important; margin-right: auto !important; }
.margin-right-90 { margin-left: 90px !important; margin-right: auto !important; }
.margin-right-95 { margin-left: 95px !important; margin-right: auto !important; }
.margin-right-100 { margin-left: 100px !important; margin-right: auto !important; }
/* margin right (percent) */
.margin-right-1-p { margin-left: 1% !important; margin-right: auto !important; }
.margin-right-2-p { margin-left: 2% !important; margin-right: auto !important; }
.margin-right-3-p { margin-left: 3% !important; margin-right: auto !important; }
.margin-right-4-p { margin-left: 4% !important; margin-right: auto !important; }
.margin-right-5-p { margin-left: 5% !important; margin-right: auto !important; }
.margin-right-6-p { margin-left: 6% !important; margin-right: auto !important; }
.margin-right-7-p { margin-left: 7% !important; margin-right: auto !important; }
.margin-right-8-p { margin-left: 8% !important; margin-right: auto !important; }
.margin-right-9-p { margin-left: 9% !important; margin-right: auto !important; }
.margin-right-10-p { margin-left: 10% !important; margin-right: auto !important; }
.margin-right-11-p { margin-left: 11% !important; margin-right: auto !important; }
.margin-right-12-p { margin-left: 12% !important; margin-right: auto !important; }
.margin-right-13-p { margin-left: 13% !important; margin-right: auto !important; }
.margin-right-14-p { margin-left: 14% !important; margin-right: auto !important; }
.margin-right-15-p { margin-left: 15% !important; margin-right: auto !important; }
.margin-right-16-p { margin-left: 16% !important; margin-right: auto !important; }
.margin-right-17-p { margin-left: 17% !important; margin-right: auto !important; }
.margin-right-18-p { margin-left: 18% !important; margin-right: auto !important; }
.margin-right-19-p { margin-left: 19% !important; margin-right: auto !important; }
.margin-right-20-p { margin-left: 20% !important; margin-right: auto !important; }
/* no margins classes */
.no-margin-left { margin-right: 0 !important; }
.no-margin-right { margin-left: 0 !important; }
/* ------------------------------------------------------------------------------------------------------------------------- *
* Bootstrap responsive columns of same height
/* ------------------------------------------------------------------------------------------------------------------------- */
.col-height {
float: none;
}
@media (min-width: 480px) {
.col-xs-height {
float: none;
}
}
@media (min-width: 768px) {
.col-sm-height {
float: none;
}
}
@media (min-width: 992px) {
.col-md-height {
float: none;
}
}
@media (min-width: 1200px) {
.col-lg-height {
float: none;
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Some files were not shown because too many files have changed in this diff Show More