HTML
xxxxxxxxxx1
<!-- Navbar -->2
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">3
<div class="container">4
5
<!-- Brand -->6
<a class="navbar-brand" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">7
<strong>MDB</strong>8
</a>9
10
<!-- Collapse -->11
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"12
aria-expanded="false" aria-label="Toggle navigation">13
<span class="navbar-toggler-icon"></span>14
</button>15
16
<!-- Links -->17
<div class="collapse navbar-collapse" id="navbarSupportedContent">18
19
<!-- Left -->20
<ul class="navbar-nav mr-auto">21
<li class="nav-item active">22
<a class="nav-link" href="#">Home23
<span class="sr-only">(current)</span>24
</a>25
</li>26
<li class="nav-item">27
<a class="nav-link" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">About MDB</a>28
</li>29
<li class="nav-item">30
<a class="nav-link" href="https://mdbootstrap.com/getting-started/" target="_blank">Free download</a>31
</li>32
<li class="nav-item">33
<a class="nav-link" href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank">Free tutorials</a>34
</li>35
</ul>36
37
<!-- Right -->38
<ul class="navbar-nav nav-flex-icons">39
<li class="nav-item">40
<a href="https://www.facebook.com/mdbootstrap" class="nav-link" target="_blank">41
<i class="fab fa-facebook-f"></i>42
</a>43
</li>44
<li class="nav-item">45
<a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank">46
<i class="fab fa-twitter"></i>47
</a>48
</li>49
<li class="nav-item">50
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded"51
target="_blank">52
<i class="fab fa-github mr-2"></i>MDB GitHub53
</a>54
</li>55
</ul>56
57
</div>58
59
</div>60
</nav>61
<!-- Navbar -->62
63
<!-- Full Page Intro -->64
<div class="view" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/images/93.jpg'); background-repeat: no-repeat; background-size: cover;">65
66
<!-- Mask & flexbox options-->67
<div class="mask rgba-black-light d-flex justify-content-center align-items-center">68
69
<!-- Content -->70
<div class="text-center white-text mx-5 wow fadeIn">71
<h1 class="mb-4">72
<strong>Learn Bootstrap 4 with MDB</strong>73
</h1>74
75
<p>76
<strong>Best & free guide of responsive web design</strong>77
</p>78
79
<p class="mb-4 d-none d-md-block">80
<strong>The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and written versions available.81
Create your own, stunning website.</strong>82
</p>83
84
<a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-outline-white btn-lg">Start free tutorial85
<i class="fas fa-graduation-cap ml-2"></i>86
</a>87
</div>88
<!-- Content -->89
90
</div>91
<!-- Mask & flexbox options-->92
93
</div>94
<!-- Full Page Intro -->95
96
<!--Main layout-->97
<main>98
<div class="container">99
100
<!--Section: Main info-->101
<section class="mt-5 wow fadeIn">102
103
<!--Grid row-->104
<div class="row">105
106
<!--Grid column-->107
<div class="col-md-6 mb-4">108
109
<img src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-main.jpg" class="img-fluid z-depth-1-half" alt="">110
111
</div>112
<!--Grid column-->113
114
<!--Grid column-->115
<div class="col-md-6 mb-4">116
117
<!-- Main heading -->118
<h3 class="h3 mb-3">Material Design for Bootstrap</h3>119
<p>This template is created with Material Design for Bootstrap (120
<strong>MDB</strong> ) framework.</p>121
<p>Read details below to learn more about MDB.</p>122
<!-- Main heading -->123
124
<hr>125
126
<p>127
<strong>400+</strong> material UI elements,128
<strong>600+</strong> material icons,129
<strong>74</strong> CSS animations, SASS files, templates, tutorials and many more.130
<strong>Free for personal and commercial use.</strong>131
</p>132
133
<!-- CTA -->134
<a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-grey btn-md">Download135
<i class="fas fa-download ml-1"></i>136
</a>137
<a target="_blank" href="https://mdbootstrap.com/components/" class="btn btn-grey btn-md">Live demo138
<i class="fas fa-image ml-1"></i>139
</a>140
141
</div>142
<!--Grid column-->143
144
</div>145
<!--Grid row-->146
147
</section>148
<!--Section: Main info-->149
150
<hr class="my-5">151
152
<!--Section: Main features & Quick Start-->153
<section>154
155
<h3 class="h3 text-center mb-5">About MDB</h3>156
157
<!--Grid row-->158
<div class="row wow fadeIn">159
160
<!--Grid column-->161
<div class="col-lg-6 col-md-12 px-4">162
163
<!--First row-->164
<div class="row">165
<div class="col-1 mr-3">166
<i class="fas fa-code fa-2x indigo-text"></i>167
</div>168
<div class="col-10">169
<h5 class="feature-title">Bootstrap 4</h5>170
<p class="grey-text">Thanks to MDB you can take advantage of all feature of newest Bootstrap 4.</p>171
</div>172
</div>173
<!--/First row-->174
175
<div style="height:30px"></div>176
177
<!--Second row-->178
<div class="row">179
<div class="col-1 mr-3">180
<i class="fas fa-book fa-2x blue-text"></i>181
</div>182
<div class="col-10">183
<h5 class="feature-title">Detailed documentation</h5>184
<p class="grey-text">We give you detailed user-friendly documentation at your disposal. It will help you to implement your ideas185
easily.186
</p>187
</div>188
</div>189
<!--/Second row-->190
191
<div style="height:30px"></div>192
193
<!--Third row-->194
<div class="row">195
<div class="col-1 mr-3">196
<i class="fas fa-graduation-cap fa-2x cyan-text"></i>197
</div>198
<div class="col-10">199
<h5 class="feature-title">Lots of tutorials</h5>200
<p class="grey-text">We care about the development of our users. We have prepared numerous tutorials, which allow you to learn201
how to use MDB as well as other technologies.</p>202
</div>203
</div>204
<!--/Third row-->205
206
</div>207
<!--/Grid column-->208
209
<!--Grid column-->210
<div class="col-lg-6 col-md-12">211
212
<p class="h5 text-center mb-4">Watch our "5 min Quick Start" tutorial</p>213
<div class="embed-responsive embed-responsive-16by9">214
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cXTThxoywNQ" allowfullscreen></iframe>215
</div>216
</div>217
<!--/Grid column-->218
219
</div>220
<!--/Grid row-->221
222
</section>223
<!--Section: Main features & Quick Start-->224
225
<hr class="my-5">226
227
<!--Section: Not enough-->228
<section>229
230
<h2 class="my-5 h3 text-center">Not enough?</h2>231
232
<!--First row-->233
<div class="row features-small mb-5 mt-3 wow fadeIn">234
235
<!--First column-->236
<div class="col-md-4">237
<!--First row-->238
<div class="row">239
<div class="col-2">240
<i class="fas fa-check-circle fa-2x indigo-text"></i>241
</div>242
<div class="col-10">243
<h6 class="feature-title">Free for personal and commercial use</h6>244
<p class="grey-text">Our license is user-friendly. Feel free to use MDB for both private as well as commercial projects.245
</p>246
<div style="height:15px"></div>247
</div>248
</div>249
<!--/First row-->250
251
<!--Second row-->252
<div class="row">253
<div class="col-2">254
<i class="fas fa-check-circle fa-2x indigo-text"></i>255
</div>256
<div class="col-10">257
<h6 class="feature-title">400+ UI elements</h6>258
<p class="grey-text">An impressive collection of flexible components allows you to develop any project.259
</p>260
<div style="height:15px"></div>261
</div>262
</div>263
<!--/Second row-->264
265
<!--Third row-->266
<div class="row">267
<div class="col-2">268
<i class="fas fa-check-circle fa-2x indigo-text"></i>269
</div>270
<div class="col-10">271
<h6 class="feature-title">600+ icons</h6>272
<p class="grey-text">Hundreds of useful, scalable, vector icons at your disposal.</p>273
<div style="height:15px"></div>274
</div>275
</div>276
<!--/Third row-->277
278
<!--Fourth row-->279
<div class="row">280
<div class="col-2">281
<i class="fas fa-check-circle fa-2x indigo-text"></i>282
</div>283
<div class="col-10">284
<h6 class="feature-title">Fully responsive</h6>285
<p class="grey-text">It doesn't matter whether your project will be displayed on desktop, laptop, tablet or mobile phone. MDB286
looks great on each screen.</p>287
<div style="height:15px"></div>288
</div>289
</div>290
<!--/Fourth row-->291
</div>292
<!--/First column-->293
294
<!--Second column-->295
<div class="col-md-4 flex-center">296
<img src="https://mdbootstrap.com/img/Others/screens.png" alt="MDB Magazine Template displayed on iPhone" class="z-depth-0 img-fluid">297
</div>298
<!--/Second column-->299
300
<!--Third column-->301
<div class="col-md-4 mt-2">302
<!--First row-->303
<div class="row">304
<div class="col-2">305
<i class="fas fa-check-circle fa-2x indigo-text"></i>306
</div>307
<div class="col-10">308
<h6 class="feature-title">70+ CSS animations</h6>309
<p class="grey-text">Neat and easy to use animations, which will increase the interactivity of your project and delight your visitors.310
</p>311
<div style="height:15px"></div>312
</div>313
</div>314
<!--/First row-->315
316
<!--Second row-->317
<div class="row">318
<div class="col-2">319
<i class="fas fa-check-circle fa-2x indigo-text"></i>320
</div>321
<div class="col-10">322
<h6 class="feature-title">Plenty of useful templates</h6>323
<p class="grey-text">Need inspiration? Use one of our predefined templates for free.</p>324
<div style="height:15px"></div>325
</div>326
</div>327
<!--/Second row-->328
329
<!--Third row-->330
<div class="row">331
<div class="col-2">332
<i class="fas fa-check-circle fa-2x indigo-text"></i>333
</div>334
<div class="col-10">335
<h6 class="feature-title">Easy installation</h6>336
<p class="grey-text">5 minutes, a few clicks and... done. You will be surprised at how easy it is.337
</p>338
<div style="height:15px"></div>339
</div>340
</div>341
<!--/Third row-->342
343
<!--Fourth row-->344
<div class="row">345
<div class="col-2">346
<i class="fas fa-check-circle fa-2x indigo-text"></i>347
</div>348
<div class="col-10">349
<h6 class="feature-title">Easy to use and customize</h6>350
<p class="grey-text">Using MDB is straightforward and pleasant. Components flexibility allows you deep customization. You will351
easily adjust each component to suit your needs.</p>352
<div style="height:15px"></div>353
</div>354
</div>355
<!--/Fourth row-->356
</div>357
<!--/Third column-->358
359
</div>360
<!--/First row-->361
362
</section>363
<!--Section: Not enough-->364
365
<hr class="mb-5">366
367
<!--Section: More-->368
<section>369
370
<h2 class="my-5 h3 text-center">...and even more</h2>371
372
<!--First row-->373
<div class="row features-small mt-5 wow fadeIn">374
375
<!--Grid column-->376
<div class="col-xl-3 col-lg-6">377
<!--Grid row-->378
<div class="row">379
<div class="col-2">380
<i class="fab fa-firefox fa-2x mb-1 indigo-text" aria-hidden="true"></i>381
</div>382
<div class="col-10 mb-2 pl-3">383
<h5 class="feature-title font-bold mb-1">Cross-browser compatibility</h5>384
<p class="grey-text mt-2">Chrome, Firefox, IE, Safari, Opera, Microsoft Edge - MDB loves all browsers; all browsers love MDB.385
</p>386
</div>387
</div>388
<!--/Grid row-->389
</div>390
<!--/Grid column-->391
392
<!--Grid column-->393
<div class="col-xl-3 col-lg-6">394
<!--Grid row-->395
<div class="row">396
<div class="col-2">397
<i class="fas fa-level-up-alt fa-2x mb-1 indigo-text" aria-hidden="true"></i>398
</div>399
<div class="col-10 mb-2">400
<h5 class="feature-title font-bold mb-1">Frequent updates</h5>401
<p class="grey-text mt-2">MDB becomes better every month. We love the project and enhance as much as possible.402
</p>403
</div>404
</div>405
<!--/Grid row-->406
</div>407
<!--/Grid column-->408
409
<!--Grid column-->410
<div class="col-xl-3 col-lg-6">411
<!--Grid row-->412
<div class="row">413
<div class="col-2">414
<i class="far fa-comments fa-2x mb-1 indigo-text" aria-hidden="true"></i>415
</div>416
<div class="col-10 mb-2">417
<h5 class="feature-title font-bold mb-1">Active community</h5>418
<p class="grey-text mt-2">Our society grows day by day. Visit our forum and check how it is to be a part of our family.419
</p>420
</div>421
</div>422
<!--/Grid row-->423
</div>424
<!--/Grid column-->425
426
<!--Grid column-->427
<div class="col-xl-3 col-lg-6">428
<!--Grid row-->429
<div class="row">430
<div class="col-2">431
<i class="fas fa-code fa-2x mb-1 indigo-text" aria-hidden="true"></i>432
</div>433
<div class="col-10 mb-2">434
<h5 class="feature-title font-bold mb-1">jQuery 3.x</h5>435
<p class="grey-text mt-2">MDB is integrated with newest jQuery. Therefore you can use all the latest features which come along with436
it.437
</p>438
</div>439
</div>440
<!--/Grid row-->441
</div>442
<!--/Grid column-->443
444
</div>445
<!--/First row-->446
447
<!--Second row-->448
<div class="row features-small mt-4 wow fadeIn">449
450
<!--Grid column-->451
<div class="col-xl-3 col-lg-6">452
<!--Grid row-->453
<div class="row">454
<div class="col-2">455
<i class="fas fa-cubes fa-2x mb-1 indigo-text" aria-hidden="true"></i>456
</div>457
<div class="col-10 mb-2">458
<h5 class="feature-title font-bold mb-1">Modularity</h5>459
<p class="grey-text mt-2">Material Design for Bootstrap comes with both, compiled, ready to use libraries including all features as460
well as modules for CSS (SASS files) and JS.</p>461
</div>462
</div>463
<!--/Grid row-->464
</div>465
<!--/Grid column-->466
467
<!--Grid column-->468
<div class="col-xl-3 col-lg-6">469
<!--Grid row-->470
<div class="row">471
<div class="col-2">472
<i class="fas fa-question fa-2x mb-1 indigo-text" aria-hidden="true"></i>473
</div>474
<div class="col-10 mb-2">475
<h5 class="feature-title font-bold mb-1">Technical support</h5>476
<p class="grey-text mt-2">We care about reliability. If you have any questions - do not hesitate to contact us.477
</p>478
</div>479
</div>480
<!--/Grid row-->481
</div>482
<!--/Grid column-->483
484
<!--Grid column-->485
<div class="col-xl-3 col-lg-6">486
<!--Grid row-->487
<div class="row">488
<div class="col-2">489
<i class="fas fa-th fa-2x mb-1 indigo-text" aria-hidden="true"></i>490
</div>491
<div class="col-10 mb-2">492
<h5 class="feature-title font-bold mb-1">Flexbox</h5>493
<p class="grey-text mt-2">MDB fully supports Flex Box. You can forget about alignment issues.</p>494
</div>495
</div>496
<!--/Grid row-->497
</div>498
<!--/Grid column-->499
500
<!--Grid column-->501
<div class="col-xl-3 col-lg-6">502
<!--Grid row-->503
<div class="row">504
<div class="col-2">505
<i class="far fa-file-code fa-2x mb-1 indigo-text" aria-hidden="true"></i>506
</div>507
<div class="col-10 mb-2">508
<h5 class="feature-title font-bold mb-1">SASS files</h5>509
<p class="grey-text mt-2">Arranged and well documented .scss files can't wait until you compile them.</p>510
</div>511
</div>512
<!--/Grid row-->513
</div>514
<!--/Grid column-->515
516
</div>517
<!--/Second row-->518
519
</section>520
<!--Section: More-->521
522
</div>523
</main>524
<!--Main layout-->525
526
<!--Footer-->527
<footer class="page-footer text-center font-small mt-4 wow fadeIn">528
529
<!--Call to action-->530
<div class="pt-4">531
<a class="btn btn-outline-white" href="https://mdbootstrap.com/getting-started/" target="_blank" role="button">Download MDB532
<i class="fas fa-download ml-2"></i>533
</a>534
<a class="btn btn-outline-white" href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank" role="button">Start free tutorial535
<i class="fas fa-graduation-cap ml-2"></i>536
</a>537
</div>538
<!--/.Call to action-->539
540
<hr class="my-4">541
542
<!-- Social icons -->543
<div class="pb-4">544
<a href="https://www.facebook.com/mdbootstrap" target="_blank">545
<i class="fab fa-facebook-f mr-3"></i>546
</a>547
548
<a href="https://twitter.com/MDBootstrap" target="_blank">549
<i class="fab fa-twitter mr-3"></i>550
</a>551
552
<a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">553
<i class="fab fa-youtube mr-3"></i>554
</a>555
556
<a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">557
<i class="fab fa-google-plus-g mr-3"></i>558
</a>559
560
<a href="https://dribbble.com/mdbootstrap" target="_blank">561
<i class="fab fa-dribbble mr-3"></i>562
</a>563
564
<a href="https://pinterest.com/mdbootstrap" target="_blank">565
<i class="fab fa-pinterest mr-3"></i>566
</a>567
568
<a href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank">569
<i class="fab fa-github mr-3"></i>570
</a>571
572
<a href="http://codepen.io/mdbootstrap/" target="_blank">573
<i class="fab fa-codepen mr-3"></i>574
</a>575
</div>576
<!-- Social icons -->577
578
<!--Copyright-->579
<div class="footer-copyright py-3">580
© 2019 Copyright:581
<a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>582
</div>583
<!--/.Copyright-->584
585
</footer>586
<!--/.Footer-->587
CSS
xxxxxxxxxx1
@media (min-width: 800px) and (max-width: 850px) {2
.navbar:not(.top-nav-collapse) {3
background: #1C2331!important;4
}5
}6
.view,body,html{height:100%}.navbar{background-color:rgba(0,0,0,.2)}.page-footer,.top-nav-collapse{background-color:#1C2331}@media only screen and (max-width:768px){.navbar{background-color:#1C2331}}JS
xxxxxxxxxx1
new WOW().init();2
Console errors: 0