Digital agency to watch in 2018
Front makes you look at things from a different perspectives.
HTML:
<!-- Hero Section -->
<div class="u-space-3-top u-space-0--lg position-relative">
<div class="d-lg-flex align-items-lg-center min-height-100vh--lg position-relative">
<div class="container u-space-2 u-space-bottom-0--lg">
<!-- Blog -->
<div class="w-lg-50">
<!-- Author -->
<div class="media align-items-center mb-4">
<div class="d-flex mr-3">
<img class="img-fluid u-sm-avatar 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-48--md-down font-weight-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 u-btn-primary u-btn-wide transition-3d-hover" href="../blog/single-article-classic.html">
Read More
<span class="fa fa-angle-right ml-2"></span>
</a>
</div>
<!-- End Blog -->
</div>
<!-- SVG Shapes v4 -->
<figure class="w-75 position-absolute-bottom-left-0 z-index-minus-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1250 323" style="enable-background:new 0 0 1250 323;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E4EBF9;}
.st1{fill:#EBF2FF;}
</style>
<path class="u-fill-primary" opacity=".05" d="M1250,322.8c0,0-50.4-39.9-123.7-54.3c-90.3-17.7-210.9-70.1-210.9-70.1S806,129.1,596.6,164
c-68.1,11.3-140,7.5-200.6-11.9c-42.2-13.5-77.1-32.8-103.7-53.9c-15.2-12.1-31.2-24-50.7-34.4c-20.6-11.1-43.2-21.3-67.5-30.3
C123.6,14.8,63.9,1.3,0.3,0l0,322.8H1250z"/>
<path class="u-fill-primary" opacity=".05" d="M0,73.2c0,0,154.1-11.9,305.5,59.2s421.4,27.9,421.4,27.9s236.3-54.7,388.7,82.6c0,0,59.4,42.6,87.4,80.1H0L0,73.2z"/>
</svg>
</figure>
<!-- End SVG Shapes v4 -->
<!-- Sidebar -->
<div class="col-lg-4 u-bg-img-hero min-height-100vh--lg position-absolute-top-right-0--lg px-lg-0 u-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="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
</div>
<!-- End Fancybox -->
<!-- Testimonials -->
<div class="position-absolute-bottom-0--lg 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 mb-1">
<!-- Avatar -->
<div class="media align-items-center bg-white rounded-top-left-pill rounded-right-pill py-3 px-4 mb-1">
<div class="d-flex mr-3">
<img class="img-fluid u-avatar 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>
<!-- End Avatar -->
<!-- Testimonials Content -->
<div class="bg-primary text-white rounded-bottom-left-pill rounded-right-pill p-4">
<div class="media">
<div class="d-flex mr-3">
<!-- SVG Quote -->
<figure style="width: 25px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="u-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>
<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>
<!-- End Testimonials Content -->
</div>
<div class="js-slide mb-1">
<!-- Avatar -->
<div class="media align-items-center bg-white rounded-top-left-pill rounded-right-pill py-3 px-4 mb-1">
<div class="d-flex mr-3">
<img class="img-fluid u-avatar 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>
<!-- End Avatar -->
<!-- Testimonials Content -->
<div class="bg-primary text-white rounded-bottom-left-pill rounded-right-pill p-4">
<div class="media">
<div class="d-flex mr-3">
<!-- SVG Quote -->
<figure style="width: 25px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="u-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>
<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>
<!-- End Testimonials Content -->
</div>
</div>
</div>
<!-- End Testimonials -->
</div>
<!-- End Sidebar -->
</div>
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="../assets/vendor/slick-carousel/slick/slick.css">
<link rel="stylesheet" href="assets/vendor/fancybox/jquery.fancybox.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/slick-carousel/slick/slick.js"></script>
<script src="assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../assets/js/components/hs.slick-carousel.js"></script>
<script src="assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
// initialization of popups
$.HSCore.components.HSPopup.init('.js-fancybox');
});
</script>