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"></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>
<!-- JS Front -->
<script src="../../assets/js/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of fancybox
$('.js-fancybox').each(function () {
var fancybox = $.HSCore.components.HSFancyBox.init($(this));
});
});
</script>