How To Create Shopping Website Only Using HTML And CSS

byPosted at
How To Create Shopping Website Only Using HTML And CSS
Create Shopping Website HTML CSS

Learn how to make a Shopping website using HTML and CSS. Easy way to create Shopping Website only using HTML and CSS. I also provide you HTML and CSS code which helps you to understand this Tutorial.

Learn How To Make Shopping Website Only Using HTML And CSS

  1. 00:00 - 02:10 min : Intro
  2. 02:10 - 01.07.00 min: Making Shopping Website Using HTML and CSS


Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices. 


<html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<title>Side Login and Registration Form Bar</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

➤Shopping Website HTML Code have given below.


  
  <!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--title=================================================-->
<title>Shopping Website</title>

<!--stylesheet============================================-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<!--fav-icon==============================================-->
<link rel="shortcut icon" href="images/fav-icon.png"/>

<!--using FontAwesome=====================================-->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
</head>

<body>

     <!--==navigation-bar==============================================-->
     <nav class="navigation">

        <!--logo------->
        <a href="index.html" class="logo">logo</a>

        <!--menu-btn----->
        <input type="checkbox" class="menu-btn" id="menu-btn">
        <label for="menu-btn" class="menu-icon">
            <span class="nav-icon">
                <i class="fas fa-bars"></i></span>
        </label>

        <!--menu------->
        <ul class="menu">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <!--right-->
        <div class="right-elements">
            <!--search-->
            <a href="#" class="search"><i class="fas fa-search"></i></a>
            <!--cart---->
            <a href="#" class="cart"><i class="fas fa-shopping-bag"></i></a>
            <!--user---->
            <a href="#" class="user"><i class="far fa-user"></i></a>
        </div>

    </nav>

    <!--main===============================================================-->
    <section id="main">
    <!--main-content----------------------------->
    <div class="main-content">

        <!--text------------>
        <div class="main-text">
            <span>Collection</span>
            <h1>Comfortable T-Shirts with Great Comfort</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam, eveniet necessitatibus id cum cumque corrupti delectus, eligendi labore possimus beatae.</p>
            <a href="#">Shop Now</a>
        </div>

        <!--img------------->
        <div class="main-img">
            <img alt="shirt" src="images/main.png">
        </div>

    </div>

    </section>

<!--==Categories==============================================-->
<section id="categories">


    <h2>Categories</h2>

    <div class="category-container">
    <!--box------------------------>
    <a href="#" class="category-box">
        <img alt="shirts" src="images/c-1.png">
        <span>Shirts</span>
    </a>

    <!--box------------------------>
    <a href="#" class="category-box">
        <img alt="pents" src="images/c-2.png">
        <span>Pents</span>
    </a>

    <!--box------------------------>
    <a href="#" class="category-box">
        <img alt="jackets" src="images/c-3.png">
        <span>Jackets</span>
    </a>

    <!--box------------------------>
    <a href="#" class="category-box">
        <img alt="shoes" src="images/c-4.png">
        <span>Shoes</span>
    </a>

</div>


</section>



<!--==Feature=product===============================================================-->
<section id="feature-product">
    <h1>Feature Product</h1>

    <div class="feature-product-container">
    
        <!--box-1---------------------->
        <div class="feature-product-box">

            <!--img------------------>
            <div class="product-feature-img">
                <img alt="shirt" src="images/p-1.png">
            </div>

            <!--text-contaier--------->
            <div class="product-feature-text-container">
                <!--text-->
                <div class="product-feature-text">
                    <strong>Unique Collection</strong>
                    <span>$239.00</span>
                </div>
                <!--cart-like-->
                <div class="cart-like">
                    <a href="#"><i class="fas fa-shopping-cart"></i></a>
                    <a href="#"><i class="far fa-heart"></i></a>
                </div>
                
            </div>

        </div>



        <!--box-2---------------------->
        <div class="feature-product-box">

            <!--img------------------>
            <div class="product-feature-img">
                <img alt="shirt" src="images/p-2.png">
            </div>

            <!--text-contaier--------->
            <div class="product-feature-text-container">
                <!--text-->
                <div class="product-feature-text">
                    <strong>Unique Collection</strong>
                    <span>$239.00</span>
                </div>
                <!--cart-like-->
                <div class="cart-like">
                    <a href="#"><i class="fas fa-shopping-cart"></i></a>
                    <a href="#"><i class="far fa-heart"></i></a>
                </div>
                
            </div>

        </div>




        <!--box-3---------------------->
        <div class="feature-product-box">

            <!--img------------------>
            <div class="product-feature-img">
                <img alt="shirt" src="images/p-3.png">
            </div>

            <!--text-contaier--------->
            <div class="product-feature-text-container">
                <!--text-->
                <div class="product-feature-text">
                    <strong>Unique Collection</strong>
                    <span>$239.00</span>
                </div>
                <!--cart-like-->
                <div class="cart-like">
                    <a href="#"><i class="fas fa-shopping-cart"></i></a>
                    <a href="#"><i class="far fa-heart"></i></a>
                </div>
                
            </div>

        </div>




        <!--box-4---------------------->
        <div class="feature-product-box">

            <!--img------------------>
            <div class="product-feature-img">
                <img alt="shirt" src="images/p-4.png">
            </div>

            <!--text-contaier--------->
            <div class="product-feature-text-container">
                <!--text-->
                <div class="product-feature-text">
                    <strong>Unique Collection</strong>
                    <span>$239.00</span>
                </div>
                <!--cart-like-->
                <div class="cart-like">
                    <a href="#"><i class="fas fa-shopping-cart"></i></a>
                    <a href="#"><i class="far fa-heart"></i></a>
                </div>
                
            </div>

        </div>
        
    </div>


</section>




    <!--==banner==============================================================-->
    <section id="banner">

        <!--text------>
        <div class="banner-text">
            <strong>Beautifull Sofa</strong>
            <span>From $239</span>
            <p>Long Lasting and Confortable to use. This is only for you.</p>
            <a href="#">Shop Now</a>
        </div>
        <!--img------->
        <div class="banner-img">
            <img alt="" src="images/banner.png">
        </div> 

    </section>


    <!--==products=============================================================-->
    <section id="products">

        <!--heading------------------------------------------------->
        <div class="product-heading">
            <h3>Our Product</h3>
        </div>

        <!--product-container--------------------------------------->
        <div class="feature-product-container">
    
            <!--box-1---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-1.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>
    
    
    
            <!--box-2---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-2.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>
    
    
    
    
            <!--box-3---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-3.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>
    
    
    
    
            <!--box-4---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-4.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>


            <!--box-5---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-5.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>



            <!--box-6---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-6.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>



            <!--box-7---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-7.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>



            <!--box-8---------------------->
            <div class="feature-product-box">
    
                <!--img------------------>
                <div class="product-feature-img">
                    <img alt="shirt" src="images/pro-8.png">
                </div>
    
                <!--text-contaier--------->
                <div class="product-feature-text-container">
                    <!--text-->
                    <div class="product-feature-text">
                        <strong>Unique Collection</strong>
                        <span>$239.00</span>
                    </div>
                    <!--cart-like-->
                    <div class="cart-like">
                        <a href="#"><i class="fas fa-shopping-cart"></i></a>
                        <a href="#"><i class="far fa-heart"></i></a>
                    </div>
                    
                </div>
    
            </div>
            
        </div>

    </section>





    <!--==banner==============================================================-->
    <section id="banner" class="banner-reverse">

        <!--text------>
        <div class="banner-text">
            <strong>Beautifull Sofa</strong>
            <span>From $239</span>
            <p>Long Lasting and Confortable to use. This is only for you.</p>
            <a href="#">Shop Now</a>
        </div>
        <!--img------->
        <div class="banner-img">
            <img alt="" src="images/banner-2.png">
        </div> 

    </section>



    <!--==Latest-News=========================================================-->
    <section id="news">

        <!--heading-------->
        <div class="news-heading">
            <h3>Latest News</h3>
        </div>

        <!--container------>
        <div class="news-box-container">
            
            <!--box------>
            <div class="news-box">
                <!--img--->
                <div class="news-img">
                    <img alt="news" src="images/pro-7.png">
                    <!--label-->
                    <div class="news-label">
                        New
                    </div>
                </div>
                <!--text-->
                <div class="news-text">
                    <strong>We Provide You The Best Things</strong>
                    <span>Admin | Products</span>
                    <a href="#">Read More</a>
                </div>
            </div>


            <!--box------>
            <div class="news-box">
                <!--img--->
                <div class="news-img">
                    <img alt="news" src="images/pro-2.png">
                    <!--label-->
                    <div class="news-label">
                        New
                    </div>
                </div>
                <!--text-->
                <div class="news-text">
                    <strong>We Provide You The Best Things</strong>
                    <span>Admin | Products</span>
                    <a href="#">Read More</a>
                </div>
            </div>


            <!--box------>
            <div class="news-box">
                <!--img--->
                <div class="news-img">
                    <img alt="news" src="images/news-3.png">
                    <!--label-->
                    <div class="news-label">
                        New
                    </div>
                </div>
                <!--text-->
                <div class="news-text">
                    <strong>We Provide You The Best Things</strong>
                    <span>Admin | Products</span>
                    <a href="#">Read More</a>
                </div>
            </div>

        </div>

    </section>




    <!--==footer=================================================================-->
    <footer>
        <div class="footer-container">
    
            <div class="footer-logo-container">
                <!--logo-------------->
                <div class="footer-logo">
                    LOGO
                </div>
                <span>&#169; 2021 PeachPay, Inc.</span>
                <!--social-links------>
                <div class="footer-social">
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
    
    
    
    
    
            <!--footer-menu---------------------------------------->
            <div class="footer-menu">
    
                <!--footer-menu-box----->
                <div class="footer-menu-box">
                    <strong>Product</strong>
                    <ul>
                        <li><a href="#">Women</a></li>
                        <li><a href="#">Latest Kids Clothes</a></li>
                        <li><a href="#">New Men Shoes</a></li>
                    </ul>
                </div>
    
                <!--footer-menu-box----->
                <div class="footer-menu-box">
                    <strong>Contact</strong>
                    <ul>
                        <li>info@peachpay.app</li>
                        <li>1-415-562-8258</li>
                    </ul>
                </div>
    
                <!--footer-menu-box----->
                <div class="footer-menu-box">
                    <strong>Company</strong>
                    <ul>
                        <li><a href="#">Merch Store</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>

                <!--footer-menu-box----->
                <div class="footer-menu-box">
                    <strong>Company 2</strong>
                    <ul>
                        <li><a href="#">Merch Store</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
    
    

         
        </div>
        </footer>

        <span class="copyright">Copyright 2021 - GoingToInternet</span>
    
</body>


</html>

➤Shopping Website CSS Code is have given below.


	*{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    box-sizing: border-box;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

::selection{
    background-color: #dd4242;
    color: #ffffff;
}

/*====navigation=====================================*/
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    margin: auto;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 100;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    
}
.logo{
    font-size: 2.1rem;
    color: #414141;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.menu{
    display: flex;
}
.menu li a{
    margin: 5px;
    padding: 5px 20px;
    color: #2e2e2e;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.4;
    transition: all ease 0.2s;
}
.menu .active{
    opacity: 1;
}

.right-elements{
    display: flex;
    justify-content: center;
    align-items: center;
}
.right-elements a{
    margin: 0px 10px;
}
.right-elements a i{
    color: #2c2c2c;
}
.right-elements a:hover i{
    color: #cf2728;
    transition: all ease 0.2s;
}
.menu li a:hover{
    opacity: 1;
    transition: all ease 0.3s;
}

/*==main========================================*/

#main{
    background-color: #ffffff;
    min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 30px;
}
.main-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 50px auto;
}
.main-text{
    max-width: 500px;
}
.main-img{
    height: 500px;
    width: 500px;
}
.main-img img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

.main-text span{
    text-transform: uppercase;
    font-weight: 600;
    color: #e74444;
    letter-spacing: 2px;
}
.main-text h1{
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 45px;
}
.main-text p{
    margin: 20px 0px;
    color: #747474;
}
.main-text a{
    width: 180px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.14);
    color: #f8f8f8;
    background-color: #e74444;
}
.main-text a:hover,
.banner-text a:hover,
.cart-like a:hover{
    background-color: #cf2728;
    color: #ffffff;
    transition: all ease 0.3s;
    border: none;
}
.cart-like a:hover i{
    color: #ffffff;
}

/*===categories==========================================*/
#categories{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0px 50px 0px;
    flex-direction: column;
}
#categories h2{
    font-weight: 500;
    padding: 2px 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 20px 0px;
    border: 1px solid rgba(0,0,0,0.14);
}
.category-container{
    display: flex;
    margin:auto;
    width: 1200px;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    background-color: #f5f5f544;
}
.category-box{
    position: relative;
    padding: 20px;
}

.category-box img{
    width: 220px;
    height: 220px;
    object-fit: contain;
    object-position: center;  
    padding: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all ease 0.2s;
}

.category-box span{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: #2c2b2b;
    padding: 2px 20px;
    text-transform: uppercase;
}
.category-box:hover img{
    transform: scale(1.02);
    transition: all ease 0.2s;
    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.05);
}
/*==feature-product==========================*/
#feature-product{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px 0px;
}
#feature-product h1{
    color: #2e2e2e;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
}
#feature-product h1::after{
    border-bottom: 1px solid #000;
    width: 40%;
    height: 1px;
    background-color: #2e2e2e;
    position: absolute;
    content: '';
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
}

.feature-product-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin: 60px auto;
    width: 1200px;
    padding: 20px 0px;
    background-color: #d6d6d60e;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.feature-product-box{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin: 20px 20px;
}

.product-feature-img{
    width: 250px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.product-feature-img img{
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center;
}
.product-feature-text-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.product-feature-text{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.product-feature-text strong{
    color: #272722;
    font-weight: 600;
    line-height: 20px;
}
.product-feature-text span{
    color: #747474;
}
.cart-like{
 display: flex;   
}
.cart-like a{
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #747474;
    margin: 0px 3px;
    font-size: 0.9rem;
}
.cart-like a i{
    color: #2c2c2c;
}
/*==banner====================================*/
#banner{
    border:1px solid rgb(235, 235, 235);
    max-width:1200px;
    display: grid;
    grid-template-columns: 0.7fr 1.4fr;
    margin: auto;
    grid-gap: 40px;
    height: 300px;
    background-color: #f5f5f5;
    margin-bottom: 50px;
}

.banner-img{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 300px;
}

.banner-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.banner-text{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 300px;
    padding: 20px 40px;
}
.banner-text strong{
    font-size: 2rem;
    font-weight: 500;
    color: #292929;
}
.banner-text span{
    color: #222222;
    font-size: 1.2rem;
    font-weight: 400;
}
.banner-text p{
    color: #636363;
}
.banner-text a{
    color: #ffffff;
    background-color: #e74444;
    width:140px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    border: 1px solid rgba(0,0,0,0.14);
}

/*==products=========================================*/

.product-heading h3{
    color: #2e2e2e;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
    margin: 80px 0px 50px 0px;
}
.product-heading h3::after{
    border-bottom: 1px solid #000;
    width:8%;
    height: 1px;
    background-color: #2e2e2e;
    position: absolute;
    content: '';
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
}

/*===banner-2==============================*/
.banner-reverse{
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    margin: 100px auto !important;
}
/*==news===================================*/
#news{
    margin: 60px 0px;}

.news-heading h3{
    color: #2e2e2e;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
}
.news-heading h3::after{
    border-bottom: 1px solid #000;
    width: 10%;
    height: 1px;
    background-color: #2e2e2e;
    position: absolute;
    content: '';
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
}
.news-box-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
.news-box{
    width: 350px;
    height: 350px;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
    margin: 20px;
}
.news-img{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.news-img img{
    width: 80%;
    height: 80%;
    object-fit: contain;
    object-position: center;

}
.news-text{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:center;
    flex-direction: column;
    border: 4px solid #d6d6d6;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.18);
    padding: 20px;
    display: none;
    text-align: center;
}
.news-box:hover .news-text{
    display: flex;
    animation: fade 0.3s;
}
@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.news-text strong{
    color: #f1f1f1;
    font-size: 1.2rem;
}
.news-text span{
    color: #ffffff;
    border: 1px solid #636363;
    font-weight: 500;
    padding: 0px 10px;
    background-color: #292929;
}
.news-label{
    position: absolute;
    right: 20px;
    top: 20px;
    color: #ffffff;
    background-color: #e74444;
    padding: 3px 20px;
    z-index: 2;
}
.news-text a{
    color: #fdfcfc;
    margin-top: 10px;
    background-color: #cf2728;
    padding: 2px 10px;
}
.news-text a:hover{
    background-color: #b32222;
    transition: all ease 0.3s;
}
/*==footer=====================================*/
footer{
    background-color: #f5f5f5;
    padding:60px 10px;
    position: relative;
    margin-top: 20px;
    border-top: 1px solid rgb(236, 236, 236);
}

.footer-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width:85%;
    margin: 10px auto;
}
.footer-logo-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-logo{
    width:150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #131313;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}
.footer-logo img{
    width:100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.footer-logo-container span{
    color: #888888;
    font-weight: 400;
    margin: 10px;
    font-size: 0.8rem;
}
.footer-social{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-social a{
    margin: 0px 6px;
    border-radius: 50%;
    color: #212121;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width:30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-social a:hover{
    color: #ffffff;
    background-color: #ff6c43;
    transition: all ease 0.2s;
}
.footer-menu{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-menu-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 30px;
}
.footer-menu-box strong{
    color: #292929;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.footer-menu-box ul li a,
.footer-menu-box ul li {
    color: #888888;
    font-size: 0.9rem;
    margin: 5px 0px;
}
.footer-menu-box ul li a:hover{
    color: #000000;
    transition: all ease 0.3s;
}

.copyright{
    padding: 15px;
    color: #5a5a5a;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
}

.menu-icon,
.menu-btn{
    display: none;
}

@media(max-width:1200px){
    .category-container{
        width: 1000px;
        flex-wrap: wrap;
    }
    .category-box img{
        width: 150px;
        height: 150px;
    }
    #feature-product h1{
        margin-bottom: 40px;
    }
    .feature-product-container{
        width: 1000px;
        margin: auto;
    }
    .feature-product-box{
        margin: 10px;
    }
    .feature-product-box{
        width: 200px;
    }
    .product-feature-img{
        width: 200px;
        height: 230px;
    }
    #banner{
        width:1000px;
        min-width: none;
    }
    .news-box{
        width: 300px;
        height: 300px;
    }
}
@media(max-width:1024px){
    .navigation{
        width: 100%;
    }
    .navigation{
        justify-content: space-between;
        height: 65px;
        padding:35px 25px;
       
    }
 
    nav .menu{
        display: none;
        position: absolute;
        top: 64px;
        left: 0px;
        background-color: #ffffff;
        border-bottom: 1px solid #24242410;
        width:100%;
        padding:0px;
        margin: 0px;
        z-index: 100;
    }
    nav .menu li{
        width:100%;
        margin: 0px;
        padding: 0px;
    }
    nav .menu li a{
        width:100%;
        height: 40px;
        display: flex;
        align-items: center;
        margin: 0px;
        padding: 25px 20px;
        border: 1px solid rgba(211, 211, 211, 0.08);
    }
    nav .menu li a:hover{
        color: #ffffff;
        background-color: #e74444;
        transition: 0.2s;
    }
    .menu-icon{
        display: block;
    }
    .nav-icon {
        font-size: 1.2rem;
        cursor: pointer;
    }
    nav .menu-btn:checked ~ .menu{
        display: block !important;
    }

    .main-img{
        display: none;
    }
    #main{
        min-height: auto;
        margin-top: 100px;
    }
  
    .main-text{
        max-width: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    #categories{
        margin-top: 50px;
    }
    .category-container{
        width: 90%;
    }
    
    #feature-product h1{
        margin-bottom: 40px;
    }
    .feature-product-container{
        width: 90%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: auto;
        padding: 30px;
        grid-gap: 30px;
    }
    .feature-product-box{
        margin: 0px;
    }
    .feature-product-box{
        width:100%;
    }
    .product-feature-img{
        width: 100%;
        height: 120%;
    }
    #banner{
        width:90%;
        grid-template-columns: 1fr 1fr;
        
    }
    .news-box{
        width: 300px;
        height: 300px;
    }
    .footer-container{
        flex-direction: column;
    }
    .footer-menu{
        margin-top: 50px;
    }
}
@media(max-width:800px){
    #banner{
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
        height: auto;
        padding: 20px;
    }
    .banner-text,
    .banner-img{
        height: auto;
        margin: 0px;
        padding: 0px;
    }
}
@media(max-width:724px){
    .logo{
        font-size: 1.5rem;
    }
    .main-text h1{
        font-size: 1.6rem;
        line-height: 35px;
    }
    #categories h2,
    #feature-product h1,
    .banner-text strong,
    .product-heading h3,
    .news-heading h3{
        font-size: 1.5rem;
    }
    .footer-menu{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
@media(max-width:500px){
    .category-container{
        flex-direction: column;
    }
    .category-box,
    .category-box img{
        width: 100%;
        height: 100%;
    }
    .feature-product-container{
        grid-template-columns: 1fr;
    }
}
@media(max-width:400px){
    .footer-container{
        justify-content: flex-start;
        align-items: flex-start;
    }
    .footer-menu,
    .footer-logo-container{
        display: flex;
        text-align: start;
        flex-direction: column;
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .footer-menu-box{
        margin: 0px;
    }
}





How To Dowload Files
Share
1 comment Labels,

Comments

  1. UnknownSeptember 15, 2021 at 2:49 PM

    You can use kanawt website, it helps you building your e-commerce website Add High Quality products From Europe and Turkey Wholesale prices with minimum quantity Pay after you sell Automatic quantities sync on your store Shipping to your clients with your logo just click and fill the form from here
    https://bit.ly/3sxLfr5

    ReplyDelete

Archive

Contact Form

Send