<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vosio Portfolio Template - Home 02</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="site-container">
<div class="cursor"></div>
<!-- Preloader -->
<div class="preloader"></div>
<div class="menu-backdrop"></div>
<!-- Main Header Bar-->
<header class="main-header-bar">
<div class="line-one"></div>
<div class="line-two"></div>
<!--Header-Upper-->
<div class="header-bar-inner">
<div class="outer-box clearfix">
<!--Nav Toggler-->
<div class="nav-toggler"><button class="toggler-btn"><span class="bar bar-one"></span><span class="bar bar-two"></span><span class="bar bar-three"></span></button></div>
<!--Social Links-->
<div class="social-links">
<ul class="clearfix">
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-twitter-square"></span></a></li>
<li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
</ul>
</div>
<!--Copyright Text-->
<div class="copyright">© Vosio 2022</div>
</div>
<!--Alt Logo Box-->
<div class="alt-logo-box"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
<!--Nav Bg Box-->
<div class="nav-bg-box"></div>
<!--Main Nav Outer-->
<div class="main-nav-outer">
<div class="nav-closer"><img src="images/icons/close-icon.png" alt=""></div>
<div class="outer-nav-box">
<div class="top-bg"></div>
<div class="bottom-bg"></div>
<div class="main-nav-box" data-scrollbar="">
<!--Logo Box-->
<div class="main-logo-box"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
<div class="main-nav">
<ul class="navigation">
<li class="dropdown current"><a href="#">home</a>
<ul>
<li><a href="index.html">home 01</a></li>
<li><a href="index-2.html">home 02</a></li>
<li><a href="index-3.html">home 03</a></li>
<li><a href="index-4.html">home 04</a></li>
<li><a href="index-5.html">home 05</a></li>
<li><a href="index-6.html">home 06</a></li>
<li><a href="index-7.html">home 07</a></li>
<li><a href="index-8.html">home 08</a></li>
<li><a href="index-9.html">home 09</a></li>
<li><a href="index-10.html">home 10</a></li>
<li><a href="index-11.html">home 11</a></li>
<li><a href="index-12.html">home 12</a></li>
<li><a href="index-13.html">home 13</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">portfolio</a>
<ul>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="portfolio-single.html">project details</a></li>
</ul>
</li>
<li><a href="about.html">about us</a></li>
<li class="dropdown"><a href="#">stories</a>
<ul>
<li><a href="blog.html">stories</a></li>
<li><a href="blog-single.html">post details</a></li>
</ul>
</li>
<li><a href="contact.html">get in touch</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--End Header Upper-->
</header>
<!--End Main Header -->
<div class="scroll-container">
<div class="main-content-container" id="scroll-container">
<div class="body-bg-layer" style="background-image: url(images/background/body-bg-1.jpg);"></div>
<!-- Banner Two -->
<section class="banner-two" id="to-top-div">
<div class="auto-container">
<div class="banner-slider owl-theme owl-carousel">
<!--Slide Item-->
<div class="slide-item">
<div class="image-layer" style="background-image: url(images/main-slider/image-2.jpg);"></div>
<div class="slide-count"><span>01</span></div>
<div class="content-box">
<div class="content">
<div class="inner">
<div class="cat"><span>photography</span></div>
<h2><span>Green screen tricks</span></h2>
</div>
</div>
</div>
</div>
<!--Slide Item-->
<div class="slide-item">
<div class="image-layer" style="background-image: url(images/main-slider/image-3.jpg);"></div>
<div class="slide-count"><span>02</span></div>
<div class="content-box">
<div class="content">
<div class="inner">
<div class="cat"><span>photography</span></div>
<h2><span>Green screen tricks</span></h2>
</div>
</div>
</div>
</div>
<!--Slide Item-->
<div class="slide-item">
<div class="image-layer" style="background-image: url(images/main-slider/image-2.jpg);"></div>
<div class="slide-count"><span>03</span></div>
<div class="content-box">
<div class="content">
<div class="inner">
<div class="cat"><span>photography</span></div>
<h2><span>Green screen tricks</span></h2>
</div>
</div>
</div>
</div>
<!--Slide Item-->
<div class="slide-item">
<div class="image-layer" style="background-image: url(images/main-slider/image-3.jpg);"></div>
<div class="slide-count"><span>04</span></div>
<div class="content-box">
<div class="content">
<div class="inner">
<div class="cat"><span>photography</span></div>
<h2><span>Green screen tricks</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--End Banner Section -->
<!--Services Section-->
<section class="services-section">
<div class="auto-container">
<div class="def-title-box">
<div class="patt"><span></span></div>
<div class="subtitle">creative services</div>
<h3>Proffesional Services</h3>
</div>
<div class="services">
<div class="row clearfix">
<!--Block-->
<div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="inner">
<div class="icon-box"><span class="far fa-display"></span></div>
<h5>Web design</h5>
<div class="text">online presence</div>
<div class="link-box"><a href="blog-single.html"><span class="far fa-angle-right"></span></a></div>
</div>
</div>
</div>
<!--Block-->
<div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="inner">
<div class="icon-box"><span class="far fa-flask"></span></div>
<h5>Digital Marketing</h5>
<div class="text">get popular</div>
<div class="link-box"><a href="blog-single.html"><span class="far fa-angle-right"></span></a></div>
</div>
</div>
</div>
<!--Block-->
<div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="inner">
<div class="icon-box"><span class="far fa-chart-column"></span></div>
<h5>Google Seo</h5>
<div class="text">get on top</div>
<div class="link-box"><a href="blog-single.html"><span class="far fa-angle-right"></span></a></div>
</div>
</div>
</div>
<!--Block-->
<div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="inner">
<div class="icon-box"><span class="far fa-print"></span></div>
<h5>Print</h5>
<div class="text">all types of printing</div>
<div class="link-box"><a href="blog-single.html"><span class="far fa-angle-right"></span></a></div>
</div>
</div>
</div>
<!--Block-->
<div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="inner">
<div class="icon-box"><span class="far fa-medal"></span></div>
<h5>Branding</h5>
<div class="text">look unique</div>
<div class="link-box"><a href="blog-single.html"><span class="far fa-angle-right"></span></a></div>
</div>
</div>
</div>
<!--Block-->
<div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="inner">
<div class="icon-box"><span class="far fa-image"></span></div>
<h5>Motion Design</h5>
<div class="text">motion design</div>
<div class="link-box"><a href="blog-single.html"><span class="far fa-angle-right"></span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Plans Section-->
<section class="plans-section">
<div class="auto-container">
<div class="row clearfix">
<!--Image-->
<div class="image-col col-lg-6 col-md-12 col-sm-12">
<div class="inner">
<div class="image">
<div class="bg-pattern"></div>
<img src="images/resource/image-1.jpg" alt="">
</div>
</div>
</div>
<!--Content-->
<div class="text-col col-lg-6 col-md-12 col-sm-12">
<div class="inner">
<h4>Plans and strategies that improve your online presence</h4>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
<ul>
<li>Digital Marketing</li>
<li>SEO Services</li>
<li>Responsive Design</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Team Section-->
<section class="team-section">
<div class="auto-container">
<div class="def-title-box">
<div class="patt"><span></span></div>
<div class="subtitle">team members</div>
<h3>Amazing Staff</h3>
</div>
<div class="team">
<div class="row clearfix">
<!--Block-->
<div class="team-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image-box"><a href="#"><img src="images/resource/team-1.jpg" alt=""></a></div>
<div class="cat"><span>Coding</span></div>
<div class="social">
<a href="#"><i class="fab fa-facebook-square"></i></a>
<a href="#"><i class="fab fa-twitter-square"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
<div class="name"><a href="#">Mike Gordon</a></div>
</div>
</div>
<!--Block-->
<div class="team-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image-box"><a href="#"><img src="images/resource/team-2.jpg" alt=""></a></div>
<div class="cat"><span>Marketing</span></div>
<div class="social">
<a href="#"><i class="fab fa-facebook-square"></i></a>
<a href="#"><i class="fab fa-twitter-square"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
<div class="name"><a href="#">David Rich</a></div>
</div>
</div>
<!--Block-->
<div class="team-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="inner-box">
<div class="image-box"><a href="#"><img src="images/resource/team-3.jpg" alt=""></a></div>
<div class="cat"><span>SEO</span></div>
<div class="social">
<a href="#"><i class="fab fa-facebook-square"></i></a>
<a href="#"><i class="fab fa-twitter-square"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
<div class="name"><a href="#">Noah Clark</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Services Section-->
<section class="services-two">
<div class="auto-container">
<div class="def-title-box">
<div class="patt"><span></span></div>
<div class="subtitle">what we offer</div>
<h3>Proffesional Services</h3>
</div>
<div class="row parent-row clearfix">
<div class="tabs-col col-xl-6 col-lg-12 col-md-12 col-sm-12">
<div class="tabs-box def-tabs-box">
<ul class="tab-buttons clearfix">
<li class="tab-btn active-btn" data-tab="#tab-1"><span>why choose us</span></li>
<li class="tab-btn" data-tab="#tab-2"><span>our mission</span></li>
<li class="tab-btn" data-tab="#tab-3"><span>our vision</span></li>
</ul>
<div class="tabs-content">
<!--Tab-->
<div class="tab active-tab" id="tab-1">
<div class="row clearfix">
<div class="image-col col-lg-5 col-md-5 col-sm-6">
<div class="image"><img src="images/resource/tab-image-1.jpg" alt=""></div>
</div>
<div class="text-col col-lg-7 col-md-7 col-sm-6">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
</div>
</div>
</div>
</div>
<!--Tab-->
<div class="tab" id="tab-2">
<div class="row clearfix">
<div class="image-col col-lg-5 col-md-5 col-sm-6">
<div class="image"><img src="images/resource/tab-image-1.jpg" alt=""></div>
</div>
<div class="text-col col-lg-7 col-md-7 col-sm-6">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
</div>
</div>
</div>
</div>
<!--Tab-->
<div class="tab" id="tab-3">
<div class="row clearfix">
<div class="image-col col-lg-5 col-md-5 col-sm-6">
<div class="image"><img src="images/resource/tab-image-1.jpg" alt=""></div>
</div>
<div class="text-col col-lg-7 col-md-7 col-sm-6">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordions-col col-xl-6 col-lg-12 col-md-12 col-sm-12">
<div class="accordion-box clearfix">
<!--Block-->
<div class="accordion block">
<div class="acc-btn">For the trust, you have on us <i class="fa-regular fa-trophy"></i></div>
<div class="acc-content">
<div class="content">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
</div>
</div>
</div>
<!--Block-->
<div class="accordion block active-block">
<div class="acc-btn active">Modern designs served with quality <i class="fa-regular fa-home"></i></div>
<div class="acc-content">
<div class="content">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
</div>
</div>
</div>
<!--Block-->
<div class="accordion block">
<div class="acc-btn">Designs too original to be copied <i class="fa-regular fa-user"></i></div>
<div class="acc-content">
<div class="content">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Main Footer-->
<footer class="main-footer">
<button class="scroll-top scroll-to-target" data-target="html" id="scroll-to-top"><span class="icon fa fa-arrow-alt-circle-up"></span></button>
<div class="footer-inner">
<div class="auto-container">
<div class="footer-logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
<div class="info">
<div class="row clearfix">
<!--Block-->
<div class="info-block col-lg-6 col-md-6 col-sm-12">
<div class="i-title">Address</div>
<div class="text">121 King St, Melbourne <br>VIC 3000, Australia</div>
</div>
<!--Block-->
<div class="info-block col-lg-6 col-md-6 col-sm-12">
<div class="i-title">Contact info</div>
<div class="text"><a href="tel:12345678900">123 456 789 00</a> <br> <a href="mailto:vosio@contact.com">vosio@contact.com</a></div>
</div>
</div>
</div>
<div class="loc-info"><a href="#">Map & Directions</a></div>
</div>
</div>
</footer>
</div>
</div>
</div>
<!--End Site Container-->
<script src="js/jquery.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/smooth-scrollbar.js"></script>
<script src="js/owl.js"></script>
<script src="js/cursor-script.js"></script>
<script src="js/wow.js"></script>
<script src="js/custom-script.js"></script>
</body>
</html>