AX147370002

Shahganj ward no 14
( Enrollment No :AX147370002 )
( Enrollment No :AX147370002 )
 “ INDEX PAGE ”

NO. TOPIC PAGE NO.

1. Introduction 1
2. System Analysis for Online Shopping Website 2
3. Feasibility Study 3
4. Software & Hardware Requirement Specifications 4
5. System Design 6
6. Coding 7
7. Style Sheet 34
8. Loging Page HTML 49
9. Loging Page CSS 51
10. Login Page JS 55
11. Signup Page HTML 56
12. Signup Page CSS 58
13. Signup Page JS 62
14. Kids Page HTML 63
15. Kids Page CSS 75
16. Validation Checks For Online Shopping Website 84
17. Testing For Online Shopping Website 86
18. Reports 90
19. Tables Figures 91
20. Screen Shorts 93
21. Implementation & Maintenance 95

22. Conclution 98
23. Future Scope & Further Enhancement Of The Project 99
24. Further Enhancements 100
25. Bibliography / References 101
26. Appendices 102
 Introduction

In today's digital era, e-commerce has become an integral part of

our daily lives, transforming how consumers shop and how
businesses operate. Online shopping platforms offer unparalleled
convenience, a vast selection of products, and the ability to shop
from anywhere at any time. This college project aims to develop
an online shopping website, providing students with practical
experience in web development, design, and e-commerce
functionalities.
The project will involve a comprehensive approach to building an
e-commerce platform, covering everything from user interface
design to backend development and database management. By
integrating essential features such as product listings, shopping
carts, secure payment gateways, and user account management,
the project will create a functional and user-friendly online
shopping experience.
Through this project, students will gain hands-on experience in
various aspects of web development, including frontend and
backend technologies, security practices, and user experience
design. The goal is to create a platform that not only meets the
technical requirements but also provides a seamless and
enjoyable shopping experience for users. This project will serve as
a valuable learning experience, bridging theoretical knowledge
with practical application in the field of e-commerce.
System Analysis for Online Shopping
Website

1. Requirements Gathering

Functional Requirements

User Registration and Login : Users can create an

account, log in, and log out
Product Catalog: Display products with
descriptions, images, and prices.
Shopping Cart: Users can add, remove, and update
products in their cart.
Checkout Process: Secure payment processing
and order confirmation.
Order Management: Users can view and track their
orders.
Admin Panel: Manage products, user accounts, and
orders.
Non-Functional Requirements:

Performance: Fast loading times and efficient

handling of multiple users.
Security: Protect user data and transactions.
Usability: Intuitive and user-friendly interface.
Compatibility: Works across various devices and
browsers.
Feasibility study

Technical Feasibility:

Technology Stack: Use HTML, CSS,

JavaScript for frontend;
Development Tools: Visual Studio Code
software for frameworks.

Operational Feasibility:

User Acceptance: Ensure the website meets

user needs.
Maintenance: Plan for future updates and
maintenance.

.
Software and Hardware Requirement
Specifications for Online Shopping Website
1. Development Tools:

IDE/Code Editor: Visual Studio Code,

Version Control: Git and GitHub for source code
management.

2 Frontend Technologies:

HTML/CSS: For structuring and styling web pages .

JavaScript: For dynamic content and interactivity
.
3. Server:

Web Server: Apache or Nginx.

4 Payment Gateway Integration:

APIs: Stripe, PayPal, or other payment processing APIs

.

5 . Security Tools:

SSL Certificate For secure data transmission.

.,
Encryption Libraries: For data protection (e.g
bcrypt for password hashing).
 1. Development Machines:

Processor: Intel i5 or equivalent AMD

processor.
RAM: Minimum 8GB (16GB recommended for
smoother performance).
Storage: Minimum 256GB SSD (Solid State
Drive).
Operating System: Windows 10, macOS, or
Linux.
2. Server Specifications:

Processor: Intel Xeon or equivalent.

RAM: Minimum 8GB (16GB recommended for
better performance).
Storage: Minimum 100GB SSD.
Network: High-speed internet connection with
a static IP address.

3. Testing Devices
:
Desktop Computers: For testing on different
operating systems and browsers.
Mobile Devices: Smartphones and tablets with
varying screen sizes and operating systems (iOS
and Android).
 System design

Architecture Design:

Client-Server Model: Frontend communicates

with the backend via APIs.
Database Schema: Design a schema for storing
user data, product details, and orders.

Security Design:

Authentication: Secure user login and access

control.
Data Protection: Encrypt sensitive data and
validate inputs to prevent security vulnerabilities.
coding [Link]
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Online Shopping Store</title>
8 <link rel="website icon" type="png"
9 href="./images/[Link]">
10 <link rel="stylesheet" href="[Link]">
11 </head>
12 <body>
13 <div class="navbar-1">
14
15 <img id="edit_1" src="[Link]
putra/24/[Link]" alt="">
16 </a>
17
18 </div>
19 </div>
20 <div class="nav-middle">
21 <div>
22 <a href="./[Link]">
23 <img src="./images/logo [Link]" alt="error">
24 </a>
25 </div>
26 <div id="searchbar">
27 <form>
28 <input type="text" placeholder="Your door to happiness opens with a search" id="
search">
29 <img src="[Link] alt="error">
30 </form>
31 </div>
32 <div id="images">
33 <a href="#"><img src="[Link]
vectorslab/53/[Link]" alt="
error"></a>
34 <a href="./[Link]"><img src="[Link]
alt="error"></a>
35 <a href="#"><img src="[Link] alt="error"></a>
36 <a href="./[Link]"><img src="[Link]
detailed-outline-smashing-stocks/256/external-Add-To-Cart-mobile-shopping-smashingstocks-
[Link]" alt="error"></a>
37 </div>
38 </div>
39 <header>
40
41 <div class="container">
42
43 <div class="navbar-2">
44 <div class="hyperlinks">
45 <a href="./kids/[Link]">KIDS</a>
46 <div class="megamenu">
47
<div class="megamenuitems">
48
<h4></h4>
6/3/24, 11:24 AM [Link]
49 <p></p>
50 <p></p>
51 <p></p>
52 </div>
53 <div class="megamenuitems">
54
<h4></h4>
55
<p></p>
56
<p></p>
57
58 <p></p>
<p></p>
59
60 </div>
61 <div class="megamenuitems">
62 <h4></h4>
63 <p></p>
64 <p></p>
65 <p></p>
66 <p> </p>
67 <p></p>
68
</div>
69
70 <div class="megamenuitems">
71 <h4></h4>
72 <p></p>
73 <p></p>
74 <p></p>
75 <p></p>
76 </div>
77 <div class="megamenuitems">
78 <h4></h4>
79 <p></p>
80
<p></p>
81
<p></p>
82
83 <p></p>
84 </div>
85 <div class="megamenuitems">
86 <h4></h4>
87 <p></p>
88 <p></p>
89 <p></p>
90 <p></p>
91 <p></p>
92 </div>
93
94 <div class="megamenuitems">
95 <h4></h4>
96 <p> </p>
97 <p></p>
98 <p></p>
99 <p></p>
100 <p> </p>
101 <p></p>
102 </div>
103 <div class="megamenuitems">
104
<h4></h4>
<p></p>
<p></p>
<p></p>
<p></p>
6/3/24, 11:24 AM [Link]
105 <p></p>
106 <p></p>
107 </div>
108 <div class="megamenuitems">
109 <h4></h4>
110
<p></p>
111
<p></p>
112
<p></p>
113
<p></p>
114
<p></p>
115
<p></p>
116
117 </div>
118 <div class="megamenuitems">
119 <h4></h4>
120 <p></p>
121 <p></p>
122 <p></p>
123
</div>
124
<div class="megamenuitems">
125
126 <h4></h4>
127 <p></p>
128 <p></p>
129 <p></p>
130 <p></p>
131 </div>
132
133 <div class="megamenuitems">
134 <h4></h4><p></p>
135 <p></p>
136 <p></p>
137 <p></p>
138
<p></p>
139
<p></p>
140
<p></p>
141
<p></p>
142
<p></p>
143
144 </div>
145 <div class="megamenuitems">
146 <h4></h4>
147 <p></p>
148 <p></p>
149 <p></p>
150
151 </div>
152 <div class="megamenuitems">
153 <h4></h4>
154 <p></p>
155 <p></p>
156 </div>
157
158 <div class="megamenuitems">
159 <h4></h4>
160
<p></p>
<p></p>
<p></p>
</div>
<div class="megamenuitems">
6/3/24, 11:24 AM [Link]
161 <h4></h4>
162 <p></p>
163 <p></p>
164 <p></p>
165 </div>
166
<div class="megamenuitems">
167
<h4></h4>
168
<p></p>
169
170 <p></p>
171 <p></p>
172 </div>
173 <div class="megamenuitems">
174 <h4></h4>
175 <p></p>
176 <p></p>
177 <p></p>
178 <p></p>
179
</div>
180
</div>
181
182 </div>
183 <div class="hyperlinks">
184 <a href="#">BOY/MEN,</a>
185 <div class="megamenu">
186 <div class="megamenuitems">
187 <h4>SHOP BY CATEGORY</h4>
188 <h4>SHOP BY COLLECTION</h4>
189 <h4>SHOP BY AGE</h4>
190 <h4>SHOP BY BRANDS/h4>
191 </div>
192 <div class="megamenuitems">
193
<h4>SHOP BY CATEGORY</h4>
194
195 <p>Sets & Suits NEW</p>
196 <p> T-shirts NEW </p>
<p>Shirts NEW</p>
197
<p>Shorts NEW</p>
198
<p>Baby Essentials</p>
199
<p>Jeans & Trousers</p>
200
201 </div>
202 <div class="megamenuitems">
203 <h4>SHOP BY COLLECTION</h4>
204 <p>Splash in Summer NEW</p>
205 <p>Bestsellers</p>
206 <p>Multi-packs</p>
207
208
209 </div>
210 <div class="megamenuitems">
211 <h4> FASHION ACCESSORIES</h4>
212 <p>Sunglasses NEW</p>
213 <p>Summer Caps NEW</p>
214 <p>Watches</p>
215 <p>
216
Bags</p>
</div>
<div class="megamenuitems">
<h4>
SHOP BY AGE</h4>
6/3/24, 11:24 AM [Link]
217 <p>Preemie/Tine Preemie New B (0-3 M)</p>
218 <p>3-6 Months</p> <p>6-9 Months</p>
219 <p>9-12 Months</p>
220 <p>12-18 Months</p> <p>2 to 4 Years</p>
221 <p>
222
223
224
4 to 6 Years</p>
225
226 <p>6 to 8 Years</p>
227 <p>8+ Years</p>
228 </div>
229
230 <div class="megamenuitems">
231 <h4>
232 SHOP BY BRAND</h4>
233 <p></p>
234 <p></p> <p></p>
235
236
</div>
237
238 <div class="megamenuitems">
239 <h4></h4>
240 <p> </p>
241 <p></p>
242 </div>
243 <div class="megamenuitems">
244 <h4></h4>
245 <p></p>
246 <p></p>
247 <p></p>
248 <p></p>
249
</div>
250
251 <div class="megamenuitems">
252 <h4></h4>
253 <p></p>
254 <p></p>
255 <p></p>
256 <p></p>
257 </div>
258 <div class="megamenuitems">
259 <h4></h4>
260
<p></p>
261
<p></p>
262 <p></p>
263
264 </div>
265 <div class="megamenuitems">
266 <h4></h4>
267 <p></p>
268 <p></p>
269 <p></p>
270 <p></p>
271 <p></p>
272 <p></p>
</div>

<div class="megamenuitems">
<h4></h4>
6/3/24, 11:24 AM [Link]
273 <p></p>
274 <p></p>
275 </div>
276 <div class="megamenuitems">
277 <h4></h4>
278
<p></p>
279
<p></p>
280
<p></p>
281
282 </div>
283 <div class="megamenuitems">
284 <h4></h4>
285 <p></p>
286 <p></p>
287 <p></p>
288 <p></p>
289 <p></p>
290 <p></p>
291
</div>
292
293
294 <div class="megamenuitems">
295 <h4></h4>
296 <h4></h4>
297 <h4></h4>
298 <h4></h4>
299 </div>
300 <div class="megamenuitems">
301 <h4></h4>
302 <h4></h4>
303 <h4></h4>
304 <h4></h4>
305 <h4> </h4>
306
307 </div>
308 <div class="megamenuitems">
309 <h4></h4>
310 <p></p>
311 <p></p>
312 <p></p>
313 <p></p>
314 <p></p>
315 <p></p>
316
</div>
317 </div>
318
319 </div>
320 <div class="hyperlinks">
321
322 <a href="#">WOMEN</a>
323 <div class="megamenu">
324 <div class="megamenuitems">
325 <h4></h4>
326 <h4></h4>
327 <h4></h4>
328 <h4></h4>
</div>
<div class="megamenuitems">
<h4></h4>
<p></p>
6/3/24, 11:24 AM [Link]
329 <p></p>
330 <p></p>
331 <p></p>
332 <p></p>
333 <p></p>
334
</div>
335
<div class="megamenuitems">
336
<h4></h4>
337
338 <p></p>
339 <p></p>
340 <p></p>
341 <p></p>
342 <p></p>
343 <p></p>
344 </div>
345 <div class="megamenuitems">
346 <h4></h4>
347
<p></p>
348
<p></p>
349
350 <p></p>
351 <p></p>
352 </div>
353 <div class="megamenuitems">
354 <h4></h4>
355 <p></p>
356 <p></p>
357 <p></p>
358 <p></p>
359 <p></p>
360 <p></p>
361
</div>
362
363 <div class="megamenuitems">
364 <h4></h4>
365 <h4></h4>
366 <h4></h4>
367 </div>
368 <div class="megamenuitems">
369 <h4></h4>
370 <p></p>
371 <p></p>
372 <p></p>
373 <p></p>
374 <p></p>
375
376 </div>
377 <div class="megamenuitems">
378 <h4></h4>
379 <p> </p>
380 <p></p>
381 </div>
382 <div class="megamenuitems">
383 <h4></h4>
384
<p></p>
<p></p>
<p></p> <p></p>
<p></p>
<p></p>
6/3/24, 11:24 AM [Link]
385 </div>
386 <div class="megamenuitems">
387 <h4></h4>
388 <p></p>
389 <p></p>
390 <p></p> <p></p>
391 <p></p>
392 <p></p>
393
394 </div>
395 <div class="megamenuitems">
396 <h4></h4>
397 <p></p>
398 <p></p>
399 <p></p> <p></p>
400 <p></p>
401 <p></p>
402 </div>
403
<div class="megamenuitems">
404
<h4></h4>
405
406 <p></p>
407 <p></p>
408 <p></p> <p></p>
409 <p></p>
410 <p></p>
411 </div>
412
413 <div class="megamenuitems">
414 <h4></h4>
415 <p></p>
416 <p></p>
417 <p></p>
418
419 </div>
420 <div class="megamenuitems">
421 <h4></h4>
422 <p></p>
423 <p></p>
424 <p></p>
425 </div>
426 <div class="megamenuitems">
427 <h4></h4>
428 <p></p>
429 <p></p>
430 <p></p>
431
432 </div>
433
434 <div class="megamenuitems">
435 <h4></h4>
436 <h4></h4>
437 <h4></h4>
438 <h4></h4>
439 </div>
440
<div class="megamenuitems">
<h4></h4>
<h4></h4>
<h4></h4>
<h4></h4>
6/3/24, 11:24 AM [Link]
441 <h4> </h4>
442 </div>
443 <div class="megamenuitems">
444 <h4></h4>
445 <p></p>
446 <p></p>
447 <p></p> <p></p>
448 <p></p>
449 <p></p>
450
451 </div>
452 </div>
453 </div>
454 <div class="hyperlinks">
455 <a href="#">BEAUTY & HEALTH</a>
456 <div class="megamenu">
457 <div class="megamenuitems">
458 <h4></h4>
459 <p></p>
460 <p></p>
461
<p></p> <p></p>
462
<p></p>
463
<p></p>
464
465 </div>
466 <div class="megamenuitems">
467 <h4></h4>
468 <p></p>
469 <p></p>
470 <p></p> <p></p>
471 <p></p>
472 <p></p>
473
</div>
474
475 <div class="megamenuitems">
476 <h4></h4>
477 <p></p>
478 <p></p>
479 <p></p>
480 </div>
481 <div class="megamenuitems">
482 <h4></h4>
483 <p></p>
484 </div>
485
<div class="megamenuitems">
486
487 <h4></h4>
488 <p></p>
489 <p></p>
490 <p></p> <p></p>
491 <p></p>
492 <p></p>
493 </div>
494
495 <div class="megamenuitems">
496
<h4></h4>
<p></p>
<p></p>
<p></p> <p></p>
<p></p>
6/3/24, 11:24 AM [Link]
497 <p></p>
498 </div>
499 <div class="megamenuitems">
500 <h4></h4>
501 <p></p>
502 <p></p>
503 <p></p> <p></p>
504 <p></p>
505 <p></p>
506
507 </div>
508 <!--- <div class="megamenuitems">
<img src="
[Link]
Lighting_Banner1_HoverBanner_25April22.jpg" alt="error">
509 </div>
510 <div class="megamenuitems">
511 <img src="
[Link]
Lighting_Banner2_HoverBanner_25April22.jpg" alt="error">
512 </div>-->
513 <div class="megamenuitems">
514 <h4></h4>
515 <p></p>
516 <p></p>
517 <p></p>
518 </div>
519 <div class="megamenuitems">
520 <h4></h4>
521 <p></p>
<p></p>
<p></p>
522
523
524
525 </div>
526 </div>
527 </div>
528 <div class="hyperlinks">
529 <a href="#"> Home & Kitchens</a>
530 <div class="megamenu">
531 <div class="megamenuitems">
532 <h4></h4>
533 <p></p>
534 <p></p>
535 <p></p>
536
</div>
<div class="megamenuitems">
537
538
539 <h4></h4>
<p></p>
<p></p>
<p></p>
540
541
542
543 </div>
544 <div class="megamenuitems">
545 <h4></h4>
546 <p></p>
547 <p></p>
548 <p></p>
549
</div>
<div class="megamenuitems">
<h4></h4>
6/3/24, 11:24 AM [Link]
550 <p></p>
551 <p></p>
552 <p></p>
553 </div>
554 <div class="megamenuitems">
555
<h4></h4>
556
<p></p>
557
<p></p>
558
559 <p></p> <p></p>
<p></p>
560
<p></p>
561
562
563 </div>
564 <div class="megamenuitems">
565 <h4></h4>
566 <p></p>
567 <p></p>
568 <p></p> <p></p>
569 <p></p>
570 <p></p>
571
572 </div>
<div class="megamenuitems">
573
574 <h4></h4>
575 <p></p>
576 <p></p>
577 <p></p> <p></p>
578 <p></p>
579 <p></p>
580 </div>
<div class="megamenuitems"><!---->
<img src="
[Link]
Dining_Banner1_HoverBanner_25April22.jpg" alt="error">
581 </div>
582 <div class="megamenuitems">
583 <h4></h4>
584 <p></p>
585 <p></p>
586 <p></p>
587
</div>
<div class="megamenuitems">
588
589
<h4></h4>
<p></p>
590
591 <p></p>
592
<p></p>
593
594 </div>
595 <div class="megamenuitems">
596 <h4></h4>
597 <p></p>
598 <p></p>
599 <p></p>
600
</div>
601
602
603 <div class="megamenuitems">
604 <h4></h4>
<p></p>
<p></p>
6/3/24, 11:24 AM [Link]
605 <p></p>
606 </div>
607 <div class="megamenuitems">
608 <h4></h4>
609 <p></p>
610 <p></p>
611 <p></p>
612
</div>
613
614
615 </div>
616 </div>
617 <div class="hyperlinks">
618 <a href="#">BAGS & FOOTWEAR</a>
619 <div class="megamenu">
620 <div class="megamenuitems">
621 <h4></h4>
622 <p></p>
623 <p></p>
624 <p></p>
625
626 </div>
627 <div class="megamenuitems">
628 <h4></h4>
629 <p></p>
630 <p></p>
631 <p></p> <p></p>
632 <p></p>
633 <p></p>
634 </div>
635 <div class="megamenuitems">
636
<h4></h4>
637
638 <p></p>
639 <p></p>
640 <p></p> <p></p>
641 <p></p>
<p></p>
642
643 </div>
644 <div class="megamenuitems">
645 <h4></h4>
646 <p></p>
647 <p></p>
648 <p></p>
<p></p>
649 <p></p>
650 <p></p>
651 <p></p>
<p></p>
652 <p></p>
653
654 </div>
655 <div class="megamenuitems">
656 <h4></h4>
657 <p></p>
658 <p></p>
659 <p></p> <p></p>
660 <p></p>
<p></p>
</div>
<div class="megamenuitems">
<h4></h4>
6/3/24, 11:24 AM [Link]
661 <p></p>
662 <p></p>
663 <p></p> <p></p>
664 <p></p>
665 <p></p>
666
</div>
<div class="megamenuitems">
667
668
<h4></h4>
<p></p>
669 <p></p>
670 <p></p>
671
672 <p></p>
673 <p></p>
674 <p></p>
675 </div>
676 <div class="megamenuitems">
<img src="
[Link]
[Link]" alt="error">
677 </div>
678 <div class="megamenuitems">
679 <h4></h4>
680 <p></p>
681 <p></p>
682 <p></p>
683
</div>
684
<div class="megamenuitems">
685
686 <h4></h4>
687 <p></p>
<p></p>
<p></p>
688
689
690 </div>
691 <div class="megamenuitems">
692 <h4></h4>
693 <p></p>
694 <p></p>
695 <p></p>
696
697 </div>
698
699 <div class="megamenuitems">
700 <h4></h4>
701 <p></p>
702 <p></p>
703 <p></p>
704 </div>
705 <div class="megamenuitems">
706
<h4></h4>
707
708 <h4></h4>
<p></p>
<p></p>
<p></p>
709
710
711
712 </div>
713 <div class="megamenuitems">
714 <h4></h4>
715 <p></p>
<p></p>
<p></p>
</div>
6/3/24, 11:24 AM [Link]
716
717 <div class="megamenuitems">
718 <h4></h4>
719 <p></p>
720 <p></p>
721 <p></p>
722
</div>
723
724
725 </div>
726 </div>
727 <div class="hyperlinks">
728 <a href="#">ELECTRONICS</a>
729 <div class="megamenu">
730 <div class="megamenuitems">
731 <h4></h4>
732 <p></p>
<p></p>
<p></p>
733
734
735
</div>
<div class="megamenuitems">
736
737
738 <h4></h4>
739 <p></p>
740 <p></p>
741 <p></p>
742 </div>
743 <div class="megamenuitems">
744 <h4></h4>
745 <p></p>
746 <p></p>
747 <p></p>
748
</div>
749
750 <div class="megamenuitems">
751 <h4></h4>
752 <p></p>
753 <p></p>
754 <p></p>
755 </div>
<div class="megamenuitems">
756
757 <h4></h4>
758 <p></p>
759
760 <p></p>
<p></p>
</div>
<div class="megamenuitems">
<img src="
[Link] alt="
error">
761 </div>
762 <div class="megamenuitems">
763 <img src="
[Link]
[Link]" alt="error">
764 </div>
765 <div class="megamenuitems">
766 <h4></h4>
767 <h4></h4>
768 <h4></h4>
6/3/24, 11:24 AM [Link]
769 </div>
770 <div class="megamenuitems">
771 <h4></h4>
772 <p></p>
773 <p></p>
774 <p></p>
775
</div>
<div class="megamenuitems">
776
777
778 <h4></h4></div>
779 </div>
780 </div>
781 <div class="hyperlinks">
782 <a href="#">MOBILES & COMPUTERS </a>
783 <div class="megamenu">
784 <div class="megamenuitems">
785 <h4></h4>
786 <p></p>
787 <p></p>
788 <p></p>
789
790 </div>
791 <div class="megamenuitems">
792 <h4></h4>
793 <p></p>
794 <p></p>
795 <p></p> <p></p>
796 <p></p>
797 <p></p>
798 </div>
799 <div class="megamenuitems">
800
<h4></h4>
<p></p>
801 <p></p>
802
<p></p>
803
804
805 </div>
806 <div class="megamenuitems">
807 <h4></h4>
808 <h4></h4>
809 <p></p>
810 <p></p>
811 <p></p>
812
</div>
813
<div class="megamenuitems">
814
815 <h4></h4>
816 <p></p>
<p></p>
<p></p>
817

</div>
<div class="megamenuitems">
<img src="
[Link]
[Link]" alt="error">
818 </div>
819 <div class="megamenuitems">
820 <img src="
[Link]
[Link]" alt="error">
821 </div>
6/3/24, 11:24 AM [Link]
822 <div class="megamenuitems">
823 <h4></h4>
824 <p></p>
825 <p></p>
826 <p></p>
827
</div>
<div class="megamenuitems">
828
829
<h4></h4>
<p></p>
830 <p></p>
831 <p></p>
832
833
834 </div>
835 <div class="megamenuitems">
836 <h4></h4>
837 <p></p>
838 <p></p>
839 <p></p>
840
</div>
841
<div class="megamenuitems">
842
843 <h4></h4>
844 </div>
845
846 <div class="megamenuitems">
847 <h4></h4>
848 <p></p>
849 </div>
850 </div>
851 </div>
852 <div class="hyperlinks">
853
<a href="#">SPORTS</a>
<div class="megamenu">
854
855
856 <div class="megamenuitems">
857 <h4></h4>
<p></p>
<p></p>
<p></p>
858
859
860
861 </div>
862 <div class="megamenuitems">
863 <h4></h4>
864 <p></p>
865 <p></p>
866 <p></p>
867
868 </div>
869 <div class="megamenuitems">
<h4></h4>
</div>
<div class="megamenuitems">
<img src="
[Link]
alt="error">
870 </div>
871 <div class="megamenuitems">
872 <img src="
[Link]
alt="error">
873 </div>
874 <div class="megamenuitems">
6/3/24, 11:24 AM [Link]
875 <img src="
[Link]
alt="error">
876 </div>
877 <div class="megamenuitems">
878 <h4></h4>
<p></p>
<p></p>
879 <p></p>
880
881
882
</div>
883 <div class="megamenuitems">
884
885 <h4></h4>
886 <p></p>
887 <p></p>
888 <p></p> <p></p>
889 <p></p>
890 <p></p>
891 </div>
892 <div class="megamenuitems">
893 <h4></h4>
894
<h4></h4>
895 <h4></h4>
896 <p></p>
897
<p></p>
898
<p></p>
899
900
901 </div>
902 </div>
903 </div>
904 <div class="hyperlinks">
905 <a href="#">Modular</a>
906 </div>
907 <div class="hyperlinks">
908
<a href="#">Gift Cards</a>
909
910 </div>
911 </div>
912 </div>
913
</header>
914
915
916 <div class="main">
917 <!-- <imgae slider start> -->
918 <div class="slider">
919 <div class="slides">
920
<!-- radio button start --> <input type="radio"
921
name="radio-btn" id="radio1">
922
<input type="radio" name="radio-btn" id="radio2">
923
<input type="radio" name="radio-btn" id="radio3">
924
<input type="radio" name="radio-btn" id="radio4">
925
<!-- radio button ends --> <!-- slide images
926
start --> <div class="slide first">
927
928
<img src="./images/[Link]" alt="error">
</div>
<div class="slide">
<img src="./images/ad-banner-template-for-kids-clothes-store-market-vector-
[Link]" alt="error">
6/3/24, 11:24 AM [Link]
929 </div>
930 <div class="slide">
931 <img src="./images/kids-fashion-on-discounted-sale-poster-design-template-
ecc658ec6a95798b154a1d780319f3c2_screen.jpg" alt="error">
932 </div>
933 <div class="slide">
934 <img src="./images/Summer_Blues_Banner_OVRLYS_Desktop_5.webp" alt="error">
935 </div>
936 <!-- slide images ends -->
937 <!-- auto navigation start -->
938 <div class="navigation-auto">
939 <div class="auto-btn1"></div>
940 <div class="auto-btn2"></div>
941 <div class="auto-btn3"></div>
942 <div class="auto-btn4"></div>
943 </div>
944 <!-- auto navigation ends -->
945 </div>
946 <!--
<div manual navigation start -->
class="navigation-manual">
947
948 <label for="radio1" class="manual-btn"></label>
949
<label for="radio2" class="manual-btn"></label>
950
951 <label for="radio3" class="manual-btn"></label>
952 <label for="radio4" class="manual-btn"></label>
</div>
953
<!-- manual navigation end -->
954
</div>
955
<div>
956
<img id="side-image" src="./images/Black and White Modern Black Friday Sale [Link]"
alt="error">
957 </div>
958 </div>
959 <!-- <imgae slider end> -->
960 <div class="register-now">
961 <a href="#">
962 <img src="[Link]
alt="error">
963 </a>
964 </div>
965 <div class="shopByRoom">
966 <h1>Starting ₹ 99 to 20% Cashback on First Order / Beauty Makeup</h1>
967 <div class="Rooms">
968 <div>
969 <a href="./[Link]">
970 <video width="1000" height="500" controls>
971 <source src="./images/BEAUTY PRODUCT ADVERTISEMENT _ MOTION GRAPHIC
VIDEO.mp4" type="video/mp4">
972 <source src="./images/BEAUTY PRODUCT ADVERTISEMENT _ MOTION GRAPHIC
VIDEO.mp4" type="video/ogg">
973 <audio src="silent"></audio>
974 Your browser does not support the video tag.
975
976 </video>
977 <h1>Up to 60% off | Summer must haves from emerging brands</h1>
978 <h1>Up to 60% off | Styles for women</h1>
979
980
6/3/24, 11:24 AM [Link]
981 </div>
982
983 - <div>
984 <a href="./[Link]">
985 <img src="./images/waterproof-makeup-combo-kit-15pcs-beauty-for-women-high-original-
[Link]" alt="error">
986 <h3>NOY Waterproof Makeup Combo Kit 15Pcs Beauty For Women High Pigmentation NO#601 (15
Items in the set)</h3>
987 <p> ₹299 with 85% off </p>
988 <img src="./images/must-have-makeup-set-fair-6-8906074713742-iba-original-
[Link]" alt="error">
989 <h3>Iba MUST HAVE Makeup Set (Fair) (6 Items in the set)</h3>
990 <p>₹2,026</p>
991
992 </a>
993 </div>
994 <div>
995 <a href="./[Link]">
996 <img src="./images/51YJxVubf1L._AC_UL320_.jpg" alt="error">
997 <img src="./images/15-2in1-volumizing-and-lengthening-long-lasting-mascara-mars-
[Link]" alt="error">
998 <h3>MARS 2in1 Volumizing and Lengthening Long Lasting Mascara 15 ml (Black)</h3>
999 <p>₹246</p>
1000 <p></p>
1001 </a>
1002 </div>
1003 <div>
1004 <a href="./[Link]">
1005 <img src="./images/[Link]" alt="error" width="50%" height="100%">
1006
1007
1008
1009 </a>
1010 </div>
1011 </div>
1012 </div>
1013 <div class="fryDeals">
1014 <h1>What Heavy Weight Textured T- shirts </h1>
1015 <div class="fryDeals-cards">
1016
<div>
1017
<a href="#">
1018 <img src="./images/Summer_Blues_Banner_OVRLYS_Desktop_5.webp" alt="error">
1019
<h3>For ₹269 at 73% off</h3>
1020 <p id="gray">Set of 5 Cushion Covers</p>
1021 </a>
1022
</div>
<div>
1023
1024
1025 <a href="#">
<img src="./images/BeigeChampionPhoto_7.webp" alt="error">
<h4>Textured
<h3>For Champion
₹ 1,599 at 12%Arc Oversized Fit T-shirt</h4>
off</h3>
1026 <p id="gray"> </p>
</a>
1027
1028
1029
1030
1031 </div>
<div>
1032
1033 <a href="#">
<img src="./images/GreyDragonPhoto_9.webp" alt="error">
6/3/24, 11:24 AM [Link]
1034 <h4>Textured Warrior Arc Oversized Fit T-shirt </h4>
1035 <h3>For ₹1,599 at 10% Off</h3>
1036 <p id="gray"></p>
1037 </a>
1038 </div>
1039 <div>
1040
<a href="#">
1041
<img src="./images/[Link]" alt="error">
1042
1043 <h4>Ultra Soft Relaxed Fit Phoenix T-shirt</h4>
1044 <h3>For ₹999 at 10% off</h3>
1045
1046 <p id="gray"></p>
1047 </a>
1048 </div>
1049 </div>
1050 </div>
1051
1052 <div class="trends">
1053
<h1>Shop by Top Brand</h1>
1054
1055 <h2>Up to 75% off | Headphones & Mobile & Tv & Smartwatches & more</h2>
1056 <div class="trends-cards">
1057 <div>
1058 <a href="./[Link]">
1059 <img src="./images/[Link]" alt="error">
1060 <h2>vivo V30e 5G with 6.78″ curved AMOLED screen, 50MP eye AF front camera,</h2>
1061 <p id="gray"> Starting ₹30,0000 wth 10% off </p>
1062 </a>
1063 </div>
1064 <div>
1065
<a href="#">
<img src="./images/OnePlus_Nord_CE_3_5G_580x675.png" alt="error">
1066 <h3>OnePlus Nord CE 3 Lite 5G (Pastel Lime, 8GB RAM, 128GB Storage) </h3>
1067 <p id="gray"> Starting ₹17,999 </p>
1068 </a>
1069
1070
1071 </div>
1072 <div>
1073 <a href="#">
1074 <img src="./images/[Link]" alt="error">
1075 <h2>Apple iPhone 12 Pro Max </h2>
1076 <p id="gray"> Starting ₹90,000 with 10% off </p>
1077 </a>
1078
</div>
1079
1080 </div>
1081 </div>
<div class="new-Arrivals">
1082
1083 <h1>Electronics Gadgets</h1>
1084 <div class="new-arrivals-cards">
1085 <div>
1086 <a href="#">
1087 <img src="./images/[Link]" alt="error">
<h3>The
<p Avylis Collection</h3>
id="gray">25+ Options </p>
1088 <p id="gray">Starting ₹3499</p>
1089

</a>
</div>
<div>
6/3/24, 11:24 AM [Link]
1090 <a href="#">
1091 <img src="./images/[Link]" alt="error">
1092 <h3>Vibrant Gift Sets</h3>
1093 <p id="gray">120+ Options</p>
1094 <p id="gray">Starting ₹499</p>
1095
</a>
1096
</div>
<div>
1097
1098
1099 <a href="#">
1100 <img src="./images/[Link]"
<h2>Xiaomi Mi TV 4A alt="error">
Launched In India At Rs. 13999 | iGyaan Network</h2>
<p
<p id="gray">500+ Options</p>
id="gray">Starting ₹10,000</p>
1101
1102
1103
1104 </a>
1105 </div>
1106
<div>
1107 <a href="#">
1108
<img src="./images/[Link]" alt="error">
1109
<h3>Spacious Storage Beds</h3>
1110
1111 <p id="gray">45+ Options</p>
<p id="gray">Starting ₹15799</p>
1112
1113 </a>
1114 </div>
1115 </div>
1116 </div>
1117 <div class="getSpringReady">
1118 <h1>Shop deals in top categories</h1>
1119 <div class="getSpringReady-card">
1120 <div>
<a href="#">
<img src="./images/shoes-craze-sale-facebook-ad-design-template-
b1d1738fd5e9e0f6e3152ec502a1c2e1_screen.jpg" alt="error">
1121 </a>
1122 </div>
1123 <div>
1124 <a href="#">
1125 <img src="./images/book-display-for-hardback-and-printed-book-covers-
webp_orig.webp" alt="error">
1126 </a>
1127 </div>
1128 <div>
1129 <a href="#">
1130 <img src="./images/air-conditioner-ads-promotion-template-for-fa-design-
6b41823d588cff52004b4b751cf26c0c_screen.jpg" alt="error">
1131 </a>
1132 </div>
1133 </div>
1134 </div>
1135 <div class="top-brands">
1136 <h1>Home& Kitchen Essentials
1137 </h1>
1138 <div class="brand-card">
1139 <div>
1140 <a href="#">
1141 <img src="./images/medium-black-gold-line-wallpaper-for-wall-waterproof-sticker-
[Link]" alt="error">
6/3/24, 11:24 AM [Link]
1142 <h2>FOKRIM 300 cm Black gold line wallpaper for wall Waterproof sticker for home,
office 45x300cm Self Adhesive Sticker (Pack of 1)</h2>
1143 <p id="gray">Special price ₹149 with 85% off
1144 </p>
1145 </a>
1146 </div>
1147 <div>
1148 <a href="./[Link]">
<img src="
1149
[Link] alt="error">
1150 <h3>Popular for Recliners</h3>
1151 <p id="gray">45+ Options</p>
1152 </a>
1153 </div>
1154 <div>
1155 <a href="#">
1156 <img src="
[Link] alt="error">
1157 <h3>Popular For Lamps</h3>
1158 <p id="gray">480+ Options</p>
1159 </a>
1160 </div>
1161 <div>
1162 <a href="./[Link]">
1163 <img src="./images/1000-botmultp6-botmultp6-flipkart-smartbuy-original-
[Link]" alt="error">
1164 <h2> SmartBuy Designer Mosaic Bottle - 1000ml - PET (Pack of 6, Multicolor,
Plastic)</h2>
1165 <h3>₹239 with 80% Off</h3>
1166 <p id="gray">80+ Options </p>
1167 </a>
1168 </div>
1169 </div>
1170 </div>
1171 <div class="inspirationFromBlog">
1172
<h1>Trending deals</h1>
1173
<div class="inspiration-card">
1174
<div>
1175
1176 <a href="#">
1177 <img src="./images/-[Link]" alt="error">
1178 <h2>Happilo 100% Natural Premium Whole(value pack) Cashews (450 g)</h2>
1179 <p id="gray">₹449 </p>
1180 </a>
1181 </div>
1182 <div>
1183 <a href="#">
<img src="./images/-[Link]"
<h2>Sunfeast alt="error">
1184 <p id="gray">Dark
</a> ₹168Fantasy
</p> Choco Fills Cream Filled (300 g)</h2>
1185
1186
1187
1188 </div>
1189 <div>
1190 <a href="#">
1191 <img src="./images/-[Link]" alt="error">
<h2>Kellogg's Corn Flakes Original, Power of Energy, Protein, Iron, Calcium &
Vitamins Pouch (1200 g)</h2>
1192 <p id="gray" >Special price ₹344</p>
6/3/24, 11:24 AM [Link]
1193 </a>
1194 </div>
1195 <div>
1196 <a href="#">
1197 <img src="./images/-[Link]" alt="error">
1198 <h2>MYFITNESS Chocolate Peanut Butter (Crunchy) 510 g</h2>
1199 <p id="gray">₹269</p>
1200 </a>
1201
1202 </div>
1203 </div>
1204 </div>
1205 <div class="customers-speak">
1206 <h1>Customers Speak</h1>
1207 <div class="customers-card">
1208 <div>
<img src="./images/[Link]" alt="
error">
1209 <h2>2Mech Plastic Grocery Container - 250 ml, 350 ml, 650 ml, 1200 ml (Pack of
24, Silver)</h2>
1210
1211 <p>₹498</p>
1212 <p id="gray-small">Visakhapatnam</p>
1213 </div>
1214 <div>
1215 <img src="./images/360-revolving-spice-rack-masala-rack-spice-box-masala-box-
[Link]" alt="error">
1216 <h2>MAHADEV ENTERPRISE Spice Set Plastic (1 Piece)</h2>
1217 <p>₹229</p>
1218
1219 <p id="gray-small">Secunderabad</p>
1220 </div>
1221 <div>
1222 <img src="./images/5-storage-food-5-3d-metro-super-store-original-
[Link]" alt="error">
1223 <h2>3D METRO SUPER STORE Plastic Fridge Container - 1800 ml (Pack of 5, Clear)<
/h2>
1224
1225 <p>₹229</p>
1226 <p id="gray-small">Hyderabad</p>
1227 </div>
1228 </div>
1229 </div>
1230 <div class="help">
1231 <h1>Need Help Buying?</h1>
1232 <div class="help-card">
1233 <div>
1234 <a href="#">
1235 <img src="./images/cute-funny-face-dancing-clown-joker-toy-smartcraft-original-
[Link]" alt="error">
1236 <h3>Smartcraft Cute Funny-Face Dancing Clown Joker Toy (Multicolor)</h3>
1237 <p>₹699</p>
1238 </a>
1239 </div>
1240 <div>
1241 <a href="#">
<img src="./images/soft-toys-teddy-bear-for-wearing-a-happy-valentines-day-t-
1242
[Link]" alt="error">
6/3/24, 11:24 AM [Link]
1243 <h3>Hug 'n' Feel SOFT TOYS Teddy Bear for Wearing a Happy valentines day T-Shirt 6
feet Red - 183 cm (Red)</h3>
1244 <p>₹2,399</p>
1245 </a>
1246 </div>
1247 <div>
1248 <a href="#">
<img src="./images/61V+8wj+ESL._SX679_.jpg" alt="error">
1249 <h3>MY FAV Printed Bag Backpack/Casual School College Bag/Sports Backpack for
1250
Boys/Girls, Outdoor Travel Lightweight Bag (30 L)</h3>
1251 <p> ₹997</p>
1252 </a>
1253 </div>
1254 <div>
1255 <a href="#">
1256 <img src="./images/-[Link]" alt="error">
1257 <h3>Garnier Men Acno Fight, Anti Pimple with Salicylic Acid and Herba Repair Face
Wash (300 g)</h3>
1258 <h4>₹416</h4>
1259 </a>
1260 </div>
1261 <div>
1262 <a href="#">
1263 <img src="./images/[Link]"
alt="error">
1264
<h3>MUUCHSTAC Ocean for Men, Fights Acne & Pimple, Skin Brightening, All Skin
Types Face Wash (100 ml)</h3>
1265 <p>₹199</p>
1266 </a>
1267 </div>
1268 <div>
1269 <a href="#">
1270 <img src="./images/-[Link]" alt="error">
1271 <h3>Mamaearth Ubtan Natural forDry Skin with Turmeric & Saffron for Tan removal
and brightning Face Wash (100 ml)</h3>
1272 <p> ₹206</p>
1273 </a>
1274 </div>
1275 </div>
1276 </div>
1277
1278 <div class="footer">
1279 <div class="top">
1280 <div>
1281 <h3>Useful Links</h3>
1282 <a href="#"><p>About Us</p></a>
1283 <a href="#"><p>Our Blog</p></a>
1284 <a href="#"><p>Careers</p></a>
1285 <a href="#"><p>Corporate Governance</p></a>
1286
1287 <a href="#"><p>Find A Studio</p></a>
1288 <a href="#"><p>Gift Cards</p></a>
1289 <a href="#"><p>Brands</p></a>
1290 <a href="#"><p>Customer Reviews</p></a>
1291
</div>
1292
1293
<div>
6/3/24, 11:24 AM [Link]
1294 <h3>Need
href="#"> Help?</h3> <a
1295 <p>Contact Us</p></a> <a href="#">
1296 <p>Returns & Refund</p></a>
1297 <a href="#"><p>Track Your Order</p></a>
1298 <a href="#"><p>FAQs</p></a> <a
1299 href="#"><p>Buy on Phone</p></a>
1300
</div>
<div>
1301
1302
<a href="[Link]
img src="./images/[Link]" alt="error"></a>
1303
1304 </div>
1305 </div>
1306 <div class="bottom">
1307 <div>
1308 <h3>Popular Categories</h3>
1309 <a href="#">
1310 <p>Apparel and Accessories: Clothing, footwear, jewelry, bags, hats, and other
fashion accessories.
1311 Electronics: Gadgets, smartphones, laptops, tablets, cameras, headphones, and other electronic
devices.
1312 Home and Kitchen: Furniture, home decor, bedding, kitchen appliances, cookware, and dining
essentials.
1313 Beauty and Personal Care: Skincare products, makeup, haircare items, fragrances, and grooming
essentials.
1314 Health and Wellness: Vitamins, supplements, fitness equipment, yoga mats, and other health-
related products.
1315 Toys and Games: Toys, games, puzzles, outdoor play equipment, and educational toys for
children.
1316 Books and Stationery: Books, e-books, stationery items, office supplies, and writing
instruments.
1317 Sports and Outdoors: Sports gear, activewear, outdoor equipment, camping gear, and fitness
accessories.
1318
Automotive: Car accessories, tools, maintenance products, and automotive parts.
1319 Groceries and Household Essentials: Food items, beverages, cleaning supplies, pet care
products, and< /hao>usehold essentials.</p>
1320
1321 </div>
1322 <div>
1323 <h3>Popular Brands</h3>
1324 <a href="#">
1325 <p>Nike
1326 Adidas H&M
1327 Zara
1328 Levi's
1329 Calvin Klein
1330 Gucci
1331 Louis Vuitton
1332 Tommy Hilfiger
1333 Ralph Lauren
1334 Apple
1335 Samsung Sony
1336 LG
Bose Panasonic
1337
Microsoft
1338
1339
1340
1341
6/3/24, 11:24 AM [Link]
1342 Dell HP Canon
1343 IKEA
1344 Dyson Philips
1345 KitchenAid
1346 Cuisinart
1347 Instant Pot
1348 Shark
1349 Ninja
OXO
1350 Pyrex L'Oréal
1351 Maybelline
1352 Olay
1353 Neutrogena
1354 Nivea
Dove
1355 MAC Cosmetics
1356 Estée Lauder
1357 Clinique
1358 Lancôme</p>
1359
1360
1361
1362
1363
1364
1365
1366
1367 </a>
1368 </div>
1369 <div>
1370 <h3>Cities we deliver to</h3>
<a href="#">
<p>Bengaluru, Mumbai, Navi Mumbai, Delhi, Hyderabad, Pune, Chennai, Gurgaon,
Kolkata, Noida, Goa, Ghaziabad, Ahmedabad, Coimbatore, Faridabad, Jaipur, Lucknow, Kochi,
Visakhapatnam, Chandigarh, Vadodara, Nagpur, Thiruvananthapuram, Indore, Mysore, Bhopal,
Surat, Jalandhar, Patna, Ludhiana, Nashik, Madurai, Kanpur, Aurangabad and many more</p>
1371 </a>
1372 </div>
1373 </div>
1374 <hr>
1375 <div class="accept">
1376 <div>
1377 <h3>We accept</h3>
1378 <a href="#">
1379 <img src="./images/[Link]" alt="error">
1380 </a>
1381
</div>
1382
1383 <div>
1384 <h3>Like
<a what you see? You'll like us even more here</h3>
href="#">
1385 <img
</a> src="./images/[Link]" alt="error">
1386
1387
1388 </div>
1389 </div>
1390 <hr>
<div class="ending">
1391
1392
<div>
1393
1394
1395 <a href="#"><p>Buy In Bulk</p></a>
<a href="#"><p>Write A Testimonial</p></a>
</div>
6/3/24, 11:24 AM [Link]
1396 <div>
1397 <a href="#"><p>Whitehat</p></a> <a
1398 href="#"><p>Site Map</p></a>
1399 <a href="#"><p>Terms Of Use</p></a>
1400 <a href="#"><p>Privacy Policy</p></a> <a
1401 href="#"><p>Your Data & Security</p></a> <a
1402 href="#"><p>Grievance Redressal</p></a>
1403
</div>
1404
1405 </div>
1406 </div>
1407 </body>
1408 <script>
1409 let counter=1;
1410 setInterval(function(){
1411 [Link]("radio" + counter).checked = true;
1412 counter++;
1413 if(counter > 4){
1414
counter = 1;
1415
}
1416
1417 },2500);
</script>
</html>
style sheet
1 body{
2 margin: 0px;
3 padding: 0px;
4 font-family: Manrope, sans-serif;
5 }
6 #nav-left{
7 display:flex;
8 gap:20px;
9 margin-left: 100px;
10 font-size: 15px;
11
12 }
13 #nav-left a:hover{
14
color: red
15
cursor: pointer;
16 }
17
18
19 #nav-right{
20 display:flex;
21 gap:20px;
22 margin-right: 100px;
23 font-size: 14px;
24
25
26 }
27 #searchbar input{
28
width:500px;
background-color: rgb(175, 235, 235);
29
}
30
31
32 .navbar-1{
33 width:100%;
34 height: 40px;
35 display:flex;
36 align-items: center;
37 margin: auto;
38 justify-content: space-between;
39 box-sizing: border-box;
40 background-color: #F5F5F5;
41
42
43 }
44 .navbar-1 a{
45 color: #362712;
46
47 } text-decoration: none;
#nav-right a:nth-
48 child(2){
49
50
51
52 color: #FF775A;
53
text-decoration: underline;
6/3/24, 11:37 AM [Link]
54
55 }
56 #edit_1{
57 width:17px;
58 height:17px;
59
60
61
}
62
63 .nav-middle{
64 width:100%;
65 height: 80px; display:flex;
66 box-sizing: border-box;
67 justify-content: space-between;
68 align-items: center; padding-
69 left: 100px;
70 padding-right: 100px;
71
72
73
74
75
76 }
77
78 .nav-middle > div > a > img{
79 width:100%;
80 height:75px;
81
82
83 }
84
85
form{
86
height:40px;
87
display: flex;
88
align-items: center;
89
90 background-color: #F5F5F5;
91
92
93 } form > input{
94 width: 800px;
95 border: none;
96 font-size: 17px;
97
background-color:
98
#F5F5F5;
99
100
101
102 }
103 #images img{
104 width:30px;
105 height:30px;
106 margin-right: 10px;
107
108
109
}
.navbar-2{
width:100%;
height:40px;
6/3/24, 11:37 AM [Link]
110 display: flex;
111 justify-content: space-between;
112 align-items: center;
113 border: 2px solid #F5F5F5;
114 padding-left: 100px;
115 padding-right: 100px;
116 box-sizing: border-box;
117
118
119
120 }
121 .navbar-2 > div > a{
122 text-decoration: none;
123 color: black
124 font-size: 15px;
125 }
126
127
128 .main{
129 width: 100%;
130 height:500px;
131 display: flex;
132 margin: auto;
133 gap:20px;
134 padding-left: 100px;
135 padding-right: 100px;
136 box-sizing: border-box;
137
138
139
140
141 }
142
143 #side-image{
144 width:100%;
145 height:500px;
146
}
147
.slider{
148
149 width:100%;
150 height:500px;
151 /* border-radius: 10px; */
152 overflow:hidden;
153
154
155 }
156
.slides{
157 width:500%;
158
height:500px;
159
display:flex;
160 }
161
.slides input{
162
163 display:none;
164 }
165 .slide{
width:20%;
transition:2s;
}
.slide img{
/* width: 900px; */
6/3/24, 11:37 AM [Link]
166 height:500px;
167 }
168
169 /* css for manual slide navigation */
170
.navigation-manual{
171
position: absolute;
172
width:800px;
173
margin-top:-40px;
174
175 display:flex;
176 justify-content: center;
177
178
179
180 }
181 .manual-btn{
182 border : 2px solid gray;
183 padding: 5px;
184 border-radius: 10px;
185 cursor: pointer;
186 transition: 1s;
187 } .manual-btn:not(:last-
188
child){
189
190 margin-right:40px;
191 } .manual-
192 btn:hover{
193 background: white
194 }
195 #radio1:checked ~ .first{
196 margin-left: 0;
197 }
198 #radio2:checked ~ .first{
199
200 margin-left: -20%;
201 }
202 #radio3:checked ~ .first{
203 margin-left: -40%;
204 }
205 #radio4:checked ~ .first{
206 margin-left: -60%;
207 }
208 /* css for automatic navigation */
209 .navigation-auto{
210
211 position: absolute;
212 display: flex;
213 width:800px;
214 justify-content: center;
215 margin-top: 460px;
216
217
218 }
219 .navigation-auto div{
220
border:2px solid gray;
221
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not(:last-child){
6/3/24, 11:37 AM [Link]
222 margin-right:40px;
223 }
224
225 #radio1:checked ~ .navigation-auto .auto-btn1{
226
background: white
227 }
228
#radio2:checked ~ .navigation-auto .auto-btn2{
229
230 background: white
231 }
232 #radio3:checked ~ .navigation-auto .auto-btn3{
233 background: white
234 }
235 #radio4:checked ~ .navigation-auto .auto-btn4{
236 background: white
237 }
238 .register-now{
239 width: 100%;
240
padding-left: 100px;
241 padding-right: 100px;
242
box-sizing: border-box;
243
margin-top: 20px;
244
245 }
246 .register-now > a > img{
247 width:100%;
248 }
249
.shopByRoom>h1{
250 text-align: center;
251 margin-top: 20px;
252
margin-bottom: 20px;
253
}
254
.Rooms{
255
256 width: 100%;
257 padding-left: 100px;
258 padding-right: 100px;
259 display: grid;
260 grid-template-columns: repeat(4,1fr);
261 box-sizing: border-box;
262 gap:10px;
263
264
265
266 }
267 .Rooms > div > a > img{
268 width: 100%;
269 border-radius: 3px;
270 }
271 .Rooms > div > a{
272 text-decoration: none;
273 color: black
274 }
275 .fryDeals > h1{
276
margin-top: 20px;
margin-bottom: 20px;
margin-left: 100px;
}
.fryDeals-cards{
6/3/24, 11:37 AM [Link]
277 width: 100%;
278 padding-left: 100px;
279 padding-right: 100px;
280 display: grid;
281 grid-template-columns: repeat(4,1fr);
282 box-sizing: border-box;
283 gap:10px;
284 } .fryDeals-cards > div > a >
285 img{
286
287 width: 100%;
288 border-radius: 3px;
289 } .fryDeals-cards > div >
290 a{ text-decoration: none;
291
292 color: black
293 }
294 #gray{
295 #888888;
color:
296
297 font-size: 16px;
298 }
299 .inspire{
300 width: 60px;
301 padding-left: 25px;
302 padding-right: 25px;
303 box-sizing: border-box;
304 display: flex;
305 justify-content: space-between;
306 }
307 .inspire a{
308
309 text-decoration: none;
310 }
311 #orange{
312 color: #FF7035;
313 text-decoration: none;
314 }
315 .trends{
316 padding-left: 100px;
317 margin-top: 30px;
318 }
319 .trends-cards{
320
321 width: 100%;
padding-right: 100px;
322
323 display: grid;
grid-template-columns: repeat(3,1fr);
324
box-sizing: border-box;
325
326 gap:10px;
327 }
328 .trends-cards > div > a > img{
329 width:100%;
330
border-radius: 3px;
331 }
332 .trends-cards > div > a{
text-decoration: none;
color: black
}
.new-Arrivals{
6/3/24, 11:37 AM [Link]
333 margin-top: 30px;
334 padding-left: 100px;
335 }
336 .new-arrivals-cards{
337 width: 100%;
338 padding-right: 100px;
339 display: grid;
340 grid-template-columns: repeat(4,1fr);
341 box-sizing: border-box;
342 gap:10px;
343 } .new-arrivals-cards > div > a >
344 img{
345
346 width:100%;
347 border-radius: 3px;
348 }
349 .new-arrivals-cards > div > a{
350 text-decoration: none;
351
color: black
352
}
353
354 .getSpringReady > h1{
355 padding-left: 100px;
356 margin-top: 20px;
357 }
358 .getSpringReady-card{
359 width:100%;
360 padding-left: 100px;
361 padding-right: 100px;
362 display: grid;
363
grid-template-columns: repeat(3,1fr);
364
gap:10px;
365
366 box-sizing: border-box;
367 }
368 .getSpringReady-card > div > a > img{
369 width: 100%;
370 border-radius: 3px;
371 }
372 .top-brands > h1{
373
margin-top: 30px;
374
padding-left: 100px;
375
}
376
.brand-card{
377
378 width:100%;
379 padding-left: 100px;
380 padding-right: 100px;
381 display: grid;
382 grid-template-columns: repeat(4,1fr);
383 gap:10px;
384 box-sizing: border-box;
385 }
386 .brand-card > div > a > img{
387
width: 100%;
388
border-radius: 3px;
}
.brand-card > div > a{
text-decoration: none;
color: black
6/3/24, 11:37 AM [Link]
389 }
390 .inspirationFromBlog > h1{
391 margin-top: 30px;
392 padding-left: 100px;
393 } .inspiration-
394 card{
395
width:100%;
396
padding-left: 100px;
397
398 padding-right: 100px;
399 display: grid;
400 grid-template-columns: repeat(4,1fr);
401 gap:10px;
402 box-sizing: border-box;
403 } .inspiration-card > div > a >
404 img{
405 width: 100%;
406 border-radius: 3px;
407 } .inspiration-card > div >
408 a{
409
410 text-decoration: none;
411 }
.customers-speak > h1{
412
413 margin-top: 30px;
414 padding-left: 100px;
415 } .customers-
416 card{
417 width:100%;
418 padding-left: 100px;
419 padding-right: 100px;
420 display: grid;
421 grid-template-columns: repeat(3,1fr);
422 gap:10px;
423 box-sizing: border-box;
424 }
425 .customers-card > div > img{
426
427 width: 100%;
428 border-radius: 3px;
429 }
430 .customers-card > div > p:nth-child(2){
431 font-size: 14px;
432
text-align:justify;
433
margin-bottom: 30px;
434
}
435
.customers-card > div > p:nth-child(3){
436
437 line-height: 0%;
438 font-size: 14px;
439 } #gray-
440 small{
441 color: #888888;
442 font-size: 14px;
443
}
444
.help > h1{
margin-top: 30px;
padding-left: 100px;
}
.help-card{
6/3/24, 11:37 AM [Link]
445 width:100%;
446 padding-left: 100px;
447 padding-right: 100px;
448 display: grid;
449 grid-template-columns: repeat(6,1fr);
450 gap:10px;
451 box-sizing: border-box;
452 } .help-card > div > a >
453 img{
454
455 width: 100%;
456 border-radius: 3px;
457 } .help-card > div >
458 a{
459 text-decoration: none;
460 color: black
461 }
462 .help-card > div > a > p{
463
font-size: 14px;
464
}
465
466 .recently-viewed > h1{
467 margin-top: 30px;
468 padding-left: 100px;
469 }
470 .recently-viewed-card{
471 width:100%;
472 padding-left: 100px;
473 padding-right: 100px;
474 display: grid;
475 grid-template-columns: repeat(6,1fr);
476 gap:10px;
477
box-sizing: border-box;
478
479 }
480 .recently-viewed-card > div > a > img{
481 width: 100%;
482 border-radius: 3px;
483
}
484
.recently-viewed-card > div > a{
485 text-decoration: none;
486
487 color: black
font-size: 14px;
488
}
489 #price{
490
491 color: #FF7035;
492 }
.footer{
493
width: 100%;
494
495 color: #4b96e2;
padding-left: 100px;
496
padding-right: 100px;
497 box-sizing: border-box;
498
499 background-color: #F3F5F7;
}
.top{
grid-template-columns: repeat(4,1fr);
display: grid;
6/3/24, 11:37 AM [Link]
500 gap: 20px;
501 padding-top: 40px;
502 padding-bottom: 30px;
503
504 }
505 .bottom{
506
grid-template-columns: repeat(3,1fr);
507
display: grid;
508
509 gap: 20px;
510 padding-bottom: 30px;
511 } .top > div
512 >h3{
513 color: black
514 font-size: 13px;
515 }
516 .top > div > a > p{
517 color: #888888;
518 text-decoration: none;
519 font-size: 13px;
520
521 }
522 .top > div > a{
523 text-decoration: none;
524 }
525 .bottom > div >h3{
526 color: black
527 font-size: 13px;
528 }
529 .bottom > div > a > p{
530 color: #888888;
531 font-size: 13px;
532 }
533 .bottom > div > a{
534
text-decoration: none;
535 }
536 .accept{
537
display: flex;
538
justify-content: space-around;
539 padding-top: 20px;
540
padding-bottom: 20px;
541
}
542 .accept > div >h3{
543
544 color: black
545 font-size: 14px;
546 } .accept > div > a >
547 img{
548 width:80%;
549 }
550 .ending{
551 display: flex;
552 justify-content: space-between;
553 margin-top: 30px;
554 padding-bottom: 20px;
}
.ending > div{
display: flex;
6/3/24, 11:37 AM [Link]
555 gap:20px;
556 } .ending > div > a
557 > p{
558 text-decoration: none;
559
color: #888888;
560 font-size: 14px;
561 }
562 .ending > div > a{
563
564 text-decoration: none;
565 }
566 /* megaadropdown css */
567 header{
568 width:100%;
569 box-sizing: border-box;
570 }
571 .container{
572
573 width:98%;
574 /* display: flex; */
575 /* width:100%; */
576 position: relative;
577 margin:auto;
578 /* border:2px solid red; */
579 /* justify-content: space-evenly;
580 */
581 gap:20px;
582 }
583 nav>ul{
584
585
586 display:flex;
587 }
588 nav>ul>li{
589 padding:30px 20px;
590 list-style: none;
591 }
592 nav>ul>li a{
593
color: black
594
text-decoration: none;
595
596 margin-right: 10px;
597 }
598
599
600 .megamenu{
601 position: absolute;
602 top:120%;
603 opacity: 0;
604 visibility: hidden;
605 flex-wrap: wrap;
606
width:100%;
607 transition:0.1s;
608
display: flex;
609
left:0px;
610
box-shadow:0px 10px 2px 3px lightslategray ;
}
.navbar-2 div:hover .megamenu{

opacity: 1;
top:100%;
6/3/24, 11:37 AM [Link]
611 visibility: visible;
612 background-color: #F5F5F5;
613 }
614 .megamenuitems{
615 flex-basis: 10%;
616 height: auto;
617 margin:0.5%;
618
}
619
620
621 .megamenuitems h4{
622 font-size: 13px;
623 }
624 .megamenuitems h4:hover{
625 color: #FF7035;
626 cursor: pointer;
627
628 }
629 .megamenuitems p{
font-size: 13px;
630
text-align: left;
631
}
632
.megamenuitems p:hover{
633
color: #FF7035;
634
cursor: pointer;
635
636 }
637 .megamenuitems img{
638 width:100%;
639 margin-top: 15px;
640 }
641
642 /* media queries */
643
644 @media screen and (min-width:500px) and (max-width:1000px){
645 header{
646 display: none;
647 }
648 .main{
649 width: 100%;
650 height:500px;
651 display: flex;
652 flex-direction: column;
653 margin: auto;
654 box-sizing: border-box;
655 }
656 .Rooms{
657 width: 100%;
658
display: grid;
659 margin: auto;
660 grid-template-columns: repeat(2,1fr);
661 box-sizing: border-box;
662 gap:10px;
663 }
664 .fryDeals-cards{
665 width: 100%;
666 display: grid;
margin: auto;
grid-template-columns: repeat(2,1fr);
6/3/24, 11:37 AM [Link]
667 box-sizing: border-box;
668 gap:10px;
669 }
670 .trends-cards{
671 width: 100%;
672 display: grid;
673 margin: auto;
674 grid-template-columns: repeat(2,1fr);
675 gap:10px;
676
}
677
.new-arrivals-cards{
678
width: 100%;
679
display: grid;
680
grid-template-columns: repeat(2,1fr);
681
682 box-sizing: border-box;
683 gap:10px;
684 } .getSpringReady-
685 card{
686
width:100%;
687
688 display: grid;
689 grid-template-columns: repeat(2,1fr);
690 gap:10px;
691 box-sizing: border-box;
692 } .brand-
693 card{
694 width:100%;
695 display: grid;
696 grid-template-columns: repeat(2,1fr);
697 gap:10px;
698 box-sizing: border-box;
699 } .inspiration-
700 card{
701
702 width:100%;
703 display: grid;
704 grid-template-columns: repeat(2,1fr);
705 gap:10px;
706 box-sizing: border-box;
707 }
708 .customers-card{
709 width:100%;
710 display: grid;
711 grid-template-columns: repeat(2,1fr);
712 gap:10px;
713 box-sizing: border-box;
714 }
715 .help-card{
716
717 width:100%;
718 display: grid;
719 grid-template-columns: repeat(4,1fr);
720 gap:10px;
721 box-sizing: border-box;
722 }
}
@media screen and (min-width:100px) and (max-width:500px){

header{
display: none;
6/3/24, 11:37 AM [Link]
723 }
724 .main{
725 width: 100%;
726 height:500px;
727 display: flex;
728 flex-direction: column;
729 margin: auto;
730 box-sizing: border-box;
731
732 }
733 .Rooms{
734 width: 100%;
735 display: grid;
736 margin: auto;
737 grid-template-columns: repeat(1,1fr);
738 }
739 .fryDeals-cards{
740 width: 100%;
741 display: grid;
742 margin: auto;
743 grid-template-columns: repeat(1,1fr);
744 }
745
.trends-cards{
746
747 width: 100%;
748 display: grid;
749 margin: auto;
750 grid-template-columns: repeat(1,1fr);
751 }
752 .new-arrivals-cards{
753 width: 100%;
754 padding-right: 100px;
755 display: grid;
756 grid-template-columns: repeat(1,1fr);
757 box-sizing: border-box;
758 gap:10px;
759
}
760
761 .getSpringReady-card{
762 width:100%;
763 display: grid;
764 grid-template-columns: repeat(1,1fr);
765 gap:10px;
766 box-sizing: border-box;
767 }
768 .brand-card{
769
770 width:100%;
771 display: grid;
772 grid-template-columns: repeat(1,1fr);
773 gap:10px;
774 box-sizing: border-box;
775 }
776 .inspiration-card{
777 width:100%;
778
display: grid;
grid-template-columns: repeat(1,1fr);
gap:10px;
box-sizing: border-box;
}
6/3/24, 11:37 AM [Link]
779 .customers-card{
780 width:100%;
781 display: grid;
782 grid-template-columns: repeat(1,1fr);
783 gap:10px;
784 box-sizing: border-box;
785 } .help-
786 card{
787
788 width:100%;
789 display: grid;
790 grid-template-columns: repeat(2,1fr);
791 gap:10px;
792 box-sizing: border-box;
793 }
}
 loging page html
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>shopsmartilyLogin</title>
9 <link rel="website icon" type="png"
10
href="./images/logo [Link]">
11 </head>
12 <link rel="stylesheet" href="./src/[Link]">
13
14 <body>
15 <div id="login">
16 <div class="container">
17 <div class="leftSidePopUp">
18 <div class="whySide">
19 <h2>Why login?</h2>
20 <p> <img src="./images/[Link]" alt="">
21
22 Manage your orders</p>
23 <p><img src="./images/[Link]" alt="">Get
24 exclusive
25 offers</p>deals and
26
27 <p><img src="./images/[Link]"
28 alt="">Personalized
29 Recommendations</p>
30 </div>
31 </div>
32 <div class="rightSidePopUp">
33
<div class="loginPage">
34
35 <h1 id="timeBar">&times</h1>
36 <div class="userPanel">
37 <h3 id="loginH3"><a href="./[Link]">Login</a></h3>
38 <h3 id="signup"><a class="singup" href="./[Link]">Signup</a></h3>
39 <div class="animation hover"></div>
40 </div>
41 <form action="" id="loginForm">
42 <label for="mobile">Mobile Number</label>
43 <input type="text" name="mobile" id="mobileNo" placeholder="Enter Mobile Number" required>
<label
<input for="password">Password</label>
type="password" name="password" id="password" placeholder="Enter Password">
44 <a href="#" class="passwordForget">Forget Password</a>
<!-- <a href="#" class="passwordForget">Login Password</a> -->
45 <button id="btn"><a href="./[Link]" id="home">Login</a></button>
46
47
48
49
</form>
50
<div class="lines">
51
<div class="oneline"></div>
52
<p id="or">or</p>
53
<div class="twoline"></div>
54
</div>
55
<div class="socialink">

<a href="[Link] id="social"><img

src="data:image/png;base64,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"

56 Google</a>
57 <a href="[Link] id="social"><img
58 src="data:image/jpeg;base64,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
6/3/24, 11:57 AM [Link]
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

59 </div>
60 <div class="hr"></div>
61 <p id="pTaglast">By logging in you agree to our <a href="#">Terms & Conditions</a></p>
62
63
64 </div>
65 </div>
66 </div>
67 </div>
68
69 </body>
70
71 </html>
72
<script src="./script/[Link]"></script>
 loging page css
1 @import url('[Link]
display=swap'); @import url('[Link]
2 family=Roboto:ital,wght@0,100;0,300;0,400;1,100&
family=Source+Sans+Pro:ital,wght@0,300;0,400;1,200;1,300&display=swap');
3
4 /* pooja css -1sr */ * {
5
6 margin: 0;
7 padding: 0;
8 } font-family: 'Roboto', sans-serif;
9
10
11
#login {
12 background-image: url('[Link]');
13 background-repeat: no-repeat;
14 background-size: cover;
15 width: 100%;
16 height: 78vh;
17 background-attachment: fixed;
18 padding: 7% 0px;
19
20 }
21
22 #login .container {
23
width: 0px;
24 height: 550px;
25 background-color: burlywood
26 position: fixed;
27 display: flex;
28 margin-left: 250px;
29 /* border:2px solid red; */
30 }
31
32
33
.leftSidePopUp {
34
35 width: 500px;
36 /* background-color: black; */
37 padding: 1rem;
38 background-image: linear-gradient(to bottom right, rgb(88, 81, 77), white);
39
40 }
41
42 .leftSidePopUp .whySide {
43 margin: 40px 20px;
44 color: whitesmoke
45 }
46
47 .leftSidePopUp .whySide h2 {
48 margin: 5px 10px;
49 }
50
51 .leftSidePopUp .whySide p {
52 margin: 5px 10px;
}

localhost:50125/0bc36bbe-5f83-477e-b4a0-dd5f3567a493/ 1/4
6/3/24, 12:01 PM [Link]
53
54 .rightSidePopUp {
55 background-color: #f7f7f7;
56 width: 8503233px;
57 }
58
59
.rightSidePopUp .loginPage {
60
61 margin: 10px 5px;
62 }
63
64 .rightSidePopUp .loginPage h1 {
65 float: right;
66 }
67
68 .rightSidePopUp .loginPage #timeBar {
69 cursor: pointer;
70 color: rgb(216, 102, 27)
71
72 }
73
74
75 .rightSidePopUp .loginPage .userPanel {
76 display: flex;
77 color: rgb(112, 109, 109);
78
79 }
80
81 .rightSidePopUp .loginPage h3 {
82 margin: 35px 10px;
83 font-size: 20px;
84
}
85
86
87 .rightSidePopUp .loginPage h3 a {
88 text-decoration: none;
89 color: rgb(216, 102, 27)
90 }
91
92 .loginPage #loginH3 a {
93 border-bottom: 3px solid rgb(216, 102, 27)
94 }
95
96
.rightSidePopUp .loginPage label {
97
98 margin: 10px 35px;
99 color: rgb(112, 109, 109);
100
101 }
102
103 .rightSidePopUp .loginPage input {
104 width: 300px;
105 height: 25px;
106 margin: 5px 35px;
107 padding: 8px 20px;
108
outline: none;
}

.rightSidePopUp .loginPage #btn {

width: 343px;
6/3/24, 12:01 PM [Link]
109 height: 45px; margin: 30px 35px;
110 text-transform: uppercase;
111 font-size: 20px;
112 /* background-color: #00afae; */
113 background-color: rgb(216, 102, 27);
114 border: 1px solid rgb(216, 102, 27);
115
116
color: #f7f7f7;
117
118 outline:none;
119 }
120
121
122 #home{
123 color: white
124 text-decoration: none;;
125 }
126
127
128
129 .rightSidePopUp .loginPage a {
130 margin: 10px 35px;
131
}
132
133
.rightSidePopUp .loginPage #or {
134
135 margin: 0px 5px;
136 font-size: 20px;
137 }
138
139 .loginPage .lines {
140 margin: 3px 35px;
141 display: flex;
142 color: rgb(112, 109, 109);
143 }
144
145 .rightSidePopUp .loginPage .oneline {
146 border-bottom: 1px solid rgb(112, 109, 109);
147 width: 160px;
148 margin-bottom: 7px;
149 }
150
151 .rightSidePopUp .loginPage .twoline {
152 border-bottom: 1px solid rgb(112, 109, 109);
153 width: 160px;
154 margin-bottom: 7px;
155 }
156
157
.rightSidePopUp .loginPage #social {
158
border: 1px solid rgb(112, 109, 109);
159
padding: 8px 18px;
160
width: 100px;
161 /* height:100px; */
162 margin: 0px 35px;
163 text-decoration: none;
164 color: rgb(112, 109, 109);
}
6/3/24, 12:01 PM [Link]
165 .signup {
166 cursor: pointer;
167
168 }
169
170
.socialink {
171
margin: 30px 0px;
172
}
173
174
175 .hr {
176 border-bottom: 1px solid rgb(112, 109, 109);
177 padding: 1px 0px;
178 margin: 10px 35px;
179 }
180
181 .rightSidePopUp .loginPage #pTaglast {
182 margin: 10px 35px;
183
padding: 5px 0px;
184
color: rgb(112, 109, 109);
185
186 font-size: 15px;
187 }
188
189 .rightSidePopUp .loginPage #pTaglast a {
190 margin: 0px;
191 padding: 0px;
192 }
193
194 .socialink img {
195
width: 15px;
/* margin-top: px; */
}
login page js
1 let getData = [Link]([Link]("Data-User"));
2
3 let loginBtn = [Link]('btn');
4 let form = [Link]('loginForm');
5
6 [Link]('click', (e) => {
7 [Link]();
8 let userMobile = [Link];
9 let password = [Link];
10 if (userMobile==="1234567890" && password==="admin@123"){
11
alert("Welcome Back! Admin")
12
[Link]='[Link]'
13
}
14
else if (userMobile === [Link] && password === [Link])
15
{
16
17 alert("Login Successfully");
[Link] = '[Link]'
18
19 }
20
21 else
{
22
23
alert("Invaild Mobile Number or Password")
}
24 });
25
26 let bar = [Link]('timeBar');
27
28 [Link]('click', function () {
29 [Link] = '[Link]'
30 })
31
signup page html [Link]

1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>shopsmartily SignUp </title>
9 <link rel="website icon" type="png"
10
href="./images/logo [Link]">
11 </head>
12 <link rel="stylesheet" href="./src/[Link]">
13
14 <body>
15 <div id="login">
16 <div class="container">
17 <div class="leftSidePopUp">
18 <div class="whySide">
19 <h2>Why Sign Up?</h2>
20 <p><img src="[Link] alt="">Over 1.5 million satisfied
21
22 customers</p>
23 <p><img src="[Link] alt="">Earn HK cash on every
24 order</p>
25
26 <p><img src="[Link] alt="">Get personal fitness
27 expert advice</p>
28 </div>
29 </div>
30 <div class="rightSidePopUp">
31 <div class="loginPage">
32
<h1 id="timeBar">&times</h1>
33
<div class="userPanel">
34
35 <h3><a href="[Link]">Login</a></h3>
36 <h3 id="signup"><a href="[Link]">Signup</a></h3>
37 </div>
38 <form action="" id="loginForm" onsubmit="formSubmit(event)">
39 <label for="name">Full Name</label>
40 <input type="text" name="fullname" id="name" placeholder="Enter Your Full Name" required>
41 <label for="mobile">Mobile Number</label>
42 <input type="text" name="mobile" id="mobileNo" placeholder="Enter 10 digit no." required>
43 <label for="password">Password</label>
44 <input type="password" id="password" placeholder="Enter Password" autocomplete="on" required>
45 <label for="password">Re-Enter Password</label>
46 <input type="password" id="rePassword" placeholder="Re-Enter Password" autocomplete="on" required>
47 <a href="./[Link]"><button id="btn">Sign Up</button></a>
48
49 </form>
<div class="lines">
50
51 <div class="oneline"></div>
52 <p id="or">or</p>
<div class="twoline"></div>
</div>
<div class="socialink">
<a href="[Link] id="social"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJ
bSJIAAABTVBMVEX////qQzU0qFNChfT7vAU9g/RrnfY4gPScuvn7uQCxyPrpNCLqQTP7uAD/vQDpMh/pLRjqPS7pOir8wAAho0cqpUz1q6f96+rpOTf//PMco0T4xcL3vLj1raj+9fQwffPd6P1b
YrznZf8xDH+673/9d3913780Gf80nH94KD8zVX+6sD93ZL8xkf7wST/+OW4z/v935b+5Kun1rJvvoKVzqK738R9xI7T69lJr2PrTkHtWU7v
c2rtYkbuZSvygCP2nBfsVy/wcyf0jxz5rA7xfVN3o/bv9P7T4fxYkvWEvXCStPjOtx/o9eylsjJ5rkDfuRVJqk26tCpun/aPsDnG2PzQ5uA0n3s1pWE/jNc9lLc5nJA2o21BieI+kMY7mKURozbG
6XPbRBiHZVlpDilWJEsJ8RnXRxznbEuhF/WdBihQSkswUKAHR6HJ//8RSXYcXV6trF1p3Xmf6Uxn2oykJ/vu+9tdieMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIU9qq7+YLheLm0dFmsZCv
UTxYMMn6XkrE1JtKSq3FKdd8U1bD6F1JyqeFpB8di8ITWQmtN5EUT4vMh4jhF374nI5JKyCpPRGj+I0d9/NJa8xkq7Uxb306HDfOGO2rmyoJPxNF3Uxaxod6M3KBXiOJTeaGcVMkNYBjFJGt5Cgd
mSn6V4lLQeVzoT6QmmUhuJB2OpSaPHXCHJyQs++dgFqY5gaiP5bcYB1RFMfg5yLZpNhoES5fYoxgQTgoUNioIMxARXC7tZMo+AFUVVVcXnfNj9swwIlk7DHRaqopraP2g1DvcOG62DfWN3pM4+bp
N92H4yx0UY5r4h1ZKOJB8A5vt+E4AGFDsIgV9ZKM4WdSs5+BsFCi3BbWSxdVxd++5q8OIlmICYMzjBqVxEaYSxrbTImZEuVqGIsZJRX2aL5oJgcbgjhtZp5jspqqsFGiXD64zYiteS5cl9gQ3P4y
xYJB99s2sYVTnajIMcWtdsBSFb/0VldOknzAqt1eFMdnv/BQlsZ70E0ZkW5iSfZbyOspMvEmJwsmqTdEbGws/CTnujs1Q8MSGpDDzSnNetgUn2aeO9Q0L50cROVl3K67bYkNa+D7KcZ+uCm5FW2z
8CIbwrqdIx4qrZmxI+0k/HgE+8zccxwaTn6KFZYbfODbEhc9CYxrOGkJTcf37pB+PAJ8jDIXVx5hXeXQjMju0DO+hDNcfYl5lrbwUkfIjWoZ3UIbHuFdZW05HZPmcluF9VJHei89w6Tklwe0HqCL
O7sRqu0TFELdqwV6WLa3jy0RvGO4YrdAwZmoeUDJG9FHvhzXKVspOHtAzZWdPQMmRnXUor8dnZW9BatbGzP6S18mZmj09t98TMOU26TGkHzMxZG7VTDFLnpeyeRBE6814rL+OAMrxByxAVF5nsj5
J0c+K9MM7++MgV5rUfwVohpmE4TvI8bv28xMr/xY/QKuRu9RkzDpd/J3ceD93uajPAHf0XugtiNzhHTkNYO38KzRcw8eMVfQ24mouKQYqPxftdmhIQdjVQ7Ra57yoRu4o9jaWqFhAOdUCa+RHVSa
VrLA49oYE4amIajP0zmiuMSPRFRKuOu1HuwEq7GMoUoNjb0g4yXWjXH4NsV5LU++kFo+9IUFQ8RFakNpnGHa2hwGCRqHOrYhacVtFSutzKAc9LVixM19HDRrBGPqMRUUPVNSH8+TiSpBgHH3GZJA
GuUt+kAw9S4xpCjhvhGPK6HmIYq/0PbwMVYxtCjmsHNxuTXAVz119tG2Wtv/vzJnoI6e6bnGA0G2sYNRxHw08bD/pfSMWYGumYEd4gmo7DNno+Dvra9GK5v5dmL0qXY8nCKW2MfjpB0zq9GdlRHX
nL0ctH/ez5yMSzEsZ+xg9dPpQGqVfm/k0BwNet2KU8/6Uf7fGZVK7wv9GVTxBa0n1zWdH1Y6/X633+93hkNjaHXfX1Luv5t+lRprmxkzwJ2KDs8JqB/KvX3pU6lx16hJD38qhvw9+MRGjFFoo0tL
RXqjaMSGtduIPerdivTazTg2yjGcrgXQoRYaZmwkPYIW9HKR5z+8SdrOokdrLur8IGm3CQOeiqM+ZEXQbKkUKjVXifweiyRtjfQw5i6TdnIxqhCNDY2hCp1yid73hRMMedoaEyNS0cjkAI4ZDAmU
btjjlA/pq6dRJeaTMbfriMLtr9ypDXcpqBbv3RcjnzkL9/ebGwY+ehOhoNer12+9Kg3e5dDEajRWmbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsEP8D0E0L6iMccGMAAAAASUVORK5CYII="
<a href="[Link] id="social"><img src="data:image/jpeg;base64,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
6/3/24, 10:38 AM [Link]
t/O8L2Z+2JwN+lne8LfzvC9mfticBct+TG/4kOf3Mq2UIr+TN8PtRK/SwRuLnde95x5qJAjcXBkkCNxcAkCNxcAkWjwW5f5DKKmIa11ZWXYhdfecvArHCYeeMxUKUFeU5KMV0t2XcX3l2Cjl+Ap0
k1JPY01Zp9xus9d0KqqLZhtNVeiqtNwe0/O9xc22lOTSyHNp0ndw9KnJ/Sg9netj6uk1Fy6wnGcVKOp6UVKcHCTjLWjNxcxcXPR5M3FzFxcAzcXMXFwDNzeaFP5V4Tt/CzRXN5oS/lXhO38LNVf5
Fz2ZRl1TNswp0KS5U3a+6K3yfQlrMNqKbepGVFt3I7PgtybyuJnjJrkxvGnffNrlPuTt/M+Ys88eWYGGW4CnRpq0IKy53vbfS3dvrPYUy2Wl2iq57NnD908WWuzUFRpKHjx/dAABzHQAAAaDS7II
7U1tR+jDitPdElnFF16Ef8xFa1s8pFbu2tz7ua0vku3dk+yqP3Xqe5+T2+O8jLfY+1XaQXvLqvPcVGDMk4yaaaa1NPU01tTRG5ZyAuMgxcXAuMgxcXAuMm90I/WzCdv4WaG5vdB38rcJ2/hZqtHy
WgejSyTAeUqR/zFRcr92O1R6976eo0/B7og6DjjMTDl7aUH9HmlJc/Mt23ba1ilbypb1P8AppvRte/u4b9/Incn2PM/tmtOxbvXDmAAQhLAAAAAAAAAHEab6FxzWMq+HSjX+lHZGr+E+nfv51U1a
yfozWuM+zL3Oz6DVXLLGcZrOi709pBSg4O6SuZK4uRuLno8krm90Gfytwnb+GRoLm+0F/W7Cdv4ZGm0fKnweDNtD5seKxL4ABRi2AAAFX8MHzzCdip7Yld3LC4YvnmE7FT2xK7uXDJf0kOf3MrVv
ueT2RXWYbUVe9SMqLk7lrPItbstpZug+g3kHHE4yHK206Uvo80qi5+aO7fr1LcaI6E0cjSq1LVK/P8AQh2E9/7z19R15XbflXPTp0dW2W/h+6SbseT8y6dXXu3euHeAAQZKgAAAAAAAAAAAAAAHn
xeEp43Dyp1acZwltjJJpldaRcGet1MFP/t1H9yful4lmg6bPa6tnd9N8tjNNaz06qumue0/OOYYCtluI8nXpTpy5pK1+lPY10o8p+jsZg6WOoOFanCpB7pxUl695xubcGeExN5Yec6MuZ/nIeDfG
sPzn04SivRlvaO6delVozzJJ6Ht7nsOWnQqQqxzotaVj4F4AApZZgAACreGP57hOxU+9ErosrhXwlXHY/CxpUqlSShO6pxc2ryja6itWx+BzmXaAZljWr0Y0o89SSj/AEq8vUWzJ9anTskM+SWvW
8nDqb1yfdY7TLMroZXR4lCjCmt/FVm+09sn0s1V8s0YK6ms5+C8+nM90smVJaZu5eL8ittHuDWrXanjJ+Tj9SDUqj65bI9131FlZXltDKsKqVCnGEVuW1vnk9sn0s9oIK02ytaH770bloS/d7Jaj

54 </div>
55 <div class="hr"></div>
56 <p id="pTaglast">By logging in you agree to our <a href="#">Terms & Conditions</a></p>
57 </div>
58
</div>
59
60 </div>
61 </div>
62
63 </body>
64
65 </html>
<script src="./script/[Link]"></script>
 signup page css [Link]

1 @import url('[Link]
display=swap');
2 @import url('[Link]
100&family=Source+Sans+Pro:ital,wght@0,300;0,400;1,200;1,300&display=swap');
3
4 /* pooja css -1sr */
5 * {
6 margin: 0;
7 padding: 0;
8 font-family: 'Roboto', sans-serif;
9 }
10
11
12 #login {
13 background-image: url('[Link]');
14 background-repeat:
background-size: no-repeat;
cover;
width:
height:100%;
84vh;
15 background-attachment: fixed;
padding: 5% 0px;
margin: auto;
16
17
18
19
20
21
}
22
23
24 #login .container {
width: 700px;
25
26 height: 600px;
27 background-color: burlywood
28 margin-left: 250px;
29 position: fixed;
30 display: flex;
31 }
32
33 .leftSidePopUp {
34 width: 250px;
35 background-image: linear-gradient(to bottom right, rgb(88, 81, 77), white);
/* background-image: linear-gradient(to bottom right, rgb(252, 0, 0), rgb(190, 172,
172)); */
36 padding: 1rem;
37
38 }
39
40 .leftSidePopUp .whySide {
41 margin: 10px 5px;
42 color: whitesmoke
43 }
44
45 .leftSidePopUp .whySide h2 {
46 margin: 15px 10px;
47 font-size: 24px;
48 font-weight: 400;
49
50
}
51

1/4
6/3/24, 10:40 AM [Link]
52 .leftSidePopUp .whySide p {
53 margin: 10px 10px;
54 font-size: 17px;
55 }
56
57
.rightSidePopUp {
58
background-color: #f7f7f7;
59
width: 450px;
60
61
62 }
63
64 .rightSidePopUp .loginPage {
65 margin: 10px 5px;
66 }
67
68 .rightSidePopUp .loginPage h1 {
69 float: right;
70
}
71
72
73 .rightSidePopUp .loginPage #timeBar {
74 cursor: pointer;
75 color: rgb(216, 102, 27);
76
77 }
78
79 .rightSidePopUp .loginPage .userPanel {
80 display: flex;
81 color: rgb(112, 109, 109);
82
83
84 }
85
86 .rightSidePopUp .loginPage h3 {
87 margin: 20px 10px;
88 font-size: 20px;
89 }
90
91 .rightSidePopUp .loginPage h3 a {
92 text-decoration: none;
93
color: rgb(216, 102, 27);
94
95 }
96
97 .loginPage #signup a{ border-bottom: 3px
98 solid rgb(216, 102, 27); }
99
100
101 .rightSidePopUp .loginPage label {
102 margin: 5px 35px;
103 color: rgb(112, 109, 109);
104 font-size: 20px;
105
}
106
107
.rightSidePopUp .loginPage input {
width: 300px;
height: 25px;
margin: 3px 35px;
padding: 8px 20px;
6/3/24, 10:40 AM [Link]
108 outline: none;
109 }
110
111 .rightSidePopUp .loginPage #btn {
112 width: 343px; height: 45px; margin:
113 text-transform:
15px 35px;
114
uppercase; font-size: 20px;
115 background-color: rgb(216, 102, 27);
116 border: 1px solid rgb(216, 102, 27);
117
118
119
120 color: #f7f7f7;
121 }
122
123 .rightSidePopUp .loginPage #or {
124 margin: 0px 5px;
125
font-size: 20px;
126
127 }
128
129 .loginPage .lines {
130 margin: 3px 35px;
131 display: flex;
132 color: rgb(112, 109, 109);
133 }
134
135
.rightSidePopUp .loginPage .oneline {
136
border-bottom: 1px solid rgb(112, 109, 109);
137
width: 160px;
138
margin-bottom: 7px;
139
140 }
141
142 .rightSidePopUp .loginPage .twoline {
143 border-bottom: 1px solid rgb(112, 109, 109);
144 width: 160px;
145 margin-bottom: 7px;
146 }
147
148
.rightSidePopUp .loginPage #social {
149
150 border: 1px solid rgb(112, 109, 109);
padding: 8px 18px;
151
width: 80px;
152
153 margin: 0px 35px;
154 text-decoration: none;
155 color: rgb(112, 109, 109);
156 }
157
158
159
160
.socialink {
161
margin: 20px 0px;
162
}
163

.hr {
border-bottom: 1px solid rgb(112, 109, 109);
padding: 1px 0px;
margin: 10px 35px;
6/3/24, 10:40 AM [Link]
164
165 }
166
167 .rightSidePopUp .loginPage #pTaglast {
168 margin:
35px; 10px
169 padding: 10px 0px; color:
170 rgb(112, 109, 109);
171
font-size: 15px;
172
173 }
174
175 #social img {
176 width: 15px;
}
 signup page js [Link]

1 function formSubmit(e)
2 {
3 [Link]();
4 let userData = {
5 name: [Link]('name').value,
6 mobileNum: [Link]('mobileNo').value,
7 password: [Link]('password').value,
8 rePassword: [Link]('rePassword').value
9
}
10
if ([Link] !== [Link]) {
11
alert("Password does not match ");
12
[Link] = "[Link]"
13
14
15 }
16
17 else {
18 [Link] = "[Link]"
19
20 }
21
22 [Link]("Data-User", [Link](userData));
23 [Link](userData);
24
25 }
26
27 let bar = [Link]('timeBar');
28 [Link]('click', function ()
29
{
30 [Link] = '[Link]'
})
Kids page html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" href="[Link]
awesome/6.2.1/css/[Link]"/>
8 <link rel="stylesheet" href="[Link]">
9 <title>Document</title>
10
11 </head>
12 <body>
13 <section id="header">
14 <div id="logo">
15 <a href="[Link]"><img src="./images/logo [Link]" alt="Error"></a>
16 <input type="search" placeholder="Search for Catagory" id="search" onchange="
openpage()">
17
18 </div>
19 <div>
20 <div class="openMenu">
21 <ul class="menunav">
22 <li><a href="[Link]">Login</a></li>
23 <li><a href="[Link]">Register</a></li>
24 </ul>
25 <i class="fa fa-bars"></i>
26 </div>
27
28
29 </div>
30 </section>
31 <section id="header1">
32 <div class="openMenu1">
33 <li><a href="">All CATEGORIES</a>
34 <ul class="dropmenu">
<li><a
<li><a href="[Link]">Kids</a></li>
href="">Toys</a></li>
35 <li><a href="[Link]">Footwears</a></li>
<li><a
<li><a href="">Gear</a></li>
href="">Feeding</a></li>
36 <li><a href="">Bath</a></li>
<li><a
<li><a href="">Nursery</a></li>
href="">Moms</a></li>
37
38
39
40
41
42
</ul></li>
43
44
<li><a href="[Link]">BOY FASHION</a>
45
46 <ul class="dropmenu">
47 <li><a href="[Link]">Shirts</a></li>
48 <li><a href="[Link]">T-Shirts</a></li>
49 <li><a href="[Link]">Pants</a></li>
50
51 <li><a href="[Link]">Jackets</a></li>
52 <li><a href="[Link]">Sweaters</a></li>
53 <li><a
<li><a href="[Link]">Thermals</a></li>
href="[Link]">Nightwear</a>
</li>
6/3/24, 12:37 PM [Link]
54 <li><a href="[Link]">Footwears</a></li>
55 </ul></li>
56 <li><a href="[Link]">GIRL FASHION</a>
57 <ul class="dropmenu">
58 <li><a href="[Link]">Top's</a></li>
59 <li><a href="[Link]">Set's & Suit's</a></li>
60 <li><a href="[Link]">Jeans</a></li>
61 <li><a href="[Link]">Ethnic Wear</a></li>
62 <li><a href="[Link]">Party Wear</a></li>
63 <li><a href="[Link]">Thermals</a></li>
64 <li><a href="[Link]">Nightwear</a></li>
65 <li><a href="[Link]">Footwears</a></li>
66
67 </ul></li>
68 </div>
69 <ul class="navbar1">
70 <li><a href="">ALL CATEGORIES</a>
71 <ul class="dropmenu">
72 <li><a href="[Link]">Boy Fashion</a></li>
73 <li><a href="[Link]">Girl Fashion</a></li>
74 <li><a href="[Link]">Kids</a></li> <li>
75
<a href="">Toys</a></li>
76 <li><a href="">Gear</a></li>
77
<li><a href="">School</a></li> <li><a
78
href="">Book's & CD'S</a></li>
79
80 </ul> </li> <li><a
81 href="[Link]">BOY FASHION</a>
82 <ul class="dropmenu">
83
84 <li><a href="[Link]">Shirts</a></li>
85 <li><a href="[Link]">T-Shirts</a></li>
86 <li><a href="[Link]">Pants</a></li>
87 <li><a href="[Link]">Jackets</a></li>
88 <li><a href="[Link]">Sweaters</a></li>
89 <li><a href="[Link]">Thermals</a></li>
90 <li><a href="[Link]">Nightwear</a></li>
91 <li><a href="[Link]">Footwears</a></li>
92
93 </ul></li>
94 <li><a href="[Link]">GIRL FASHION</a>
95 <ul class="dropmenu">
96 <li><a href="[Link]">Top's</a></li>
97 <li><a href="[Link]">Set's & Suit's</a></li>
98 <li><a href="[Link]">Jeans</a></li>
99 <li><a href="[Link]">Ethnic Wear</a></li>
100 <li><a href="[Link]">Party Wear</a></li>
101 <li><a href="[Link]">Thermals</a></li>
102 <li><a href="[Link]">Nightwear</a></li>
103 <li><a href="[Link]">Footwears</a></li>
104
</ul></li>
105
106 <li><a href="[Link]">KIDS</a>
107 <ul class="dropmenu">
108 <li><a href="[Link]">New Born</a></li>
109 <li><a href="[Link]">3-6 Months</a></li>
110 <li><a href="[Link]">6-9 Months</a></li>
<li><a href="[Link]">9-12 Months</a></li>
<li><a href="[Link]">12-18 Months</a></li>
<li><a href="[Link]">18-24 Months</a></li>
<li><a href="[Link]">2-4 Years</a></li>
6/3/24, 12:37 PM [Link]
111 <li><a href="[Link]">4-6 Years</a></li>
112 </ul></li>
113 <li><a href="[Link]">FOOTWEARS</a>
114 <ul class="dropmenu">
115 <li><a href="[Link]">Casuals</a></li> <li>
116 <a href="[Link]">Sandals</a></li> <li><a
117
href="[Link]">Booties</a></li> <li><a
118
href="[Link]">Clogs</a></li> <li><a
119
href="[Link]">Winter Boots</a></li>
120
<li><a href="[Link]">School Shoes</a></li>
121
<li><a href="[Link]">Socks</a></li> <li><a
122
href="[Link]">Flip Flops</a></li>
123
124 </ul></li>
125 <li><a href="">DIAPERING</a>
126 </li> <li><a href="">TOYS</a>
127 <ul class="dropmenu">
128 <li><a href="">Musical Toys</a></li>
129 <li><a href="">Soft Toys</a></li>
130 <li><a href="">Backyard Play</a>
131 </li> <li><a href="">Sports</a></li>
132
<li><a href="">Kids Puzzles</a></li>
133
<li><a href="">Learning</a></li>
134
<li><a href="">Educational</a></li>
135
<li><a href="">Board Games</a></li>
136
137 </ul></li>
138 <li><a href="">FEEDING</a></li>
139 <li><a href="">BATH</a></li>
140 <li><a href="">NURSERY</a></li>
<li><a href="">MOMS</a></li>
Error"></a><a href=""><img src="[Link] alt="

141 <a href=""><img src="[Link]

[Link]" alt="Error"></a>
142 </ul>
143
144 </section>
145
146 <div class="slideshow-container">
147 <div class="mySlides fade">
148
149 <img src="
[Link]
style="width: 100%" >
150 </div>
151 <div class="mySlides fade">
152
153 <img src="[Link]
nutrition_offer_50_201220221674298491128.webp" style="width: 100%">
154 </div>
155 <div class="mySlides fade">
156
157 <img src="
[Link]
[Link]" style="width: 100%">
158 </div>
159 <div class="mySlides fade">
160
161 <img src="
[Link] style=
6/3/24, 12:37 PM [Link]
"width: 100%">
162 </div>
163 <div class="mySlides fade">
164
165 <img src="[Link]
[Link]" style="width: 100%">
166 </div>
167 <div class="mySlides fade">
168
169 <img src="
[Link] style="width:
100%">
170 </div>
171 <div class="mySlides fade">
172
173 <img src="[Link]
[Link]" style="width: 100%">
174 </div>
175 <div class="mySlides fade">
176
177 <img src="
[Link] style="width:
100%">
178 </div>
179 <div class="mySlides fade">
180
181 <img src="
[Link]
style="width: 100%">
182 </div>
183 <div class="mySlides fade">
184 <img src="[Link]
dec_bbcs_desktop1673858912895.webp" style="width: 100%">
185 </div>
186 <div class="mySlides fade">
187 <img src="
[Link] style="
width: 100%">
188 </div>
189 <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
190 <a class="next" onclick="plusSlides(1)">&#10095;</a>
191
192 </div>
193 <h2>PREMIUM BOUTIQUES</h2>
194 <div class="container">
195 <a href="" class="card"><div>
196 <img src="[Link] alt="
Error">
197 <h4>Cute Casuals At it's Best | Up To 24M</h4>
198 <p>Onesies,Rompers, Sets & More</p>
199 </div></a>
200 <a href="" class="card"><div>
201 Error"> <img src="[Link] alt="

202 <h4>Cute Casuals At it's

<p>Onesies,Rompers, Sets Best | Up To 24M</h4>
& More</p>
203
204 </div></a>
<a href="" class="card"><div>
205
206 <img src="[Link] alt="
Error">
6/3/24, 12:37 PM [Link]
207 <h4>Cute Casuals At it's Best | Up To 24M</h4>
208 <p>Onesies,Rompers, Sets & More</p>
209 </div></a>
210 <a href="" class="card"><div>
211 <img src="[Link] alt="
Error">
212 <h4>Cute Casuals At it's
<p>Onesies,Rompers, Sets Best | Up To 24M</h4>
& More</p>
213
214 </div></a>
<a href="" class="card"><div>
215
216 <img src="[Link] alt="
Error">
217 <h4>Cute Casuals At it's
<p>Onesies,Rompers, Sets Best | Up To 24M</h4>
& More</p>
218
219 </div></a>
<a href="" class="card"><div>
220
221 Error"> <img src="[Link] alt="

222 <h4>Cute Casuals At it's

<p>Onesies,Rompers, Sets Best | Up To 24M</h4>
& More</p>
223
224 </div></a>
<a href="" class="card"><div>
225
226 <img src="[Link] alt="
Error">
227 <h4>Cute Casuals At it's Best | Up To 24M</h4>
228 <p>Onesies,Rompers, Sets & More</p>
229 </div></a>
230 <a href="" class="card"><div>
231 <img src="[Link] alt="
Error">
232
<h4>Cute Casuals At it's Best | Up To 24M</h4>
233 <p>Onesies,Rompers, Sets & More</p>
234
</div></a>
235
<a href="" class="card"><div>
236 <img src="[Link] alt="
Error">
237
<h4>Cute Casuals At it's Best | Up To 24M</h4>
238
<p>Onesies,Rompers, Sets & More</p>
239
</div></a>
240
<a href="" class="card"><div>
241
<img src="[Link] alt="
242 Error">
<h4>Cute Casuals At it's Best | Up To 24M</h4>
243
244 <p>Onesies,Rompers, Sets & More</p>
</div></a>
245
<a href="" class="card"><div>
246
<img src="[Link] alt="
247 Error">
248 <h4>Cute Casuals At it's Best | Up To 24M</h4>
249 <p>Onesies,Rompers, Sets & More</p>
250 </div></a>
251 <a href="" class="card"><div>
<img src="[Link] alt="
252 Error">
253 <h4>Cute Casuals At it's Best | Up To 24M</h4>
<p>Onesies,Rompers, Sets & More</p>
254
255 </div></a>
256 </div>
<div class="banner">
6/3/24, 12:37 PM [Link]
257 <img src="
[Link] alt="
Error">
258 </div>
259 <div class="banner1">
260 <img src="
[Link] alt="
Error">
261 <img src="
[Link] alt="
Error">
262 <img src="
[Link] alt="
Error">
263 </div>
264 <div class="glorious"><img src="
[Link] alt="
Error"></div>
265 <div class="gloriouscards">
266 <a href=""><img src="
[Link] alt="
Error"></a>
267 <a href=""><img src="
[Link] alt="
Error"></a>
268 <a href=""><img src="
[Link] alt="
Error"></a>
269 <a href=""><img src="
[Link] alt="
Error"></a>
270 </div>
271 <div class="glorious">
272 <img src="
[Link] alt="
Error">
273 </div>
274 <div class="age">
275 <a href=""><img src="
[Link] alt="
Error"></a>
276 <a href=""><img src="
[Link] alt="
Error"></a>
277 <a href=""><img src="
[Link] alt="
Error"></a>
278 <a href=""><img src="
[Link] alt="
Error"></a>
279 <a href=""><img src="
[Link] alt="
Error"></a>
280 <a href=""><img src="
[Link] alt="
Error"></a>
281 <a href=""><img src="
[Link] alt="
Error"></a>
282 <a href=""><img src="
[Link]
alt="Error"></a>
283 </div>
284 <div class="glorious">
6/3/24, 12:37 PM [Link]
285 <img src="
[Link] alt="
Error">
286 </div>
287 <div class="joinstyle">
288 <a href=""><img src="
[Link] alt="
Error"></a>
289 <a href=""><img src="
[Link] alt="
Error"></a>
290 <a href=""><img src="
[Link] alt="
Error"></a>
291 <a href=""><img src="
[Link] alt="
Error"></a>
292 <a href=""><img src="
[Link] alt="
Error"></a>
293 <a href=""><img src="
[Link] alt="
Error"></a>
294 </div>
295 <div class="glorious">
296 <img src="
[Link] alt="
Error">
297 </div>
298 <div class="brands">
299 <a href=""><img src="
[Link]
alt="Error"></a>
300 <a href=""><img src="
[Link]
alt="Error"></a>
301 <a href=""><img src="
[Link]
alt="Error"></a>
302 <a href=""><img src="
[Link]
alt="Error"></a>
303 <a href=""><img src="
[Link]
alt="Error"></a>
304 <a href=""><img src="
[Link]
alt="Error"></a>
305 <a href=""><img src="
[Link]
alt="Error"></a>
306 <a href=""><img src="
[Link]
alt="Error"></a>
307 <a href=""><img src="
[Link]
alt="Error"></a>
308 <a href=""><img src="
[Link]
.jpg" alt="Error"></a>
309 <a href=""><img src="
[Link]
alt="Error"></a>
310 <a href=""><img src="
[Link]
alt="Error"></a>
6/3/24, 12:37 PM [Link]
311 <a href=""><img src="
[Link]
alt="Error"></a>
312 <a href=""><img src="
[Link]
alt="Error"></a>
313 <a href=""><img src="
[Link]
alt="Error"></a>
314 <a href=""><img src="
[Link]
alt="Error"></a>
315 <a href=""><img src="
[Link]
alt="Error"></a>
316 <a href=""><img src="
[Link]
alt="Error"></a>
317 <a href=""><img src="
[Link]
alt="Error"></a>
318 <a href=""><img src="
[Link]
alt="Error"></a>
319 <a href=""><img src="
[Link] alt="Error"></a>
320 <a href=""><img src="
[Link]
.jpg" alt="Error"></a>
321 <a href=""><img src="
[Link]
.jpg" alt="Error"></a>
322 <a href=""><img src="
[Link]
alt="Error"></a>
323 <a href=""><img src="
[Link]
alt="Error"></a>
324 <a href=""><img src="
[Link]
alt="Error"></a>
325 <a href=""><img src="
[Link]
alt="Error"></a>
326 <a href=""><img src="
[Link]
Y_TOUCH.jpg" alt="Error"></a>
327 <a href=""><img src="
[Link]
alt="Error"></a>
328 <a href=""><img src="
[Link]
.jpg" alt="Error"></a>
329 <a href=""><img src="
[Link]
alt="Error"></a>
330 <a href=""><img src="
[Link]
alt="Error"></a>
331 </div>
332 <div class="glorious">
333 <img src="
[Link] alt="
Error">
334 </div>
335 <div class="occasion">
6/3/24, 12:37 PM [Link]
336 <a href=""><img src="
[Link] alt="
Error"></a>
337 <a href=""><img src="
[Link] alt="
Error"></a>
338 <a href=""><img src="
[Link] alt="
Error"></a>
339 </div>
340 <div class="glorious">
341 <a href=""><img src="
[Link]
alt="Error"></a>
342 </div>
343 <div class="glorious">
344 <a href=""><img src="
[Link]
alt="Error"></a>
345 </div>
346 <div class="babymore">
347 <a href=""><img src="
[Link]
alt="Error"></a>
348 <a href=""><img src="
[Link]
alt="Error"></a>
349 <a href=""><img src="
[Link]
alt="Error"></a>
350 <a href=""><img src="
[Link]
alt="Error"></a>
351 <a href=""><img src="
[Link]
alt="Error"></a>
352 <a href=""><img src="
[Link]
alt="Error"></a>
353 <a href=""><img src="
[Link]
alt="Error"></a>
354 </div>
355 <div class="glorious">
356 <a href=""><img src="
[Link]
alt="Error"></a>
357 </div>
358 <div class="babymore">
359 <a href=""><img src="
[Link]
alt="Error"></a>
360 <a href=""><img src="
[Link]
alt="Error"></a>
361 <a href=""><img src="
[Link]
alt="Error"></a>
362 <a href=""><img src="
[Link]
alt="Error"></a>
363 <a href=""><img src="
[Link]
alt="Error"></a>
6/3/24, 12:37 PM [Link]
364 <a href=""><img src="
[Link]
alt="Error"></a>
365 <a href=""><img src="
[Link]
alt="Error"></a>
366 </div>
367 <div class="glorious">
368 <a href=""><img src="
[Link]
_kids_food_051122_01.jpg" alt="Error"></a>
369 </div>
370 <div class="brands">
371 <a href=""><img src="
[Link]
_kids_food_051122_02.jpg" alt="Error"></a>
372 <a href=""><img src="
[Link]
_kids_food_051122_03.jpg" alt="Error"></a>
373 <a href=""><img src="
[Link]
_kids_food_051122_04.jpg" alt="Error"></a>
374 <a href=""><img src="
[Link]
_kids_food_051122_05.jpg" alt="Error"></a>
375 <a href=""><img src="
[Link]
_kids_food_051122_06.jpg" alt="Error"></a>
376 <a href=""><img src="
[Link]
_kids_food_051122_07.jpg" alt="Error"></a>
377 <a href=""><img src="
[Link]
_kids_food_051122_08.jpg" alt="Error"></a>
378 <a href=""><img src="
[Link]
_kids_food_051122_09.jpg" alt="Error"></a>
379 <a href=""><img src="
[Link]
_kids_food_051122_10.jpg" alt="Error"></a>
380 <a href=""><img src="
[Link]
_kids_food_051122_11.jpg" alt="Error"></a>
381 <a href=""><img src="
[Link]
_kids_food_051122_12.jpg" alt="Error"></a>
382 <a href=""><img src="
[Link]
_kids_food_051122_13.jpg" alt="Error"></a>
383 <a href=""><img src="
[Link]
_kids_food_051122_14.jpg" alt="Error"></a>
384 <a href=""><img src="
[Link]
_kids_food_051122_15.jpg" alt="Error"></a>
385 <a href=""><img src="
[Link]
_kids_food_051122_16.jpg" alt="Error"></a>
386 <a href=""><img src="
[Link]
_kids_food_051122_17.jpg" alt="Error"></a>
387 </div>
388 <div class="glorious">
389 <a href=""><img src="
[Link] alt="Error"><
/a>
6/3/24, 12:37 PM [Link]
390 </div> <div
391 class="joinstyle"> <a
392 href=""><img src="
[Link] alt="Error"><
/a>
393 <a href=""><img src="
[Link] alt="Error"><
/a>
394 <a href=""><img src="
[Link] alt="Error"><
/a>
395 <a href=""><img src="
[Link] alt="Error"><
/a>
396 <a href=""><img src="
[Link] alt="Error"><
/a>
397 <a href=""><img src="
[Link] alt="Error"><
/a>
398 </div>
399
400 <div class="glorious">
401 <a href=""><img src="
[Link] alt="Error"><
/a>
402 </div>
403 <div class="glorious">
404 <a href=""><img src="
[Link]
_kids_food_160123_18.jpg" alt="Error"></a>
405 </div> <div
406 class="joinstyle">
407 <a href=""><img src="
[Link]
_kids_food_160123_19.jpg" alt="Error"></a>
408 <a href=""><img src="
[Link]
_kids_food_160123_20.jpg" alt="Error"></a>
409 <a href=""><img src="
[Link]
_kids_food_160123_21.jpg" alt="Error"></a>
410 <a href=""><img src="
[Link]
_kids_food_160123_22.jpg" alt="Error"></a>
411 <a href=""><img src="
[Link]
_kids_food_160123_23.jpg" alt="Error"></a>
412 <a href=""><img src="
[Link]
_kids_food_160123_24.jpg" alt="Error"></a>
413 <a href=""><img src="
[Link]
_kids_food_160123_25.jpg" alt="Error"></a>
414 <a href=""><img src="
[Link]
_kids_food_160123_26.jpg" alt="Error"></a>
415 <a href=""><img src="
[Link]
_kids_food_160123_27.jpg" alt="Error"></a>
416 <a href=""><img src="
[Link]
_kids_food_160123_28.jpg" alt="Error"></a>
417 <a href=""><img src="
[Link]
_kids_food_160123_29.jpg" alt="Error"></a>
6/3/24, 12:37 PM [Link]
418 <a href=""><img src="
[Link]
_kids_food_160123_30.jpg" alt="Error"></a>
419 </div>
420
421 <script src="[Link]"></script>
422 </body>
423 </html>
Kids page css

1 *{
2 padding: 0;
3 margin: 0;
4 text-decoration: none;
5 list-style: none;
6 box-sizing: border-box;
7 font-family: verdana,sans-serif;
8 }
9 #header{
10 width: 100%;
11 margin: auto;
12 display: flex;
13 align-items: center;
14 justify-content: space-between;
15 padding: 0 5%;
16 height: 120px;
17 position: sticky;
18 top: 0;
19 background-color: white
20 }
21 #logo{
22 display: flex;
23 align-items: center;
24
25 }
26 #logo a{
27 width: 50%;
28 margin-right: 20px;
29 }
30 #logo input{
31 display:
flex: 1; flex;
max-width: 600px;
32 height: 20px;
border-radius: 5px;
border-width: 1px;
33
34 }
35
36
border-color: #CFD8DC;
37 padding-right: 100px;
padding-left: 10px;
38
39
40
41 #navbar{
42 display: flex;
43 align-items: center;
44 justify-content: center;
45 }
46 #navbar li{
47 padding: 0 5px;
48 }
49 #navbar li a{
50 width: 100%;
51 } color: #263238;
52
53 #header1{
6/3/24, 12:37 PM [Link]
54
55 display: flex;
56 justify-content: center;
57 #FDD835;
background-color:
58 height: 57px;
59 /* position: sticky;
60 top: 50px;
61 z-index: 100; */
62
}
63
64
65 .navbar1{ margin-top:
66 3px;
67 display: flex;
68 align-items: center;
69 justify-content: center;
70
71 }
72 .navbar1 a{
73
padding: 0 5px;
74
75 color: #424242;
76 font-family: Arial, Helvetica, sans-serif;
77 font-size: 15px;
78 font-weight: 550;
79 }
80 .navbar1 li{
81 height: 100%;
82 display: flex;
83 align-items: center;
84 justify-content: space-between;
85 }
86
87 .navbar1 li:hover{
88
background-color: white
89
}
90 .navbar1 .dropmenu{
91
background-color: white
92
width: 180px;
93
top: 121px;
94
line-height: 45px;
95
position: absolute;
96
opacity: 0;
97
visibility: hidden;
98
margin-top: 0;
99 z-index: 100;
100
101 }
102 .navbar1 li:hover .dropmenu{
103
104 opacity: 1;
105 visibility: visible;
106
107 }
108 .dropmenu li:hover{
109 text-shadow: 1px 1px black;
}
.dropmenu li a {
width: 100%;
6/3/24, 12:37 PM [Link]
110 display: block;
111 }
112
113 .mySlides{
114 display: none;
115
}
116
.slideshow-container img{
117
margin-top: 15px;
118
vertical-align: middle;
119
120
}
121
122 .slideshow-container{
width: 90%;
123
position: relative;
124
125 margin: auto;
126 }
127 .prev, .next{
128
cursor: pointer;
129
130 position: absolute;
131 top: 50%;
132 width: auto;
133 padding: 16px;
134 margin-top: -22px;
135 color: white
136 font-weight: bold;
137 font-size: 25px;
138 transition: 0.6s ease;
139 border-radius: 0 3px 3px 0;
140 user-select: none;
141
}
142
.next{
143
144 right: 0;
145 border-radius: 3px 0 0 3px;
146 }
147 .prev:hover, .next:hover{
148 background-color: rgba(0, 0, 0, 0.8);
149
}
150
.fade{
151
-webkit-animation-name: fade;
152
-webkit-animation-duration: 3s;
153 animation-name: fade;
154
animation-duration: 3s;
155
156 }
157
158 @-webkit-keyframes fade{
159 from {opacity: .4}
160 to {opacity: 1}
161 } @keyframes
162 fade{
163 from { opacity: .4}
164 to{opacity: 1}
165 }

@media only screen and (max-width:300px) {

.prev, .next{
font-size: 11px
6/3/24, 12:37 PM [Link]
166 }
167 } @media only screen and (max-width:500px)
168 {
169 .prev, .next{
170 font-size: 14px
171
}
172 } .openMenu,
173
.openMenu1{
174 font-size: 2rem;
175
176
177 margin: 20px;
178 display: none;
179 cursor: pointer;
180
181 }
182 #navbar .closeMenu {
183 font-size: 2rem;
184 display: none;
185 cursor: pointer;
186
187 } @media(max-width:
188 950px){
189 #navbar {
190 background: linear-gradient(to right, #f7ff00, #db36a4);
191 color: white
192 height: 100vh;
193 position: fixed;
194 top: 0;
195 right: 0;
196 left: 0;
197 z-index: 10;
198 flex-direction: column;
199 justify-content: center;
200 align-items: center;
201
202
203 transition: top 1s ease;
204 display: none;
205 }
206 #navbar .closeMenu{
207
display: block;
208
position: absolute;
209
top: 20px;
210
right: 20px;
211
212 }
213 .openMenu{
214 width: 100%;
215 display: flex;
216 margin: auto;
217 margin-right: 10px;
218 }
219 .menunav{
220 display: grid;
221
grid-template-columns: repeat(2,1fr);
margin-right: 50px;
font-size: 20px;

}
6/3/24, 12:37 PM [Link]
222 .menunav a{
223 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
224 color: #263238;
225 }
226 #navbar li a:hover{
227
background: none;
228
font-size: 1.6rem;
229
230 }
231 #logo input{
232 background: linear-gradient(to right, #f7ff00, #db36a4);
233 color: white
234 height: 100vh;
235 position: fixed;
236 top: 0;
237 right: 0;
238 left: 0;
239 z-index: 10;
240 flex-direction: column;
241 justify-content: center;
242 align-items: center;
243
244
245 transition: top 1s ease;
246 display: none;
247 }
248 .navbar1{
249 background: linear-gradient(to right, #f7ff00, #db36a4);
250
color: #FDD835;
251
height: 100vh;
252 position: fixed;
253 top: 0;
254 right: 0;
255 left: 0;
256 z-index: 10;
257 flex-direction: column;
258 justify-content: center;
259 align-items: center;
260
261
262 transition: top 1s ease;
263 display: none;
264 }
265 .openMenu1{
266 width: 100%;
267 display: flex;
268 margin: auto;
269 margin-right: 10px;
270 }
271 .openMenu1 a{
272 height: 100%;
273 margin-left: 10px;
274 color: #424242;
275 font-family: Arial, Helvetica, sans-serif;
276 font-size: 15px;
font-weight: 550;
}
.openMenu1 li:hover{
6/3/24, 12:37 PM [Link]
277 background-color: white
278 }
279 #header1 .dropmenu{
280 background-color: white
281 width: 180px;
282 top: 113px;
283
line-height: 45px;
284
position: absolute;
285
opacity: 0;
286
287 visibility: hidden;
288 margin-top: 0;
289 z-index: 100;
290 }
291 #header1 li:hover .dropmenu{
292 opacity: 1; visible;
293 visibility:
294
295
296 }
297 .dropmenu li:hover{
298 text-shadow: 1px 1px black;
299 }
300 .dropmenu li a {
301 width: 100%;
302 display: block;
303
304
}
305
306 .slideshow-container{
307 width: 90%;
308 position: relative;
309 margin: auto;
310 z-index: -1;
311 } }
312 h2{
313
314 margin-top: 15px;
text-align: center;
background-color:
315
316
#EEEEEE;
317 } padding-bottom: 15px;
318 .container{
319
320
321 width: 100%;
322 padding: 0 10%;
323
324 display: grid;
325 grid-template-columns: repeat(3,1fr);
326 background-color: #EEEEEE;
327 }
328 .card{
329 border-radius: 5px;
330 margin: 10px;
331
} .card
div{
border-radius: 5px;
padding-bottom: 15px;
background-color: white
6/3/24, 12:37 PM [Link]
332 }
333 .card img{
334 border-radius: 5px;
335 width: 100%;
336 }
337
.card:hover{
338
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
339
}
340
341 .banner{
342 width: 100%;
343 padding: 15px 10% 0 10%;
344 text-align: center;
345 background-color: #EEEEEE;
346 }
347 .banner img{
348 width: 100%;
349
}
350
.banner1{
351
352 padding: 0 10%;
353 display: grid;
354 grid-template-columns: repeat(3,1fr);
355 background-color: #EEEEEE;
356 }
357 .banner1 img{
358 width: 100%;
359 }
360 .glorious{
361
width: 100%;
362
363 background-color: #EEEEEE;
364 padding: 0 10%;
365 } .glorious
366 img{
367 width: 100%;
368 }
369 .gloriouscards{
370 width: 100%;
371 padding: 0 10%;
372 display: grid;
373 grid-template-columns: repeat(4,1fr);
374
375 background-color: #EEEEEE;
}
376
.gloriouscards img{
377
378 width: 100%;
379 }
380 .age{
381 width: 100%;
382 padding: 0 10%;
383 display: grid;
384 grid-template-columns: repeat(8,1fr);
385
background-color: #EEEEEE;
386
}
.age img{
width: 100%;
}
.joinstyle{
6/3/24, 12:37 PM [Link]
387 width: 100%;
388 padding: 0 10%;
389 display: grid;
390 grid-template-columns: repeat(6,1fr);
391
background-color: #EEEEEE;
392 }
393 .joinstyle img{
394 width: 100%;
395
396 }
397 .brands{
398 width: 100%;
399 padding: 0 10%;
400 display: grid;
401 grid-template-columns: repeat(8,1fr);
402 background-color: #EEEEEE;
403
}
404
.brands img{
405 width: 100%;
406
}
407
.occasion{
408
width: 100%;
409 padding: 0 10%;
410 display: grid;
411 grid-template-columns: repeat(3,1fr);
412
background-color: #EEEEEE;
413 }
414 .occasion img{
415
416 width: 100%;
}
417
.babymore{
418
419 width: 100%;
420 padding: 0 10%;
421 display: grid;
grid-template-columns: repeat(7,1fr);
422
background-color: #EEEEEE;
423
424 }
.babymore img{
425
426 width: 100%;
427 }
428 .play{
429 width: 100%;
padding: 0 10%;
430
background-color: #EEEEEE;
431
}
432
.play .play1{
433
434 width: 100%;
435 display: grid;
436 grid-template-columns: repeat(8,1fr);
437 row-gap: none;
438 }
439 .play1 img{
440 width: 100%;
441 }
.foot{
padding: 50px 200px 30px 200px;
6/3/24, 12:37 PM [Link]
442
443 background-color: #81D4FA;
444
445 }
446 .foot h1{
447
text-align: left;
448
449 color: #FB8C00;
450 font-family: Georgia, 'Times New Roman', Times, serif;
451
452
453 }
454 .service{
455 width: 100%;
456 display: flex;
457 flex-wrap: wrap;
458 justify-content: space-between;
459 margin-top: 10px;
460
461 }
462 .col{
463
464 display: flex;
465 flex-direction: column;
466 align-items: flex-start;
467 }
468 .service h4{
469 color: black
470 font-size: 16px;
471 font-weight: 300;
472 margin-bottom: 10px;
473
font-weight: bold;
474
}
475
.service a{
476
477 text-decoration: none;
478 color: black
479 padding-bottom: 5px;
}
 Validation Checks for Online
Shopping Website
1. User Registration and Login

Email Validation:
Ensure the email address is in the correct format
(e.g., user@[Link]). Check that the email
address is not already registered.

Password Validation:
Ensure the password meets complexity
requirements (e.g., minimum 8 characters,
includes uppercase letters, lowercase letters,
numbers, and special characters).
Confirm password matches the confirmation
entry.

Username Validation:

Check that the username is unique and not

already taken.
Validate that the username meets length and
character requirements.

2. Product Management
Product Name:

Ensure the product name is not empty and does

not exceed the maximum character limit.
 Price Validation:
Check that the price is a positive number.
Validate that the price format is correct (e.g., two decimal places).
Stock Quantity:
Ensure the stock quantity is a non-negative integer.
Image Upload:
Validate that the uploaded file is an image (e.g., jpg, png) and meets
size requirements.

3. Shopping Cart

Quantity Validation:
Ensure the quantity selected is a positive integer.
Check that the quantity does not exceed available stock.
Product Availability:
Validate that the product is available and not discontinued
.
4. Checkout Process
Address Validation:
Ensure all required address fields (street, city, state, zip code) are
completed and valid.
Check that the zip code is in the correct format.
Payment Information:
Validate credit card details (number, expiration date, CVV).
Ensure the payment information is transmitted securely (e.g.,
SSL/TLS encryption).

Coupon Code:
Check that the coupon code is valid and not expired.
Validate that the coupon code applies to the items in the cart.
Testing for Online Shopping
Website
Testing Techniques and Strategies

Unit Testing:

Purpose: Test individual components in isolation.

Techniques: Use frameworks like Jest (JavaScript), unittest (Python), or
PHPUnit (PHP).
Example: Test the function that adds items to the cart.

Integration Testing:
Purpose: Test interactions between integrated components.
Techniques: Use tools like Postman for API testing or integration
testing frameworks. Example: Test the interaction between the
frontend and backend during the checkout process.

Functional Testing:

Purpose: Verify the system works according to the functional

requirements. Techniques: Use Selenium for automated UI testing.
Example: Test user registration and login functionalities.

System Testing:
Purpose: Test the complete and integrated application. Techniques:
End-to-end testing using tools like Cypress. Example: Test the entire
shopping process from browsing products to placing an order.

Performance Testing:

Purpose: Assess the application’s performance under load. Techniques:

Use JMeter to simulate user traffic and measure response times.
Example: Simulate multiple users to test response times.
Test Data and Errors for Each Test Case

User Registration Test Data: Valid email:

user@[Link]
invalid email: user@com
Password: P@ssw0rd
Weak password: 123

Expected Errors: "Invalid email format"

error for invalid email. "Password too
weak" error for weak password.

Login Test Data

: Registered email: user@[Link]
Unregistered

email: newuser@[Link] Correct

password: P@ssw0rd
Incorrect password:

wrongpass Expected Errors: "Incorrect

email or password" error for incorrect
login details.

Product Search Test Data: Search term:

Laptop No results term:
NonexistentProduct Expected Errors:
 1. Adding to Cart
Test Data:
Product ID: 101
Quantity: 2
Expected Errors:
"Product out of stock" error for unavailable
products. "Invalid quantity" error for negative
or zero quantities. Checkout Process

2. Test Data:

Valid address: 123 Main St, City, State, 12345

Invalid address: 123
Valid payment info: 4111111111111111 (VISA
test number)
Invalid payment info: 1234567890123456
Expected Errors:
"Invalid address format" error for incorrect
addresses. "Payment declined" error for invalid
payment details.

3. Order Tracking
Test Data:
Valid order ID: 2023ORD001
Invalid order ID: 0000
Expected Errors:

"Order not found" error for invalid order IDs.

Summary of Errors for Each Test Case

User Registration
Invalid email format.
Password too weak.
Email already registered.

Login

Incorrect email or password.

Account not activated.

Product Search
No products found.
Search term too short.

Adding to Cart
Product out of stock.
Invalid quantity.

Checkout Process
Invalid address format.
Payment declined.
Missing required fields.

Order Tracking
Order not found.
Invalid order ID format.
Reports Testing Techniques and Strategies

1. Unit Testing:
Purpose: Test individual components in isolation.
Techniques: Use frameworks like Jest (JavaScript), unittest
(Python), or PHPUnit (PHP).
Example: Test the function that adds items to the cart.
2. Integration Testing:
Purpose: Test interactions between integrated components.
Techniques: Use tools like Postman for API testing or
integration testing frameworks.
Example: Test the interaction between the frontend and
backend during the checkout process.
3. Functional Testing:
Purpose: Verify the system works according to the functional
requirements.
Techniques: Use Selenium for automated UI testing.
Example: Test user registration and login functionalities.
4. System Testing:
Purpose: Test the complete and integrated application.
Techniques: End-to-end testing using tools like Cypress.
Example: Test the entire shopping process from browsing
products to placing an order.

5. Performance Testing:
Purpose: Assess the application’s performance under load.
Techniques: Use JMeter to simulate user traffic and measure
response times.
Example: Simulate multiple users to test response times.
tables figures
screen shorts

add
Website Logo to c
art
sers
U

help Watch list

Search Box
Implementation and Maintenance for Online
Shopping Website

Implementation

1. Planning:
Define project scope, objectives, and deliverables.
Identify the technology stack (e.g., [Link] for
frontend, [Link] for backend).
Create a detailed project plan with milestones and
deadlines.
Allocate tasks and responsibilities among team
members.
2. Design:
Design wireframes and mockups for the user
interface.
Define the database schema and data flow diagrams.
Create technical documentation for the architecture
and design.
3. Development:
Frontend Development:
Develop the user interface using HTML, CSS, and
JavaScript.
Implement responsive design for compatibility
across devices.
Use frontend frameworks like [Link] or
[Link].
 3. Testing:
Conduct unit, integration, and system testing to ensure
functionality. Perform user acceptance testing (UAT) to
validate with end users. Fix bugs and optimize performance
based on feedback.

4. Deployment:
Choose a hosting provider (AWS, DigitalOcean, or shared
hosting).
Set up the server environment and deploy the application.
Configure DNS settings for the domain name.
Ensure SSL certificates are installed for secure data
transmission.
5. Training:
Provide training sessions for administrators and support
staff. Create user manuals and documentation for
reference. Offer training videos or tutorials for end users.

6. Launch:
Perform a final round of testing in the live environment.
Announce the launch through marketing channels.
Monitor the system closely for any post-launch issues
 Maintenance 1.
Regular Updates:
Software Updates:
Update libraries, frameworks, and dependencies regularly.
Apply security patches to the server and database promptly.
Feature Enhancements:
Add new features based on user feedback and market trends.
Improve existing features for better usability and performance.
2. Monitoring:
Performance Monitoring:
Use tools like Google Analytics and server monitoring software to
track website performance.
Monitor key metrics such as load times, server uptime, and user
interactions.
Security Monitoring:
Regularly scan for vulnerabilities using security tools.
Monitor for suspicious activities and potential breaches.
3. Backup and Recovery:
Schedule regular backups of the database and website files.
Ensure backups are stored securely and can be restored quickly in
case of data loss.
4. User Support:
Provide customer support through chat, email, or phone.
Maintain a knowledge base or FAQ section to address common
issues.
Track and respond to user feedback and issues promptly.

5. Bug Fixes:
Maintain a bug tracking system to log and manage reported issues.
Prioritize and address critical bugs promptly.
Release regular updates to fix bugs and improve performance.
 Conclusion

The development of an online shopping website as

part of a college project is a valuable learning
experience that integrates planning, design,
implementation, testing, and maintenance. This
project demonstrates the importance of a user-
centric approach and the necessity of continuous
improvement to ensure functionality, security, and
user satisfaction. Key takeaways include:

Holistic Approach: Comprehensive planning,

robust design, and effective execution are
critical.
Thorough Testing: Rigorous testing ensures the
system’s reliability and security.
Ongoing Maintenance: Regular updates and user
support maintain the website’s performance.
User-Centric Design: A seamless user experience
is essential for customer retention.

This project equips students with practical skills and prepares them
for real-world challenges in web development and e-commerce,
laying a solid foundation for future professional endeavors.
 Future scope and further
enhancement of the project
Future Scope
Mobile App Development:
Create mobile apps for Android and iOS for broader
accessibility.
Advanced Search and Filtering:
Implement AI-driven search and advanced filtering
options.
Personalization and Recommendations:
Use machine learning for personalized product
recommendations.
Enhanced Security:
Introduce two-factor authentication and biometric
security.
More Payment Gateways:
Support additional payment options like Apple Pay and
cryptocurrencies.
Global Expansion:
Add multi-language and multi-currency support.
AI and Chatbots:
Integrate AI chatbots for 24/7 customer support.
Enhanced Analytics:
Use advanced tools for detailed user behavior and sales
analysis.
Augmented Reality:
Implement AR to visualize products in real-world
settings.
Further Enhancements
1. User Experience:
Refine the UI based on feedback and conduct A/B
testing.
2. Performance Optimization:
Improve website performance and use CDNs for
faster content delivery.
3. Inventory Management:
Develop advanced tools for tracking stock and
managing orders.
4. Loyalty Programs:
Introduce loyalty programs and personalized
discounts.
5. Social Media Integration:
Enable social media sharing and login options.
6. User-Generated Content:
Allow customer reviews, ratings, and photo uploads.
7. Scalability:
Ensure the website can scale with user and
transaction growth.
8. Automated Marketing:
Use marketing automation for personalized
promotions.
9. Sustainability Initiatives:

Promote eco-friendly practices and products.

Bibliography/References

1. Books:
Freeman, Adam. Pro [Link] Core 3. Apress, 2020.
Nixon, Robin. Learning PHP, MySQL & JavaScript.
O'Reilly Media, 2018.
2. Articles:
Smith, Jake. "The Importance of User Experience in E-
Commerce." E-Commerce Times, 2021.
Williams, Amanda. "Security Best Practices for E-
Commerce Websites." Cybersecurity Magazine, 2023.
3. Websites:
W3Schools. "HTML Tutorial." Link
Mozilla Developer Network (MDN). "JavaScript Guide."
Link

4. Software Documentation:
[Link] Documentation. "Getting Started with React."
Link
[Link] Documentation. "Introduction to [Link]." Link

5. Online Courses:

Coursera. "Full-Stack Web Development with React."

Link
Udemy. "Building E-Commerce Websites with WordPress
& WooCommerce." Link

These references provide a foundation of knowledge and

resources used in the development of the online shopping
website project.
Appendices (if required)

A. Technologies Used

Frontend: HTML, CSS, JavaScript, [Link] Backend:

[Link], [Link] Database: MongoDB Additional
Tools: Git, VS Code, Postman

B. User Stories
[Link] a user, I want to be able to browse products by
category.

[Link] a user, I want to add items to my shopping cart

and proceed to checkout.

[Link] a user, I want to register for an account and log

in securely. As an administrator, I want to manage

product listings and inventory. As an administrator, I
want to view and process customer orders.

C. Wireframes [Link to Wireframes] D. Mockups [Link to

Mockups] E. Project Repository [Link to GitHub Repository]