Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to use HTML, CSS, and JavaScript to create a gaming Minecraft website in this video tutorial.
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 gaming / mincraft Website Design </title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<!-- font awsome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header section start -->
<section class="header" id="header">
<a href="#" class="logo"><img decoding="async" src="img/logo.png"></a>
<nav class="navbar active">
<div id="nav-close" class="fas fa-times"></div>
<a href="#GAME">GAME<i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#COMMUNITY">COMMUNITY<i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#MERCH">MERCH<i class="fa fa-arrow-up" aria-hidden="true"></i></a>
<a href="#SUPPORT">SUPPORT<i class="fa fa-arrow-up" aria-hidden="true"></i></a>
</nav>
<div class="icons">
<div id="menu-btn" class="fas fa-bars"></div>
<a href="#" class="fas fa-shopping-cart"></a>
</div>
</section>
<!-- home section start -->
<section class="home" id="homr">
<div class="swiper home-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box" style="background:url(img/home-bg-2.jpg)no-repeat;">
<div class="content">
<img decoding="async" src="img/homelogo.png">
<a href="#" class="btn">get started</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box" style="background:url(img/home-bg-4.jpg)no-repeat;">
<div class="content">
<img decoding="async" src="img/homelogo.png">
<a href="#" class="btn">get started</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box" style="background:url(img/home-bg-3.jpg)no-repeat;">
<div class="content">
<img decoding="async" src="img/homelogo.png">
<a href="#" class="btn">get started</a>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<section class="category">
<h1 class="heading">EXPLORE MINCRAFT <span>GAMES & ADD ONS</span></h1>
<div class="box-container">
<div class="box">
<img decoding="async" src="img/category-1.jpg">
<h3>Minecraft dungeons</h3>
<p>Discover an all-new action adventure game, inspired by classic dungeon!</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/category-2.jpg">
<h3>Minecraft Education</h3>
<p>A game-based learning platform supporting thousands of educators in!</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/category-3.jpg">
<h3>Minecraft</h3>
<p>Explore your own unique world, survive the night, and create anything you can!</p>
<a href="#" class="btn">read more...</a>
</div>
<div class="box">
<img decoding="async" src="img/category-4.jpg">
<h3>Minecraft Legends</h3>
<p>Uncover the mysteries of Minecraft Legends, a new action strategy game.</p>
<a href="#" class="btn">read more...</a>
</div>
</div>
</section>
<section class="about" id="about">
<h1 class="heading">ABOUT <span>MINECRAFT</span></h1>
<div class="img">
<img decoding="async" src="img/about-img.jpg">
</div>
<div class="content">
<h3>WELCOME TO THE OFFICIAL <br> SITE OF MINECRAFT</h3>
<p>With new games, new updates, and new ways to play, join one<br> of the biggest communities in farhan and start crafting today!</p>
<a href="#" class="btn">read more</a>
</div>
</section>
<section class="shop" id="shop">
<h1 class="heading">MINECRAFT <span>NEWEST NEWS</span></h1>
<div class="swiper product-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/carousel_01.jpg">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Minecraft Preview</h3>
<div class="price">Changelog!</div>
<div class="starts">
<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>
</div>
</div>
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/carousel_02.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Fighting Words</h3>
<div class="price">8 maps!</div>
<div class="starts">
<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>
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/carousel_03.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Minecraft Legends</h3>
<div class="price"> Coming to multiple</div>
<div class="starts">
<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>
<div class="swiper-slide slide">
<div class="img">
<img decoding="async" src="img/carousel_04.jpg" alt="">
<div class="icons">
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-eye"></a>
<a href="#" class="fas fa-share"></a>
</div>
</div>
<div class="content">
<h3>Infested Block</h3>
<div class="price"> Do not break!</div>
<div class="starts">
<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>
</div>
</div>
</section>
<section class="reviews" id="reviews">
<h1 class="heading">COMMUNITY'S <span>REVIEWS</span></h1>
<div class="swiper review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/img-1.jpg">
<div class="info">
<h3>GET HELP WITH MINECRAFT</h3>
<span>Find answers for all</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/img-2.webp">
<div class="info">
<h3>HOW TO SUBMIT FEEDBACK</h3>
<span>We need your feedback</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/img-3.jpg">
<div class="info">
<h3>BUG US ABOUT BUGS</h3>
<span> we want you to log bugs</span>
</div>
</div>
</div>
<div class="swiper-slide slide">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis
adipisci odio! Voluptatem.</p>
<div class="user">
<img decoding="async" src="img/img-4.jpg">
<div class="info">
<h3>GET STARTED REDSTONE</h3>
<span>Redstone community is here help.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blogs" id="blogs">
<h1 class="heading">OUR DAILY <span>POST</span></h1>
<div class="swiper blogs-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<img decoding="async" src="img/img-1.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>JUNGLE AWAKENS</h3>
<p>As threats roar to life beneath the jungle canopies, it’s up to you to save these leafy lands. Take on new missions, battle new mobs, and fight the mighty Jungle Abomination!</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-2.webp" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>CREEPING WINTER</h3>
<p>These frost-bitten lands desperately need a hero! Brave new missions and beat relentless mobs on your journey to defeat the Wretched Wraith at the center of the storm.</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-3.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>FLAMES OF THE NETHER</h3>
<p>Minecraft Dungeons brings the heat to the Nether with the most ambitious DLC so far. Don’t miss out on new missions, fiery locations, and unique items!</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-4.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>HIDDEN DEPTHS</h3>
<p>Dive into your next adventure with the new Minecraft Dungeons: Hidden Depths DLC! Gear up and make a splash with new missions, sunken treasures, and enemies.</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-5.jpg" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>HOWLING PEAKS</h3>
<p>Danger awaits atop mighty peaks, and it will take a hero to stop the brewing storm! The path to the summit will lead you to new mobs, missions, and gear—just don’t look down.</p>
<a href="#" class="btn">read more</a>
</div>
<div class="swiper-slide slide">
<img decoding="async" src="img/img-6.webp" alt="">
<div class="icons">
<a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
<a href="#"><i class="fas fa-user"></i>by admin </a>
</div>
<h3>ULTIMATE DLC BUNDLE</h3>
<p>You’ve played Minecraft Dungeons, but now it’s time to get the full story with the Ultimate DLC Bundle! Play through all the DLC and experience the story from beginning to the</p>
<a href="#" class="btn">read more</a>
</div>
</div>
</div>
</section>
<img decoding="async" src="img/transition1.png">
<section class="newsletter">
<div class="content">
<h1 class="heading">SUBSCRIBE <span>NOW</span></h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Totam dicta atque, explicabo farhan perferendis ex enim vel eligendi. Repellat, at.</p>
<form action="">
<input type="email" name="id" placeholder="enter your email address" class="email">
<input type="submit" class="btn" value="subscribe">
</form>
</div>
</section>
<section class="clients">
<div class="swiper clients-slider">
<div class="swiper-wrapper">
<div class="swiper-slide slide"><img decoding="async" src="img/client1.jpg"></div>
<div class="swiper-slide slide"><img decoding="async" src="img/client2.jpg"></div>
<div class="swiper-slide slide"><img decoding="async" src="img/client3.jpg"></div>
<div class="swiper-slide slide"><img decoding="async" src="img/client4.jpg"></div>
</div>
</div>
</section>
<section class="footer">
<div class="box-container">
<div class="box">
<h3>quick links</h3>
<a href="#GAME">GAME</a>
<a href="#COMMUNITY">COMMUNITY</a>
<a href="#MERCH">MERCH</a>
<a href="#SUPPORT">SUPPORT</a>
</div>
<div class="box">
<h3>extra links</h3>
<a href="#">MY ACCOUNT</a>
<a href="#">MY ORDER</a>
<a href="#">MY WHISHLIST</a>
<a href="#">ASK QUESTION</a>
</div>
<div class="box">
<h3>Contact info</h3>
<a href="#"><i class="fas fa-phone"></i>+111-222-7867</a>
<a href="#"><i class="fas fa-phone"></i>+111-222-7867</a>
<a href="#"><i class="fas fa-envelope"></i>shaikhfarhan@gmail.com</a>
<a href="#"><i class="fas fa-map"></i>MUMBAI, INDIA - 401203</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-linkedin"></i>linkedin</a>
<a href="#"><i class="fab fa-github"></i>github</a>
</div>
</div>
<div class="credit">created by <span>dailywebdesign</span> || all rights reserved</div>
</section>
<script src="https://unpkg.com/swiper@7/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=Noto+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
*{
font-family: 'Noto Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 1s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 5rem;
}
html::-webkit-scrollbar{
width: 1rem;
}
html::-webkit-scrollbar-track{
background: #FFFFFF;
}
html::-webkit-scrollbar-thumb{
background: #FF7D1C;
}
section{
padding: 5rem 9%;
}
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 2rem 9%;
z-index: 1000;
display: flex;
align-items: center;
}
.header.active {
background: #171615;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.header .logo{
margin-right: auto;
font-size: 2.5rem;
}
.header .logo i{
color: #FFA520;
}
.header .navbar a{
margin-left: 2rem;
font-size: 1.5rem;
font-weight: 700;
color: #FFA520;
}
.header .navbar a:hover{
color: #219150;
}
.header .navbar #nav-close{
font-size: 5rem;
cursor: pointer;
color: #10221b;
display: none;
}
.header .icons a,
.header .icons div{
font-size: 3.5rem;
margin-left: 2rem;
cursor: pointer;
color: #FFA520;
}
.header .icons a:hover,
.header .icons div:hover{
color: #337121;
}
.header #menu-btn{
display: none;
}
.heading{
text-align: center;
margin-bottom: 2.5rem;
font-size: 2.5rem;
color: #3C8527;
}
.heading span{
color: #FFA520;
}
.btn{
margin: auto;
padding: 10px 20px;
border: none;
background: #FFB054;
color: #6F2900;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.4px;
text-shadow: 0 2px 0 #FFCC6A;
text-transform: uppercase;
text-decoration: none;
box-shadow: inset 0 4px #fce07e, inset 0 -4px #d0750a, inset 4px 0 #df8318, inset -4px 0 #ffbb54;
transition: all .25s,opacity .75s .5s;
user-select: none;
cursor: pointer;
pointer-events: all;
}
.btn:hover{
background: #313131;
box-shadow: inset 0 4px #808080, inset 0 -4px #000000, inset 4px 0 #000000, inset -4px 0 #313131;
color: #FFFFFF;
}
.home{
padding: 0;
}
.home .box{
min-height: 100vh;
display: flex;
align-items: center;
background-size: cover !important;
background-position: center !important;
justify-content: center;
padding: 2rem 9%;
position: relative;
}
.home .box .content{
width: 45rem;
height: 45rem;
justify-content: center;
position: absolute;
}
.home .box .content img{
width: 400px;
}
.home .box .content .btn{
margin: 15rem;
position: relative;
top: 35rem;
}
.swiper-button-next::after,
.swiper-button-prev::after{
font-size: 3rem;
color: #FFB054;
}
.category{
background-image: url(img/bg-wool-dark.png);
}
.category .box-container{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(20rem,2fr));
gap: 1.5rem;
}
.category .box-container .box{
text-align: center;
padding: 1rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
border: 0.2rem solid #FFA520;
overflow: hidden;
background-color: #181818;
}
.category .box-container .box img{
height: 358px;
width: 100%;
border-radius: 50;
margin-bottom: 1rem;
object-fit: cover;
}
.category .box-container .box:hover{
transform: scale(0.9);
}
.category .box-container .box h3{
font-size: 2rem;
color: #FFA520;
}
.category .box-container .box p{
font-size: 1.5rem;
color: #3C8527;
padding: 1rem 0;
}
.about{
background-image: url(img/bg-wool-dark.png);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
justify-content: space-around;
}
.about .img{
position: relative;
}
.about .img:hover img{
transform:scale(1.2) rotate(5deg);
}
.about .img img{
box-shadow: 0 0 2rem 2rem rgba(184, 93, 8, 0.664);
border: 0.2rem solid #FFA520;
}
.about .content{
position: absolute;
top: 5;
left: 5;
width: 750px;
}
.about .content h3{
font-weight: 700;
font-size: 36px;
line-height: 40px;
letter-spacing: 1px;
color: #FFFFFF;
}
.about .content p{
font-size: 17px;
color: #FFFFFF;
margin-bottom: 25px;
padding: 0;
line-height: 26px;
}
.shop{
background-image: url(img/bg-wool-dark.png);
}
.shop .slide{
border: 0.2rem solid #FFA520;
background-color: #181818;
}
.shop .slide:hover .img .icons{
transform: translateY(0);
}
.shop .slide .img{
position: relative;
overflow: hidden;
height: 30rem;
width: 100%;
}
.shop .slide .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.shop .slide .img .icons{
width: 100%;
position: absolute;
bottom: 2rem;
left: 0;
text-align: center;
z-index: 10;
transform: translateY(7rem);
}
.shop .slide .img .icons a{
height: 4.5rem;
width: 4.5rem;
line-height: 4.5rem;
font-size: 1.7rem;
background: #FFA520;
color: #FFFFFF;
margin: 0.2rem;
}
.shop .slide .img .icons a:hover{
background: #3C8527;
}
.shop .slide .content{
padding: 1rem 0;
text-align: center;
}
.shop .slide .content h3{
font-size: 2rem;
color: #FFA520;
}
.shop .slide .content .price{
padding: 1rem 0;
padding-top: .5rem;
font-size: 2rem;
color: #3C8527;
}
.shop .slide .content .starts i{
font-size: 1.7rem;
color: #FFA520;
}
.reviews{
background-image: url(img/bg-wool-dark.png);
}
.reviews .slide .text{
padding: 2rem;
font-size: 1.5rem;
font-style: italic;
background: #181818;
border-radius: .5rem;
color: #FFA520;
border: 0.2rem solid #FFA520;
line-height:2;
position: relative;
z-index: 0;
margin-bottom: 3rem;
}
.reviews .slide .text::before{
content: "";
position: absolute;
bottom:-1.5rem;
left: .7rem;
height:3rem;
width: 3rem;
background: #3C8527;
transform: rotate(45deg);
}
.reviews .slide .user{
display: flex;
align-items: center;
gap:1rem;
}
.reviews .slide .user img{
height:7rem;
width:7rem;
border-radius: 50%;
}
.reviews .slide .user h3{
font-size: 2rem;
color: #FFA520;
}
.reviews .slide .user span{
color: #3C8527;
font-size: 1.5rem;
}
.blogs{
background-image: url(img/bg-wool-dark.png);
}
.blogs .slide{
text-align: center;
padding: 2rem;
}
.blogs .slide img{
height: 40rem;
width: 100%;
border: 0.2rem solid #FFA520;
object-fit: cover;
border-radius: .5rem;
}
.blogs .slide .icons{
background: #3C8527;
border-radius: .5rem;
padding: 1rem;
position: relative;
top: -2rem;
display: inline-block;
}
.blogs .slide .icons a{
font-size: 1.4rem;
color: #FFA520;
margin: 0 1rem;
}
.blogs .slide .icons a:hover{
color: #219150;
}
.blogs .slide .icons a i{
padding-right: .5rem;
color: #FFA520;
}
.blogs .slide h3{
font-size: 2rem;
color: #FFA520;
}
.blogs .slide p{
font-size: 1.4rem;
padding: 1rem 0;
line-height: 2;
color: #219150;
}
.newsletter{
background-color: #FFFFFF;
}
.newsletter .content {
max-width: 70rem;
margin: 1rem auto;
text-align: center;
}
.newsletter .content p{
font-size: 1.5rem;
line-height: 2;
color: #219150;
}
.newsletter .content form{
margin-top: 2rem;
background: #FFFFFF;
border-radius: 5rem;
border: 0.2rem solid #219150;
padding: .7rem;
display: flex;
}
.newsletter .content form .email{
width: 100%;
background: none;
text-transform: none;
font-size: 1.6rem;
color: #FFA520;
padding: 0 1.3rem;
}
.newsletter .content form .btn{
margin: 0;
border-radius: 5rem;
background: #FFA520;
color: #6F2900;
text-shadow: 0 2px 0 #FFCC6A;
}
.newsletter .content form .btn:hover{
background: #313131;
color: #FFFFFF;
}
.clients{
background-image: url(img/bg-wool-white.png);
}
.clients .slide{
text-align: center;
}
.clients .slide img{
height: 12rem;
}
.clients .slide img:hover{
transform: scale(1.1);
}
.footer{
background-image: url(img/bg-wool-dark.png);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.footer .box-container{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1rem;
}
.footer .box-container .box h3{
font-size: 2rem;
padding:1.5rem 0;
color:#fff;
}
.footer .box-container .box a{
display:block;
font-size: 1.4rem;
color: #fff;
padding:1rem 0;
}
.footer .box-container .box a i{
color: #219150;
padding-right: .5rem;
}
.footer .box-container .box a:hover{
color: #219150;
}
.footer .box-container .box a:hover i{
padding-right: 2rem;
}
.footer .credit{
text-align: center;
margin-top:2.5rem;
padding: 1rem;
padding-top: 2.5rem;
font-size: 2rem;
color: #fff;
}
.footer .credit span{
color: #FFA520;
}
/* media queries */
@media(max-width:1200px){
.header{
padding: 2rem;
}
section{
padding: 3rem 2rem;
}
}
@media(max-width:991px){
html{
font-size: 55%;
scroll-padding-top: 7rem;
}
.home .box{
padding: 2rem;
justify-content: center;
}
.home .box .content {
text-align: center;
}
.home .box .content span{
font-size: 3rem;
}
.home .box .content h3{
font-size: 4rem;
}
.btn{
font-size: 10px;
}
}
@media(max-width:768px){
.header #menu-btn{
display: inline-block;
}
.header .navbar{
position: fixed;
top: 0;
left: -110%;
background: #FFFFFF;
z-index: 1000;
width: 35rem;
height: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
}
.header .navbar a{
margin: 1rem 0;
font-size: 3rem;
}
.header .navbar #nav-close{
display: block;
position: absolute;
top: 1rem;
right: 2rem;
}
.header .navbar.active{
left: 0;
box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
}
.swiper-button-next::after
.swiper-button-prev::after{
display: none;
}
.btn{
font-size: 5px;
}
}
@media(max-width:450){
html{
font-size: 50%;
}
.heading{
font-size: 3rem;
}
}
main.js
let navbar = document.querySelector('.header .navbar');
document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.add('active');
}
document.querySelector('#nav-close').onclick = () =>{
navbar.classList.remove('active');
}
window.onscroll = () =>{
navbar.classList.remove('active');
if(window.scrollY > 0){
document.querySelector('.header').classList.add('active');
}else{
document.querySelector('.header').classList.add('active');
}
};
window.onload = () =>{
if(window.scrollY > 0){
document.querySelector('.header').classList.add('active');
}else{
document.querySelector('.header').classList.add('active');
}
};
window.onload = () =>{
if(window.scrollY > 0){
document.querySelector('.header').classList.add('active');
}else{
document.querySelector('.header').classList.add('active');
}
};
var swiper = new Swiper(".home-slider", {
loop:true,
grabCursor:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".product-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
},
});
var swiper = new Swiper(".review-slider",{
loop:true,
grabCursor:true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
},
});
var swiper = new Swiper(".blogs-slider",{
loop:true,
grabCursor:true,
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
991: {
slidesPerView: 3,
},
},
});
var swiper = new Swiper(".clients-slider", {
loop:true,
grabCursor:true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
},
},
});