Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive best crypto 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 Crypto Website Design Tutorial</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-beta2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<a href="#">Crypto.</a>
<nav>
<a href="#home">home</a>
<a href="#crypto">crypto</a>
<a href="#about">about</a>
<a href="#service">service</a>
<a href="#review">review</a>
</nav>
<a href="#"></a>
</header>
<section id="home">
Our crypto offer
<h3>Bitcoin Mining</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">start now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Bitcoin Mining.png">
Our crypto offer
<h3>Cryptocurrency Analytic</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">start now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Analytic.png">
Our crypto offer
<h3>Cryptocurrency Investment</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">start now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Investment.png">
</section>
<section id="crypto">
<h3> Our crypto</h3>
<h3> popular crypto</h3>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/bitcoin.png">
<h3>Bit Coin</h3>
$58,610.00
<a href="#">buy now</a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/ethereum.png">
<h3>Etherum Coin</h3>
$4,747.56
<a href="#">buy now</a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/ripple.png">
<h3>Ripple Coin</h3>
$1.01
<a href="#">buy now</a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/tron.png">
<h3>Torn Coin</h3>
$0.100
<a href="#">buy now</a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/doge.png">
<h3>Doge Coin</h3>
$0.22
<a href="#">buy now</a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/binance.png">
<h3>Binance Coin</h3>
$67,221.43
<a href="#">buy now</a>
</section>
<section id="about">
<h3> about us</h3>
<h3> why choose us?</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Secure Cryptocurrency.png">
<h3>best security in the cryptocurrency</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
free security
easy payments
24/7 service
<a href="#">learn more</a>
</section>
<section id="service">
<h3> our service</h3>
<h3> today's special service</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Mining Server.png">
<a href="#"></a>
<h3>Cryptocurrency Mining Server</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Exchange.png">
<a href="#"></a>
<h3>Cryptocurrency Exchange</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Mining.png">
<a href="#"></a>
<h3>Cryptocurrency Mining</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Trading Bot.png">
<a href="#"></a>
<h3>Cryptocurrency Trading Bot</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Wallet.png">
<a href="#"></a>
<h3>Cryptocurrency Wallet</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/People doing Crypto Trading Course.png">
<a href="#"></a>
<h3>People doing Crypto Trading</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Man looking at Cryptocurrency Trading desk.png">
<a href="#"></a>
<h3>Man looking at Cryptocurrency</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/CryptocurrencyStatistics.png">
<a href="#"></a>
<h3>CryptocurrencyStatistics</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Cryptocurrency Profit.png">
<a href="#"></a>
<h3>Cryptocurrency Profit</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#">add to service</a>
$12.99
</section>
<section id="review">
<h3> customer's review</h3>
<h3> what they say</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-1.jpg">
<h3>jenna deo</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-2.jpg">
<h3>Edward deo</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-3.jpg">
<h3>jenna deo</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-4.png">
<h3>jenna deo</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<section>
<h3>location</h3>
<a href="#">UAE</a>
<a href="#">USA</a>
<a href="#">japan</a>
<a href="#">India</a>
<a href="#">russia</a>
<h3>quick links</h3>
<a href="#">home</a>
<a href="#">crypto</a>
<a href="#">about</a>
<a href="#">serives</a>
<a href="#">review</a>
<h3>contact info</h3>
<a href="#">+123-456-7890</a>
<a href="#">+111-222-3333</a>
<a href="#">shaikhfarhan@gmail.com</a>
<a href="#">farhanbhai@gmail.com</a>
<a href="#">mumbai, india - 401204</a>
<h3>follow us</h3>
<a href="#">meta</a>
<a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">linkedin</a>
copyright @ 2022 by dailywebdesign
</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/59d5836ab6fc63a02ebec593ef7418c8.js?ver=bd08d"></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=Nunito:wght@200;300;400;600;700&display=swap');
:root{
--green:#27ae60;
--black:#192a56;
--light-color:#666;
--box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border:none;
text-transform: capitalize;
transition: all .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 5.5rem;
scroll-behavior: smooth;
background: #eee;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
background: #eee;
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
box-shadow: var(--box-shadow);
}
section{
padding: 2rem 9%;
}
section:nth-child(even){
background: #fff;
}
.sub-heading{
text-align: center;
color: var(--green);
font-size: 2rem;
padding-top: 1rem;
}
.heading{
text-align: center;
color: var(--black);
font-size: 3rem;
padding-bottom: 2rem;
text-transform: uppercase;
}
.btn{
margin-top: 1rem;
display: inline-block;
font-size: 1.7rem;
color: #fff;
background: var(--black);
border-radius: .5rem;
cursor: pointer;
padding: .8rem 3rem;
}
.btn:hover{
background: var(--green);
letter-spacing: .1rem;
}
header .logo{
color: var(--black);
font-size: 2.5rem;
font-weight: bolder;
}
header .logo i {
color: var(--green);
}
header .navbar a{
font-size: 1.7rem;
border-radius: .5rem;
padding: .5rem 1.5rem;
color: var(--light-color);
}
header .navbar a.active,
header .navbar a:hover{
color: #fff;
background: var(--green);
}
header .icons i,
header .icons a{
cursor: pointer;
margin-left: .5rem;
height: 4.5rem;
line-height: 4.5rem;
width: 4.5rem;
text-align: center;
font-size: 1.7rem;
color: var(--black);
border-radius: 50%;
background: #fff;
}
header .icons i:hover,
header .icons a:hover{
color: #eee;
background: var(--green);
transform: rotate(360deg);
}
header .icons #menu-bars{
display: none;
}
.home .home-slider .slide{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:2rem;
padding-top: 9rem;
}
.home .home-slider .slide .content{
flex:1 1 45rem;
}
.home .home-slider .slide .img{
flex:1 1 45rem;
}
.home .home-slider .slide .img img{
width: 100%;
}
.home .home-slider .slide .content span{
color: var(--green);
font-size: 2.5rem;
}
.home .home-slider .slide .content h3{
color: var(--black);
font-size: 7rem;
}
.home .home-slider .slide .content p{
color: var(--light-color);
font-size: 2.2rem;
padding:.5rem 0;
line-height: 1.5;
}
.swiper-pagination-buttle-active{
background: var(--green);
}
.crypto .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
gap:1.5rem;
}
.crypto .box-container .box{
padding: 2.5rem;
background:#fff;
border-radius: .5rem;
border: .1rem solid rgba(0,0,0,.2);
box-shadow: var(--box-shadow);
position: relative;
overflow: hidden;
text-align: center;
}
.crypto .box-container .box .fa-heart,
.crypto .box-container .box .fa-eye{
position: absolute;
top: 1.5rem;
background: #eee;
border-radius: 50%;
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
color: var(--black);
}
.crypto .box-container .box .fa-heart:hover,
.crypto .box-container .box .fa-eye:hover{
background: var(--green);
color: #fff;
}
.crypto .box-container .box .fa-heart{
right: -15rem;
}
.crypto .box-container .box .fa-eye{
left: -15rem;
}
.crypto .box-container .box:hover .fa-heart{
right: 1.5rem;
}
.crypto .box-container .box:hover .fa-eye{
left: 1.5rem;
}
.crypto .box-container .box img{
height: 17rem;
margin: 1rem 0;
}
.crypto .box-container .box h3{
color: var(--black);
font-size: 2.5rem;
}
.crypto .box-container .box .stars{
padding: 1rem 0;
}
.crypto .box-container .box .stars i{
font-size: 1.7rem;
color: var(--green);
}
.crypto .box-container .box span{
color: var(--green);
font-weight: bolder;
margin-right: 1rem;
font-size: 2.5rem;
}
.about .row{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
align-items: center;
}
.about .row .img{
flex: 1 1 45rem;
}
.about .row .img img{
width: 100%;
}
.about .row .content{
flex: 1 1 45rem;
}
.about .row .content h3{
color: var(--black);
font-size: 4rem;
padding: .5rem 0;
}
.about .row .content p{
color: var(--light-color);
font-size: 1.5rem;
padding: .5rem 0;
line-height: 2;
}
.about .row .content .icons-container{
display: flex;
gap:1rem;
flex-wrap: wrap;
padding: 1rem 0;
margin-top: .5rem;
}
.about .row .content .icons-container .icons{
background: #eee;
border-radius: .5rem;
border: .1rem solid rgba(0,0,0,.2);
display: flex;
align-items: center;
justify-content: center;
gap:1rem;
flex:1 1 17rem;
padding: 1.5rem 1rem;
}
.about .row .content .icons-container .icons i{
font-size: 2.5rem;
color: var(--green);
}
.about .row .content .icons-container .icons span{
font-size: 1.5rem;
color: var(--black);
}
.service .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.service .box-container .box{
background: #fff;
border:.1rem solid rgba(0,0,0,.2);
border-radius: .5rem;
box-shadow: var(--box-shadow);
}
.service .box-container .box .img{
height: 25rem;
width: 100%;
padding: 1.5rem;
overflow: hidden;
position: relative;
}
.service .box-container .box .img img{
height: 100%;
width: 100%;
border-radius: .5rem;
object-fit: cover;
}
.service .box-container .box .img .fa-heart{
position: absolute;
top: 2.5rem;
right: 2.5rem;
height: 5rem;
width: 5rem;
line-height: 5rem;
text-align: center;
font-size: 2rem;
background:#fff;
border-radius: 50%;
color: var(--black);
}
.service .box-container .box .img .fa-heart:hover{
background-color: var(--green);
color: #fff;
}
.service .box-container .box .content{
padding: 2rem;
padding-top: 0;
}
.service .box-container .box .content .stars{
padding-bottom: 1rem;
}
.service .box-container .box .content .stars i{
font-size: 1.7rem;
color: var(--green);
}
.service .box-container .box .content h3{
color: var(--black);
font-size: 2.1rem;
}
.service .box-container .box .content p{
color: var(--light-color);
font-size: 1.3rem;
padding: .5rem 0;
line-height: 1.5;
}
.service .box-container .box .content .price{
color: var(--green);
margin-left: 1rem;
font-size: 2.5rem;
}
.review .slide{
padding: 2rem;
box-shadow: var(--box-shadow);
border: .1rem solid rgba(0,0,0,.2);
border-radius: .5rem;
position: relative;
}
.review .slide .fa-quote-right{
position: absolute;
top: 2rem;
right: 2rem;
font-size: 6rem;
color: #ccc;
}
.review .slide .user{
display: flex;
gap:1.5rem;
align-items: center;
padding-bottom: 1.5rem;
}
.review .slide .user img{
height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
}
.review .slide .user h3{
color: var(--black);
font-size: 2rem;
padding-bottom: .5rem;
}
.review .slide .user i{
font-size: 1.3rem;
color: var(--green);
}
.review .slide p{
font-size: 1.5rem;
line-height: 1.8;
color: var(--light-color);
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1.5rem;
}
.footer .box-container .box h3{
padding:.5rem 0;
font-size: 2.5rem;
color: var(--black);
}
.footer .box-container .box a{
display: block;
padding:.5rem 0;
font-size: 1.5rem;
color: var(--light-color);
}
.footer .box-container .box a:hover{
color: var(--green);
text-decoration: underline;
}
.footer .credit{
text-align: center;
border-top: .1rem solid rgba(0,0,0,.1);
font-size: 2rem;
color: var(--black);
padding:.5rem;
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.footer .credit span{
color: var(--green);
}
/*media query*/
@media (max-width:991px){
html{
font-size: 55%;
}
header{
padding: 1rem 2rem;
}
section{
padding:2rem;
}
}
@media (max-width:768px){
header .icons #menu-bars{
display: inline-block;
}
header .navbar{
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-top: .1rem soild rgba(0,0,0,.2);
border-bottom: .1rem soild rgba(0,0,0,.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .navbar a{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: #eee;
}
.home .home-slider .slide .content h3{
font-size: 5rem;
}
@media (max-width:450px){
html{
font-size: 50%;
}
.crypto .box-container .box img{
height: auto;
width: 100%;
}
}]]>
main.js
<![CDATA[let menu = document.querySelector('#menu-bars');
let navbar = document.querySelector('.navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}
let section = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header .navbar a');
window.onscroll = () =>{
menu.classList.remove('fa-times');
navbar.classList.remove('active');
section.forEach(sec =>{
let top = window.scrollY;
let height = sec.offsetHeight;
let offset = sec.offsetTop - 150;
let id = sec.getAttribute('id');
if(top >= offset && top < offset + height){
navLinks.forEach(links =>{
links.classList.remove('active');
document.querySelector('header .navbar a[href*='+id+']').classList.add('active');
});
};
});
}
var swiper = new Swiper(".home-slider", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 7500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
loop:true,
});
var swiper = new Swiper(".review-slider", {
spaceBetween: 20,
centeredSlides: true,
autoplay: {
delay: 7500,
disableOnInteraction: false,
},
loop:true,
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});]]>
images
