1171 lines
52 KiB
HTML
1171 lines
52 KiB
HTML
<!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 - Vimeo Video</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_1071_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="rotating-words130" data-source="gallery" style="background-color:#e5e5e5;padding:0px;">
|
||
<!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
|
||
<div id="rev_slider_1071_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
|
||
<ul>
|
||
<!-- SLIDE -->
|
||
<li data-index="rs-3022" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="Power3.easeInOut" data-easeout="Power3.easeInOut" data-masterspeed="1500" data-thumb="assets/imgs/slider/girls-100x50.jpg" data-rotate="0" data-saveperformance="off" data-title="Intro" data-param1="" 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/girls.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgparallax="10" 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/imgs/slider/girls.mp4"
|
||
data-videopreload="auto"
|
||
data-videoloop="loopandnoslidestop"
|
||
data-forceCover="1"
|
||
data-aspectratio="16:9"
|
||
data-autoplay="true"
|
||
data-autoplayonlyfirsttime="false"
|
||
></div>
|
||
<!-- LAYER NR. 1 -->
|
||
<div class="tp-caption tp-shape tp-shapewrapper "
|
||
id="slide-2896-layer-10"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
|
||
data-width="full"
|
||
data-height="full"
|
||
data-whitespace="nowrap"
|
||
data-type="shape"
|
||
data-basealign="slide"
|
||
data-responsive_offset="on"
|
||
data-responsive="off"
|
||
data-frames='[{"from":"opacity:0;","speed":1500,"to":"o:1;","delay":750,"ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"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; background-color:rgba(0, 0, 0, 0.25);border-color:rgba(0, 0, 0, 0.50);border-width:0px;"> </div>
|
||
<!-- LAYER NR. 2 -->
|
||
<div class="tp-caption NotGeneric-Icon tp-resizeme"
|
||
id="slide-2896-layer-8"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['-66','-64','-78','-78']"
|
||
data-width="none"
|
||
data-height="none"
|
||
data-whitespace="nowrap"
|
||
data-type="text"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
|
||
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; white-space: nowrap; cursor:default;"><i class="pe-7s-film"></i> </div>
|
||
<!-- LAYER NR. 3 -->
|
||
<div class="tp-caption NotGeneric-Title tp-resizeme"
|
||
id="slide-2896-layer-1"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','-22','-29']"
|
||
data-fontsize="['70','70','70','50']"
|
||
data-lineheight="['70','70','70','50']"
|
||
data-width="none"
|
||
data-height="none"
|
||
data-whitespace="nowrap"
|
||
data-type="text"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"from":"z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
|
||
data-textAlign="['left','left','left','left']"
|
||
data-paddingtop="[10,10,10,10]"
|
||
data-paddingright="[0,0,0,0]"
|
||
data-paddingbottom="[10,10,10,10]"
|
||
data-paddingleft="[0,0,0,0]"
|
||
style="z-index: 7; white-space: nowrap; ">HOSTED VIDEO</div>
|
||
<!-- LAYER NR. 4 -->
|
||
<div class="tp-caption NotGeneric-SubTitle tp-resizeme"
|
||
id="slide-2896-layer-4"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['52','52','28','13']"
|
||
data-width="none"
|
||
data-height="none"
|
||
data-whitespace="nowrap"
|
||
data-type="text"
|
||
data-responsive_offset="on"
|
||
data-frames='[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":1000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]'
|
||
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; white-space: nowrap; ">REVOLUTION SLIDER TEMPLATE </div>
|
||
<!-- LAYER NR. 5 -->
|
||
<div class="tp-caption RotatingWords-Button rev-btn "
|
||
id="slide-3022-layer-7"
|
||
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
|
||
data-y="['middle','middle','middle','middle']" data-voffset="['127','97','90','90']"
|
||
data-width="none"
|
||
data-height="none"
|
||
data-whitespace="nowrap"
|
||
data-type="button"
|
||
data-actions='[{"event":"click","action":"scrollbelow","offset":"0px","delay":""}]'
|
||
data-responsive_offset="on"
|
||
data-responsive="off"
|
||
data-frames='[{"delay":750,"speed":2000,"frame":"0","from":"y:100px;sX:1;sY:1;opacity:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"frame":"999","to":"y:50px;opacity:0;","ease":"Power2.easeInOut"},{"frame":"hover","speed":"300","ease":"Power1.easeInOut","force":true,"to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 1.00);"}]'
|
||
data-textAlign="['left','left','left','left']"
|
||
data-paddingtop="[20,20,20,20]"
|
||
data-paddingright="[50,50,50,50]"
|
||
data-paddingbottom="[20,20,20,20]"
|
||
data-paddingleft="[50,50,50,50]"
|
||
style="z-index: 11; white-space: nowrap;border-width:2px 2px 2px 2px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;border-radius: 30px; background-color: #0d6efd; border-color:#0d6efd ; letter-spacing: 1px;">HOOK ME UP </div>
|
||
</li>
|
||
</ul>
|
||
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></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 that’s 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> </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>Don’t 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> </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 revapi1071;
|
||
tpj(document).ready(function() {
|
||
if(tpj("#rev_slider_1071_1").revolution == undefined){
|
||
revslider_showDoubleJqueryError("#rev_slider_1071_1");
|
||
}else{
|
||
revapi1071 = tpj("#rev_slider_1071_1").show().revolution({
|
||
sliderType:"hero",
|
||
jsFileLocation:"revolution/js/",
|
||
sliderLayout:"fullscreen",
|
||
dottedOverlay:"none",
|
||
delay:20000,
|
||
navigation: {
|
||
},
|
||
responsiveLevels:[1240,1024,778,778],
|
||
visibilityLevels:[1240,1024,778,778],
|
||
gridwidth:[1240,1024,778,480],
|
||
gridheight:[600,500,400,300],
|
||
lazyType:"none",
|
||
parallax: {
|
||
type:"mouse",
|
||
origo:"slidercenter",
|
||
speed:2000,
|
||
levels:[2,3,4,5,6,7,12,16,10,50,46,47,48,49,50,55],
|
||
type:"mouse",
|
||
},
|
||
shadow:0,
|
||
spinner:"off",
|
||
autoHeight:"off",
|
||
fullScreenAutoWidth:"off",
|
||
fullScreenAlignForce:"off",
|
||
fullScreenOffsetContainer: "",
|
||
fullScreenOffset: "0px",
|
||
disableProgressBar:"on",
|
||
hideThumbsOnMobile:"off",
|
||
hideSliderAtLimit:0,
|
||
hideCaptionAtLimit:0,
|
||
hideAllCaptionAtLilmit:0,
|
||
debugMode:false,
|
||
fallbacks: {
|
||
simplifyAll:"off",
|
||
disableFocusListener:false,
|
||
}
|
||
});
|
||
// CHANGE THE API REFERENCE, AND THE ELEMENTS YOU WISH TO BLUR / UNBLUR
|
||
// SET START BLUR FACTOR, END BLUR FACTOR AND
|
||
|
||
var api = revapi1071,
|
||
ElementsToBlur = api.find('.toblur.tp-caption'),
|
||
ElementsToUnBlur = api.find('.tounblur.tp-caption'),
|
||
UnBlurFactor = 2,
|
||
UnBlurStart = 3,
|
||
UnBlurEnd = 0,
|
||
BlurStart = 0,
|
||
BlurEnd = 5,
|
||
BlurFactor = 2,
|
||
blurCall = new Object();
|
||
|
||
|
||
// SOME CODE FOR BLUR AND UNBLUR ELEMENTS
|
||
// EXTEND THE REVOLUTION SLIDER FUNCTION
|
||
// CHANGE ONLY IF YOU KNOW WHAT YOU DO
|
||
|
||
blurCall.inmodule = "parallax";
|
||
blurCall.atposition = "start";
|
||
blurCall.callback = function() {
|
||
var proc = api.revgetparallaxproc(),
|
||
blur = UnBlurStart+(proc*UnBlurStart*UnBlurFactor)+UnBlurEnd,
|
||
nblur = Math.abs(proc*BlurEnd*BlurFactor)+BlurStart;
|
||
|
||
blur = blur<UnBlurEnd?UnBlurEnd:blur;
|
||
nblur = nblur>BlurEnd?BlurEnd:nblur;
|
||
|
||
ElementsToUnBlur = jQuery(ElementsToUnBlur.selector);
|
||
punchgs.TweenLite.set(ElementsToUnBlur,{'-webkit-filter':'blur('+(blur)+'px)', 'filter':'blur('+(blur)+'px)'});
|
||
punchgs.TweenLite.set(ElementsToBlur,{'-webkit-filter':'blur('+(nblur)+'px)', 'filter':'blur('+(nblur)+'px)'});
|
||
}
|
||
|
||
api.bind("revolution.slide.layeraction",function (e) {
|
||
blurCall.callback();
|
||
});
|
||
|
||
api.bind("revolution.slide.onloaded",function (e) {
|
||
revapi1071.revaddcallback(blurCall);
|
||
}); }
|
||
}); /*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> |