-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
524 lines (517 loc) · 32.7 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
<!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">
<title>Ali Behzad | First Bootstrap Project</title>
<!-- csses -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-icons-1.7.1/bootstrap-icons.css">
<link rel="stylesheet" href="css/reboot.css">
</head>
<body id="up">
<div class="bg-dark sticky-top p-3 shadow" style="opacity: 0.90;">
<nav class="navbar navbar-expand-lg navbar-dark container">
<a class="navbar-brand fs-2" href="#">Hello World</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="d-flex">
<button class="btn btn-primary px-5" data-bs-toggle="modal" data-bs-target="#modal"
type="button">Get
Start</button>
</div>
</div>
</nav>
</div>
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title border-3 border-start border-primary ps-2 text-dark">Start buddy</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input class="form-control" type="email" placeholder="Enter your Email">
</div>
<div class="modal-footer">
<button type="button" data-bs-dismiss="modal" class="btn btn-primary">Subscrib</button>
</div>
</div>
</div>
</div>
<!-- header -->
<div class="bg-dark py-4 g-5" style="opacity: 0.92;">
<section class="container">
<div class="row text-center align-items-center">
<div class="col-md-6 mb-2">
<h2 class="display-4 mb-4 text-white">Lorem ipsum dolor sit amet, <span
class="text-warning">consectetur</span>
adipisicing elit.!</h2>
<p class="mb-4 text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
voluptate
sapiente adipisci
doloremque ut optio deleniti tempora obcaecati perferendis eveniet.</p>
<button class="btn btn-primary px-5" data-bs-toggle="modal" data-bs-target="#modal"
type="button">Get
Start</button>
</div>
<div class="col-md-6">
<img src="img/header.svg" alt="image">
</div>
</div>
</section>
</div>
<!-- services -->
<div class="py-5 bg-dark g-5 align-items-center" style="opacity: 0.90;" id="service">
<section class="container pt-5">
<h2 class="text-warning text-center display-6">Our Services</h2>
<h2 class="text-white lead text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum
ratione delectus dicta omnis nulla odio animi aperiam eligendi totam ex. Lorem ipsum dolor
sit amet consectetur, adipisicing elit. Cum laborum alias consequuntur beatae quidem
quisquam porro tenetur rerum magni explicabo!</h2>
<div class="row g-4 mt-4">
<div class="col-lg-4 col-md-6">
<div class="card bg-dark shadow" style="width: 18rem;">
<div class="card-body text-white">
<p class="text-center"><i class="bi bi-cpu text-success display-3"></i></p>
<h5 class="card-title mb-3 text-center">CPU</h5>
<p class="card-text mb-3 text-center">With supporting text below as a natural lead-in to
additional
content.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card bg-dark shadow" style="width: 18rem;">
<div class="card-body text-white">
<p class="text-center"><i class="bi bi-gpu-card text-success display-3"></i></p>
<h5 class="card-title mb-3 text-center">GPU</h5>
<p class="card-text mb-3 text-center">With supporting text below as a natural lead-in to
additional
content.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card bg-dark shadow" style="width: 18rem;">
<div class="card-body text-white">
<p class="text-center"><i class="bi bi-motherboard text-success display-3"></i></p>
<h5 class="card-title mb-3 text-center">MotherBoard</h5>
<p class="card-text mb-3 text-center">With supporting text below as a natural lead-in to
additional
content.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card bg-dark shadow" style="width: 18rem;">
<div class="card-body text-white">
<p class="text-center"><i class="bi bi-device-hdd text-success display-3"></i></p>
<h5 class="card-title mb-3 text-center">HDD</h5>
<p class="card-text mb-3 text-center">With supporting text below as a natural lead-in to
additional
content.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card bg-dark shadow" style="width: 18rem;">
<div class="card-body text-white">
<p class="text-center"><i class="bi bi-device-ssd text-success display-3"></i></p>
<h5 class="card-title mb-3 text-center">SSD</h5>
<p class="card-text mb-3 text-center">With supporting text below as a natural lead-in to
additional
content.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card bg-dark shadow" style="width: 18rem;">
<div class="card-body text-white">
<p class="text-center"><i class="bi bi-controller text-success display-3"></i></p>
<h5 class="card-title mb-3 text-center">Game</h5>
<p class="card-text mb-3 text-center">With supporting text below as a natural lead-in to
additional
content.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- offer site or banner site -->
<div class="py-4 bg-primary g-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="display-4 text-white">Lorem ipsum dolor <span class="text-dark">sit</span> amet.
</h2>
<p class="text-white lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio sunt
possimus, ducimus pariatur voluptate minus cum similique reiciendis soluta nam laudantium
labore temporibus quia esse ullam at ad eos modi qui dignissimos, totam dolores eligendi
doloribus! Id omnis quasi laborum.</p>
<a href="#" class="btn btn-dark">Read more!</a>
</div>
<div class="col-md-6">
<img src="img/1.svg" alt="">
</div>
</div>
</div>
</div>
<div class="py-4 bg-warning g-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h2 class="display-4 text-dark">Lorem ipsum dolor <span class="text-primary">sit</span> amet.
</h2>
<p class="text-dark lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio sunt
possimus, ducimus pariatur voluptate minus cum similique reiciendis soluta nam laudantium
labore temporibus quia esse ullam at ad eos modi qui dignissimos, totam dolores eligendi
doloribus! Id omnis quasi laborum.</p>
<a href="#" class="btn btn-primary">Read more!</a>
</div>
<div class="col-md-6">
<img src="img/2.svg" alt="">
</div>
</div>
</div>
</div>
<!-- new posts -->
<div class="py-4 g-4 bg-dark pt-5" style="opacity: 0.90;">
<section class="container">
<h2 class="text-center display-4 text-warning">Recent Posts</h2>
<p class="lead text-white text-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae maiores
totam deserunt necessitatibus nemo deleniti, blanditiis, non quisquam reiciendis voluptatum ipsa
aspernatur suscipit, possimus perferendis harum pariatur architecto assumenda id. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Cum numquam doloribus omnis eveniet reprehenderit voluptatem?
</p>
<div class="row mt-5">
<div class="col-lg-4">
<div class="card mb-3 shadow bg-dark">
<img src="img/1.svg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text text-white"><small class="text-white">Last updated 3 mins
ago</small></p>
<h5 class="card-title text-warning">The First Post</h5>
<p class="card-text text-white">This is a wider card with supporting text below as a
natural
lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="mt-3 fs-5 nav-link text-success"><i
class="bi bi-arrow-right me-2 text-white"></i>Read
more</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-3 shadow bg-dark">
<img src="img/2.svg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text text-white"><small class="text-white">Last updated 3 mins
ago</small></p>
<h5 class="card-title text-warning">The First Post</h5>
<p class="card-text text-white">This is a wider card with supporting text below as a
natural
lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="mt-3 fs-5 nav-link text-success"><i
class="bi bi-arrow-right me-2 text-white"></i>Read
more</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-3 shadow bg-dark">
<img src="img/4.svg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text text-white"><small class="text-white">Last updated 3 mins
ago</small></p>
<h5 class="card-title text-warning">The First Post</h5>
<p class="card-text text-white">This is a wider card with supporting text below as a
natural
lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="mt-3 fs-5 nav-link text-success"><i
class="bi bi-arrow-right me-2 text-white"></i>Read
more</a>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- our team -->
<div class="py-4 g-4 pt-5 bg-dark" style="opacity: 0.90;" id="team">
<section class="container py-5">
<h2 class="text-center display-4 text-warning">Our Team</h2>
<p class="lead text-white text-center">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae maiores
totam deserunt necessitatibus nemo deleniti, blanditiis, non quisquam reiciendis voluptatum ipsa
aspernatur suscipit, possimus perferendis harum pariatur architecto assumenda id. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Cum numquam doloribus omnis eveniet reprehenderit voluptatem?
</p>
<div class="row mt-5">
<div class="col-lg-4 text-center">
<div class="card mb-3 shadow bg-dark">
<a href="#"><img src="img/photo_2021-04-18_10-56-54.jpg" class="card-img-top img-fluid"
alt="..."></a>
<div class="card-body">
<a href="#" class="nav-link">
<h5 class="card-title text-warning pb-2">Ali Behzad<i
class="bi bi-check-circle-fill ms-1 text-success"></i></h5>
</a>
<p class="card-text text-white">This is a wider card with supporting text below as a
natural
lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="text-white mx-1"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-telegram"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="card mb-4 shadow bg-dark">
<a href="#"><img src="img/Cristiano_Ronaldo_2018.jpg" class="card-img-top img-fluid"
alt="..."></a>
<div class="card-body">
<a href="#" class="nav-link">
<h5 class="card-title text-warning pb-2">Cristiano Ronaldo<i
class="bi bi-check-circle-fill ms-1 text-success"></i></h5>
</a>
<p class="card-text text-white">This is a wider card with supporting text below as a
natural
lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="text-white mx-1"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-telegram"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="card mb-3 shadow bg-dark">
<a href="#"><img src="img/brad-pitt-attends-the-premiere-of-20th-century-foxs--square.jpg"
class="card-img-top img-fluid" alt="..."></a>
<div class="card-body">
<a href="#" class="nav-link">
<h5 class="card-title text-warning pb-2">Brad Pit<i
class="bi bi-check-circle-fill ms-1 text-success"></i></h5>
</a>
<p class="card-text text-white">This is a wider card with supporting text below as a
natural
lead-in to additional content. This content is a little bit longer.</p>
<a href="#" class="text-white mx-1"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-telegram"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-white mx-1"><i class="bi bi-github"></i></a>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- FAQ -->
<div class="py-5 bg-dark g-4" style="opacity: 0.90;">
<section class="container shadow">
<div class="row text-center pb-5">
<h2 class="text-warning pb-3 pt-3">FAQ</h2>
<p class="text-white pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
ratione
nisi vero distinctio quod esse mollitia aliquam a numquam eius! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Repellendus ipsam voluptatum aliquid nulla nisi eius qui libero
consequatur obcaecati eveniet?</p>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button bg-white shadow" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body text-white bg-dark">
<strong>This is the first item's accordion body.</strong> It is shown by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button bg-white collapsed shadow" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body bg-dark text-white">
<strong>This is the second item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button bg-white collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse shadow"
aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body bg-dark text-white">
<strong>This is the third item's accordion body.</strong> It is hidden by default,
until the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing and
hiding via CSS transitions. You can modify any of this with custom CSS or overriding
our default variables. It's also worth noting that just about any HTML can go within
the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- contact us -->
<div class="py-4 g-4 bg-dark" style="opacity: 0.90;" id="contact">
<div class="container shadow pb-3 pt-5">
<h2 class="text-center text-warning pt-4">Contact Us</h2>
<p class="text-white text-center pb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor,
aperiam modi. Nemo
qui ex similique quo est. Eligendi, dolorum pariatur fugiat praesentium aperiam laborum laboriosam
ipsum nobis esse? Impedit tenetur alias porro illum error at iure aut cumque sed eos.</p>
<div class="row text-center">
<div class="card shadow bg-dark col-lg-3 mx-1 mb-2" style="width: 18rem;">
<div class="card-body">
<i class="bi bi-geo-alt text-success pb-5 display-2"></i>
<h4 class="card-title text-white pt-4">Address</h4>
<p class="card-text text-white">Some quick example text to build on the card title and make
up the bulk
of the card's content.</p>
</div>
</div>
<div class="card shadow bg-dark col-lg-3 mx-1 mb-2" style="width: 18rem;">
<div class="card-body">
<i class="bi bi-telephone text-success pb-5 display-2"></i>
<h4 class="card-title text-white pt-4">Telephone</h4>
<p class="card-text text-white">09123456789</p>
</div>
</div>
<div class="card shadow bg-dark col-lg-3 mx-1 mb-2" style="width: 18rem;">
<div class="card-body">
<i class="bi bi-envelope text-success pb-5 display-2"></i>
<h4 class="card-title text-white pt-4">Email</h4>
<p class="card-text text-white">AliBehzad13791122@gmail.com</p>
<p class="card-text text-white">AliBehzad809@gmail.com</p>
</div>
</div>
<div class="card shadow bg-dark col-lg-3 mx-1 mb-2" style="width: 18rem;">
<div class="card-body">
<i class="bi bi-clock text-success pb-5 display-2"></i>
<h4 class="card-title text-white pt-4">Open Hours</h4>
<p class="card-text text-white">Monday - Friday</p>
<p class="card-text text-white">11:00 am - 11:00 pm</p>
</div>
</div>
<div class="row text-start pb-4 pt-4">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label text-white">Full Name</label>
<input type="text" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail" class="form-label text-white">E-mail</label>
<input type="email" class="form-control" id="exampleInputEmail">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="exampleInputtextArea" class="form-label text-white">Message</label>
<textarea type="text" class="form-control" rows="10"
id="exampleInputtextArea"></textarea>
</div>
<button type="submit" class="btn btn-primary w-25">Send</button>
</form>
</div>
</div>
</div>
<!-- footer -->
<div class="py-4 g-4 bg-dark" style="opacity: 0.90;">
<footer class="container shadow pb-3 pt-5">
<div class="row pb-4 pt-4">
<div class="col-md-3">
<h2 class="text-success display-5">Hello World</h2>
<p class="text-white lead text-start">Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Voluptatem officiis minima
expedita hic nulla itaque corporis nostrum maxime, facere aliquid.</p>
</div>
<div class="col-md-3">
<h5 class="text-warning display-6 border-start border-4 border-primary ps-3">Pages</h5>
<ul class="list-unstyled">
<li><a href="#" class="nav-link text-light">Python</a></li>
<li><a href="#" class="nav-link text-light">Django</a></li>
<li><a href="#" class="nav-link text-light">HTML</a></li>
<li><a href="#" class="nav-link text-light">CSS</a></li>
</ul>
</div>
<div class="col-md-3">
<h5 class="text-warning display-6 border-start border-4 border-primary ps-3">Links</h5>
<ul class="list-unstyled">
<li><a href="#" class="nav-link text-light">Python</a></li>
<li><a href="#" class="nav-link text-light">Django</a></li>
<li><a href="#" class="nav-link text-light">HTML</a></li>
<li><a href="#" class="nav-link text-light">CSS</a></li>
</ul>
</div>
<div class="col-md-3">
<h5 class="text-warning display-6 border-start border-4 border-primary ps-3">Categories</h5>
<ul class="list-unstyled">
<li><a href="#" class="nav-link text-light">Python</a></li>
<li><a href="#" class="nav-link text-light">Django</a></li>
<li><a href="#" class="nav-link text-light">HTML</a></li>
<li><a href="#" class="nav-link text-light">CSS</a></li>
</ul>
</div>
</div>
<hr class="text-white">
<div class="text-white text-center">Create By <a href="#"
class="text-decoration-none text-warning">Ali
Behzad <i class="bi bi-heart-fill"></i></a> © 2021
<a href="#up" class="ms-4"><i class="bi bi-arrow-up-circle text-warning fs-2"></i></a>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>