We are a
full stack web agency

As well as being game-changers when it comes to theme innovation, HS has some of the bestselling themes in its locker.

<!-- Hero Section -->
<div class="container space-top-3 space-bottom-1 space-bottom-sm-2">
  <div class="w-lg-75">
    <h1 class="display-3 mb-5">
      We are a
      <span class="text-warning">
        <span class="js-text-animation"
          data-hs-typed-options='{
            strings: ["modern", "creative", "professional"],
            "typeSpeed": 70,
            "loop": true,
            "backSpeed": 40,
            "backDelay": 2500
          }'></span>
      </span>
      <br>
      full stack web agency
    </h1>
    <p class="lead">As well as being game-changers when it comes to theme innovation, HS has some of the bestselling themes in its locker.</p>
  </div>
</div>
<!-- End Hero Section -->

<!-- Video Section -->
<div class="container-fluid px-lg-5">
  <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll min-h-300rem min-h-lg-600rem" data-options='{direction: "normal"}'>
    <div class="dzsparallaxer--target" style="height: 120%;">
      <div class="js-video-bg position-absolute top-0 right-0 bottom-0 left-0 w-100 h-100"
           data-hs-video-bg-options='{
             "videoId": "../../assets/video/working-in-office"
           }'></div>
    </div>
  </div>
</div>
<!-- End Video Section -->
Copy
<link rel="stylesheet" href="./assets/vendor/dzsparallaxer/dzsparallaxer.css">
<link rel="stylesheet" href="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.css">
<link rel="stylesheet" href="./assets/vendor/aos/dist/aos.css">
Copy
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
<script src="./assets/vendor/hs-video-bg/dist/hs-video-bg.min.js"></script>
<script src="./assets/vendor/typed.js/lib/typed.min.js"></script>
<script src="./assets/vendor/aos/dist/aos.js"></script>

<!-- JS Front -->

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF VIDEO ON BACKGROUND
    // =======================================================
    $('.js-video-bg').each(function () {
      var videoBg = new HSVideoBg($(this)).init();
    });


    // INITIALIZATION OF TEXT ANIMATION (TYPING)
    // =======================================================
    var typed = new Typed(".js-text-animation", {
      strings: ["modern", "creative", "professional"],
      typeSpeed: 70,
      loop: true,
      backSpeed: 40,
      backDelay: 2000
    });


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