Digital agency to watch in 2018
Front makes you look at things from a different perspectives.
<!-- Hero Section -->
<div class="d-lg-flex position-relative">
<div id="SVGwaveBottom3Shape" class="svg-preloader container d-lg-flex align-items-lg-center height-lg-100vh space-2 space-top-md-4 space-lg-0 mt-lg-5">
<!-- Blog -->
<div class="w-lg-50">
<!-- Author -->
<div class="media align-items-center mb-4">
<div class="u-sm-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="d-inline-block mb-0">
<a class="d-block h6 mb-0" href="../blog/single-article-classic.html">Andrea Gard</a>
</h4>
</div>
</div>
<!-- End Author -->
<!-- Info -->
<div class="mb-4">
<h1 class="text-primary display-4 font-size-md-down-5 font-weight-semi-bold">Digital agency to watch in 2018</h1>
<p class="lead">Front makes you look at things from a different perspectives.</p>
</div>
<!-- End Info -->
<a class="btn btn-primary btn-wide transition-3d-hover" href="../blog/single-article-classic.html">
Read More
<span class="fas fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Blog -->
<!-- SVG Shapes v4 -->
<figure class="d-none d-lg-block w-75 position-absolute bottom-0 left-0 z-index-n1">
<img class="js-svg-injector" src="../../assets/svg/components/wave-3-bottom.svg" alt="Image Description"
data-parent="#SVGwaveBottom3Shape">
</figure>
<!-- End SVG Shapes v4 -->
<!-- Sidebar -->
<div class="col-lg-4 bg-img-hero min-height-lg-100vh position-lg-absolute top-lg-0 right-lg-0 px-lg-0 space-2" style="background-image: url(../../assets/img/500x900/img1.jpg);">
<!-- Fancybox -->
<div class="text-center text-lg-left mb-3 mb-lg-0">
<a class="js-fancybox u-media-player u-media-player--left-minus-50x-top-50x-lg mb-4" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="u-media-player__icon u-media-player__icon--lg u-media-player__icon--box-shadow">
<span class="fas fa-play u-media-player__icon-inner"></span>
</span>
</a>
</div>
<!-- End Fancybox -->
<!-- Testimonials -->
<div class="position-lg-absolute right-lg-0 bottom-lg-0 left-lg-0 w-80 w-lg-100 mx-auto p-md-7">
<div class="js-slick-carousel u-slick"
data-adaptive-height="true"
data-autoplay="true"
data-speed="5000"
data-vertical="true"
data-vertical-swiping="true">
<div class="js-slide py-1">
<!-- Avatar -->
<div class="card border-0 rounded-top-left-pill rounded-right-pill mb-1">
<div class="card-body py-3 px-4">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
</div>
<div class="media-body">
<h2 class="h6 mb-0">James Austin</h2>
<p class="small mb-0">Slack Inc.</p>
</div>
</div>
</div>
</div>
<!-- End Avatar -->
<!-- Testimonials Content -->
<div class="card border-0 bg-primary text-white rounded-bottom-left-pill rounded-right-pill">
<div class="card-body p-4">
<div class="media">
<!-- SVG Quote -->
<figure class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-warning" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<div class="media-body">
<blockquote class="mb-0">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
</div>
</div>
</div>
</div>
<!-- End Testimonials Content -->
</div>
<div class="js-slide py-1">
<!-- Avatar -->
<div class="card border-0 rounded-top-left-pill rounded-right-pill mb-1">
<div class="card-body py-3 px-4">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h2 class="h6 mb-0">Charlotte Moore</h2>
<p class="small mb-0">Google Inc.</p>
</div>
</div>
</div>
</div>
<!-- End Avatar -->
<!-- Testimonials Content -->
<div class="card border-0 bg-primary text-white rounded-bottom-left-pill rounded-right-pill">
<div class="card-body p-4">
<div class="media">
<!-- SVG Quote -->
<figure class="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-warning" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<div class="media-body">
<blockquote class="mb-0">If you can design one thing you can design everything. Just believe it.</blockquote>
</div>
</div>
</div>
</div>
<!-- End Testimonials Content -->
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
<!-- End Sidebar -->
</div>
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSFancyBox.init('.js-fancybox');
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>