xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-5 mb-lg-7">3
4
<!-- Navbar -->5
<nav style="z-index: 1; min-height: 58.59px;" class="navbar navbar-expand-lg navbar-dark bg-dark">6
<!-- Container wrapper -->7
<div class="container">8
<!-- Toggle button -->9
<button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-target="#navbarSupportedContent"10
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">11
<i class="fas fa-bars"></i>12
</button>13
14
<!-- Collapsible wrapper -->15
<div class="collapse navbar-collapse" id="navbarSupportedContent">16
<!-- Navbar brand -->17
<a class="navbar-brand mt-2 mt-lg-0" href="#">18
<i class="fas fa-gem text-secondary"></i>19
</a>20
<!-- Left links -->21
<ul class="navbar-nav me-auto mb-2 mb-lg-0">22
<li class="nav-item">23
<a class="nav-link text-secondary fw-bold" href="#">About</a>24
</li>25
<li class="nav-item">26
<a class="nav-link text-secondary fw-bold" href="#">Projects</a>27
</li>28
<li class="nav-item">29
<a class="nav-link text-secondary fw-bold" href="#">Contact</a>30
</li>31
</ul>32
<!-- Left links -->33
</div>34
<!-- Collapsible wrapper -->35
36
<!-- Right elements -->37
<div class="d-flex align-items-center">38
<!-- Icon -->39
<a class="text-secondary me-3" href="https://www.youtube.com/c/Mdbootstrap/videos" rel="nofollow"40
target="_blank">41
<i class="fab fa-youtube"></i>42
</a>43
<!-- Icon -->44
<a class="text-secondary me-3" href="https://twitter.com/ascensus_mdb" rel="nofollow" target="_blank">45
<i class="fab fa-twitter"></i>46
</a>47
<!-- Icon -->48
<a class="text-secondary me-3" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow"49
target="_blank">50
<i class="fab fa-github"></i>51
</a>52
53
</div>54
<!-- Right elements -->55
</div>56
<!-- Container wrapper -->57
</nav>58
<!-- Navbar -->59
60
<!-- Background image -->61
<div class="bg-image vh-100" style="62
margin-top: -58.59px;63
background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">64
65
<!-- Mask -->66
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">67
68
<!-- Container -->69
<div class="container d-flex justify-content-center align-items-center h-100">70
71
<!-- Call to action -->72
<div class="text-white text-center">73
<h1 class="mb-3">Whoah, what a view!</h1>74
<h5 class="mb-4">Learning web design is such an amazing thing</h5>75
<a class="btn btn-secondary btn-rounded btn-lg m-2" data-mdb-ripple-init data-ripple-color="primary"76
href="#" role="button">Learn with me<i class="fas fa-graduation-cap ms-2"></i></a>77
</div>78
79
</div>80
81
</div>82
83
</div>84
85
</header>86
<!--Main Navigation-->87
88
<!--Main layout-->89
<main>90
<div class="container">91
92
<!-- Section: Details -->93
<section class="mb-5 mb-lg-10">94
<div class="row gx-xl-5">95
96
<div class="col-lg-7 mb-5 mb-lg-0">97
<!-- Carousel wrapper -->98
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"99
data-mdb-carousel-init>100
<!-- Indicators -->101
<div class="carousel-indicators">102
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"103
aria-current="true" aria-label="Slide 1"></button>104
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"105
aria-label="Slide 2"></button>106
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"107
aria-label="Slide 3"></button>108
</div>109
110
<!-- Inner -->111
<div class="carousel-inner rounded-6 shadow-4-strong">112
<!-- Single item -->113
<div class="carousel-item active">114
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100"115
alt="Sunset Over the City" />116
<div class="carousel-caption d-none d-md-block">117
<h5>First slide label</h5>118
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>119
</div>120
</div>121
122
<!-- Single item -->123
<div class="carousel-item">124
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100"125
alt="Canyon at Nigh" />126
<div class="carousel-caption d-none d-md-block">127
<h5>Second slide label</h5>128
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>129
</div>130
</div>131
132
<!-- Single item -->133
<div class="carousel-item">134
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100"135
alt="Cliff Above a Stormy Sea" />136
<div class="carousel-caption d-none d-md-block">137
<h5>Third slide label</h5>138
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>139
</div>140
</div>141
</div>142
<!-- Inner -->143
144
<!-- Controls -->145
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"146
data-mdb-slide="prev">147
<span class="carousel-control-prev-icon" aria-hidden="true"></span>148
<span class="visually-hidden">Previous</span>149
</button>150
<button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"151
data-mdb-slide="next">152
<span class="carousel-control-next-icon" aria-hidden="true"></span>153
<span class="visually-hidden">Next</span>154
</button>155
</div>156
<!-- Carousel wrapper -->157
</div>158
159
<div class="col-lg-5 mb-5 mb-lg-0">160
161
<h3 class="fw-bold mb-4">Details</h3>162
163
<p>This beginner-friendly, example-based course will guide you through the essential knowledge of MDB164
ecosystem.</p>165
166
<p class="mb-2"><strong>What will you learn:</strong></p>167
168
<ul class="list-unstyled">169
<li><i class="fas fa-check text-success me-2"></i>Bootstrap</li>170
<li><i class="fas fa-check text-success me-2"></i>MDBootstrap</li>171
<li><i class="fas fa-check text-success me-2"></i>UI & UX design</li>172
<li><i class="fas fa-check text-success me-2"></i>Responsive web design</li>173
</ul>174
175
<a class="btn btn-link btn-rounded" href="#" role="button" data-mdb-ripple-color="primary">Learn more</a>176
177
</div>178
179
</div>180
</section>181
<!-- Section: Details -->182
183
<!-- Section: Pricing -->184
<section class="mb-5 mb-lg-10">185
186
<h3 class="fw-bold text-center mb-5">Pricing</h3>187
188
<div class="row gx-xl-5">189
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-2 order-lg-1">190
191
<div class="card h-100">192
<div class="card-header text-center pt-4">193
<p class="text-uppercase">194
<strong>Basic</strong>195
</p>196
197
<h3 class="mb-4">198
<strong>$ 129</strong>199
<small class="text-muted" style="font-size: 16px">/year</small>200
</h3>201
202
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3" data-mdb-ripple-init>203
Buy204
</button>205
206
</div>207
<div class="card-body">208
209
<ol class="list-unstyled mb-0">210
<li class="mb-3">211
<i class="fas fa-check text-success me-3"></i>Unlimited212
updates213
</li>214
<li class="mb-3">215
<i class="fas fa-check text-success me-3"></i>Git repository216
</li>217
<li class="mb-3">218
<i class="fas fa-check text-success me-3"></i>npm219
installation220
</li>221
</ol>222
223
</div>224
</div>225
226
</div>227
228
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0 order-1 order-lg-2">229
230
<div class="card h-100">231
<div class="card-header text-center pt-4">232
<p class="text-uppercase">233
<strong>Advanced</strong>234
</p>235
236
<h3 class="mb-4">237
<strong>$ 299</strong>238
<small class="text-muted" style="font-size: 16px">/year</small>239
</h3>240
241
<button type="button" class="btn btn-primary btn-rounded w-100 mb-3" data-mdb-ripple-init>242
Buy243
</button>244
</div>245
<div class="card-body">246
<ol class="list-unstyled mb-0">247
<li class="mb-3">248
<i class="fas fa-check text-success me-3"></i>Unlimited249
updates250
</li>251
<li class="mb-3">252
<i class="fas fa-check text-success me-3"></i>Git repository253
</li>254
<li class="mb-3">255
<i class="fas fa-check text-success me-3"></i>npm256
installation257
</li>258
<li class="mb-3">259
<i class="fas fa-check text-success me-3"></i>Code examples260
</li>261
<li class="mb-3">262
<i class="fas fa-check text-success me-3"></i>Premium263
snippets264
</li>265
</ol>266
</div>267
</div>268
269
</div>270
271
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0 order-3 order-lg-3">272
273
<div class="card h-100">274
<div class="card-header text-center pt-4">275
<p class="text-uppercase">276
<strong>Enterprise</strong>277
</p>278
<h3 class="mb-4">279
<strong>$ 499</strong>280
<small class="text-muted" style="font-size: 16px">/year</small>281
</h3>282
283
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3" data-mdb-ripple-init>284
Buy285
</button>286
</div>287
<div class="card-body">288
<ol class="list-unstyled mb-0">289
<li class="mb-3">290
<i class="fas fa-check text-success me-3"></i>Unlimited291
updates292
</li>293
<li class="mb-3">294
<i class="fas fa-check text-success me-3"></i>Git repository295
</li>296
<li class="mb-3">297
<i class="fas fa-check text-success me-3"></i>npm298
installation299
</li>300
<li class="mb-3">301
<i class="fas fa-check text-success me-3"></i>Code examples302
</li>303
<li class="mb-3">304
<i class="fas fa-check text-success me-3"></i>Premium305
snippets306
</li>307
<li class="mb-3">308
<i class="fas fa-check text-success me-3"></i>Premium309
support310
</li>311
<li class="mb-3">312
<i class="fas fa-check text-success me-3"></i>Drag&Drop313
builder314
</li>315
</ol>316
</div>317
</div>318
319
</div>320
</div>321
322
</section>323
<!-- Section: Pricing -->324
325
<!-- Section: Contact -->326
<section class="mb-5 mb-lg-10">327
328
<h3 class="fw-bold text-center mb-5">Contact us</h3>329
330
<div class="row gx-xl-5">331
332
<div class="col-lg-5 mb-4 mb-lg-0">333
334
<form>335
<!-- Name input -->336
<div class="form-outline mb-4" data-mdb-input-init>337
<input type="text" id="form4Example1" class="form-control" />338
<label class="form-label" for="form4Example1">Name</label>339
</div>340
341
<!-- Email input -->342
<div class="form-outline mb-4" data-mdb-input-init>343
<input type="email" id="form4Example2" class="form-control" />344
<label class="form-label" for="form4Example2">Email address</label>345
</div>346
347
<!-- Message input -->348
<div class="form-outline mb-4" data-mdb-input-init>349
<textarea class="form-control" id="form4Example3" rows="4"></textarea>350
<label class="form-label" for="form4Example3">Message</label>351
</div>352
353
<!-- Checkbox -->354
<div class="form-check d-flex justify-content-center mb-4">355
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />356
<label class="form-check-label" for="form4Example4">357
Send me a copy of this message358
</label>359
</div>360
361
<!-- Submit button -->362
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>363
</form>364
365
</div>366
367
<div class="col-lg-7 mb-4 mb-lg-0">368
369
<div class="row gx-lg-5">370
<div class="col-md-6 mb-4 mb-md-5">371
<div class="d-flex align-items-start">372
<div class="p-3 badge-primary rounded-4">373
<i class="fas fa-headset fa-lg fa-fw"></i>374
</div>375
<div class="ms-4">376
<p class="fw-bold mb-1">Technical support</p>377
<p class="text-muted mb-0">support@example.com</p>378
<p class="text-muted mb-0">+1 234-567-89</p>379
</div>380
</div>381
</div>382
383
<div class="col-md-6 mb-4 mb-md-5">384
<div class="d-flex align-items-start">385
<div class="p-3 badge-primary rounded-4">386
<i class="fas fa-dollar-sign fa-lg fa-fw"></i>387
</div>388
<div class="ms-4">389
<p class="fw-bold mb-1">Sales questions</p>390
<p class="text-muted mb-0">sales@example.com</p>391
<p class="text-muted mb-0">+1 234-567-88</p>392
</div>393
</div>394
</div>395
396
<div class="col-md-6 mb-4 mb-md-5">397
<div class="d-flex align-items-start">398
<div class="p-3 badge-primary rounded-4">399
<i class="fas fa-newspaper fa-lg fa-fw"></i>400
</div>401
<div class="ms-4">402
<p class="fw-bold mb-1">Press</p>403
<p class="text-muted mb-0">press@example.com</p>404
<p class="text-muted mb-0">+1 234-567-87</p>405
</div>406
</div>407
</div>408
409
<div class="col-md-6 mb-4 mb-md-5">410
<div class="d-flex align-items-start">411
<div class="p-3 badge-primary rounded-4">412
<i class="fas fa-bug fa-lg fa-fw"></i>413
</div>414
<div class="ms-4">415
<p class="fw-bold mb-1">Bug report</p>416
<p class="text-muted mb-0">bugs@example.com</p>417
<p class="text-muted mb-0">+1 234-567-86</p>418
</div>419
</div>420
</div>421
</div>422
423
</div>424
425
</div>426
427
</section>428
<!-- Section: Contact -->429
430
</div>431
</main>432
<!--Main layout-->433
434
<!-- Footer -->435
<footer class="text-center text-lg-start bg-body-tertiary text-muted">436
<!-- Section: Social media -->437
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">438
<!-- Left -->439
<div class="me-5 d-none d-lg-block">440
<span>Get connected with us on social networks:</span>441
</div>442
<!-- Left -->443
444
<!-- Right -->445
<div>446
<a href="" class="me-4 text-reset">447
<i class="fab fa-facebook-f"></i>448
</a>449
<a href="" class="me-4 text-reset">450
<i class="fab fa-twitter"></i>451
</a>452
<a href="" class="me-4 text-reset">453
<i class="fab fa-google"></i>454
</a>455
<a href="" class="me-4 text-reset">456
<i class="fab fa-instagram"></i>457
</a>458
<a href="" class="me-4 text-reset">459
<i class="fab fa-linkedin"></i>460
</a>461
<a href="" class="me-4 text-reset">462
<i class="fab fa-github"></i>463
</a>464
</div>465
<!-- Right -->466
</section>467
<!-- Section: Social media -->468
469
<!-- Section: Links -->470
<section class="">471
<div class="container text-center text-md-start mt-5">472
<!-- Grid row -->473
<div class="row mt-3">474
<!-- Grid column -->475
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">476
<!-- Content -->477
<h6 class="text-uppercase fw-bold mb-4">478
<i class="fas fa-gem me-3"></i>Company name479
</h6>480
<p>481
Here you can use rows and columns to organize your footer content. Lorem ipsum482
dolor sit amet, consectetur adipisicing elit.483
</p>484
</div>485
<!-- Grid column -->486
487
<!-- Grid column -->488
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">489
<!-- Links -->490
<h6 class="text-uppercase fw-bold mb-4">491
Products492
</h6>493
<p>494
<a href="#!" class="text-reset">Angular</a>495
</p>496
<p>497
<a href="#!" class="text-reset">React</a>498
</p>499
<p>500
<a href="#!" class="text-reset">Vue</a>501
</p>502
<p>503
<a href="#!" class="text-reset">Laravel</a>504
</p>505
</div>506
<!-- Grid column -->507
508
<!-- Grid column -->509
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">510
<!-- Links -->511
<h6 class="text-uppercase fw-bold mb-4">512
Useful links513
</h6>514
<p>515
<a href="#!" class="text-reset">Pricing</a>516
</p>517
<p>518
<a href="#!" class="text-reset">Settings</a>519
</p>520
<p>521
<a href="#!" class="text-reset">Orders</a>522
</p>523
<p>524
<a href="#!" class="text-reset">Help</a>525
</p>526
</div>527
<!-- Grid column -->528
529
<!-- Grid column -->530
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">531
<!-- Links -->532
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>533
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>534
<p>535
<i class="fas fa-envelope me-3"></i>536
info@example.com537
</p>538
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>539
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>540
</div>541
<!-- Grid column -->542
</div>543
<!-- Grid row -->544
</div>545
</section>546
<!-- Section: Links -->547
548
<!-- Copyright -->549
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">550
© 2021 Copyright:551
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>552
</div>553
<!-- Copyright -->554
</footer>555
<!-- Footer -->1
1
1
1
Console errors: 0