Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive NFT marketplace website 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 online nft website design</title>
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<link href="style.css" rel="stylesheet">
<link href="swiper-bundle.min.css" rel="stylesheet">
</head>
<body>
<header>
<a href="index.html">NFTStore</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu.png" alt="">
<li><a href="index.html">Home</a></li>
<li><a href="#trending">Trending</a></li>
<li><a href="#latest">Latest Nft</a></li>
<li><a href="#racking">Racking Nft</a></li>
<li><a href="#contact">Contact Us</a></li>
<p>Congratulation, Your nft purchase successfully</p>
<p>Could not apply changes</p>
</header>
<section id="home">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/home.jpg" alt="">
<h1>CITY OF THE <br /> FUTURE</h1>
<a href="#">Available Now</a>
</section>
<section id="trending">
<h2>Trending Nft</h2>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Bored Ape Yacht Club.png" alt="">
<h2>Bored Ape Yacht</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Meta Legend.png" alt="">
<h2>Meta Legend</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/CLONE X.png" alt="">
<h2>CLONE X</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/CryptoPunks.png" alt="">
<h2>CryptoPunks</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Mutant Ape Yacht Club.png" alt="">
<h2>Mutant Ape Yacht</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Doodle.png" alt="">
<h2>Doodle</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Pepsi Mic Drop.png" alt="">
<h2>Pepsi Mic Drop</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Kong.png" alt="">
<h2>Kong</h2>
<h3>Trending</h3>
4.7
<a href="#"></a>
</section>
<section id="new">
<h2>Latest Nft</h2>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Ape Kids Club.png" alt="">
<h2>Ape Kids Club</h2>
<h3>Latest</h3>
4.7
<a href="download.html"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Crypto bull.png" alt="">
<h2>Crypto bull</h2>
<h3>Latest</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Desperate ApeWife.png" alt="">
<h2>Desperate ApeWife</h2>
<h3>Latest</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Gutter Cat.png" alt="">
<h2>Gutter Cat</h2>
<h3>Latest</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Hooligan.png" alt="">
<h2>Hooligan</h2>
<h3>Latest</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Kongz.png" alt="">
<h2>Kongz</h2>
<h3>Latest</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Slotie.png" alt="">
<h2>Slotie</h2>
<h3>Latest</h3>
4.7
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Squish.png" alt="">
<h2>Squish</h2>
<h3>Latest</h3>
4.7
<a href="#"></a>
<a href="#">Next Page</a>
</section>
<a href="#">NftStore</a>
<p>© Dailywebdesign. All rights reserved.</p>
<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>]]>
download.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>Download Page</title>
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<link href="style.css" rel="stylesheet">
<link href="swiper-bundle.min.css" rel="stylesheet">
</head>
<body>
<header>
<a href="index.html">NFTStore</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu.png" alt="">
<li><a href="index.html">Home</a></li>
<li><a href="#trending">Trending</a></li>
<li><a href="#latest">Latest Nft</a></li>
<li><a href="#racking">Racking Nft</a></li>
<li><a href="#contact">Contact Us</a></li>
<p>Congratulation, Your nft purchase successfully</p>
<p>Could not apply changes</p>
</header>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/download-home.png" alt="">
<h2>Ape Kids Club</h2>
<p>A non-fungible token is a unique and non-interchangeable unit of data stored on a blockchain, a form of digital ledger.
NFTs can be associated with reproducible digital files such as photos, videos, and audio.
Ape Kids Club is a collection of 9,999 Kids Apes that were sprouted from our thousand year old magical tree. Victorior, the beloved and talented art teacher, will take care of all Kid Apes in the our Club with many planned activities and suprises.
Please see roadmap section here.</p>
<h2>ScreenShots</h2>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Ape Kids Club1.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Ape Kids Club2.png" alt="">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Ape Kids Club3.png" alt="">
<h2>Download Links</h2>
<a href="#">For Android</a>
<a href="#">For Ios</a>
<a href="#">For Windows</a>
<a href="#">NftStore</a>
<p>© Dailywebdesign. All rights reserved.</p>
<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-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:wght@400;500;600;700&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
scroll-behavior: smooth;
box-sizing: border-box;
list-style: none;
text-decoration: none;
scroll-padding-top: 2rem;
}
:root{
--main-color:#fa5353;
/* --main-color:#0d81ec; */
--dark-color: #1b182b;
--light-color: #322f40;
--text-color: hsl(0,0%,91%);
}
::selection{
color: var(--text-color);
background: var(--main-color);
}
section{
padding:4rem 0 3rem;
}
img{
width: 100%;
}
body{
color: var(--text-color);
background: var(--dark-color);
}
.container{
max-width: 1068px;
margin: auto;
width: 100%;
}
header{
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--dark-color);
z-index: 100;
}
.nav{
display: flex;
align-items: center;
justify-content: center;
padding: 16px 0;
}
.logo{
font-size: 1.4rem;
font-weight: 600;
color: var(--text-color);
text-transform:uppercase;
margin: 0 auto 0 0;
}
.logo span{
color: var(--main-color);
}
.nav-icons{
display: flex;
align-items: center;
column-gap: 1rem;
}
.nav-icons .bx{
font-size: 20px;
height: 44px;
width: 44px;
display: grid;
place-items: center;
color: var(--text-color);
background: var(--light-color);
border-radius: 50%;
cursor: pointer;
}
#bell-icon{
position:relative;
}
#bell-icon span{
content:'';
width:5px;
height:5px;
border-radius: 50%;
background: var(--main-color);
position: absolute;
top: 10px;
right: 14px;
}
.menu-icon{
display: flex;
flex-direction: column;
align-items:center;
justify-content: center;
row-gap: 5px;
height: 44px;
width: 44px;
border-radius: 50%;
background: var(--light-color);
cursor: pointer;
z-index: 200;
transition: 0.3s;
}
.menu-icon div{
display: block;
background: var(--text-color);
height:2px;
width:25px;
transition: 0.3s;
}
.move .line1{
transform: rotate(-45deg) translate(-5px, 5px);
}
.move .line2{
opacity: 0;
}
.move .line3{
transform: rotate(45deg) translate(-5px, -5px);
}
.menu{
position: absolute;
left: 0;
top: 0;
width: 100%;
height:100vh;
background: rgba(0, 0, 14, 0.9);
z-index: 106;
display:flex;
align-items: center;
justify-content: space-between;
transition: 0.5s;
clip-path: circle(0% at 100% 0%);
}
.menu.active{
clip-path: circle(144% at 100% 0%);
}
.menu img{
width: 550px;
}
.navbar{
display: grid;
row-gap: 1rem;
text-align: right;
padding-right: 2rem;
}
.navbar a{
font-size: 1.6rem;
color: var(--text-color);
font-weight: 500;
transition:0.2s;
}
.navbar a:hover{
border-bottom: 4px solid var(--main-color);
font-size: 1.8rem;
}
.notification{
position:absolute;
top: 110%;
right:5rem;
background: var(--light-color);
width:300px;
height:350px;
border-radius:0.5rem;
padding:10px;
display:flex;
flex-direction:column;
row-gap: 1rem;
clip-path: circle(0% at 100% 0%);
}
.notification.active{
clip-path: circle(144% at 100% 0%);
transition: 0.3s;
}
.notification-box{
display: flex;
align-items:baseline;
column-gap: 1rem;
border-radius: 0.5rem;
background: var(--dark-color);
padding:10px;
}
.notification-box .bx{
color: #faf102;
}
.box-color{
background: hsl(0, 0%, 100%, 0.4);
}
.box-color .bx{
color: var(--main-color);
}
.home{
position: relative;
min-height: 540px;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top:5rem;
}
.home img{
position: absolute;
width:100%;
height:100%;
object-fit: cover;
border-radius:1.4rem;
z-index: -1;
}
.home-text{
padding-right: 4rem;
text-align: right;
}
.home-text h1{
font-size: 2.4rem;
text-transform: uppercase;
color: #fff;
margin-bottom:1rem;
}
.btn{
background: var(--main-color);
padding:10px 20px;
color: var(--text-color);
text-transform: uppercase;
font-size: 1rem;
letter-spacing:1px;
font-weight: 500;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 10% 100%, 0% 68%);
}
.btn:hover{
background: var(--light-color);
transition: 0.3s all linear;
}
.heading{
display: flex;
align-items: center;
column-gap: 1rem;
margin-bottom: 2rem;
}
.heading .bx{
font-size: 21px;
color: var(--text-color);
background: var(--main-color);
padding:10px;
border-radius:5rem;
}
.heading h2{
font-size: 1.2rem;
font-weight: 500;
}
.box{
position:relative;
width:100%;
height:300px;
border-radius:0.5rem;
}
.box img{
width:100%;
height:100%;
object-fit:cover;
border-radius:0.5rem;
}
.box .box-text{
position: absolute;
right: 0;
left:0;
bottom: 0;
padding:10px;
background: hsl(227, 14%, 20%, 0.8);
backdrop-filter: blur(4px);
border-radius:0.5rem;
}
.box .box-text h2{
font-size: 1rem;
font-weight: 500;
}
.box .box-text h3{
font-size: 0.9rem;
font-weight: 400;
margin-bottom:0.8rem;
}
.rating-download{
display: flex;
justify-content:space-between;
}
.rating{
display: flex;
align-items:center;
column-gap: 4px;
background: hsl(0, 0%, 100%, 0.4);
padding:4px 10px;
border-radius:0.5rem;
}
.rating .bx{
color: #faf102;
font-size: 0.9rem;
}
.rating span{
color: #faf102;
font-size: 0.9rem;
}
.box-btn .bx{
padding: 8px;
background:var(--text-color);
border-radius:5rem;
color: var(--main-color);
font-weight: 400;
font-size: 20px;
}
.box-btn .bx:hover{
background: var(--dark-color);
}
.new-content{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(240px, 250px));
gap: 1.2rem;
}
.next-page{
display: flex;
justify-content:center;
align-items: center;
margin-top:3rem;
}
.next-page a{
background: var(--main-color);
padding: 12px 20px;
color: var(--text-color);
letter-spacing: 1px;
font-weight: 500;
}
.next-page a:hover{
background: var(--light-color);
transition: 0.3s all linear;
}
.copyright{
display: flex;
justify-content: space-between;
padding: 20px;
}
.copyright p{
font-size: 0.9rem;
color: var(--text-color);
}
/* download page css */
.img-container img{
width:100%;
aspect-ratio: 16/9;
}
.img-container{
margin-top:5rem;
}
.about{
margin-top:2rem;
}
.about h2{
display:inline-flex;
font-size: 1.4rem;
font-weight: 500;
border-bottom: 4px solid var(--main-color);
}
.about p{
font-size: 0.938rem;
margin-top:1rem;
text-align: justify;
}
.screenshots h2{
display:inline-flex;
font-size: 1.4rem;
font-weight: 500;
border-bottom: 4px solid var(--main-color);
margin: 1.6rem 0;
}
.screenshots-content{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px,auto));
gap:10px;
justify-content:center;
max-width: 800px;
margin: auto;
width: 100%;
}
.screenshots-content img{
width: 100%;
height:440px;
object-fit:cover;
}
.download{
max-width: 800px;
margin: auto;
width: 100%;
display: grid;
justify-content:center;
margin-top: 2rem;
}
.download h2{
text-align:center;
font-size: 1.4rem;
font-weight: 500;
margin: 1.6rem 0;
}
.download-links{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 2rem;
}
.download-links a{
text-align: center;
background: var(--main-color);
padding: 12px 20px;
color: var(--text-color);
letter-spacing: 1px;
font-weight: 500;
}
.download-links a:hover{
background: var(--light-color);
transition: 0.3s all linear;
}
/* display Block For Deafault Scroll Bar */
html::-webkit-scrollbar{
display:none;
}
/* custom scroll bar */
.progress{
position: fixed;
top: 0;
left: 0;
width: 100%;
height:4px;
z-index: 300;
}
.progress-bar{
height:4px;
background:var(--main-color);
width: 100%;
}
/* making Responsive / BreakPoint */
@media (max-width:1080px){
.container{
margin: 0 auto;
width: 90%;
}
.nav{
padding:10 0;
}
.notification{
right:4rem;
}
.menu img{
width:300px;
}
.section{
padding:3rem 0 2rem;
}
.home{
margin-top:4rem !important;
min-height: 440px;
}
.home img{
border-radius: 1rem;
}
.new-content{
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}
.img-container{
margin-top:5rem !important;
}
}
/* for Medium Devices */
@media (max-width:774px){
.notification{
right:1rem;
}
.menu img{
width:400px;
}
.home{
min-height: 300px;
}
.home-text h1{
font-size: 2rem;
}
.btn{
padding: 12px 17px;
}
.screenshots-content{
grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
}
}
@media (max-width:560px){
.menu img{
display: none;
}
.menu{
justify-content: flex-end;
}
.nav{
padding:8px 0;
}
.nav-icons .bx,
.menu-icon{
height:40px;
width:40px;
}
.home{
min-height: 240px;
}
.home-text{
padding-right: 1rem;
}
p{
font-size:0.875rem;
}
.download-links{
grid-template-columns: 1fr;
}
}
/* for small devices */
@media (max-width: 360px){
.logo{
font-size: 1.2rem;
}
.navbar a{
font-size: 1.3rem;
}
.navbar a:hover{
font-size: 1.4rem;
}
.notification{
width: 270px;
}
.home{
min-width: 214px;
}
.home-text h1{
font-size: 1.4rem;
}
.heading .bx{
padding: 8px;
}
.heading h2{
font-size: 1.1rem;
}
.box{
height:420px;
}
.copyright{
flex-direction: column;
align-items:center;
row-gap: 1rem;
}
.copyright .logo{
margin: 0;
}
.about h2,
.screenshots h2 .download h2{
font-size: 1.2rem;
}
}]]>
main.js
<![CDATA[let menu = document.querySelector('.menu-icon');
let navbar = document.querySelector('.menu');
menu.onclick = () => {
navbar.classList.toggle('active');
menu.classList.toggle('move');
bell.classList.remove('active');
}
let bell = document.querySelector('.notification');
document.querySelector('#bell-icon').onclick = () => {
bell.classList.toggle('active');
}
var swiper = new Swiper(".trending-content", {
loop: true,
grabCursor: true,
slidesPerView: 1,
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 10,
},
768: {
slidesPerView: 3,
spaceBetween: 15,
},
1068: {
slidesPerView: 5,
spaceBetween: 50,
},
},
});
// custom scroll bar
window.onscroll = function() {mufunction()};
function mufunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById('scroll-bar').style.width = scrolled + '%';
}]]>
images
