# Gallery

## Component #1

- Preview
- HTML

                    >!-- Gallery --<
                    >div class="content-space-1"<
                      >div class="container-fluid px-lg-9"<
                        <div class="row gx-3 align-items-center">
                          <div class="col-md d-none d-md-inline-block">
                            <div class="d-grid gap-3">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img6.jpg" alt="Image Description">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col">
                            <div class="d-grid gap-3">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img4.jpg" alt="Image Description">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x283/img1.jpg" alt="Image Description">
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col">
                            <div class="d-grid gap-3">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img5.jpg" alt="Image Description">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img3.jpg" alt="Image Description">
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col">
                            <div class="d-grid gap-3">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/300x360/img1.jpg" alt="Image Description">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x535/img1.jpg" alt="Image Description">
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md d-none d-md-inline-block">
                            <div class="d-grid gap-3">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img1.jpg" alt="Image Description">
                              <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img2.jpg" alt="Image Description">
                            </div>
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      >/div<
                    >/div<
                    >!-- End Gallery --<

## Component #2

- Preview
- HTML

# About Us

Front is a web company that builds websites. Businesses of every size—from new startups to public companies—use our theme to build and manage their businesses online.

                    <!-- Gallery -->
                    <div class="container content-space-2 content-space-lg-3">
                      <div class="w-lg-75 text-center mx-lg-auto">
                        <!-- Heading -->
                        <div class="mb-5 mb-md-10">
                          <h1 class="display-4">About Us</h1>
                          <p class="lead">Front is a web company that builds websites. Businesses of every size—from new startups to public companies—use our theme to build  and manage their businesses online.</p>
                        </div>
                        <!-- End Heading -->
                      </div>

                      <div class="row gx-3">
                        <div class="col mb-3">
                          <div class="bg-img-start" style="background-image: url(../assets/img/480x320/img17.jpg); height: 15rem;"></div>
                        </div>
                        <!-- End Col -->

                        <div class="col-3 d-none d-md-block mb-3">
                          <div class="bg-img-start" style="background-image: url(../assets/img/480x320/img6.jpg); height: 15rem;"></div>
                        </div>
                        <!-- End Col -->

                        <div class="col mb-3">
                          <div class="bg-img-start" style="background-image: url(../assets/img/480x320/img14.jpg); height: 15rem;"></div>
                        </div>
                        <!-- End Col -->

                        <div class="w-100"></div>

                        <div class="col mb-3 mb-md-0">
                          <div class="bg-img-start" style="background-image: url(../assets/img/480x320/img25.jpg); height: 15rem;"></div>
                        </div>
                        <!-- End Col -->

                        <div class="col-4 d-none d-md-block mb-3 mb-md-0">
                          <div class="bg-img-start" style="background-image: url(../assets/img/480x320/img16.jpg); height: 15rem;"></div>
                        </div>
                        <!-- End Col -->

                        <div class="col">
                          <div class="bg-img-start" style="background-image: url(../assets/img/480x320/img12.jpg); height: 15rem;"></div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Gallery -->

## Component #3

- Preview
- HTML

# Design-led and user-centric strategies can impact people's life.

                    <!-- Gallery -->
                    <div class="container content-space-2 content-space-lg-3">
                      <!-- Heading -->
                      <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-md-9">
                        <h1>Design-led and user-centric strategies can impact people's life.</h1>
                      </div>
                      <!-- End Heading -->

                      <div class="row gx-3 gx-lg-4">
                        <div class="col-5 align-self-end">
                          <img class="img-fluid rounded-2" src="../assets/img/750x750/img6.jpg" alt="Image Description">
                        </div>
                        <!-- End Col -->

                        <div class="col-7">
                          <div class="ms-lg-4">
                            <img class="img-fluid rounded-2" src="../assets/img/750x750/img1.jpg" alt="Image Description">
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Gallery -->

## Component #4

- Preview
- HTML
- JS

# Work with us

Work hard with highly motivated team of talented people and great teammates to launch perfectly crafted products you'll love.

See job openings

                    <!-- Gallery -->
                    <div class="position-relative bg-img-start" style="background-image: url(../assets/svg/components/card-11.svg);">
                      <div class="container content-space-2 content-space-lg-3 position-relative zi-2">
                        <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-9">
                          <!-- Heading -->
                          <div class="mb-5">
                            <h1>Work with us</h1>
                            <p>Work hard with highly motivated team of talented people and great teammates to launch perfectly crafted products you'll love.</p>
                          </div>
                          <!-- End Heading -->

                          <a class="btn btn-primary btn-transition" href="#">See job openings</a>
                        </div>

                        <div class="row gx-2">
                          <div class="col-4 align-self-end mb-2">
                            <div class="ms-md-8">
                              <img class="img-fluid rounded-2" src="../assets/img/900x900/img1.jpg" alt="Image Description">
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-8 mb-2">
                            <!-- Video Block -->
                            <div id="youTubeVideoPlayer" class="video-player video-player-inline-btn rounded-2">
                              <img class="img-fluid video-player-preview rounded-2" src="../assets/img/900x450/img14.jpg" alt="Image">

                              <!-- Play Button -->
                              <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
                                 data-hs-video-player-options='{
                                   "videoId": "d4eDWc8g0e0",
                                   "parentSelector": "#youTubeVideoPlayer",
                                   "targetSelector": "#youTubeVideoIframe",
                                   "isAutoplay": true
                                 }'>
                                <span class="video-player-icon shadow-sm">
                                  <i class="bi-play-fill"></i>
                                </span>
                              </a>
                              <!-- End Play Button -->

                              <!-- Video Iframe -->
                              <div class="ratio ratio-16x9">
                                <div id="youTubeVideoIframe"></div>
                              </div>
                              <!-- End Video Iframe -->
                            </div>
                            <!-- End Video Block -->
                          </div>
                          <!-- End Col -->

                          <div class="col-8 mb-2">
                            <img class="img-fluid rounded-2" src="../assets/img/900x450/img13.jpg" alt="Image Description">
                          </div>
                          <!-- End Col -->

                          <div class="col-4 mb-2">
                            <div class="me-md-8">
                              <img class="img-fluid rounded-2" src="../assets/img/750x750/img2.jpg" alt="Image Description">
                            </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 Gallery -->

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF VIDEO PLAYER
                        // =======================================================
                        new HSVideoPlayer('.js-inline-video-player')
                      })()
                    </script>

## Component #5

- Preview
- HTML
- CSS
- JS

Loading...

                    <!-- Swiper Slider -->
                    <div class="mx-3">
                      <div class="js-swiper-gallery swiper">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide rounded-2 bg-img-start" style="background-image: url(../assets/img/900x450/img6.jpg); min-height: 20rem;">
                            <img class="d-none" src="../assets/img/900x450/img6.jpg" alt="Image Description">
                          </div>
                          <div class="swiper-slide rounded-2 bg-img-start" style="background-image: url(../assets/img/900x450/img7.jpg); min-height: 20rem;">
                            <img class="d-none" src="../assets/img/900x450/img7.jpg" alt="Image Description">
                          </div>
                          <div class="swiper-slide rounded-2 bg-img-start" style="background-image: url(../assets/img/900x450/img8.jpg); min-height: 20rem;">
                            <img class="d-none" src="../assets/img/900x450/img8.jpg" alt="Image Description">
                          </div>
                          <div class="swiper-slide rounded-2 bg-img-start" style="background-image: url(../assets/img/900x450/img9.jpg); min-height: 20rem;">
                            <img class="d-none" src="../assets/img/900x450/img9.jpg" alt="Image Description">
                          </div>
                          <div class="swiper-slide rounded-2 bg-img-start" style="background-image: url(../assets/img/900x450/img10.jpg); min-height: 20rem;">
                            <img class="d-none" src="../assets/img/900x450/img10.jpg" alt="Image Description">
                          </div>
                        </div>

                        <!-- Preloader -->
                        <div class="js-swiper-gallery-preloader swiper-preloader">
                          <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                          </div>
                        </div>
                        <!-- End Preloader -->
                      </div>
                    </div>
                    <!-- End Swiper Slider -->

                    <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">

                    <!-- JS Implementing Plugins -->
                    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF SWIPER
                        // =======================================================
                        var swiper = new Swiper('.js-swiper-gallery',{
                          slidesPerView: 1,
                          breakpoints: {
                            620: {
                              slidesPerView: 2,
                              spaceBetween: 15,
                            },
                            1024: {
                              slidesPerView: 3,
                              spaceBetween: 15,
                            },
                          },
                          on: {
                            'imagesReady': function (swiper) {
                              const preloader = swiper.el.querySelector('.js-swiper-gallery-preloader')
                              preloader.parentNode.removeChild(preloader)
                            }
                          }
                        });
                      })()
                    </script>