portfolio.html

<!DOCTYPE html>

<!--
 // WEBSITE: https://themefisher.com
 // TWITTER: https://twitter.com/themefisher
 // FACEBOOK: https://www.facebook.com/themefisher
 // GITHUB: https://github.com/themefisher/
-->

<html lang="zxx">

<head>
  <meta charset="utf-8">
  <title>Dtox</title>

  <!-- mobile responsive meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
  <!-- theme meta -->
  <meta name="theme-name" content="dtox" />
  <base href="@@base">
  
  <!-- ** Plugins Needed for the Project ** -->
  <!-- Bootstrap -->
  <link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
  <!-- themefy-icon -->
  <link rel="stylesheet" href="plugins/themify-icons/themify-icons.css">
  <!-- slick slider -->
  <link rel="stylesheet" href="plugins/slick/slick.css">
  <!-- venobox popup -->
  <link rel="stylesheet" href="plugins/Venobox/venobox.css">
  <!-- aos -->
  <link rel="stylesheet" href="plugins/aos/aos.css">

  <!-- Main Stylesheet -->
  <link href="css/style.css" rel="stylesheet">
  
  <!--Favicon-->
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="images/favicon.ico" type="image/x-icon">

</head>

<body>
  

<header class="navigation fixed-top">
  <div class="container">
  <nav class="navbar navbar-expand-lg navbar-light">
	<div data-v-component-site>	
		<a class="navbar-brand font-tertiary h3" href="/" data-v-url-params='{"host":"www.*.*"}'>
		   <img src="images/logo.png" loading="lazy" class="logo-default" data-v-site-logo>
		   <img src="images/logo.png" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
		   <img src="images/logo.png" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
		   <img src="images/logo.png" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
		</a>
	</div>    
    
    
    <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation"
      aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

	<div class="collapse navbar-collapse  text-center" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
		<ul class="navbar-nav ms-auto" data-v-menu-items>
		  <li class="nav-item dropdown" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0">
			
			<a class="nav-link" href="#" data-v-class-if-dropdown-toggle="category.children > 0" aria-haspopup="true" aria-expanded="false" data-v-menu-item-url>
				<span data-v-menu-item-name>Resources</span>
			</a>
			
			<div class="dropdown-menu" data-v-menu-item-recursive>
			  <div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
				<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url><span data-v-menu-item-name>User Documentation</span></a>
			  </div> 
			  <div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
				<a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url><span data-v-menu-item-name>Developer Documentation</span></a>
			  </div> 
			</div>
		  </li>
		  <li class="nav-item" data-v-menu-item>
			<a class="nav-link" href="https://blog.vvveb.com"  data-v-menu-item-url><span data-v-menu-item-name>Blog</span></a>
		  </li>
		  <li class="nav-item" data-v-menu-item>
			<a class="nav-link" href="https://www.vvveb.com/page/contact"  data-v-menu-item-url><span data-v-menu-item-name>Contact</span></a>
		  </li>
		  <li class="nav-item" data-v-menu-item>
			<a class="nav-link" href="https://www.vvveb.com"  data-v-menu-item-url><span data-v-menu-item-name>About us</span></a>
		  </li>
		</ul>

		<div class="search-area toggle-hover">
			<form action="/search" method="get" data-v-action="/search">
				<input type="hidden" name="route" value="search">
				<div class="input-group">
					<input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
					<button class="btn border-0" type="submit">
						<div class="ti-flip-horizontal">
							<i class="ti-search la-lg" aria-hidden="true"></i>
						</div>
					</button>
				</div>			  
			</form>
		</div>

		 <a href="#" class="btn btn-primary ms-lg-3 primary-shadow">Try Free</a>
		
	</div>
  </nav>
  </div>
</header>


<!-- about us -->
<section class="section-lg about pb-0">
  <div class="container" data-v-component-post>
    <div class="row">
      <div class="col-lg-12">
        <h2 class="section-title" data-v-post-name>About us</h2>
      </div>
      <div class="col-lg-12 mb-100" data-v-post-content>
        <p>Readdle redefines personal productivity and shapes the "future of work" by crea
          outstanding apps and services. Popular Readdle apps such as Scanner Pro, PDF
          Expert, Spark and Documents, were downloaded over 90 million times worldwide.</p>
        <p>Readdle apps shaped mobile software categories, such as document scanning
          (Scanner Pro), email (Spark), document management (Documents), PDF editing
          (PDF Expert) and calendaring (Calendars 5). We've also won numerous awards,
          got to the top positions on the App Store charts and, most importantly, are loved
          by millions of people.</p>
      </div>
      <div class="col-lg-12">
        <!-- about video -->
        <div class="about-video">
          <img class="img-fluid w-100" src="images/about/video-thumb.jpg" alt="video-thumb">
          <a class="venobox play-btn" href="https://www.youtube.com/embed/2yoYxetUrWQ" data-vbtype="iframe"><i class="ti-control-play"></i></a>
        </div>
      </div>
    </div>
  </div>
  <!-- background shapes -->
  <img src="images/background-shape/green-dot.png" alt="background-shape" class="about-bg-1 up-down-animation">
  <img src="images/background-shape/blue-dot.png" alt="background-shape" class="about-bg-2 left-right-animation">
  <img src="images/background-shape/green-half-cycle.png" alt="background-shape" class="about-bg-3 up-down-animation">
  <img src="images/background-shape/seo-ball-1.png" alt="background-shape" class="about-bg-4 left-right-animation">
  <img src="images/background-shape/team-bg-triangle.png" alt="background-shape" class="about-bg-5 up-down-animation">
  <img src="images/background-shape/service-half-cycle.png" alt="background-shape" class="about-bg-6 left-right-animation">
</section>
<!-- /about us -->


<!-- product -->
<section class="section product" style="background-image: url(images/backgrounds/about-bg.png);">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-12 text-center">
        <h2 class="section-title">Our Product</h2>
        <p class="mb-100">Far far away, behind the word mountains, far from the <br> countries Vokalia and Consonantia.</p>
      </div>
      <div class="col-md-4 col-sm-6 mb-50">
        <a href="#"><img src="images/product/product-1.jpg" alt="product-img" class="rounded w-100 img-fluid"></a>
      </div>
      <div class="col-md-4 col-sm-6 mb-50">
        <a href="#"><img src="images/product/product-2.jpg" alt="product-img" class="rounded w-100 img-fluid"></a>
      </div>
      <div class="col-md-4 col-sm-6 mb-50">
        <a href="#"><img src="images/product/product-3.jpg" alt="product-img" class="rounded w-100 img-fluid"></a>
      </div>
      <div class="col-12 text-center">
        <a href="#" class="btn btn-primary">Explore More Product</a>
      </div>
    </div>
  </div>

  <!-- our vision -->
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2 class="section-title">Our Vision</h2>
        <p>Far far away, behind the word mountains,
          far from the countries Vokalia and Consonantia,
          there live the blind texts. Separated they
          live in Bookmarksgrove right at the coast of the
          Semantics, a large language ocean.</p>
      </div>
      <div class="col-md-6">
        <img src="images/about/vision.png" alt="vision" class="img-fluid w-100">
      </div>
    </div>
  </div>
</section>
<!-- /our vision -->

<!-- clients -->
<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-title">Our Clients</h2>
        <ul class="list-inline text-center">
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-1.png" alt="clients-logo" class="img-fluid"></a></li>
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-2.png" alt="clients-logo" class="img-fluid"></a></li>
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-3.png" alt="clients-logo" class="img-fluid"></a></li>
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-4.png" alt="clients-logo" class="img-fluid"></a></li>
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-5.png" alt="clients-logo" class="img-fluid"></a></li>
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-6.png" alt="clients-logo" class="img-fluid"></a></li>
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-7.png" alt="clients-logo" class="img-fluid"></a></li>
          <li class="list-inline-item mx-5 mb-5"><a href="#"><img src="images/clients-logo/client-8.png" alt="clients-logo" class="img-fluid"></a></li>
        </ul>
      </div>
    </div>
  </div>
</section>
<!-- /clients -->
</section>
<!-- /product -->


<!-- footer -->
<footer class="footer-section footer" style="background-image: url(images/backgrounds/footer-bg.png);">
  <div class="container" data-v-component-menu="footer" data-v-menu_id="5">

	<div class="row footer-menu" data-v-menu-items>
		
		<div class="col-md-3">

			<div data-v-component-site>	
			   <img src="img/logo-white.png" class="logo-default-dark" data-v-site-logo-dark>
			   <img src="img/logo.png" class="logo-default" data-v-site-logo>
			</div>

		</div>
		
		
		<div class="col-md-3" data-v-menu-item data-v-if="category.children > 0">
				<h6 data-v-menu-item-name>Vvveb</h6>
				<nav data-v-menu-item-recursive>
					<div data-v-menu-item data-v-if="category.children == 0">
						<a href="https://themes.vvveb.com/" data-v-menu-item-url><span data-v-menu-item-name>Themes</span></a>
					</div>
					<div data-v-menu-item data-v-if="category.children == 0">
						<a href="https://plugins.vvveb.com/" data-v-menu-item-url><span data-v-menu-item-name>Plugins</span></a>
					</div>
				</nav>
		</div>
		
		<div class="col-md-3" data-v-menu-item data-v-if="category.children > 0">
				<h6 data-v-menu-item-name>Resources</h6>
				<nav data-v-menu-item-recursive>
					<div data-v-menu-item data-v-if="category.children == 0">
						<a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url><span data-v-menu-item-name>User documentation</span></a>
					</div>
					<div data-v-menu-item data-v-if="category.children == 0">
						<a href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url><span data-v-menu-item-name>Developer documentation</span></a>
					</div>
				</nav>
		</div>

		<div class="col-md-3" data-v-menu-item data-v-if="category.children > 0">
				<h6 data-v-menu-item-name>Contact</h6>
				<nav data-v-menu-item-recursive>
					<div data-v-menu-item data-v-if="category.children == 0">
						<a href="" src="contact.html">Contact</a>
					</div>
				</nav>
		</div>
		

	</div>


      <!-- footer social icon -->
      <nav class="col-12 mt-4">
        <ul class="list-inline text-center social-icon">
          <li class="list-inline-item">
            <a class="facebook" href="#"><i class="ti-facebook"></i></a>
          </li>
          <li class="list-inline-item">
            <a class="twitter" href="#"><i class="ti-twitter-alt"></i></a>
          </li>
          <li class="list-inline-item">
            <a class="linkedin" href="#"><i class="ti-linkedin"></i></a>
          </li>
          <li class="list-inline-item">
            <a class="black" href="#"><i class="ti-github"></i></a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</footer>
<!-- /footer -->


<!-- jQuery -->
<script src="plugins/jQuery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="plugins/bootstrap/bootstrap.min.js"></script>
<!-- slick slider -->
<script src="plugins/slick/slick.min.js"></script>
<!-- venobox -->
<script src="plugins/Venobox/venobox.min.js"></script>
<!-- aos -->
<script src="plugins/aos/aos.js"></script>
<!-- Main Script -->
<script src="js/script.js"></script>

</body>
</html>