A digital UI kit with a robust design and components
Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution
Compatible with Sketch and Adobe XD
<!-- Hero Section -->
<div class="position-relative">
<div class="container space-top-2 space-top-md-5 space-top-lg-4 space-bottom-lg-3">
<div class="row">
<!-- Info -->
<div class="col-lg-5">
<div class="mb-5">
<h1 class="font-size-md-down-3 font-weight-semi-bold">A digital UI kit with a robust design and components</h1>
<p>Super clean, minimalistic, stylized mockup collection with awesome customization features and huge resolution</p>
</div>
<div class="media align-items-center max-width-35 mb-5">
<div class="mr-3">
<img class="img-fluid mr-2" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="32">
<img class="img-fluid" src="../../assets/svg/components/adobe-xd.svg" alt="Adobe Xd" width="32">
</div>
<div class="media-body">
<p class="small mb-0">Compatible with Sketch and Adobe XD</p>
</div>
</div>
<div class="d-flex align-items-center mb-8">
<a class="btn btn-primary btn-wide transition-3d-hover" href="../pages/login-simple.html">Get Started</a>
<!-- Fancybox -->
<a class="js-fancybox media align-items-center min-width-15 ml-3 ml-lg-5" href="javascript:;"
data-src="//vimeo.com/167434033"
data-speed="700"
data-animate-in="zoomIn"
data-animate-out="zoomOut"
data-caption="Front - Responsive Website Template">
<span class="far fa-play-circle lead mr-2"></span>
<span class="media-body">
Play video
</span>
</a>
<!-- End Fancybox -->
</div>
</div>
<!-- End Info -->
</div>
</div>
<!-- Gallery -->
<div class="d-none d-lg-block col-lg-7 position-absolute top-0 right-0 transform-rotate-1">
<div class="row align-items-end mx-n2">
<div class="col-lg-3 px-2 mb-11">
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x472/img6.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x472/img4.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x585/img1.jpg" alt="Image Description">
</div>
</div>
<div class="col-lg-3 px-2">
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x472/img1.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x115/img1.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-primary-lg rounded" src="../../assets/img/407x283/img1.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x472/img5.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-primary-lg rounded" src="../../assets/img/450x450/img10.jpg" alt="Image Description">
</div>
</div>
<div class="col-lg-3 px-2">
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x472/img2.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-lg rounded" src="../../assets/img/407x472/img3.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/282x500/img3.jpg" alt="Image Description">
</div>
</div>
<div class="col-lg-3 px-2 mb-11">
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/300x360/img1.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x535/img1.jpg" alt="Image Description">
</div>
<div class="mb-3">
<img class="img-fluid shadow-soft rounded" src="../../assets/img/407x115/img1.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Gallery -->
</div>
<!-- End Hero Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.fancybox.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of fancybox
$.HSCore.components.HSFancyBox.init('.js-fancybox');
});
</script>