Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive best crypto website design using HTML CSS And JAVASCRIPT in this Blog.
Using standard JavaScript, users can use the navigation buttons on the web design moving car animation  website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.
You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive Crypto Website Design Tutorial</title>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- header section start -->
<header>
<a href="#" class="logo"><i class="fas fa-infinity"></i>Crypto.</a>
<nav class="navbar">
<a class="active" href="#home">home</a>
<a href="#crypto">crypto</a>
<a href="#about">about</a>
<a href="#service">service</a>
<a href="#review">review</a>
</nav>
<div class="icons">
<i class="fas fa-bars" id="menu-bars"></i>
<i class="fas fa-search" id="search-icon"></i>
<a href="#" class="fas fa-heart"></a>
</div>
</header>
<!-- header section ends -->
<!-- home section start -->
<section class="home" id="home">
<div class="swiper mySwiper home-slider">
<div class=" swiper-wrapper wrapper">
<div class="swiper-slide slide">
<div class="content">
<span>Our crypto offer</span>
<h3>Bitcoin Mining</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">start now</a>
</div>
<div class="img">
<img decoding="async" src="img/Bitcoin Mining.png">
</div>
</div>
<div class="swiper-slide slide">
<div class="content">
<span>Our crypto offer</span>
<h3>Cryptocurrency Analytic</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">start now</a>
</div>
<div class="img">
<img decoding="async" src="img/Cryptocurrency Analytic.png">
</div>
</div>
<div class="swiper-slide slide">
<div class="content">
<span>Our crypto offer</span>
<h3>Cryptocurrency Investment</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">start now</a>
</div>
<div class="img">
<img decoding="async" src="img/Cryptocurrency Investment.png">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<!-- home section ends -->
<!-- crypto section starts -->
<section class="crypto" id="crypto">
<h3 class="sub-heading"> Our crypto</h3>
<h3 class="heading"> popular crypto</h3>
<div class="box-container">
<div class="box">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
<img decoding="async" src="img/bitcoin.png">
<h3>Bit Coin</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>$58,610.00</span>
<a href="#" class="btn">buy now</a>
</div>
<div class="box">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
<img decoding="async" src="img/ethereum.png">
<h3>Etherum Coin</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>$4,747.56</span>
<a href="#" class="btn">buy now</a>
</div>
<div class="box">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
<img decoding="async" src="img/ripple.png">
<h3>Ripple Coin</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>$1.01</span>
<a href="#" class="btn">buy now</a>
</div>
<div class="box">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
<img decoding="async" src="img/tron.png">
<h3>Torn Coin</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>$0.100</span>
<a href="#" class="btn">buy now</a>
</div>
<div class="box">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
<img decoding="async" src="img/doge.png">
<h3>Doge Coin</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>$0.22</span>
<a href="#" class="btn">buy now</a>
</div>
<div class="box">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
<img decoding="async" src="img/binance.png">
<h3>Binance Coin</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span>$67,221.43</span>
<a href="#" class="btn">buy now</a>
</div>
</div>
</section>
<!-- crypto section ends -->
<!-- about section start -->
<section class="about" id="about">
<h3 class="sub-heading"> about us</h3>
<h3 class="heading"> why choose us?</h3>
<div class="row">
<div class="img">
<img decoding="async" src="img/Secure Cryptocurrency.png">
</div>
<div class="content">
<h3>best security in the cryptocurrency</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<div class="icons-container">
<div class="icons">
<i class="fas fa-user-secret"></i>
<span>free security</span>
</div>
<div class="icons">
<i class="fas fa-dollar-sign"></i>
<span>easy payments</span>
</div>
<div class="icons">
<i class="fas fa-headset"></i>
<span>24/7 service</span>
</div>
</div>
<a href="#" class="btn">learn more</a>
</div>
</div>
</section>
<!-- about section ends -->
<!-- service section starts -->
<section class="service" id="service">
<h3 class="sub-heading"> our service</h3>
<h3 class="heading"> today's special service</h3>
<div class="box-container">
<div class="box">
<div class="img">
<img decoding="async" src="img/Cryptocurrency Mining Server.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>Cryptocurrency Mining Server</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/Cryptocurrency Exchange.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>Cryptocurrency Exchange</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/Cryptocurrency Mining.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>Cryptocurrency Mining</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/Cryptocurrency Trading Bot.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>Cryptocurrency Trading Bot</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/Cryptocurrency Wallet.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>Cryptocurrency Wallet</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/People doing Crypto Trading Course.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>People doing Crypto Trading</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/Man looking at Cryptocurrency Trading desk.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>Man looking at Cryptocurrency</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/CryptocurrencyStatistics.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>CryptocurrencyStatistics</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
<div class="box">
<div class="img">
<img decoding="async" src="img/Cryptocurrency Profit.png">
<a href="#" class="fas fa-heart"></a>
</div>
<div class="content">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<h3>Cryptocurrency Profit</h3>
<p>Bitcoin is a decentralized digital currency, without a central bank or single administrator, that can be sent from farhan?</p>
<a href="#" class="btn">add to service</a>
<span class="price">$12.99</span>
</div>
</div>
</div>
</section>
<!-- service section ends -->
<!-- review section start -->
<section class="review" id="review">
<h3 class="sub-heading"> customer's review</h3>
<h3 class="heading"> what they say</h3>
<div class="swiper mySwiper review-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/pic-1.jpg">
<div class="user-info">
<h3>jenna deo</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/pic-2.jpg">
<div class="user-info">
<h3>Edward deo</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/pic-3.jpg">
<div class="user-info">
<h3>jenna deo</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="swiper-slide slide">
<i class="fas fa-quote-right"></i>
<div class="user">
<img decoding="async" src="img/pic-4.png">
<div class="user-info">
<h3>jenna deo</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna farhan. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</section>
<!-- review section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>location</h3>
<a href="#">UAE</a>
<a href="#">USA</a>
<a href="#">japan</a>
<a href="#">India</a>
<a href="#">russia</a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="#">home</a>
<a href="#">crypto</a>
<a href="#">about</a>
<a href="#">serives</a>
<a href="#">review</a>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#">+123-456-7890</a>
<a href="#">+111-222-3333</a>
<a href="#">shaikhfarhan@gmail.com</a>
<a href="#">farhanbhai@gmail.com</a>
<a href="#">mumbai, india - 401204</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#">meta</a>
<a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">linkedin</a>
</div>
</div>
<div class="credit">copyright @ 2022 by <span>dailywebdesign</span></div>
</section>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
--green:#27ae60;
--black:#192a56;
--light-color:#666;
--box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border:none;
text-transform: capitalize;
transition: all .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 5.5rem;
scroll-behavior: smooth;
background: #eee;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
background: #eee;
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
box-shadow: var(--box-shadow);
}
section{
padding: 2rem 9%;
}
section:nth-child(even){
background: #fff;
}
.sub-heading{
text-align: center;
color: var(--green);
font-size: 2rem;
padding-top: 1rem;
}
.heading{
text-align: center;
color: var(--black);
font-size: 3rem;
padding-bottom: 2rem;
text-transform: uppercase;
}
.btn{
margin-top: 1rem;
display: inline-block;
font-size: 1.7rem;
color: #fff;
background: var(--black);
border-radius: .5rem;
cursor: pointer;
padding: .8rem 3rem;
}
.btn:hover{
background: var(--green);
letter-spacing: .1rem;
}
header .logo{
color: var(--black);
font-size: 2.5rem;
font-weight: bolder;
}
header .logo i {
color: var(--green);
}
header .navbar a{
font-size: 1.7rem;
border-radius: .5rem;
padding: .5rem 1.5rem;
color: var(--light-color);
}
header .navbar a.active,
header .navbar a:hover{
color: #fff;
background: var(--green);
}
header .icons i,
header .icons a{
cursor: pointer;
margin-left: .5rem;
height: 4.5rem;
line-height: 4.5rem;
width: 4.5rem;
text-align: center;
font-size: 1.7rem;
color: var(--black);
border-radius: 50%;
background: #fff;
}
header .icons i:hover,
header .icons a:hover{
color: #eee;
background: var(--green);
transform: rotate(360deg);
}
header .icons #menu-bars{
display: none;
}
.home .home-slider .slide{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:2rem;
padding-top: 9rem;
}
.home .home-slider .slide .content{
flex:1 1 45rem;
}
.home .home-slider .slide .img{
flex:1 1 45rem;
}
.home .home-slider .slide .img img{
width: 100%;
}
.home .home-slider .slide .content span{
color: var(--green);
font-size: 2.5rem;
}
.home .home-slider .slide .content h3{
color: var(--black);
font-size: 7rem;
}
.home .home-slider .slide .content p{
color: var(--light-color);
font-size: 2.2rem;
padding:.5rem 0;
line-height: 1.5;
}
.swiper-pagination-buttle-active{
background: var(--green);
}
.crypto .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
gap:1.5rem;
}
.crypto .box-container .box{
padding: 2.5rem;
background:#fff;
border-radius: .5rem;
border: .1rem solid rgba(0,0,0,.2);
box-shadow: var(--box-shadow);
position: relative;
overflow: hidden;
text-align: center;
}
.crypto .box-container .box .fa-heart,
.crypto .box-container .box .fa-eye{
position: absolute;
top: 1.5rem;
background: #eee;
border-radius: 50%;
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
color: var(--black);
}
.crypto .box-container .box .fa-heart:hover,
.crypto .box-container .box .fa-eye:hover{
background: var(--green);
color: #fff;
}
.crypto .box-container .box .fa-heart{
right: -15rem;
}
.crypto .box-container .box .fa-eye{
left: -15rem;
}
.crypto .box-container .box:hover .fa-heart{
right: 1.5rem;
}
.crypto .box-container .box:hover .fa-eye{
left: 1.5rem;
}
.crypto .box-container .box img{
height: 17rem;
margin: 1rem 0;
}
.crypto .box-container .box h3{
color: var(--black);
font-size: 2.5rem;
}
.crypto .box-container .box .stars{
padding: 1rem 0;
}
.crypto .box-container .box .stars i{
font-size: 1.7rem;
color: var(--green);
}
.crypto .box-container .box span{
color: var(--green);
font-weight: bolder;
margin-right: 1rem;
font-size: 2.5rem;
}
.about .row{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
align-items: center;
}
.about .row .img{
flex: 1 1 45rem;
}
.about .row .img img{
width: 100%;
}
.about .row .content{
flex: 1 1 45rem;
}
.about .row .content h3{
color: var(--black);
font-size: 4rem;
padding: .5rem 0;
}
.about .row .content p{
color: var(--light-color);
font-size: 1.5rem;
padding: .5rem 0;
line-height: 2;
}
.about .row .content .icons-container{
display: flex;
gap:1rem;
flex-wrap: wrap;
padding: 1rem 0;
margin-top: .5rem;
}
.about .row .content .icons-container .icons{
background: #eee;
border-radius: .5rem;
border: .1rem solid rgba(0,0,0,.2);
display: flex;
align-items: center;
justify-content: center;
gap:1rem;
flex:1 1 17rem;
padding: 1.5rem 1rem;
}
.about .row .content .icons-container .icons i{
font-size: 2.5rem;
color: var(--green);
}
.about .row .content .icons-container .icons span{
font-size: 1.5rem;
color: var(--black);
}
.service .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.service .box-container .box{
background: #fff;
border:.1rem solid rgba(0,0,0,.2);
border-radius: .5rem;
box-shadow: var(--box-shadow);
}
.service .box-container .box .img{
height: 25rem;
width: 100%;
padding: 1.5rem;
overflow: hidden;
position: relative;
}
.service .box-container .box .img img{
height: 100%;
width: 100%;
border-radius: .5rem;
object-fit: cover;
}
.service .box-container .box .img .fa-heart{
position: absolute;
top: 2.5rem;
right: 2.5rem;
height: 5rem;
width: 5rem;
line-height: 5rem;
text-align: center;
font-size: 2rem;
background:#fff;
border-radius: 50%;
color: var(--black);
}
.service .box-container .box .img .fa-heart:hover{
background-color: var(--green);
color: #fff;
}
.service .box-container .box .content{
padding: 2rem;
padding-top: 0;
}
.service .box-container .box .content .stars{
padding-bottom: 1rem;
}
.service .box-container .box .content .stars i{
font-size: 1.7rem;
color: var(--green);
}
.service .box-container .box .content h3{
color: var(--black);
font-size: 2.1rem;
}
.service .box-container .box .content p{
color: var(--light-color);
font-size: 1.3rem;
padding: .5rem 0;
line-height: 1.5;
}
.service .box-container .box .content .price{
color: var(--green);
margin-left: 1rem;
font-size: 2.5rem;
}
.review .slide{
padding: 2rem;
box-shadow: var(--box-shadow);
border: .1rem solid rgba(0,0,0,.2);
border-radius: .5rem;
position: relative;
}
.review .slide .fa-quote-right{
position: absolute;
top: 2rem;
right: 2rem;
font-size: 6rem;
color: #ccc;
}
.review .slide .user{
display: flex;
gap:1.5rem;
align-items: center;
padding-bottom: 1.5rem;
}
.review .slide .user img{
height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
}
.review .slide .user h3{
color: var(--black);
font-size: 2rem;
padding-bottom: .5rem;
}
.review .slide .user i{
font-size: 1.3rem;
color: var(--green);
}
.review .slide p{
font-size: 1.5rem;
line-height: 1.8;
color: var(--light-color);
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1.5rem;
}
.footer .box-container .box h3{
padding:.5rem 0;
font-size: 2.5rem;
color: var(--black);
}
.footer .box-container .box a{
display: block;
padding:.5rem 0;
font-size: 1.5rem;
color: var(--light-color);
}
.footer .box-container .box a:hover{
color: var(--green);
text-decoration: underline;
}
.footer .credit{
text-align: center;
border-top: .1rem solid rgba(0,0,0,.1);
font-size: 2rem;
color: var(--black);
padding:.5rem;
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.footer .credit span{
color: var(--green);
}
/*media query*/
@media (max-width:991px){
html{
font-size: 55%;
}
header{
padding: 1rem 2rem;
}
section{
padding:2rem;
}
}
@media (max-width:768px){
header .icons #menu-bars{
display: inline-block;
}
header .navbar{
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-top: .1rem soild rgba(0,0,0,.2);
border-bottom: .1rem soild rgba(0,0,0,.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .navbar a{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: #eee;
}
.home .home-slider .slide .content h3{
font-size: 5rem;
}
@media (max-width:450px){
html{
font-size: 50%;
}
.crypto .box-container .box img{
height: auto;
width: 100%;
}
}
main.js
let menu = document.querySelector('#menu-bars');
let navbar = document.querySelector('.navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}
let section = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('header .navbar a');
window.onscroll = () =>{
menu.classList.remove('fa-times');
navbar.classList.remove('active');
section.forEach(sec =>{
let top = window.scrollY;
let height = sec.offsetHeight;
let offset = sec.offsetTop - 150;
let id = sec.getAttribute('id');
if(top >= offset && top < offset + height){
navLinks.forEach(links =>{
links.classList.remove('active');
document.querySelector('header .navbar a[href*='+id+']').classList.add('active');
});
};
});
}
var swiper = new Swiper(".home-slider", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 7500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
loop:true,
});
var swiper = new Swiper(".review-slider", {
spaceBetween: 20,
centeredSlides: true,
autoplay: {
delay: 7500,
disableOnInteraction: false,
},
loop:true,
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});
images
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |
 |
| best crypto website design |