├── README.md ├── img ├── bg.png ├── cat1.jpg ├── cat2.jpg ├── cat3.jpg ├── cat4.jpg ├── cat5.jpg ├── product1.jpg ├── product2.jpg ├── product3.jpg ├── product4.jpg ├── product5.jpg ├── product6.jpg └── product7.jpg ├── index.html ├── index.js ├── sreenshot.png └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # ECOMMERCE WEBSITE WITH HTML,CSS AND JAVASCRIPT 2 | 3 | !['ECOMMERCE WEBSITE WITH HTML,CSS AND JAVASCRIPT'](https://raw.githubusercontent.com/ziddahedem/ecommerce4/master/sreenshot.png "ECOMMERCE WEBSITE WITH HTML,CSS AND JAVASCRIPT") 4 | -------------------------------------------------------------------------------- /img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/bg.png -------------------------------------------------------------------------------- /img/cat1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/cat1.jpg -------------------------------------------------------------------------------- /img/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/cat2.jpg -------------------------------------------------------------------------------- /img/cat3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/cat3.jpg -------------------------------------------------------------------------------- /img/cat4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/cat4.jpg -------------------------------------------------------------------------------- /img/cat5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/cat5.jpg -------------------------------------------------------------------------------- /img/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/product1.jpg -------------------------------------------------------------------------------- /img/product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/product2.jpg -------------------------------------------------------------------------------- /img/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/product3.jpg -------------------------------------------------------------------------------- /img/product4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/product4.jpg -------------------------------------------------------------------------------- /img/product5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/product5.jpg -------------------------------------------------------------------------------- /img/product6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/product6.jpg -------------------------------------------------------------------------------- /img/product7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/img/product7.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Codevo - Ecommerce 15 | 16 | 17 | 18 |
19 | Get 30% OFF This Christmas Holidays 20 |
21 | 22 |
23 | 24 | 68 | 69 | 70 |
71 |
72 |
73 | GET YOUR SPRING COLLECTION 74 |

75 | Up to 76 | 90%
77 | Discount 78 | on This
79 | Christmas Days 80 |

81 | 82 |
From 20th Dec to 31st Dec
83 | SHOP NOW 84 |
85 | 86 |
87 | 88 |
89 |
90 |
91 |
92 | 93 | 94 |
95 |
96 |
97 | 98 |

Free Shipping

99 | Capped at $39 per order 100 |
101 | 102 |
103 | 104 |

Securety Payments

105 | Up to 12 months installment 106 |
107 | 108 |
109 | 110 |

14-Day Returns

111 | Shop with confidence 112 |
113 | 114 |
115 | 116 |

24/7 Support

117 | Delivered to your door 118 |
119 |
120 |
121 | 122 | 123 |
124 |
125 |

New Arrivals

126 |
127 |
128 |
129 |
130 | 131 |
132 |

Hp Pavilion i5

133 |
134 | 135 | 136 | 137 | 138 | 139 |
140 |
$899
141 |
142 | 143 |
144 |
145 | 146 |
147 |

Hp Pavilion i5

148 |
149 | 150 | 151 | 152 | 153 | 154 |
155 |
$899
156 |
157 | 158 |
159 |
160 | 161 |
162 |

Hp Pavilion i5

163 |
164 | 165 | 166 | 167 | 168 | 169 |
170 |
$899
171 |
172 |
173 |
174 | 175 |
176 |

Hp Pavilion i5

177 |
178 | 179 | 180 | 181 | 182 | 183 |
184 |
$899
185 |
186 |
187 |
188 | 189 | 190 |
191 |
192 |

Shop By Categories

193 |
194 |
195 |
196 | 197 |
198 |
199 | 200 |
201 |
202 | 203 |
204 |
205 | 206 |
207 |
208 |
209 | 210 | 211 |
212 |
213 |

Popular Products

214 |
215 |
216 |
217 |
218 | 219 |
220 |

Hp Pavilion i5

221 |
222 | 223 | 224 | 225 | 226 | 227 |
228 |
$899
229 |
230 | 231 |
232 |
233 | 234 |
235 |

Hp Pavilion i5

236 |
237 | 238 | 239 | 240 | 241 | 242 |
243 |
$899
244 |
245 | 246 |
247 |
248 | 249 |
250 |

Hp Pavilion i5

251 |
252 | 253 | 254 | 255 | 256 | 257 |
258 |
$899
259 |
260 |
261 |
262 | 263 |
264 |

Hp Pavilion i5

265 |
266 | 267 | 268 | 269 | 270 | 271 |
272 |
$899
273 |
274 |
275 |
276 | 277 |
278 |

Hp Pavilion i5

279 |
280 | 281 | 282 | 283 | 284 | 285 |
286 |
$899
287 |
288 |
289 |
290 | 291 |
292 |

Hp Pavilion i5

293 |
294 | 295 | 296 | 297 | 298 | 299 |
300 |
$899
301 |
302 |
303 |
304 | 305 |
306 |

Hp Pavilion i5

307 |
308 | 309 | 310 | 311 | 312 | 313 |
314 |
$899
315 |
316 |
317 |
318 | 319 |
320 |

Hp Pavilion i5

321 |
322 | 323 | 324 | 325 | 326 | 327 |
328 |
$899
329 |
330 |
331 |
332 | 333 | 334 | 335 | 393 | 394 | 395 | 396 | 397 | 398 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const openNav = document.querySelector(".hamburger"); 2 | const closeNav = document.querySelector(".close"); 3 | const menu = document.querySelector(".menu"); 4 | 5 | const leftPosition = menu.getBoundingClientRect().left; 6 | openNav.addEventListener("click", () => { 7 | if (leftPosition < 0) { 8 | menu.classList.add("show"); 9 | } 10 | }); 11 | 12 | closeNav.addEventListener("click", () => { 13 | if (leftPosition < 0) { 14 | menu.classList.remove("show"); 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /sreenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wpcodevo/ecommerce4/4db567210f4d41ea5bb1128cb3159b395478aacc/sreenshot.png -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: #fff; 3 | --black: #222; 4 | --primary: #f3327c; 5 | --grey: #888; 6 | } 7 | 8 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); 9 | 10 | *, 11 | *::before, 12 | *::after { 13 | margin: 0; 14 | padding: 0; 15 | box-sizing: inherit; 16 | } 17 | 18 | html { 19 | box-sizing: border-box; 20 | font-size: 62.5%; 21 | } 22 | 23 | body { 24 | font-family: "Poppins", sans-serif; 25 | font-size: 1.6rem; 26 | color: var(--black); 27 | background-color: var(--white); 28 | } 29 | 30 | ul, 31 | li { 32 | list-style: none; 33 | } 34 | 35 | a { 36 | color: inherit; 37 | text-decoration: none; 38 | } 39 | 40 | img { 41 | max-width: 100%; 42 | } 43 | 44 | .container { 45 | max-width: 114rem; 46 | margin: 0 auto; 47 | } 48 | 49 | @media only screen and (max-width: 1200px) { 50 | .container { 51 | padding: 0 3rem; 52 | } 53 | } 54 | 55 | /* PROMO */ 56 | .promo { 57 | background-color: var(--primary); 58 | text-align: center; 59 | color: var(--white); 60 | padding: 0.5rem 0; 61 | } 62 | 63 | /* HEADER */ 64 | .hamburger { 65 | display: none; 66 | } 67 | 68 | .menu .top { 69 | display: none; 70 | } 71 | 72 | /* .header { 73 | min-height: 100vh; 74 | } */ 75 | 76 | .d-flex { 77 | display: flex; 78 | align-items: center; 79 | } 80 | 81 | .navigation { 82 | height: 7rem; 83 | justify-content: space-between; 84 | } 85 | 86 | .logo { 87 | outline: 2px solid var(--primary); 88 | outline-offset: 0.2rem; 89 | padding: 0rem 1.5rem; 90 | } 91 | 92 | .nav-item:not(:last-child) { 93 | margin-right: 0.5rem; 94 | } 95 | 96 | .nav-link { 97 | padding: 0 1rem; 98 | transition: all 300ms ease-in-out; 99 | } 100 | 101 | .nav-item:first-child .nav-link { 102 | color: var(--primary); 103 | } 104 | 105 | .nav-link:hover { 106 | color: var(--primary); 107 | } 108 | 109 | .nav .icons div { 110 | font-size: 2rem; 111 | padding: 0.5rem; 112 | cursor: pointer; 113 | transition: all 300ms ease-in-out; 114 | } 115 | 116 | .nav .icons div:not(:last-child) { 117 | margin-right: 0.5rem; 118 | } 119 | 120 | .nav .icons div:hover { 121 | color: var(--primary); 122 | } 123 | 124 | .nav .icons div:last-child { 125 | position: relative; 126 | } 127 | 128 | .nav .icons div span { 129 | position: absolute; 130 | top: -0.5rem; 131 | right: -1.2rem; 132 | font-size: 1rem; 133 | font-weight: 600; 134 | color: var(--white); 135 | background-color: var(--primary); 136 | height: 2.2rem; 137 | width: 2.2rem; 138 | border-radius: 50%; 139 | } 140 | 141 | .align-center { 142 | display: flex; 143 | align-items: center; 144 | justify-content: center; 145 | } 146 | 147 | @media only screen and (max-width: 768px) { 148 | .navigation { 149 | padding: 1rem 0; 150 | } 151 | 152 | .menu { 153 | position: fixed; 154 | top: 0; 155 | left: -100%; 156 | background-color: var(--white); 157 | height: 100%; 158 | width: 80%; 159 | max-width: 45rem; 160 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 161 | transition: all 500ms ease-in-out; 162 | z-index: 100; 163 | } 164 | 165 | .icons { 166 | display: none; 167 | } 168 | 169 | .hamburger { 170 | display: block; 171 | font-size: 3rem; 172 | cursor: pointer; 173 | } 174 | 175 | .logo { 176 | outline: 2px solid var(--primary); 177 | padding: 0rem; 178 | } 179 | 180 | .logo h2 { 181 | font-size: 1.6rem; 182 | font-weight: 400; 183 | } 184 | 185 | .menu .top { 186 | display: block; 187 | position: relative; 188 | background-color: var(--primary); 189 | width: 100%; 190 | height: 6rem; 191 | color: var(--white); 192 | } 193 | 194 | .top span { 195 | display: flex; 196 | align-items: center; 197 | position: absolute; 198 | top: 50%; 199 | transform: translateY(-50%); 200 | right: 1rem; 201 | font-size: 2rem; 202 | cursor: pointer; 203 | } 204 | 205 | .top span i { 206 | font-size: 3rem; 207 | } 208 | 209 | .nav-list { 210 | flex-direction: column; 211 | align-items: start; 212 | padding: 2rem 0; 213 | } 214 | 215 | .nav-item { 216 | margin: 0 0 2rem 0; 217 | } 218 | 219 | .nav-link { 220 | padding: 0.7rem; 221 | } 222 | 223 | .menu.show { 224 | left: 0; 225 | } 226 | } 227 | 228 | /* Hero */ 229 | .hero { 230 | height: calc(100vh - 7rem); 231 | background-color: beige; 232 | overflow: hidden; 233 | position: relative; 234 | z-index: 0; 235 | } 236 | 237 | .hero-content { 238 | height: 100%; 239 | } 240 | 241 | .hero-content .left { 242 | margin-top: -5rem; 243 | } 244 | 245 | .hero-content .left .subtitle { 246 | display: inline-block; 247 | font-size: 1.4rem; 248 | margin-bottom: 1.6rem; 249 | } 250 | 251 | .hero-content .left .title { 252 | line-height: 1.3; 253 | font-weight: 600; 254 | font-size: 4rem; 255 | text-align: left; 256 | } 257 | 258 | .hero-content .left .color { 259 | color: var(--primary); 260 | } 261 | 262 | .hero-content .left h5 { 263 | font-weight: 400; 264 | margin-top: 2rem; 265 | } 266 | 267 | .btn { 268 | display: inline-block; 269 | border-radius: 5rem; 270 | background-color: var(--primary); 271 | padding: 1.3rem 5rem; 272 | color: var(--white); 273 | font-weight: 600; 274 | box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.3); 275 | margin-top: 4rem; 276 | } 277 | 278 | .hero-content .right img { 279 | position: absolute; 280 | bottom: 0; 281 | right: -5%; 282 | height: 100%; 283 | } 284 | 285 | @media only screen and (max-width: 996px) { 286 | .promo { 287 | font-size: 1.5rem; 288 | } 289 | 290 | .hero-content .left .title { 291 | font-size: 3rem; 292 | } 293 | 294 | .btn { 295 | padding: 1.2rem 4rem; 296 | } 297 | 298 | .hero-content .right img { 299 | width: 90%; 300 | } 301 | } 302 | 303 | @media only screen and (max-width: 768px) { 304 | .hero { 305 | height: calc(80vh - 7rem); 306 | } 307 | 308 | .hero-content .left { 309 | margin-top: -35rem; 310 | } 311 | } 312 | 313 | @media only screen and (max-width: 567px) { 314 | .hero { 315 | height: calc(100vh - 7rem); 316 | } 317 | 318 | .hero-content .left { 319 | margin-top: -20rem; 320 | } 321 | 322 | .hero-content .left .title { 323 | margin-bottom: 1rem; 324 | } 325 | 326 | .hero-content .left h5 { 327 | margin-top: 0.5rem; 328 | } 329 | 330 | .hero-content .right img { 331 | width: 100%; 332 | height: 35rem; 333 | right: -20%; 334 | } 335 | } 336 | 337 | /* Section */ 338 | .section { 339 | padding: 10rem 0 0 0; 340 | } 341 | 342 | /* Services */ 343 | .service-center { 344 | display: grid; 345 | grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); 346 | gap: 5rem; 347 | } 348 | 349 | .service { 350 | border: 1px solid #ccc; 351 | padding: 1rem 1rem 2rem 1rem; 352 | display: flex; 353 | align-items: center; 354 | flex-direction: column; 355 | } 356 | 357 | .service .icon { 358 | color: var(--primary); 359 | font-size: 4rem; 360 | } 361 | 362 | .service h4 { 363 | margin-bottom: 0.3rem; 364 | } 365 | 366 | .service .text { 367 | font-size: 1.5rem; 368 | color: #777; 369 | } 370 | 371 | /* New Arrivals */ 372 | .title { 373 | font-size: 3rem; 374 | text-align: center; 375 | margin-bottom: 5rem; 376 | font-weight: 600; 377 | } 378 | 379 | .title h1 { 380 | font-weight: 400; 381 | } 382 | 383 | .title span { 384 | color: var(--primary); 385 | } 386 | 387 | .product-center { 388 | display: grid; 389 | grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); 390 | gap: 5rem; 391 | margin-bottom: 5rem; 392 | } 393 | 394 | .product { 395 | text-align: center; 396 | padding-bottom: 1rem; 397 | transition: all 500ms ease-in-out; 398 | } 399 | 400 | .product:hover { 401 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 402 | } 403 | 404 | .product .img-cover { 405 | overflow: hidden; 406 | } 407 | 408 | .product img { 409 | transition: all 500ms ease-in-out; 410 | } 411 | 412 | .product:hover img { 413 | transform: scale(1.2); 414 | } 415 | 416 | @media only screen and (max-width: 567px) { 417 | .title { 418 | font-size: 2rem; 419 | } 420 | } 421 | 422 | .cat { 423 | display: grid; 424 | grid-template-columns: repeat(6, 1fr); 425 | grid-template-rows: repeat(8, 4vw); 426 | gap: 2rem; 427 | } 428 | 429 | .cat .item { 430 | overflow: hidden; 431 | } 432 | 433 | .cat img { 434 | object-fit: cover; 435 | height: 100%; 436 | width: 100%; 437 | transition: all 500ms ease-out; 438 | } 439 | 440 | .cat .item-1 img { 441 | object-fit: fill; 442 | } 443 | 444 | .cat img:hover { 445 | transform: scale(1.2); 446 | } 447 | 448 | .item-1 { 449 | grid-column-start: 1; 450 | grid-column-end: 3; 451 | grid-row-start: 1; 452 | grid-row-end: 9; 453 | } 454 | 455 | .item-2 { 456 | grid-column-start: 5; 457 | grid-column-end: 7; 458 | grid-row-start: 1; 459 | grid-row-end: 9; 460 | } 461 | .item-3 { 462 | grid-column-start: 3; 463 | grid-column-end: 5; 464 | grid-row-start: 1; 465 | grid-row-end: 5; 466 | } 467 | 468 | .item-4 { 469 | grid-column-start: 3; 470 | grid-column-end: 5; 471 | grid-row-start: 5; 472 | grid-row-end: 9; 473 | } 474 | 475 | @media only screen and (max-width: 600px) { 476 | .gallary { 477 | grid-template-columns: repeat(6, 1fr); 478 | grid-template-rows: repeat(20, 4vw); 479 | } 480 | 481 | .item-1 { 482 | grid-column-start: 1; 483 | grid-column-end: 7; 484 | grid-row-start: 1; 485 | grid-row-end: 7; 486 | } 487 | 488 | .item-2 { 489 | grid-column-start: 1; 490 | grid-column-end: 7; 491 | grid-row-start: 7; 492 | grid-row-end: 11; 493 | } 494 | .item-3 { 495 | grid-column-start: 1; 496 | grid-column-end: 7; 497 | grid-row-start: 11; 498 | grid-row-end: 15; 499 | } 500 | .item-4 { 501 | grid-column-start: 1; 502 | grid-column-end: 7; 503 | grid-row-start: 15; 504 | grid-row-end: 19; 505 | } 506 | } 507 | 508 | /* Footer */ 509 | .footer { 510 | background-color: var(--black); 511 | padding: 6rem 1rem; 512 | line-height: 3rem; 513 | margin-top: 5rem; 514 | } 515 | 516 | .footer-center span { 517 | margin-right: 1rem; 518 | } 519 | 520 | .footer-container { 521 | display: grid; 522 | grid-template-columns: repeat(4, 1fr); 523 | color: var(--white); 524 | } 525 | 526 | .footer-center a:link, 527 | .footer-center a:visited { 528 | display: block; 529 | color: var(--grey2); 530 | font-size: 1.4rem; 531 | transition: 0.6s; 532 | } 533 | 534 | .footer-center a:hover { 535 | color: var(--primary); 536 | } 537 | 538 | .footer-center div { 539 | font-size: 1.4rem; 540 | } 541 | 542 | .footer-center h3 { 543 | font-size: 1.8rem; 544 | font-weight: 400; 545 | margin-bottom: 1rem; 546 | } 547 | 548 | @media only screen and (max-width: 998px) { 549 | .footer-container { 550 | grid-template-columns: repeat(2, 1fr); 551 | row-gap: 2rem; 552 | } 553 | } 554 | 555 | @media only screen and (max-width: 768px) { 556 | .footer-container { 557 | grid-template-columns: 1fr; 558 | row-gap: 2rem; 559 | } 560 | } 561 | --------------------------------------------------------------------------------