thsOne/01-Creative-Studio/index.html

853 lines
39 KiB
HTML
Raw 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>Creative Studio</title>
</head>
<body data-bs-spy="scroll" data-bs-target="#navigation" id="home">
<!-- 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-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="assets/imgs/logo-white.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="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">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
========================================================================= -->
<!-- SLIDER STARTS
========================================================================= -->
<section id="slider" class="p-0">
<div id="rev_slider_1014_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="typewriter-effect" data-source="gallery" style="background-color:transparent;padding:0px;">
<!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
<div id="rev_slider_1014_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.4.1">
<ul>
<!-- SLIDE -->
<li data-index="rs-2800" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="assets/imgs/slider/Dancing-Bulbs-100x50.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" 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/Dancing-Bulbs.jpg" alt="" 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/imgs/slider/Dancing-Bulbs.mp4"
data-videopreload="auto"
data-videoloop="loop"
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-2800-layer-7"
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="off"
data-responsive="off"
data-frames='[{"from":"opacity:0;","speed":500,"to":"o:1;","delay":0,"ease":"Power4.easeOut"},{"speed":5000,"to":"opacity:0;","ease":"Power4.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: 5;background-color:rgba(0, 0, 0, 0.50);border-color:rgba(0, 0, 0, 0);border-width:0px;"> </div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
id="slide-2800-layer-1"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-80','-80','-130','-157']"
data-fontsize="['130','120','90','70']"
data-lineheight="['130','120','90','70']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;sX:1;sY:1;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['center','center','center','center']"
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; font-size: 130px; line-height: 130px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Arial, Helvetica, sans-serif;border-width:0px;letter-spacing:-7px;">Creative Studio</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme"
id="slide-2800-layer-3"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['16','16','-54','-89']"
data-width="60"
data-height="3"
data-whitespace="nowrap"
data-type="shape"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"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;background-color:rgba(38, 211, 105, 1.00);border-color:rgba(0, 0, 0, 0);border-width:0px;"> </div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
id="slide-2800-layer-2"
data-x="['center','center','center','center']" data-hoffset="['-10','-10','-10','-10']"
data-y="['middle','middle','middle','middle']" data-voffset="['65','65','-8','-32']"
data-fontsize="['40','40','30','30']"
data-width="['640','640','480','360']"
data-height="none"
data-whitespace="['nowrap','nowrap','normal','normal']"
data-type="text"
data-typewriter='{"lines":"167%20Clients%20Worldwide.,23%20Qualified%20Employees.,150%20Cups%20of%20Coffee%20per%20Day.","enabled":"on","speed":"60","delays":"1%7C100","looped":"on","cursorType":"one","blinking":"on","word_delay":"off","sequenced":"on","hide_cursor":"off","start_delay":"1500","newline_delay":"1000","deletion_speed":"20","deletion_delay":"1000","blinking_speed":"500","linebreak_delay":"60","cursor_type":"two","background":"off"}'
data-responsive_offset="on"
data-frames='[{"from":"y:50px;sX:1;sY:1;opacity:0;","speed":2500,"to":"o:1;","delay":500,"ease":"Power4.easeOut"},{"delay":"wait","speed":300,"to":"opacity:0;","ease":"nothing"}]'
data-textAlign="['center','center','center','center']"
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: 640px; max-width: 640px; white-space: nowrap; font-size: 40px; line-height: 40px; font-weight: 400; color: rgba(255, 255, 255, 1.00);font-family:Georgia, serif;font-style:italic;border-width:0px;">Dedicated. Inspired. Passionate. </div>
<!-- LAYER NR. 5 -->
<div class="tp-caption rev-btn tp-resizeme"
id="slide-2800-layer-4"
data-x="['right','right','center','center']" data-hoffset="['660','550','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['240','240','100','83']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":""}]'
data-responsive_offset="on"
data-frames='[{"from":"x:-50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"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(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 0);bw:2px 2px 2px 2px;"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[50,50,50,50]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[50,50,50,50]"
style="z-index: 9; white-space: nowrap; font-size: 15px; line-height: 46px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Arial, Helvetica, sans-serif;background-color:rgba(0, 0, 0, 0);border-color:rgba(255, 255, 255, 0.25);border-style:solid;border-width:2px;border-radius:4px 4px 4px 4px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;letter-spacing:5px;cursor:pointer;">ABOUT US </div>
<!-- LAYER NR. 6 -->
<div class="tp-caption tp-resizeme"
id="slide-2800-layer-6"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['237','237','158','141']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="text"
data-responsive_offset="on"
data-frames='[{"from":"y:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"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; white-space: nowrap; font-size: 25px; line-height: 25px; font-weight: 400; color: rgba(255, 255, 255, 1.00);font-family:Georgia, serif;font-style:italic;border-width:0px;">or </div>
<!-- LAYER NR. 7 -->
<div class="tp-caption rev-btn tp-resizeme"
id="slide-2800-layer-5"
data-x="['left','left','center','center']" data-hoffset="['660','550','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['240','240','224','207']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-type="button"
data-actions='[{"event":"click","action":"scrollbelow","offset":"px","delay":""}]'
data-responsive_offset="on"
data-frames='[{"from":"x:50px;opacity:0;","speed":2500,"to":"o:1;","delay":500,"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(0, 0, 0, 1.00);bg:rgba(255, 255, 255, 1.00);bc:rgba(255, 255, 255, 0);bw:2px 2px 2px 2px;"}]'
data-textAlign="['left','left','left','left']"
data-paddingtop="[0,0,0,0]"
data-paddingright="[50,50,50,50]"
data-paddingbottom="[0,0,0,0]"
data-paddingleft="[50,50,50,50]"
style="z-index: 11; white-space: nowrap; font-size: 15px; line-height: 46px; font-weight: 700; color: rgba(255, 255, 255, 1.00);font-family:Arial, Helvetica, sans-serif;background-color:rgba(0, 0, 0, 0);border-color:rgba(255, 255, 255, 0.25);border-style:solid;border-width:2px;border-radius:4px 4px 4px 4px;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;letter-spacing:5px;cursor:pointer;">CONTACT </div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
</section>
<!-- /. SLIDER ENDS -->
<!-- /.. SLIDER ENDS
========================================================================= -->
<!-- ABOUT US STARTS
========================================================================= -->
<section class="home-intro" id="about" >
<div class="container">
<div class="row pb-4 align-items-center">
<div class="col-12 col-lg-5">
<div class="picture">
<img src="assets/imgs/about/pic1.jpg" class="img-fluid" style="max-width: 100%;" alt="">
<div class="about-circle">
<img src="assets/imgs/play-reel.svg" class="img-fluid cir" alt="">
<div class="icon"><a class="popup-vimeo" href="https://vimeo.com/45830194"><img src="assets/imgs/play-icon.svg" class="img-fluid" alt=""></a></div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 offset-lg-1">
<div class="herotext">
<h6 class="pb-2">/Who we are</h6>
<h2>Philosophy</h2>
<h5 class="pt-4">We strive to create incredible experiences for people by creating new opportunities for brands, technology and culture.
<br><br>Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, , like these sweet mornings of spring taken possession of my entire soul.
</h5>
</div>
</div>
</div>
</div>
</section>
<!-- /. ABOUT US ENDS
========================================================================= -->
<!-- SERVICES STARTS
========================================================================= -->
<section class="services text-center" id="services">
<div class="container">
<div class="row pb-4">
<div class="col-12">
<div class="herotext">
<h6 class="pb-2">/What we do</h6>
<h2><span style="font-weight: 200;">Creative</span> Studio</h2>
<h5 class="pt-2">Cepteur sint occaecat cupidatat proident, taken possession of my <br>entire soul, like these sweet mornings of spring.</h5>
</div>
</div>
</div>
<div class="services-carousel">
<div class="block">
<div class="pic">
<img src="assets/imgs/services/1.jpg" class="img-fluid" alt="">
<div class="info">
<h2>Web & Digital</h2>
<h3>Cepteur sint</h3>
</div>
</div>
</div>
<div class="block">
<div class="pic">
<img src="assets/imgs/services/2.jpg" class="img-fluid" alt="">
<div class="info">
<h2>Photography</h2>
<h3>Cepteur sint</h3>
</div></div>
</div>
<div class="block">
<div class="pic">
<img src="assets/imgs/services/3.jpg" class="img-fluid" alt="">
<div class="info">
<h2>Shooting</h2>
<h3>Cepteur sint</h3>
</div></div>
</div>
<div class="block">
<div class="pic">
<img src="assets/imgs/services/4.jpg" class="img-fluid" alt="">
<div class="info">
<h2>Video</h2>
<h3>Cepteur sint</h3>
</div></div>
</div>
</div>
</div>
</section>
<!-- /. SERVICES ENDS
========================================================================= -->
<!-- PORTFOLIO STARTS
========================================================================= -->
<section id="gallery" class="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="herotext text-center">
<h6>/Gallery</h6>
<h2><span style="font-weight: 200;">Our</span> 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 pb-5">
<!-- 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=".category-1">Web</a></li>
<li><a href="#filter" data-option-value=".category-2">Photos</a></li>
<li><a href="#filter" data-option-value=".videos">Videos</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- Portfolio Nav Ends -->
<div class="col-12">
<!-- Portfolio Thumbs Starts -->
<div class="make3columns portfolio-grid">
<!-- Project 1 Starts -->
<figure class="item category-2">
<div class="picture">
<img src="assets/imgs/portfolio/1.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">category-2</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/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/1.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 category-1">
<div class="picture">
<img src="assets/imgs/portfolio/2.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">category-1</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/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/2.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 category-2">
<div class="picture">
<img src="assets/imgs/portfolio/3.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">category-1</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/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/3.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 category-1">
<div class="picture">
<img src="assets/imgs/portfolio/4.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">category-1</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/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/4.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 category-1">
<div class="picture">
<img src="assets/imgs/portfolio/5.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/5.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/5.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 category-2">
<div class="picture">
<img src="assets/imgs/portfolio/6.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">category-2</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/6.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/6.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 category-1">
<div class="picture">
<img src="assets/imgs/portfolio/7.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">category-1</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/7.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/7.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 category-2">
<div class="picture">
<img src="assets/imgs/portfolio/8.jpg" alt="">
<!-- Picture Overlay Starts -->
<div class="text-overlay">
<div class="category">category-2</div>
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/8.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/8.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 dark-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><span style="font-weight: 200;">Team of</span> Experts</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>Maria</h2>
<h6>CEO, Founder</h6>
<ul class="socialmedia pt-3">
<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 Expert</h6>
<ul class="socialmedia pt-3">
<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>Donna</h2>
<h6>Videograher</h6>
<ul class="socialmedia pt-3">
<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>Anderson</h2>
<h6>Photographer</h6>
<ul class="socialmedia pt-3">
<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
========================================================================= -->
<!-- TESTIMONIALS STARTS
========================================================================= -->
<section class="testimonials parallax-2">
<div class="container">
<div class="row align-items-start align-items-md-center">
<div class="col-12 col-lg-7 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">UK</div>
</div>
</div>
<p class="pt-3">“ Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident ”</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">Dubai</div>
</div>
</div>
<p class="pt-3">“ Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident ”</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">Australia</div>
</div>
</div>
<p class="pt-3">“ Cepteur sint occaecat cupidatat proident, taken possession of my entire soul, like these sweet mornings of springCepteur sint occaecat cupidt proident ”</p>
</div>
</div>
<!--<div class="slider-counter"></div>-->
</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
========================================================================= -->
<!-- FOOTER STARTS
========================================================================= -->
<footer class="dark-grey-bg" id="contact">
<div class="container text-center">
<div class="row">
<div class="col-12">
<div class="herotext">
<h2>Let's Keep in touch</h2>
<h5 class="email"><a href="">hello@thisone.com</a></h5>
</div>
</div>
<div class="col-12">
<ul class="socialmedia">
<li><a href="#">Facebook</a></li>
<li><a href="">Instagram</a></li>
<li><a href="">Twitter</a></li>
</ul>
<div class="copyright">
ThisOne © 2021
</div>
</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>
<!-- TYPEWRITER ADDON -->
<script src="assets/lib/revolution/revolution-addons/typewriter/js/revolution.addon.typewriter.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/lib/revolution/revolution-addons/typewriter/css/typewriter.css">
<!-- 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 revapi1014;
tpj(document).ready(function() {
if(tpj("#rev_slider_1014_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_1014_1");
}else{
revapi1014 = tpj("#rev_slider_1014_1").show().revolution({
sliderType:"standard",
jsFileLocation:"revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
mouseScrollReverse:"default",
onHoverStop:"off",
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
}
,
arrows: {
style:"uranus",
enable:false,
hide_onmobile:true,
hide_under:768,
hide_onleave:false,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:20,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:20,
v_offset:0
}
}
},
responsiveLevels:[1240,1024,778,480],
visibilityLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[868,768,960,600],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"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",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
RsTypewriterAddOn(tpj, revapi1014);
}); /*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>