Â
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
<!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>
<div class="progress">
<div class="progress-bar" id="scroll-bar"></div>
</div>
<header>
<div class="nav container">
<a href="index.html" class="logo">NFT<span>Store</span></a>
<div class="nav-icons">
<i class='bx bx-bell bx-tada' id="bell-icon"><span></span></i>
<i class='bx bxs-download'></i>
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="menu">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu.png" alt="">
<div class="navbar">
<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>
</div>
</div>
<div class="notification">
<div class="notification-box">
<i class='bx bxs-check-circle'></i>
<p>Congratulation, Your nft purchase successfully</p>
</div>
<div class="notification-box box-color">
<i class='bx bx-x-circle'></i>
<p>Could not apply changes</p>
</div>
</div>
</div>
</header>
<section class="home container" id="home">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/home.jpg" alt="">
<div class="home-text">
<h1>CITY OF THE <br> FUTURE</h1>
<a href="#" class="btn">Available Now</a>
</div>
</section>
<section class="trending container" id="trending">
<div class="heading">
<i class='bx bxs-flame' ></i>
<h2>Trending Nft</h2>
</div>
<div class="trending-content swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Bored Ape Yacht Club.png" alt="">
<div class="box-text">
<h2>Bored Ape Yacht</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Meta Legend.png" alt="">
<div class="box-text">
<h2>Meta Legend</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/CLONE X.png" alt="">
<div class="box-text">
<h2>CLONE X</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/CryptoPunks.png" alt="">
<div class="box-text">
<h2>CryptoPunks</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Mutant Ape Yacht Club.png" alt="">
<div class="box-text">
<h2>Mutant Ape Yacht</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Doodle.png" alt="">
<div class="box-text">
<h2>Doodle</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Pepsi Mic Drop.png" alt="">
<div class="box-text">
<h2>Pepsi Mic Drop</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Kong.png" alt="">
<div class="box-text">
<h2>Kong</h2>
<h3>Trending</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="new container" id="new">
<div class="heading">
<i class='bx bx-infinite'></i>
<h2>Latest Nft</h2>
</div>
<div class="new-content">
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Ape Kids Club.png" alt="">
<div class="box-text">
<h2>Ape Kids Club</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="download.html" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Crypto bull.png" alt="">
<div class="box-text">
<h2>Crypto bull</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Desperate ApeWife.png" alt="">
<div class="box-text">
<h2>Desperate ApeWife</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Gutter Cat.png" alt="">
<div class="box-text">
<h2>Gutter Cat</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Hooligan.png" alt="">
<div class="box-text">
<h2>Hooligan</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Kongz.png" alt="">
<div class="box-text">
<h2>Kongz</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Slotie.png" alt="">
<div class="box-text">
<h2>Slotie</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
<div class="box">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/Squish.png" alt="">
<div class="box-text">
<h2>Squish</h2>
<h3>Latest</h3>
<div class="rating-download">
<div class="rating">
<i class='bx bxs-star'></i>
<span>4.7</span>
</div>
<a href="#" class="box-btn"><i class='bx bx-down-arrow-alt'></i></a>
</div>
</div>
</div>
</div>
<div class="next-page">
<a href="#">Next Page</a>
</div>
</section>
<div class="copyright container">
<a href="#" class="logo">Nft<span>Store</span></a>
<p>© Dailywebdesign. All rights reserved.</p>
</div>
<script type="litespeed/javascript" data-src="swiper-bundle.min.js"></script> <script type="litespeed/javascript" data-src="main.js"></script> <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/1b3f96ee2c4d7c42a4b314914800caf2.js?ver=5a62f"></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
<!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>
<div class="progress">
<div class="progress-bar" id="scroll-bar"></div>
</div>
<header>
<div class="nav container">
<a href="index.html" class="logo">NFT<span>Store</span></a>
<div class="nav-icons">
<i class='bx bx-bell bx-tada' id="bell-icon"><span></span></i>
<i class='bx bxs-download'></i>
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="menu">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu.png" alt="">
<div class="navbar">
<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>
</div>
</div>
<div class="notification">
<div class="notification-box">
<i class='bx bxs-check-circle'></i>
<p>Congratulation, Your nft purchase successfully</p>
</div>
<div class="notification-box box-color">
<i class='bx bx-x-circle'></i>
<p>Could not apply changes</p>
</div>
</div>
</div>
</header>
<div class="img-container container">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/download-home.png" alt="">
</div>
<div class="about container">
<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>
</div>
<div class="screenshots container">
<h2>ScreenShots</h2>
<div class="screenshots-content">
<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="">
</div>
</div>
<div class="download">
<h2>Download Links</h2>
<div class="download-links">
<a href="#">For Android</a>
<a href="#">For Ios</a>
<a href="#">For Windows</a>
</div>
</div>
<div class="copyright container">
<a href="#" class="logo">Nft<span>Store</span></a>
<p>© Dailywebdesign. All rights reserved.</p>
</div>
<script type="litespeed/javascript" data-src="swiper-bundle.min.js"></script> <script type="litespeed/javascript" data-src="main.js"></script> <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/1b3f96ee2c4d7c42a4b314914800caf2.js?ver=5a62f"></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
@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
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
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |
 |
| nft marketplace website |