Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive website NFT website design using HTML CSS, And JAVASCRIPT in this Blog.
Using standard JavaScript, users can use the navigation buttons on the web design moving car animation  website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.
You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.
Index.html
<!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 nft website with roadmap design</title>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header section start page start -->
<header class="header">
<a href="#" class="logo"> <i class="fas fa-cubes"></i> Dippies. </a>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">Story</a>
<a href="#">The Fire Pit</a>
<a href="#">Roadmap</a>
<a href="#">Meet the Team</a>
<a href="#">FAQ</a>
</nav>
<div class="icons">
<div id="menu-btn" class="fas fa-bars"></div>
<div id="search-btn" class="fas fa-search"></div>
<div id="cart-btn" class="fas fa-shopping-cart"></div>
<div id="login-btn" class="fas fa-user"></div>
</div>
</header>
<!-- home section start -->
<section class="home" id="home">
<div class="slides-container">
<div class="slide active">
<div class="content">
<div class="slideimg">
<img decoding="async" src="img/main.png">
</div>
<h3>Funk, meet web 3. A collection of 8,888 unique digital hippies that
are building the new free world before our eyes.</h3>
<a href="#" class="btn">twitter</a>
<a href="#" class="btn">opensea</a>
</div>
<div class="img">
<img decoding="async" src="img/main1.png" alt="">
</div>
</div>
<div class="slide">
<div class="content">
<div class="slideimg">
<img decoding="async" src="img/main.png">
</div>
<h3>Funk, meet web 3. A collection of 8,888 unique digital hippies that
are building the new free world before our eyes.</h3>
<a href="#" class="btn">twitter</a>
<a href="#" class="btn">opensea</a>
</div>
<div class="img">
<img decoding="async" src="img/main2.png" alt="">
</div>
</div>
</div>
<div id="next-slide"class="fas fa-angle-right" onclick="next()"></div>
<div id="prev-slide"class="fas fa-angle-left" onclick="next()"></div>
</section>
<!-- banner section start -->
<section class="banner-container">
<div class="banner">
<img decoding="async" src="img/home.webp">
<div class="content">
<span>special offer</span>
<h3>upto 50% off</h3>
<a href="#" class="btn">check out</a>
</div>
</div>
</section>
<!-- story section start -->
<section class="story">
<h1 class="title"> our <span>story</span><a href="#">view all >></a> </h1>
<div class="box-container">
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide.png">
</div>
<div class="content">
<h3>Rock-Star Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide1.png">
</div>
<div class="content">
<h3>Corporate Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide2.png">
</div>
<div class="content">
<h3>Stoner Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide3.png">
</div>
<div class="content">
<h3>Psychedelic Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide4.png">
</div>
<div class="content">
<h3>Artistic Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide5.png">
</div>
<div class="content">
<h3>Musician Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide6.png">
</div>
<div class="content">
<h3>Road Tripping Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="box">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="img">
<img decoding="async" src="img/slide7.jpg">
</div>
<div class="content">
<h3>Developer Dippie</h3>
<div class="price">$19.99</div>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</section>
<!-- The Fire pit section start -->
<section>
<h1 class="title"> The <span>Firepit</span> <a href="#">read more >></a> </h1>
</section>
<section class="firepit">
<div class="content">
<h3>The Fire Pit</h3>
<p>Here is where we come together and help shape the
future of Dippies. This is a spot where the dippie-
collective gather to make a difference in the web3
space and vote on proposals as a community.
<br><br>
Come and get to know the family today; showcase
your skills and find like minded people.
</p>
<a href="#" class="btn">check out</a>
</div>
<div class="img">
<img decoding="async" src="img/fire pits.png">
</div>
</section>
<!-- roadmap section start -->
<section>
<h1 class="title">roadmap <span>review</span> <a href="#">read more >></a> </h1>
</section>
<section class="roadmap" id="roadmap">
<div class="swiper mySwiper roadmap-slider">
<div class="swiper-wrapper wrapper">
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/slide11.png">
<div class="user-info">
<h3>COMMUNITY ✅</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<p>When we first began Dippies we had a simple goal in mind;
to adopt a community first farhan that holds a safe-space
for all members. The process is simple but efficient. Peace,
love and kindness toward others is a big part of who we are.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/slide44.png">
<div class="user-info">
<h3>BOUNTY ✅</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<p>When we first began Dippies we had a simple goal in mind;
to adopt a community first farhan that holds a safe-space
for all members. The process is simple but efficient. Peace,
love and kindness toward others is a big part of who we are.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/slide55.png">
<div class="user-info">
<h3>DippieStash ✅</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<p>When we first began Dippies we had a simple goal in mind;
to adopt a community first farhan that holds a safe-space
for all members. The process is simple but efficient. Peace,
love and kindness toward others is a big part of who we are.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/slide66.png">
<div class="user-info">
<h3>MERCH</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<p>When we first began Dippies we had a simple goal in mind;
to adopt a community first farhan that holds a safe-space
for all members. The process is simple but efficient. Peace,
love and kindness toward others is a big part of who we are.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/slide71.png">
<div class="user-info">
<h3>RELEASING</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<p>When we first began Dippies we had a simple goal in mind;
to adopt a community first farhan that holds a safe-space
for all members. The process is simple but efficient. Peace,
love and kindness toward others is a big part of who we are.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/slide99.jpeg">
<div class="user-info">
<h3>ROADMAP 2.0</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-alt"></i>
</div>
</div>
</div>
<p>When we first began Dippies we had a simple goal in mind;
to adopt a community first farhan that holds a safe-space
for all members. The process is simple but efficient. Peace,
love and kindness toward others is a big part of who we are.</p>
</div>
</div>
</div>
</section>
<!-- meet my team section start -->
<section class="teams">
<h1 class="title">our <span>team</span> <a href="#">view all >></a></h1>
<div class="box-container">
<div class="box">
<div class="img">
<img decoding="async" src="img/founder.png">
</div>
<div class="content">
<div class="icons">
<a href="#" class="fas fa-calendar"></i>12 jan, 2022</a>
<a href="#" class="fas fa-user"></i>by Sal</a>
</div>
<h3>Founding Dippie</h3>
<p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
<a href="#" class="btn">read more...</a>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/mainside.png">
</div>
<div class="content">
<div class="icons">
<a href="#" class="fas fa-calendar"></i>12 jan, 2022</a>
<a href="#" class="fas fa-user"></i>by Taylor</a>
</div>
<h3>Founder & Artist</h3>
<p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
<a href="#" class="btn">read more...</a>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/owner.png">
</div>
<div class="content">
<div class="icons">
<a href="#" class="fas fa-calendar"></i>12 jan, 2022</a>
<a href="#" class="fas fa-user"></i>by Latency Labs</a>
</div>
<h3>Developer</h3>
<p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
<a href="#" class="btn">read more...</a>
</div>
</div>
</div>
</section>
<!-- faq section start -->
<section class="">
<h1 class="title">FAQ <span>question</span> <a href="#">what we say >></a></h1>
</section>
<section class="faq">
<div class="icons-container">
<div class="icons">
<i class="fas fa-bookmark"></i>
<h3>Is there a place to buy off of secondaries?</h3>
<p>Opensea</p>
<p>Looks Rare</p>
</div>
<div class="icons">
<i class="fas fa-money-bill-alt"></i>
<h3>What are your secondary royalty fees?</h3>
<p>5%</p>
<p>0.02%</p>
</div>
<div class="icons">
<i class="fas fa-cookie"></i>
<h3>Total number of tokens Blockchain:</h3>
<p>8.888</p>
<p>7.561</p>
</div>
</div>
</section>
<!-- footer section start -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>quick links</h3>
<a href="#"> <i class="fa fa-arrow-right"></i>Home</a>
<a href="#"> <i class="fa fa-arrow-right"></i>Story</a>
<a href="#"> <i class="fa fa-arrow-right"></i>The Fire Pit</a>
<a href="#"> <i class="fa fa-arrow-right"></i>Roadmap</a>
<a href="#"> <i class="fa fa-arrow-right"></i>Meet the Team</a>
<a href="#"> <i class="fa fa-arrow-right"></i>FQA</a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#"> <i class="fa fa-arrow-right"></i> my order</a>
<a href="#"> <i class="fa fa-arrow-right"></i> my favorite</a>
<a href="#"> <i class="fa fa-arrow-right"></i> my wishlist</a>
<a href="#"> <i class="fa fa-arrow-right"></i> my account</a>
<a href="#"> <i class="fa fa-arrow-right"></i> terms or use</a>
<a href="#"> <i class="fa fa-arrow-right"></i> policy</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#"> <i class="fab fa-facebook-f"></i> facebook</a>
<a href="#"> <i class="fab fa-twitter"></i> twitter</a>
<a href="#"> <i class="fab fa-instagram"></i> instagram</a>
<a href="#"> <i class="fab fa-discord"></i> Discord</a>
<a href="#"> <i class="fab fa-pinterest"></i> pinterest</a>
</div>
<div class="box">
<h3>newsletter</h3>
<p>subscribe for latest update</p>
<form action="">
<input type="email" placeholder="enter your email address">
<input type="submit" value="subscribe" class="btn">
</form>
<img decoding="async" src="img/payment.png" class="payments">
</div>
</div>
</section>
<section class="credit">created by <span>Dailywebdesign</span> || all rights reserved</section>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<!-- custom ja file link -->
<script src="main.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
:root{
--Tusk:#B0E5E3;
--main:#2E307D;
--meet:#FFE9E2;
}
body{
background:var(--Tusk);
}
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-transform: uppercase;
text-decoration: none;
transition: .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
}
section{
padding: 3rem 9%;
}
.title{
display: flex;
align-items: center;
font-size: 2.5rem;
margin-bottom:3rem;
padding:1.2rem 0;
border-bottom: 1px solid rgba(0,0,0,0.7);
color: var(--main);
}
.title span{
color: var(--main);
padding-left: .7rem;
}
.title a{
margin-left: auto;
color: var(--main);
font-size: 1.5rem;
}
.title a:hover{
color: #fff;
}
.btn{
margin-top: 1rem;
display:inline-block;
padding:.8rem 3rem;
background-color:var(--main);
color:var(--Tusk);
font-size: 1.7rem;
cursor:pointer;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
border:0.1rem solid rgba(0,0,0,0.7);
}
.btn:hover{
background: var(--Tusk);
color: var(--main);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.header{
position:fixed;
top:0;
left:0;
right:0;
z-index: 1000;
background: var(--main);
display:flex;
align-items: center;
justify-content: space-between;
padding:2rem 9%;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
}
.header .logo{
font-size: 2.4rem;
font-weight: bolder;
color: var(--Tusk);
}
.header .logo i{
color: var(--Tusk);
padding-right: .5rem;
}
.header .navbar a{
font-size:1.7rem;
color: var(--Tusk);
margin: 0 1rem;
font-weight: bold;
}
.header .navbar a:hover{
color: #fff;
}
.header .icons div{
font-size: 2.5rem;
margin-left: 1.7rem;
cursor: pointer;
color:var(--Tusk);
}
.header .icons div:hover{
color: #fff;
}
#menu-btn{
display: none;
}
@keyframes fadeLeft{
0%{
opacity: 0;
transform:translateY(-5rem);
}
}
@keyframes fadeUp {
0%{
opacity: 0;
transform: scale(0.5);
}
}
.home{
padding-top: 14rem;
background-color:var(--Tusk);
background-size: cover;
background-position: center;
position: relative;
}
.home .slides-container .slide{
display:flex;
align-items:center;
flex-wrap: wrap;
gap: 1.5rem;
display:none;
}
.home .slides-container .slide.active{
display: flex;
}
.home .slides-container .slide .content{
flex: 1 1 40rem;
animation:fadeLeft .4s linear .4s backwards;
}
.home .slides-container .slide .content h3{
color: var(--main);
font-size: 2.0rem;
align-items: center;
}
.home .slides-container .slide .content .slideimg img{
display: inline-block;
}
.home .slides-container .slide .img{
flex: 1 1 40rem;
margin: 3rem 0;
}
.home .slides-container .slide .img img{
width: 100%;
height:490px;
animation:fadeUp .4s linear;
}
.home #next-slide,
.home #prev-slide{
position: absolute;
top: 50%;
transform:translateY(-50%);
height:5rem;
width:5rem;
line-height: 5rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
border: 0.1rem solid rgba(0,0,0,0.7);
text-align: center;
background:var(--main);
font-size: 2rem;
color: var(--Tusk);
cursor: pointer;
}
.home #next-slide:hover,
.home #prev-slide:hover{
background: var(--Tusk);
color: var(--main);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.home #prev-slide{
left: 2rem;
}
.home #next-slide{
right: 2rem;
}
.banner-container{
background:var(--Tusk);
display:flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.banner-container .banner{
flex: 1 1 35rem;
height:65rem;
overflow: hidden;
position: relative;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
border: 0.1rem solid rgba(0,0,0,0.7);
}
.banner-container .banner img{
height:100%;
width:100%;
object-fit: cover;
}
.banner-container .banner .content{
position: absolute;
top: 70%;
left: 4%;
transform:translateY(-50%);
}
.banner-container .banner .content h3{
font-size: 3rem;
color: #000;
text-shadow:0 0.5rem 1rem rgba(0,0,0,0.7);
}
.banner-container .banner .content span{
font-size: 2.5rem;
color: #000;;
text-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
}
.banner-container .banner:hover img{
transform:scale(1.2) rotate(-5deg);
}
.story .box-container{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
}
.story .box-container .box{
position:relative;
background-color:var(--main);
text-align: center;
overflow: hidden;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
border: 0.1rem solid rgba(0,0,0,0.7);
}
.story .box-container .box:hover .icons{
top: 0;
height:35rem;
}
.story .box-container .box .icons{
position:absolute;
top: -105%;
left: 0;
height:35rem;
width: 100%;
display:flex;
align-items:center;
justify-content:center;
background:var(--main);
gap: 1rem;
}
.story .box-container .box .icons a{
font-size: 2rem;
height:5rem;
width:5rem;
line-height: 5rem;
background: var(--Tusk);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
color:var(--main)
}
.story .box-container .box .icons a:hover{
background: var(--Tusk);
color:var(--main);
height:17rem;
}
.story .box-container .box .img{
height:27rem;
width:27rem;
overflow:hidden;
}
.story .box-container .box .img img{
height:100%;
width:100%;
object-fit:cover;
}
.story .box-container .box .content{
padding:1.5rem;
}
.story .box-container .box .content .price{
font-size: 1.4rem;
color: var(--Tusk);
}
.story .box-container .box .content h3{
font-size:2rem;
color: var(--Tusk);
}
.story .box-container .box .content .stars i{
font-size: 1.4rem;
color: yellow;
}
.firepit{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.firepit .img{
flex: 1 1 40rem;
}
.firepit .img img{
width: 100%;
height:55rem;
overflow: hidden;
object-fit: cover;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
border: 0.1rem solid rgba(0,0,0,0.7);
}
.firepit .content{
flex: 1 1 40rem;
}
.firepit .content h3{
color: var(--main);
font-size: 3rem;
padding-top: .5rem;
}
.firepit .content p{
color: var(--main);
font-size:2rem;
padding:1rem 0;
}
.roadmap .slide{
padding:2rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
border: 0.1rem solid rgba(0,0,0,0.7);
border-radius: .5rem;
position: relative;
background:var(--main);
}
.roadmap .slide .fa-quote-right{
position: absolute;
top: 2rem;
right: 2rem;
font-size: 6rem;
color: var(--Tusk);
}
.roadmap .slide .user{
display:flex;
gap: 1.5rem;
align-items: center;
padding-bottom: 1.5rem;
}
.roadmap .slide .user img{
height:7rem;
width:7rem;
border-radius: 50%;
object-fit: cover;
}
.roadmap .slide .user h3{
color: var(--Tusk);
font-size: 2rem;
padding-bottom:5rem;
}
.roadmap .slide .user i{
font-size: 1.3rem;
color:yellow;
}
.roadmap .slide p{
font-size: 1.5rem;
line-height: 1.8;
color:var(--Tusk);
}
.teams .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.teams .box-container .box{
border: 0.1rem solid rgba(0,0,0,0.7);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
background:var(--main);
}
.teams .box-container .box .img{
height:27rem;
width:27rem;
overflow:hidden;
}
.teams .box-container .box .img:hover img{
transform:scale(1.2);
}
.teams .box-container .box .img img{
height:100%;
width:100%;
object-fit: cover;
}
.teams .box-container .box .content{
padding:2rem 1.5rem;
}
.teams .box-container .box .content .icons{
border-radius:0.1rem solid rgba(0,0,0,0.1);
padding-bottom: 1.7rem;
margin-bottom: 1.7rem;
display: flex;
align-items: center;
justify-content:space-between;
}
.teams .box-container .box .content .icons a{
font-size: 1.4rem;
color: var(--Tusk);
}
.teams .box-container .box .content .icons a:hover{
color: #fff;
}
.teams .box-container .box .content .icons a i{
color: var(--Tusk);
padding-right:.5rem;
}
.teams .box-container .box .content h3{
font-size: 2.2rem;
color: var(--Tusk);
}
.teams .box-container .box .content p{
font-size: 1.4rem;
color: var(--Tusk);
line-height: 2;
padding:1rem 0;
}
.faq .icons-container{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
gap: 1.5rem;
}
.faq .icons-container .icons{
text-align:center;
border: 0.1rem solid rgba(0,0,0,0.7);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
padding: 2rem;
background:var(--main);
}
.faq .icons-container .icons i{
height:6rem;
width:6rem;
line-height: 6rem;
font-size: 2.5rem;
background: var(--Tusk);
color:var(--main);
border-radius:50%;
}
.faq .icons-container .icons h3{
color: var(--Tusk);
font-size: 2rem;
padding:1rem 0;
}
.faq .icons-container .icons p{
color: var(--Tusk);
font-size: 1.5rem;
line-height: 2;
}
.footer{
background:var(--main);
}
.footer .box-container{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1.5rem;
}
.footer .box-container .box h3{
font-size: 2.2rem;
color: var(--Tusk);
padding:1rem 0;
}
.footer .box-container .box p{
font-size: 1.5rem;
color: var(--Tusk);
padding-bottom: .5rem;
}
.footer .box-container .box a{
font-size: 1.4rem;
color: var(--Tusk);
padding: 1rem 0;
display:block;
}
.footer .box-container .box a:hover{
color: #fff;
}
.footer .box-container .box a:hover i{
padding-right: 2rem;
}
.footer .box-container .box a i{
padding-right:.5rem;
color: var(--Tusk);
}
.footer .box-container .box form input[type="email"]{
width: 100%;
padding:1rem 1.2rem;
font-size: 1.6rem;
color: var(--Tusk);
margin: 1rem 0;
text-transform: none;
}
.footer .box-container .box .payments{
width: 100%;
margin-top: 2rem;
}
.credit{
text-align: center;
background:var(--main);
color:#000;
font-size: 2rem;
}
.credit span{
color:var(--Tusk);
}
/* media queries */
@media(max-width:991px){
html{
font-size: 55%;
}
.header{
padding:2rem;
}
section{
padding:3rem 2rem;
}
.home #next-slide,
.home #prev-slide{
transform:translateY(0);
top: 88%;
}
.home #prev-slide{
left:auto;
right: 8rem;
}
}
@media(max-width:768px){
#menu-btn{
display: inline-block;
}
.header .navbar{
position:absolute;
top:99%;
left:0;
right:0;
background:var(--main);
border-top:1px solid rgba(0,0,0,0.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.header .navbar a{
margin: 1.5rem;
padding:1.5rem;
background:var(--Tusk);
font-size: 2rem;
display:block;
border-radius: .5rem;
}
}
@media(max-width:450px){
html{
font-size: 50%;
}
.home .slides-container .slide .content .slideimg img{
display: none;
}
.home .slides-container .slide .content h3{
font-size:1rem;
}
.story .box-container .box .img{
width: 100%;
}
}
main.js
let navbar = document.querySelector('.navbar');
document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.toggle('active');
}
window.onscroll = () =>{
navbar.classList.remove('active');
}
let slides = document.querySelectorAll('.home .slides-container .slide');
let index = 0;
function next(){
slides[index].classList.remove('active');
index = (index + 1) % slides.length;
slides[index].classList.add('active');
}
function prev(){
slides[index].classList.remove('active');
index = (index - 1 + slides.length) % slides.length;
slides[index].classList.add('active');
}
var swiper = new Swiper('.roadmap-slider', {
spaceBetween: 20,
centeredSlides: true,
autoplay: {
delay:7500,
disableOnInteraction: false,
},
loop:true,
breakpoints:{
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});
images
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |
 |
| nft website design |