├── 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 |

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 |
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 |
--------------------------------------------------------------------------------