├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # LAPTOP-TECH-WORLD 2 | Creating laptop sell website design using HTML , CSS & JS. 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CODE AASHU : LAPTOP TECH WORLD 7 | 8 | 9 | 10 | 11 |

12 |

L.T.W

13 | 21 | 25 |

26 |

27 | 28 |

29 |

30 |

LAPTOP TECH WORLD

31 |

32 | The biggest computer shop in the area where customers come first. 33 |

34 |

35 |

36 |

37 |

38 |

39 | 40 | 41 |

42 | 43 |

44 |

a computer in dark with with white shadow

45 |

46 |

Macbook pro

47 |

This a Macbook pro nulla vulputate magna vel odio sagittis bibendium...

48 |

ADD TO CART

49 |

50 |

51 | 52 |

53 |

54 |

55 |

Lenovo

56 |

This a Lenovo nulla vulputate magna vel odio sagittis bibendium...

57 |

ADD TO CART

58 |

59 |

60 |

61 | 62 | 63 |

64 | 65 |

66 |

67 | ADD TO CART 68 |

69 | 70 |

71 |

72 | ADD TO CART 73 |

74 | 75 |

76 |

77 | ADD TO CART 78 |

79 | 80 |

81 |

82 | ADD TO CART 83 |

84 |

85 | 86 | 87 |

88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |

96 | 97 | 98 |

99 | 100 | 104 |

105 |

106 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | 'use strict' 3 | 4 | const menuToggle = document.querySelector('.menu-toggle'); 5 | const bxMenu = document.querySelector('.bx-menu'); 6 | const bxX = document.querySelector('.bx-x'); 7 | 8 | const navBar = document.querySelector('.navbar'); 9 | 10 | // --- open menu --- 11 | 12 | bxMenu.addEventListener('click', (e)=> { 13 | if(e.target.classList.contains('bx-menu')){ 14 | navBar.classList.add('show-navbar'); 15 | bxMenu.classList.add('hide-bx'); 16 | bxX.classList.add('show-bx'); 17 | } 18 | }) 19 | 20 | // --- close menu --- 21 | 22 | bxX.addEventListener('click', (e)=> { 23 | if(e.target.classList.contains('bx-x')){ 24 | navBar.classList.remove('show-navbar'); 25 | bxMenu.classList.remove('hide-bx'); 26 | bxX.classList.remove('show-bx'); 27 | } 28 | }) 29 | 30 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* ===( CODE AASHU )=== */ 2 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400"); 3 | 4 | *, 5 | *::before, 6 | *::after { 7 | padding: 0; 8 | margin: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | /* ================= VARIABLE ================ */ 13 | :root { 14 | --primary-color: hsl(9, 94%, 61%); 15 | --primary-color-alt: hsl(28, 72%, 83%); 16 | --second-color: #3e537c; 17 | --second-color-alt: hsla(220, 33%, 36%, 65%); 18 | --third-color: hsl(220, 36%, 28%); 19 | --white-color: #fbfbfb; 20 | --white-color-alt: hsl(12, 14%, 93%); 21 | --dark-color: hsl(300, 100%, 0%); 22 | } 23 | 24 | /* ================= BASE ==================== */ 25 | li { 26 | list-style: none; 27 | } 28 | a { 29 | text-decoration: none; 30 | } 31 | img { 32 | width: 100%; 33 | height: auto; 34 | } 35 | .bx { 36 | font-size: 2.5rem; 37 | } 38 | .container { 39 | padding: 0 2rem; 40 | } 41 | 42 | /* -- BODY -- */ 43 | body { 44 | font-family: "Raleway", sans-serif; 45 | font-size: 1rem; 46 | background-color: var(--white-color); 47 | } 48 | 49 | /* ================= HEADER ================ */ 50 | header { 51 | display: flex; 52 | align-items: center; 53 | justify-content: space-between; 54 | background-color: var(--dark-color); 55 | padding: 1rem 2rem; 56 | } 57 | .company-logo { 58 | font-size: 2.5rem; 59 | background: -webkit-linear-gradient( 60 | 120deg, 61 | var(--primary-color-alt), 62 | var(--primary-color) 63 | ); 64 | -webkit-background-clip: text; 65 | -webkit-text-fill-color: transparent; 66 | } 67 | .nav-items { 68 | display: flex; 69 | } 70 | .nav-item { 71 | margin: 0 2rem; 72 | } 73 | .nav-link { 74 | font-size: 1.1rem; 75 | letter-spacing: 0.05rem; 76 | position: relative; 77 | background: -webkit-linear-gradient( 78 | var(--primary-color-alt), 79 | var(--primary-color) 80 | ); 81 | -webkit-background-clip: text; 82 | -webkit-text-fill-color: transparent; 83 | } 84 | .nav-link::before { 85 | content: ""; 86 | background: linear-gradient(var(--primary-color), var(--primary-color-alt)); 87 | width: 100%; 88 | height: 0.05rem; 89 | position: absolute; 90 | left: 0; 91 | bottom: 0; 92 | transform: scaleX(0); 93 | transform-origin: bottom right; 94 | transition: transform 150ms; 95 | } 96 | .nav-link:hover::before { 97 | transform: scaleX(1); 98 | transform-origin: bottom left; 99 | } 100 | .menu-toggle { 101 | display: none; 102 | } 103 | .bx-menu, 104 | .bx-x { 105 | cursor: pointer; 106 | background: -webkit-linear-gradient( 107 | 120deg, 108 | var(--primary-color-alt), 109 | var(--primary-color) 110 | ); 111 | -webkit-background-clip: text; 112 | -webkit-text-fill-color: transparent; 113 | display: none !important; 114 | } 115 | 116 | /* ================= MAIN ================ */ 117 | 118 | /* -------- HOME SECTION -------------- */ 119 | .section-1 { 120 | background-color: var(--dark-color); 121 | display: grid; 122 | } 123 | /* .home-computer-container {} */ 124 | 125 | .slogan .company-title { 126 | background: -webkit-linear-gradient( 127 | 120deg, 128 | var(--primary-color-alt), 129 | var(--primary-color) 130 | ); 131 | -webkit-background-clip: text; 132 | -webkit-text-fill-color: transparent; 133 | margin-top: 2rem; 134 | font-size: 1.5rem; 135 | font-weight: 600; 136 | } 137 | .slogan .company-slogan { 138 | background: -webkit-linear-gradient( 139 | 120deg, 140 | var(--primary-color-alt), 141 | var(--primary-color) 142 | ); 143 | -webkit-background-clip: text; 144 | -webkit-text-fill-color: transparent; 145 | margin-top: 1rem; 146 | font-size: 1.2rem; 147 | font-weight: 400; 148 | line-height: 1.8rem; 149 | } 150 | 151 | /* -------- OFFER SECTION ------------- */ 152 | .section-2 { 153 | margin: 2rem 0; 154 | } 155 | .offer { 156 | background-color: var(--dark-color); 157 | margin: 1rem 0; 158 | display: grid; 159 | } 160 | .offer img { 161 | background-color: var(--dark-color); 162 | padding: 2rem 0; 163 | } 164 | .offer-1 img { 165 | background-color: var(--dark-color); 166 | padding: 3rem 0; 167 | } 168 | .offer-description { 169 | background-color: var(--white-color-alt); 170 | padding: 0 1rem; 171 | } 172 | .offer-description .offer-title { 173 | color: var(--second-color); 174 | font-size: 1.8rem; 175 | font-weight: 400; 176 | padding: 1.5rem 0 0.5rem 0; 177 | } 178 | .offer-description .offer-hook { 179 | color: var(--second-color-alt); 180 | font-size: 1.2rem; 181 | } 182 | .offer-description .cart-btn { 183 | cursor: pointer; 184 | color: var(--second-color-alt); 185 | font-size: 1.1rem; 186 | display: grid; 187 | place-items: center; 188 | margin: 2rem 0 1rem 0; 189 | width: 10rem; 190 | height: 3rem; 191 | background-image: linear-gradient( 192 | to top, 193 | var(--primary-color-alt), 194 | var(--primary-color) 195 | ); 196 | } 197 | .offer-description .cart-btn:hover { 198 | background-image: linear-gradient( 199 | to bottom, 200 | var(--primary-color-alt), 201 | var(--primary-color) 202 | ); 203 | } 204 | 205 | /* -------- PRODUCT SECTION ----------- */ 206 | .section-3 { 207 | display: grid; 208 | place-items: center; 209 | justify-content: space-around; 210 | gap: 1rem; 211 | grid-template-columns: repeat(auto-fit, minmax(200px, 400px)); 212 | } 213 | .product { 214 | cursor: pointer; 215 | background-color: var(--white-color-alt); 216 | position: relative; 217 | } 218 | .product::before { 219 | content: ""; 220 | background-image: linear-gradient( 221 | to bottom, 222 | hsla(29, 72%, 83%, 0.438), 223 | hsla(9, 94%, 61%, 0.507) 224 | ); 225 | position: absolute; 226 | top: 0; 227 | bottom: 0; 228 | left: 0; 229 | right: 0; 230 | } 231 | .product_add_cart { 232 | color: var(--white-color-alt); 233 | font-size: 1.2rem; 234 | background-color: hsl(9, 94%, 65%); 235 | padding: 1rem 0.4rem; 236 | position: absolute; 237 | top: 50%; 238 | left: 50%; 239 | transform: translate(-50%, -50%); 240 | transition: transform 300ms, color 300ms, box-shadow 300ms; 241 | } 242 | .product_add_cart:hover { 243 | color: var(--white-color); 244 | box-shadow: 0 1rem 0 -0.5rem hsl(17, 79%, 65%, 0.7), 245 | 0 2rem 0 -1rem hsla(17, 79%, 65%, 0.65); 246 | } 247 | 248 | /* -------- SPONSOR SECTION ----------- */ 249 | .section-4 { 250 | margin: 4rem 0; 251 | display: flex; 252 | flex-wrap: wrap; 253 | align-items: center; 254 | justify-content: space-around; 255 | } 256 | .sponsor img { 257 | cursor: pointer; 258 | width: 40px; 259 | height: 40px; 260 | filter: grayscale(100%); 261 | opacity: 0.8; 262 | transition: opacity 300ms; 263 | } 264 | .sponsor img:hover { 265 | /* filter: grayscale(0); */ 266 | opacity: 1; 267 | } 268 | 269 | /* ========= SUBSCRIBE SECTION ========== */ 270 | .section-5 { 271 | display: flex; 272 | flex-direction: column; 273 | align-items: center; 274 | justify-content: center; 275 | margin: 2rem 0; 276 | } 277 | .subscribe-input-label { 278 | margin-bottom: 1rem; 279 | font-size: 1.5rem; 280 | font-weight: 400; 281 | letter-spacing: 0.05rem; 282 | color: var(--second-color); 283 | } 284 | input[type="text"] { 285 | padding: 0 0.5rem; 286 | font-size: 1.1rem; 287 | width: 100%; 288 | height: 3rem; 289 | border: none; 290 | background-color: hsl(220, 33%, 90%); 291 | color: var(--second-color-alt); 292 | transition: background-color 300ms; 293 | } 294 | input[type="text"]:focus { 295 | outline: none; 296 | background-color: hsl(220, 33%, 95%); 297 | } 298 | input[type="text"]::placeholder { 299 | color: var(--second-color-alt); 300 | } 301 | input[type="submit"] { 302 | cursor: pointer; 303 | background-image: linear-gradient( 304 | to top, 305 | var(--primary-color-alt), 306 | var(--primary-color) 307 | ); 308 | color: var(--white-color-alt); 309 | margin: 1rem 0; 310 | border: none; 311 | width: 100%; 312 | height: 3rem; 313 | font-size: 1.2rem; 314 | transition: color 300ms; 315 | } 316 | input[type="submit"]:hover { 317 | background-image: linear-gradient( 318 | to bottom, 319 | var(--primary-color-alt), 320 | var(--primary-color) 321 | ); 322 | color: var(--white-color); 323 | } 324 | /* =============== FOOTER =============== */ 325 | .top-footer { 326 | background-color: var(--second-color); 327 | display: flex; 328 | flex-direction: column; 329 | } 330 | .footer-title { 331 | font-weight: 500; 332 | font-size: 1.2rem; 333 | padding: 1rem 0; 334 | background-image: -webkit-linear-gradient( 335 | 120deg, 336 | var(--primary-color-alt), 337 | var(--primary-color) 338 | ); 339 | background-clip: text; 340 | -webkit-background-clip: text; 341 | -webkit-text-fill-color: transparent; 342 | } 343 | .footer-items h3 { 344 | cursor: pointer; 345 | font-weight: 300; 346 | font-size: 1.1rem; 347 | padding: 0.1rem 0; 348 | color: var(--white-color-alt); 349 | } 350 | .footer-items h3:hover { 351 | text-decoration: underline; 352 | } 353 | .footer-items h3:last-child { 354 | padding-bottom: 2rem; 355 | } 356 | 357 | .end-footer { 358 | display: flex; 359 | flex-direction: column; 360 | align-items: center; 361 | justify-content: center; 362 | background-color: var(--third-color); 363 | } 364 | .copyright { 365 | color: var(--white-color-alt); 366 | padding: 1rem 0; 367 | font-size: 0.9rem; 368 | } 369 | .copyright b { 370 | font-weight: inherit; 371 | font-size: 0.9rem; 372 | } 373 | .designer { 374 | color: hsla(0, 0%, 98%, 0.541); 375 | padding-bottom: 0.5rem; 376 | font-size: 0.9rem; 377 | } 378 | .designer:hover { 379 | text-decoration: underline; 380 | } 381 | 382 | /* =============== MEDIA QUERIES ======= */ 383 | 384 | @media screen and (max-width: 768px) { 385 | .container { 386 | padding: 0 1rem; 387 | } 388 | /* ================= HEADER ================ */ 389 | header { 390 | padding: 0.5rem 1rem; 391 | } 392 | .navbar { 393 | background-color: var(--dark-color); 394 | position: absolute; 395 | top: 3.5rem; 396 | right: 0; 397 | width: 100%; 398 | height: 100vh; 399 | display: flex; 400 | justify-content: center; 401 | transform: scaleY(0); 402 | transform-origin: bottom; 403 | transition: transform 500ms; 404 | } 405 | .show-navbar { 406 | display: flex; 407 | transform: scaleY(1); 408 | transform-origin: top; 409 | transition: transform 300ms; 410 | } 411 | .nav-items { 412 | display: flex; 413 | flex-direction: column; 414 | } 415 | .nav-item { 416 | margin: 0.5rem 0; 417 | } 418 | .menu-toggle { 419 | display: block; 420 | } 421 | .bx-menu { 422 | display: block !important; 423 | } 424 | .show-bx { 425 | display: block !important; 426 | } 427 | .hide-bx { 428 | display: none !important; 429 | } 430 | } 431 | @media (min-width: 769px) { 432 | header { 433 | padding: 1rem 5rem; 434 | } 435 | /* ================= MAIN ================ */ 436 | 437 | /* -------- HOME SECTION -------------- */ 438 | .section-1 { 439 | justify-content: space-between; 440 | grid-template-columns: 1fr 1fr; 441 | padding: 10rem 5rem 0 5rem; 442 | } 443 | .slogan .company-title { 444 | max-width: 30rem; 445 | font-size: 1.8rem; 446 | letter-spacing: 0.5rem; 447 | } 448 | .slogan .company-slogan { 449 | max-width: 20rem; 450 | font-size: 1.3rem; 451 | } 452 | /* -------- OFFER SECTION ------------- */ 453 | .section-2 { 454 | margin: 2rem 5rem; 455 | } 456 | .offer { 457 | margin: 5rem 0; 458 | align-items: center; 459 | justify-content: space-between; 460 | grid-template-rows: auto auto; 461 | } 462 | .offer-1 { 463 | grid-template-areas: "offer-1-img offer-desc-1"; 464 | } 465 | .offer-1 img { 466 | background-color: var(--dark-color); 467 | padding: 2rem 0; 468 | } 469 | .offer-2 { 470 | grid-template-areas: "offer-desc-2 offer-2-img"; 471 | } 472 | .offer-1-img { 473 | grid-area: offer-1-img; 474 | } 475 | .offer-2-img { 476 | grid-area: offer-2-img; 477 | } 478 | .offer-desc-1 { 479 | grid-area: offer-desc-1; 480 | } 481 | .offer-desc-2 { 482 | grid-area: offer-desc-2; 483 | } 484 | .offer-description .offer-title { 485 | font-size: 1.9rem; 486 | padding: 1.5rem 0 0.5rem 0; 487 | } 488 | .offer-description .offer-hook { 489 | max-width: 30rem; 490 | } 491 | .offer-description { 492 | background-color: var(--white-color-alt); 493 | padding: 2rem 1rem; 494 | } 495 | .offer-description .offer-title { 496 | padding: 0.5rem 0 1rem 0; 497 | } 498 | .offer-description .cart-btn { 499 | margin: 2rem 0 0.5rem 0; 500 | } 501 | /* -------- PRODUCT SECTION ----------- */ 502 | .section-3 { 503 | gap: 5rem; 504 | } 505 | .product::before { 506 | transform: scaleY(0); 507 | transform-origin: bottom; 508 | transition: transform 300ms; 509 | } 510 | .product:hover::before { 511 | transform: scaleY(1); 512 | transform-origin: top; 513 | transition: transform 300ms; 514 | } 515 | .product_add_cart { 516 | transform: scaleY(0); 517 | transform-origin: bottom; 518 | } 519 | .product:hover .product_add_cart { 520 | transform: translate(-50%, -50%) scaleY(1); 521 | transform-origin: top; 522 | } 523 | /* -------- SPONSOR SECTION ----------- */ 524 | .section-4 { 525 | margin: 5rem 0; 526 | } 527 | /* ========= SUBSCRIBE SECTION ========== */ 528 | .section-5 { 529 | padding: 1rem 0; 530 | } 531 | .section-5 .subscribe-container { 532 | display: flex; 533 | align-items: center; 534 | } 535 | input[type="text"] { 536 | padding: 0 1rem; 537 | width: 15rem; 538 | } 539 | input[type="submit"] { 540 | width: 10rem; 541 | } 542 | /* =============== FOOTER =============== */ 543 | .top-footer { 544 | flex-direction: row; 545 | justify-content: space-around; 546 | padding-bottom: 8rem; 547 | padding-top: 2rem; 548 | } 549 | .footer-title { 550 | font-size: 1rem; 551 | padding: 1rem 0; 552 | } 553 | .footer-items h3 { 554 | font-size: 0.9rem; 555 | } 556 | 557 | .end-footer { 558 | display: flex; 559 | flex-direction: column; 560 | align-items: center; 561 | justify-content: center; 562 | background-color: var(--third-color); 563 | } 564 | .copyright { 565 | color: hsla(0, 0%, 98%, 0.747); 566 | padding: 1rem 0; 567 | font-size: 0.8rem; 568 | } 569 | .copyright b { 570 | font-size: 0.7rem; 571 | } 572 | .designer { 573 | color: hsla(0, 0%, 98%, 0.322); 574 | font-size: 0.8rem; 575 | } 576 | } 577 | --------------------------------------------------------------------------------

LAPTOP TECH WORLD

32 | The biggest computer shop in the area where customers come first. 33 |

Macbook pro

Lenovo

NEWSLETTER