Digital agency to watch in 2018

Front makes you look at things from a different perspectives.

Read More
Image Description
<!-- 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">
            <!-- 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">
            <!-- 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.HSPopup.init('.js-fancybox');

    // initialization of slick carousel
    $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
  });
</script>