Empowering teams with the freedom

Own the unlimited power of the web development.

Play Video Learn More
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description 
<!-- Hero Section -->
<div class="position-relative bg-img-hero" style="background-image: url(../../assets/svg/components/abstract-shapes-12.svg);">
  <div class="container space-top-3 space-top-lg-4 space-bottom-2 space-bottom-lg-3 position-relative z-index-2">
    <div class="row justify-content-lg-between align-items-md-center">
      <div class="col-md-6 col-lg-5 mb-11 mb-md-0">
        <div class="mb-5">
          <h1 class="display-4">Empowering teams with the freedom</h1>
          <p class="lead">Own the unlimited power of the web development.</p>
        </div>

        <!-- Fancybox -->
        <a class="js-fancybox btn btn-primary btn-pill transition-3d-hover" href="javascript:;"
           data-hs-fancybox-options='{
             "src": "//youtube.com/0qisGSwZym4",
             "caption": "Front - Responsive Website Template",
             "speed": 700,
             "buttons": ["fullScreen", "close"],
             "youtube": {
               "autoplay": 1
             }
           }'>
          <i class="fas fa-play-circle mr-1"></i>
          Play Video
        </a>
        <!-- End Fancybox -->

        <a class="btn btn-link" href="#">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
      </div>

      <div class="col-md-6">
        <div class="row justify-content-end">
          <div class="col-3 mb-4">
            <!-- Logo -->
            <div class="d-block bg-white avatar avatar-lg shadow-sm rounded-circle p-3 mt-n3 ml-5" data-aos="fade-up">
              <img class="avatar-img" src="../../assets/img/160x160/img17.png" alt="Image Description">
            </div>
            <!-- End Logo -->
          </div>
          <div class="col-4 mb-4">
            <!-- Logo -->
            <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 mx-auto mt-5" data-aos="fade-up" data-aos-delay="50">
              <img class="avatar-img" src="../../assets/img/160x160/img12.png" alt="Image Description">
            </div>
            <!-- End Logo -->
          </div>
          <div class="col-4 mb-4">
            <!-- Logo -->
            <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto" data-aos="fade-up" data-aos-delay="150">
              <img class="avatar-img" src="../../assets/img/160x160/img13.png" alt="Image Description">
            </div>
            <!-- End Logo -->
          </div>
        </div>

        <div class="row">
          <div class="col-3 offset-1 my-4">
            <!-- Logo -->
            <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto" data-aos="fade-up" data-aos-delay="200">
              <img class="avatar-img" src="../../assets/img/160x160/img8.jpg" alt="Image Description">
            </div>
            <!-- End Logo -->
          </div>
          <div class="col-3 offset-2 my-4">
            <!-- Logo -->
            <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto" data-aos="fade-up" data-aos-delay="250">
              <img class="avatar-img" src="../../assets/img/160x160/img29.png" alt="Image Description">
            </div>
            <!-- End Logo -->
          </div>
        </div>

        <div class="row d-none d-md-flex">
          <div class="col-6">
            <!-- Logo -->
            <div class="d-block bg-white avatar avatar-lg shadow-sm rounded-circle p-3 ml-auto" data-aos="fade-up" data-aos-delay="300">
              <img class="avatar-img" src="../../assets/img/160x160/img35.png" alt="Image Description">
            </div>
            <!-- End Logo -->
          </div>
          <div class="col-6 mt-6">
            <!-- Logo -->
            <div class="d-block bg-white avatar avatar-xl shadow-sm rounded-circle p-4 ml-auto" data-aos="fade-up" data-aos-delay="350">
              <img class="avatar-img" src="../../assets/img/160x160/img24.png" alt="Image Description">
            </div>
            <!-- End Logo -->
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- SVG Shape -->
  <figure class="position-absolute bottom-0 right-0 left-0">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
      <polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
    </svg>
  </figure>
  <!-- End SVG Shape -->
</div>
<!-- End Hero Section -->
Copy
<link rel="stylesheet" href="./assets/vendor/fancybox/dist/jquery.fancybox.min.css">
<link rel="stylesheet" href="./assets/vendor/aos/dist/aos.css">
Copy
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/aos/dist/aos.js"></script>
<script src="./assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>

<!-- JS Front -->

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF FANCYBOX
    // =======================================================
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
    });


    // INITIALIZATION OF AOS
    // =======================================================
    AOS.init({
      duration: 650,
      once: true
    });
  });
</script>
Copy