Ecommerce Shopping Website Design Using HTML CSS And JS
Learn How To Create a Ecommerce Shopping Website Using HTML CSS And JavaScript. This Ecommerce Shopping Website is Fully Responsive. I used HTML, CSS, and JavaScript To Create This Ecommerce Website. Follow My Tutorial Step By Step To Make This Beautiful Ecommerce Shopping Website.
I have more than Four years experience in Frontend(HTML, CSS, and JS). I will try to provide you best way to create Ecommerce Shopping Website using HTML CSS And JavaScript.
Make Ecommerce Shopping Website Using HTML CSS And JavaScript
<!--DOCTYPE html--> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--==title=============================--> <title>Ecommerce website using HTML, CSS, and JavaScript</title> <!--==css===============================--> <link rel="stylesheet" href="css/style.css"> <!--==fav-icon==========================--> <link rel="shortcut icon" href="images/fav-icon.png"> <!--==fontawesome=======================--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <!--==poppins===========================--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </head> <body> <!--==main==========================--> <section id="main"> <!--==header=============================--> <header> <!--**menu-btn*******--> <input type="checkbox" class="menu-btn" id="menu-btn"> <!--**header-top*****--> <div class="header-top"> <label for="menu-btn" class="menu-icon"> <span class="nav-icon"></span> </label> <div class="nav-location"> <a href="#"><i class="fa-solid fa-location-dot"></i> Store Locate</a> </div> <!--**logo***********--> <a href="index.html" class="logo"> <img alt="logo" src="images/logo.png" /> </a> <!--**contact-btn****--> <div class="nav-btns"> <!--search--> <a href="javascript:void(0);" class="nav-search"> <i class="fa-solid fa-magnifying-glass"></i> </a> <!--user--> <a href="javascript:void(0);" class="nav-user"> <i class="fa-regular fa-user"></i> </a> <!--cart--> <a href="#" class="nav-cart"> <i class="fa-brands fa-opencart"></i> <span>0</span> </a> </div> </div> <!--**nav************--> <nav class="navigation"> <!--**menu***********--> <ul class="menu"> <li><a href="index.html">Home</a></li> <li><a href="#category">Category</a></li> <li><a href="#shopping-banner">Shop</a></li> <li> <a href="#popular-dress">Populer</a> <span class="nav-lable">Hot Offer</span> </li> <li><a href="#recent-products">Recent</a></li> </ul> </nav> </header> <!--==content============================--> <div class="main-content"> <div class="main-content-text"> <strong>Collection</strong> <h1>Fashion Should be Stylish and Fun</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos minus quis illum voluptates laboriosam </p> <a href="#">Shop Now</a> </div> <div class="main-content-img"> <img alt="model" src="images/model.png"> </div> </div> </section> <!--==category======================--> <section id="category"> <a href="#" class="category-box"> <div class="category-box-img"> <img alt="hand bag" src="images/c1.png"> </div> <strong>Hand Bag</strong> </a> <a href="#" class="category-box"> <div class="category-box-img"> <img alt="T-Shirt" src="images/c2.png"> </div> <strong>T-Shirt</strong> </a> <a href="#" class="category-box"> <div class="category-box-img"> <img alt="Sunglass" src="images/c3.png"> </div> <strong>Sunglass</strong> </a> <a href="#" class="category-box"> <div class="category-box-img"> <img alt="Tops" src="images/c4.png"> </div> <strong>Tops</strong> </a> <a href="#" class="category-box"> <div class="category-box-img"> <img alt="Shoes" src="images/c5.png"> </div> <strong>Shoes</strong> </a> <a href="#" class="category-box"> <div class="category-box-img"> <img alt="Watch" src="images/c6.png"> </div> <strong>Watch</strong> </a> </section> <!--==popular-dress=================--> <section id="popular-dress"> <h2>Popular Dresses</h2> <div class="popular-dress-container"> <!--product-container--> <div class="popular-product-container"> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p1.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p2.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p3.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p4.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p5.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p6.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> </div> <!--banner--> <div class="popular-banner"> <div class="popular-banner-text"> <h3>Summer Dress Collection</h3> <a href="#">Shop Now</a> </div> <div class="popular-banner-img"> <img alt="" src="images/bannrt.png"> </div> </div> </div> </section> <!--==shopping-banner===============--> <section id="shopping-banner"> <div class="shopping-banner-container"> <div class="shopping-banner-text"> <strong>Collection</strong> <h3>Stylish Bag and Shoes</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis consequuntur, obcaecati hic sunt nisi, </p> <a href="#">Shop Now</a> </div> <div class="shopping-banner-img"> <img alt="" src="images/shoes-bag.png"> </div> </div> </section> <!--==recent-products===============--> <section id="recent-products"> <h2>Recent Product</h2> <div class="recent-product-container"> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p7.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p8.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p9.png"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/p10.webp"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Black Top</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> </div> </section> <!--==Partnre-logo================================--> <section id="partner"> <img alt="logo" src="images/logo-1.png"> <img alt="logo" src="images/logo-2.png"> <img alt="logo" src="images/logo-3.png"> <img alt="logo" src="images/logo-4.png"> </section> <!--==shoes-bags-products===============--> <section id="recent-products"> <h2>Shoes And Bags</h2> <div class="recent-product-container"> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/b1.png"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Lady Bags</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/b2.png"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Lady Bag</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/s1.png"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Lady Shoes</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> <!--product-box--> <div class="product-box"> <a href="#" class="product-box-img"> <img alt="product" src="images/s2.png"> <span>New</span> </a> <div class="product-box-text"> <a href="#" class="product-text-title">Lady Sandal</a> <span>20$ <del>40$</del></span> <a href="#" class="product-cart-btn"><i class="fa-solid fa-bag-shopping"></i> Add To Cart</a> </div> </div> </div> </section> <!--==services========================--> <section class="services"> <!--services-box--> <div class="services-box"> <i class="fas fa-shipping-fast"></i> <span>Free Shipping</span> <p>Free Shipping for all US order</p> </div> <!--services-box--> <div class="services-box"> <i class="fas fa-headphones-alt"></i> <span>Support 24/7</span> <p>We support 24h a day</p> </div> <!--services-box--> <div class="services-box"> <i class="fas fa-sync"></i> <span>100% Money Back</span> <p>You have 30 days to Return</p> </div> </section> <!--==footer==========================--> <footer> <div class="footer-container"> <!--**comoany-box**--> <div class="footer-company-box"> <!--logo--> <a href="index.html" class="footer-logo"> <img alt="" src="images/logo.png"> </a> <!--details--> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quas neque repudiandae nihil.</p> <!--social-box--> <div class="footer-social"> <a href="#"><i class="fa-brands fa-facebook-f"></i></a> <a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i class="fa-brands fa-twitter"></i></a> <a href="#"><i class="fa-brands fa-youtube"></i></a> </div> </div> <!--**link-box***--> <div class="footer-link-box"> <strong>Main Link's</strong> <ul> <li><a href="#">Home</a></li> <li><a href="#">Category</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Populer</a></li> <li><a href="#">Recent</a></li> </ul> </div> <!--**link-box***--> <div class="footer-link-box"> <strong>Social Link's</strong> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> <li><a href="#">Youtube</a></li> </ul> </div> <!--**Subscribe***--> <div class="footer-subscribe"> <strong>Subscribe Now</strong> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita quod id sed nemo. Haru.</p> <div class="subscribe-box"> <input type="email" placeholder="Example@gmail.com" required /> <button>Subscribe</button> </div> </div> </div> <!--**bottom**********************--> <div class="footer-bottom"> <span class="footer-owner">Made By Going-To Internet</span> <span class="copyright">© Copyright 2024 - Going-To Internet</span> </div> </footer> <!--==search-bar======================--> <div class="search-bar"> <!--search-input--> <div class="search-input"> <input type="text" placeholder="Search For Product" name="search" /> <!--cancel-btn--> <a href="javascript:void(0);" class="search-cancel"> <i class="fas fa-times"></i> </a> </div> </div> <!--==login-and-sign-up===============--> <div class="form"> <!--login--> <div class="login-form"> <!--cancel-btn--> <a href="javascript:void(0);" class="form-cancel"> <i class="fas fa-times"></i> </a> <strong>Log In</strong> <!--inputs--> <form> <input type="email" name="email" placeholder="Example@gmail.com" required /> <input type="password" name="password" placeholder="Password" required /> <input type="submit" value="Log In" /> </form> <!--forget-and-sign-up-btn--> <div class="form-btns"> <a href="#" class="forget">Forget Your Password?</a> <a href="javascript:void(0);" class="sign-up-btn">Create Account</a> </div> </div> <!--Sign-up--> <div class="sign-up-form"> <!--cancel-btn--> <a href="javascript:void(0);" class="form-cancel"> <i class="fas fa-times"></i> </a> <strong>Sign Up</strong> <!--inputs--> <form> <input type="text" name="fullname" placeholder="Full Name" required /> <input type="email" name="email" placeholder="Example@gmail.com" required /> <input type="password" name="password" placeholder="Password" required /> <input type="submit" value="Sign Up" /> </form> <!--forget-and-sign-up-btn--> <div class="form-btns"> <a href="javascript:void(0);" class="already-account"> Already Have Account?</a> </div> </div> </div> <!--==script==========================--> <script> document.addEventListener('DOMContentLoaded', function () { //==for search=====================================// document.addEventListener('click', function (event) { if (event.target.closest('.nav-search')) { document.querySelector('.search-bar').classList.add('search-bar-active'); } else if (event.target.closest('.search-cancel')) { document.querySelector('.search-bar').classList.remove('search-bar-active'); } }); // ==For Login and Sign-up========================// document.addEventListener('click', function (event) { // Check if the clicked element has the class 'user' or 'already-account' if (event.target.closest('.nav-user, .already-account')) { const formElement = document.querySelector('.form'); formElement.classList.add('login-active'); formElement.classList.remove('sign-up-active'); } // Check if the clicked element has the class 'sign-up-btn' else if (event.target.closest('.sign-up-btn')) { const formElement = document.querySelector('.form'); formElement.classList.add('sign-up-active'); formElement.classList.remove('login-active'); } // Check if the clicked element has the class 'form-cancel' else if (event.target.closest('.form-cancel')) { const formElement = document.querySelector('.form'); formElement.classList.remove('login-active'); formElement.classList.remove('sign-up-active'); } }); //==for fix header===========================// const header = document.querySelector('header'); let lastScrollY = window.scrollY; // Store the last scroll position window.addEventListener('scroll', function () { const currentScrollY = window.scrollY; // Check if at the top if (currentScrollY === 0) { header.classList.remove('header-fix'); } else if (currentScrollY < lastScrollY) { // Scrolling up header.classList.add('header-fix'); } else { header.classList.remove('header-fix'); } // Update the last scroll position lastScrollY = currentScrollY; }); }); </script> </body> </html>
*{
margin: 0px;
padding: 0px;
font-family: poppins;
box-sizing: border-box;
scroll-behavior: smooth;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
:root{
--main-color:#faece1;
--main-light:#f9f3ee;
--secondary-color:#ff805d;
--product-bg-color:#f8f8f8;
}
/*==main================================*/
#main{
background-color: var(--main-light);
min-height: 80vh;
position: relative;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
/*==nav-bar=============================*/
.header-top{
max-width: 1200px;
width: 90%;
margin: auto;
padding: 15px 0px;
border-bottom: 1px solid #e7e7e7;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-location{
display: flex;
justify-content: center;
align-items: center;
}
.nav-location a{
color: #000000;
font-size: 0.8rem;
font-weight: 500;
}
.nav-location a i{
color: var(--secondary-color);
margin-right: 5px;
font-size: 0.9rem;
}
.navigation{
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
width: 90%;
margin: auto;
padding: 20px 0px;
z-index: 101;
position: relative;
}
.logo{
font-size: 1.8rem;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
color: #222222;
}
.logo img{
max-width: 180px;
max-height: 40px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
object-fit: contain;
object-position: center;
}
.menu{
display: flex;
align-items: center;
}
.menu li a{
margin: 0px 15px;
color: #4d4d4d;
letter-spacing: 0.5px;
font-weight: 500;
font-size: 0.8rem;
transition: all ease 0.3s;
}
.menu li a:hover{
color: #181818;
}
.nav-btns{
display: flex;
justify-content: center;
align-items: center;
grid-gap: 25px;
}
.nav-btns a{
color: #3f3f3f;
}
.nav-cart {
position: relative;
}
.nav-cart span{
color: #ffffff;
background-color: var(--secondary-color);
width: 16px;
height: 16px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 0.6rem;
font-weight: 600;
position: absolute;
right: -8px;
top: -12px;
}
.menu li{
position: relative;
}
.nav-lable{
padding: 2px 10px;
background-color: var(--secondary-color);
color: #ffffff;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.6rem;
text-transform: uppercase;
position: absolute;
top: -15px;
right: -20px;
}
.nav-lable:after{
content: '';
width:0px;
height: 0px;
border-bottom: 3px solid transparent;
border-left: 3px solid transparent;
border-top: 5px solid var(--secondary-color);
border-right: 3px solid transparent;
position: absolute;
left: 10%;
top: 100%;
}
header.header-fix{
background-color: #ffffff;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
z-index: 101;
box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
animation: navanimation 0.6s;
}
header.header-fix .header-top{
border-bottom: 1px solid #f7f7f7;
}
@keyframes navanimation {
0%{
top: -100%;
}
100%{
top: 0%;
}
}
/* search */
.search-bar{
width:100%;
height: 40vh;
background-color: #ffffffbb;
backdrop-filter: blur(30px);
position: fixed;
left: 0px;
bottom: 0px;
display: none;
justify-content: center;
box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
z-index: 101;
animation: search 0.3s;
}
.search-input{
width:90%;
border-bottom: 1px solid #d4d4d4;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
margin-top: 20px;
}
.search-bar input{
width:100%;
border: none;
outline: none;
background-color: transparent;
font-size: 1.8rem;
margin: 0px;
}
.search-cancel{
color: var(--secondary-color);
font-size: 2rem;
padding-right: 40px;
}
.search-bar-active{
display: flex;
}
@keyframes search{
0%{
bottom: -300px;
}
100%{
bottom: 0px;
}
}
/* login signup */
.form{
width:100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 102;
}
.login-form,
.sign-up-form{
width:420px;
padding: 20px 10px;
background-color: #ffffff;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 5px;
position: relative;
}
.login-form form,
.sign-up-form form{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.login-form strong,
.sign-up-form strong{
color: #272727;
font-size: 2rem;
margin: 2px 7px 7px 7px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
}
.login-form input,
.sign-up-form input{
width:90%;
height: 45px;
margin: 6px 0px;
padding: 0px 10px;
border: 1px solid rgba(0,0,0,0.1);
outline: none;
border-radius: 7px;
}
.login-form input::placeholder,
.sign-up-form input::placeholder{
color: rgba(0,0,0,0.5);
}
.login-form input[type="submit"],
.sign-up-form input[type="submit"]{
background-color: var(--secondary-color);
color: #ffffff;
border: none;
outline: none;
text-transform: uppercase;
margin-top: 10px;
border-radius: 3px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.form-btns{
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.form-btns a{
color: #4d4d4d;
font-size: 0.9rem;
}
.sign-up-btn{
border-bottom: 1px solid #868686;
line-height: 16px;
}
.form-cancel{
position: absolute;
right: 20px;
top: 10px;
color: #868686;
}
.login-form,
.sign-up-form,
.form{
display: none;
}
.login-active,
.login-active .login-form{
display: flex;
animation: fade 0.3s;
}
.sign-up-active,
.sign-up-active .sign-up-form{
display: flex;
animation: fade 0.3s;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
/* main content */
.main-content{
display: flex;
justify-content: space-between;
width: 90%;
margin: auto;
max-width: 1200px;
align-items: center;
padding-top: 20px;
margin-bottom: 0px;
}
.main-content-img{
width: 100%;
height: 75vh;
}
.main-content-img img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.main-content-text strong{
color: var(--secondary-color);
text-transform: uppercase;
letter-spacing: 10px;
font-weight: 600;
}
.main-content-text h1{
font-size: 3rem;
color: #181818;
line-height: 3.7rem;
font-weight: 600;
}
.main-content-text p{
color: #5f5f5f;
margin: 20px 0px;
font-size: 0.9rem;
}
.main-content-text a{
color: #ffffff;
background-color: var(--secondary-color);
max-width: 150px;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
}
.main-content-text{
display: flex;
flex-direction: column;
margin-bottom: 80px;
}
/* category */
#category{
max-width: 1200px;
width: 90%;
margin: 50px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 50px;
overflow-x: auto;
}
.category-box{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 25px;
transition: all ease 0.3s;
}
.category-box:hover{
opacity: 0.8;
}
.category-box-img{
background-color: var(--main-color);
border-radius: 50%;
padding: 20px;
width: 100px;
height: 100px;
}
.category-box-img img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.category-box strong{
color: #1d1d1d;
font-size: 0.9rem;
margin-top: 10px;
font-weight: 600;
}
/* popular-dress */
#popular-dress{
max-width: 1200px;
width: 90%;
margin: 50px auto;
}
.popular-dress-container{
display: grid;
grid-template-columns: 1fr 300px;
grid-gap: 50px;
margin-top: 20px;
}
#popular-dress h2,
#recent-products h2{
color: #1d1d1d;
font-size: 1.6rem;
font-weight: 600;
}
.popular-product-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 40px;
}
.product-box{
display: flex;
flex-direction: column;
width: 100%;
}
.product-box-img{
width: 100%;
max-height: 400px;
background-color: var(--product-bg-color);
padding: 20px;
border-radius: 5px;
position: relative;
transition: all ease 0.3s;
}
.product-box-img:hover{
opacity: 0.8;
}
.product-box-img img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.product-box-img span{
color: #ffffff;
background-color: var(--secondary-color);
position: absolute;
right: 5px;
top: 5px;
font-size: 0.8rem;
padding: 2px 10px;
font-weight: 400;
border-radius: 3px;
letter-spacing: 0.2px;
}
.product-box-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.product-box-text .product-text-title{
color: #000000;
font-size: 1rem;
font-weight: 600;
margin-top: 10px;
}
.product-box-text span{
color:var(--secondary-color);
font-size: 0.9rem;
font-weight: 500;
margin: 5px;
}
.product-box-text span del{
color: #696969;
}
.product-box-text .product-cart-btn{
border-top: 1px solid #e9e9e9;
width: 100%;
padding: 10px;
color: #1d1d1d;
font-size: 0.9rem;
font-weight: 500;
transition: all ease 0.3s;
}
.product-box-text .product-cart-btn i{
margin-right: 5px;
}
.product-box-text .product-cart-btn:hover{
background-color: var(--secondary-color);
color:#ffffff;
border-top: 1px solid transparent;
}
.popular-banner{
background-color: var(--main-color);
width: 100%;
min-height: 500px;
}
.popular-banner{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 40px 30px;
text-align: center;
}
.popular-banner-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.popular-banner-text h3{
font-size: 1.6rem;
font-weight: 500;
color: #1d1d1d;
}
.popular-banner-text a{
color: var(--secondary-color);
font-weight: 500;
margin-top: 10px;
}
.popular-banner-img{
height: 100%;
width: 100%;
margin-top: 30px;
}
.popular-banner-img img{
width: 100%;
height: 100%;
object-fit: contain;
}
/* shopping-banner */
#shopping-banner{
max-width: 1200px;
width: 90%;
margin: 50px auto;
background-color: var(--main-color);
padding: 30px;
border-radius: 10px;
}
.shopping-banner-container{
display:grid;
grid-template-columns: 1fr 1fr;
align-items: center;
max-width: 900px;
margin: auto;
}
.shopping-banner-text{
display: flex;
flex-direction: column;
max-width: 400px;
}
.shopping-banner-text strong{
color: var(--secondary-color);
text-transform: uppercase;
letter-spacing: 10px;
font-weight: 500;
}
.shopping-banner-text h3{
color: #181818;
font-size: 1.8rem;
}
.shopping-banner-text p{
color: #3f3f3f;
margin: 10px 0px;
}
.shopping-banner-text a{
color: #ffffff;
background-color: #181818;
max-width: 160px;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.shopping-banner-img{
height: 300px;
display: flex;
justify-content: center;
}
.shopping-banner-img img{
height: 100%;
object-fit: contain;
object-position: center;
}
/* recent-products */
#recent-products{
width: 90%;
max-width: 1200px;
margin: 50px auto;
}
.recent-product-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 40px;
margin-top: 20px;
}
/*==partner-logo=================================*/
#partner{
max-width: 1200px;
width: 90%;
margin: 50px auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 40px;
grid-gap: 15px;
}
#partner img{
height: 50px;
object-fit: contain;
object-position: center;
filter: grayscale(1);
opacity: 0.3;
transition: all ease 0.3s;
}
#partner img:hover{
filter: grayscale(0);
opacity: 1;
transition: all ease 0.3s;
}
/* services */
.services{
display: flex;
width: 90%;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: auto;
max-width: 1200px;
}
.services-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid rgba(0,0,0,0.1);
min-width: 250px;
padding-bottom: 10px;
margin: 15px;
flex-grow: 0.7;
}
.services-box i{
color: var(--secondary-color);
font-size: 2rem;
margin: 15px;
}
.services-box span{
color: #222222;
font-weight: 600;
letter-spacing: 0.5px;
font-size: 1rem;
}
.services-box p{
color: #878787;
margin: 0px;
font-size: 0.9rem;
}
/*==footer================================*/
footer{
width: 100%;
}
.footer-container{
max-width: 1200px;
width: 90%;
margin: 0px auto;
padding: 50px 0px;
display:flex;
justify-content: space-between;
align-items: flex-start;
}
.footer-company-box,
.footer-subscribe{
max-width: 330px;
}
.footer-company-box .footer-logo{
color: #333333;
font-size: 1.8rem;
text-transform: uppercase;
font-weight: 600;
height: 45px;
max-width: 150px;
display: flex;
}
.footer-logo img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.footer-company-box p,
.footer-subscribe p{
color: #585858;
margin: 5px 0px;
}
.footer-social{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.footer-social a{
margin-top: 10px;
margin-right: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #e9e9e9;
color: #333333;
font-size: 0.9rem;
transition: all ease 0.3s;
}
.footer-social a:hover{
background-color: var(--secondary-color);
color: #ffffff;
border: none;
}
.footer-link-box strong,
.footer-subscribe strong{
font-size: 1.2rem;
color: #3b3b3b;
font-weight: 600;
}
.footer-link-box ul{
margin-top: 5px;
}
.footer-container ul li a{
color: #585858;
transition: all ease 0.3s;
}
.footer-container ul li a:hover{
color: var(--secondary-color);
}
.subscribe-box{
width: 100%;
border: 1px solid #dadada;
display: flex;
justify-content: center;
height: 100%;
margin-top: 10px;
}
.subscribe-box input{
width: 100%;
border: none;
outline: none;
background-color: transparent;
padding: 0px 15px;
}
.subscribe-box button{
border: none;
outline:none;
background-color: var(--secondary-color);
color: #ffffff;
text-transform: uppercase;
font-weight: 500;
height: 40px;
padding: 0px 20px;
cursor: pointer;
}
.footer-bottom{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
grid-gap: 10px;
border-top: 1px solid #e9e9e9;
padding: 20px 0px;
max-width: 1200px;
width: 90%;
margin: auto;
}
.footer-bottom span{
color: #252525;
font-size: 0.9rem;
}
/*==making-responsive============*/
.menu-icon,
.menu-btn{
display: none;
}
@media(max-width:1200px){
.footer-container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 40px;
}
}
@media(max-width:1100px){
.popular-dress-container{
grid-template-columns: 1fr;
}
.popular-banner-img{
max-height: 500px;
}
}
@media(max-width:1024px){
.search-input{
height: 60px;
}
.search-input input,
.search-cancel{
font-size: 1.4rem;
}
.recent-product-container{
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;}
#partner{
margin-top: 20px;
justify-content:center;
grid-gap: 30px;
}
#partner img{
height: 40px;}
.main-content{
flex-direction: column-reverse;
}
.main-content-img{
max-height: 60vh;
}
.main-content-text{
margin-top: 30px;
}
.main-content-text h1{
font-size: 2rem;
line-height: 2.4rem;
}
}
@media(max-width:850px){
#shopping-banner{
padding: 20px;
}
.shopping-banner-container{
display:flex;
flex-direction: column-reverse;
}
.shopping-banner-img{
height: auto;
width: 90%;
}
.shopping-banner-img img{
width: 100%;
}
.shopping-banner-text{
max-width: 90%;
margin-top: 30px;
}
.navigation{
padding: 0px;
width: 100%;
z-index: 103;
}
.nav-location{
display: none;
}
.logo img{
max-height: 30px;}
.navigation .menu{
display: none;
position: absolute;
left: 0px;
top:-1px;
background-color: var(--main-light);
width: 100%;
padding: 0px;
margin: 0px;
box-shadow: 2px 30px 30px rgba(0,0,0,0.05);
}
header.header-fix .navigation .menu{
background-color: #ffffff;
}
.navigation .menu li{
width:100%;
margin: 0px;
padding: 0px;
}
.navigation .menu li a{
width: 100%;
display: flex;
align-items: center;
margin: 0px;
padding: 20px;
border-top: 1px solid #e2e2e26e;
}
.nav-lable{
display: none;
}
.menu-icon{
display: block;
}
.menu-icon{
cursor: pointer;
float: right;
padding: 10px 0px;
position: relative;
user-select: none;
z-index: 106;
}
.menu-icon .nav-icon{
background-color: #181818;
display: block;
position: relative;
height: 2px;
transition: background 0.2s ease-out;
width: 20px;
}
.menu-icon .nav-icon::before,
.menu-icon .nav-icon::after{
background-color: #181818;
content: '';
position: absolute;
height: 100%;
transition: all ease-out 0.2s;
width: 100%;
}
.menu-icon .nav-icon::before{
top: 7px;
}
.menu-icon .nav-icon::after{
top: -7px;
}
.menu-icon:checked ~ .header-top .menu-icon .nav-icon,
.menu-btn:checked ~ .header-top .menu-icon .nav-icon{
background-color: transparent;
}
.menu-btn:checked ~ .header-top .menu-icon .nav-icon::before{
transform: rotate(-45deg);
top: 0px;
}
.menu-btn:checked ~ .header-top .menu-icon .nav-icon::after{
transform: rotate(45deg);
top: 0px;
}
.menu-btn:checked ~ .navigation .menu{
display: block;
}
}
@media(max-width:724px){
.popular-product-container{
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.recent-product-container{
grid-template-columns: 1fr 1fr;}
.footer-container{
grid-template-columns: 1fr;
}
.login-form,
.sign-up-form{
width:90%;
}
.services{
width:100%;
}
.services-box{
width:100%;
}
}
@media(max-width:315px){
.nav-user{
display: none;
}
.recent-product-container{
grid-template-columns: 1fr ;}
.popular-product-container{
grid-template-columns: 1fr;
}
}
Comments