# A digital UI Kit with a robust design

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

Compatible with Figma Coming soon

Get Started Play video

- HTML
- JS

                    <!-- Hero -->
                    <div class="position-relative">
                      <div class="container content-space-t-1 content-space-t-md-2 content-space-t-lg-5 content-space-b-2 content-space-b-sm-3 content-space-b-md-4 content-space-b-lg-0 content-space-b-xl-4">
                        <div class="row">
                          <div class="col-lg-5">
                            <!-- Heading -->
                            <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>
                            <!-- End Title & Description -->

                            <div class="d-flex align-items-center mb-5" style="max-width: 25rem;">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
                              </div>

                              <div class="flex-grow-1 ms-2">
                                <p class="small mb-0">Compatible with Figma <span class="badge bg-warning text-dark rounded-pill ms-1">Coming soon</span></p>
                              </div>
                            </div>

                            <div class="d-flex align-items-center gap-2 mb-8">
                              <a class="btn btn-primary btn-transition me-2" href="../page-login-simple.html">
                                Get Started <i class="bi-chevron-right small ms-1"></i>
                              </a>

                              <!-- Fancybox -->
                              <a class="video-player btn btn-outline-primary btn-transition" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
                                <i class="bi-play-circle-fill me-1"></i> Play video
                              </a>
                              <!-- End Fancybox -->
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>

                      <!-- Gallery -->
                      <div class="col-lg-7 position-lg-absolute top-0 end-0 transform-rotate-n40deg">
                        <div class="row gx-3 align-items-end">
                          <div class="col-3 mb-10">
                            <div class="d-grid gap-3">
                              <div data-aos="fade-up">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img6.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="50">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img4.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="100">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x585/img1.jpg" alt="Image Description">
                              </div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-3">
                            <div class="d-grid gap-3">
                              <div data-aos="fade-up" data-aos-delay="150">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img1.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="200">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="250">
                                <img class="img-fluid shadow-primary-lg rounded-2" src="../assets/img/407x283/img1.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="300">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img5.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="350" data-aos-offset="-50">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img9.jpg" alt="Image Description">
                              </div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-3">
                            <div class="d-grid gap-3">
                              <div data-aos="fade-up" data-aos-delay="400">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img2.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="450">
                                <img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x472/img3.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="500">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x867/img3.jpg" alt="Image Description">
                              </div>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-3 mb-10">
                            <div class="d-grid gap-3">
                              <div data-aos="fade-up" data-aos-delay="550">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/300x360/img1.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="600">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x535/img1.jpg" alt="Image Description">
                              </div>
                              <div data-aos="fade-up" data-aos-delay="650">
                                <img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
                              </div>
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Gallery -->
                    </div>
                    <!-- End Hero -->

                    <!-- JS Implementing Plugins -->
                    <script src="../node_modules/fslightbox/index.js"></script>