├── images ├── b1.jpg ├── b10.jpg ├── b2.jpg ├── b3.jpg ├── b4.jpg ├── b5.jpg ├── b6.jpg ├── b7.jpg ├── b8.jpg ├── b9.jpg ├── cm1.jpg ├── cm2.jpg ├── cm3.jpg ├── cm4.jpg ├── ga1.jpg ├── ga2.jpg ├── ga3.jpg ├── ga4.jpg ├── gm1.jpg ├── gm2.jpg ├── gm3.jpg ├── gm4.jpg ├── pb1.jpg ├── pb2.jpg ├── pb3.jpg ├── pb4.jpg ├── pb5.jpg ├── pb6.jpg ├── pb7.jpg ├── pb8.jpg ├── pb9.jpg ├── pc1.jpg ├── pc2.jpg ├── pc3.jpg ├── pc4.jpg ├── pc5.jpg ├── pc6.jpg ├── pc7.jpg ├── pc8.jpg ├── pc9.jpg ├── sc1.jpg ├── sc2.jpg ├── sc3.jpg ├── sc4.jpg ├── si1.jpg ├── si2.jpg ├── si3.jpg ├── si4.jpg ├── craft.jpg ├── light.jpg ├── logo.png ├── logoo.png ├── pb10.jpg ├── pc10.jpg ├── pc11.jpg ├── pc12.jpg ├── pc13.jpg ├── pc14.jpg ├── pc15.jpg ├── pets.jpg ├── watch.jpg ├── banner.jpg ├── fitness.jpg ├── pinter1.jpg ├── pinter10.jpg ├── pinter11.jpg ├── pinter12.jpg ├── pinter13.jpg ├── pinter14.jpg ├── pinter15.jpg ├── pinter2.jpg ├── pinter3.jpg ├── pinter4.jpg ├── pinter5.jpg ├── pinter6.jpg ├── pinter7.jpg ├── pinter8.jpg ├── pinter9.jpg ├── reader.jpg ├── usflag.jpg ├── amazon basics.jpg ├── easy return.jpg ├── electronics.jpg ├── find your deal.jpg └── shop valentine's.jpg ├── README.md ├── .gitignore ├── LICENSE ├── app.js ├── style.css └── index.html /images/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b1.jpg -------------------------------------------------------------------------------- /images/b10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b10.jpg -------------------------------------------------------------------------------- /images/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b2.jpg -------------------------------------------------------------------------------- /images/b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b3.jpg -------------------------------------------------------------------------------- /images/b4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b4.jpg -------------------------------------------------------------------------------- /images/b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b5.jpg -------------------------------------------------------------------------------- /images/b6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b6.jpg -------------------------------------------------------------------------------- /images/b7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b7.jpg -------------------------------------------------------------------------------- /images/b8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b8.jpg -------------------------------------------------------------------------------- /images/b9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/b9.jpg -------------------------------------------------------------------------------- /images/cm1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/cm1.jpg -------------------------------------------------------------------------------- /images/cm2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/cm2.jpg -------------------------------------------------------------------------------- /images/cm3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/cm3.jpg -------------------------------------------------------------------------------- /images/cm4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/cm4.jpg -------------------------------------------------------------------------------- /images/ga1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/ga1.jpg -------------------------------------------------------------------------------- /images/ga2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/ga2.jpg -------------------------------------------------------------------------------- /images/ga3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/ga3.jpg -------------------------------------------------------------------------------- /images/ga4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/ga4.jpg -------------------------------------------------------------------------------- /images/gm1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/gm1.jpg -------------------------------------------------------------------------------- /images/gm2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/gm2.jpg -------------------------------------------------------------------------------- /images/gm3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/gm3.jpg -------------------------------------------------------------------------------- /images/gm4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/gm4.jpg -------------------------------------------------------------------------------- /images/pb1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb1.jpg -------------------------------------------------------------------------------- /images/pb2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb2.jpg -------------------------------------------------------------------------------- /images/pb3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb3.jpg -------------------------------------------------------------------------------- /images/pb4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb4.jpg -------------------------------------------------------------------------------- /images/pb5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb5.jpg -------------------------------------------------------------------------------- /images/pb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb6.jpg -------------------------------------------------------------------------------- /images/pb7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb7.jpg -------------------------------------------------------------------------------- /images/pb8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb8.jpg -------------------------------------------------------------------------------- /images/pb9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb9.jpg -------------------------------------------------------------------------------- /images/pc1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc1.jpg -------------------------------------------------------------------------------- /images/pc2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc2.jpg -------------------------------------------------------------------------------- /images/pc3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc3.jpg -------------------------------------------------------------------------------- /images/pc4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc4.jpg -------------------------------------------------------------------------------- /images/pc5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc5.jpg -------------------------------------------------------------------------------- /images/pc6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc6.jpg -------------------------------------------------------------------------------- /images/pc7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc7.jpg -------------------------------------------------------------------------------- /images/pc8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc8.jpg -------------------------------------------------------------------------------- /images/pc9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc9.jpg -------------------------------------------------------------------------------- /images/sc1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/sc1.jpg -------------------------------------------------------------------------------- /images/sc2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/sc2.jpg -------------------------------------------------------------------------------- /images/sc3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/sc3.jpg -------------------------------------------------------------------------------- /images/sc4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/sc4.jpg -------------------------------------------------------------------------------- /images/si1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/si1.jpg -------------------------------------------------------------------------------- /images/si2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/si2.jpg -------------------------------------------------------------------------------- /images/si3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/si3.jpg -------------------------------------------------------------------------------- /images/si4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/si4.jpg -------------------------------------------------------------------------------- /images/craft.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/craft.jpg -------------------------------------------------------------------------------- /images/light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/light.jpg -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/logoo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/logoo.png -------------------------------------------------------------------------------- /images/pb10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pb10.jpg -------------------------------------------------------------------------------- /images/pc10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc10.jpg -------------------------------------------------------------------------------- /images/pc11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc11.jpg -------------------------------------------------------------------------------- /images/pc12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc12.jpg -------------------------------------------------------------------------------- /images/pc13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc13.jpg -------------------------------------------------------------------------------- /images/pc14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc14.jpg -------------------------------------------------------------------------------- /images/pc15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pc15.jpg -------------------------------------------------------------------------------- /images/pets.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pets.jpg -------------------------------------------------------------------------------- /images/watch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/watch.jpg -------------------------------------------------------------------------------- /images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/banner.jpg -------------------------------------------------------------------------------- /images/fitness.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/fitness.jpg -------------------------------------------------------------------------------- /images/pinter1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter1.jpg -------------------------------------------------------------------------------- /images/pinter10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter10.jpg -------------------------------------------------------------------------------- /images/pinter11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter11.jpg -------------------------------------------------------------------------------- /images/pinter12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter12.jpg -------------------------------------------------------------------------------- /images/pinter13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter13.jpg -------------------------------------------------------------------------------- /images/pinter14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter14.jpg -------------------------------------------------------------------------------- /images/pinter15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter15.jpg -------------------------------------------------------------------------------- /images/pinter2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter2.jpg -------------------------------------------------------------------------------- /images/pinter3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter3.jpg -------------------------------------------------------------------------------- /images/pinter4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter4.jpg -------------------------------------------------------------------------------- /images/pinter5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter5.jpg -------------------------------------------------------------------------------- /images/pinter6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter6.jpg -------------------------------------------------------------------------------- /images/pinter7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter7.jpg -------------------------------------------------------------------------------- /images/pinter8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter8.jpg -------------------------------------------------------------------------------- /images/pinter9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/pinter9.jpg -------------------------------------------------------------------------------- /images/reader.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/reader.jpg -------------------------------------------------------------------------------- /images/usflag.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/usflag.jpg -------------------------------------------------------------------------------- /images/amazon basics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/amazon basics.jpg -------------------------------------------------------------------------------- /images/easy return.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/easy return.jpg -------------------------------------------------------------------------------- /images/electronics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/electronics.jpg -------------------------------------------------------------------------------- /images/find your deal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/find your deal.jpg -------------------------------------------------------------------------------- /images/shop valentine's.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Swap-nil-2003/Amazon-Clone-01/HEAD/images/shop valentine's.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Amazon-Clone-01 2 | A frontend clone of E-commerce website of Amazon. This is created using HTML,CSS and Vanilla Javascript. The page is created for big screens i.e, laptops, PCs only. 3 | 4 | # Technologies: 5 | * HTML5 6 | * CSS3 7 | * CSS Animations 8 | * Javascript 9 | * Netlify 10 | 11 | # Live Link: 12 | https://amazon-frontend-clone01.netlify.app/ 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Prerequisites 2 | *.d 3 | 4 | # Compiled Object files 5 | *.slo 6 | *.lo 7 | *.o 8 | *.obj 9 | 10 | # Precompiled Headers 11 | *.gch 12 | *.pch 13 | 14 | # Compiled Dynamic libraries 15 | *.so 16 | *.dylib 17 | *.dll 18 | 19 | # Fortran module files 20 | *.mod 21 | *.smod 22 | 23 | # Compiled Static libraries 24 | *.lai 25 | *.la 26 | *.a 27 | *.lib 28 | 29 | # Executables 30 | *.exe 31 | *.out 32 | *.app 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Swapnil Aichbhaumik 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const leftBtn= document.querySelector(".l-btn"); 2 | const rightBtn = document.querySelector(".r-btn"); 3 | 4 | 5 | rightBtn.addEventListener("click", 6 | function(event){ 7 | const conent=document.querySelector(".product-slide"); 8 | conent.scrollLeft +=1100; 9 | event.preventDefault(); 10 | 11 | }) 12 | leftBtn.addEventListener("click", 13 | function(event){ 14 | const conent=document.querySelector(".product-slide"); 15 | conent.scrollLeft -=1100; 16 | event.preventDefault(); 17 | 18 | }) 19 | const leftBtn1= document.querySelector(".btn-1b"); 20 | const rightBtn1 = document.querySelector(".btn-1a"); 21 | 22 | 23 | rightBtn1.addEventListener("click", 24 | function(event){ 25 | const conent=document.querySelector(".product-slide-1"); 26 | conent.scrollLeft +=1100; 27 | event.preventDefault(); 28 | 29 | }) 30 | leftBtn1.addEventListener("click", 31 | function(event){ 32 | const conent=document.querySelector(".product-slide-1"); 33 | conent.scrollLeft -=1100; 34 | event.preventDefault(); 35 | 36 | }) 37 | const leftBtn2= document.querySelector(".btn-1c"); 38 | const rightBtn2 = document.querySelector(".btn-1d"); 39 | 40 | 41 | rightBtn2.addEventListener("click", 42 | function(event){ 43 | const conent=document.querySelector(".product-slide-2"); 44 | conent.scrollLeft +=1100; 45 | event.preventDefault(); 46 | 47 | }) 48 | leftBtn2.addEventListener("click", 49 | function(event){ 50 | const conent=document.querySelector(".product-slide-2"); 51 | conent.scrollLeft -=1100; 52 | event.preventDefault(); 53 | 54 | }) 55 | 56 | const backtop = document.querySelector(".backtop"); 57 | 58 | backtop.addEventListener("click",()=>{ 59 | window.scrollTo({ 60 | top:0, 61 | behavior:"smooth" 62 | }) 63 | }) 64 | 65 | const sidebar=document.querySelector(".sidebar"); 66 | const cross=document.querySelector(".fa-xmark"); 67 | const black=document.querySelector(".black"); 68 | const sidebtn=document.querySelector(".second-1"); 69 | 70 | sidebtn.addEventListener("click",()=>{ 71 | sidebar.classList.add("active"); 72 | cross.classList.add("active"); 73 | black.classList.add("active"); 74 | document.body.classList.add("stop-scroll"); 75 | }) 76 | cross.addEventListener("click",()=>{ 77 | sidebar.classList.remove("active"); 78 | cross.classList.remove("active"); 79 | black.classList.remove("active"); 80 | document.body.classList.remove("stop-scroll"); 81 | }) 82 | 83 | const sign=document.querySelector(".ac"); 84 | const tri=document.querySelector(".triangle"); 85 | const signin=document.querySelector(".hdn-sign"); 86 | 87 | sign.addEventListener("click",()=>{ 88 | black.classList.toggle("active-1"); 89 | signin.classList.toggle("active"); 90 | tri.classList.toggle("active"); 91 | document.body.classList.toggle("stop-scroll"); 92 | }) 93 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&display=swap'); 2 | *{ 3 | margin:0; 4 | padding:0; 5 | text-decoration: none; 6 | box-sizing: border-box; 7 | list-style: none; 8 | } 9 | body{ 10 | font-family: 'Baloo Bhai 2', cursive; 11 | width: 100%; 12 | box-sizing: border-box; 13 | background-color: #eaeded; 14 | } 15 | .first{ 16 | width:100%; 17 | height:65px; 18 | background-color: #131a22; 19 | display: flex; 20 | align-items: center; 21 | flex-direction: column; 22 | } 23 | .first img{ 24 | width:100px; 25 | padding:5px; 26 | margin: 6px 10px; 27 | border: 1px solid transparent; 28 | } 29 | .first{ 30 | display:flex; 31 | flex-direction: row; 32 | justify-content: space-between; 33 | } 34 | .flex{ 35 | display: flex; 36 | justify-content: center; 37 | } 38 | .flex span,i{ 39 | color:white; 40 | } 41 | .logo{ 42 | flex:0.18; 43 | margin-right:8px; 44 | justify-content: space-between; 45 | } 46 | .map{ 47 | border: 1px solid transparent; 48 | } 49 | 50 | .map i{ 51 | margin-top: 15px; 52 | padding-left: 5px; 53 | font-size: 17px; 54 | } 55 | .map div{ 56 | padding: 5px; 57 | display: flex; 58 | cursor: pointer; 59 | flex-direction: column; 60 | } 61 | .map div span:first-child{ 62 | font-weight: 400; 63 | font-size: 13px; 64 | } 65 | .map div span{ 66 | font-weight: bold; 67 | } 68 | .right{ 69 | justify-content: space-between; 70 | flex: 0.30; 71 | margin-right: 10px; 72 | align-items: center; 73 | } 74 | .input{ 75 | width:100%; 76 | background-color: white; 77 | flex:0.5; 78 | border-radius: 5px; 79 | display: flex; 80 | margin: 0 10px; 81 | align-items: center; 82 | justify-content: space-between; 83 | overflow: hidden; 84 | } 85 | .input input{ 86 | outline-color: transparent; 87 | width:80%; 88 | font-size: 15px; 89 | padding: 5px 2px; 90 | border: none; 91 | } 92 | .input .fa-search{ 93 | color: rgb(51,51,51); 94 | padding: 10px 15px; 95 | font-size: 25px; 96 | cursor: pointer; 97 | background-color: #febd69; 98 | border-radius: 0 5px 5px 0; 99 | } 100 | .input div{ 101 | display: flex; 102 | justify-content: center; 103 | align-items: center; 104 | border-right: 1px solid gray; 105 | background-color: rgb(236,234,234); 106 | padding:5px 0; 107 | } 108 | .input div span{ 109 | border-radius: 5px 0 0 5px; 110 | color: rgb(51,51,51); 111 | padding: 7px 5px; 112 | font-size: 13px; 113 | cursor: pointer; 114 | } 115 | .input .fa-caret-down{ 116 | color: rgb(51,51,51); 117 | cursor: pointer; 118 | padding:5px; 119 | } 120 | .lang i{ 121 | margin:0; 122 | padding: 0; 123 | color:gray; 124 | } 125 | .lang{ 126 | padding: 2px; 127 | display: flex; 128 | justify-content: center; 129 | align-items: flex-end; 130 | border:1px solid transparent; 131 | } 132 | .right img{ 133 | width:35px; 134 | height:35px; 135 | padding:2px; 136 | padding-top: 10px; 137 | margin:0; 138 | cursor: pointer; 139 | } 140 | .sign{ 141 | display: flex; 142 | flex-direction: column; 143 | padding:3px 6px; 144 | border: 1px solid transparent; 145 | cursor:pointer; 146 | } 147 | .sign span:first-child{ 148 | font-weight: 400; 149 | font-size: 13px; 150 | } 151 | .sign span{ 152 | display:inline-block; 153 | width:100%; 154 | font-weight: bold; 155 | } 156 | .flex .ac span{ 157 | font-size: 15px; 158 | margin-right: 4px; 159 | font-weight: bold; 160 | } 161 | .fa-shopping-cart{ 162 | font-size: 27px; 163 | } 164 | .ca{ 165 | font-size: 14px; 166 | font-weight: bold; 167 | } 168 | .cart{ 169 | align-items: flex-end; 170 | position:relative; 171 | padding:5px 10px; 172 | border: 1px solid transparent; 173 | cursor: pointer; 174 | } 175 | .cart p{ 176 | position: absolute; 177 | font-weight: bolder; 178 | color:#131a22; 179 | top: 7px; 180 | left:20px; 181 | } 182 | .cart:hover{ 183 | border: 1px solid white; 184 | border-radius: 3px; 185 | } 186 | .logo img:hover{ 187 | border: 1px solid white; 188 | border-radius: 3px; 189 | } 190 | .map:hover{ 191 | border: 1px solid white; 192 | border-radius: 3px; 193 | } 194 | .lang:hover{ 195 | border: 1px solid white; 196 | border-radius: 3px; 197 | } 198 | .sign:hover{ 199 | border: 1px solid white; 200 | border-radius: 3px; 201 | } 202 | .lang:hover{ 203 | border: 1px solid white; 204 | border-radius: 3px; 205 | } 206 | .input .fa-search:hover{ 207 | background-color: #fdae46; 208 | } 209 | .input div:hover{ 210 | background-color: rgb(204,202,202); 211 | color:black; 212 | } 213 | .second{ 214 | width:100%; 215 | height:42px; 216 | background-color: #232f3e; 217 | display: flex; 218 | align-items: center; 219 | color:white; 220 | overflow: hidden;; 221 | } 222 | .second ul{ 223 | align-items: center; 224 | list-style: none; 225 | display: flex; 226 | justify-content: flex-start; 227 | } 228 | .second span{ 229 | font-size: 15px; 230 | } 231 | .second-1 div i{ 232 | font-size: 20px; 233 | cursor: pointer; 234 | border: 1px solid transparent; 235 | } 236 | .second li{ 237 | padding:5px 10px; 238 | font-size: 15px; 239 | margin: 7px 0; 240 | cursor: pointer; 241 | border: 1px solid transparent; 242 | } 243 | .second-1{ 244 | flex:0.06; 245 | display: flex; 246 | justify-content: center; 247 | align-items: center; 248 | } 249 | .second-1 div{ 250 | display: flex; 251 | align-items: center; 252 | padding-left: 5px; 253 | } 254 | .second-2{ 255 | display: flex; 256 | flex:0.74; 257 | justify-content: flex-start; 258 | } 259 | .second-3{ 260 | flex:0.2; 261 | display: flex; 262 | justify-content: flex-end; 263 | margin-right: 20px; 264 | overflow: hidden; 265 | } 266 | .second-3 span{ 267 | padding:5px 10px; 268 | cursor: pointer; 269 | border: 1px solid transparent; 270 | } 271 | .second-1 div span{ 272 | padding:5px; 273 | cursor: pointer; 274 | } 275 | .second-1 div:hover{ 276 | border:1px solid white; 277 | } 278 | .second-2 li:hover{ 279 | border:1px solid white; 280 | } 281 | .second-3 span:hover{ 282 | border:1px solid white; 283 | } 284 | .sec-1{ 285 | position: relative; 286 | width:100%; 287 | height: 1150px; 288 | box-sizing: border-box; 289 | } 290 | .slide img{ 291 | width:1380px; 292 | height: 100%; 293 | } 294 | .container{ 295 | position: relative; 296 | width:100%; 297 | height: auto; 298 | } 299 | .slider{ 300 | width:100%; 301 | overflow: hidden; 302 | position: relative; 303 | height: 560px; 304 | } 305 | .image-box{ 306 | display: flex; 307 | position: absolute; 308 | animation: carousel 15s alternate infinite; 309 | } 310 | @keyframes carousel{ 311 | 0%{ 312 | left:0; 313 | } 314 | 20%{ 315 | left:0%; 316 | } 317 | 24%{ 318 | left:-1380px; 319 | } 320 | 50%{ 321 | left:-1380px; 322 | } 323 | 54%{ 324 | left:calc(-1380*2px); 325 | } 326 | 80%{ 327 | left:calc(-1380*2px); 328 | } 329 | 84%{ 330 | left:calc(-1380*3px); 331 | } 332 | 100%{ 333 | left:calc(-1380*3px); 334 | } 335 | } 336 | .container-1{ 337 | position:absolute; 338 | z-index:1; 339 | top:240px; 340 | width:100%; 341 | left:0; 342 | padding:20px; 343 | display: flex; 344 | flex-direction: column; 345 | align-items: center; 346 | background:linear-gradient(to bottom, transparent, #eaeded 30%); 347 | } 348 | .container-1 .para{ 349 | background-color: rgb(238,234,234); 350 | width:100%; 351 | text-align: center; 352 | } 353 | .container-1 div:first-child p{ 354 | font-size: 14px; 355 | padding:10px 0; 356 | } 357 | .product-comp{ 358 | width:100%; 359 | height:100%; 360 | display: flex; 361 | box-sizing: border-box; 362 | margin:20px 0; 363 | justify-content: space-around; 364 | } 365 | .product-comp .box{ 366 | width:335px; 367 | height:400px; 368 | background-color: white; 369 | } 370 | .box h3{ 371 | margin-top: 20px; 372 | margin-left: 20px; 373 | font-size: 20px; 374 | margin-bottom: 10px; 375 | color:rgb(43,42,42); 376 | } 377 | .box a{ 378 | margin-left:4px; 379 | padding:10px; 380 | } 381 | 382 | .box-a{ 383 | overflow: hidden; 384 | background-color: white; 385 | } 386 | .box div img{ 387 | width:165px; 388 | height:100px; 389 | cursor: pointer; 390 | margin-left: -14%; 391 | margin-right: 0; 392 | } 393 | .box-a div{ 394 | display: inline-block; 395 | } 396 | .box-a div span{ 397 | display:block; 398 | font-size: 13px; 399 | margin-left: 20px; 400 | font-weight: bold; 401 | } 402 | .box-b{ 403 | display: flex; 404 | flex-direction: column; 405 | align-items: center; 406 | justify-content: space-between; 407 | } 408 | .box-b .best{ 409 | background-color: white; 410 | height:140px; 411 | width:300px; 412 | } 413 | .best h3{ 414 | font-size: 20px; 415 | margin: 20px; 416 | margin-bottom: 15px; 417 | } 418 | .best button{ 419 | border-radius: 5px; 420 | box-shadow: 1px 2px 2px rgb(211,207,207); 421 | color: rgb(43,42,42); 422 | background-color: #ffd814; 423 | width:270px; 424 | height:27px; 425 | margin-left: 12px; 426 | border:none; 427 | } 428 | .box.box-c img{ 429 | margin:0 20px; 430 | height:260px; 431 | width:290px; 432 | cursor: pointer; 433 | } 434 | .sec-2{ 435 | width:100%; 436 | height:315px; 437 | padding:25px; 438 | padding-top:0; 439 | padding-bottom: 25px; 440 | } 441 | .sec-2 h3{ 442 | font-size: 20px; 443 | padding-bottom: 5px; 444 | margin-top:5px; 445 | } 446 | .slide-sec{ 447 | height: 100%; 448 | width:100%; 449 | padding:35px; 450 | overflow-x: hidden; 451 | background-color: white; 452 | position: relative; 453 | margin-top: 20px; 454 | margin-bottom: 25px; 455 | } 456 | .product-slide{ 457 | display: flex; 458 | margin-top: 10px; 459 | overflow-x: scroll; 460 | scroll-behavior: smooth; 461 | } 462 | .product-slide::-webkit-scrollbar{ 463 | background-color: transparent; 464 | height:7px; 465 | cursor: pointer; 466 | } 467 | .product-slide::-webkit-scrollbar-thumb{ 468 | border-radius: 10px; 469 | cursor: pointer; 470 | } 471 | .product-slide li{ 472 | list-style: none; 473 | margin-right: 10px; 474 | margin-bottom: 15px; 475 | cursor: pointer; 476 | } 477 | .l-btn, 478 | .r-btn{ 479 | background-color: rgb(255,255,255,1); 480 | height:90px; 481 | width:50px; 482 | text-align: center; 483 | cursor:pointer; 484 | top:50%; 485 | position: absolute; 486 | border:2px solid transparent; 487 | } 488 | .l-btn{ 489 | border-radius: 0 5px 5px 0; 490 | left:10px; 491 | } 492 | .r-btn{ 493 | border-radius: 5px 0 0 5px; 494 | right:10px; 495 | } 496 | .l-btn:hover{ 497 | border: 3px solid rgb(2,150,150); 498 | } 499 | .r-btn:hover{ 500 | border: 3px solid rgb(2,150,150); 501 | } 502 | .r-btn i, .l-btn i{ 503 | color: rgb(54,54,54); 504 | position:absolute; 505 | font-size: 30px; 506 | top:35%; 507 | left:12%; 508 | right:12%; 509 | } 510 | .slide-sec h3{ 511 | font-size: 20px; 512 | margin-top:5px; 513 | margin-bottom: 0; 514 | } 515 | .product-slide.product-slide-1{ 516 | display: flex; 517 | margin-top: 35px; 518 | overflow-x: scroll; 519 | scroll-behavior: smooth; 520 | } 521 | .box-d a{ 522 | padding-top: 10px; 523 | } 524 | .box-d div img{ 525 | width:155px; 526 | height:110px; 527 | margin-left: 5px; 528 | margin-right: 0px; 529 | } 530 | .box-d div span{ 531 | margin-bottom: 11px; 532 | } 533 | .footer{ 534 | width:100%; 535 | height:450px; 536 | transition: all 0.2s; 537 | } 538 | .backtop{ 539 | text-align: center; 540 | height:50px; 541 | background-color: #37475a; 542 | padding:15px; 543 | cursor: pointer; 544 | } 545 | .backtop span{ 546 | color:white; 547 | font-weight: bold; 548 | } 549 | .backtop:hover{ 550 | background-color: #4d627c; 551 | } 552 | .detail{ 553 | background-color: #232f3e; 554 | height:375px; 555 | } 556 | .table{ 557 | margin:0 150px; 558 | height:100%; 559 | display: flex; 560 | justify-content: space-around; 561 | padding-top:50px; 562 | } 563 | .table div{ 564 | width:230px; 565 | } 566 | .t-head{ 567 | font-size: 16px; 568 | color:white; 569 | font-weight: bold; 570 | margin-bottom: 5px; 571 | } 572 | .table li{ 573 | color: rgb(223,221,221); 574 | padding-top:10px; 575 | font-weight: lighter; 576 | list-style: none; 577 | font-size: 14px; 578 | } 579 | .copy{ 580 | background-color: #232f3e; 581 | height: 90px; 582 | padding:40px; 583 | text-align: center; 584 | } 585 | .copy span{ 586 | color:white; 587 | font-size: 14px; 588 | } 589 | .line{ 590 | height:0.4px; 591 | width:100%; 592 | background-color: rgb(172,172,172); 593 | 594 | } 595 | .sidebar{ 596 | background-color: white; 597 | width:330px; 598 | height:100%; 599 | transform: translateX(-390px); 600 | transition: all 0.5s; 601 | height:100%; 602 | position:absolute; 603 | z-index:101; 604 | overflow-y: scroll; 605 | box-shadow: 2px 2px 30px black; 606 | } 607 | .hdn-head{ 608 | background-color: #232f3e; 609 | height:60px; 610 | width:100%; 611 | color:white; 612 | text-align: center; 613 | } 614 | .hdn-head h2{ 615 | line-height: 60px; 616 | } 617 | .hdn-content h3{ 618 | padding:20px 25px; 619 | color:rgb(39,39,39); 620 | } 621 | .hdn-content ul div{ 622 | display: flex; 623 | cursor: pointer; 624 | transition: all 0.2s; 625 | font-size: rgb(70,70,70); 626 | font-size: 14px; 627 | padding:15px 25px; 628 | justify-content: space-between; 629 | } 630 | .fa-xmark { 631 | top:20px; 632 | left:350px; 633 | position:absolute; 634 | display: none; 635 | font-size: 30px; 636 | z-index:101; 637 | cursor: pointer; 638 | } 639 | .fa-angle-right{ 640 | color:rgb(27,27,27); 641 | } 642 | .hdn-content ul div:hover{ 643 | background-color: rgb(230,227,227); 644 | } 645 | .hdn-content ul{ 646 | padding-bottom: 9px; 647 | } 648 | .black{ 649 | height:100%; 650 | position: absolute; 651 | background-color: rgba(0,0,0,0.7); 652 | 653 | } 654 | .black.active{ 655 | width:100%; 656 | z-index: 100; 657 | } 658 | .black.active-1{ 659 | top:70px; 660 | width:100%; 661 | z-index:99; 662 | } 663 | .sidebar.active{ 664 | transform: translateX(0); 665 | } 666 | .fa-xmark.active{ 667 | display: block; 668 | } 669 | .hdn-sign.active{ 670 | display: block; 671 | } 672 | .triangle.active{ 673 | display: block; 674 | } 675 | .triangle{ 676 | position:absolute; 677 | z-index:101; 678 | display:none; 679 | right:210px; 680 | top:42px; 681 | background-color: transparent; 682 | width:0; 683 | height:0; 684 | display:none; 685 | transition:all 2s; 686 | border:10px solid blue; 687 | border-color: transparent transparent white transparent; 688 | } 689 | .hdn-sign{ 690 | position: absolute; 691 | z-index:101; 692 | transition: all 2s; 693 | display: none; 694 | width:500px; 695 | height: 350px; 696 | top:60px; 697 | right:80px; 698 | background-color: white; 699 | border-radius: 5px; 700 | } 701 | .hdn-table{ 702 | display: flex; 703 | justify-content: space-around; 704 | padding:20px 0; 705 | } 706 | .hdn-table h3{ 707 | font-size: 16px; 708 | padding:10px 0; 709 | } 710 | .hdn-table li{ 711 | color: rgb(84,84,84); 712 | font-size: 13px; 713 | padding:5px 0; 714 | cursor: pointer; 715 | } 716 | .hdn-line{ 717 | width:0.5px; 718 | color:black; 719 | background-color: rgb(190,190,190); 720 | height:280px; 721 | } 722 | .stop-scroll{ 723 | overflow: hidden; 724 | height:100%; 725 | } 726 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 |
120 |
121 | You are on Amazon.com. You can also shop on Amazon India for millions of products with fast local delivery.
Click here to go to amazon.in 165 |
172 | Headsets
173 |
176 | Keyboards
177 |
180 | Computer mice
181 |
184 | Chairs
185 |
194 | Laptop
195 |
198 | Video Games
199 |
202 | Baby
203 |
206 | Toy & Games
207 |
225 |
339 | Sweatshirts
340 |
343 | Joggers
344 |
347 | Cardigans
348 |
351 | Easy Tees
352 |
361 | Apparel
362 |
365 | Hats
366 |
369 | Action Figures
370 |
373 | Mugs
374 |