# Empowering teams with the freedom

Own the unlimited power of the web development.

Get Started Play video

- HTML
- JS

                    <!-- Hero -->
                    <div class="position-relative bg-img-start" style="background-image: url(../assets/svg/components/card-11.svg);">
                      <div class="container content-space-t-3 content-space-t-lg-5 content-space-b-2 content-space-b-lg-3 position-relative zi-2">
                        <div class="row justify-content-lg-between align-items-md-center">
                          <div class="col-md-6 col-lg-5 mb-10 mb-md-0">
                            <div class="mb-5">
                              <h1 class="display-4">Empowering teams with the freedom</h1>
                              <p class="lead">Own the unlimited power of the web development.</p>
                            </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 class="col-md-6">
                            <div class="row justify-content-end">
                              <div class="col-3 mb-4">
                                <!-- Logo -->
                                <div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 mt-n3 ms-5" data-aos="fade-up">
                                  <img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
                                </div>
                                <!-- End Logo -->
                              </div>
                              <div class="col-4 mb-4">
                                <!-- Logo -->
                                <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto mt-5" data-aos="fade-up" data-aos-delay="50">
                                  <img class="avatar-img" src="../assets/svg/brands/atlassian-icon.svg" alt="Image Description">
                                </div>
                                <!-- End Logo -->
                              </div>
                              <div class="col-4 mb-4">
                                <!-- Logo -->
                                <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="150">
                                  <img class="avatar-img" src="../assets/svg/brands/asana-icon.svg" alt="Image Description">
                                </div>
                                <!-- End Logo -->
                              </div>
                            </div>

                            <div class="row">
                              <div class="col-3 offset-1 my-4">
                                <!-- Logo -->
                                <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="200">
                                  <img class="avatar-img" src="../assets/svg/brands/paypal-icon.svg" alt="Image Description">
                                </div>
                                <!-- End Logo -->
                              </div>
                              <div class="col-3 offset-2 my-4">
                                <!-- Logo -->
                                <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="250">
                                  <img class="avatar-img" src="../assets/svg/brands/dribbble-icon.svg" alt="Image Description">
                                </div>
                                <!-- End Logo -->
                              </div>
                            </div>

                            <div class="row d-none d-md-flex">
                              <div class="col-6">
                                <!-- Logo -->
                                <div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 ms-auto" data-aos="fade-up" data-aos-delay="300">
                                  <img class="avatar-img" src="../assets/svg/brands/google-adz-icon.svg" alt="Image Description">
                                </div>
                                <!-- End Logo -->
                              </div>
                              <div class="col-6 mt-6">
                                <!-- Logo -->
                                <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto" data-aos="fade-up" data-aos-delay="350">
                                  <img class="avatar-img" src="../assets/svg/brands/behance-icon.svg" alt="Image Description">
                                </div>
                                <!-- End Logo -->
                              </div>
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>

                      <!-- Shape -->
                      <div class="shape shape-bottom zi-1">
                        <svg width="3000" height="500" viewBox="0 0 3000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M0 500H3000V0L0 500Z" fill="#fff"/>
                        </svg>
                      </div>
                      <!-- End Shape -->
                    </div>
                    <!-- End Hero -->

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