169 lines
5.7 KiB
HTML
169 lines
5.7 KiB
HTML
<header class="hero-slider" aria-label="hero-slider">
|
||
|
||
|
||
<div class="swiper" data-slides-per-view="1" data-draggable="true">
|
||
<div class="swiper-wrapper">
|
||
|
||
|
||
<div class="swiper-slide">
|
||
<img src="demo/img/hero-3.webp" loading="lazy">
|
||
<div class="content">
|
||
<div class="container">
|
||
<div>
|
||
<div class="row align-items-center justify-content-center text-start">
|
||
<div class="col-lg-7">
|
||
<h1 class="heading mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">The next generation website builder</h1>
|
||
<h2 class="h3 col-lg-8" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs, websites or ecommerce stores.</h2>
|
||
|
||
|
||
<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
|
||
<a href="https://www.vvveb.com" class="btn btn-primary text-white btn-lg">
|
||
<span>⚡</span>
|
||
<span>Free Download</span>
|
||
<b>›</b>
|
||
</a>
|
||
<a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">Live Demo</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="col-lg-5">
|
||
<img src="demo/img/video-1.webp" class="shadow img-thumbnail" loading="lazy">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overlay"></div>
|
||
</div>
|
||
|
||
|
||
<div class="swiper-slide">
|
||
<img src="demo/img/hero-3.webp" loading="lazy">
|
||
<div class="content">
|
||
<div class="container">
|
||
<div>
|
||
<div class="row align-items-center justify-content-center text-center">
|
||
<div class="col-lg-12">
|
||
<h1 class="heading text-white mb-3 display-4 fw-bold" data-aos="fade-up" data-aos-delay="100">The fastest and leanest CMS</h1>
|
||
<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop website builder for blogs,
|
||
<br> presentation or ecommerce stores.
|
||
</h2>
|
||
|
||
<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
|
||
<a href="https://www.vvveb.com" class="btn btn-primary text-white btn-lg">
|
||
<span>⚡</span>
|
||
<span>Free Download</span>
|
||
<b>›</b>
|
||
</a>
|
||
<a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">Live Demo</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overlay"></div>
|
||
</div>
|
||
|
||
<div class="swiper-slide">
|
||
<img src="demo/img/hero-3.webp" loading="lazy">
|
||
<div class="content">
|
||
<div class="container">
|
||
<div>
|
||
<div class="row align-items-center justify-content-center text-start g-5">
|
||
<div class="col-lg-5">
|
||
<img src="demo/img/video-1.webp" class="shadow img-thumbnail" loading="lazy">
|
||
</div>
|
||
|
||
<div class="col-lg-7">
|
||
<h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
|
||
<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs,
|
||
<br> websites or ecommerce stores.
|
||
</h2>
|
||
|
||
|
||
<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
|
||
<a href="https://www.vvveb.com" class="btn btn-primary text-white btn-lg">
|
||
<span>⚡</span>
|
||
<span>Free Download</span>
|
||
<b>›</b>
|
||
</a>
|
||
<a href="https://demo.vvveb.com" class="btn btn-white text-white btn-lg">Live Demo</a>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="overlay"></div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="swiper-button-next"></div>
|
||
<div class="swiper-button-prev"></div>
|
||
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="separator bottom">
|
||
|
||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none">
|
||
<defs>
|
||
<style>
|
||
.cls-1 {
|
||
fill: var(--bs-body-bg);
|
||
}
|
||
</style>
|
||
</defs>
|
||
<title>rough-edges-bottom</title>
|
||
<path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)" />
|
||
</svg>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="background-container">
|
||
<img src="demo/img/hero-3.webp" alt="Hero background" loading="lazy">
|
||
</div>
|
||
|
||
|
||
<script id="swiper-js" src="/js/libs/swiper/swiper-bundle.min.js"></script>
|
||
<link id="swiper-css" href="/js/libs/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||
<script>
|
||
var swiper = [];
|
||
function initSwiper(onlyNew = false) {
|
||
var list = document.querySelectorAll('.swiper' + (onlyNew ? ":not(.swiper-initialized)" : "") );
|
||
list.forEach(el => {
|
||
//el.dataset
|
||
let params = {
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
},
|
||
};
|
||
for (i in el.dataset) {
|
||
let param = el.dataset[i];
|
||
if (param[0] = '{') {
|
||
param = JSON.parse(param);
|
||
}
|
||
params[i] = param;
|
||
}
|
||
swiper.push(new Swiper(el, params))
|
||
//swiper.push(new Swiper(el, { ...{autoplay:{delay: 500}}, ...el.dataset}))
|
||
});
|
||
}
|
||
|
||
initSwiper();
|
||
</script>
|
||
|
||
</header> |