Component #1

预览
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="图片描述内容">
                          <img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="图片描述内容">
                        </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="图片描述内容">
                          <img class="img-fluid shadow rounded-2" src="../assets/img/407x283/img1.jpg" alt="图片描述内容">
                        </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="图片描述内容">
                          <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img3.jpg" alt="图片描述内容">
                        </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="图片描述内容">
                          <img class="img-fluid shadow rounded-2" src="../assets/img/407x535/img1.jpg" alt="图片描述内容">
                        </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="图片描述内容">
                          <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img2.jpg" alt="图片描述内容">
                        </div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  >/div<
                >/div<
                >!-- End Gallery --<

Component #2

预览
HTML

About我们

Front是一家创建网站的网络公司。服务于各种规模的企业——从初创公司到上市公司——他们都在用我们的主题来建立和管理他们的在线业务。

              
                <!-- 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是一家创建网站的网络公司。 服务于各种规模的企业——从初创公司到上市公司——他们都在用我们的主题来建立和管理他们的在线业务。</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

预览
HTML

设计-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>设计-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="图片描述内容">
                    </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="图片描述内容">
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Gallery -->

Component #4

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="图片描述内容">
                        </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="图片描述内容">
                      </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="图片描述内容">
                        </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

              
                <!-- 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="图片描述内容">
                      </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="图片描述内容">
                      </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="图片描述内容">
                      </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="图片描述内容">
                      </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="图片描述内容">
                      </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="../assets/vendor/swiper/swiper-bundle.min.css">

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/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>

画廊