-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
795 lines (752 loc) · 53.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./icon/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css">
<title>Microsoft</title>
</head>
<body>
<!-- Start Project @ Pourya-Alipanah -->
<!-- Start navbar -->
<nav class="navbar navbar-expand-lg " id="top">
<div class="container-fluid p-0 h-100">
<button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form action="#" method="get" class="search d-flex d-lg-none align-items-center">
<div class="input-g d-flex align-items-center position-relative">
<input type="search" id="search2" name="search2" class="form-control mx-2">
<label for="search2" class="form-label d-flex gap-1 m-0 position-absolute"><span class="d-none d-xl-inline-block">Search</span><img src="./icon/menu/magnifying-glass.svg" alt="mglass"></label>
</div>
</form>
<a class="logo navbar-brand float-lg-start flex-fill flex-lg-grow-0 text-center" href="#"><img src="./images/logo.png" alt="logo"></a>
<div class="cart2 mx-2 mx-sm-3 d-lg-none d-block" data-bs-toggle="tooltip" data-bs-placement="bottom" title="0 items in shopping cart">
<a class="nav-link d-flex flex-row gap-1" href="#"><span class="d-none d-xl-inline-block">Cart</span><img src="./icon/menu/cart-shopping.svg" alt="cart"></a>
</div>
<!-- Modal trigger button -->
<div type="button" class="signin2 mx-2 mx-sm-3 d-lg-none d-block" data-bs-toggle="modal" data-bs-target="#signin">
<a class="nav-link d-flex flex-row gap-2" ><span class="d-none d-xl-inline-block">Sign in</span><img src="./icon/menu/user-plus.svg" alt="signin"></a>
</div>
<!-- Modal Body-->
<div class="modal fade" id="signin" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitleId">Sign in</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form action="#" method="get" class="was-validated">
<div class="mb-3 form-floating">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" required>
<div class="invalid-feedback">Required</div>
<div class="valid-feedback">Wellcome</div>
<label for="email" class="form-label">Enter your Email to Signin:</label>
</div>
<div class="mb-3 form-floating">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<label for="pwd" class="form-label">Password:</label>
</div>
<div class="mt-2">Have not account? <a href="#" class="text-decoration-none btn-link">SignUp</a></div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign In</button>
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav d-none mt-2 mt-lg-0 d-lg-flex">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Microsoft 365</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Teams</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Windows</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Surface</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Xbox</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Deals</a>
</li>
<li class="nav-item d-none d-xl-inline-block">
<a class="nav-link active " href="#" aria-current="page">Small Business</a>
</li>
<li class="nav-item d-none d-xl-inline-block">
<a class="nav-link active " href="#" aria-current="page">Support</a>
</li>
<li class="nav-item dropdown d-inline-block d-xl-none">
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">More</a>
<div class="dropLink dropdown-menu p-0">
<a class="dropdown-item py-3 ps-4" href="#">Small Business</a>
<a class="dropdown-item py-3 ps-4" href="#">Support</a>
</div>
</li>
</ul>
<ul class="navbar-nav d-lg-none m-0 d-flex">
<li class="nav-item">
<a class="nav-link active p-0" href="#" aria-current="page">Microsoft 365</a>
</li>
<li class="nav-item">
<a class="nav-link active p-0" href="#" aria-current="page">Teams</a>
</li>
<li class="nav-item">
<a class="nav-link active p-0" href="#" aria-current="page">Windows</a>
</li>
<li class="nav-item">
<a class="nav-link active p-0" href="#" aria-current="page">Surface</a>
</li>
<li class="nav-item">
<a class="nav-link active p-0" href="#" aria-current="page">Xbox</a>
</li>
<li class="nav-item">
<a class="nav-link active p-0" href="#" aria-current="page">Deals</a>
</li>
<li class="nav-item">
<a class="nav-link active p-0 " href="#" aria-current="page">Small Business</a>
</li>
<li class="nav-item">
<a class="nav-link active p-0 " href="#" aria-current="page">Support</a>
</li>
<li class="accordion" id="accordion1">
<div class="accordion-item">
<h2 class="accordion-header" id="heading1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Software
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="heading1" data-bs-parent="#accordion1">
<div class="accordion-body d-flex flex-column">
<a href="#" class="text-decoration-none text-dark">Windows Apps</a>
<a href="#" class="text-decoration-none text-dark">AI</a>
<a href="#" class="text-decoration-none text-dark">Outlook</a>
<a href="#" class="text-decoration-none text-dark">OneDrive</a>
<a href="#" class="text-decoration-none text-dark">Microsoft Teams</a>
<a href="#" class="text-decoration-none text-dark">OneNote</a>
<a href="#" class="text-decoration-none text-dark">Microsoft Edge</a>
<a href="#" class="text-decoration-none text-dark">Skype</a>
</div>
</div>
</div>
</li>
<li class="accordion" id="accordion2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
PCs & Devices
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordion2">
<div class="accordion-body d-flex flex-column">
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Computers</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Shop Xbox</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Accesories</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">VR & mixed reality</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Phones</a>
</div>
</div>
</div>
</li>
<li class="accordion" id="accordion3">
<div class="accordion-item">
<h2 class="accordion-header" id="heading2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
Entertainment
</button>
</h2>
<div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion3">
<div class="accordion-body d-flex flex-column">
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Xbox Game Pass Ultimate</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">PC Game Pass</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Xbox games</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">PC games</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Windows digital games</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Movies & TV</a>
</div>
</div>
</div>
</li>
<li class="accordion" id="accordion4">
<div class="accordion-item">
<h2 class="accordion-header" id="heading3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
Business
</button>
</h2>
<div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordion4">
<div class="accordion-body d-flex flex-column">
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Cloud</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Security</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Dynamic 365</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft 365 for business</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Power Platform</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Windows 365</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Industry</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Small Business</a>
</div>
</div>
</div>
</li>
<li class="accordion" id="accordion5">
<div class="accordion-item">
<h2 class="accordion-header" id="heading4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
Developer & IT
</button>
</h2>
<div id="collapse5" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#accordion5">
<div class="accordion-body d-flex flex-column">
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Azure</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Developer Center</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Documentation</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Learn</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Tech Community</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Azure Marketplace</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">AppSource</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Visual Studio</a>
</div>
</div>
</div>
</li>
<li class="accordion" id="accordion6">
<div class="accordion-item">
<h2 class="accordion-header" id="heading5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
Other
</button>
</h2>
<div id="collapse6" class="accordion-collapse collapse" aria-labelledby="heading5" data-bs-parent="#accordion6">
<div class="accordion-body d-flex flex-column">
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Rewards</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Free downloads & security</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Education</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Virtual workshops and training</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Gift cards</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Students and parents deals</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Licensing</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Experience Center</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="text-decoration-none p-0 text-dark text-uppercase">view sitemap </a>
</li>
</ul>
<div class="right ms-auto d-lg-flex d-none flex-row align-items-center">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">All Microsoft</a>
<div class="mdrop dropdown-menu p-0" aria-labelledby="dropdownId">
<div class="cont row p-0 w-100 m-0">
<div class="d-flex flex-column p-0">
<span class="text-decoration-none text-dark fw-bold py-3 ps-4">Software</span>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Windows Apps</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">AI</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Outlook</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">OneDrive</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Teams</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">OneNote</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Edge</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Skype</a>
</div>
<div class="d-flex flex-column p-0">
<span class="text-decoration-none text-dark fw-bold py-3 ps-4">PCs & Devices</span>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Computers</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Shop Xbox</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Accesories</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">VR & mixed reality</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Phones</a>
</div>
<div class="d-flex flex-column p-0">
<span class="text-decoration-none text-dark fw-bold py-3 ps-4">Entertainment</span>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Xbox Game Pass Ultimate</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">PC Game Pass</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Xbox games</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">PC games</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Windows digital games</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Movies & TV</a>
</div>
<div class="d-flex flex-column p-0">
<span class="text-decoration-none text-dark fw-bold py-3 ps-4">Business</span>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Cloud</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Security</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Dynamic 365</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft 365 for business</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Power Platform</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Windows 365</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Industry</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Small Business</a>
</div>
<div class="d-flex flex-column p-0">
<span class="text-decoration-none text-dark fw-bold py-3 ps-4">Developer & IT</span>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Azure</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Developer Center</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Documentation</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Learn</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Tech Community</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Azure Marketplace</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">AppSource</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Visual Studio</a>
</div>
<div class="d-flex flex-column p-0">
<span class="text-decoration-none text-dark fw-bold py-3 ps-4">Other</span>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Rewards</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Free downloads & security</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Education</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Virtual workshops and training</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Gift cards</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Students and parents deals</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Licensing</a>
<a href="#" class="text-decoration-none text-dark py-3 ps-4">Microsoft Experience Center</a>
</div>
</div>
<div class="foot row m-0 p-0 text-uppercase justify-content-center align-items-center">
<a href="#" class="text-decoration-none p-0 text-center">view sitemap ></a>
</div>
</div>
</div>
<form action="#" method="get" class="d-flex align-items-center">
<div class="input-g w-100 h-100 d-flex align-items-center position-relative">
<input type="search" id="search" name="search" class="form-control mx-2">
<label for="search" class="form-label d-flex gap-1 m-0 position-absolute" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Search Microsoft.com"><span class="d-none d-xl-inline-block">Search</span><img src="./icon/menu/magnifying-glass.svg" alt="mglass"></label>
</div>
</form>
<div class="cart mx-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="0 items in shopping cart">
<a class="nav-link d-flex flex-row gap-1" href="#"><span class="d-none d-xl-inline-block">Cart</span><img src="./icon/menu/cart-shopping.svg" alt="cart"></a>
</div>
<div type="button" class="signin mx-2" data-bs-toggle="modal" data-bs-target="#signin2">
<a class="nav-link d-flex flex-row gap-2"><span class="d-none d-xl-inline-block">Sign in</span><img src="./icon/menu/user-plus.svg" alt="signin"></a>
</div>
<!-- Modal Body-->
<div class="modal fade" id="signin2" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitleId">Sign in</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<form action="#" method="get" class="was-validated">
<div class="mb-3 form-floating">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" required>
<div class="invalid-feedback">Required</div>
<div class="valid-feedback">Wellcome</div>
<label for="email" class="form-label">Enter your Email to Signin:</label>
</div>
<div class="mb-3 form-floating">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<label for="pwd" class="form-label">Password:</label>
</div>
<div class="mt-2">Have not account? <a href="#" class="text-decoration-none btn-link">SignUp</a></div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- End navbar -->
<!-- Start main -->
<main class="container-fluid p-0">
<div class="wrapper container-fluid p-0">
<!-- Start Carousel slider -->
<div class="carousell col-12 m-0 mb-5">
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/carousel/1.webp" alt="1" class="d-block w-100">
<div class="carousel-caption d-flex flex-column align-items-start">
<h1 class="mb-md-4 mb-3 text-black">Microsoft 365</h1>
<p class="mb-md-4 mb-3 text-black w-50 text-start">
Turn your ideas into reality, stay safer online and off, and focus on what matters most with Microsoft 365 apps
</p>
<button class="btn btn-primary">Choose your Microsoft 365</button>
</div>
</div>
<div class="carousel-item">
<img src="images/carousel/2.webp" alt="2" class="d-block w-100 ">
<div class="carousel-caption caption2 d-flex flex-column align-items-start bg-white w-50 rounded-2">
<h2 class="mb-md-4 mb-3 text-black text-start">Save up to $300 on new Surface Pro 9</h2>
<p class="mb-md-4 mb-3 text-black text-start">
The tablet flexibility you want and the laptop performance you need—all in one ultra-portable device. Offer ends 4/9.
</p>
<button class="btn btn-primary">Shop Surface Pro 9</button>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<!-- End Carousel slider -->
<!-- Start Mid Adds -->
<div class="mid-ads mb-md-5 mb-3 col-12 p-0">
<div class="row m-0 flex-row justify-content-center align-items-center">
<div class="d-flex flex-column align-items-center w-auto mx-4 my-3 p-0">
<img src="./images/mid-ads/1.webp" alt="1" class="mb-2">
<a href="#">Shop Surface devices</a>
</div>
<div class="d-flex flex-column align-items-center w-auto mx-4 my-3 p-0">
<img src="./images/mid-ads/2.webp" alt="2" class="mb-2">
<a href="#">Choose your Microsoft 365</a>
</div>
<div class="d-flex flex-column align-items-center w-auto mx-4 my-3 p-0">
<img src="./images/mid-ads/3.webp" alt="3" class="mb-2">
<a href="#">Buy Xbox games and consoles</a>
</div>
<div class="d-flex flex-column align-items-center w-auto mx-4 my-3 p-0">
<img src="./images/mid-ads/2.webp" alt="4" class="mb-2">
<a href="#">Get Windows 11</a>
</div>
<div class="d-flex flex-column align-items-center w-auto mx-4 my-3 p-0">
<img src="./images/mid-ads/4.webp" alt="5" class="mb-2">
<a href="#">Shop for accessories</a>
</div>
<div class="d-flex flex-column align-items-center w-auto mx-4 my-3 p-0">
<img src="./images/mid-ads/5.webp" alt="6" class="mb-2">
<a href="#">Shop Business</a>
</div>
</div>
</div>
<!-- End Mid Adds -->
<!-- Start first Cards -->
<div class="firstCards mb-md-5 mb-3 col-12 p-0">
<div class="row w-100 m-0 p-0 d-flex flex-row flex-wrap mx-auto justify-content-center h-100 row-cols-1 row-cols-sm-2 row-cols-lg-4">
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/firstCards/1.webp" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0">New</span></h5>
<h4 class="card-title fw-bold mb-3 h3">Surface Laptop 5</h4>
<p class="card-text">
Sleek portability and multitasking speed powered by 12th Gen Intel® Core, with Windows 11.
</p>
<a href="#" class="btn btn-primary">Shop Now</a>
</div>
</div>
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/firstCards/2.jpeg" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0"></span></h5>
<h4 class="card-title fw-bold mb-3 h3">Up to $500 off select Surface Laptop Studio</h4>
<p class="card-text">
Flex your creative muscle with a touchscreen device that seamlessly transitions from laptop to portable creative canvas. Offer ends 4/2.
</p>
<a href="#" class="btn btn-primary">Shop Surface Laptop Studio</a>
</div>
</div>
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/firstCards/3.webp" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0"></span></h5>
<h4 class="card-title fw-bold mb-3 h3">Power your adventure</h4>
<p class="card-text">
Get an Xbox Series X and Forza Horizon 5 Premium Edition.
</p>
<a href="#" class="btn btn-primary">Shop Xbox Series X Bundle</a>
</div>
</div>
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/firstCards/4.webp" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0"></span></h5>
<h4 class="card-title fw-bold mb-3 h3">Buy an Xbox Series S, get 50% off a select controller</h4>
<p class="card-text">
For a limited time, save when you add an additional Xbox Wireless Controller to your Xbox Series S purchase. Offer ends 4/1.
</p>
<a href="#" class="btn btn-primary">Shop Xbox Series S</a>
</div>
</div>
</div>
</div>
<!-- End first Cards -->
<!-- Start game Pass -->
<div class="gamePass mb-md-3 mb-5 col-12 p-0 w-100 mx-auto">
<div class="row w-100 m-0 p-0 d-flex flex-row bg-dark position-relative">
<div class="w-100 p-0 d-flex flex-md-row flex-column align-items-center">
<div class="card w-25 mb-xl-0 mb-5 border-0 rounded-0 position-absolute text-white d-xl-inline-block d-none">
<div class="card-body px-0">
<h4 class="card-title mb-3 h1">
Xbox Game Pass
</h4>
<p class="card-text">
Play hundreds of high-quality games on your console and PC, including new games on day one, online multiplayer, and EA Play
</p>
<a href="#" class="btn btn-primary">Compare all plans</a>
</div>
</div>
<img src="./images/gamePass/1.jpeg" alt="pic" class="img-fluid w-100 d-xl-inline-block d-none">
<img src="./images/gamePass/2.webp" alt="pic" class="img-fluid w-100 d-inline-block d-xl-none">
<div class="card2 card w-25 border-0 rounded-0 position-absolute d-inline-block d-xl-none">
<div class="card-body p-0">
<h4 class="card-title mb-3 fw-bold h4">
Xbox Game Pass
</h4>
<p class="card-text w-100">
Play hundreds of high-quality games on your console and PC, including new games on day one, online multiplayer, and EA Play
</p>
<a href="#" class="btn btn-primary">Compare all plans</a>
</div>
</div>
</div>
</div>
</div>
<!-- End game Pass -->
<!-- Start business Cards -->
<div class="businessCards mb-md-5 mb-3 mt-md-5 mt-3 col-12 p-0">
<div class="row w-100 m-0 p-0 d-flex flex-row flex-wrap mx-auto justify-content-center h-100 row-cols-1 row-cols-sm-2 row-cols-lg-4">
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/businessCards/1.webp" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0">New</span></h5>
<h4 class="card-title fw-bold mb-3 h3">Surface Pro 9 for Business</h4>
<p class="card-text">
Empower flexible, all-day impact with tablet portability and laptop performance. Questions? Book an online consultation.
</p>
<a href="#" class="btn btn-primary mb-lg-2 mb-0 me-3">Shop Now</a>
<a href="#" class="btn btn-primary mb-lg-2 mb-0">Book a consultation</a>
</div>
</div>
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/businessCards/2.webp" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0"></span></h5>
<h4 class="card-title fw-bold mb-3 h3">Microsoft 365 Copilot</h4>
<p class="card-text">
Discover a new way to work with next-gen AI embedded in the Microsoft 365 apps you use every day.
</p>
<a href="#" class="btn btn-primary btn-sm mb-2">Learn more about Microsoft 365 Copilot</a>
<a href="#" class="btn btn-sm btn-primary">Explore Microsoft 365 for Business</a>
</div>
</div>
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/businessCards/3.webp" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0"></span></h5>
<h4 class="card-title fw-bold mb-3 h3">Get Microsoft Teams for free</h4>
<p class="card-text">
Online meetings, chat, and shared cloud storage—all in one place.
</p>
<a href="#" class="btn btn-primary">Sign up for free</a>
</div>
</div>
<div class="card mb-xl-0 mb-5 border-0 rounded-0">
<img class="card-img-top w-100 rounded-0" src="./images/businessCards/4.webp" alt="Card image">
<div class="card-body px-0">
<h5><span class="badge text-black bg-warning rounded-0"></span></h5>
<h4 class="card-title fw-bold mb-3 h3">Grow your small business</h4>
<p class="card-text">
Learn how digital transformation helps drive business progress, results, and innovation.
</p>
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>
</div>
</div>
<!-- End business Cards -->
<!-- Start SecondCarousel slider -->
<div class="carousell carousell2 col-11 mx-auto mb-5">
<!-- Carousel -->
<div id="demo2" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo2" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo2" data-bs-slide-to="1"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/SecondCarousel/1.jpg" alt="1" class="d-none d-xxl-block w-100">
<img src="images/SecondCarousel/1xl.jpg" alt="1" class="d-none d-xxl-none d-xl-block w-100">
<img src="images/SecondCarousel/1lg.webp" alt="1" class="d-block d-xl-none w-100">
<div class="carousel-caption d-flex flex-column align-items-start">
<h2 class="mb-md-4 mb-3 text-white">An homage to a remarkable woman</h2>
<p class="mb-md-4 mb-3 text-white w-50 text-start">
Explore the legacy of Coretta Scott King through a digital timeline exhibition made possible by Microsoft Azure
</p>
<button class="btn btn-primary">Learn about the virtual exhibit</button>
</div>
</div>
<div class="carousel-item">
<img src="images/SecondCarousel/2.webp" alt="2" class="d-none d-xxl-block w-100 ">
<img src="images/SecondCarousel/2xl.webp" alt="2" class="d-none d-xxl-none d-xl-block w-100 ">
<img src="images/SecondCarousel/2lg.webp" alt="2" class="d-block d-xl-none w-100 ">
<div class="carousel-caption caption2 d-flex flex-column align-items-start w-50">
<h2 class="mb-md-4 mb-3 text-white text-start">Shrinking the digital gender gap</h2>
<p class="mb-md-4 mb-3 text-white text-start">
See how Microsoft’s Airband initiative has helped change the lives of women in remote areas by connecting them to high-speed internet
</p>
<button class="btn btn-primary">Learn more about the initiative</button>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo2" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo2" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<!-- End SecondCarousel slider -->
<!-- Start follow -->
<div class="follow col-12">
<div class="row m-0 p-0 d-flex flex-row justify-content-start align-items-center w-100 h-100">
<div class="w-auto">Follow Microsoft</div>
<div class="pic d-flex flex-row w-auto m-0 p-0">
<a href="#" class="me-2">
<img src="./icon/follow/face.webp" alt="1" class="img-fluid">
</a>
<a href="#" class="me-2">
<img src="./icon/follow/twit.webp" alt="2" class="img-fluid">
</a>
<a href="#" class="me-2">
<img src="./icon/follow/link.webp" alt="3" class="img-fluid">
</a>
</div>
</div>
</div>
<!-- End follow -->
<!-- Start backbutton -->
<div class="backToTop col-12 p-3 justify-content-end">
<div class="row m-0 p-0 justify-content-end">
<a href="#top" class="btn btn-secondary w-auto">Back to top</a>
</div>
</div>
<!-- End backbutton -->
</div>
</main>
<!-- End main -->
<!-- Start Footer -->
<footer class="mt-5 col-12 text-start">
<div class="cont row p-0 w-100 m-0">
<div class="ul d-flex flex-column">
<span class="text-decoration-none fw-bold pb-1">What's new</span>
<a href="#" class="text-decoration-none py-2">Surface Pro 9</a>
<a href="#" class="text-decoration-none py-2">Surface Laptop 5</a>
<a href="#" class="text-decoration-none py-2">Surface Studio 2+</a>
<a href="#" class="text-decoration-none py-2">Surface Laptop Go 2</a>
<a href="#" class="text-decoration-none py-2">Surface Laptop Studio</a>
<a href="#" class="text-decoration-none py-2">Surface Go 3</a>
<a href="#" class="text-decoration-none py-2">Microsoft 365</a>
<a href="#" class="text-decoration-none py-2">Windows 11 apps</a>
</div>
<div class="ul d-flex flex-column">
<span class="text-decoration-none fw-bold pb-1">Microsoft Store</span>
<a href="#" class="text-decoration-none py-2">Account profile</a>
<a href="#" class="text-decoration-none py-2">Download Cneter</a>
<a href="#" class="text-decoration-none py-2">Microsoft Wtore support</a>
<a href="#" class="text-decoration-none py-2">Returns</a>
<a href="#" class="text-decoration-none py-2">Order tracking</a>
<a href="#" class="text-decoration-none py-2">Virtual workshops and training</a>
<a href="#" class="text-decoration-none py-2">Microsoft Store Promise</a>
<a href="#" class="text-decoration-none py-2">Flexible Payments</a>
</div>
<div class="ul d-flex flex-column p-0">
<span class="text-decoration-none fw-bold pb-1">Education</span>
<a href="#" class="text-decoration-none py-2">Microsoft in education</a>
<a href="#" class="text-decoration-none py-2">Devices for education</a>
<a href="#" class="text-decoration-none py-2">Microsoft Teams for Education</a>
<a href="#" class="text-decoration-none py-2">Microsoft 365 Education</a>
<a href="#" class="text-decoration-none py-2">How to buy for your school</a>
<a href="#" class="text-decoration-none py-2">Educator training and development</a>
<a href="#" class="text-decoration-none py-2">Deals for students and parents</a>
<a href="#" class="text-decoration-none py-2">Azure for students</a>
</div>
<div class="ul d-flex flex-column p-0">
<span class="text-decoration-none fw-bold pb-1">Business</span>
<a href="#" class="text-decoration-none py-2">Microsoft Cloud</a>
<a href="#" class="text-decoration-none py-2">Microsoft Security</a>
<a href="#" class="text-decoration-none py-2">Dynamic 365</a>
<a href="#" class="text-decoration-none py-2">Microsoft 365 for business</a>
<a href="#" class="text-decoration-none py-2">Microsoft Power Platform</a>
<a href="#" class="text-decoration-none py-2">Windows 365</a>
<a href="#" class="text-decoration-none py-2">Microsoft Industry</a>
<a href="#" class="text-decoration-none py-2">Small Business</a>
</div>
<div class="ul d-flex flex-column p-0">
<span class="text-decoration-none fw-bold pb-1">Developer & IT</span>
<a href="#" class="text-decoration-none py-2">Azure</a>
<a href="#" class="text-decoration-none py-2">Developer Center</a>
<a href="#" class="text-decoration-none py-2">Documentation</a>
<a href="#" class="text-decoration-none py-2">Microsoft Learn</a>
<a href="#" class="text-decoration-none py-2">Microsoft Tech Community</a>
<a href="#" class="text-decoration-none py-2">Azure Marketplace</a>
<a href="#" class="text-decoration-none py-2">AppSource</a>
<a href="#" class="text-decoration-none py-2">Visual Studio</a>
</div>
<div class="ul d-flex flex-column p-0">
<span class="text-decoration-none fw-bold pb-1">Company</span>
<a href="#" class="text-decoration-none py-2">Careers</a>
<a href="#" class="text-decoration-none py-2">About Microsoft</a>
<a href="#" class="text-decoration-none py-2">Companu news</a>
<a href="#" class="text-decoration-none py-2">Privacy at Microsoft</a>
<a href="#" class="text-decoration-none py-2">Investors</a>
<a href="#" class="text-decoration-none py-2">Diversity and indusion</a>
<a href="#" class="text-decoration-none py-2">Accessibility</a>
<a href="#" class="text-decoration-none py-2">Sustainability</a>
</div>
</div>
<div class="foot row p-0 w-100 my-0 mx-auto">
<a href="#" class="text-decoration-none p-0 w-auto"><span><img src="./icon/footer/earth-americas.svg" alt="lang"></span>English (United States)</a>
<div class="list d-flex flex-row justify-content-end align-items-center flex-fill w-auto p-0 m-0">
<a href="#" class="text-decoration-none p-0 w-auto">Sitemap</a>
<a href="#" class="text-decoration-none p-0 w-auto">Contact Microsoft</a>
<a href="#" class="text-decoration-none p-0 w-auto">Privacy</a>
<a href="#" class="text-decoration-none p-0 w-auto">Manage cookies</a>
<a href="#" class="text-decoration-none p-0 w-auto">Terms of use</a>
<a href="#" class="text-decoration-none p-0 w-auto">Trademarks</a>
<a href="#" class="text-decoration-none p-0 w-auto">Safety & eco</a>
<a href="#" class="text-decoration-none p-0 w-auto">Recycling</a>
<a href="#" class="text-decoration-none p-0 w-auto">About our ads</a>
<a href="#" class="text-decoration-none p-0 w-auto">© <span class="text-warning">Pourya-Alipanah</span> Microsoft 2023</a>
</div>
</div>
</footer>
<!-- End Footer -->
<!-- add script tags -->
<script src="./bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
<!-- End Project -->
</body>
</html>