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-0 h4">This is a long title of the article</h1>76
</div>77
<!-- Jumbotron -->78
</header>79
<!--Main Navigation-->80
81
<!--Main layout-->82
<main class="mt-4 mb-5">83
<div class="container">84
<!--Grid row-->85
<div class="row">86
<!--Grid column-->87
<div class="col-md-8 mb-4">88
<!--Section: Post data-mdb-->89
<section class="border-bottom mb-4">90
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(144).jpg"91
class="img-fluid shadow-2-strong rounded mb-4" alt="" />92
93
<div class="row align-items-center mb-4">94
<div class="col-lg-6 text-center text-lg-start mb-3 m-lg-0">95
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (23).jpg" class="rounded shadow-1-strong me-2"96
height="35" alt="" loading="lazy" />97
<span> Published <u>15.07.2020</u> by</span>98
<a href="" class="text-dark">Anna Maria Doe</a>99
</div>100
101
<div class="col-lg-6 text-center text-lg-end">102
<button type="button" class="btn btn-primary px-3 me-1" data-mdb-ripple-init103
style="background-color: #3b5998;">104
<i class="fab fa-facebook-f"></i>105
</button>106
<button type="button" class="btn btn-primary px-3 me-1" data-mdb-ripple-init107
style="background-color: #55acee;">108
<i class="fab fa-twitter"></i>109
</button>110
<button type="button" class="btn btn-primary px-3 me-1" data-mdb-ripple-init111
style="background-color: #0082ca;">112
<i class="fab fa-linkedin"></i>113
</button>114
<button type="button" class="btn btn-primary px-3 me-1" data-mdb-ripple-init>115
<i class="fas fa-comments"></i>116
</button>117
</div>118
</div>119
</section>120
<!--Section: Post data-mdb-->121
122
<!--Section: Text-->123
<section>124
<p>125
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio sapiente molestias126
consectetur. Fuga nulla officia error placeat veniam, officiis rerum laboriosam127
ullam molestiae magni velit laborum itaque minima doloribus eligendi! Lorem ipsum,128
dolor sit amet consectetur adipisicing elit. Optio sapiente molestias consectetur.129
Fuga nulla officia error placeat veniam, officiis rerum laboriosam ullam molestiae130
magni velit laborum itaque minima doloribus eligendi!131
</p>132
133
<p><strong>Optio sapiente molestias consectetur?</strong></p>134
135
<p>136
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum architecto ex ab aut137
tempora officia libero praesentium, sint id magnam eius natus unde blanditiis. Autem138
adipisci totam sit consequuntur eligendi.139
</p>140
141
<p class="note note-light">142
<strong>Note:</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.143
Optio odit consequatur porro sequi ab distinctio modi. Rerum cum dolores sint,144
adipisci ad veritatis laborum eaque illum saepe mollitia ut voluptatum.145
</p>146
147
<p>148
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, libero repellat149
molestiae aperiam laborum aliquid atque magni nostrum, inventore perspiciatis150
possimus quia incidunt maiores molestias eaque nam commodi! Magnam, labore.151
</p>152
153
<img src="https://mdbootstrap.com/img/new/slides/041.jpg" class="img-fluid shadow-1-strong rounded mb-4"154
alt="" />155
156
<ul>157
<li>Lorem</li>158
<li>Ipsum</li>159
<li>Dolor</li>160
<li>Sit</li>161
<li>Amet</li>162
</ul>163
164
<p>165
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, temporibus nulla166
voluptatibus accusantium sapiente doloremque. Doloribus ratione laboriosam culpa. Ab167
officiis quidem, debitis nostrum in accusantium dolore veritatis eius est?168
</p>169
</section>170
<!--Section: Text-->171
172
<!--Section: Share buttons-->173
<section class="text-center border-top border-bottom py-4 mb-4">174
<p><strong>Share with your friends:</strong></p>175
176
<button type="button" class="btn btn-primary me-1" data-mdb-ripple-init style="background-color: #3b5998;">177
<i class="fab fa-facebook-f"></i>178
</button>179
<button type="button" class="btn btn-primary me-1" data-mdb-ripple-init style="background-color: #55acee;">180
<i class="fab fa-twitter"></i>181
</button>182
<button type="button" class="btn btn-primary me-1" data-mdb-ripple-init style="background-color: #0082ca;">183
<i class="fab fa-linkedin"></i>184
</button>185
<button type="button" class="btn btn-primary me-1" data-mdb-ripple-init>186
<i class="fas fa-comments me-2"></i>Add comment187
</button>188
</section>189
<!--Section: Share buttons-->190
191
<!--Section: Author-->192
<section class="border-bottom mb-4 pb-4">193
<div class="row">194
<div class="col-3">195
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(23).jpg"196
class="img-fluid shadow-1-strong rounded" alt="" />197
</div>198
199
<div class="col-9">200
<p class="mb-2"><strong>Anna Maria Doe</strong></p>201
<a href="" class="text-dark"><i class="fab fa-facebook-f me-1"></i></a>202
<a href="" class="text-dark"><i class="fab fa-twitter me-1"></i></a>203
<a href="" class="text-dark"><i class="fab fa-linkedin me-1"></i></a>204
<p>205
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est ab iure206
inventore dolorum consectetur? Molestiae aperiam atque quasi consequatur aut?207
Repellendus alias dolor ad nam, soluta distinctio quis accusantium!208
</p>209
</div>210
</div>211
</section>212
<!--Section: Author-->213
214
<!--Section: Comments-->215
<section class="border-bottom mb-3">216
<p class="text-center"><strong>Comments: 3</strong></p>217
218
<!-- Comment -->219
<div class="row mb-4">220
<div class="col-2">221
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(24).jpg"222
class="img-fluid shadow-1-strong rounded" alt="" />223
</div>224
225
<div class="col-10">226
<p class="mb-2"><strong>Marta Dolores</strong></p>227
<p>228
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est ab iure229
inventore dolorum consectetur? Molestiae aperiam atque quasi consequatur aut?230
Repellendus alias dolor ad nam, soluta distinctio quis accusantium!231
</p>232
</div>233
</div>234
235
<!-- Comment -->236
<div class="row mb-4">237
<div class="col-2">238
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(25).jpg"239
class="img-fluid shadow-1-strong rounded" alt="" />240
</div>241
242
<div class="col-10">243
<p class="mb-2"><strong>Valeria Groove</strong></p>244
<p>245
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est ab iure246
inventore dolorum consectetur? Molestiae aperiam atque quasi consequatur aut?247
Repellendus alias dolor ad nam, soluta distinctio quis accusantium!248
</p>249
</div>250
</div>251
252
<!-- Comment -->253
<div class="row mb-4">254
<div class="col-2">255
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).jpg"256
class="img-fluid shadow-1-strong rounded" alt="" />257
</div>258
259
<div class="col-10">260
<p class="mb-2"><strong>Antonia Velez</strong></p>261
<p>262
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est ab iure263
inventore dolorum consectetur? Molestiae aperiam atque quasi consequatur aut?264
Repellendus alias dolor ad nam, soluta distinctio quis accusantium!265
</p>266
</div>267
</div>268
</section>269
<!--Section: Comments-->270
271
<!--Section: Reply-->272
<section>273
<p class="text-center"><strong>Leave a reply</strong></p>274
275
<form>276
<!-- Name input -->277
<div class="form-outline mb-4" data-mdb-input-init>278
<input type="text" id="form4Example1" class="form-control" />279
<label class="form-label" for="form4Example1">Name</label>280
</div>281
282
<!-- Email input -->283
<div class="form-outline mb-4" data-mdb-input-init>284
<input type="email" id="form4Example2" class="form-control" />285
<label class="form-label" for="form4Example2">Email address</label>286
</div>287
288
<!-- Message input -->289
<div class="form-outline mb-4" data-mdb-input-init>290
<textarea class="form-control" id="form4Example3" rows="4"></textarea>291
<label class="form-label" for="form4Example3">Text</label>292
</div>293
294
<!-- Checkbox -->295
<div class="form-check d-flex justify-content-center mb-4">296
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />297
<label class="form-check-label" for="form4Example4">298
Send me a copy of this comment299
</label>300
</div>301
302
<!-- Submit button -->303
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>304
Publish305
</button>306
</form>307
</section>308
<!--Section: Reply-->309
</div>310
<!--Grid column-->311
312
<!--Grid column-->313
<div class="col-md-4 mb-4">314
<!--Section: Sidebar-->315
<section class="sticky-top" style="top: 80px;">316
<!--Section: Ad-->317
<section class="text-center border-bottom pb-4 mb-4">318
<div class="bg-image hover-overlay mb-4" data-mdb-ripple-init>319
<img320
src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/about/assets/mdb5-about.webp"321
class="img-fluid" />322
<a href="https://mdbootstrap.com/docs/standard/" target="_blank">323
<div class="mask" style="background-color: rgba(57, 192, 237, 0.2);"></div>324
</a>325
</div>326
<h5>Material Design for Bootstrap 5</h5>327
328
<p>329
500+ components, free templates, 1-min installation, extensive tutorial, huge330
community. MIT license - free for personal & commercial use331
</p>332
<a role="button" class="btn btn-primary" data-mdb-ripple-init333
href="https://mdbootstrap.com/docs/standard/" target="_blank">Download for free<i334
class="fas fa-download ms-2"></i></a>335
</section>336
<!--Section: Ad-->337
338
<!--Section: Video-->339
<section class="text-center">340
<h5 class="mb-4">Learn the newest Bootstrap 5</h5>341
342
<div class="embed-responsive embed-responsive-16by9 shadow-4-strong">343
<iframe class="embed-responsive-item rounded" src="https://www.youtube.com/embed/c9B4TPnak1A"344
allowfullscreen></iframe>345
</div>346
</section>347
<!--Section: Video-->348
</section>349
<!--Section: Sidebar-->350
</div>351
<!--Grid column-->352
</div>353
<!--Grid row-->354
</div>355
</main>356
<!--Main layout-->357
358
<!--Footer-->359
<footer class="bg-light text-lg-start">360
<div class="py-4 text-center">361
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init362
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">363
Learn Bootstrap 5364
</a>365
<a role="button" class="btn btn-primary btn-lg m-2" href="https://mdbootstrap.com/docs/standard/" target="_blank">366
Download MDB UI KIT367
</a>368
</div>369
370
<hr class="m-0" />371
372
<div class="text-center py-4 align-items-center">373
<p>Follow MDB on social media</p>374
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button"375
data-mdb-ripple-init rel="nofollow" target="_blank">376
<i class="fab fa-youtube"></i>377
</a>378
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow"379
data-mdb-ripple-init target="_blank">380
<i class="fab fa-facebook-f"></i>381
</a>382
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow"383
data-mdb-ripple-init target="_blank">384
<i class="fab fa-twitter"></i>385
</a>386
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow"387
data-mdb-ripple-init target="_blank">388
<i class="fab fa-github"></i>389
</a>390
</div>391
392
<!-- Copyright -->393
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">394
© 2020 Copyright:395
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>396
</div>397
<!-- Copyright -->398
</footer>399
<!--Footer-->CSS
1
1
JS
1
1
Console errors: 0