Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive websites the best travel agency website design using HTML CSS And JAVASCRIPT in this Blog.
Using standard JavaScript, users can use the navigation buttons on the web design moving car animation  website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.
You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.
Index.html
<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive adventure & tour Website Design </title>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<a href="#"> adventure </a>
<nav>
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#shop">shop</a>
<a href="#packages">packages</a>
<a href="#reviews">reviews</a>
<a href="#blogs">blogs</a>
</nav>
<a href="#"></a>
</section>
<section id="home">
never stop
<h3>exploring</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
<a href="#">get started</a>
make tour
<h3>amazing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
<a href="#">get started</a>
exploring the
<h3>new world</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,
nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
<a href="#">get started</a>
</section>
<section>
<h1>adventure idea!</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-1.jpg">
<h3>Bungee jump</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-2.jpg">
<h3>Zip lines</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-3.jpg">
<h3>Canoeing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-4.jpg">
<h3>Kayaking</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
</section>
<section id="about">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/about-img.jpg" alt="">
<h3>memorable outdoor experiences</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Officia minus id sequi quibusdam. Possimus dolores iusto quam officiis dignissimos quo! Lorem ipsum dolor sit amet consectetur adipisicing elit
farhan debitis id nulla consequatur incidunt, ipsum aliquam facere maiores voluptates architecto!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptatem expedita corrupti officia velit soluta ab quod reprehenderit. Numquam, sed ad.</p>
<a href="#">read more</a>
</section>
<section id="shop">
<h1>featured products</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-1.jpg" alt="">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<h3>survival kits</h3>
$10.00 - $30.00
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-2.jpg" alt="">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<h3>survival kits</h3>
$10.00 - $30.00
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-3.jpg" alt="">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<h3>survival kits</h3>
$10.00 - $30.00
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-4.jpg" alt="">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<h3>survival kits</h3>
$10.00 - $30.00
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-5.jpg" alt="">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<h3>survival kits</h3>
$10.00 - $30.00
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-6.jpg" alt="">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<h3>survival kits</h3>
$10.00 - $30.00
</section>
<section id="packages">
popular packages
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-1.jpg">
<h3>Kayaking</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
$350 - 550
<a href="#">explore me</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-2.jpg">
<h3>exploring new places</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
$350 - 550
<a href="#">explore me</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-3.jpg">
<h3>hiking</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
$350 - 550
<a href="#">explore me</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-4.jpg">
<h3>mountaineering</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
$350 - 550
<a href="#">explore me</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-5.jpg">
<h3>surfing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
$350 - 550
<a href="#">explore me</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-6.jpg">
<h3>cycling</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
$350 - 550
<a href="#">explore me</a>
</section>
<section id="reviews">
<h1>Client's reviews</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-1.png">
<h3>edward bey</h3>
designer
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-2.png">
<h3>lina bey</h3>
web development
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-3.png">
<h3>edward bey</h3>
web designer
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-4.png">
<h3>jenna bey</h3>
font end
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-5.png">
<h3>edward bey</h3>
back end
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-6.png">
<h3>lisa bey</h3>
full stack
</section>
<section>
<h1>what we offer</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-1.png">
<h3>complete guide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-2.png">
<h3>custom packages</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-3.png">
<h3>family trips</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-4.png">
<h3>train guides</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-5.png">
<h3>adventure trail</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-6.png">
<h3>various adventures</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
<a href="#">read more...</a>
</section>
<section id="blogs">
<h1>our daily post</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-1.jpg" alt="">
<a href="#"> 1st jan,2022</a>
<a href="#">by admin </a>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#">read more</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-2.jpg" alt="">
<a href="#"> 1st jan,2022</a>
<a href="#">by admin </a>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#">read more</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-3.jpg" alt="">
<a href="#"> 1st jan,2022</a>
<a href="#">by admin </a>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#">read more</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-4.jpg" alt="">
<a href="#"> 1st jan,2022</a>
<a href="#">by admin </a>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#">read more</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-5.jpg" alt="">
<a href="#"> 1st jan,2022</a>
<a href="#">by admin </a>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#">read more</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-6.jpg" alt="">
<a href="#"> 1st jan,2022</a>
<a href="#">by admin </a>
<h3>blog title goes here...</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Commodi unde aut ducimus consectetur quam labore mollitia
natus voluptatum dolore laboriosam!</p>
<a href="#">read more</a>
</section>
<section>
<h1>subscribe now</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Totam dicta atque, explicabo facere perferendis ex enim vel eligendi. Repellat, at.</p>
<form action="">
<input type="email" name="" id="" placeholder="enter your email address">
<input type="submit" value="subscribe">
</form>
</section>
<section>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-1.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-2.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-3.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-4.png" alt="">
</section>
<section>
<h3>quick links</h3>
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#shop">shop</a>
<a href="#packages">packages</a>
<a href="#reviews">reviews</a>
<a href="#blogs">blogs</a>
<h3>extra links</h3>
<a href="#">my account</a>
<a href="#">my order</a>
<a href="#">my whishlist</a>
<a href="#">ask question</a>
<a href="#">privacy policy</a>
<h3>contact info</h3>
<a href="#">+111-222-7867</a>
<a href="#">+222-333-4444</a>
<a href="#">shaikhfarhan@gmail.com</a>
<a href="#">mumbai, india - 401203</a>
<h3>follow us</h3>
<a href="#">facebook</a>
<a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">linkedin</a>
<a href="#">github</a>
created by dailywebdesign || all rights reserved
</section>
<script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://dailywebdesigns.com/wp-content/litespeed/js/244880a5cd603cb893a0eb3de05dc9c7.js?ver=59974"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html> ]]>
style.css
<![CDATA[@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,300&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
/* -webkit-box-sizing: border-box; */
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
/* -webkit-transition: 2s linear; */
transition: 2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
html::-webkit-scrollbar{
width:1rem;
}
html::-webkit-scrollbar-track{
background: #fff;
}
html::-webkit-scrollbar-thumb{
background: #10221b;
}
section{
padding:5rem 9%;
}
.btn{
margin-top:1rem;
display: inline-block;
border: 0.2rem solid #10221b;
color: #10221b;
cursor:pointer;
background:none;
font-size:1.7rem;
padding:1rem 3rem;
}
.btn:hover{
background: #10221b;
color: #fff;
}
.heading{
text-align: center;
margin-bottom:2.5rem;
font-size: 4rem;
color: #10221b;
}
.heading span{
color: #219150;
}
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 2rem 9%;
z-index: 1000;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
}
.header.active{
background: #fff;
/* -webkit-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.1); */
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.header .logo{
margin-right: auto;
font-size: 2.5rem;
color: #10221b;
font-weight: bolder;
}
.header .logo i{
color: #219150;
}
.header .navbar a{
margin-left: 2rem;
font-size: 1.7rem;
color: #10221b;
}
.header .navbar a:hover{
color: #219150;
}
.header .navbar #nav-close{
font-size: 5rem;
cursor: pointer;
color: #10221b;
display: none;
}
.header .icons a,
.header .icons div{
font-size: 3.5rem;
margin-left: 2rem;
cursor: pointer;
color: #10221b;
}
.header .icons a:hover,
.header .icons div:hover{
color: #219150;
}
.header #menu-btn{
display: none;
}
.home{
padding:0;
}
.home .box{
min-height: 100vh;
display:-webkit-box;
display: -ms-flexbox;
display: flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
background-size: cover !important;
background-position: center !important;
/* -webkit-box-pack: end; */
/* -ms-flex-pack: end; */
justify-content: flex-end;
padding:2rem 9%;
}
.home .box.second{
/* -webkit-box-pack: start; */
/* -ms-flex-pack: start; */
justify-content: flex-start;
}
.home .box .content{
width:50rem;
}
.home .box .content span{
font-size:4rem;
color: #10221b;
}
.home .box .content h3{
font-size:6rem;
color: #219150;
padding-top: .5rem;
text-transform: uppercase;
}
.home .box .content p{
line-height: 2;
color: #10221b;
font-size: 1.5rem;
padding: 1rem 0;
}
.swiper-button-next::after,
.swiper-button-prev::after{
font-size: 3rem;
color: #10221b;
}
.category .box-container{
display: -ms-grid;
display:grid;
/* -ms-grid-columns: (minmax(29rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
gap:1.5rem;
}
.category .box-container .box{
text-align:center;
padding:1rem;
}
.category .box-container .box img{
height:20rem;
width:20rem;
border-radius:50%;
margin-bottom:1rem;
}
.category .box-container .box h3{
font-size:2rem;
color: #219150;
}
.category .box-container .box p{
font-size:1.5rem;
color: #10221b;
padding:1rem 0;
line-height:2;
}
.about{
background: #eee;
display: -webkit-box;
display: -ms-flexbox;
display:flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
/* -ms-flex-wrap: wrap; */
flex-wrap: wrap;
gap:2rem;
}
.about .img{
/* -webkit-box-flex: 1; */
/* -ms-flex:1 1 42rem; */
flex:1 1 42rem;
padding-right: 5rem;
padding-bottom: 5rem;
}
.about .img img{
width: 100%;
/* -webkit-box-shadow:4rem 4rem 0 rgba(0, 0, 0, 0.1); */
box-shadow:4rem 4rem 0 rgba(0, 0, 0, 0.1);
}
.about .content{
/* -webkit-box-flex: 1; */
/* -ms-flex: 1 1 42rem; */
flex: 1 1 42rem;
}
.about .content h3{
font-size: 3rem;
color: #219150;
}
.about .content p{
font-size:1.5rem;
color: #10221b;
padding: 1rem 0;
line-height:2;
}
.shop .slide{
border: 0.2rem solid #10221b;
}
.shop .slide:hover .img .icons{
/* -webkit-transform: translateY(0); */
transform: translateY(0);
}
.shop .slide .img{
position: relative;
overflow: hidden;
height:30rem;
width:100%;
}
.shop .slide .img img{
height: 100%;
width: 100%;
/* -o-object-fit: cover; */
object-fit: cover;
}
.shop .slide .img .icons{
width: 100%;
position: absolute;
bottom: 2rem;
left:0;
text-align: center;
z-index:10;
/* -webkit-transform: translateY(7rem); */
transform:translateY(7rem);
}
.shop .slide .img .icons a{
height:4.5rem;
width:4.5rem;
line-height: 4.5rem;
font-size: 1.7rem;
background: #102210;
color: #fff;
margin:0.2rem;
}
.shop .slide .img .icons a:hover{
background: #219150;
}
.shop .slide .content{
padding: 1rem 0;
text-align: center;
}
.shop .slide .content h3{
font-size:2rem;
color: #10221b;
}
.shop .slide .content .price{
padding:1rem 0;
padding-top: .5rem;
font-size:2rem;
color: #219150;
}
.shop .slide .content .starts i{
font-size: 1.7rem;
color: #10221b;
}
.packages{
background: #fff;
}
.packages .box-container{
display: grid;
display: -ms-grid;
/* -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
gap: 1.5rem;
}
.packages .box-container .box{
text-align: center;
background: #fff;
border:0.2rem solid #10221b;
/* -webkit-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.1); */
/* box-shadow:0 0.5rem 1 rgba(0, 0, 0, 0.1); */
border-radius: .5rem;
}
.packages .box-container .box:hover{
background: #10221b;
}
.packages .box-container .box:hover .content > *{
color: #fff;
}
.packages .box-container .box:hover .btn{
border-color: #fff;
}
.packages .box-container .box:hover .btn:hover{
background: #fff;
color: #10221b;
}
.packages .box-container .box .img{
height:25rem;
overflow:hidden;
padding: 2rem;
padding-bottom: 0;
border-radius: .5rem;
}
.packages .box-container .box .img img{
height:100%;
width:100%;
/* -o-object-fit: cover; */
object-fit: cover;
border-radius: .5rem;
}
.packages .box-container .box .content{
padding:2rem;
}
.packages .box-container .box .content h3{
font-size:2rem;
color: #10221b;
}
.packages .box-container .box .content p{
font-size:1.5rem;
color: #10221b;
padding: 1rem 0;
line-height:2;
}
.packages .box-container .box .content .price{
font-size: 2rem;
color: #219150;
}
.services{
background: #eee;
}
.services .box-container{
display: grid;
display: -ms-grid;
/* -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
gap: 1.5rem;
}
.services .box-container .box{
text-align: center;
padding: 2rem;
border: 0.2rem solid #10221b;
border-radius:.5rem;
background: #fff;
}
.services .box-container .box:hover{
background: #10221b;
}
.services .box-container .box:hover img{
/* -webkit-filter: invert(1); */
filter:invert(1);
}
.services .box-container .box:hover p{
color: #fff;
}
.services .box-container .box:hover .btn{
border-color: #fff;
color: #fff;
}
.services .box-container .box:hover .btn:hover{
background: #fff;
color: #10221b;
}
.services .box-container .box img{
height:10rem;
margin-bottom:1rem;
}
.services .box-container .box h3{
font-size: 2rem;
color: #219150;
}
.services .box-container .box p{
font-size: 1.5rem;
color: #10221b;
padding: 1rem 0;
line-height:2;
}
.reviews .slide .text{
padding: 2rem;
font-size: 1.5rem;
font-style: italic;
background: #eee;
border-radius: .5rem;
color: #10221b;
line-height:2;
position: relative;
z-index: 0;
margin-bottom: 3rem;
}
.reviews .slide .text::before{
content: "";
position: absolute;
bottom:-1.5rem;
left: .7rem;
height:3rem;
width: 3rem;
background: #eee;
/* -webkit-transform: rotate(45deg); */
transform: rotate(45deg);
}
.reviews .slide .user{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* -webkit-box-align: center; */
/* -ms-flex-align: center; */
align-items: center;
gap:1rem;
}
.reviews .slide .user img{
height:7rem;
width:7rem;
border-radius: 50%;
}
.reviews .slide .user h3{
font-size: 2rem;
color: #10221b;
}
.reviews .slide .user span{
color: #219150;
font-size: 1.5rem;
}
.blogs .slide{
text-align: center;
padding:2rem;
}
.blogs .slide img{
height:25rem;
width: 100%;
/* -o-object-fit: cover; */
object-fit: cover;
border-radius: .5rem;
}
.blogs .slide .icons{
background: #10221b;
border-radius: .5rem;
padding: 1rem;
position: relative;
top: -2rem;
display: inline-block;
}
.blogs .slide .icons a{
font-size: 1.4rem;
color: #fff;
margin: 0 1rem;
}
.blogs .slide .icons a:hover{
color: #219150;
}
.blogs .slide .icons a i{
padding-right: .5rem;
color: #219150;
}
.blogs .slide h3{
font-size:2rem;
color: #10221b;
}
.blogs .slide p{
font-size: 1.4rem;
padding:1rem 0;
line-height:2;
color: #10221b;
}
.newsletter{
background: #eee;
}
.newsletter .content{
max-width: 70rem;
margin: 1rem auto;
text-align: center
}
.newsletter .content p{
font-size: 1.5rem;
line-height: 2;
color: #10221b;
}
.newsletter .content form{
margin-top: 2rem;
background: #fff;
border-radius: 5rem;
border: 0.2rem solid #10221b;
padding:.7rem;
display: -webkit-box;
display: -ms-flexbox;
display:flex;
}
.newsletter .content form .email{
width:100%;
background:none;
text-transform: none;
font-size: 1.6rem;
color: #10221b;
padding:0 1.3rem;
}
.newsletter .content form .btn{
margin-top:0;
border-radius: 5rem;
background: #10221b;
color: #fff;
}
.newsletter .content form .btn:hover{
background: none;
color: #10221b;
}
.clients .slide{
text-align: center;
}
.clients .slide img{
height: 12rem;
}
.footer{
/* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))),
url(../images/footer-bg.jpg) no-repeat; */
background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(img/footer-bg.jpg)no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.footer .box-container{
display: -ms-grid;
display:grid;
/* -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit]; */
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1rem;
}
.footer .box-container .box h3{
font-size: 2rem;
padding:1.5rem 0;
color:#fff;
}
.footer .box-container .box a{
display:block;
font-size: 1.4rem;
color: #fff;
padding:1rem 0;
}
.footer .box-container .box a i{
color: #219150;
padding-right: .5rem;
}
.footer .box-container .box a:hover{
color: #219150;
}
.footer .box-container .box a:hover i{
padding-right: 2rem;
}
.footer .credit{
text-align: center;
margin-top:2.5rem;
padding: 1rem;
padding-top: 2.5rem;
font-size: 2rem;
color: #fff;
}
.footer .credit span{
color: #219150;
}
/* media queries */
@media (max-width:1200px){
.header{
padding: 2rem;
}
section{
padding: 3rem 2rem;
}
}
@media (max-width:991px){
html{
font-size: 55%;
scroll-padding-top: 7rem;
}
.home .box{
padding: 2rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content:center;
background-position: right !important;
}
.home .box.second{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-position: left !important;
}
.home .box .content{
text-align: center;
}
.home .box .content span{
font-size:3rem;
}
.home .box .content h3{
font-size:4rem;
}
}
@media (max-width:768px){
.header #menu-btn{
display: inline-block;
}
.header .navbar{
position: fixed;
top: 0;
left: -110%;
background:#fff;
z-index: 1000;
width:35rem;
height: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
--webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content:center;
}
.header .navbar a{
margin: 1rem 0;
font-size: 3rem;
}
.header .navbar #nav-close{
display: block;
position: absolute;
top: 1rem;
right:2rem;
}
.header .navbar.active{
left: 0;
-webkit-box-shadow:0 0 0 100vw rgba(0, 0, 0, 0.8);
box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
}
.swiper-button-next::after,
.swiper-button-prev::after{
display:none;
}
}
@media (max-width:450px){
html{
font-size: 50%;
}
.heading{
font-size:3rem;
}
}
]]>
main.js
<![CDATA[let navbar = document.querySelector('.header .navbar');
document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.add('active');
}
document.querySelector('#nav-close').onclick = () =>{
navbar.classList.remove('active');
}
window.onscroll = () =>{
navbar.classList.remove('active');
if(window.scrollY > 0){
document.querySelector('.header').classList.add('active');
}else{
document.querySelector('.header').classList.add('active');
}
};
window.onload = () =>{
if(window.scrollY > 0){
document.querySelector('.header').classList.add('active');
}else{
document.querySelector('.header').classList.add('active');
}
};
var swiper = new Swiper(".home-slider", {
loop:true,
grabCursor:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".product-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
},
});
var swiper = new Swiper(".review-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
},
});
var swiper = new Swiper(".blogs-slider", {
loop:true,
grabCursor:true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
991: {
slidesPerView: 3,
},
},
});
var swiper = new Swiper(".clients-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
},
});]]>
images
Â
