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>