ecommerce.css

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;

}
 header {
 display: flex;
 justify-content: space-evenly;
 align-items: center;
     height:60px;
     width:100%;
     background:black;
    
}

 .heading ul {
     display:flex;
    
}

 .logo a {
     color:white;
     transition-duration: 1s;
     font-weight: 800;
    
}

 .logo a:hover {
     color:rgb(240, 197, 6);
     transition-duration: 1s;
    
}

 .heading ul li {
     list-style: none;
    
}

 .heading ul li a {
     margin:5px;
     text-decoration: none;
     color:black;
     font-weight: 500;
     position:relative;
     color:white;
     margin:2px 14px;
     font-size: 18px;
     transition-duration: 1s;
    
}

 .heading ul li a:active {
     color:red;
    
}

 .heading ul li a:hover {
     color:rgb(243, 168, 7);
     transition-duration: 1s;
    
}

 .heading ul li a::before {
     content:'';
     height:2px;
     width:0px;
     position:absolute;
     left:0;
     bottom:0;
     background-color: white;
     transition-duration: 1s;
    
}

 .heading ul li a:hover::before {
     width:100%;
     transition-duration: 1s;
     background-color:rgb(243, 168, 7);
    
}

 #input {
     height:30px;
     width:300px;
     text-decoration: none;
     border:0px;
     padding:5px;
    
}

 .logo a {
     color: white;
     font-size: 35px;
     font-weight: 500;
     text-decoration:none;
    
}

 ion-icon {
     width:30px;
     height:30px;
     background-color: white;
     color:black;
    
}

 ion-icon:hover {
     cursor: pointer;
    
}

 .search a {
     display:flex;
    
}

 header a ion-icon {
     position:relative;
     right:3px;
    
}

 .img-slider img {
     height:720px;
     width:1080px;
    
}

 @keyframes slide {
     0% {
         left:0px;
        
    }

     15% {
         left:0px
    }

     20% {
         left:-1080px;
    
    }

     32% {
         left:-1080px;
        
    }

    35% {
     left:-2160px;
        
    }

     47% {
         left:-2160px;
        
    }

     50% {
         left:-3240px;
        
    }

     63% {
         left:-3240px;
        
    }

     66% {
         left:-4320px;
        
    }

     79% {
         left:-4320px;
        
    }

     82% {
         left:-5400px;
        
    }

     100% {
         left:0px;
        
    }
}

 .img-slider {
     display:flex;
     float:left;
     position:relative;
     width:1080px;
     height:720px;
     animation-name:slide;
     animation-duration: 10s;
     animation-iteration-count: infinite;
     transition-duration:2s;
    
}

 .heading1 {
     opacity:0;
    
}

 .search {
     display:flex;
     position: relative;
    
}

 .section1 {
     width:1080px;
     overflow:hidden;
     justify-content: center;
     align-items: center;
     margin:0px auto;
    
}

 .section2 .container {
     display:flex;
     width:100%;
     height:max-content;
     flex-wrap: wrap;
     justify-content:center;
     margin:10px auto;
    
}

 .section2 .container .items {
     margin: 10px;
     width:200px;
     height: 300px;
     background-color:white;
     border:2.5px solid black;
     border-radius: 12px;
    
}

 .section2 .container .items .name {
     text-align:center;
     background-color:rgb(240, 197, 6);
     height:25px;
     padding-top:4px;
     color:white;
     margin: 0;
    
}

 .section2 .container .items .price {
     float:left;
     padding-left:10px;
     display: block;
     width:100%;
     color:rgb(255, 0, 0);
     font-weight: 650;
    
}

 .section2 .container .items .info {
     padding-left:10px;
     color:rgb(243, 168, 7);
    
}

 .section2 .container .items .img img {
     width:200px;
     height:200px;
     margin: 0;
     padding: 0;
     border-radius:12px;
     transition-duration:0.8s;
    
}

 .section2 .container .items .img {
     overflow: hidden;
     margin: 0;
    
}

 .section2 .container .items:hover .img img {
     transform: scale(1.2);
     transition-duration:0.8s;
     border-radius:12px;
    
}

 footer {
     display:flex;
     flex-direction: column;
     background-color: black;
     align-items: center;
     color:white;
    
}

 .footer1 {
     display:flex;
     flex-direction: column;
     align-items: center;
     color:white;
     margin-top:15px;
    
}

 .social-media {
     display:flex;
     justify-content: center;
     color:white;
     flex-wrap: wrap;
    
}

 .social-media a {
     color:white;
     margin:20px;
     border-radius: 5px;
     margin-top:10px;
     color:white;
    
}

 .social-media a ion-icon {
     color:white;
     background-color: black;
    
}

 .social-media a:hover ion-icon {
     color:red;
     transform: translateY(5px);
    
}

 .footer2 {
     display: flex;
     width:100%;
     justify-content:space-evenly;
     align-items: center;
     text-decoration: none;
     flex-wrap: wrap;
    
}

 .footer0 {
     font-weight:1200;
     transition-duration: 1s;
    
}

 .footer0:hover {
     color:rgb(243, 168, 7);
    
}

 .footer2 .heading {
     font-weight: 900;
     font-size: 18px;
    
}

 .footer3 {
     margin-top:60px;
     margin-bottom: 20px;
     display:flex;
     flex-wrap: wrap;
     justify-content: center;
    
}

 .footer2 .heading:hover {
     color:rgb(243, 168, 7);
    
}

 .footer2 .div:hover {
     transform: scale(1.05);
    
}

 .footer3 h4 {
     margin:0 10px;
    
}

 .footer2 div {
     margin:10px;
    
}

 .menu {
     visibility:hidden;
    
}

 .heading1 .ham:active {
     color: red;
    
}

 .items {
     overflow:hidden;
    
}

 .ham,
.close {
     cursor:pointer;
    
}

 @media screen and (max-width:1250px) {
     .heading ul li {
         display:none;
        
    }

     .items {
         transform:scale(0.9);
        
    }

     .img-slider img {
         height:60vw;
         width:80vw;
        
    }

     .ham:active {
         color:red;
        
    }

     .menu {
         display:flex;
        flex-direction: column;
         align-items: center;
        
    }

     .menu a ion-icon {
         position: absolute;
        
    }

     @keyframes slide1 {
         0% {
             left:0vw;
            
        }

         15% {
             left:0vw;
            
        }

         20% {
             left:-80vw;
            
        }

         32% {
             left:-80vw;
            
        }

         35% {
             left:-160vw;
            
        }

         47% {
             left:-160vw;
            
        }

         50% {
             left:-240vw;
            
        }

         63% {
             left:-240vw;
            
        }

         66% {
             left:-320vw;
            
        }

         79% {
             left:-320vw;
            
        }

         82% {
             left:-400vw;
            
        }

         100% {
             left:0vw;
            
        }
    }

     .menu ul {
         display:flex;
         flex-direction:column;
         position: absolute;
         width:100vw;height:100vh;
         background-color: black;
         left:0;
         top:0;
         z-index:11;
         align-items: center;
         justify-content: center;
         opacity:1;
        
    }

     .close {
         z-index:34;
         color:white;
         background-color: black;
        
    }

     .close:active {
         color:red;
        
    }

     .menu ul li {
         list-style: none;
         margin: 20px;
         border-top:3px solid white;
         width:80%;
         text-align:center;
         padding-top:10px;
        
    }

     .menu ul li a {
         text-decoration: none;
     padding-top: 10px;
     color:white;
         font-weight: 900;
        
    }

     .menu ul li a:hover {
         color:rgb(240, 197, 6);
        
    }

     .img-slider {
         display:flex;
         float:left;
         position:relative;
         width:80%;
         height:60%;
         animation-name:slide1;
         animation-duration: 10s;
         animation-iteration-count: infinite;
         transition-duration:2s;
        
    }

     .section1 {
         width:80%;
         overflow:hidden;
         justify-content: center;
         align-items: center;
         margin:0px auto;
        
    }

     .heading1 {
         opacity: 1;
         position:relative;
         bottom:8px;
        
    }

     .search a {
         display:flex;
         flex-wrap: nowrap;
        
    }

     .heading1 .ham {
         background-color: black;
         color:white;
        
    }

     #input {
         width:200px;
         flex-shrink:2;
        
    }

     header {
         height:150px;
        
    }

    
}

 @media screen and (max-width:550px) {
     .heading ul li {
     display:none;
        
    }

     .heading1 {
         opacity: 1;
         bottom:8px;
        
    }

     header {
         height:250px;
         flex-wrap: wrap;
         display: flex;
         flex-direction: column;
        
    }

     #input {
         width:150px;
        
    }

     .close {
         z-index:34;
    }

     .search a {
         display:flex;
         flex-wrap: nowrap;
     }
        
}