Â
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>
<!-- box icons link -->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<!-- custom css file link -->
<link href="style.css" rel="stylesheet">
<!-- swiper css file link-->
<link href="swiper-bundle.min.css" rel="stylesheet">
</head>
<body>
<!-- custom scroll bar -->
<div class="progress">
<div class="progress-bar" id="scroll-bar"></div>
</div>
<!-- header -->
<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>
<!-- menu -->
<div class="menu">
<img decoding="async" 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>
<!-- notification -->
<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>
<!-- home section start -->
<section class="home container" id="home">
<img decoding="async" 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>
<!-- home section ends -->
<!-- Trending section starts -->
<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">
<!-- slide -->
<div class="swiper-slide">
<div class="box">
<img decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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>
<!-- Trending section ends -->
<!-- New section starts -->
<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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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 decoding="async" 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>
<!-- new section ends -->
<!-- copyright -->
<div class="copyright container">
<a href="#" class="logo">Nft<span>Store</span></a>
<p>© Dailywebdesign. All rights reserved.</p>
</div>
<!-- link swiper file -->
<script src="swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script src="main.js"></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>
<!-- box icons link -->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<!-- custom css file link -->
<link href="style.css" rel="stylesheet">
<!-- swiper css file link-->
<link href="swiper-bundle.min.css" rel="stylesheet">
</head>
<body>
<!-- custom scroll bar -->
<div class="progress">
<div class="progress-bar" id="scroll-bar"></div>
</div>
<!-- header -->
<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>
<!-- menu -->
<div class="menu">
<img decoding="async" 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>
<!-- notification -->
<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>
<!-- video -->
<div class="img-container container">
<img decoding="async" src="img/download-home.png" alt="">
</div>
<!-- about -->
<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>
<!-- screenshota -->
<div class="screenshots container">
<h2>ScreenShots</h2>
<div class="screenshots-content">
<img decoding="async" src="img/Ape Kids Club1.png" alt="">
<img decoding="async" src="img/Ape Kids Club2.png" alt="">
<img decoding="async" src="img/Ape Kids Club3.png" alt="">
</div>
</div>
<!-- download -->
<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>
<!-- copyright -->
<div class="copyright container">
<a href="#" class="logo">Nft<span>Store</span></a>
<p>© Dailywebdesign. All rights reserved.</p>
</div>
<!-- link swiper file -->
<script src="swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script src="main.js"></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 |