A digital UI Kit with a robust design
Super clean, minimalistic, stylized mockup collection with awesome customization.
Compatible with Sketch and Adobe XD
<!-- Hero Section -->
<div class="position-relative">
<div class="container space-top-1 space-top-md-2 space-top-lg-4 space-bottom-2 space-bottom-sm-3 space-bottom-md-4 space-bottom-lg-0 space-bottom-xl-4">
<div class="row">
<!-- Info -->
<div class="col-lg-5">
<div class="mb-5">
<h1>A digital UI Kit with a robust design</h1>
<p class="lead">Super clean, minimalistic, stylized mockup collection with awesome customization.</p>
</div>
<div class="media align-items-center max-w-35rem mb-5">
<div class="mr-3">
<img class="img-fluid mr-2" src="../../assets/svg/illustrations/sketch.svg" alt="Sketch" width="32">
<img class="img-fluid" src="../../assets/svg/illustrations/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="#">Get Started</a>
<!-- Fancybox -->
<a class="js-fancybox btn btn-link d-flex align-items-center ml-2" 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="far fa-play-circle lead mr-2"></i>
<span class="media-body">
Play video
</span>
</a>
<!-- End Fancybox -->
</div>
</div>
<!-- End Info -->
</div>
</div>
<!-- Gallery -->
<div class="col-lg-7 position-lg-absolute top-0 right-0 transform-rotate-1">
<div class="row align-items-end mx-n2">
<div class="col-3 px-2 mb-11">
<div class="mb-3" data-aos="fade-up">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img6.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="50">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img4.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="100">
<img class="img-fluid shadow rounded" src="../../assets/img/407x585/img1.jpg" alt="Image Description">
</div>
</div>
<div class="col-3 px-2">
<div class="mb-3" data-aos="fade-up" data-aos-delay="150">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img1.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="200">
<img class="img-fluid shadow rounded" src="../../assets/img/407x115/img1.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="250">
<img class="img-fluid shadow-primary-lg rounded" src="../../assets/img/407x283/img1.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="300">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img5.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="350" data-aos-offset="-50">
<img class="img-fluid shadow-primary-lg rounded" src="../../assets/img/407x472/img9.jpg" alt="Image Description">
</div>
</div>
<div class="col-3 px-2">
<div class="mb-3" data-aos="fade-up" data-aos-delay="400">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img2.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="450">
<img class="img-fluid shadow-lg rounded" src="../../assets/img/407x472/img3.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="500">
<img class="img-fluid shadow rounded" src="../../assets/img/407x867/img9.jpg" alt="Image Description">
</div>
</div>
<div class="col-3 px-2 mb-11">
<div class="mb-3" data-aos="fade-up" data-aos-delay="550">
<img class="img-fluid shadow rounded" src="../../assets/img/300x360/img1.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="600">
<img class="img-fluid shadow rounded" src="../../assets/img/407x535/img1.jpg" alt="Image Description">
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="650">
<img class="img-fluid shadow 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/dist/jquery.fancybox.min.css">
<link rel="stylesheet" href="./assets/vendor/aos/dist/aos.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
<script src="./assets/vendor/aos/dist/aos.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>