HTML
xxxxxxxxxx1
<!--Navbar-->2
<nav class="navbar navbar-expand-lg navbar-dark primary-color">3
4
<!-- Navbar brand -->5
<a class="navbar-brand" href="#">Navbar</a>6
7
<!-- Collapse button -->8
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"9
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">10
<span class="navbar-toggler-icon"></span>11
</button>12
13
<!-- Collapsible content -->14
<div class="collapse navbar-collapse" id="basicExampleNav">15
16
<!-- Links -->17
<ul class="navbar-nav mr-auto">18
<li class="nav-item active">19
<a class="nav-link" href="#">Home20
<span class="sr-only">(current)</span>21
</a>22
</li>23
<li class="nav-item">24
<a class="nav-link" href="#">Features</a>25
</li>26
<li class="nav-item">27
<a class="nav-link" href="#">Pricing</a>28
</li>29
30
<!-- Dropdown -->31
<li class="nav-item dropdown">32
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"33
aria-haspopup="true" aria-expanded="false">Dropdown</a>34
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">35
<a class="dropdown-item" href="#">Action</a>36
<a class="dropdown-item" href="#">Another action</a>37
<a class="dropdown-item" href="#">Something else here</a>38
</div>39
</li>40
41
</ul>42
<!-- Links -->43
44
<form class="form-inline">45
<div class="md-form my-0">46
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">47
</div>48
</form>49
</div>50
<!-- Collapsible content -->51
52
</nav>53
<!--/.Navbar-->54
55
<div class="container">56
57
<!-- Grid row -->58
<div class="row mt-5">59
60
<!-- Grid column -->61
<div class="col-md-8 mb-4">62
63
<h1 class="font-weight-bold">Title of the news</h1>64
<h3 class="dark-grey-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</h3>65
66
<div class="card my-4">67
<img src="https://mdbootstrap.com/img/Photos/Others/city8.jpg" class="img-fluid" alt="">68
</div>69
70
<p class="h5 my-4">That's a very long heading </p>71
72
<blockquote class="blockquote">73
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>74
<footer class="blockquote-footer">Someone famous in75
<cite title="Source Title">Source Title</cite>76
</footer>77
</blockquote>78
79
<p class="h5 my-4">That's a very long heading </p>80
81
<p align="justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis82
ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,83
consequuntur maiores sed eligendi. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>84
85
<p align="justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis86
ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,87
consequuntur maiores sed eligendi. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>88
89
<p align="justify">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, ut rerum deserunt corporis90
ducimus at, deleniti ea alias dolor reprehenderit sit vel. Incidunt id illum doloribus,91
consequuntur maiores sed eligendi. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>92
93
<p align="justify">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>94
95
<h4 class="text-center font-weight-bold mb-3">Share this article</h4>96
<ul class="list-unstyled list-inline text-center">97
<li class="list-inline-item"><a><i class="fab fa-facebook-f fa-lg px-2 text-primary"></i></a></li>98
<li class="list-inline-item"><a><i class="fab fa-twitter fa-lg px-2 text-info"></i></a></li>99
<li class="list-inline-item"><a><i class="far fa-envelope fa-lg px-2 text-default"></i></a></li>100
</ul>101
</div>102
<!-- Grid column -->103
104
<!-- Grid column -->105
<div class="col-md-4 mb-4">106
107
<section class="magazine-section mb-5">108
109
<h5 class="font-weight-bold text-center mb-4 pb-2">The newest articles</h5>110
111
<!-- Grid row -->112
<div class="row">113
114
<!-- Grid column -->115
<div class="col-md-12">116
117
<!-- Small news -->118
<div class="single-news mb-4">119
120
<!-- Grid row -->121
<div class="row">122
123
<!-- Grid column -->124
<div class="col-md-3">125
126
<!--Image-->127
<div class="view overlay rounded z-depth-1 mb-4">128
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/img%20(29).jpg" alt="Sample image">129
<a>130
<div class="mask rgba-white-slight"></div>131
</a>132
</div>133
134
</div>135
<!-- Grid column -->136
137
<!-- Grid column -->138
<div class="col-md-9">139
140
<!-- Excerpt -->141
<p class="font-weight-bold dark-grey-text">26/02/2018</p>142
<div class="d-flex justify-content-between">143
<div class="col-11 text-truncate pl-0 mb-3">144
<a href="#!" class="dark-grey-text">At vero eos et accusamus et iusto odio dignissimos145
ducimus qui blanditiis</a>146
</div>147
<a><i class="fas fa-angle-right"></i></a>148
</div>149
150
</div>151
<!-- Grid column -->152
153
</div>154
<!-- Grid row -->155
156
</div>157
<!-- Small news -->158
159
<!-- Small news -->160
<div class="single-news mb-4">161
162
<!-- Grid row -->163
<div class="row">164
165
<!-- Grid column -->166
<div class="col-md-3">167
168
<!--Image-->169
<div class="view overlay rounded z-depth-1 mb-4">170
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg"171
alt="Sample image">172
<a>173
<div class="mask rgba-white-slight"></div>174
</a>175
</div>176
177
</div>178
<!-- Grid column -->179
180
<!-- Grid column -->181
<div class="col-md-9">182
183
<!-- Excerpt -->184
<p class="font-weight-bold dark-grey-text">25/02/2018</p>185
<div class="d-flex justify-content-between">186
<div class="col-11 text-truncate pl-0 mb-3">187
<a href="#!" class="dark-grey-text">Itaque earum rerum hic tenetur a sapiente delectus</a>188
</div>189
<a><i class="fas fa-angle-right"></i></a>190
</div>191
192
</div>193
<!-- Grid column -->194
195
</div>196
<!-- Grid row -->197
198
</div>199
<!-- Small news -->200
201
<!-- Small news -->202
<div class="single-news mb-4">203
204
<!-- Grid row -->205
<div class="row">206
207
<!-- Grid column -->208
<div class="col-md-3">209
210
<!--Image-->211
<div class="view overlay rounded z-depth-1 mb-4">212
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/87.jpg" alt="Sample image">213
<a>214
<div class="mask rgba-white-slight"></div>215
</a>216
</div>217
218
</div>219
<!-- Grid column -->220
221
<!-- Grid column -->222
<div class="col-md-9">223
224
<!-- Excerpt -->225
<p class="font-weight-bold dark-grey-text">24/02/2018</p>226
<div class="d-flex justify-content-between">227
<div class="col-11 text-truncate pl-0 mb-3">228
<a href="#!" class="dark-grey-text">Soluta nobis est eligendi optio cumque nihil impedit quo229
minus</a>230
</div>231
<a><i class="fas fa-angle-right"></i></a>232
</div>233
234
</div>235
<!-- Grid column -->236
237
</div>238
<!-- Grid row -->239
240
</div>241
<!-- Small news -->242
243
<!-- Small news -->244
<div class="single-news">245
246
<!-- Grid row -->247
<div class="row">248
249
<!-- Grid column -->250
<div class="col-md-3">251
252
<!--Image-->253
<div class="view overlay rounded z-depth-1 mb-md-0 mb-4">254
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/img%20(27).jpg" alt="Sample image">255
<a>256
<div class="mask rgba-white-slight"></div>257
</a>258
</div>259
260
</div>261
<!-- Grid column -->262
263
<!-- Grid column -->264
<div class="col-md-9">265
266
<!-- Excerpt -->267
<p class="font-weight-bold dark-grey-text">23/02/2018</p>268
<div class="d-flex justify-content-between">269
<div class="col-11 text-truncate pl-0 mb-lg-3">270
<a href="#!" class="dark-grey-text">Duis aute irure dolor in reprehenderit in voluptate</a>271
</div>272
<a><i class="fas fa-angle-right"></i></a>273
</div>274
275
</div>276
<!-- Grid column -->277
278
</div>279
<!-- Grid row -->280
281
</div>282
<!-- Small news -->283
284
</div>285
<!--Grid column-->286
287
</div>288
<!-- Grid row -->289
290
</section>291
292
<section class="text-center mb-5">293
294
<h5 class="font-weight-bold mb-4">Related topics</h5>295
296
<ul class="list-group list-group-flush">297
<li class="list-group-item">Cras justo odio</li>298
<li class="list-group-item">Dapibus ac facilisis in</li>299
<li class="list-group-item">Morbi leo risus</li>300
<li class="list-group-item">Porta ac consectetur ac</li>301
<li class="list-group-item">Vestibulum at eros</li>302
</ul>303
304
</section>305
306
<section>307
308
<!-- Default form subscription -->309
<form class="text-center border border-light p-5">310
311
<p class="h4 mb-4">Subscribe</p>312
313
<p>Join our mailing list. We write rarely, but only the best content.</p>314
315
<p>316
<a href="" target="_blank">See the last newsletter</a>317
</p>318
319
<!-- Name -->320
<input type="text" id="defaultSubscriptionFormPassword" class="form-control mb-4" placeholder="Name">321
322
<!-- Email -->323
<input type="email" id="defaultSubscriptionFormEmail" class="form-control mb-4" placeholder="E-mail">324
325
<!-- Sign in button -->326
<button class="btn btn-info btn-block" type="submit">Sign in</button>327
328
329
</form>330
<!-- Default form subscription -->331
332
</section>333
334
</div>335
<!-- Grid column -->336
337
</div>338
<!-- Grid row -->339
340
</div>341
342
<!-- Footer -->343
<footer class="page-footer font-small blue pt-4">344
345
<!-- Footer Links -->346
<div class="container-fluid text-center text-md-left">347
348
<!-- Grid row -->349
<div class="row">350
351
<!-- Grid column -->352
<div class="col-md-6 mt-md-0 mt-3">353
354
<!-- Content -->355
<h5 class="text-uppercase">Footer Content</h5>356
<p>Here you can use rows and columns to organize your footer content.</p>357
358
</div>359
<!-- Grid column -->360
361
<hr class="clearfix w-100 d-md-none pb-3">362
363
<!-- Grid column -->364
<div class="col-md-3 mb-md-0 mb-3">365
366
<!-- Links -->367
<h5 class="text-uppercase">Links</h5>368
369
<ul class="list-unstyled">370
<li>371
<a href="#!">Link 1</a>372
</li>373
<li>374
<a href="#!">Link 2</a>375
</li>376
<li>377
<a href="#!">Link 3</a>378
</li>379
<li>380
<a href="#!">Link 4</a>381
</li>382
</ul>383
384
</div>385
<!-- Grid column -->386
387
<!-- Grid column -->388
<div class="col-md-3 mb-md-0 mb-3">389
390
<!-- Links -->391
<h5 class="text-uppercase">Links</h5>392
393
<ul class="list-unstyled">394
<li>395
<a href="#!">Link 1</a>396
</li>397
<li>398
<a href="#!">Link 2</a>399
</li>400
<li>401
<a href="#!">Link 3</a>402
</li>403
<li>404
<a href="#!">Link 4</a>405
</li>406
</ul>407
408
</div>409
<!-- Grid column -->410
411
</div>412
<!-- Grid row -->413
414
</div>415
<!-- Footer Links -->416
417
<!-- Copyright -->418
<div class="footer-copyright text-center py-3">© 2020 Copyright:419
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>420
</div>421
<!-- Copyright -->422
423
</footer>424
<!-- Footer -->CSS
xxxxxxxxxx1
html {2
background-color: #9e9e9e!important;3
}4
body {5
border: 1px solid #dee2e6!important;6
background-color: #fff!important;7
margin: 5rem;8
}9
JS
1
1
Console errors: 0