A digital UI Kit with a robust design

Super clean, minimalistic, stylized mockup collection with awesome customization.

Sketch Adobe Xd

Compatible with Sketch and Adobe XD

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
              
                <!-- 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="./node_modules/aos/dist/aos.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script>
                <script src="./node_modules/aos/dist/aos.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));
                    });


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