Ecommerce Shopping Website Design Using HTML CSS And JS

Ecommerce Shopping Website Design Using HTML CSS And JS


Create 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



HTML Code

   <!--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">&#169; 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>
    


All CSS Code
  *{
    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


Archive

Contact Form

Send