thsOne/01-This-One/index-carousel-gallery.html

1623 lines
81 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Main CSS -->
<link href="assets/css/main.css" rel="stylesheet" >
<title>This One - Hero Image</title>
</head>
<body data-bs-spy="scroll" data-bs-target="#navigation">
<!-- PRELOADER STARTS
========================================================================= -->
<div id="main-preloader" class="main-preloader semi-dark-background">
<div class="main-preloader-inner center">
<h1 class="preloader-percentage center">
<span class="preloader-percentage-text">0</span> <!-- Show Percentage Number -->
<span class="percentage">%</span>
</h1>
<div class="preloader-bar-outer">
<div class="preloader-bar"></div>
<!-- Percentage Precess Bar -->
</div>
</div>
</div>
<!-- /.. PRELOADER ENDS
========================================================================= -->
<!-- NAVIGATION STARTS
========================================================================= -->
<nav id="navigation" class="navbar navbar-expand-lg navbar-light fixed-top bg-light">
<div class="container-fluid">
<a class="navbar-brand white-logo" href="#"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
<a class="navbar-brand black-logo" href="#"><img src="assets/imgs/logo.png" class="img-fluid" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<span class="ps-3 d-none d-lg-block">
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
</span>
</div>
</div>
</nav>
<!-- NAVIGATION ENDS
========================================================================= -->
<!-- SLIDER STARTS
========================================================================= -->
<section id="home" >
<div id="slider">
<div id="rev_slider_18_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="carousel-gallery" data-source="gallery" style="margin:0px auto;background:#000000;padding:0px;margin-top:0px;margin-bottom:0px;">
<!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode -->
<div id="rev_slider_18_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.1">
<ul>
<!-- SLIDE -->
<li data-index="rs-41" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="assets/imgs/slider/art3-120x120.jpg" data-rotate="0" data-saveperformance="off" data-title="Raw Cityscape" data-param1="Photography" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/imgs/slider/dummy_2.png" alt="" data-lazyload="assets/imgs/slider/art3.jpg" data-bgposition="center center" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-blurstart="0" data-blurend="0" data-offsetstart="0 0" data-offsetend="0 0" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme tp-gradientstyle"
id="slide-41-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
data-width="full"
data-height="['200','200','200','250']"
data-whitespace="nowrap"
data-type="shape"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 5;"> </div>
<!-- LAYER NR. 2 -->
<a class="tp-caption tp-resizeme"
href="#" target="_self" id="slide-41-layer-1"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['90','90','79','99']"
data-fontsize="['40','40','25','20']"
data-lineheight="['40','40','25','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-actions=''
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 6; min-width: 580px; max-width: 580px; white-space: normal; font-size: 40px; line-height: 40px; font-weight: 500; color: rgba(255,255,255,1);font-family:Roboto;text-decoration: none;">Raw Cityscape </a>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-resizeme"
id="slide-41-layer-3"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['35','35','20','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 7; min-width: 580px; max-width: 580px; white-space: normal; font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255,255,255,0.75);font-family:Roboto;">The only way to make sense out of change is to plunge into it, move with it, and join the dance.
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme tp-svg-layer"
id="slide-41-layer-4"
data-x="['left','left','left','left']" data-hoffset="['721','620','510','367']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['29','29','9','16']"
data-width="50"
data-height="50"
data-whitespace="nowrap"
data-visibility="['on','on','off','off']"
data-type="svg"
data-actions='[{"event":"click","action":"togglefullscreen","delay":""}]'
data-svg_src="assets/imgs/slider/ic_fullscreen_24px.svg"
data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":600,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255,255,255,1);"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 8; min-width: 50px; max-width: 50px; max-width: 50px; max-width: 50px; color: rgba(255,255,255,0.50);cursor:pointer;">
<div class="rs-untoggled-content"> </div>
<div class="rs-toggled-content"></div>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-42" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="assets/imgs/slider/art4-120x120.jpg" data-rotate="0" data-saveperformance="off" data-title="The Kingdom" data-param1="Exploration" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/imgs/slider/dummy_2.png" alt="" data-lazyload="assets/imgs/slider/art4.jpg" data-bgposition="center center" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-blurstart="0" data-blurend="0" data-offsetstart="0 0" data-offsetend="0 0" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme tp-gradientstyle"
id="slide-42-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
data-width="full"
data-height="['200','200','200','250']"
data-whitespace="nowrap"
data-type="shape"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 9;"> </div>
<!-- LAYER NR. 6 -->
<a class="tp-caption tp-resizeme"
href="#" target="_self" id="slide-42-layer-1"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['91','91','98','120']"
data-fontsize="['40','40','25','20']"
data-lineheight="['40','40','25','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-actions=''
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 10; min-width: 580px; max-width: 580px; white-space: normal; font-size: 40px; line-height: 40px; font-weight: 500; color: rgba(255,255,255,1);font-family:Roboto;text-decoration: none;">The Kingdom </a>
<!-- LAYER NR. 7 -->
<div class="tp-caption tp-resizeme"
id="slide-42-layer-3"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['35','35','20','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 11; min-width: 580px; max-width: 580px; white-space: normal; font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255,255,255,0.75);font-family:Roboto;">Zen does not confuse spirituality with thinking about God while one is peeling potatoes. Zen spirituality is just to peel the potatoes. </div>
<!-- LAYER NR. 8 -->
<div class="tp-caption tp-resizeme tp-svg-layer"
id="slide-42-layer-4"
data-x="['left','left','left','left']" data-hoffset="['721','620','510','367']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['29','29','9','16']"
data-width="50"
data-height="50"
data-whitespace="nowrap"
data-visibility="['on','on','off','off']"
data-type="svg"
data-actions='[{"event":"click","action":"togglefullscreen","delay":""}]'
data-svg_src="assets/imgs/slider/ic_fullscreen_24px.svg"
data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":600,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255,255,255,1);"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 12; min-width: 50px; max-width: 50px; max-width: 50px; max-width: 50px; color: rgba(255,255,255,0.50);cursor:pointer;">
<div class="rs-untoggled-content"> </div>
<div class="rs-toggled-content"></div>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-43" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="assets/imgs/slider/art5-120x120.jpg" data-rotate="0" data-saveperformance="off" data-title="Going in Deep" data-param1="Miscellaneous" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/imgs/slider/dummy_2.png" alt="" data-lazyload="assets/imgs/slider/art5.jpg" data-bgposition="center center" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-blurstart="0" data-blurend="0" data-offsetstart="0 0" data-offsetend="0 0" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 9 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme tp-gradientstyle"
id="slide-43-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
data-width="full"
data-height="['200','200','200','250']"
data-whitespace="nowrap"
data-type="shape"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 13;"> </div>
<!-- LAYER NR. 10 -->
<a class="tp-caption tp-resizeme"
href="#" target="_self" id="slide-43-layer-1"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['90','111','119','140']"
data-fontsize="['40','40','25','20']"
data-lineheight="['40','40','25','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-actions=''
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 14; min-width: 580px; max-width: 580px; white-space: normal; font-size: 40px; line-height: 40px; font-weight: 500; color: rgba(255,255,255,1);font-family:Roboto;text-decoration: none;">Going in Deep </a>
<!-- LAYER NR. 11 -->
<div class="tp-caption tp-resizeme"
id="slide-43-layer-3"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['35','35','20','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 15; min-width: 580px; max-width: 580px; white-space: normal; font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255,255,255,0.75);font-family:Roboto;">To have faith is to trust yourself to the water. When you swim you don't grab hold of the water, because if you do you will sink and drown. Instead you relax, and float. </div>
<!-- LAYER NR. 12 -->
<div class="tp-caption tp-resizeme tp-svg-layer"
id="slide-43-layer-4"
data-x="['left','left','left','left']" data-hoffset="['721','620','510','367']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['29','29','9','16']"
data-width="50"
data-height="50"
data-whitespace="nowrap"
data-visibility="['on','on','off','off']"
data-type="svg"
data-actions='[{"event":"click","action":"togglefullscreen","delay":""}]'
data-svg_src="assets/imgs/slider/ic_fullscreen_36px.svg"
data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":600,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255,255,255,1);"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 16; min-width: 50px; max-width: 50px; max-width: 50px; max-width: 50px; color: rgba(255,255,255,0.50);cursor:pointer;">
<div class="rs-untoggled-content"> </div>
<div class="rs-toggled-content"></div>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-44" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="assets/imgs/slider/art8-120x120.jpg" data-rotate="0" data-saveperformance="off" data-title="Galactic Oneness" data-param1="Nightsky" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/imgs/slider/dummy_2.png" alt="" data-lazyload="assets/imgs/slider/art8.jpg" data-bgposition="center center" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-blurstart="0" data-blurend="0" data-offsetstart="0 0" data-offsetend="0 0" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 13 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme tp-gradientstyle"
id="slide-44-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
data-width="full"
data-height="['200','200','200','250']"
data-whitespace="nowrap"
data-type="shape"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 17;"> </div>
<!-- LAYER NR. 14 -->
<a class="tp-caption tp-resizeme"
href="#" target="_self" id="slide-44-layer-1"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['111','111','119','140']"
data-fontsize="['40','40','25','20']"
data-lineheight="['40','40','25','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-actions=''
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 18; min-width: 580px; max-width: 580px; white-space: normal; font-size: 40px; line-height: 40px; font-weight: 500; color: rgba(255,255,255,1);font-family:Roboto;text-decoration: none;">Galactic Oneness </a>
<!-- LAYER NR. 15 -->
<div class="tp-caption tp-resizeme"
id="slide-44-layer-3"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['35','35','20','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 19; min-width: 580px; max-width: 580px; white-space: normal; font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255,255,255,0.75);font-family:Roboto;">Things are as they are. Looking out into it the universe at night, we make no comparisons between right and wrong stars, nor between well and badly arranged constellations. </div>
<!-- LAYER NR. 16 -->
<div class="tp-caption tp-resizeme tp-svg-layer"
id="slide-44-layer-4"
data-x="['left','left','left','left']" data-hoffset="['721','620','510','367']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['29','29','9','16']"
data-width="50"
data-height="50"
data-whitespace="nowrap"
data-visibility="['on','on','off','off']"
data-type="svg"
data-actions='[{"event":"click","action":"togglefullscreen","delay":""}]'
data-svg_src="assets/imgs/slider/ic_fullscreen_36px.svg"
data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":600,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255,255,255,1);"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 20; min-width: 50px; max-width: 50px; max-width: 50px; max-width: 50px; color: rgba(255,255,255,0.50);cursor:pointer;">
<div class="rs-untoggled-content"> </div>
<div class="rs-toggled-content"></div>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-45" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="assets/imgs/slider/sunshinecover-120x120.jpg" data-rotate="0" data-saveperformance="off" data-title="Wonderful Sunrise" data-param1="HTML5 Video" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/imgs/slider/dummy_2.png" alt="" data-lazyload="assets/imgs/slider/sunshinecover.jpg" data-bgposition="center center" data-bgfit="cover" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- BACKGROUND VIDEO LAYER -->
<div class="rs-background-video-layer"
data-forcerewind="on"
data-volume="mute"
data-videowidth="100%"
data-videoheight="100%"
data-videomp4="../../assets/videos/sunrise.mp4"
data-videopreload="auto"
data-videoloop="loopandnoslidestop"
data-forceCover="1"
data-aspectratio="16:9"
data-autoplay="true"
data-autoplayonlyfirsttime="false" ></div>
<!-- LAYER NR. 17 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme tp-gradientstyle"
id="slide-45-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
data-width="full"
data-height="['200','200','200','250']"
data-whitespace="nowrap"
data-type="shape"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 21;"> </div>
<!-- LAYER NR. 18 -->
<a class="tp-caption tp-resizeme"
href="#" target="_self" id="slide-45-layer-1"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['91','91','99','100']"
data-fontsize="['40','40','25','20']"
data-lineheight="['40','40','25','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-actions=''
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 22; min-width: 580px; max-width: 580px; white-space: normal; font-size: 40px; line-height: 40px; font-weight: 500; color: rgba(255,255,255,1);font-family:Roboto;text-decoration: none;">Wonderful Sunrise </a>
<!-- LAYER NR. 19 -->
<div class="tp-caption tp-resizeme"
id="slide-45-layer-3"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['35','35','20','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 23; min-width: 580px; max-width: 580px; white-space: normal; font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255,255,255,0.75);font-family:Roboto;">You and I are all as much continuous with the physical universe as a wave is continuous with the ocean. </div>
<!-- LAYER NR. 20 -->
<div class="tp-caption tp-resizeme tp-svg-layer"
id="slide-45-layer-4"
data-x="['left','left','left','left']" data-hoffset="['721','620','510','367']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['29','29','9','16']"
data-width="50"
data-height="50"
data-whitespace="nowrap"
data-visibility="['on','on','off','off']"
data-type="svg"
data-actions='[{"event":"click","action":"togglefullscreen","delay":""}]'
data-svg_src="assets/imgs/slider/ic_fullscreen_36px.svg"
data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":600,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255,255,255,1);"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 24; min-width: 50px; max-width: 50px; max-width: 50px; max-width: 50px; color: rgba(255,255,255,0.50);cursor:pointer;">
<div class="rs-untoggled-content"> </div>
<div class="rs-toggled-content"></div>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-46" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="assets/imgs/slider/art7-120x120.jpg" data-rotate="0" data-saveperformance="off" data-title="Vast Deserts" data-param1="Traveling" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="assets/imgs/slider/dummy_2.png" alt="" data-lazyload="assets/imgs/slider/art7.jpg" data-bgposition="center center" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-blurstart="0" data-blurend="0" data-offsetstart="0 0" data-offsetend="0 0" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 21 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme tp-gradientstyle"
id="slide-46-layer-2"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['0','0','0','0']"
data-width="full"
data-height="['200','200','200','250']"
data-whitespace="nowrap"
data-type="shape"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2000,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 25;"> </div>
<!-- LAYER NR. 22 -->
<a class="tp-caption tp-resizeme"
href="#" target="_self" id="slide-46-layer-1"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['91','91','79','100']"
data-fontsize="['40','40','25','20']"
data-lineheight="['40','40','25','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-actions=''
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":200,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 26; min-width: 580px; max-width: 580px; white-space: normal; font-size: 40px; line-height: 40px; font-weight: 500; color: rgba(255,255,255,1);font-family:Roboto;text-decoration: none;">Vast Deserts </a>
<!-- LAYER NR. 23 -->
<div class="tp-caption tp-resizeme"
id="slide-46-layer-3"
data-x="['left','left','left','left']" data-hoffset="['40','40','30','20']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['35','35','20','20']"
data-width="['580','480','340','260']"
data-height="none"
data-whitespace="normal"
data-type="text"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":400,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 27; min-width: 580px; max-width: 580px; white-space: normal; font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255,255,255,0.75);font-family:Roboto;">But the attitude of faith is to let go, and become open to truth, whatever it might turn out to be. </div>
<!-- LAYER NR. 24 -->
<div class="tp-caption tp-resizeme tp-svg-layer"
id="slide-46-layer-4"
data-x="['left','left','left','left']" data-hoffset="['721','620','510','367']"
data-y="['bottom','bottom','bottom','bottom']" data-voffset="['29','29','9','16']"
data-width="50"
data-height="50"
data-whitespace="nowrap"
data-visibility="['on','on','off','off']"
data-type="svg"
data-actions='[{"event":"click","action":"togglefullscreen","delay":""}]'
data-svg_src="assets/imgs/slider/ic_fullscreen_36px.svg"
data-svg_idle="sc:transparent;sw:0;sda:0;sdo:0;"
data-svg_hover="sc:transparent;sw:0;sda:0;sdo:0;"
data-basealign="slide"
data-responsive_offset="on"
data-frames='[{"from":"y:20px;opacity:0;","speed":2000,"to":"o:1;","delay":600,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"},{"frame":"hover","speed":"150","ease":"Power2.easeInOut","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255,255,255,1);"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[0,0,0,0]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[0,0,0,0]"
style="z-index: 28; min-width: 50px; max-width: 50px; max-width: 50px; max-width: 50px; color: rgba(255,255,255,0.50);cursor:pointer;">
<div class="rs-untoggled-content"> </div>
<div class="rs-toggled-content"></div>
</div>
</li>
</ul>
<div class="tp-bannertimer" style="height: 8px; background: rgba(255,255,255,0.25);"></div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
</div>
</section>
<!-- /.. SLIDER ENDS
========================================================================= -->
<!-- ABOUT US STARTS
========================================================================= -->
<section class="home-intro" id="about" >
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6">
<div class="herotext">
<h6>/Who we are</h6>
<h2>Digital Creative Agency. We dare what others don't.</h2>
<h5 class="pt-2">Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart and feel the charm of existence in this spot, which was created for the bliss of souls.</h5>
</div>
<div class="row pt-4">
<div class="col-12 col-md-6 block">
<div class="icon">
<i class="las la-award"></i>
</div>
<div class="detail pt-2">
<h4>Quality</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="col-12 col-md-6 block">
<div class="icon">
<i class="lar la-heart"></i>
</div>
<div class="detail pt-2">
<h4>Innovation</h4>
<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante donec eu libero.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-5 offset-lg-1 pt-4 pt-lg-0">
<img src="assets/imgs/about/pic1.jpg" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
<!-- /. ABOUT US ENDS
========================================================================= -->
<!-- SERVICES STARTS
========================================================================= -->
<section class="home-services light-grey-bg" id="services">
<div class="container">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/What we do</h6>
<h2>We are a creative studio that combines<br class="d-none d-lg-block"> creativity, technology & design</h2>
<h5 class="pt-2">Creativity is a highfalutin word for the work I have to do between now and Tuesday.</h5>
</div>
</div>
</div>
<div class="row text-center pt-5">
<div class="col-12 col-md-6 col-lg-4 block">
<div class="icon"><i class="las la-brush"></i></div>
<h2>UI/UX Design</h2>
<p>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of spring which I enjoy.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 block">
<div class="icon"><i class="las la-code"></i></div>
<h2>Web Development</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas vestibulum tortor quam feugiat vitae.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 block">
<div class="icon"><i class="las la-bullhorn"></i></div>
<h2>Digital Marketing</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo quisque sit amet est et.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 block">
<div class="icon"><i class="las la-camera"></i></div>
<h2>Photography</h2>
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu consequat.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 block">
<div class="icon"><i class="las la-bullseye"></i></div>
<h2>Branding</h2>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.</p>
</div>
<div class="col-12 col-md-6 col-lg-4 block">
<div class="icon"><i class="las la-mobile"></i></div>
<h2>Mobile Development</h2>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursu nam nulla .</p>
</div>
</div>
</div>
</section>
<!-- /.. SERVICES ENDS
========================================================================= -->
<!-- FEATURES STARTS
========================================================================= -->
<section class="home-features pt-xl-0 pb-0">
<div class="container-fluid ps-md-0">
<div class="row">
<div class="col-12 col-lg-6 col-xl-6 col-xxl-6 ps-0 pe-0">
<img src="assets/imgs/features/big.jpg" class="img-fluid" alt="">
</div>
<div class="col-12 col-lg-6 col-xl-6 col-xxl-5 ps-lg-5 ps-3 pe-3 ps-md-5 pe-md-5">
<div class="block">
<div class="herotext">
<h6>/Unique & Responsive</h6>
<h2>We do amazing things with amazing people</h2>
<h5 class="pt-2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h5>
</div>
<div class="accordion pt-3" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Website & Mobile App Design
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart and feel the charm of existence in this spot, which was created for the bliss of souls.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Motion Graphics & Animations
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart and feel the charm of existence in this spot, which was created for the bliss of souls.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
User Experience
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart and feel the charm of existence in this spot, which was created for the bliss of souls.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /.. FEATURES ENDS
========================================================================= -->
<!-- PORTFOLIO STARTS
========================================================================= -->
<section id="portfolio" class="portfolio pb-0">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/Portfolio</h6>
<h2>Our Recent Work</h2>
<h5 class="pt-2">There are three responses to a piece of design <br class="d-none d-md-block">yes, no, and WOW! Wow is the one to aim for.</h5>
</div>
</div>
</div>
<div class="row pt-5 pb-3">
<!-- Portfolio Nav Starts -->
<div class="col-12">
<div id="options">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li><a href="#filter" data-option-value="*" class="selected">ALL</a></li>
<li><a href="#filter" data-option-value=".webdesign">webdesign</a></li>
<li><a href="#filter" data-option-value=".branding">branding</a></li>
<li><a href="#filter" data-option-value=".videos">Videos</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<!-- Portfolio Nav Ends -->
<div class="col-12">
<!-- Portfolio Thumbs Starts -->
<div class="make4columns portfolio-grid">
<!-- Project 1 Starts -->
<figure class="item branding">
<div class="picture">
<img src="assets/imgs/portfolio/branding-4.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">branding</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-4.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-4.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 1 Ends -->
<!-- Project 2 Starts -->
<figure class="item videos">
<div class="picture">
<img src="assets/imgs/portfolio/vid-1.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">video</div>
<h1><a class="popup-vimeo" href="https://vimeo.com/45830194">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 2 Ends -->
<!-- Project 4 Starts -->
<figure class="item webdesign">
<div class="picture">
<img src="assets/imgs/portfolio/dev-1.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">webdesign</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-1.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-1.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 4 Ends -->
<!-- Project 3 Starts -->
<figure class="item branding">
<div class="picture">
<img src="assets/imgs/portfolio/branding-2.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">webdesign</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-2.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-2.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 3 Ends -->
<!-- Project 8 Starts -->
<figure class="item webdesign">
<div class="picture">
<img src="assets/imgs/portfolio/dev-3.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">webdesign</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 8 Ends -->
<!-- Project 5 Starts -->
<figure class="item videos">
<div class="picture">
<img src="assets/imgs/portfolio/vid-3.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">video</div>
<h1><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 5 Ends -->
<!-- Project 7 Starts -->
<figure class="item webdesign">
<div class="picture">
<img src="assets/imgs/portfolio/dev-2.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">Website</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-2.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-2.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 7 Ends -->
<!-- Project 6 Starts -->
<figure class="item branding">
<div class="picture">
<img src="assets/imgs/portfolio/branding-1.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">branding</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-1.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-1.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 6 Ends -->
<!-- Project 1 Starts -->
<figure class="item videos">
<div class="picture">
<img src="assets/imgs/portfolio/vid-4.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">video</div>
<h1><a class="popup-vimeo" href="https://vimeo.com/45830194">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 1 Ends -->
<!-- Project 4 Starts -->
<figure class="item webdesign">
<div class="picture">
<img src="assets/imgs/portfolio/dev-4.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">webdesign</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-4.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-4.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 4 Ends -->
<!-- Project 2 Starts -->
<figure class="item videos">
<div class="picture">
<img src="assets/imgs/portfolio/vid-2.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">video</div>
<h1><a class="popup-vimeo" href="https://vimeo.com/45830194">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 2 Ends -->
<!-- Project 3 Starts -->
<figure class="item branding">
<div class="picture">
<img src="assets/imgs/portfolio/branding-3.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">branding</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-3.jpg" title="Product Name">Product Name</a></h1>
</div>
<div class="icon-overlay">
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/branding-3.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
</div>
<!-- Picture Overlay Ends -->
</div>
</figure>
<!-- Project 3 Ends -->
</div>
<!-- Portfolio Thumbs Ends -->
</div>
</div>
</div>
</section>
<!-- /. PORTFOLIO ENDS
========================================================================= -->
<!-- TEAM STARTS
========================================================================= -->
<section class="team light-grey-bg mt-3" id="team">
<div class="container">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/Meet Our Team</h6>
<h2>Minds Behind the Brain</h2>
<h5 class="pt-2">Alone we can do so little; together we can do so much.</h5>
</div>
</div>
</div>
<div class="team-carousel pt-5">
<div class="block">
<div class="pic pb-4"><img src="assets/imgs/team/1.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>John</h2>
<h6>UI/UX Designer</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
<li><a href=""><i class="lab la-behance"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/imgs/team/2.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Abigail</h2>
<h6>UI/UX Designer</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-linkedin-in"></i></a></li>
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/imgs/team/3.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Anderson</h2>
<h6>UI/UX Designer</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/imgs/team/4.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Donna</h2>
<h6>UI/UX Designer</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="block">
<div class="pic pb-4"><img src="assets/imgs/team/5.jpg" class="img-fluid" alt=""></div>
<div class="details">
<h2>Bailey</h2>
<h6>UI/UX Designer</h6>
<ul class="socialmedia pt-2">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- /.. TEAM ENDS
========================================================================= -->
<!-- PRICING STARTS
========================================================================= -->
<section class="pricing" id="pricing">
<div class="container">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/Transparent Pricing</h6>
<h2>Find the plan to help <br class="d-none d-md-block">your business grow</h2>
<h5 class="pt-2">Choose the plan thats right for your company. </h5>
</div>
</div>
</div>
<div class="row pt-5 g-0 g-lg-5">
<div class="col col-md-4 text-start">
<div class="block">
<div class="herotext secondary-bg p-4">
<h4>Basic</h4>
<h2>$49<span>/month</span></h2>
<p>All plans include a 30 day trial!</p>
</div>
<ul class="pt-4">
<li><i class="lar la-check-circle"></i> 15 Active Projects</li>
<li><i class="lar la-check-circle"></i> 3GB of Space</li>
<li><i class="lar la-check-circle"></i> Unlimited Users</li>
<li><i class="lar la-check-circle"></i> Time Tracking</li>
<li><i class="lar la-check-circle"></i> Chat Support</li>
<li>&nbsp;</li>
</ul>
<div><a href="#" class="btn btn-secondary w-100">CHOOSE PLAN</a></div>
</div>
</div>
<div class="col col-md-4 text-start">
<div class="block">
<div class="herotext primary-bg p-4 best">
<h4>Popular</h4>
<h2>$99<span>/month</span></h2>
<p>All plans include a 30 day trial!</p>
</div>
<ul class="pt-4">
<li><i class="lar la-check-circle"></i> 35 Active Projects</li>
<li><i class="lar la-check-circle"></i> 10GB of Space</li>
<li><i class="lar la-check-circle"></i> Unlimited Users</li>
<li><i class="lar la-check-circle"></i> Time Tracking</li>
<li><i class="lar la-check-circle"></i> SSL Security</li>
<li><i class="lar la-check-circle"></i> Chat Support</li>
</ul>
<div><a href="#" class="btn btn-primary w-100">CHOOSE PLAN</a></div>
</div>
</div>
<div class="col col-md-4 text-start">
<div class="block">
<div class="herotext secondary-bg p-4">
<h4>Enterprise</h4>
<h2>$199<span>/month</span></h2>
<p>All plans include a 30 day trial!</p>
</div>
<ul class="pt-4">
<li><i class="lar la-check-circle"></i> Unlimited Projects</li>
<li><i class="lar la-check-circle"></i> 50GB of Space</li>
<li><i class="lar la-check-circle"></i> Unlimited Users</li>
<li><i class="lar la-check-circle"></i> Time Tracking</li>
<li><i class="lar la-check-circle"></i> SSL Security</li>
<li><i class="lar la-check-circle"></i> Chat Support</li>
</ul>
<div><a href="#" class="btn btn-secondary w-100">CHOOSE PLAN</a></div>
</div>
</div>
</div>
</div>
</section>
<!-- /.. PRICING ENDS
========================================================================= -->
<!-- BLOG STARTS
========================================================================= -->
<section class="blog light-grey-bg" id="blog">
<div class="container">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/Be inspired. Be informed!</h6>
<h2>Latest News & Events</h2>
<h5 class="pt-2">Blogging is a conversation, not a code.</h5>
</div>
</div>
</div>
<div class="row pt-5 g-0 g-lg-5">
<div class="col-12 col-md-4">
<div class="blog-post">
<div class="pic pb-4"><img src="assets/imgs/blog/1.jpg" class="img-fluid" alt=""></div>
<h4><a href="blog.html">/TECHNOLOGY</a></h4>
<h2><a href="single-blog-post-right-sidebar.html">Single Blog Post with Right Sidebar</a></h2>
<p>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident ...</p>
<ul class="meta">
<li>
<a href=""><i class="las la-user-alt"></i> John</a>
</li>
<li>
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
</li>
<li>
<a href=""><i class="lar la-comment"></i> 3</a>
</li>
<li>
<a href=""><i class="lar la-eye"></i> 5.5K</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-4">
<div class="blog-post">
<div class="pic pb-4"><img src="assets/imgs/blog/2.jpg" class="img-fluid" alt=""></div>
<h4><a href="blog.html">/TECHNOLOGY</a></h4>
<h2><a href="single-blog-post-left-sidebar.html">Single Blog Post with Left Sidebar</a></h2>
<p>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of spring, taken possession of my entire soul ...</p>
<ul class="meta">
<li>
<a href=""><i class="las la-user-alt"></i> John</a>
</li>
<li>
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
</li>
<li>
<a href=""><i class="lar la-comment"></i> 3</a>
</li>
<li>
<a href=""><i class="lar la-eye"></i> 5.5K</a>
</li>
</ul>
</div>
</div>
<div class="col-12 col-md-4">
<div class="blog-post">
<div class="pic pb-4"><img src="assets/imgs/blog/3.jpg" class="img-fluid" alt=""></div>
<h4><a href="blog.html">/TECHNOLOGY</a></h4>
<h2><a href="single-blog-post-without-sidebar.html">Single Blog Post without Sidebar</a></h2>
<p>Taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cuatat proident, taken possession of my entire soul ...</p>
<ul class="meta">
<li>
<a href=""><i class="las la-user-alt"></i> John</a>
</li>
<li>
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
</li>
<li>
<a href=""><i class="lar la-comment"></i> 3</a>
</li>
<li>
<a href=""><i class="lar la-eye"></i> 5.5K</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row pt-3 pt-lg-5">
<div class="col-12 text-center"><a href="blog.html" class="btn btn-primary">VIEW ALL POSTS</a></div>
</div>
</div>
</section>
<!-- /.. BLOG ENDS
========================================================================= -->
<!-- TESTIMONIALS STARTS
========================================================================= -->
<section class="testimonials pt-xl-0 pb-0">
<div class="container-fluid">
<div class="row align-items-start align-items-md-center">
<div class="col-12 col-lg-6 col-xl-5 offset-xl-1 testimonials-block" >
<div class="herotext">
<h6>/testimonials</h6>
<h2>Dont Just Take <br class="d-none d-md-block">Our Word for It</h2>
</div>
<div class="testimonials-carousel pt-4">
<div class="testimonial">
<div class="d-flex align-items-center">
<div class="pic"><img src="assets/imgs/testimonials/1.jpg" class="img-fluid" alt=""></div>
<div class="detail">
<div class="name">John Doe</div>
<div class="designation">UI/UX Expert, France</div>
</div>
</div>
<p class="pt-3">“ We are full-cycle software development and digital solutions company with rich expertise and focus on the latest technologies ”</p>
</div>
<div class="testimonial">
<div class="d-flex align-items-center">
<div class="pic"><img src="assets/imgs/testimonials/2.jpg" class="img-fluid" alt=""></div>
<div class="detail">
<div class="name">John Doe</div>
<div class="designation">UI/UX Expert, France</div>
</div>
</div>
<p class="pt-3">“ We are full-cycle software development and digital solutions company with rich expertise and focus on the latest technologies ”</p>
</div>
<div class="testimonial">
<div class="d-flex align-items-center">
<div class="pic"><img src="assets/imgs/testimonials/3.jpg" class="img-fluid" alt=""></div>
<div class="detail">
<div class="name">John Doe</div>
<div class="designation">UI/UX Expert, France</div>
</div>
</div>
<p class="pt-3">“ We are full-cycle software development and digital solutions company with rich expertise and focus on the latest technologies ”</p>
</div>
</div>
<!--<div class="slider-counter"></div>-->
</div>
<div class="col-12 col-lg-6 col-xl-6 pe-0 ps-0"><img src="assets/imgs/testimonials/big.jpg" class="img-fluid" alt=""></div>
</div>
</div>
</section>
<!-- /.. TESTIMONIALS ENDS
========================================================================= -->
<!-- CLIENTS STARTS
========================================================================= -->
<section class="clients">
<div class="container">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/our clients</h6>
<h2>We are your Integrated<br class="d-none d-md-block"> Team Tech Pioneers</h2>
</div>
</div>
</div>
<div class="row text-center pt-5">
<div class="col-6 col-md-3"><img src="assets/imgs/clients/1.jpg" class="img-fluid" alt=""></div>
<div class="col-6 col-md-3"><img src="assets/imgs/clients/2.jpg" class="img-fluid" alt=""></div>
<div class="col-6 col-md-3"><img src="assets/imgs/clients/3.jpg" class="img-fluid" alt=""></div>
<div class="col-6 col-md-3"><img src="assets/imgs/clients/4.jpg" class="img-fluid" alt=""></div>
<div class="col-6 col-md-3"><img src="assets/imgs/clients/5.jpg" class="img-fluid" alt=""></div>
<div class="col-6 col-md-3"><img src="assets/imgs/clients/6.jpg" class="img-fluid" alt=""></div>
<div class="col-6 col-md-3"><img src="assets/imgs/clients/7.jpg" class="img-fluid" alt=""></div>
<div class="col-6 col-md-3"><img src="assets/imgs/clients/8.jpg" class="img-fluid" alt=""></div>
</div>
</div>
</section>
<!-- /.. CLIENTS ENDS
========================================================================= -->
<!-- VIDEO STARTS
========================================================================= -->
<section class="video bg-img text-center">
<div class="container">
<div class="row">
<div class="col-12">
<h6><a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-play"></i>&nbsp;</a></h6>
</div>
</div>
</div>
</section>
<!-- /.. VIDEO ENDS
========================================================================= -->
<!-- JOIN US STARTS
========================================================================= -->
<section class="join-us primary-bg text-center">
<div class="container">
<div class="row">
<div class="col-12">
<div class="herotext">
<h6>/Join Us</h6>
<h2>We Move The Digital<br class="d-none d-md-block"> Industry Forward</h2>
</div>
<ul class="pt-4">
<li><a href="#" class="btn btn-secondary">OUR SERVICES</a></li>
<li><a href="#" class="btn-transparent btn-secondary ">JOIN NOW</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- /.. JOIN US ENDS
========================================================================= -->
<!-- CONTACT US STARTS
========================================================================= -->
<section class="contact-us" id="contact">
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="herotext pb-4">
<h6>Get In Touch</h6>
<h2>Talk or Meet with Us</h2>
</div>
<address class="clearfix d-flex align-items-center pb-2">
<div class="icon"><i class="las la-map-marker"></i></div>
<div class="detail">
<div class="heading">Get Us Here</div>
1355 Market St, Suite 900<br>
San Francisco, CA 94<br>
</div>
</address>
<address class="clearfix d-flex align-items-center pb-2">
<div class="icon"><i class="las la-phone"></i></div>
<div class="detail">
<div class="heading">Call Us</div>
+1 123 456 7890
</div>
</address>
<address class="clearfix d-flex align-items-center">
<div class="icon"><i class="las la-envelope-open"></i></div>
<div class="detail">
<div class="heading">Write Us</div>
<a href="mailto:info@thisone.com" target="_blank">info@thisone.com</a>
</div>
</address>
</div>
<div class="col-12 col-lg-6 pt-5 pt-lg-0">
<div class="herotext pb-4">
<h6>Estimate Project</h6>
<h2>Let Us Know Here</h2>
</div>
<form action='process.php' method='post' name='ContactForm' id='ContactForm'>
<div class="mb-3">
<input type="text" class="form-control" name="name" placeholder="Enter your name *" >
</div>
<div class="mb-3">
<input type="email" class="form-control" name="email" placeholder="Enter your email *" >
</div>
<div class="mb-3">
<input type="text" class="form-control" name="website" placeholder="Enter your website" >
</div>
<div class="mb-3">
<textarea class="form-control" name="comment" placeholder="Enter your message *" rows="3"></textarea>
</div>
<div id='message_post'></div>
<button type='submit' value='Submit' name='submitf' id="submitf" class="btn btn-primary mt-3">SEND MESSAGE</button>
</form>
</div>
</div>
</div>
</section>
<!-- /.. CONTACT US ENDS
========================================================================= -->
<!-- MAPS STARTS
========================================================================= -->
<section class="map p-0">
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3197.154890111155!2d174.72928551616675!3d-36.74285307495062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d0d3bd2cd208323%3A0x7baab82d6bfe50fe!2sTemplate+Monster!5e0!3m2!1sen!2s!4v1534419180788" height="400" allowfullscreen=""></iframe>
</div>
</div>
</div>
</section>
<!-- /.. MAPS ENDS
========================================================================= -->
<!-- FOOTER STARTS
========================================================================= -->
<footer class="dark-grey-bg text-center">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#blog">BLOG</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<div class="row pt-4">
<div class="col-12">
<ul class="socialmedia">
<li><a href=""><i class="lab la-twitter"></i></a></li>
<li><a href=""><i class="lab la-facebook-f"></i></a></li>
<li><a href=""><i class="lab la-behance"></i></a></li>
<li><a href=""><i class="lab la-dribbble"></i></a></li>
</ul>
</div>
</div>
<div class="row pt-3 copyright">
<div class="col-12">
THISONE © 2021
</div>
</div>
</div>
</footer>
<!-- /.. FOOTER ENDS
========================================================================= -->
<!-- TO TOP STARTS
========================================================================= -->
<a href="#home" class="back-to-top"><i class="las la-angle-up"></i></a>
<!-- /.. TO TOP ENDS
========================================================================= -->
<!-- INCLUD ALL JS FILES
========================================================================= -->
<!--JQUERY MIN JS-->
<script src="assets/lib/jquery-1.12.4/jquery.min.js"></script>
<!--BOOTSTRAP JS-->
<script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="assets/lib/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/lib/revolution/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLICEY ADD-ON FILES -->
<script src='assets/lib/revolution/revolution-addons/slicey/js/revolution.addon.slicey.min.js?ver=1.0.0'></script>
<!-- SLIDER REVOLUTION 5.0 EXTENSIONS
(Load Extensions only on Local File Systems !
The following part can be removed on Server for On Demand Loading) -->
<script src="assets/lib/revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="assets/lib/revolution/js/extensions/revolution.extension.video.min.js"></script>
<script >
var tpj=jQuery;
var revapi18;
tpj(document).ready(function() {
if(tpj("#rev_slider_18_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_18_1");
}else{
revapi18 = tpj("#rev_slider_18_1").show().revolution({
sliderType:"carousel",
jsFileLocation:"revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
mouseScrollReverse:"default",
onHoverStop:"on",
thumbnails: {
style:"gyges",
enable:true,
width:50,
height:50,
min_width:50,
wrapper_padding:5,
wrapper_color:"transparent",
tmp:'<span class="tp-thumb-img-wrap"> <span class="tp-thumb-image"></span></span>',
visibleAmount:5,
hide_onmobile:false,
hide_over:1240,
hide_onleave:false,
direction:"horizontal",
span:false,
position:"inner",
space:5,
h_align:"center",
v_align:"top",
h_offset:0,
v_offset:20
}
,
tabs: {
style:"gyges",
enable:true,
width:220,
height:80,
min_width:220,
wrapper_padding:0,
wrapper_color:"transparent",
tmp:'<div class="tp-tab-content"> <span class="tp-tab-date">{{param1}}</span> <span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>',
visibleAmount: 6,
hide_onmobile: true,
hide_under:1240,
hide_onleave:false,
hide_delay:200,
direction:"vertical",
span:true,
position:"inner",
space:0,
h_align:"left",
v_align:"center",
h_offset:0,
v_offset:0
}
},
carousel: {
horizontal_align: "center",
vertical_align: "center",
fadeout: "off",
maxVisibleItems: 5,
infinity: "on",
space: 0,
stretch: "off",
showLayersAllTime: "off",
easing: "Power3.easeInOut",
speed: "800"
},
responsiveLevels:[1240,1024,778,480],
visibilityLevels:[1240,1024,778,480],
gridwidth:[800,700,400,300],
gridheight:[600,600,500,400],
lazyType:"single",
shadow:0,
spinner:"off",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
autoHeight:"off",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
<!-- PRELOADER -->
<script src="assets/lib/preloader/sPreloader.js"></script>
<!-- OWL CAROUSEL -->
<script src="assets/lib/owl-carousel/owl.carousel.js"></script>
<!-- ISOTOPE GALLERY -->
<script src="assets/lib/isotope/jquery.isotope.min.js"></script>
<script src="assets/lib/isotope/custom-isotope-mansory.js"></script>
<!-- MAGNIFIC POPUP -->
<script src="assets/lib/magnific-popup/jquery.magnific-popup.js"></script>
<!-- CONTACT FORM JS -->
<script src="assets/js/contact-form/contact-form.js"></script>
<!-- CUSTOM JS -->
<script src="assets/js/script.js"></script>
</body>
</html>