Gallery
Component #1
>!-- 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
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
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
Work with us
Work hard with highly motivated team of talented people and great teammates to launch perfectly crafted products you'll love.
<!-- 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
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>