Cards - Grid

<!-- Articles Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-60 text-center mx-md-auto mb-5 mb-md-9">
    <h2>Analytics solutions</h2>
  </div>
  <!-- End Title -->

  <div class="row">
    <div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
      <!-- Card -->
      <a class="card card-hover-shadow card-bg-light h-100 overflow-hidden transition-3d-hover" href="#">
        <div class="row align-items-center">
          <div class="col-8 col-md-6">
            <div class="py-4 pl-4">
              <h2 class="h4">Analytics you can trust</h2>
              <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
            </div>
          </div>
          <div class="col-4 col-md-6 h-100">
            <img class="position-absolute top-0 right-0 w-100 h-100" src="../../assets/svg/illustrations/apps.svg" alt="SVG">
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
      <!-- Card -->
      <a class="card card-hover-shadow card-bg-light h-100 overflow-hidden transition-3d-hover" href="#">
        <div class="row align-items-center">
          <div class="col-8 col-md-6">
            <div class="py-4 pl-4">
              <h2 class="h4">Scheduling made simple</h2>
              <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
            </div>
          </div>
          <div class="col-4 col-md-6 h-100">
            <img class="position-absolute top-0 right-0 w-100 h-100" src="../../assets/svg/illustrations/calendar.svg" alt="SVG">
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-md-6 col-lg-4">
      <!-- Card -->
      <a class="card card-hover-shadow card-bg-light h-100 overflow-hidden transition-3d-hover" href="#">
        <div class="row align-items-center">
          <div class="col-8 col-md-6">
            <div class="py-4 pl-4">
              <h2 class="h4">Listening made easy</h2>
              <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
            </div>
          </div>
          <div class="col-4 col-md-6 h-100">
            <img class="position-absolute top-0 right-0 w-100 h-100" src="../../assets/svg/illustrations/communication.svg" alt="SVG">
          </div>
        </div>
      </a>
      <!-- End Card -->
    </div>
  </div>
</div>
<!-- End Articles Section -->

<!-- FAQ Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-lg-6 mb-3 mb-lg-5">
      <a class="card card-frame h-100" href="#">
        <div class="card-body">
          <!-- Icon Block -->
          <div class="media d-block d-sm-flex">
            <figure class="w-100 max-w-8rem mb-2 mb-sm-0 mr-sm-4">
              <img class="img-fluid" src="../assets/svg/icons/icon-1.svg" alt="SVG">
            </figure>
            <div class="media-body">
              <h2 class="h3">Getting started</h2>
              <p class="font-size-1 text-body">Welcome to Front! We're so glad you're here. Let's get started!</p>

              <div class="media">
                <!-- Contributors List -->
                <div class="avatar-group mr-2">
                  <div class="avatar avatar-xs avatar-circle">
                    <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                  </div>
                  <div class="avatar avatar-xs avatar-circle">
                    <img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
                  </div>
                </div>
                <!-- End Contributors List -->

                <div class="media-body">
                  <!-- Article Authors -->
                  <small class="d-block text-dark">1 article in this collection</small>
                  <small class="d-block text-dark">
                    <span class="text-muted">Written by</span>
                    Luisa Woodfine
                    <span class="text-muted">and</span>
                    Neil Galavan
                  </small>
                  <!-- End Article Authors -->
                </div>
              </div>
            </div>
          </div>
          <!-- End Icon Block -->
        </div>
      </a>
    </div>

    <div class="col-lg-6 mb-3 mb-lg-5">
      <a class="card card-frame h-100" href="#">
        <div class="card-body">
          <!-- Icon Block -->
          <div class="media d-block d-sm-flex">
            <figure class="w-100 max-w-8rem mb-2 mb-sm-0 mr-sm-4">
              <img class="img-fluid" src="../assets/svg/icons/icon-46.svg" alt="SVG">
            </figure>
            <div class="media-body">
              <h3>Account</h3>
              <p class="font-size-1 text-body">Adjust your profile and preferences to make Front work just for you!</p>

              <div class="media">
                <!-- Contributors List -->
                <div class="avatar-group mr-2">
                  <div class="avatar avatar-xs avatar-circle">
                    <img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                  </div>
                  <div class="avatar avatar-xs avatar-circle">
                    <img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
                  </div>
                </div>
                <!-- End Contributors List -->

                <div class="media-body">
                  <!-- Article Authors -->
                  <small class="d-block text-dark">2 article in this collection</small>
                  <small class="d-block text-dark">
                    <span class="text-muted">Written by</span>
                    Fiona Burke, Luisa Woodfine
                    <span class="text-muted">and</span>
                    Neil Galavan
                  </small>
                  <!-- End Article Authors -->
                </div>
              </div>
            </div>
          </div>
          <!-- End Icon Block -->
        </div>
      </a>
    </div>
  </div>
</div>
<!-- End FAQ Section -->

<!-- Articles Section -->
<div class="container space-2">
  <div class="w-lg-80 mx-lg-auto">
    <div class="row">
      <div class="col-md-6 mb-3 mb-lg-0">
        <!-- Icon Block -->
        <a class="card h-100 transition-3d-hover" href="#">
          <div class="card-body">
            <div class="media">
              <figure class="w-100 max-w-6rem mr-3">
                <img class="img-fluid" src="../../assets/svg/icons/icon-15.svg" alt="SVG">
              </figure>
              <div class="media-body">
                <h3>Ask a question</h3>
                <p class="text-body">Email with support members to get your questions answered.</p>
              </div>
            </div>
          </div>
        </a>
        <!-- End Icon Block -->
      </div>

      <div class="col-md-6 mb-3 mb-lg-0">
        <!-- Icon Block -->
        <a class="card h-100 transition-3d-hover" href="#">
          <div class="card-body">
            <div class="media">
              <figure class="w-100 max-w-6rem mr-3">
                <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
              </figure>
              <div class="media-body">
                <h3>Read documentation</h3>
                <p class="text-body">Dig into the technical details of our products and consensus algorithm.</p>
              </div>
            </div>
          </div>
        </a>
        <!-- End Icon Block -->
      </div>
    </div>
  </div>
</div>
<!-- End Articles Section -->

<!-- Features Section -->
<div class="container space-2 text-center">
  <div class="mb-9">
    <h2 class="h1">What can you do with Front?</h2>
  </div>

  <div class="position-relative pt-5 pb-3 pt-md-11 pb-md-7">
    <div class="position-relative z-index-2 p-2 p-sm-0">
      <!-- News Carousel -->
      <div class="js-slick-carousel slick slick-equal-height slick-gutters-3 mb-5"
           data-hs-slick-carousel-options='{
             "slidesToShow": 3,
             "dots": true,
             "dotsClass": "slick-pagination slick-pagination-white d-lg-none mt-5",
             "responsive": [{
               "breakpoint": 1200,
                 "settings": {
                   "slidesToShow": 3
                 }
               }, {
               "breakpoint": 992,
               "settings": {
                 "slidesToShow": 2
                }
               }, {
               "breakpoint": 768,
               "settings": {
                 "slidesToShow": 2
                }
               }, {
               "breakpoint": 554,
               "settings": {
                 "slidesToShow": 1
               }
             }]
           }'>
        <!-- Card Block -->
        <div class="js-slide mt-1 mb-3">
          <div class="card flex-wrap flex-row">
            <div class="card-body py-6">
              <h3 class="mb-5">Channels</h3>
              <figure class="max-w-27rem w-100 mx-auto mb-4">
                <img class="img-fluid" src="../assets/svg/illustrations/server-woman.svg" alt="Image Description">
              </figure>
              <p>Communication in Front happens in channels, organized by project, topic, team, or whatever makes sense for you.</p>
            </div>
          </div>
        </div>
        <!-- End Card Block -->

        <!-- Card Block -->
        <div class="js-slide mt-1 mb-3">
          <div class="card flex-wrap flex-row">
            <div class="card-body py-6">
              <h3 class="mb-5">Integrations</h3>
              <figure class="max-w-27rem w-100 mx-auto mb-4">
                <img class="img-fluid" src="../assets/svg/illustrations/full-stack.svg" alt="Image Description">
              </figure>
              <p>Front works with the tools and services you already use every day. Pipe in information or take action without leaving Front.</p>
            </div>
          </div>
        </div>
        <!-- End Card Block -->

        <!-- Card Block -->
        <div class="js-slide mt-1 mb-3">
          <div class="card flex-wrap flex-row">
            <div class="card-body py-6">
              <h3 class="mb-5">Security</h3>
              <figure class="max-w-27rem w-100 mx-auto mb-4">
                <img class="img-fluid" src="../assets/svg/illustrations/business-woman.svg" alt="Image Description">
              </figure>
              <p>We take security seriously at Slack. We offer measures like 2FA and SSO to ensure the safety of your data and protect your organization.</p>
            </div>
          </div>
        </div>
        <!-- End Card Block -->
      </div>

      <!-- Info -->
      <p class="text-white">
        See Help Front in action.
        <a class="text-warning font-weight-bold" href="#">
          Get a Demo
          <span class="btn btn-xs btn-icon btn-light rounded-circle ml-2">
            <i class="fas fa-arrow-right"></i>
          </span>
        </a>
      </p>
      <!-- End Info -->
    </div>

    <!-- Background -->
    <div class="bg-navy position-absolute top-0 right-0 bottom-0 left-0 rounded-lg mx-sm-7" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);"></div>
  </div>
</div>
<!-- End Features Section -->

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
    });
  });
</script>

<!-- Articles Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-lg-6 mb-3 mb-lg-0">
      <!-- Card -->
      <article class="card h-100">
        <div class="w-sm-65 p-4">
          <h3>Explore the Snippets tools</h3>
          <div class="mb-4">
            <p>Start your business on various platforms with one click.</p>
          </div>
          <a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <i class="fas fa-angle-right ml-1"></i></a>
        </div>

        <div class="position-absolute bottom-0 right-0 w-sm-35 max-w-27rem">
          <img class="img-fluid" src="../../assets/svg/illustrations/support-man.svg" alt="Image Description">
        </div>
      </article>
      <!-- End Card -->
    </div>

    <div class="col-lg-6">
      <!-- Card -->
      <article class="card h-100">
        <div class="w-sm-65 p-4">
          <h3>Front gives every team the freedom to create</h3>
          <div class="mb-4">
            <p>Evaluate your options better and learn more about them.</p>
          </div>
          <a class="btn btn-sm btn-soft-primary btn-pill transition-3d-hover" href="#">Find out More <i class="fas fa-angle-right ml-1"></i></a>
        </div>

        <div class="position-absolute bottom-0 right-0 w-sm-35 max-w-27rem">
          <img class="img-fluid" src="../../assets/svg/illustrations/list-app.svg" alt="Image Description">
        </div>
      </article>
      <!-- End Card -->
    </div>
  </div>
</div>
<!-- End Articles Section -->

<!-- Features Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <h2 class="h1">Key benefits</h2>
    <p>Design faster with a growing array of beautiful templates.</p>
  </div>
  <!-- End Title -->

  <div class="row mx-n2">
    <div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
      <!-- Icon Blocks -->
      <a class="card h-100 transition-3d-hover" href="#">
        <div class="card-body">
          <figure class="w-100 max-w-8rem mb-4">
            <img class="img-fluid" src="../../assets/svg/icons/icon-9.svg" alt="SVG">
          </figure>
          <h4>Responsive</h4>
          <p class="font-size-1 text-body mb-0">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
        </div>
        <div class="card-footer border-0 pt-0">
          <span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
      <!-- Icon Blocks -->
      <a class="card h-100 transition-3d-hover" href="#">
        <div class="card-body">
          <figure class="w-100 max-w-8rem mb-4">
            <img class="img-fluid" src="../../assets/svg/icons/icon-3.svg" alt="SVG">
          </figure>
          <h4>Customizable</h4>
          <p class="font-size-1 text-body mb-0">Front template can be easily customized with its cutting-edge components and features.</p>
        </div>
        <div class="card-footer border-0 pt-0">
          <span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-lg-3 px-2 mb-3 mb-sm-0">
      <!-- Icon Blocks -->
      <a class="card h-100 transition-3d-hover" href="#">
        <div class="card-body">
          <figure class="w-100 max-w-8rem mb-4">
            <img class="img-fluid" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
          </figure>
          <h4>Premium <span class="badge badge-success badge-pill ml-1">sketch</span></h4>
          <p class="font-size-1 text-body mb-0">Front is not only for developers but also for designers, and includes a Sketch file.</p>
        </div>
        <div class="card-footer border-0 pt-0">
          <span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-sm-6 col-lg-3 px-2">
      <!-- Icon Blocks -->
      <a class="card h-100 transition-3d-hover" href="#">
        <div class="card-body">
          <figure class="w-100 max-w-8rem mb-4">
            <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
          </figure>
          <h4>Documentation</h4>
          <p class="font-size-1 text-body mb-0">Every component and plugin is well documented with live examples.</p>
        </div>
        <div class="card-footer border-0 pt-0">
          <span class="font-size-1">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Icon Blocks -->
    </div>
  </div>
</div>
<!-- End Features Section -->

<!-- Article Section -->
<div class="container space-2">
  <div class="row mx-n2">
    <div class="col-md-6 px-2 mb-3 mb-lg-0">
      <!-- Icon Block -->
      <a class="card card-frame h-100" href="#">
        <div class="card-body">
          <div class="media">
            <figure class="w-100 max-w-6rem mr-3">
              <img class="img-fluid" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
            </figure>
            <div class="media-body">
              <h3>Ask a question</h3>
              <p class="text-body">Chat live with community members to get your questions answered.</p>
            </div>
          </div>
        </div>
      </a>
      <!-- End Icon Block -->
    </div>

    <div class="col-md-6 px-2 mb-3 mb-lg-0">
      <!-- Icon Block -->
      <a class="card card-frame h-100" href="#">
        <div class="card-body">
          <div class="media">
            <figure class="w-100 max-w-6rem mr-3">
              <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
            </figure>
            <div class="media-body">
              <h3>Read documentation</h3>
              <p class="text-body">Dig into the technical details of our products and consensus algorithm.</p>
            </div>
          </div>
        </div>
      </a>
      <!-- End Icon Block -->
    </div>
  </div>
</div>
<!-- End Article Section -->

<!-- Cards Section -->
<div class="container space-2">
  <div class="row mx-n2">
    <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
      <!-- Card -->
      <a class="card card-frame h-100" href="#">
        <img class="card-img-top" src="../../assets/img/480x220/img1.jpg" alt="Image Description">
        <div class="card-body">
          <div class="d-flex align-items-center mb-1">
            <span class="d-block text-dark font-weight-bold">Aircall</span>
            <img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
          </div>
          <span class="d-block text-body font-size-1">Deliver call activity and voicemails straight to your inbox</span>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
      <!-- Card -->
      <a class="card card-frame h-100" href="#">
        <img class="card-img-top" src="../../assets/img/480x220/img2.jpg" alt="Image Description">
        <div class="card-body">
          <div class="d-flex align-items-center mb-1">
            <span class="d-block text-dark font-weight-bold">Google</span>
            <img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
          </div>
          <span class="d-block text-body font-size-1">Multinational technology company that specializes in Internet-related services</span>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-sm-6 col-md-4 px-2">
      <!-- Card -->
      <a class="card card-frame h-100" href="#">
        <img class="card-img-top" src="../../assets/img/480x220/img3.jpg" alt="Image Description">
        <div class="card-body">
          <div class="d-flex align-items-center mb-1">
            <span class="d-block text-dark font-weight-bold">Slack</span>
            <img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
          </div>
          <span class="d-block text-body font-size-1">Email collaboration and email service desk made easy</span>
        </div>
      </a>
      <!-- End Card -->
    </div>
  </div>
</div>
<!-- End Cards Section -->

<!-- Cards Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">Featured</h3>
    <a class="font-size-1 font-weight-bold" href="#">View All <i class='fas fa-angle-right fa-sm ml-1'></i></a>
  </div>
  <!-- End Title -->

  <div class="row mx-n2">
    <!-- Card -->
    <div class="col-sm-6 col-md-4 px-2 mb-3">
      <div class="card card-frame h-100">
        <a class="card-body" href="#">
          <div class="media">
            <div class="avatar avatar-xs mt-1 mr-3">
              <img class="avatar-img" src="../../assets/img/160x160/img5.jpg" alt="Image Description">
            </div>
            <div class="media-body">
              <div class="d-flex align-items-center">
                <span class="d-block text-dark font-weight-bold">Spotify</span>
                <img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
              </div>
              <small class="d-block text-body">Entertainment</small>
            </div>
          </div>
        </a>
      </div>
    </div>
    <!-- End Card -->

    <!-- Card -->
    <div class="col-sm-6 col-md-4 px-2 mb-3">
      <div class="card card-frame h-100">
        <a class="card-body" href="#">
          <div class="media">
            <div class="avatar avatar-xs mt-1 mr-3">
              <img class="avatar-img" src="../../assets/img/160x160/img3.jpg" alt="Image Description">
            </div>
            <div class="media-body">
              <div class="d-flex align-items-center">
                <span class="d-block text-dark font-weight-bold">Slack</span>
              </div>
              <small class="d-block text-body">Communication</small>
            </div>
          </div>
        </a>
      </div>
    </div>
    <!-- End Card -->

    <!-- Card -->
    <div class="col-sm-6 col-md-4 px-2 mb-3">
      <div class="card card-frame h-100">
        <a class="card-body" href="app-description.html">
          <div class="media">
            <div class="avatar avatar-xs mt-1 mr-3">
              <img class="avatar-img" src="../../assets/img/160x160/img23.png" alt="Image Description">
            </div>
            <div class="media-body">
              <div class="d-flex align-items-center">
                <span class="d-block text-dark font-weight-bold">Google Drive</span>
                <img class="ml-2" src="../../assets/svg/illustrations/top-vendor.svg" alt="Image Description" title="Top Vendor" width="16">
              </div>
              <small class="d-block text-body">File management</small>
            </div>
          </div>
        </a>
      </div>
    </div>
    <!-- End Card -->
  </div>
</div>
<!-- End Cards Section -->

<!-- Articles Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <h2>Learn to develop sites with components and design systems</h2>
  </div>
  <!-- End Title -->

  <div class="row mx-n2 mx-lg-n3">
    <div class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
      <!-- Card -->
      <a class="card bg-primary text-left h-100 transition-3d-hover" href="#">
        <div class="card-body">
          <div class="mb-5">
            <h3 class="text-white">Documentation</h3>
            <p class="text-white">Discover how to build and maintain coding systems using our documentation.</p>
          </div>
          <img class="img-fluid w-100" src="../../assets/svg/illustrations/docs-frame.svg" alt="Image Description">
        </div>
        <div class="card-footer border-0 bg-transparent pt-0">
          <span class="font-size-1 text-white font-weight-bold">Learn more <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
      <!-- Card -->
      <a class="card bg-navy text-left h-100 transition-3d-hover" href="javascript:;">
        <div class="card-body">
          <div class="mb-5">
            <h3 class="text-white">Snippets</h3>
            <p class="text-white">Start browsing our snippets pages with copy-to-clipboard snippets to match Bootstrap's level of quality.</p>
          </div>
          <img class="img-fluid w-100" src="../../assets/svg/illustrations/snippets-frame.svg" alt="Image Description">
        </div>
        <div class="card-footer border-0 bg-transparent pt-0">
          <span class="font-size-1 text-white font-weight-bold">Start building <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-sm-6 col-lg-4 px-2 px-lg-3">
      <!-- Card -->
      <a class="card bg-warning text-left h-100 transition-3d-hover" href="javascript:;">
        <div class="card-body">
          <div class="mb-5">
            <h3 class="text-white">Layout options</h3>
            <p class="text-white">Apart from 70+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.</p>
          </div>
          <img class="img-fluid w-100" src="../../assets/svg/illustrations/layouts-frame.svg" alt="Image Description">
        </div>
        <div class="card-footer border-0 bg-transparent pt-0">
          <span class="font-size-1 text-white font-weight-bold">View examples <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>
  </div>
</div>
<!-- End Articles Section -->

<!-- Services Section -->
<div class="container">
  <div class="row">
    <div class="col-lg-6 mb-3 mb-lg-0">
      <!-- Card -->
      <div class="card bg-primary text-white h-100 overflow-hidden p-5">
        <div class="w-65 pr-2">
          <h2 class="text-white">Front process</h2>
          <p class="text-white">Once you are invited to Front Agency, you company will be set within days.</p>
          <a class="btn btn-sm btn-light transition-3d-hover" href="#">Find Out More <i class="fas fa-angle-right ml-1"></i></a>
        </div>
        <div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
          <img class="img-fluid" src="../../assets/img/mockups/img15.png" alt="Image Description">
        </div>
      </div>
      <!-- End Card -->
    </div>

    <div class="col-lg-6">
      <!-- Card -->
      <div class="card bg-warning text-white h-100 overflow-hidden p-5">
        <div class="w-65 pr-2">
          <h2 class="text-white">Product design</h2>
          <p class="text-white">Easy and fast adjustments of elements are possible with Front template.</p>
          <a class="btn btn-sm btn-light transition-3d-hover" href="#">Find Out More <i class="fas fa-angle-right ml-1"></i></a>
        </div>
        <div class="position-absolute right-0 bottom-0 w-50 mb-n3 mr-n4">
          <img class="img-fluid" src="../../assets/img/mockups/img12.png" alt="Image Description">
        </div>
      </div>
      <!-- End Card -->
    </div>
  </div>
</div>
<!-- End Services Section -->

<!-- Articles Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <span class="d-block small font-weight-bold text-cap mb-2">Platforms</span>
    <h2 class="h1">Three platforms – handled by one tool</h2>
  </div>
  <!-- End Title -->

  <div class="row">
    <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
      <!-- Card -->
      <a class="card shadow-soft h-100 text-center transition-3d-hover" href="#">
        <div class="card-body pt-7 px-7">
          <figure class="avatar mx-auto mb-4">
            <img class="avatar-img" src="../../assets/img/160x160/img20.png" alt="Logo">
          </figure>
          <h3>Facebook Ads</h3>
          <p class="text-body">Automated rules, Auto Post Boosting, Bulk Creation and reports in Slack.</p>
        </div>
        <div class="card-footer border-0 pt-0 pb-7 px-7">
          <span class="font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-md-6 col-lg-4 mb-4 mb-md-5 mb-lg-0">
      <!-- Card -->
      <a class="card shadow-soft h-100 text-center transition-3d-hover" href="#">
        <div class="card-body pt-7 px-7">
          <figure class="avatar mx-auto mb-4">
            <img class="avatar-img" src="../../assets/img/160x160/img35.png" alt="Logo">
          </figure>
          <h3>Google Ads</h3>
          <p class="text-body">The best scripts alternative and quick reports for the whole team.</p>
        </div>
        <div class="card-footer border-0 pt-0 pb-7 px-7">
          <span class="font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>

    <div class="col-md-6 col-lg-4">
      <!-- Card -->
      <a class="card shadow-soft h-100 text-center transition-3d-hover" href="#">
        <div class="card-body pt-7 px-7">
          <figure class="avatar mx-auto mb-4">
            <img class="avatar-img" src="../../assets/img/160x160/img36.png" alt="Logo">
          </figure>
          <h3>Snapchat Ads</h3>
          <p class="text-body">Scale profitable snaps and optimize your cost per swipe by using automated rules.</p>
        </div>
        <div class="card-footer border-0 pt-0 pb-7 px-7">
          <span class="font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
      <!-- End Card -->
    </div>
  </div>
</div>
<!-- End Articles Section -->

<!-- Articles Section -->
<div class="container space-2">
  <div class="row">
    <!-- Article -->
    <article class="col-lg-6 mb-3 mb-sm-5 mb-lg-0">
      <a class="card align-items-end flex-wrap flex-row bg-img-hero text-white h-100 min-h-380rem transition-3d-hover" href="#" style="background-image: url(../../assets/svg/components/graphics-6.svg);">
        <div class="card-body">
          <h2 class="text-white">Revolutionizing the way start-ups win new customers</h2>
          <p>Automate best strategies and focus more on generating hq creatives.</p>
          <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
    </article>
    <!-- End Article -->

    <!-- Article -->
    <article class="col-sm-6 col-lg-3 mb-3 mb-sm-0">
      <a class="card align-items-end flex-wrap flex-row bg-img-hero text-white h-100 min-h-380rem transition-3d-hover" href="#" style="background-image: url(../../assets/svg/components/graphics-7.svg);">
        <div class="card-body">
          <h3 class="text-white">How we helped building the industry of the future</h3>
          <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
    </article>
    <!-- End Article -->

    <!-- Article -->
    <article class="col-sm-6 col-lg-3">
      <a class="card align-items-end flex-wrap flex-row bg-img-hero text-white h-100 min-h-380rem transition-3d-hover" href="#" style="background-image: url(../../assets/svg/components/graphics-4.svg);">
        <div class="card-body">
          <h3 class="text-white">How to save hundreds of thousands</h3>
          <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
        </div>
      </a>
    </article>
    <!-- End Article -->
  </div>
</div>
<!-- End Articles Section -->

<!-- Related Courses -->
<div class="container space-2">
  <div class="row mx-n2 mx-lg-n3">
    <!-- Article -->
    <article class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
      <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img13.jpg);">
        <div class="card-body">
          <small class="d-block small text-white-70 font-weight-bold text-cap mb-2">Phython</small>
          <h3 class="text-white">What's new in Phython 3.7.2</h3>
        </div>
        <div class="card-footer border-0 bg-transparent pt-0">
          <span class="text-white font-size-1 font-weight-bold">Read now</span>
        </div>
      </a>
    </article>
    <!-- End Article -->

    <!-- Article -->
    <article class="col-sm-6 col-lg-4 px-2 px-lg-3 mb-3 mb-lg-0">
      <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img15.jpg);">
        <div class="card-body">
          <small class="d-block small text-white-70 font-weight-bold text-cap mb-2">Tooling</small>
          <h3 class="text-white">Build a staging server</h3>
        </div>
        <div class="card-footer border-0 bg-transparent pt-0">
          <span class="text-white font-size-1 font-weight-bold">Read now</span>
        </div>
      </a>
    </article>
    <!-- End Article -->

    <!-- Article -->
    <article class="col-md-6 col-lg-4 px-2 px-lg-3">
      <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img17.jpg);">
        <div class="card-body">
          <small class="d-block small text-white-70 font-weight-bold text-cap mb-2">Popular</small>
          <h3 class="text-white">Artificial Intelligence</h3>
        </div>
        <div class="card-footer border-0 bg-transparent pt-0">
          <span class="text-white font-size-1 font-weight-bold">Read now</span>
        </div>
      </a>
    </article>
    <!-- End Article -->
  </div>
</div>
<!-- End Related Courses -->

<!-- Popular Categories Section -->
<div class="space-2" style="background: url(../../assets/svg/components/abstract-shapes-9.svg) center no-repeat;">
  <div class="position-relative">
    <div class="container space-2">
      <!-- Title -->
      <div class="row align-items-md-center mb-7">
        <div class="col-md-6 mb-4 mb-md-0">
          <h2>Check out our newest and most popular programs</h2>
        </div>
        <div class="col-md-6 text-md-right">
          <a class="font-weight-bold" href="#">See all Programs <i class="fa fa-angle-right fa-sm ml-1"></i></a>
        </div>
      </div>
      <!-- End Title -->

      <div class="js-slick-carousel slick slick-equal-height slick-gutters-3 slick-center-mode-right slick-center-mode-right-offset"
           data-hs-slick-carousel-options='{
             "prevArrow": "<span class=\"fa fa-arrow-left slick-arrow slick-arrow-primary-white slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-sm-n2\"></span>",
             "nextArrow": "<span class=\"fa fa-arrow-right slick-arrow slick-arrow-primary-white slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-sm-2 mr-xl-4\"></span>",
             "slidesToShow": 5,
             "infinite": true,
             "responsive": [{
               "breakpoint": 1200,
                 "settings": {
                   "slidesToShow": 4
                 }
               }, {
               "breakpoint": 992,
                 "settings": {
                   "slidesToShow": 3
                 }
               }, {
               "breakpoint": 768,
               "settings": {
                 "slidesToShow": 2
               }
               }, {
               "breakpoint": 554,
               "settings": {
                 "slidesToShow": 1
               }
             }]
           }'>
        <!-- Article -->
        <article class="js-slide pt-2">
          <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img14.jpg);">
            <div class="card-body">
              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">New</span>
              <h3 class="text-white">Cloud computing</h3>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
              <span class="text-white font-size-1 font-weight-bold">Read now</span>
            </div>
          </a>
        </article>
        <!-- End Article -->

        <!-- Article -->
        <article class="js-slide pt-2">
          <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img13.jpg);">
            <div class="card-body">
              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Phython</span>
              <h3 class="text-white">What's new in Phython 3.7.2</h3>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
              <span class="text-white font-size-1 font-weight-bold">Read now</span>
            </div>
          </a>
        </article>
        <!-- End Article -->

        <!-- Article -->
        <article class="js-slide pt-2">
          <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img15.jpg);">
            <div class="card-body">
              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Tooling</span>
              <h3 class="text-white">Build a staging server</h3>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
              <span class="text-white font-size-1 font-weight-bold">Read now</span>
            </div>
          </a>
        </article>
        <!-- End Article -->

        <!-- Article -->
        <article class="js-slide pt-2">
          <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img16.jpg);">
            <div class="card-body">
              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">JavaScript</span>
              <h3 class="text-white">Laravel, Vue and SPAs</h3>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
              <span class="text-white font-size-1 font-weight-bold">Read now</span>
            </div>
          </a>
        </article>
        <!-- End Article -->

        <!-- Article -->
        <article class="js-slide pt-2">
          <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img17.jpg);">
            <div class="card-body">
              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Popular</span>
              <h3 class="text-white">Artificial Intelligence</h3>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
              <span class="text-white font-size-1 font-weight-bold">Read now</span>
            </div>
          </a>
        </article>
        <!-- End Article -->

        <!-- Article -->
        <article class="js-slide pt-2">
          <a class="card bg-img-hero w-100 min-h-270rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img18.jpg);">
            <div class="card-body">
              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">PHP</span>
              <h3 class="text-white">Programming terms explained</h3>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
              <span class="text-white font-size-1 font-weight-bold">Read now</span>
            </div>
          </a>
        </article>
        <!-- End Article -->
      </div>
    </div>

    <div class="w-100 w-md-65 bg-light position-absolute top-0 right-0 bottom-0 rounded-left z-index-n1"></div>
  </div>
</div>
<!-- End Popular Categories Section -->

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  // initialization of slick carousel
  $('.js-slick-carousel').each(function() {
    var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
  });
</script>