Womens Section

├── Paymentpage ├── otp.html └── payment.html ├── README.md ├── womens.html ├── index.html ├── mens.html ├── style.css ├── cart.html ├── mens.js └── womens.js /Paymentpage/otp.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Paymentpage/payment.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # E-Commerce_Website 2 | In E-Commerce website user can purchase men's and women's accessories from men's and women's section and user can also able to add items in the cart and will be display in cart section also the payment functionality is added --->> HTML || CSS || JavaScript || Local Storage || JSON Server 3 | -------------------------------------------------------------------------------- /womens.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Womens Section 8 | 9 | 10 | 11 | 26 |

Womens Page

27 | 28 |

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | E-Commerce 8 | 9 | 10 | 11 | 26 |

HOME

27 | 28 | 29 | 30 | 37 | 38 | -------------------------------------------------------------------------------- /mens.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mens Section 8 | 9 | 10 | 11 | 12 | 27 |

Mens Page

28 | 29 | 30 |

31 | 41 |

42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | background-color: rgba(71, 250, 250, 0.367); 4 | } 5 | #PBox { 6 | display: grid; 7 | grid-template-columns: repeat(4, 1fr); 8 | gap: 50px; 9 | } 10 | #PBox > div { 11 | box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, 12 | rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; 13 | border-radius: 40px; 14 | overflow: hidden; 15 | height: auto; 16 | background-color: rgba(198, 236, 246, 0.693); 17 | box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, 18 | rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; 19 | } 20 | #PBox > div:hover { 21 | box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, 22 | rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; 23 | } 24 | .price { 25 | display: flex; 26 | justify-content: space-around; 27 | } 28 | p + p { 29 | text-decoration: line-through; 30 | } 31 | 32 | h5 { 33 | text-align: center; 34 | } 35 | img { 36 | display: block; 37 | width: 100%; 38 | margin: auto; 39 | } 40 | div + button { 41 | width: 80%; 42 | align-self: center; 43 | border-radius: 15px; 44 | margin: 5% 10% 9% 10%; 45 | background-color: rgba(22, 105, 239, 0.845); 46 | color: white; 47 | padding: 2%; 48 | font-weight: bold; 49 | border: none; 50 | } 51 | div + button:hover { 52 | background-color: rgba(21, 233, 45, 0.788); 53 | } 54 | #bar { 55 | display: flex; 56 | justify-content: space-between; 57 | position: fixed; 58 | top: 0; 59 | left: 0; 60 | align-items: center; 61 | width: 100%; 62 | background-color: aqua; 63 | } 64 | #menu > img { 65 | width: 70px; 66 | border-radius: 100px; 67 | } 68 | #cart > img { 69 | width: 40px; 70 | } 71 | #cart { 72 | display: flex; 73 | margin-right: 10px; 74 | /* background-color: rgba(228, 9, 244, 0.303); */ 75 | } 76 | #cart:hover { 77 | box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, 78 | rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, 79 | rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; 80 | } 81 | #menu { 82 | display: flex; 83 | justify-content: space-around; 84 | align-items: center; 85 | width: 30%; 86 | } 87 | #menu a { 88 | margin: 25px; 89 | text-decoration: none; 90 | font-weight: bolder; 91 | font-size: 20px; 92 | } 93 | #cart { 94 | margin: 3px; 95 | text-decoration: none; 96 | font-weight: bolder; 97 | font-size: 20px; 98 | border-radius: 50px; 99 | } 100 | #menu a:hover { 101 | color: rgba(245, 85, 45, 0.875); 102 | } 103 | 104 | #cart > h5 { 105 | width: 25px; 106 | margin-left: -5px; 107 | } 108 | h2 { 109 | text-align: center; 110 | font-size: 35px; 111 | background-color: rgba(0, 0, 139, 0.708); 112 | font-family: "Times New Roman", Times, serif; 113 | padding: 10px; 114 | color: white; 115 | width: 100%; 116 | margin: 80px 0 30px -10px; 117 | } 118 | 119 | 120 | /* CSS For Cart */ 121 | 122 | #cartBox { 123 | display: flex; 124 | margin-top: 104px; 125 | width: 101%; 126 | } 127 | 128 | #cartItems { 129 | /* background-color: greenyellow; */ 130 | width: 70%; 131 | } 132 | 133 | 134 | #cartItems>div{ 135 | display: flex; 136 | height: 280px; 137 | margin: 1%; 138 | border: 2px solid black; 139 | border-radius: 60px; 140 | overflow: hidden; 141 | background-color: rgba(18, 18, 138, 0.851); 142 | } 143 | #cartItems>div>img{ 144 | height: 100%; 145 | width: 35%; 146 | margin-left: 0; 147 | } 148 | #cartItems>div>div{ 149 | width: 65%; 150 | margin: 2%; 151 | } 152 | h3{ 153 | text-align: center; 154 | height: 30%; 155 | color: white; 156 | } 157 | #remove{ 158 | width: 150px; 159 | 160 | } 161 | #remove:hover{ 162 | background-color: red; 163 | color: white; 164 | } 165 | #cartOption{ 166 | display: flex; 167 | width: 100%; 168 | justify-content: space-around; 169 | align-items: center; 170 | } 171 | #cartOption>:first-child{ 172 | margin-bottom: 25px; 173 | font-size: larger; 174 | } 175 | #cartOption>:first-child>p{ 176 | color: rgb(223, 210, 210); 177 | } 178 | #IncDec{ 179 | display: flex; 180 | justify-content: space-between; 181 | width: 130px; 182 | border: 1px solid black; 183 | height: 45px; 184 | background-color: rgb(178, 172, 172); 185 | border-radius: 45px; 186 | margin-bottom: 25px; 187 | overflow: hidden; 188 | 189 | } 190 | #IncDec>button{ 191 | width: 50px; 192 | margin: 0 -4px; 193 | border-radius: 15px; 194 | font-size: 30px; 195 | border: none; 196 | } 197 | #IncDec>button:hover{ 198 | background-color: aqua; 199 | color: darkblue; 200 | } 201 | span{ 202 | padding-top: 13px; 203 | font-size: large; 204 | 205 | } 206 | 207 | /* #cartItems>div>div>div{ 208 | display: flex; 209 | } */ 210 | 211 | 212 | /* CSS For Payment-Section */ 213 | 214 | #paymentSection { 215 | background-color: pink; 216 | width: 30%; 217 | border-radius: 45px; 218 | } 219 | #paymentSection>div{ 220 | display: flex; 221 | justify-content: space-between; 222 | margin: 20px 30px 0 30px; 223 | } 224 | input{ 225 | height: 20px; 226 | margin-top: 16px; 227 | } 228 | #paymentSection>div>button{ 229 | height: 30px; 230 | margin-top: 15px; 231 | padding: 10px 10px 10px 10px; 232 | width: 120px; 233 | margin-left: 5px; 234 | border-radius: 15px; 235 | border: none; 236 | } 237 | #paymentSection>div>button:hover{ 238 | background-color: brown; 239 | color: white; 240 | border: none; 241 | } 242 | 243 | #cartCount{ 244 | color: rgb(19, 19, 18); 245 | 246 | } 247 | 248 | 249 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My Cart 8 | 9 | 10 | 11 | 26 | 27 | 28 |

29 | 30 |

31 | 32 | 47 | 48 |

49 | 50 |

51 | 52 |

53 |

Total Payement

54 |

0

55 |

56 |

57 |

Apply PromoCode

58 | 59 | 60 |

61 | 62 | 63 |

64 |

65 | 66 | 67 | 68 | 69 | 73 | 74 | 75 | 142 | 143 | 144 | 145 | 146 | 161 | 162 | 188 | 189 | 190 | 250 | -------------------------------------------------------------------------------- /mens.js: -------------------------------------------------------------------------------- 1 | var mensData = [ 2 | { 3 | image_url: 4 | "https://content.shop4reebok.com/static/Product-EX4296/reebok_EX4296_1.jpg.plp", 5 | name: "MEN'S REEBOK RUNNING ROADMAP SHOES", 6 | price: "1170", 7 | strikedoffprice: "2599", 8 | }, 9 | { 10 | image_url: 11 | "https://content.shop4reebok.com/static/Product-EX3921/reebok_EX3921_1.jpg.plp", 12 | name: "MEN'S REEBOK SWIM ARUBA FLIP SLIPPERS ", 13 | price: 699, 14 | strikedoffprice: 999, 15 | }, 16 | { 17 | image_url: 18 | "https://content.shop4reebok.com/static/Product-EX4160/reebok_EX4160_1.jpg.plp", 19 | name: " MEN'S REEBOK RUNNING AUSTIN SHOES", 20 | price: 945, 21 | strikedoffprice: 2099, 22 | }, 23 | { 24 | image_url: 25 | "https://content.shop4reebok.com/static/Product-FV8798/MEN_SWIM_SLIPPERS_FV8798_1.jpg.plp", 26 | name: "MEN'S REEBOK SWIM AVENGER FLIP LP SLIPPERS", 27 | price: 399, 28 | strikedoffprice: 799, 29 | }, 30 | { 31 | image_url: 32 | "https://content.shop4reebok.com/static/Product-EW5173/reebok_EW5173_1.jpg.plp", 33 | name: "MEN'S REEBOK RUNNING TEMPO SHOES ", 34 | price: 1620, 35 | strikedoffprice: 3599, 36 | }, 37 | { 38 | image_url: 39 | "https://content.shop4reebok.com/static/Product-FV7329/reebok_FV7329_1.jpg.plp ", 40 | name: " MEN'S REEBOK RUNNING ASTRO BOOSTER SHOES ", 41 | price: 1440, 42 | strikedoffprice: 3199, 43 | }, 44 | { 45 | image_url: 46 | "https://content.shop4reebok.com/static/Product-GD8567/MEN_TRAINING_PANTS_GD8567_1.jpg.plp ", 47 | name: " MEN'S TRAINING WORKOUT READY ELITAGE PANTS ", 48 | price: 1999, 49 | strikedoffprice: 3199, 50 | }, 51 | { 52 | image_url: 53 | "https://content.shop4reebok.com/static/Product-GQ8758/reebok_GQ8758_1.jpg.plp ", 54 | name: "MEN'S REEBOK TRAINING POLO T-SHIRTS TEE ", 55 | price: 769, 56 | strikedoffprice: 1099, 57 | }, 58 | { 59 | image_url: 60 | "https://content.shop4reebok.com/static/Product-GP7180/reebok_GP7180_1.jpg.plp", 61 | name: "MEN'S REEBOK TRAINING WORKOUT TEE ", 62 | price: 1299, 63 | strikedoffprice: 1440, 64 | }, 65 | { 66 | image_url: 67 | "https://content.shop4reebok.com/static/Product-EX3924/reebok_EX3924_1.jpg.plp ", 68 | name: "MEN'S REEBOK SUPER SOFT FLIP SLIPPERS", 69 | price: 699, 70 | strikedoffprice: 999, 71 | }, 72 | { 73 | image_url: 74 | "https://content.shop4reebok.com/static/Product-FW0343/reebok_FW0343_1.jpg.plp ", 75 | name: "MEN'S REEBOK RUNNING RUN SHOES ", 76 | price: 1620, 77 | strikedoffprice: 3599, 78 | }, 79 | { 80 | image_url: 81 | "https://content.shop4reebok.com/static/Product-EX4285/reebok_EX4285_1.jpg.plp ", 82 | name: "MEN'S REEBOK RUNNING GENESIS RUNNER SHOES ", 83 | price: 1620, 84 | strikedoffprice: 3599, 85 | }, 86 | { 87 | image_url: 88 | "https://content.shop4reebok.com/static/Product-FV9519/MEN_SWIM_SLIPPERS_FV9519_1.jpg.plp ", 89 | name: "MEN'S REEBOK SWIM RUSSLE FLIP SLIPPERS ", 90 | price: 599, 91 | strikedoffprice: 999, 92 | }, 93 | { 94 | image_url: 95 | "https://content.shop4reebok.com/static/Product-FW0318/reebok_FW0318_1.jpg.plp ", 96 | name: " MEN'S REEBOK RUNNING TREND RUNNER SHOES", 97 | price: 1575, 98 | strikedoffprice: 3499, 99 | }, 100 | { 101 | image_url: 102 | "https://content.shop4reebok.com/static/Product-H00024/reebok_H00024_1.jpg.plp ", 103 | name: "UNISEX REEBOK RUNNING ZIG KINETICA II SHOES ", 104 | price: 9999, 105 | strikedoffprice: 12000, 106 | }, 107 | { 108 | image_url: 109 | "https://content.shop4reebok.com/static/Product-GK9170/reebok_GK9170_1.jpg.plp ", 110 | name: " MEN'S REEBOK TRAINING BAS POLO TEE ", 111 | price: 779, 112 | strikedoffprice: 1299, 113 | }, 114 | { 115 | image_url: 116 | "https://content.shop4reebok.com/static/Product-GK9175/reebok_GK9175_1.jpg.plp", 117 | name: "MEN'S REEBOK TRAINING FOUNDATION PANTS ", 118 | price: 1019, 119 | strikedoffprice: 1699, 120 | }, 121 | { 122 | image_url: 123 | "https://content.shop4reebok.com/static/Product-GK9176/reebok_GK9176_1.jpg.plp ", 124 | name: "MEN'S REEBOK TRAINING FOUNDATION PANTS ", 125 | price: 1019, 126 | strikedoffprice: 1699, 127 | }, 128 | { 129 | image_url: 130 | "https://content.shop4reebok.com/static/Product-FW0318/reebok_FW0318_1.jpg.plp ", 131 | name: " MEN'S REEBOK RUNNING TREND SHOES", 132 | price: 1575, 133 | strikedoffprice: 3499, 134 | }, 135 | { 136 | image_url: 137 | " https://content.shop4reebok.com/static/Product-G57776/reebok_G57776_1.jpg.plp ", 138 | name: " MEN'S REEBOK RUNNING ZTAUR RUN SHOES ", 139 | price: 3499, 140 | strikedoffprice: 4999, 141 | }, 142 | { 143 | image_url: 144 | " https://content.shop4reebok.com/static/Product-FV9555/MEN_SWIM_SLIPPERS_FV9555_1.jpg.plp ", 145 | name: "MEN'S REEBOK SWIM ULTRA FLIP SLIPPERS ", 146 | price: 749, 147 | strikedoffprice: 1499, 148 | }, 149 | { 150 | image_url: 151 | "https://content.shop4reebok.com/static/Product-EX3994/reebok_EX3994_1.jpg.plp ", 152 | name: " MEN'S REEBOK SWIM FLEX CONNECT SANDALS ", 153 | price: 1149, 154 | strikedoffprice: 2299, 155 | }, 156 | { 157 | image_url: 158 | " https://content.shop4reebok.com/static/Product-EX4287/reebok_EX4287_1.jpg.plp ", 159 | name: " MEN'S REEBOK RUNNING GENESIS RUNNER SHOE ", 160 | price: 1620, 161 | strikedoffprice: 3599, 162 | }, 163 | { 164 | image_url: 165 | " https://content.shop4reebok.com/static/Product-GK9180/reebok_GK9180_1.jpg.plp ", 166 | name: " MEN'S REEBOK TRAINING RUNNER SHORTS ", 167 | price: 779, 168 | strikedoffprice: 1299, 169 | }, 170 | { 171 | image_url: 172 | " https://content.shop4reebok.com/static/Product-HB5732/reebok_HB5732_1.jpg.plp ", 173 | name: " MEN REEBOK CLASSICS TRACKSUIT HOODIE ", 174 | price: 3499, 175 | strikedoffprice: 4999, 176 | }, 177 | { 178 | image_url: 179 | " https://content.shop4reebok.com/static/Product-HB5733/reebok_HB5733_1.jpg.plp ", 180 | name: "MEN'S REEBOK CLASSIC TRACKSUIT GOLF HOODIE ", 181 | price: 3499, 182 | strikedoffprice: 4999, 183 | }, 184 | { 185 | image_url: 186 | "https://content.shop4reebok.com/static/Product-FQ5364/reebok_FQ5364_1.jpg.plp ", 187 | name: " UNISEX REEBOK TRAINING ACTIVE BAG ", 188 | price: 1399, 189 | strikedoffprice: 2799, 190 | }, 191 | { 192 | image_url: 193 | "https://content.shop4reebok.com/static/Product-FW0318/reebok_FW0318_1.jpg.plp ", 194 | name: " MEN'S REEBOK RUNNING TREND RUNNER SHOES", 195 | price: 1575, 196 | strikedoffprice: 3499, 197 | }, 198 | { 199 | image_url: 200 | "https://content.shop4reebok.com/static/Product-G57705/reebok_G57705_1.jpg.plp", 201 | name: "UNISEX REEBOK CLASSICS BASKETBALL SHOES", 202 | price: 3919, 203 | strikedoffprice: 5599, 204 | }, 205 | { 206 | image_url: 207 | "https://content.shop4reebok.com/static/Product-FW0344/reebok_FW0344_1.jpg.plp", 208 | name: "MEN'S REEBOK RUNNING RUN FUSION SHOES", 209 | price: 1620, 210 | strikedoffprice: 3599, 211 | }, 212 | { 213 | image_url: 214 | "https://content.shop4reebok.com/static/Product-EX4272/reebok_EX4272_1.jpg.plp", 215 | name: "MEN'S REEBOK RUNNING QUICK DRIFTER SHOES", 216 | price: 1620, 217 | strikedoffprice: 3599, 218 | }, 219 | { 220 | image_url: 221 | "https://content.shop4reebok.com/static/Product-H02293/reebok_H02293_1.jpg.plp", 222 | name: "MEN'S REEBOK DYNAMIC ZIGZAG SHOES", 223 | price: 7599, 224 | strikedoffprice: 9999, 225 | }, 226 | { 227 | image_url: 228 | "https://content.shop4reebok.com/static/Product-FV9551/MEN_SWIM_SLIPPERS_FV9551_1.jpg.plp", 229 | name: "MEN'S REEBOK SWIM SUPERSOFT FLIP SLIPPERS", 230 | price: 909, 231 | strikedoffprice: 1299, 232 | }, 233 | { 234 | image_url: 235 | "https://content.shop4reebok.com/static/Product-HC3528/reebok_HC3528_1.jpg.plp", 236 | name: "MEN'S REEBOK TRAINING ACTIVE BASIC POLO TEE", 237 | price: 779, 238 | strikedoffprice: 1299, 239 | }, 240 | { 241 | image_url: 242 | "https://content.shop4reebok.com/static/Product-HF3794/reebok_HF3794_01.JPG.plp ", 243 | name: "MEN'S REEBOK TRAINING ACTIVE MOVE TEE ", 244 | price: 1749, 245 | strikedoffprice: 2499, 246 | }, 247 | { 248 | image_url: 249 | "https://content.shop4reebok.com/static/Product-HG5456/reebok_HG5456_1.jpg.plp", 250 | name: "MEN'S REEBOK FITNESS TRAINING SWEATSHIRT", 251 | price: 1079, 252 | strikedoffprice: 1799, 253 | }, 254 | ]; 255 | 256 | for(var i=0;i