HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce- (AR Computer Tech></title>
<!-- favicon -->
<link rel="shortcut icon" type="image/png" href="AR Computer Tech.png">
<!-- owl carousel css file cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header section starts -->
<header>
<div class="header-1">
<a href="#" class="logo"> <i class="fas fa-shopping-bag"></i> shopping </a>
<div class="form-container">
<form action="">
<input type="search" placeholder="search products" id="search" />
<label for="search" class="fas fa-search"></label>
</form>
</div>
</div>
<div class="header-2">
<div id="menu" class="fas fa-bars"></div>
<nav class="navbar">
<ul>
<li><a class="active" href="#home">home</a></li>
<li><a href="#arrival">arrival</a></li>
<li><a href="#featured">featured</a></li>
<li><a href="#gallery">gallery</a></li>
<li><a href="#deal">deal</a></li>
</ul>
</nav>
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-shopping-cart"></a>
<a href="#" class="fas fa-user"></a>
</div>
</div>
</header>
<!-- header section ends -->
<!-- home section starts -->
<section class="home" id="home">
<div class="home-slider owl-carousel">
<div class="item">
<img src="images/home-img1.png" alt="">
<div class="content">
<h3>heavy discounts</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, neque.</p>
<a href="#"><button class="btn">discover</button></a>
</div>
</div>
<div class="item">
<img src="images/home_img2.jpg" alt="">
<div class="content">
<h3>latest gadgets</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, neque.</p>
<a href="#"><button class="btn">discover</button></a>
</div>
</div>
<div class="item">
<img src="images/home_img3.jpg" alt="">
<div class="content">
<h3>trending shoes</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, neque.</p>
<a href="#"><button class="btn">discover</button></a>
</div>
</div>
<div class="item">
<img src="images/home_img4.jpg" alt="">
<div class="content">
<h3>fresh groceries</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, neque.</p>
<a href="#"><button class="btn">discover</button></a>
</div>
</div>
</div>
</section>
<!-- home section ends -->
<!-- arrival section starts -->
<section class="arrival" id="arrival">
<h1 class="heading"> <span>new arrivals</span> </h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="images\arr_img1.jpg" alt="">
</div>
<div class="info">
<h3>smart tv</h3>
<div class="subInfo">
<strong class="price"> ₹1000/- <span>₹1500/-</span> </strong>
<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"></i>
</div>
</div>
</div>
<div class="overlay">
<a href="#" style="--i:1;" class="fas fa-heart"></a>
<a href="#" style="--i:2;" class="fas fa-shopping-cart"></a>
<a href="#" style="--i:3;" class="fas fa-search"></a>
</div>
</div>
<div class="box">
<div class="image">
<img src="images\arr_img2.jpg" alt="">
</div>
<div class="info">
<h3>game console</h3>
<div class="subInfo">
<strong class="price"> ₹1000/- <span>₹1500/-</span> </strong>
<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"></i>
</div>
</div>
</div>
<div class="overlay">
<a href="#" style="--i:1;" class="fas fa-heart"></a>
<a href="#" style="--i:2;" class="fas fa-shopping-cart"></a>
<a href="#" style="--i:3;" class="fas fa-search"></a>
</div>
</div>
<div class="box">
<div class="image">
<img src="images\arr_img3.jpg" alt="">
</div>
<div class="info">
<h3>latest shoes</h3>
<div class="subInfo">
<strong class="price"> ₹1000/- <span>₹1500/-</span> </strong>
<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"></i>
</div>
</div>
</div>
<div class="overlay">
<a href="#" style="--i:1;" class="fas fa-heart"></a>
<a href="#" style="--i:2;" class="fas fa-shopping-cart"></a>
<a href="#" style="--i:3;" class="fas fa-search"></a>
</div>
</div>
<div class="box">
<div class="image">
<img src="images\arr_img4.jpg" alt="">
</div>
<div class="info">
<h3>smartphones</h3>
<div class="subInfo">
<strong class="price"> ₹1000/- <span>₹1500/-</span> </strong>
<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"></i>
</div>
</div>
</div>
<div class="overlay">
<a href="#" style="--i:1;" class="fas fa-heart"></a>
<a href="#" style="--i:2;" class="fas fa-shopping-cart"></a>
<a href="#" style="--i:3;" class="fas fa-search"></a>
</div>
</div>
<div class="box">
<div class="image">
<img src="images\arr_img5.jpg" alt="">
</div>
<div class="info">
<h3>branded t-shirts</h3>
<div class="subInfo">
<strong class="price"> ₹1000/- <span>₹1500/-</span> </strong>
<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"></i>
</div>
</div>
</div>
<div class="overlay">
<a href="#" style="--i:1;" class="fas fa-heart"></a>
<a href="#" style="--i:2;" class="fas fa-shopping-cart"></a>
<a href="#" style="--i:3;" class="fas fa-search"></a>
</div>
</div>
<div class="box">
<div class="image">
<img src="images\arr_img6.jpg" alt="">
</div>
<div class="info">
<h3>amazing speakers</h3>
<div class="subInfo">
<strong class="price"> ₹1000/- <span>₹1500/-</span> </strong>
<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"></i>
</dji>
</div>
</div>
<div class="overlay">
<a href="#" style="--i:1;" class="fas fa-heart"></a>
<a href="#" style="--i:2;" class="fas fa-shopping-cart"></a>
<a href="#" style="--i:3;" class="fas fa-search"></a>
</div>
</div>
</div>
</section>
<!-- arrival section ends -->
<!-- featured section starts -->
<section class="feature" id="featured">
<h1 class="heading"> <span> featured product </span> </h1>
<div class="row">
<div class="image-container">
<div class="big-image">
<img src="images\watch1.jpg" alt="">
</div>
<div class="small-image">
<img class="image-active" src="images\watch1.jpg" alt="">
<img src="images/watch2.jpg" alt="">
<img src="images/watch3.jpg" alt="">
<img src="images/watch4.jpg" alt="">
</div>
</div>
<div class="content">
<h3>smart watches</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>
<span>(500+) reviews</span>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, at!</p>
<strong class="price">₹1000 <span>₹1500</span> </strong>
<a href="#"><button class="btn">buy now</button></a>
</div>
</div>
</section>
<!-- featured section ends -->
<!-- gallery section starts -->
<section class="gallery" id="gallery">
<h1 class="heading"> <span> product gallery </span> </h1>
<ul class="controls">
<li class="btn button-active" data-filter="all">all</li>
<li class="btn" data-filter="phone">phone</li>
<li class="btn" data-filter="laptop">laptop</li>
<li class="btn" data-filter="headphone">headphone</li>
<li class="btn" data-filter="shoes">shoes</li>
</ul>
<div class="image-container">
<div class="box phone">
<div class="image">
<img src="images/g_img1.jpg" alt="">
</div>
<div class="info">
<h3>smartphones</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box phone">
<div class="image">
<img src="images/g_img2.jpg" alt="">
</div>
<div class="info">
<h3>smartphones</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box laptop">
<div class="image">
<img src="images/g_img3.jpg" alt="">
</div>
<div class="info">
<h3>laptop</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box shoes">
<div class="image">
<img src="images/g_img4.jpg" alt="">
</div>
<div class="info">
<h3>shoes</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box laptop">
<div class="image">
<img src="images/g_img5.jpg" alt="">
</div>
<div class="info">
<h3>laptop</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box headphone">
<div class="image">
<img src="images/g_img6.jpg" alt="">
</div>
<div class="info">
<h3>headphone</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box shoes">
<div class="image">
<img src="images/g_img7.jpg" alt="">
</div>
<div class="info">
<h3>shoes</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box headphone">
<div class="image">
<img src="images/g_img8.jpg" alt="">
</div>
<div class="info">
<h3>headphone</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
<div class="box headphone">
<div class="image">
<img src="images/g_img9.jpg" alt="">
</div>
<div class="info">
<h3>headphone</h3>
<div class="subInfo">
<strong class="price">₹1000</strong>
<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"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- gallery section ends -->
<!-- deal section starts -->
<section class="deal" id="deal">
<h1 class="heading"> <span> best deals </span> </h1>
<div class="box-container">
<div class="box">
<img src="images/deal1.jpg" alt="">
<div class="content">
<h3>latest laptop</h3>
<p>upto 25% off on first purchase</p>
<a href="#"><button class="btn">explore</button></a>
</div>
</div>
<div class="box">
<img src="images/deal2.jpg" alt="">
<div class="content">
<h3>new headphone</h3>
<p>upto 25% off on first purchase</p>
<a href="#"><button class="btn">explore</button></a>
</div>
</div>
</div>
<div class="icons-container">
<div class="icons">
<i class="fas fa-shipping-fast"></i>
<h3>fast delivery</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi, molestiae?</p>
</div>
<div class="icons">
<i class="fas fa-user-clock"></i>
<h3>24 x 7 support</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi, molestiae?</p>
</div>
<div class="icons">
<i class="fas fa-money-check-alt"></i>
<h3>easy payments</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi, molestiae?</p>
</div>
<div class="icons">
<i class="fas fa-box"></i>
<h3>10 days replacements</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi, molestiae?</p>
</div>
</div>
</section>
<!-- deal section ends -->
<!-- newsletter section starts -->
<section class="newsletter">
<h1>newsletter</h1>
<p>get in touch for latest discounts and updates</p>
<form action="">
<input type="email" placeholder="enter your email">
<input type="submit" class="btn">
</form>
</section>
<!-- newsletter section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<a href="#" class="logo"> <i class="fas fa-shopping-bag"></i> shopping </a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique expedita molestiae distinctio facere beatae velit, maiores ullam molestias necessitatibus sapiente.</p>
</div>
<div class="box">
<h3>links</h3>
<a href="#">home</a>
<a href="#">arrival</a>
<a href="#">featured</a>
<a href="#">gallery</a>
<a href="#">deal</a>
</div>
<div class="box">
<h3>contact us</h3>
<p> <i class="fas fa-home"></i>
Pakistan - Sindh - Karachi
</p>
<p> <i class="fas fa-phone"></i>
+92 03
</p>
<p> <i class="fas fa-globe"></i>
Your Website
</p>
</div>
</div>
<h1 class="credit"> created by <span> <a href="https://arcomputertech.blogspot.com/">AR Computer Tech</a></span> | all rights reserved. </h1>
</section>
<!-- footer section ends -->
<!-- jquery cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- owl carousel js file cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- custom js file link -->
<script src="java.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
:root{
--blue:#2980b9;
--darkpink: #FF33F0;
--orange: #ff7200;
--red: #FF3333;
}
*{
font-family: 'Open Sans', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
text-transform: capitalize;
text-decoration: none;
transition: all .2s cubic-bezier(.37,1.14,.26,1.24);
}
*::selection{
background:#ff3300;
color:#fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
}
.btn{
height: 4rem;
width: 14rem;
background:var(--blue);
color:#fff;
font-size: 2rem;
cursor: pointer;
border:none;
outline: none;
}
.btn:hover{
letter-spacing: .2rem;
opacity: .8;
}
.heading{
padding-top: 7rem;
width: 95%;
border-bottom: .2rem solid rgba(0,0,0,.3);
margin:0 auto;
}
.heading span{
font-size: 2rem;
padding:1rem 6rem;
color:#fff;
background:var(--darkpink);
border-top-right-radius: 3rem;
display: inline-block;
}
header .header-1, header .header-2{
display: flex;
align-items: center;
justify-content: space-between;
padding:1.5rem;
width: 100%;
z-index: 1000;
}
header .header-1 .logo{
font-size: 2rem;
color:#666;
}
header .header-1 .logo i{
color:var(--red);
}
header .header-1 .form-container form{
display: flex;
}
header .header-1 .form-container form #search{
height: 4rem;
width: 50rem;
outline: none;
border:.2rem solid #666;
font-size: 1.5rem;
padding:0 1rem;
}
header .header-1 .form-container form #search:focus{
border-color: var(--red);;
}
header .header-1 .form-container form label{
height: 4rem;
width: 5rem;
text-align: center;
line-height: 4rem;
font-size: 2rem;
cursor: pointer;
background: var(--blue);
color:#fff;
}
header .header-1 .form-container form label:hover{
color:yellow;
}
header .header-2{
background:var(--orange);
}
header .header-2 .navbar ul{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
header .header-2 .navbar ul li{
margin:0 1rem;
}
header .header-2 .navbar ul li a{
font-size: 2rem;
color:#fff;
}
header .header-2 .navbar ul li a.active,
header .header-2 .navbar ul li a:hover{
color:yellow;
}
header .header-2 .icons a{
color: #fff;
font-size: 2rem;
padding: 0 1rem;
}
header .header-2 .icons a:hover{
color:yellow;
}
header .header-2 #menu{
font-size: 3rem;
color:#fff;
cursor: pointer;
display: none;
}
header .header-2.header-active{
position: fixed;
top:0; left: 0;
box-shadow: 0 .1rem .3rem rgba(0,0,0,.3);
}
.home .home-slider .item{
position: relative;
}
.home .home-slider .item img{
height: 100vh;
object-fit: cover;
width: 100%;
}
.home .home-slider .item .content{
position: absolute;
top:50%; left: 5%;
transform: translateY(-50%);
}
.home .home-slider .item .content h3{
color:#fff;
text-shadow: 0 .3rem .5rem #000;
font-size: 5rem;
text-transform: uppercase;
}
.home .home-slider .item .content p{
color:#fff;
font-size: 2.5rem;
padding:2rem 0;
width: 50rem;
}
.home .owl-carousel .owl-prev, .home .owl-carousel .owl-next{
position: absolute;
top:50%;
transform: translateY(-50%);
outline: none;
}
.home .owl-carousel .owl-prev{
left: 1.3rem;;
}
.home .owl-carousel .owl-next{
right:1.3rem;;
}
.home .owl-carousel .owl-prev span, .home .owl-carousel .owl-next span{
color:#fff;
font-size: 7rem;
}
.arrival{
min-height: 100vh;
}
.arrival .box-container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding:2rem 0;
width: 85%;
margin:0 auto;
}
.arrival .box-container .box{
flex:1 1 30rem;
border:.1rem solid rgba(0,0,0,.3);
overflow: hidden;
position: relative;
margin:1rem 2rem;
}
.arrival .box-container .box .image{
height: 20rem;
padding:2rem;
text-align: center;
background:#f0f0f0;
}
.arrival .box-container .box .image img{
height: 100%;
object-fit: cover;
}
.arrival .box-container .box .info h3{
padding:1rem;
font-size: 2rem;
color:var(--blue);
}
.arrival .box-container .box .info .subInfo{
display: flex;
align-items: center;
justify-content: space-between;
padding:1rem;
border-top: .1rem solid rgba(0,0,0,.3);
}
.arrival .box-container .box .info .subInfo .price{
color:#ff3300;
font-size: 2rem;
}
.arrival .box-container .box .info .subInfo .price span{
color:#666;
font-size: 1.5rem;
text-decoration: line-through;
}
.arrival .box-container .box .info .subInfo .stars i{
color:orange;
font-size: 1.5rem;
}
.arrival .box-container .box .overlay{
position: absolute;
top:0; left: 0;
height:20rem;
width: 100%;
background:rgba(0,0,0,.3);
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
}
.arrival .box-container .box:hover .overlay{
transform: scale(1);
}
.arrival .box-container .box .overlay a{
font-size: 2rem;
padding:1.5rem 2rem;
background:#fff;
color:#666;
margin:1rem;
transform: translateY(-15rem);
transition-delay: calc(.1s * var(--i));
}
.arrival .box-container .box:hover .overlay a{
transform: translateY(0rem);
}
.arrival .box-container .box .overlay a:hover{
color:var(--blue);
}
.feature{
min-height: 100vh;
background:linear-gradient(165deg, #fff 50%, var(--blue) 50.1%);
padding-bottom: 2rem;
}
.feature .row{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding:2rem 0;
margin:3rem auto;
width: 95%;
background:#fff;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
border-radius: 1rem;
}
.feature .row .image-container{
display: flex;
align-items: center;
}
.feature .row .image-container .big-image img{
height: 30rem;
margin:2rem 0;
filter: drop-shadow(0 .1rem .5rem #000);
}
.feature .row .image-container .small-image{
display: flex;
justify-content: center;
flex-flow: column wrap;
}
.feature .row .image-container .small-image img{
height:6rem;
padding: 1rem;
margin:1rem;
border:.1rem solid #666;
cursor: pointer;
}
.feature .row .image-container .small-image img.image-active,
.feature .row .image-container .small-image img:hover{
border:.2rem solid var(--blue);
}
.feature .row .content{
padding-left: 6rem;
}
.feature .row .content h3{
font-size: 4rem;
color:var(--blue);
}
.feature .row .content .stars i{
font-size: 2rem;
color:orange;
padding: 1rem 0;
}
.feature .row .content .stars span{
font-size: 2rem;
color:#666;
}
.feature .row .content p{
color:#333;
width: 40rem;
font-size: 2rem;
padding: 2rem 0;
}
.feature .row .content .price{
color:#ff3300;
font-size: 2rem;
}
.feature .row .content .price span{
color:#666;
text-decoration: line-through;
font-size: 1.5rem;
}
.feature .row .content .btn{
margin-left: 2rem;
}
.gallery{
min-height: 100vh;
}
.gallery .controls{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding:1.5rem 0;
list-style: none;
}
.gallery .controls .btn{
margin:2rem;
line-height: 4rem;
text-align: center;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.gallery .controls .btn.button-active{
background:#333;
}
.gallery .image-container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.gallery .image-container .box{
display: flex;
align-items: center;
justify-content: center;
margin:2rem;
border:.1rem solid rgba(0,0,0,.3);
flex:1 1 30rem;
}
.gallery .image-container .box .image{
height:12rem;
width: 20rem;
text-align: center;
padding:1rem;
background: #f0f0f0;
}
.gallery .image-container .box .image img{
height: 100%;
width: 100%;
object-fit: cover;
}
.gallery .image-container .box:hover .image{
background:#ccc;
}
.gallery .image-container .box .info{
width: 100%;
}
.gallery .image-container .box .info h3{
font-size: 2rem;
color:var(--blue);
padding:1rem;
}
.gallery .image-container .box .info .subInfo{
display: flex;
align-items: center;
justify-content: space-between;
border-top: .1rem solid rgba(0,0,0,.3);
padding:1rem;
}
.gallery .image-container .box .info .subInfo .price{
color:#ff3300;
font-size: 2rem;
}
.gallery .image-container .box .info .subInfo .stars i{
color:orange;
font-size: 1.5rem;
}
.deal{
min-height: 100vh;
}
.deal .box-container{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.deal .box-container .box{
flex:1 1 40rem;
height: 25rem;
margin:2rem;
border-radius: 1rem;
overflow: hidden;
position: relative;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.deal .box-container .box img{
height: 100%;
width: 100%;
object-fit: cover;
}
.deal .box-container .box .content{
position: absolute;
top:55%; left: 3rem;
transform:translateY(-50%);
}
.deal .box-container .box .content h3{
font-size: 3.5rem;
color:#fff;
text-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.deal .box-container .box .content p{
font-size: 2rem;
color:#fff;
}
.deal .box-container .box .content .btn{
margin:1.4rem 0;
}
.deal .icons-container{
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
flex-wrap: wrap;
}
.deal .icons-container .icons{
flex:1 1 25rem;
padding:1rem;
margin:1rem;
text-align: center;
border:.2rem solid var(--blue);
}
.deal .icons-container .icons i{
color:var(--blue);
font-size: 4rem;
padding:1rem 0;
}
.deal .icons-container .icons h3{
color:#333;
font-size: 2rem;
}
.deal .icons-container .icons p{
color:#666;
font-size: 1.3rem;
padding:1rem 0;
}
.newsletter{
background:linear-gradient(var(--blue),var(--blue)), url(../images/deal1.jpg) no-repeat;
background-blend-mode: multiply;
background-size: cover;
background-position: center;
background-attachment: fixed;
padding:4rem 1rem;
text-align: center;
}
.newsletter h1{
color:#fff;
font-size: 4rem;
}
.newsletter p{
color:#fff;
font-size: 2rem;
padding:1rem 0;
}
.newsletter form{
height:5.5rem;
max-width: 60rem;
margin:0 auto;
padding:0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 5rem;
background:rgba(0,0,0,.3);
}
.newsletter form input[type="email"]{
height: 100%;
width: 80%;
padding:0 1rem;
outline: none;
border:none;
background:none;
font-size: 2rem;
color:#fff;
}
.newsletter form input[type="submit"]{
border-radius: 5rem;
}
.footer .box-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.footer .box-container .box{
flex:1 1 25rem;
margin:2rem;
}
.footer .box-container .box .logo{
font-size: 2.5rem;
color:#333;
}
.footer .box-container .box i{
color:var(--blue);
}
.footer .box-container .box p{
font-size: 1.7rem;
padding:1rem 0;
color:#666;
}
.footer .box-container .box h3{
font-size: 2.5rem;
color:var(--blue);
}
.footer .box-container .box:nth-child(2){
text-align: center;
}
.footer .box-container .box:nth-child(2) a{
display: block;
font-size: 2rem;
padding:.4rem 0;
color:#666;
}
.footer .box-container .box:nth-child(2) a:hover{
text-decoration: underline;
}
.footer .credit{
text-align: center;
width: 85%;
margin:0 auto;
padding:1.4rem 0;
border-top: .1rem solid rgba(0,0,0,.3);
color:#666;
font-size: 2rem;
padding-bottom: 5rem;
}
.footer .credit span{
color:var(--blue);
}
/* media queries */
@media (max-width:768px){
html{
font-size: 55%;
}
header .header-1 .form-container form #search{
width: 100%;
}
header .header-2 #menu{
display: block;
}
header .header-2 .navbar{
position: fixed;
top: -200rem; left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 100vh rgba(0,0,0,.3);
z-index: 10000;
opacity: 0;
}
header .header-2 .navbar ul{
flex-flow: column;
background: linear-gradient(var(--blue), blueviolet);
border:.2rem solid #fff;
box-shadow: 0 .3rem .5rem #000;
padding:4rem 0;
width: 27rem;
}
header .header-2 .navbar ul li{
width: 100%;
margin:1rem 0;
text-align: center;
}
header .header-2 .navbar ul li a{
font-size: 2.5rem;
display: block;
}
.fa-times{
transform: rotate(180deg);
}
header .header-2 .nav-toggle{
top:50%;
opacity: 1;
}
.arrival .box-container{
width: auto;
}
}
@media (max-width:600px){
html{
font-size: 50%;
}
.home .home-slider .item .content h3{
font-size: 3rem;
}
.home .home-slider .item .content p{
font-size: 2rem;
width: auto;
}
.feature .row .image-container{
flex-flow: column wrap;
}
.feature .row .image-container .small-image{
flex-flow: row wrap;
padding-bottom: 2rem;
}
.feature .row .content{
padding:2rem;
border-top: .1rem solid rgba(0,0,0,.3);
}
.feature .row .content p{
width: auto;
}
.feature .row .content .btn{
margin: 2rem 0;
}
}
@media (max-width:400px){
html{
font-size: 45%;
}
header .header-1{
flex-flow: column;
padding:1rem;
}
header .header-1 .logo{
padding-bottom: 1.5rem;
}
}
JavaScript
$(document).ready(function(){
$('#menu').click(function(){
$(this).toggleClass('fa-times');
$('.navbar').toggleClass('nav-toggle');
});
$(window).on('scroll load',function(){
$('#menu').removeClass('fa-times');
$('.navbar').removeClass('nav-toggle');
if($(window).scrollTop() > 68){
$('header .header-2').addClass('header-active');
}else{
$('header .header-2').removeClass('header-active');
}
$('section').each(function(){
let height = $(this).height();
let offset = $(this).offset().top - 200;
let top = $(window).scrollTop();
let id = $(this).attr('id');
if(top >= offset && top < offset + height){
$('.navbar ul li a').removeClass('active');
$('.navbar').find(`[href="#${id}"]`).addClass('active');
}
});
});
$('.home-slider').owlCarousel({
items:1,
nav:true,
dots:false,
autoplay:true,
autoplayTimeout:8000,
loop:true
});
$('.small-image img').click(function(){
$(this).addClass('image-active').siblings().removeClass('image-active');
let image = $(this).attr('src');
$('.big-image img').attr('src', image);
});
$('.gallery .btn').click(function(){
let filter = $(this).attr('data-filter');
if(filter == 'all'){
$('.gallery .box').show(400);
}else{
$('.gallery .box').not('.'+filter).hide(200);
$('.gallery .box').filter('.'+filter).show(400);
}
$(this).addClass('button-active').siblings().removeClass('button-active');
});
});
