HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">7
<meta http-equiv="x-ua-compatible" content="ie=edge">8
<title>Material Design Bootstrap</title>9
<!-- Font Awesome -->10
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">11
<!-- Bootstrap core CSS -->12
<link href="../css/bootstrap.min.css" rel="stylesheet">13
<!-- Material Design Bootstrap -->14
<link href="../css/mdb.min.css" rel="stylesheet">15
<link rel="stylesheet" href="../css/addons-pro/timeline.min.css">16
<style>17
html,18
body,19
header,20
.view.jarallax {21
height: 100%;22
min-height: 100%;23
}24
</style>25
</head>26
27
<body class="event-lp">28
29
<!-- Navigation & Intro -->30
<header>31
32
<!-- Navbar -->33
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">34
<div class="container">35
<a class="navbar-brand" href="#">Navbar</a>36
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02"37
aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">38
<span class="navbar-toggler-icon"></span>39
</button>40
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">41
<ul class="navbar-nav mr-auto smooth-scroll">42
<li class="nav-item">43
<a class="nav-link" href="#home">Home</a>44
</li>45
<li class="nav-item">46
<a class="nav-link" href="#features" data-offset="80">Features</a>47
</li>48
<li class="nav-item">49
<a class="nav-link" href="#events" data-offset="80">Events</a>50
</li>51
<li class="nav-item">52
<a class="nav-link" href="#tickets" data-offset="40">Tickets</a>53
</li>54
<li class="nav-item">55
<a class="nav-link" href="#faq" data-offset="40">Faq</a>56
</li>57
<li class="nav-item">58
<a class="nav-link" href="#contact" data-offset="80">Contact</a>59
</li>60
<li class="nav-item dropdown ml-4 mb-0">61
<a class="nav-link dropdown-toggle title" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Homepage </a>62
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">63
<a class="dropdown-item" href="#home">Home</a>64
<a class="dropdown-item" href="#features">Features</a>65
<a class="dropdown-item" href="#events">Events</a>66
</div>67
</li>68
</ul>69
<!-- Social Icon -->70
<ul class="navbar-nav nav-flex-icons">71
<li class="nav-item">72
<a class="nav-link">73
<i class="fab fa-facebook-f"></i>74
</a>75
</li>76
<li class="nav-item">77
<a class="nav-link">78
<i class="fab fa-twitter"></i>79
</a>80
</li>81
<li class="nav-item">82
<a class="nav-link">83
<i class="fab fa-instagram"></i>84
</a>85
</li>86
</ul>87
</div>88
</div>89
</nav>90
91
<!-- Intro Section -->92
<div id="home" class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/images/45.jpg);">93
<div class="mask rgba-black-strong">94
<div class="container h-100 d-flex justify-content-center align-items-center mt-5">95
<div class="row smooth-scroll">96
<div class="col-md-12 text-center white-text">97
<div class="wow fadeInDown" data-wow-delay="0.2s">98
<h3 class="display-4 font-weight-bold mb-2 rgba-black-light py-2">Event Agency</h3>99
<hr class="hr-light my-4">100
<h4 class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.101
<p class="clearfix d-none d-md-inline-block">Deleniti onsequuntur, nihil voluptatem modi.</p>102
</h4>103
</div>104
<a href="#about" data-offset="90" class="btn btn-rounded btn-pink wow fadeInUp" data-wow-delay="0.2s">105
Visit us</a>106
</a>107
</div>108
</div>109
</div>110
</div>111
</div>112
</div>113
114
</header>115
<!-- Navigation & Intro -->116
117
<!-- Main content -->118
<main>119
120
<div class="container">121
122
<!-- Section: Features v.1 -->123
<section id="features" class="mt-5 mb-5">124
125
<!-- Section heading -->126
<h3 class="text-center dark-grey-text font-weight-bold mb-5 pt-3 wow fadeIn" data-wow-delay="0.2s">127
<strong>Upcoming events</strong>128
</h3>129
130
<!-- Section description -->131
<p class="text-center w-responsive mx-auto my-5 grey-text wow fadeIn" data-wow-delay="0.2s">132
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum133
dolores reiciendis134
ad voluptas, animi obcaecati adipisci sapiente mollitia? Autem delectus quod accusamus.</p>135
136
<!--Grid row-->137
<div class="row features-small pt-4">138
139
<!--Grid column-->140
<div class="col-md-4 mb-4">141
<div class="col-1 col-md-2 float-left">142
<i class="far fa-calendar-alt indigo-text fa-2x"></i>143
</div>144
<div class="col-10 col-md-9 col-lg-10 float-right">145
<h4 class="font-weight-bold indigo-text">146
<strong>20.07.2018</strong>147
</h4>148
<h6 class="mb-3 font-weight-bold dark-grey-text">Lorem ipsum dolor sit amet</h6>149
<p class="grey-text font-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit150
maiores nam, aperiam151
minima assumenda.</p>152
<a href="" class="font-small font-weight-bold dark-grey-text">read more</a>153
</div>154
</div>155
<!--Grid column-->156
157
<!--Grid column-->158
<div class="col-md-4 mb-4">159
<div class="col-1 col-md-2 float-left">160
<i class="far fa-calendar-alt indigo-text fa-2x"></i>161
</div>162
<div class="col-10 col-md-9 col-lg-10 float-right">163
<h4 class="font-weight-bold indigo-text">164
<strong>12.08.2018</strong>165
</h4>166
<h6 class="mb-3 font-weight-bold dark-grey-text">Lorem ipsum dolor sit amet</h6>167
<p class="grey-text font-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit168
maiores nam, aperiam169
minima assumenda.</p>170
<a href="" class="font-small font-weight-bold dark-grey-text">read more</a>171
</div>172
</div>173
<!--Grid column-->174
175
<!--Grid column-->176
<div class="col-md-4 mb-4">177
<div class="col-1 col-md-2 float-left">178
<i class="far fa-calendar-alt indigo-text fa-2x"></i>179
</div>180
<div class="col-10 col-md-9 col-lg-10 float-right">181
<h4 class="font-weight-bold indigo-text">182
<strong>17.08.2018</strong>183
</h4>184
<h6 class="mb-3 font-weight-bold dark-grey-text">Lorem ipsum dolor sit amet</h6>185
<p class="grey-text font-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit186
maiores nam, aperiam187
minima assumenda.</p>188
<a href="" class="font-small font-weight-bold dark-grey-text">read more</a>189
</div>190
</div>191
<!--Grid column-->192
193
</div>194
<!--Grid row-->195
196
</section>197
<!-- Section: Features v.1 -->198
199
<hr class="">200
201
<!-- Section: Details -->202
<section id="events" class="my-5">203
204
<h3 class="text-center dark-grey-text font-weight-bold mb-5 pt-5 wow fadeIn" data-wow-delay="0.2s">205
<strong>Event Schedule</strong>206
</h3>207
208
<!-- Section description -->209
<p class="text-center w-responsive mx-auto my-5 grey-text wow fadeIn" data-wow-delay="0.2s">Duis aute irure210
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur211
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>212
213
<!-- Timeline -->214
<div class="row mt-5">215
<div class="col-md-12">216
<div class="timeline-main">217
<!-- Timeline Wrapper -->218
<ul class="stepper stepper-vertical timeline timeline-simple pl-0">219
220
<li>221
<!--Section Title -->222
<a href="#!">223
<span class="circle grey"></span>224
</a>225
226
<!-- Section Description -->227
<div class="step-content z-depth-1 ml-3 p-4 hoverable">228
<h4 class="font-weight-bold">Ut enim ad minim veniam</h4>229
<p class="text-muted mt-3">230
<i class="far fa-clock-o" aria-hidden="true"></i> 8.00 - 10.00 |231
<strong class="dark-grey-text font-weight-bold">John Doe - CEO of XYZ</strong>232
</p>233
234
<!--Grid row-->235
<div class="row pt-2">236
237
<!--Grid column-->238
<div class="col-md-3 col-3">239
240
<div class="avatar mx-auto">241
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded img-fluid"242
alt="First sample avatar image">243
</div>244
245
</div>246
<!--Grid column-->247
248
<!--Grid column-->249
<div class="col-md-9 col-9">250
251
<p class="mb-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus252
saepe253
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>254
</div>255
256
</div>257
<!--Grid column-->258
259
</div>260
<!--Grid row-->261
</li>262
<li class="timeline-inverted">263
<!--Section Title -->264
<a href="#!">265
<span class="circle grey"></span>266
</a>267
268
<!-- Section Description -->269
<div class="step-content z-depth-1 mr-xl-3 p-4 hoverable">270
<h4 class="font-weight-bold">Duis aute irure dolor</h4>271
<p class="text-muted mt-3">272
<i class="far fa-clock-o" aria-hidden="true"></i> 11.00 - 12.15 |273
<strong class="dark-grey-text font-weight-bold">Maria Wiliams - CEO of Intel</strong>274
</p>275
276
<!--Grid row-->277
<div class="row pt-2">278
279
<!--Grid column-->280
<div class="col-md-3 col-3">281
282
<div class="avatar mx-auto">283
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded img-fluid"284
alt="First sample avatar image">285
</div>286
287
</div>288
<!--Grid column-->289
290
<!--Grid column-->291
<div class="col-md-9 col-9">292
293
<p class="mb-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus294
saepe295
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>296
</div>297
298
</div>299
<!--Grid column-->300
301
</div>302
<!--Grid row-->303
</li>304
<li>305
<!--Section Title -->306
<a href="#!">307
<span class="circle grey"></span>308
</a>309
310
<!-- Section Description -->311
<div class="step-content z-depth-1 ml-3 p-4 hoverable">312
<h4 class="font-weight-bold">Sed ut nihil unde omnis</h4>313
<p class="text-muted mt-3">314
<i class="far fa-clock-o" aria-hidden="true"></i> 12.30 - 14.00 |315
<strong class="dark-grey-text font-weight-bold">Kate Brown - UI/UX Designer</strong>316
</p>317
318
<!--Grid row-->319
<div class="row pt-2">320
321
<!--Grid column-->322
<div class="col-md-3 col-3">323
324
<div class="avatar mx-auto">325
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(12).jpg" class="rounded img-fluid"326
alt="First sample avatar image">327
</div>328
329
</div>330
<!--Grid column-->331
332
<!--Grid column-->333
<div class="col-md-9 col-9">334
335
<p class="mb-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus336
saepe337
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>338
</div>339
340
</div>341
<!--Grid column-->342
343
</div>344
<!--Grid row-->345
</li>346
<li class="timeline-inverted">347
<!--Section Title -->348
<a href="#!">349
<span class="circle grey"></span>350
</a>351
352
<!-- Section Description -->353
<div class="step-content z-depth-1 mr-xl-3 p-4 hoverable">354
<h4 class="font-weight-bold"> Quis autem vel eum voluptate</h4>355
<p class="text-muted mt-3">356
<i class="far fa-clock-o" aria-hidden="true"></i> 14.20 - 16.00 |357
<strong class="dark-grey-text font-weight-bold">Anna Smith - Marketing specialist</strong>358
</p>359
360
<!--Grid row-->361
<div class="row pt-2">362
363
<!--Grid column-->364
<div class="col-md-3 col-3">365
366
<div class="avatar mx-auto">367
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded img-fluid"368
alt="First sample avatar image">369
</div>370
371
</div>372
<!--Grid column-->373
374
<!--Grid column-->375
<div class="col-md-9 col-9">376
377
<p class="mb-0">Autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe378
eveniet379
ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum380
rerum hic tenetur.</p>381
</div>382
383
</div>384
<!--Grid column-->385
386
</div>387
<!--Grid row-->388
</li>389
<li>390
<!--Section Title -->391
<a href="#!">392
<span class="circle grey"></span>393
</a>394
395
<!-- Section Description -->396
<div class="step-content z-depth-1 ml-3 p-4 hoverable">397
<h4 class="font-weight-bold">Mussum ipsum cacilds</h4>398
<p class="text-muted mt-3">399
<i class="far fa-clock-o" aria-hidden="true"></i> 16.30 - 20.00 |400
<strong class="dark-grey-text font-weight-bold">John Doe - CEO of Google</strong>401
</p>402
403
<!--Grid row-->404
<div class="row pt-2">405
406
<!--Grid column-->407
<div class="col-md-3 col-3">408
409
<div class="avatar mx-auto">410
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded img-fluid"411
alt="First sample avatar image">412
</div>413
414
</div>415
<!--Grid column-->416
417
<!--Grid column-->418
<div class="col-md-9 col-9">419
420
<p class="mb-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus421
saepe422
eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>423
</div>424
425
</div>426
<!--Grid column-->427
428
</div>429
<!--Grid row-->430
431
</li>432
</ul>433
<!-- Timeline Wrapper -->434
</div>435
</div>436
</div>437
438
</section>439
<!-- Section: Details -->440
441
</div>442
443
<!-- Streak -->444
<div class="streak streak-photo streak-long-2" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/46.jpg');">445
<div class="flex-center mask rgba-indigo-strong">446
<div class="text-center white-text">447
<h2 class="font-weight-bold mb-3 pt-4 mt-4">Conference about newest technologies coming soon!</h2>448
<p class="font-weight-bold white-text">Friday 17/10/2018, 8:00 am</p>449
450
<!--Grid row-->451
<div class="row mt-5 mb-5">452
453
<!--Grid column-->454
<div class="col-lg-4 col-md-4">455
<hr class="white mx-5">456
<h1 class="display-4 font-weight-bold white-text">457
<strong>20</strong>458
</h1>459
<hr class="white mx-5">460
<p class="font-weight-bold spacing">DAYS</p>461
</div>462
<!--Grid column-->463
464
<!--Grid column-->465
<div class="col-lg-4 col-md-4">466
<h1 class="display-4 font-weight-bold white-text rgba-white-light mx-4 py-3 mt-3">467
<strong>12</strong>468
</h1>469
<p class="font-weight-bold spacing pt-3">HOURS</p>470
</div>471
<!--Grid column-->472
473
<!--Grid column-->474
<div class="col-lg-4 col-md-4">475
<hr class="white mx-5">476
<h1 class="display-4 font-weight-bold white-text">477
<strong>35</strong>478
</h1>479
<hr class="white mx-5">480
<p class="font-weight-bold spacing">MINS</p>481
</div>482
<!--Grid column-->483
484
</div>485
<!--Grid row-->486
</div>487
</div>488
</div>489
<!-- Streak -->490
491
<!--Section pricing-->492
<div class="container-fluid grey lighten-4">493
<div class="container">494
495
<!--Section: Pricing v.5-->496
<section id="tickets" class="pb-5 pt-1">497
498
<!-- Section heading -->499
<h3 class="text-center my-5 pt-3 dark-grey-text font-weight-bold wow fadeIn" data-wow-delay="0.2s">500
<strong>Tickets for event</strong>501
</h3>502
503
<!-- Section description -->504
<p class="text-center w-responsive mx-auto my-5 grey-text">Lorem ipsum dolor sit amet, consectetur505
adipisicing elit. Fugit, error amet numquam iure provident voluptate506
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>507
508
<!--Grid row-->509
<div class="row">510
511
<!--Grid column-->512
<div class="col-lg-4 col-md-12 mb-4">513
<!--Card-->514
<div class="card pricing-card">515
516
<!--Content-->517
<div class="card-body">518
<h5 class="font-weight-bold mt-3">SILVER</h5>519
520
<!-- Price -->521
<div class="price pt-0">522
<h2 class="number indigo-text mb-0">180</h2>523
</div>524
<!--Price-->525
<ul class="striped darker-striped">526
<li>527
<p>528
<strong>100</strong> components</p>529
</li>530
<li>531
<p>532
<strong>150</strong> features</p>533
</li>534
<li>535
<p>536
<strong>200</strong> members</p>537
</li>538
</ul>539
<a class="btn btn-indigo btn-rounded mb-4"> Buy now</a>540
</div>541
</div>542
<!--Card-->543
</div>544
<!--Grid column-->545
546
<!--Grid column-->547
<div class="col-lg-4 col-md-12 mb-4">548
549
<!-- Card -->550
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).jpg');">551
552
<!-- Content -->553
<div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3">554
555
<!--Content-->556
<div class="card-body">557
<h5 class="font-weight-bold pt-1">VIP</h5>558
559
<!-- Price -->560
<div class="price pt-0">561
<h2 class="number mb-0">250</h2>562
</div>563
<!--Price-->564
<ul class="striped">565
<li>566
<p>567
<strong>200</strong> components</p>568
</li>569
<li>570
<p>571
<strong>250</strong> features</p>572
</li>573
<li>574
<p>575
<strong>300</strong> members</p>576
</li>577
</ul>578
<a class="btn btn-rounded btn-outline-white"> Buy now</a>579
</div>580
581
</div>582
</div>583
<!--Card-->584
</div>585
<!--Grid column-->586
587
<!--Grid column-->588
<div class="col-lg-4 col-md-12 mb-4">589
<!--Card-->590
<div class="card pricing-card">591
592
<!--Content-->593
<div class="card-body">594
<h5 class="font-weight-bold mt-3">GOLD</h5>595
596
<!-- Price -->597
<div class="price pt-0">598
<h2 class="number indigo-text mb-0">200</h2>599
</div>600
<!--Price-->601
<ul class="striped darker-striped">602
<li>603
<p>604
<strong>300</strong> components</p>605
</li>606
<li>607
<p>608
<strong>350</strong> features</p>609
</li>610
<li>611
<p>612
<strong>400</strong> members</p>613
</li>614
</ul>615
<a class="btn btn-indigo btn-rounded mb-4"> Buy now</a>616
</div>617
618
</div>619
<!--Card-->620
</div>621
<!--Grid column-->622
623
</div>624
<!--Grid row-->625
626
</section>627
<!--/Section: Pricing v.5-->628
629
</div>630
</div>631
<!--/Section pricing-->632
633
<div class="container">634
635
<!--Section: FAQ v.5-->636
<section id="faq" class="pt-1">637
638
<!-- Section heading -->639
<h3 class="text-center my-5 pt-3 dark-grey-text font-weight-bold wow fadeIn" data-wow-delay="0.2s">640
<strong>Frequently Asked Question</strong>641
</h3>642
<!-- Section description -->643
<p class="text-center w-responsive mx-auto my-5 grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing644
elit. Fugit, error amet numquam iure provident voluptate645
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>646
647
<!-- Grid row -->648
<div class="row gradient-background d-flex justify-content-center">649
650
<!-- Grid column -->651
<div class="col-md-10 col-xl-10 pb-5 pt-3">652
653
<!--Accordion wrapper-->654
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">655
656
<!-- Accordion card -->657
<div class="card border-0">658
659
<!-- Card header -->660
<div class="card-header white z-depth-1 border-0 mb-1" role="tab" id="heading1">661
<a data-toggle="collapse" data-parent="#accordionEx" href="#collapse1" aria-expanded="true"662
aria-controls="collapse1">663
<h5 class="mb-0 dark-grey-text">664
#1 Who is this conference for?665
<i class="fas fa-angle-down rotate-icon"></i>666
</h5>667
</a>668
</div>669
670
<!-- Card body -->671
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#accordionEx">672
<div class="card-body mb-1 rgba-indigo-strong white-text">673
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson674
ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food675
truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua676
put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil677
anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente678
ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer679
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard680
of them accusamus labore sustainable.</p>681
</div>682
</div>683
</div>684
<!-- Accordion card -->685
686
<!-- Accordion card -->687
<div class="card border-0">688
689
<!-- Card header -->690
<div class="card-header White z-depth-1 border-0 mb-1" role="tab" id="heading2">691
<a class="collapsed" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">692
<h5 class="mb-0 dark-grey-text">693
#2 What payment types do you accept?694
<i class="fas fa-angle-down rotate-icon"></i>695
</h5>696
</a>697
</div>698
699
<!-- Card body -->700
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordionEx">701
<div class="card-body mb-1 rgba-indigo-strong white-text">702
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt703
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation704
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor705
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.706
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt707
mollit anim id est laborum.</p>708
</div>709
</div>710
</div>711
<!-- Accordion card -->712
713
<!-- Accordion card -->714
<div class="card border-0">715
716
<!-- Card header -->717
<div class="card-header white z-depth-1 border-0 mb-1" role="tab" id="heading3">718
<a class="collapsed" data-toggle="collapse" href="#collapse3" aria-expanded="false" aria-controls="collapse3">719
<h5 class="mb-0 dark-grey-text">720
#3 Can I return the tickets?721
<i class="fas fa-angle-down rotate-icon"></i>722
</h5>723
</a>724
</div>725
726
<!-- Card body -->727
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="heading3" data-parent="#accordionEx">728
<div class="card-body mb-1 rgba-indigo-strong white-text">729
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque730
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et731
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem732
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni733
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,734
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia735
non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat736
voluptatem.737
</p>738
</div>739
</div>740
</div>741
<!-- Accordion card -->742
</div>743
<!--/.Accordion wrapper-->744
745
</div>746
<!-- Grid column -->747
748
</div>749
<!-- Grid row -->750
751
</section>752
753
<hr>754
755
<!--Section: Contact v.2-->756
<section id="contact" class="mb-5">757
758
<!-- Section heading -->759
<h3 class="text-center my-5 pt-3 pb-4 dark-grey-text font-weight-bold wow fadeIn" data-wow-delay="0.2s">760
<strong>Contact us</strong>761
</h3>762
763
<!--Section description-->764
<p class="text-center w-responsive mx-auto my-5 grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing765
elit. Fugit, error amet numquam iure provident voluptate766
esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>767
768
<div class="row">769
770
<!--Grid column-->771
<div class="col-md-8 col-xl-9">772
<form>773
774
<!--Grid row-->775
<div class="row">776
777
<!--Grid column-->778
<div class="col-md-6">779
<div class="md-form">780
<div class="md-form">781
<input type="text" id="contact-name" class="form-control">782
<label for="contact-name" class="">Your name</label>783
</div>784
</div>785
</div>786
<!--Grid column-->787
788
<!--Grid column-->789
<div class="col-md-6">790
<div class="md-form">791
<div class="md-form">792
<input type="text" id="contact-email" class="form-control">793
<label for="contact-email" class="">Your email</label>794
</div>795
</div>796
</div>797
<!--Grid column-->798
799
</div>800
<!--Grid row-->801
802
<!--Grid row-->803
<div class="row">804
<div class="col-md-12">805
<div class="md-form">806
<input type="text" id="contact-Subject" class="form-control">807
<label for="contact-Subject" class="">Subject</label>808
</div>809
</div>810
</div>811
<!--Grid row-->812
813
<!--Grid row-->814
<div class="row">815
816
<!--Grid column-->817
<div class="col-md-12">818
819
<div class="md-form">820
<textarea type="text" id="contact-message" class="md-textarea form-control" rows="3"></textarea>821
<label for="contact-message">Your message</label>822
</div>823
824
</div>825
</div>826
<!--Grid row-->827
828
</form>829
830
<div class="text-center text-md-left my-4">831
<a class="btn btn-pink btn-rounded">Send</a>832
</div>833
</div>834
<!--Grid column-->835
836
<!--Grid column-->837
<div class="col-md-4 col-xl-3">838
<ul class="text-center list-unstyled">839
<li>840
<i class="fas fa-map-marker-alt fa-2x pink-text"></i>841
<p>San Francisco, CA 94126, USA</p>842
</li>843
844
<li>845
<i class="fas fa-phone fa-2x pink-text"></i>846
<p>+ 01 234 567 89</p>847
</li>848
849
<li>850
<i class="fas fa-envelope fa-2x pink-text"></i>851
<p>contact@mdbootstrap.com</p>852
</li>853
</ul>854
</div>855
<!--Grid column-->856
857
</div>858
859
</section>860
<!--Section: Contact v.2-->861
862
</div>863
864
</main>865
<!-- Main content -->866
867
<!--Footer-->868
<footer class="page-footer indigo text-center text-md-left pt-0">869
870
<!--Footer Links-->871
<div class="container">872
873
<!--Grid row-->874
<div class="row pt-5 mb-3 text-center d-flex justify-content-center">875
876
<!--Grid column-->877
<div class="col-md-2 mb-3">878
<h6 class="text-uppercase font-weight-bold">879
<a href="#!">About us</a>880
</h6>881
</div>882
<!--Grid column-->883
884
<!--Grid column-->885
<div class="col-md-2 mb-3">886
<h6 class="text-uppercase font-weight-bold">887
<a href="#!">Products</a>888
</h6>889
</div>890
<!--Grid column-->891
892
<!--Grid column-->893
<div class="col-md-2 mb-3">894
<h6 class="text-uppercase font-weight-bold">895
<a href="#!">Awards</a>896
</h6>897
</div>898
<!--Grid column-->899
900
<!--Grid column-->901
<div class="col-md-2 mb-3">902
<h6 class="text-uppercase font-weight-bold">903
<a href="#!">Help</a>904
</h6>905
</div>906
<!--Grid column-->907
908
<!--Grid column-->909
<div class="col-md-2 mb-3">910
<h6 class="text-uppercase font-weight-bold">911
<a href="#!">Contact</a>912
</h6>913
</div>914
<!--Grid column-->915
916
</div>917
<!--Grid row-->918
919
<hr class="rgba-white-light" style="margin: 0 15%;">920
921
<!--Grid row-->922
<div class="row d-flex text-center justify-content-center mb-md-0 mb-4">923
924
<!--Grid column-->925
<div class="col-md-8 col-12 mt-5">926
<p style="line-height: 1.7rem">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium927
doloremque laudantium, totam928
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt929
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia930
consequuntur.</p>931
932
</div>933
<!--Grid column-->934
935
</div>936
<!--Grid row-->937
938
<hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">939
940
<!--Grid row-->941
<div class="row pb-3">942
943
<!--Grid column-->944
<div class="col-md-12">945
946
<div class="footer-socials mb-5 flex-center">947
<!--Facebook-->948
<a class="p-2 m-2 fa-lg fb-ic">949
<i class="fab fa-facebook-f fa-lg white-text mr-md-4"> </i>950
</a>951
<!--Twitter-->952
<a class="p-2 m-2 fa-lg tw-ic">953
<i class="fab fa-twitter fa-lg white-text mr-md-4"> </i>954
</a>955
<!--Google +-->956
<a class="p-2 m-2 fa-lg gplus-ic">957
<i class="fab fa-google-plus-g fa-lg white-text mr-md-4"> </i>958
</a>959
<!--Linkedin-->960
<a class="p-2 m-2 fa-lg li-ic">961
<i class="fab fa-linkedin-in fa-lg white-text mr-md-4"> </i>962
</a>963
<!--Instagram-->964
<a class="p-2 m-2 fa-lg ins-ic">965
<i class="fab fa-instagram fa-lg white-text mr-md-4"> </i>966
</a>967
<!--Pinterest-->968
<a class="p-2 m-2 fa-lg pin-ic">969
<i class="fab fa-pinterest fa-lg white-text"> </i>970
</a>971
</div>972
</div>973
<!--Grid column-->974
</div>975
<!--Grid row-->976
977
</div>978
<!--/Footer Links-->979
980
<!--Copyright-->981
<div class="footer-copyright py-3 text-center">982
<div class="container-fluid">983
© 2019 Copyright: <a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>984
</div>985
</div>986
<!--/Copyright-->987
988
</footer>989
<!--/Footer-->990
991
<!-- JQuery -->992
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>993
<!-- Bootstrap tooltips -->994
<script type="text/javascript" src="../js/popper.min.js"></script>995
<!-- Bootstrap core JavaScript -->996
<script type="text/javascript" src="../js/bootstrap.min.js"></script>997
<!-- MDB core JavaScript -->998
<script type="text/javascript" src="../js/mdb.min.js"></script>999
1000
<!-- Custom scripts -->1001
<script>1002
1003
// Animation init1004
new WOW().init();1005
1006
</script>1007
1008
</body>1009
1010
</html>1011
CSS
1
1
JS
1
1
Console errors: 0