858 lines
38 KiB
HTML
858 lines
38 KiB
HTML
<?php include 'includes/header.php';?>
|
|
|
|
<section id="slider" class="slider-element slider-parallax swiper_wrapper min-vh-60 min-vh-md-100 include-header">
|
|
<div class="slider-inner">
|
|
|
|
<div class="swiper-container swiper-parent">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide dark">
|
|
<div class="container">
|
|
<div class="slider-caption slider-caption-center">
|
|
<h2 data-animate="fadeInUp">Welcome to Canvas</h2>
|
|
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Create just what you need for your Perfect Website. Choose from a wide range of Elements & simply put them on your own Canvas.</p>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide-bg" style="background-image: url('images/slider/swiper/1.jpg');"></div>
|
|
</div>
|
|
<div class="swiper-slide dark">
|
|
<div class="container">
|
|
<div class="slider-caption slider-caption-center">
|
|
<h2 data-animate="fadeInUp">Beautifully Flexible</h2>
|
|
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Looks beautiful & ultra-sharp on Retina Screen Displays. Powerful Layout with Responsive functionality that can be adapted to any screen size.</p>
|
|
</div>
|
|
</div>
|
|
<div class="video-wrap">
|
|
<video id="slide-video" poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
|
|
<source src='images/videos/explore.webm' type='video/webm' />
|
|
<source src='images/videos/explore.mp4' type='video/mp4' />
|
|
</video>
|
|
<div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="container">
|
|
<div class="slider-caption">
|
|
<h2 data-animate="fadeInUp">Great Performance</h2>
|
|
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">You'll be surprised to see the Final Results of your Creation & would crave for more.</p>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide-bg" style="background-image: url('images/slider/swiper/3.jpg'); background-position: center top;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="slider-arrow-left"><i class="icon-angle-left"></i></div>
|
|
<div class="slider-arrow-right"><i class="icon-angle-right"></i></div>
|
|
</div>
|
|
|
|
<a href="#" data-scrollto="#content" data-offset="100" class="one-page-arrow dark"><i class="icon-angle-down infinite animated fadeInDown"></i></a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Content
|
|
============================================= -->
|
|
<section id="content">
|
|
<div class="content-wrap">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
|
|
<div class="col-lg-5">
|
|
<div class="heading-block">
|
|
<h1>Welcome to Canvas.<br>MultiPurpose Template.</h1>
|
|
</div>
|
|
<p class="lead">Create a website that you are gonna be proud of. Be it Business, Portfolio, Agency, Photography, eCommerce & much more.</p>
|
|
</div>
|
|
|
|
<div class="col-lg-7 align-self-end">
|
|
|
|
<div class="position-relative overflow-hidden">
|
|
<img src="images/services/main-fbrowser.png" data-animate="fadeInUp" data-delay="100" alt="Chrome">
|
|
<img src="images/services/main-fmobile.png" style="top: 0; left: 0; min-width: 100%; min-height: 100%;" data-animate="fadeInUp" data-delay="400" alt="iPhone" class="position-absolute">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section my-0">
|
|
<div class="container">
|
|
|
|
<div class="row mt-4 col-mb-50">
|
|
|
|
<div class="col-lg-4">
|
|
<i class="i-plain color i-large icon-line2-screen-desktop inline-block" style="margin-bottom: 15px;"></i>
|
|
<div class="heading-block border-bottom-0" style="margin-bottom: 15px;">
|
|
<span class="before-heading">Scalable on Devices.</span>
|
|
<h4>Responsive & Retina</h4>
|
|
</div>
|
|
<p>Employment respond committed meaningful fight against oppression social challenges rural legal aid governance. Meaningful work, implementation, process cooperation, campaign inspire.</p>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<i class="i-plain color i-large icon-line2-energy inline-block" style="margin-bottom: 15px;"></i>
|
|
<div class="heading-block border-bottom-0" style="margin-bottom: 15px;">
|
|
<span class="before-heading">Smartly Coded & Maintained.</span>
|
|
<h4>Powerful Performance</h4>
|
|
</div>
|
|
<p>Medecins du Monde Jane Addams reduce child mortality challenges Ford Foundation. Diversification shifting landscape advocate pathway to a better life rights international. Assessment.</p>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<i class="i-plain color i-large icon-line2-equalizer inline-block" style="margin-bottom: 15px;"></i>
|
|
<div class="heading-block border-bottom-0" style="margin-bottom: 15px;">
|
|
<span class="before-heading">Flexible & Customizable.</span>
|
|
<h4>Truly Multi-Purpose</h4>
|
|
</div>
|
|
<p>Democracy inspire breakthroughs, Rosa Parks; inspiration raise awareness natural resources. Governance impact; transformative donation philanthropy, respect reproductive.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container clearfix">
|
|
|
|
<div class="heading-block topmargin-lg center">
|
|
<h2>Even more Feature Rich</h2>
|
|
<span class="mx-auto">Philanthropy convener livelihoods, initiative end hunger gender rights local. John Lennon storytelling; advocate, altruism impact catalyst.</span>
|
|
</div>
|
|
|
|
<div class="row col-mb-50 mb-4">
|
|
<div class="col-lg-4 col-md-6">
|
|
|
|
<div class="feature-box flex-md-row-reverse text-md-end" data-animate="fadeIn">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-heart"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Boxed & Wide Layouts</h3>
|
|
<p>Stretch your Website to the Full Width or make it boxed to surprise your visitors.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-box flex-md-row-reverse text-md-end mt-5" data-animate="fadeIn" data-delay="200">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-paper"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Extensive Documentation</h3>
|
|
<p>We have covered each & everything in our Docs including Videos & Screenshots.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-box flex-md-row-reverse text-md-end mt-5" data-animate="fadeIn" data-delay="400">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-layers"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Parallax Support</h3>
|
|
<p>Display your Content attractively using Parallax Sections with HTML5 Videos.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-4 d-md-none d-lg-block text-center">
|
|
<img src="images/services/iphone7.png" alt="iphone 2">
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
|
|
<div class="feature-box" data-animate="fadeIn">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-power"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>HTML5 Video</h3>
|
|
<p>Canvas provides support for Native HTML5 Videos that can be added to a Background.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-box mt-5" data-animate="fadeIn" data-delay="200">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-check"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Endless Possibilities</h3>
|
|
<p>Complete control on each & every element that provides endless customization.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-box mt-5" data-animate="fadeIn" data-delay="400">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-bulb"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Light & Dark Color Schemes</h3>
|
|
<p>Change your Website's Primary Scheme instantly by simply adding the dark class.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row clearfix align-items-stretch">
|
|
|
|
<div class="col-lg-6 center col-padding" style="background: url('images/services/main-bg.jpg') center center no-repeat; background-size: cover;">
|
|
</div>
|
|
|
|
<div class="col-lg-6 center col-padding" style="background-color: #F5F5F5;">
|
|
<div class="heading-block border-bottom-0">
|
|
<span class="before-heading color">Easily Understandable & Customizable.</span>
|
|
<h3>Walkthrough Videos & Demos</h3>
|
|
</div>
|
|
|
|
<div class="center bottommargin">
|
|
<a class="d-block position-relative" href="https://vimeo.com/101373765" data-lightbox="iframe">
|
|
<img src="images/services/video.jpg" alt="Video">
|
|
<div class="bg-overlay">
|
|
<div class="bg-overlay-content dark">
|
|
<span class="overlay-trigger-icon size-lg op-ts op-07 bg-light text-dark" data-hover-animate="op-1" data-hover-animate-out="op-07" data-hover-parent=".row"><i class="icon-line-play"></i></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<p class="lead mb-0">Democracy inspire breakthroughs, Rosa Parks; inspiration raise awareness natural resources. Governance impact; transformative donation philanthropy, respect reproductive.</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row clearfix align-items-stretch bottommargin-lg">
|
|
|
|
<div class="col-lg-3 col-md-6 dark center col-padding" style="background-color: #515875;">
|
|
<i class="i-plain i-xlarge mx-auto icon-line2-directions"></i>
|
|
<div class="counter counter-lined"><span data-from="100" data-to="846" data-refresh-interval="50" data-speed="2000"></span>K</div>
|
|
<h5>Lines of Codes</h5>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 dark center col-padding" style="background-color: #576F9E;">
|
|
<i class="i-plain i-xlarge mx-auto icon-line2-graph"></i>
|
|
<div class="counter counter-lined"><span data-from="3000" data-to="21500" data-refresh-interval="100" data-speed="2500"></span></div>
|
|
<h5>KBs of HTML Files</h5>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 dark center col-padding" style="background-color: #6697B9;">
|
|
<i class="i-plain i-xlarge mx-auto icon-line2-layers"></i>
|
|
<div class="counter counter-lined"><span data-from="10" data-to="408" data-refresh-interval="25" data-speed="3500"></span></div>
|
|
<h5>No. of Templates</h5>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 dark center col-padding" style="background-color: #88C3D8;">
|
|
<i class="i-plain i-xlarge mx-auto icon-line2-clock"></i>
|
|
<div class="counter counter-lined"><span data-from="60" data-to="1400" data-refresh-interval="30" data-speed="2700"></span></div>
|
|
<h5>Hours of Coding</h5>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container clearfix">
|
|
|
|
<div class="row col-mb-50">
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-monitor"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Responsive Layout</h3>
|
|
<p>Powerful Layout with Responsive functionality that can be adapted to any screen size.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="200">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-eye"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Retina Ready Graphics</h3>
|
|
<p>Looks beautiful & ultra-sharp on Retina Displays with Retina Icons, Fonts & Images.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="400">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-star"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Powerful Performance</h3>
|
|
<p>Optimized code that are completely customizable and deliver unmatched fast performance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="600">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-play"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>HTML5 Video</h3>
|
|
<p>Canvas provides support for Native HTML5 Videos that can be added to a Full Width Background.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="800">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-params"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Parallax Support</h3>
|
|
<p>Display your Content attractively using Parallax Sections that have unlimited customizable areas.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="1000">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-line-circle-check"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Endless Possibilities</h3>
|
|
<p>Complete control on each & every element that provides endless customization possibilities.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="600">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-bulb"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Light & Dark Color Schemes</h3>
|
|
<p>Change your Website's Primary Scheme instantly by simply adding the dark class to the body.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="800">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-heart2"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Boxed & Wide Layouts</h3>
|
|
<p>Stretch your Website to the Full Width or make it boxed to surprise your visitors.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-4">
|
|
<div class="feature-box fbox-sm fbox-plain" data-animate="fadeIn" data-delay="1000">
|
|
<div class="fbox-icon">
|
|
<a href="#"><i class="icon-note"></i></a>
|
|
</div>
|
|
<div class="fbox-content">
|
|
<h3>Extensive Documentation</h3>
|
|
<p>We have covered each & everything in our Documentation including Videos & Screenshots.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section topmargin mb-0 border-bottom-0">
|
|
<div class="container clearfix">
|
|
<div class="heading-block center m-0">
|
|
<h3>Our Latest Works</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="portfolio" class="portfolio row g-0 portfolio-reveal grid-container">
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-media pf-icons">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="portfolio-single.html">
|
|
<img src="images/portfolio/4/1.jpg" alt="Open Imagination">
|
|
</a>
|
|
<div class="bg-overlay">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="images/portfolio/full/1.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="image" title="Image"><i class="icon-line-plus"></i></a>
|
|
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single.html">Open Imagination</a></h3>
|
|
<span><a href="#">Media</a>, <a href="#">Icons</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-illustrations">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="portfolio-single.html">
|
|
<img src="images/portfolio/4/2.jpg" alt="Locked Steel Gate">
|
|
</a>
|
|
<div class="bg-overlay">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="images/portfolio/full/2.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="image" title="Image"><i class="icon-line-plus"></i></a>
|
|
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single.html">Locked Steel Gate</a></h3>
|
|
<span><a href="#">Illustrations</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-graphics pf-uielements">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="#">
|
|
<img src="images/portfolio/4/3.jpg" alt="Mac Sunglasses">
|
|
</a>
|
|
<div class="bg-overlay">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="https://vimeo.com/89396394" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="iframe"><i class="icon-line-play"></i></a>
|
|
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single-video.html">Mac Sunglasses</a></h3>
|
|
<span><a href="#">Graphics</a>, <a href="#">UI Elements</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-icons pf-illustrations">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="portfolio-single.html">
|
|
<img src="images/portfolio/4/4.jpg" alt="Open Imagination">
|
|
</a>
|
|
<div class="bg-overlay" data-lightbox="gallery">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="images/portfolio/full/4.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
|
|
<a href="images/portfolio/full/4-1.jpg" class="d-none" data-lightbox="gallery-item"></a>
|
|
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single-gallery.html">Morning Dew</a></h3>
|
|
<span><a href="#">Icons</a>, <a href="#">Illustrations</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-uielements pf-media">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="portfolio-single.html">
|
|
<img src="images/portfolio/4/5.jpg" alt="Console Activity">
|
|
</a>
|
|
<div class="bg-overlay">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="images/portfolio/full/5.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="image" title="Image"><i class="icon-line-plus"></i></a>
|
|
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single.html">Console Activity</a></h3>
|
|
<span><a href="#">UI Elements</a>, <a href="#">Media</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-graphics pf-illustrations">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="portfolio-single.html">
|
|
<img src="images/portfolio/4/6.jpg" alt="Open Imagination">
|
|
</a>
|
|
<div class="bg-overlay" data-lightbox="gallery">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="images/portfolio/full/6.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
|
|
<a href="images/portfolio/full/6-1.jpg" class="d-none" data-lightbox="gallery-item"></a>
|
|
<a href="images/portfolio/full/6-2.jpg" class="d-none" data-lightbox="gallery-item"></a>
|
|
<a href="images/portfolio/full/6-3.jpg" class="d-none" data-lightbox="gallery-item"></a>
|
|
<a href="portfolio-single-gallery.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single-gallery.html">Shake It!</a></h3>
|
|
<span><a href="#">Illustrations</a>, <a href="#">Graphics</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-uielements pf-icons">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="portfolio-single-video.html">
|
|
<img src="images/portfolio/4/7.jpg" alt="Backpack Contents">
|
|
</a>
|
|
<div class="bg-overlay">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="https://www.youtube.com/watch?v=kuceVNBTJio" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="iframe"><i class="icon-line-play"></i></a>
|
|
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single-video.html">Backpack Contents</a></h3>
|
|
<span><a href="#">UI Elements</a>, <a href="#">Icons</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="portfolio-item col-6 col-md-4 col-lg-3 pf-graphics">
|
|
<div class="grid-inner">
|
|
<div class="portfolio-image">
|
|
<a href="portfolio-single.html">
|
|
<img src="images/portfolio/4/8.jpg" alt="Sunset Bulb Glow">
|
|
</a>
|
|
<div class="bg-overlay">
|
|
<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
|
|
<a href="images/portfolio/full/8.jpg" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item" data-lightbox="image" title="Image"><i class="icon-line-plus"></i></a>
|
|
<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350" data-hover-parent=".portfolio-item"><i class="icon-line-ellipsis"></i></a>
|
|
</div>
|
|
<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
|
|
</div>
|
|
</div>
|
|
<div class="portfolio-desc">
|
|
<h3><a href="portfolio-single.html">Sunset Bulb Glow</a></h3>
|
|
<span><a href="#">Graphics</a></span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
|
|
<a href="portfolio.html" class="button button-full button-dark center text-end bottommargin-lg">
|
|
<div class="container clearfix">
|
|
More than 100+ predefined Portfolio Grid Layouts. <strong>See More</strong> <i class="icon-caret-right" style="top:4px;"></i>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="container clearfix">
|
|
|
|
<div class="row align-items-center col-mb-50">
|
|
<div class="col-md-4 center">
|
|
<img data-animate="fadeInLeft" src="images/services/iphone6.png" alt="Iphone">
|
|
</div>
|
|
|
|
<div class="col-md-8 text-center text-md-start">
|
|
<div class="heading-block border-bottom-0">
|
|
<h3>Optimized for Mobile & Touch Enabled Devices.</h3>
|
|
</div>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quod consequuntur quibusdam, enim expedita sed quia nesciunt incidunt accusamus necessitatibus modi adipisci officia libero accusantium esse hic, obcaecati, ullam, laboriosam!</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti vero, animi suscipit id facere officia. Aspernatur, quo, quos nisi dolorum aperiam fugiat deserunt velit rerum laudantium cum magnam.</p>
|
|
|
|
<a href="#" class="button button-border button-dark button-rounded button-large ms-0 topmargin-sm">Learn more</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section parallax dark mb-0" style="background-image: url('images/services/home-testi-bg.jpg'); padding: 100px 0;" data-bottom-top="background-position:0px 300px;" data-top-bottom="background-position:0px -300px;">
|
|
|
|
<div class="heading-block center">
|
|
<h3>What Clients Say?</h3>
|
|
</div>
|
|
|
|
<div class="fslider testimonial testimonial-full" data-animation="fade" data-arrows="false">
|
|
<div class="flexslider">
|
|
<div class="slider-wrap">
|
|
<div class="slide">
|
|
<div class="testi-image">
|
|
<a href="#"><img src="images/testimonials/3.jpg" alt="Customer Testimonails"></a>
|
|
</div>
|
|
<div class="testi-content">
|
|
<p>Similique fugit repellendus expedita excepturi iure perferendis provident quia eaque. Repellendus, vero numquam?</p>
|
|
<div class="testi-meta">
|
|
Steve Jobs
|
|
<span>Apple Inc.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="slide">
|
|
<div class="testi-image">
|
|
<a href="#"><img src="images/testimonials/2.jpg" alt="Customer Testimonails"></a>
|
|
</div>
|
|
<div class="testi-content">
|
|
<p>Natus voluptatum enim quod necessitatibus quis expedita harum provident eos obcaecati id culpa corporis molestias.</p>
|
|
<div class="testi-meta">
|
|
Collis Ta'eed
|
|
<span>Envato Inc.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="slide">
|
|
<div class="testi-image">
|
|
<a href="#"><img src="images/testimonials/1.jpg" alt="Customer Testimonails"></a>
|
|
</div>
|
|
<div class="testi-content">
|
|
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum!</p>
|
|
<div class="testi-meta">
|
|
John Doe
|
|
<span>XYZ Inc.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="section mt-0 border-top-0">
|
|
<div class="container clearfix">
|
|
<div class="heading-block center m-0">
|
|
<h3>Latest from the Blog</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row posts-md col-mb-30">
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="entry">
|
|
<div class="entry-image">
|
|
<a href="#"><img src="images/magazine/thumb/1.jpg" alt="Image"></a>
|
|
</div>
|
|
<div class="entry-title title-xs nott">
|
|
<h3><a href="blog-single.html">Bloomberg smart cities; change-makers economic security</a></h3>
|
|
</div>
|
|
<div class="entry-meta">
|
|
<ul>
|
|
<li><i class="icon-calendar3"></i> 13th Jun 2021</li>
|
|
<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 53</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="entry-content">
|
|
<p>Prevention effect, advocate dialogue rural development lifting people up community civil society. Catalyst, grantees leverage.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="entry">
|
|
<div class="entry-image">
|
|
<a href="#"><img src="images/magazine/thumb/2.jpg" alt="Image"></a>
|
|
</div>
|
|
<div class="entry-title title-xs nott">
|
|
<h3><a href="blog-single.html">Medicine new approaches communities, outcomes partnership</a></h3>
|
|
</div>
|
|
<div class="entry-meta">
|
|
<ul>
|
|
<li><i class="icon-calendar3"></i> 24th Feb 2021</li>
|
|
<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 17</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="entry-content">
|
|
<p>Cross-agency coordination clean water rural, promising development turmoil inclusive education transformative community.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="entry">
|
|
<div class="entry-image">
|
|
<a href="#"><img src="images/magazine/thumb/3.jpg" alt="Image"></a>
|
|
</div>
|
|
<div class="entry-title title-xs nott">
|
|
<h3><a href="blog-single.html">Significant altruism planned giving insurmountable challenges liberal</a></h3>
|
|
</div>
|
|
<div class="entry-meta">
|
|
<ul>
|
|
<li><i class="icon-calendar3"></i> 30th Dec 2021</li>
|
|
<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 13</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="entry-content">
|
|
<p>Micro-finance; vaccines peaceful contribution citizens of change generosity. Measures design thinking accelerate progress medical initiative.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="entry">
|
|
<div class="entry-image">
|
|
<a href="#"><img src="images/magazine/thumb/4.jpg" alt="Image"></a>
|
|
</div>
|
|
<div class="entry-title title-xs nott">
|
|
<h3><a href="blog-single.html">Compassion conflict resolution, progressive; tackle</a></h3>
|
|
</div>
|
|
<div class="entry-meta">
|
|
<ul>
|
|
<li><i class="icon-calendar3"></i> 15th Jan 2021</li>
|
|
<li><a href="blog-single.html#comments"><i class="icon-comments"></i> 54</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="entry-content">
|
|
<p>Community health workers best practices, effectiveness meaningful work The Elders fairness. Our ambitions local solutions globalization.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="container clearfix">
|
|
|
|
<div class="heading-block topmargin-sm center">
|
|
<h3>Meet Our Team</h3>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-3 col-md-6 bottommargin">
|
|
|
|
<div class="team">
|
|
<div class="team-image">
|
|
<img src="images/team/3.jpg" alt="John Doe">
|
|
</div>
|
|
<div class="team-desc team-desc-bg">
|
|
<div class="team-title"><h4>John Doe</h4><span>CEO</span></div>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-facebook">
|
|
<i class="icon-facebook"></i>
|
|
<i class="icon-facebook"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-twitter">
|
|
<i class="icon-twitter"></i>
|
|
<i class="icon-twitter"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-gplus">
|
|
<i class="icon-gplus"></i>
|
|
<i class="icon-gplus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 bottommargin">
|
|
|
|
<div class="team">
|
|
<div class="team-image">
|
|
<img src="images/team/2.jpg" alt="Josh Clark">
|
|
</div>
|
|
<div class="team-desc team-desc-bg">
|
|
<div class="team-title"><h4>Josh Clark</h4><span>Co-Founder</span></div>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-facebook">
|
|
<i class="icon-facebook"></i>
|
|
<i class="icon-facebook"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-twitter">
|
|
<i class="icon-twitter"></i>
|
|
<i class="icon-twitter"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-gplus">
|
|
<i class="icon-gplus"></i>
|
|
<i class="icon-gplus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 bottommargin">
|
|
|
|
<div class="team">
|
|
<div class="team-image">
|
|
<img src="images/team/8.jpg" alt="Mary Jane">
|
|
</div>
|
|
<div class="team-desc team-desc-bg">
|
|
<div class="team-title"><h4>Mary Jane</h4><span>Sales</span></div>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-facebook">
|
|
<i class="icon-facebook"></i>
|
|
<i class="icon-facebook"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-twitter">
|
|
<i class="icon-twitter"></i>
|
|
<i class="icon-twitter"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-gplus">
|
|
<i class="icon-gplus"></i>
|
|
<i class="icon-gplus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 bottommargin">
|
|
|
|
<div class="team">
|
|
<div class="team-image">
|
|
<img src="images/team/4.jpg" alt="Nix Maxwell">
|
|
</div>
|
|
<div class="team-desc team-desc-bg">
|
|
<div class="team-title"><h4>Nix Maxwell</h4><span>Support</span></div>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-facebook">
|
|
<i class="icon-facebook"></i>
|
|
<i class="icon-facebook"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-twitter">
|
|
<i class="icon-twitter"></i>
|
|
<i class="icon-twitter"></i>
|
|
</a>
|
|
<a href="#" class="social-icon inline-block si-small si-light si-rounded si-gplus">
|
|
<i class="icon-gplus"></i>
|
|
<i class="icon-gplus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container clearfix">
|
|
|
|
<div id="oc-clients" class="owl-carousel image-carousel carousel-widget" data-margin="60" data-loop="true" data-nav="false" data-autoplay="5000" data-pagi="false" data-items-xs="2" data-items-sm="3" data-items-md="4" data-items-lg="5" data-items-xl="6">
|
|
|
|
<div class="oc-item"><a href="#"><img src="images/clients/1.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/2.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/3.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/4.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/5.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/6.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/7.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/8.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/9.png" alt="Clients"></a></div>
|
|
<div class="oc-item"><a href="#"><img src="images/clients/10.png" alt="Clients"></a></div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section><!-- #content end -->
|
|
|
|
<?php include 'includes/footer.php';?> |