I have made the project on Amazon website clone

AMAZON CLONE for practice/script.js

@@ -0,0 +1,43 @@
+const imgs = document.querySelectorAll('.header-slider ul img');
+const prev_btn = document.querySelector('.control_prev');
+const next_btn = document.querySelector('.control_next');
+
+
+let n = 0 ;
+
+
+function changeSlide(){ // work of this function is to select the all images 
+    for(let i = 0; i < imgs.length; i++){
+        imgs[i].style.display = 'none';
+    }
+    imgs[n].style.display = 'block'; //this line shows the first image..
+}
+
+changeSlide();
+
+prev_btn.addEventListener('click',(e)=>{
+    if (n > 0){
+        n--;
+    }else {
+        n = imgs.length - 1;
+    }
+    changeSlide();
+})
+
+next_btn.addEventListener('click',(e)=>{
+    if (n < imgs.length - 1){
+        n++;
+    }else {
+        n = 0;
+    }
+    changeSlide();
+})
+
+
+const scrollContainer = document.querySelectorAll('.products');
+for (const item of scrollContainer){
+    item.addEventListener('wheel',(evt)=>{
+        evt.preventDefault();
+        item.scrollLeft += evt.deltaY;
+    })
+}

AMAZON CLONE for practice/style.css

@@ -0,0 +1,281 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
+
+
+*{
+    padding:0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: Outfit;
+
+}
+body{
+    background-color: #dadada;
+}
+a{
+    text-decoration: none;
+    color: inherit;
+}
+nav{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #131921;
+    padding: 10px 20px;
+    color: #fff;
+}
+
+
+.nav-country{
+    display: flex;
+    align-items: end;
+    margin-left: 15px;
+    font-size: 13px;
+    color: #c4c4c4;
+}
+.nav-country{
+    color: #fff;
+    font-size: 14px;
+}
+.nav-search{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    color: gray;
+    max-width: 1000px;
+    border-radius: 4px;
+    margin-left: 15px;
+}
+.nav-search-category{
+    display: flex;
+    align-items: center;
+    padding: 10px 20px ;
+    gap: 5px;
+    background: #e5e5e5;
+    border-radius: 4px 0 0 4px;
+}
+
+.nav-search-input{
+    border: none;
+    outline: none;
+    padding: left 20px;
+    width: 100%;
+}
+
+.nav-search-icon{
+
+    max-width: 41px;
+    padding: 8px;
+    background:#ffd64f;
+    border-radius: 0 4px 4px 0;
+}
+
+.nav-language{
+
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    font-weight: 600;
+    margin-left: 15px;
+}
+
+.nav-text{
+
+    margin-left: 15px;
+}
+.nav-text p {
+    font-size: 10px;
+}
+.nav-text h1{
+    font-size: 14px;
+}
+
+
+.nav-cart{
+    display: flex;
+    align-items: center;
+    margin: 0px 15px;
+}
+
+.nav-bottom{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 8px 20px;
+    background:#232f3e ;
+    color: #fff;
+    font-size: 15px;
+}
+
+.nav-bottom div{
+
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-weight: 500;
+}
+
+.header-slider ul{
+
+    display: flex;
+    overflow-y:  hidden;
+}
+
+.header-img{
+     max-width: 100%;
+     mask-image: linear-gradient(to bottom, #000000 50%, transparent 100%);
+}
+
+.header-slider a{
+    position: absolute;
+    top: 20%;
+    z-index: 1;
+    padding: 5vh 1vw;
+    background: #ffffff4f;
+    color: #0000007b;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.control_next{
+    right: 0;
+}
+
+.box-row{
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 20px;
+    justify-content: space-between;
+    margin: 20px 30px;
+}
+
+.box-col{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 15px 20px;
+    background: #fff;
+    max-width: 24%;
+    min-height: 200px;
+    z-index: 1;
+}
+
+
+.box-col a{
+    font-size: 14px;
+    color: #009999;
+    font-weight: 500;
+
+}
+
+.header-box {
+     margin-top: -20vw;
+}
+
+.products-slider{
+     background: #fff; 
+    margin: 0 30px;
+    padding: 20px;
+    margin-bottom: 15px;
+}
+
+.products-slider .products {
+    display: flex; 
+    overflow-x: auto;
+    gap: 20px;
+    margin-top: 10px;
+}
+
+
+.products-slider .products img{
+    max-width: 200px;
+    max-height: 200px;
+}
+
+.products-slider .products::-webkit-scrollbar{ 
+     /* dont keep gap between products and :: in this */
+    display: none;
+
+}
+
+
+.products-slider-with-price{
+
+    background: #fff;
+    margin: 0 30 px;
+    padding: 20px;
+    margin-bottom: 15px;
+}
+
+.products-slider-with-price .products{
+    /* it give horizontal view */
+
+    display: flex;
+    overflow-x: auto;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+
+.products-slider-with-price .products::-webkit-scrollbar{
+    display: none;
+}
+
+.product-card{
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    min-width: 210px;
+    background: #fbfbfb;
+}
+
+.product-card img{
+    width: 110px;
+    margin 0 50px;
+}
+
+.product-offer p{
+
+    background:#be0b3b ;
+    color: #fff;
+    display: inline-block;
+    padding: 2px 5px;
+    border-radius: 2px;
+    margin: 8px 0;
+    font-size: 13px;
+}
+
+.product-offer span{
+
+    color: #be0b3b;
+    font-weight: 500;
+    font-size: 12px;
+}
+
+
+.product-price{
+    color: gray;
+    font-size: 13px;
+
+}
+
+.product-card h4{
+    color: #525252;
+    font-size: 15px;
+    font-weight: 400;
+
+}
+
+footer{
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    background-color: #131921;
+    padding: 20px 60px;
+    /* 20px is for top and bottom and 60px is for left and right */
+}
+