Gallery
Component #1 (with parallax)
<!-- Samples Section -->
<div class="space-2">
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "reverse"}' style="overflow: visible;">
<div class="container-fluid px-lg-9">
<div class="row justify-content-md-center align-items-center mx-n2">
<div class="d-none d-md-inline-block col-md px-2">
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img6.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x115/img1.jpg" alt="Image Description">
</div>
<div class="col-3 col-md px-2" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img4.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x283/img1.jpg" alt="Image Description">
</div>
<div class="col-6 col-md px-2">
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img5.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img3.jpg" alt="Image Description">
</div>
<div class="col-3 col-md px-2" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"-7", mid:"0", final:"7"}]'>
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/300x360/img1.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x535/img1.jpg" alt="Image Description">
</div>
<div class="d-none d-md-inline-block col-md px-2">
<img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img1.jpg" alt="Image Description">
<img class="img-fluid shadow rounded" src="../../assets/img/407x472/img2.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
</div>
<!-- End Samples Section -->
<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
Component #2
<!-- Gallery Section -->
<div class="container space-2">
<div class="row">
<div class="col-md-5 align-self-md-end mb-3 mb-md-0">
<img class="img-fluid rounded" src="../../assets/img/750x750/img6.jpg" alt="Image Description">
</div>
<div class="col-md-7">
<div class="ml-lg-4">
<img class="img-fluid rounded" src="../../assets/img/750x750/img5.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<!-- End Gallery Section -->
Component #3
<!-- Gallery Section -->
<div class="container">
<div class="row mx-n2">
<div class="col-6 col-md px-2 mb-3">
<div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img17.jpg);"></div>
</div>
<div class="col-md-3 d-none d-md-block px-2 mb-3">
<div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img6.jpg);"></div>
</div>
<div class="col-6 col-md px-2 mb-3">
<div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img14.jpg);"></div>
</div>
<div class="w-100"></div>
<div class="col-6 col-md px-2 mb-3 mb-md-0">
<div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img25.jpg);"></div>
</div>
<div class="col-md-4 d-none d-md-block px-2 mb-3 mb-md-0">
<div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img16.jpg);"></div>
</div>
<div class="col-6 col-md px-2">
<div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img12.jpg);"></div>
</div>
</div>
</div>
<!-- End Gallery Section -->
Component #4
<!-- Hero Section -->
<div class="position-relative">
<div class="container space-2 position-relative z-index-2">
<div class="row mx-n1 mx-sm-n2">
<div class="col-4 align-self-end px-1 px-sm-2 mb-2 mb-sm-3">
<div class="ml-md-8">
<img class="img-fluid rounded" src="../../assets/img/900x900/img1.jpg" alt="Image Description">
</div>
</div>
<div class="col-8 px-1 px-sm-2 mb-2 mb-sm-3">
<!-- Video Block -->
<div id="youTubeVideoPlayerExample1" class="video-player bg-dark d-none d-md-block rounded">
<img class="img-fluid video-player-preview rounded" 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": "0qisGSwZym4",
"parentSelector": "#youTubeVideoPlayerExample1",
"targetSelector": "#youTubeVideoIframeExample1",
"isAutoplay": true,
"classMap": {
"toggle": "video-player-played"
}
}'>
<span class="video-player-icon">
<i class="fas fa-play"></i>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="embed-responsive embed-responsive-16by9 rounded">
<div id="youTubeVideoIframeExample1"></div>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
<div class="d-md-none">
<img class="img-fluid rounded" src="../../assets/img/900x450/img14.jpg" alt="Image Description">
</div>
</div>
<div class="col-8 px-1 px-sm-2 mb-2 mb-sm-3">
<img class="img-fluid rounded" src="../../assets/img/900x450/img13.jpg" alt="Image Description">
</div>
<div class="col-4 px-1 px-sm-2 mb-2 mb-sm-3">
<div class="mr-md-8">
<img class="img-fluid rounded" src="../../assets/img/750x750/img2.jpg" alt="Image Description">
</div>
</div>
</div>
</div>
<div class="position-absolute top-0 right-0 left-0 w-100 h-100 bg-img-hero mt-n11" style="background-image: url(../../assets/svg/components/abstract-shapes-12.svg);"></div>
<!-- SVG Shape -->
<figure class="position-absolute bottom-0 right-0 left-0 mb-11">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
<polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
</svg>
</figure>
<!-- End SVG Shape -->
</div>
<!-- End Hero Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of video player
$('.js-inline-video-player').each(function () {
var videoPlayer = new HSVideoPlayer($(this)).init();
});
});
</script>
Component #5
<!-- Video Block -->
<div id="youTubeVideoPlayerExample2" class="video-player bg-dark rounded">
<img class="img-fluid video-player-preview rounded" src="../../assets/img/1920x800/img10.jpg" alt="Image">
<!-- Play Button -->
<a class="js-inline-video-player video-player-btn video-player-centered shadow-soft rounded-circle" href="javascript:;"
data-hs-video-player-options='{
"videoId": "0qisGSwZym4",
"parentSelector": "#youTubeVideoPlayerExample2",
"targetSelector": "#youTubeVideoIframeExample2",
"isAutoplay": true,
"classMap": {
"toggle": "video-player-played"
}
}'>
<span class="video-player-icon">
<i class="fas fa-play"></i>
</span>
</a>
<!-- End Play Button -->
<!-- Video Iframe -->
<div class="embed-responsive embed-responsive-16by9 rounded">
<div id="youTubeVideoIframeExample2"></div>
</div>
<!-- End Video Iframe -->
</div>
<!-- End Video Block -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of video player
$('.js-inline-video-player').each(function () {
var videoPlayer = new HSVideoPlayer($(this)).init();
});
});
</script>
Component #6
<!-- Video Content Section -->
<div class="d-flex container-fluid py-3">
<div class="d-flex justify-content-center align-items-center flex-column w-100 min-vh-100 bg-img-hero-center text-center rounded" style="background-image: url(../../assets/img/1920x1080/img23.jpg);">
<!-- Fancybox -->
<a class="js-fancybox video-player video-player-btn" href="javascript:;"
data-hs-fancybox-options='{
"src": "//youtube.com/0qisGSwZym4",
"caption": "Front - Responsive Website Template",
"speed": 700,
"buttons": ["fullScreen", "close"],
"vimeo": {
"autoplay": 1
}
}'>
<span class="video-player-icon">
<i class="fas fa-play"></i>
</span>
</a>
<!-- End Fancybox -->
</div>
</div>
<!-- End Video Content Section -->
<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of video player
$('.js-inline-video-player').each(function () {
var videoPlayer = new HSVideoPlayer($(this)).init();
});
});
</script>
Component #7
<!-- Images Carousel Section -->
<div class="overflow-hidden">
<div class="js-slick-carousel slick slick-gutters-2"
data-hs-slick-carousel-options='{
"infinite": true,
"autoplay": true,
"slidesToShow": 2,
"centerMode": true,
"centerPadding": "200px",
"responsive": [{
"breakpoint": 992,
"settings": {
"slidesToShow": 2,
"centerPadding": "120px"
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1,
"centerPadding": "80px"
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1,
"centerPadding": "50px"
}
}]
}'>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img6.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img7.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img8.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img9.jpg);"></div>
<div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img10.jpg);"></div>
</div>
</div>
<!-- End Images Carousel Section -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$('.js-slick-carousel').each(function() {
var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
});
});
</script>