HTML
xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<!-- Intro settings -->4
<style>5
#intro {6
/* Margin to fix overlapping fixed navbar */7
margin-top: 58px;8
}9
10
@media (max-width: 991px) {11
#intro {12
/* Margin to fix overlapping fixed navbar */13
margin-top: 45px;14
}15
}16
</style>17
18
<!-- Navbar -->19
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">20
<div class="container-fluid">21
<!-- Navbar brand -->22
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">23
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"24
style="margin-top: -3px;" />25
</a>26
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"27
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">28
<i class="fas fa-bars"></i>29
</button>30
<div class="collapse navbar-collapse" id="navbarExample01">31
<ul class="navbar-nav me-auto mb-2 mb-lg-0">32
<li class="nav-item active">33
<a class="nav-link" aria-current="page" href="#intro">Home</a>34
</li>35
<li class="nav-item">36
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"37
target="_blank">Learn Bootstrap 5</a>38
</li>39
<li class="nav-item">40
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>41
</li>42
</ul>43
44
<ul class="navbar-nav d-flex flex-row">45
<!-- Icons -->46
<li class="nav-item me-3 me-lg-0">47
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"48
target="_blank">49
<i class="fab fa-youtube"></i>50
</a>51
</li>52
<li class="nav-item me-3 me-lg-0">53
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">54
<i class="fab fa-facebook-f"></i>55
</a>56
</li>57
<li class="nav-item me-3 me-lg-0">58
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">59
<i class="fab fa-twitter"></i>60
</a>61
</li>62
<li class="nav-item me-3 me-lg-0">63
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">64
<i class="fab fa-github"></i>65
</a>66
</li>67
</ul>68
</div>69
</div>70
</nav>71
<!-- Navbar -->72
73
<!-- Jumbotron -->74
<div id="intro" class="p-5 text-center bg-light">75
<h1 class="mb-3 h2">Learn Bootstrap 5 with MDB</h1>76
<p class="mb-3">Best & free guide of responsive web design</p>77
<a class="btn btn-primary m-2" data-mdb-ripple-init href="https://www.youtube.com/watch?v=c9B4TPnak1A" role="button" rel="nofollow"78
target="_blank">Start tutorial</a>79
<a class="btn btn-primary m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank"80
role="button">Download MDB UI KIT</a>81
</div>82
<!-- Jumbotron -->83
</header>84
<!--Main Navigation-->85
86
<!--Main layout-->87
<main class="my-5">88
<div class="container">89
<!--Section: News of the day-->90
<section class="border-bottom pb-4 mb-5">91
<div class="row gx-5">92
<div class="col-md-6 mb-4">93
<div class="bg-image hover-overlay shadow-2-strong" data-mdb-ripple-init data-mdb-ripple-color="light">94
<img src="https://mdbootstrap.com/img/new/slides/080.jpg" class="img-fluid" />95
<a href="#!">96
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>97
</a>98
</div>99
</div>100
101
<div class="col-md-6 mb-4">102
<span class="badge bg-danger px-2 py-1 shadow-1-strong mb-3">News of the day</span>103
<h4><strong>Facilis consequatur eligendi</strong></h4>104
<p class="text-muted">105
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur106
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum107
sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.108
</p>109
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read more</button>110
</div>111
</div>112
</section>113
<!--Section: News of the day-->114
115
<!--Section: Content-->116
<section>117
<div class="row gx-5">118
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">119
<!-- News block -->120
<div>121
<!-- Featured image -->122
<div class="bg-image hover-overlay shadow-1-strong mb-4" data-mdb-ripple-init data-mdb-ripple-color="light">123
<img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="img-fluid" />124
<a href="#!">125
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>126
</a>127
</div>128
129
<!-- Article data -->130
<div class="row mb-3">131
<div class="col-6">132
<a href="" class="text-info">133
<i class="fas fa-plane"></i>134
Travels135
</a>136
</div>137
138
<div class="col-6 text-end">139
<u> 15.07.2020</u>140
</div>141
</div>142
143
<!-- Article title and description -->144
<a href="" class="text-dark">145
<h5>This is title of the news</h5>146
147
<p>148
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed149
id nihil magni, sint vero provident esse numquam perferendis ducimus dicta150
adipisci iusto nam temporibus modi animi laboriosam?151
</p>152
</a>153
154
<hr />155
156
<!-- News -->157
<a href="" class="text-dark">158
<div class="row mb-4 border-bottom pb-2">159
<div class="col-3">160
<img src="https://mdbootstrap.com/img/new/standard/city/041.jpg"161
class="img-fluid shadow-1-strong rounded" alt="" />162
</div>163
164
<div class="col-9">165
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>166
<p>167
<u> 15.07.2020</u>168
</p>169
</div>170
</div>171
</a>172
173
<!-- News -->174
<a href="" class="text-dark">175
<div class="row mb-4 border-bottom pb-2">176
<div class="col-3">177
<img src="https://mdbootstrap.com/img/new/standard/city/042.jpg"178
class="img-fluid shadow-1-strong rounded" alt="" />179
</div>180
181
<div class="col-9">182
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>183
<p>184
<u> 15.07.2020</u>185
</p>186
</div>187
</div>188
</a>189
190
<!-- News -->191
<a href="" class="text-dark">192
<div class="row mb-4 border-bottom pb-2">193
<div class="col-3">194
<img src="https://mdbootstrap.com/img/new/standard/city/043.jpg"195
class="img-fluid shadow-1-strong rounded" alt="" />196
</div>197
198
<div class="col-9">199
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>200
<p>201
<u> 15.07.2020</u>202
</p>203
</div>204
</div>205
</a>206
207
<!-- News -->208
<a href="" class="text-dark">209
<div class="row mb-4 border-bottom pb-2">210
<div class="col-3">211
<img src="https://mdbootstrap.com/img/new/standard/city/044.jpg"212
class="img-fluid shadow-1-strong rounded" alt="" />213
</div>214
215
<div class="col-9">216
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>217
<p>218
<u> 15.07.2020</u>219
</p>220
</div>221
</div>222
</a>223
</div>224
<!-- News block -->225
</div>226
227
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">228
<!-- News block -->229
<div>230
<!-- Featured image -->231
<div class="bg-image hover-overlay shadow-1-strong mb-4" data-mdb-ripple-init data-mdb-ripple-color="light">232
<img src="https://mdbootstrap.com/img/new/fluid/city/011.jpg" class="img-fluid" />233
<a href="#!">234
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>235
</a>236
</div>237
238
<!-- Article data -->239
<div class="row mb-3">240
<div class="col-6">241
<a href="" class="text-danger">242
<i class="fas fa-chart-pie"></i>243
Business244
</a>245
</div>246
247
<div class="col-6 text-end">248
<u> 15.07.2020</u>249
</div>250
</div>251
252
<!-- Article title and description -->253
<a href="" class="text-dark">254
<h5>This is title of the news</h5>255
256
<p>257
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed258
id nihil magni, sint vero provident esse numquam perferendis ducimus dicta259
adipisci iusto nam temporibus modi animi laboriosam?260
</p>261
</a>262
263
<hr />264
265
<!-- News -->266
<a href="" class="text-dark">267
<div class="row mb-4 border-bottom pb-2">268
<div class="col-3">269
<img src="https://mdbootstrap.com/img/new/standard/city/031.jpg"270
class="img-fluid shadow-1-strong rounded" alt="" />271
</div>272
273
<div class="col-9">274
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>275
<p>276
<u> 15.07.2020</u>277
</p>278
</div>279
</div>280
</a>281
282
<!-- News -->283
<a href="" class="text-dark">284
<div class="row mb-4 border-bottom pb-2">285
<div class="col-3">286
<img src="https://mdbootstrap.com/img/new/standard/city/032.jpg"287
class="img-fluid shadow-1-strong rounded" alt="" />288
</div>289
290
<div class="col-9">291
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>292
<p>293
<u> 15.07.2020</u>294
</p>295
</div>296
</div>297
</a>298
299
<!-- News -->300
<a href="" class="text-dark">301
<div class="row mb-4 border-bottom pb-2">302
<div class="col-3">303
<img src="https://mdbootstrap.com/img/new/standard/city/033.jpg"304
class="img-fluid shadow-1-strong rounded" alt="" />305
</div>306
307
<div class="col-9">308
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>309
<p>310
<u> 15.07.2020</u>311
</p>312
</div>313
</div>314
</a>315
316
<!-- News -->317
<a href="" class="text-dark">318
<div class="row mb-4 border-bottom pb-2">319
<div class="col-3">320
<img src="https://mdbootstrap.com/img/new/standard/city/034.jpg"321
class="img-fluid shadow-1-strong rounded" alt="" />322
</div>323
324
<div class="col-9">325
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>326
<p>327
<u> 15.07.2020</u>328
</p>329
</div>330
</div>331
</a>332
</div>333
<!-- News block -->334
</div>335
336
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">337
<!-- News block -->338
<div>339
<!-- Featured image -->340
<div class="bg-image hover-overlay shadow-1-strong mb-4" data-mdb-ripple-init data-mdb-ripple-color="light">341
<img src="https://mdbootstrap.com/img/new/fluid/city/018.jpg" class="img-fluid" />342
<a href="#!">343
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>344
</a>345
</div>346
347
<!-- Article data -->348
<div class="row mb-3">349
<div class="col-6">350
<a href="" class="text-warning">351
<i class="fas fa-code"></i>352
Technology353
</a>354
</div>355
356
<div class="col-6 text-end">357
<u> 15.07.2020</u>358
</div>359
</div>360
361
<!-- Article title and description -->362
<a href="" class="text-dark">363
<h5>This is title of the news</h5>364
365
<p>366
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, iste aliquid. Sed367
id nihil magni, sint vero provident esse numquam perferendis ducimus dicta368
adipisci iusto nam temporibus modi animi laboriosam?369
</p>370
</a>371
372
<hr />373
374
<!-- News -->375
<a href="" class="text-dark">376
<div class="row mb-4 border-bottom pb-2">377
<div class="col-3">378
<img src="https://mdbootstrap.com/img/new/standard/city/011.jpg"379
class="img-fluid shadow-1-strong rounded" alt="" />380
</div>381
382
<div class="col-9">383
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>384
<p>385
<u> 15.07.2020</u>386
</p>387
</div>388
</div>389
</a>390
391
<!-- News -->392
<a href="" class="text-dark">393
<div class="row mb-4 border-bottom pb-2">394
<div class="col-3">395
<img src="https://mdbootstrap.com/img/new/standard/city/012.jpg"396
class="img-fluid shadow-1-strong rounded" alt="" />397
</div>398
399
<div class="col-9">400
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>401
<p>402
<u> 15.07.2020</u>403
</p>404
</div>405
</div>406
</a>407
408
<!-- News -->409
<a href="" class="text-dark">410
<div class="row mb-4 border-bottom pb-2">411
<div class="col-3">412
<img src="https://mdbootstrap.com/img/new/standard/city/013.jpg"413
class="img-fluid shadow-1-strong rounded" alt="" />414
</div>415
416
<div class="col-9">417
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>418
<p>419
<u> 15.07.2020</u>420
</p>421
</div>422
</div>423
</a>424
425
<!-- News -->426
<a href="" class="text-dark">427
<div class="row mb-4 border-bottom pb-2">428
<div class="col-3">429
<img src="https://mdbootstrap.com/img/new/standard/city/014.jpg"430
class="img-fluid shadow-1-strong rounded" alt="" />431
</div>432
433
<div class="col-9">434
<p class="mb-2"><strong>Lorem ipsum dolor sit amet</strong></p>435
<p>436
<u> 15.07.2020</u>437
</p>438
</div>439
</div>440
</a>441
</div>442
<!-- News block -->443
</div>444
</div>445
</section>446
<!--Section: Content-->447
448
<!-- Pagination -->449
<nav class="my-4" aria-label="...">450
<ul class="pagination pagination-circle justify-content-center">451
<li class="page-item">452
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>453
</li>454
<li class="page-item"><a class="page-link" href="#">1</a></li>455
<li class="page-item active" aria-current="page">456
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>457
</li>458
<li class="page-item"><a class="page-link" href="#">3</a></li>459
<li class="page-item">460
<a class="page-link" href="#">Next</a>461
</li>462
</ul>463
</nav>464
</div>465
</main>466
<!--Main layout-->467
468
<!--Footer-->469
<footer class="bg-light text-lg-start">470
<div class="py-4 text-center">471
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init472
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">473
Learn Bootstrap 5474
</a>475
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">476
Download MDB UI KIT477
</a>478
</div>479
480
<hr class="m-0" />481
482
<div class="text-center py-4 align-items-center">483
<p>Follow MDB on social media</p>484
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init485
rel="nofollow" target="_blank">486
<i class="fab fa-youtube"></i>487
</a>488
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init489
target="_blank">490
<i class="fab fa-facebook-f"></i>491
</a>492
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init493
target="_blank">494
<i class="fab fa-twitter"></i>495
</a>496
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init497
target="_blank">498
<i class="fab fa-github"></i>499
</a>500
</div>501
502
<!-- Copyright -->503
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">504
© 2020 Copyright:505
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>506
</div>507
<!-- Copyright -->508
</footer>509
<!--Footer-->CSS
1
1
JS
1
1
Console errors: 0