Image Description

Unlock your

With our platform, you can quantify your skills, grow in your role and stay relevant on critical topics.

              
                <!-- Hero Section -->
                <div class="container space-2">
                  <div class="row justify-content-lg-between align-items-lg-center">
                    <div class="col-sm-10 col-lg-5 mb-7 mb-lg-0">
                      <img class="img-fluid" src="../../assets/svg/illustrations/reading.svg" alt="Image Description">
                    </div>

                    <div class="col-md-6">
                      <div class="mb-5">
                        <h1 class="display-4 mb-3">
                          Unlock your
                          <br>
                          <span class="text-primary font-weight-bold">
                            <span class="js-text-animation"
                              data-hs-typed-options='{
                                strings: ["ideal", "fastest", "convenient"],
                                "typeSpeed": 60,
                                "loop": true,
                                "backSpeed": 25,
                                "backDelay": 1500
                              }'></span>
                          </span>
                        </h1>
                        <p class="lead">With our platform, you can quantify your skills, grow in your role and stay relevant on critical topics.</p>
                      </div>

                      <div class="d-sm-flex align-items-sm-center flex-sm-wrap">
                        <a class="btn btn-primary transition-3d-hover mb-2" href="#">Start a Free Trial</a>

                        <div class="mx-2"></div>

                        <!-- Fancybox -->
                        <a class="js-fancybox video-player video-player-btn media align-items-center text-dark mb-2" href="javascript:;"
                           data-hs-fancybox-options='{
                             "src": "//youtube.com/0qisGSwZym4",
                             "caption": "Front - Responsive Website Template",
                             "speed": 700,
                             "buttons": ["fullScreen", "close"],
                             "youtube": {
                               "autoplay": 1
                             }
                           }'>
                          <span class="video-player-icon shadow-soft mr-3">
                            <i class="fa fa-play"></i>
                          </span>
                          <span class="media-body">
                            How it works
                          </span>
                        </a>
                        <!-- End Fancybox -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Hero Section -->
              
            
              
                <link rel="stylesheet" href="./assets/vendor/fancybox/dist/jquery.fancybox.min.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
                <script src="./assets/vendor/typed.js/lib/typed.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 TEXT ANIMATION (TYPING)
                    // =======================================================
                    var typed = $.HSCore.components.HSTyped.init(".js-text-animation");
                  });
                </script>