HTML
xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<!-- Navbar -->4
<nav class="navbar navbar-expand-lg navbar-light bg-white">5
<div class="container-fluid">6
<!-- Navbar brand -->7
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">8
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"9
style="margin-top: -3px;" />10
</a>11
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"12
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">13
<i class="fas fa-bars"></i>14
</button>15
<div class="collapse navbar-collapse" id="navbarExample01">16
<ul class="navbar-nav me-auto mb-2 mb-lg-0">17
<li class="nav-item active">18
<a class="nav-link" aria-current="page" href="#intro">Home</a>19
</li>20
<li class="nav-item">21
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"22
target="_blank">Learn Bootstrap 5</a>23
</li>24
<li class="nav-item">25
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>26
</li>27
</ul>28
29
<ul class="navbar-nav d-flex flex-row">30
<!-- Icons -->31
<li class="nav-item me-3 me-lg-0">32
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"33
target="_blank">34
<i class="fab fa-youtube"></i>35
</a>36
</li>37
<li class="nav-item me-3 me-lg-0">38
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">39
<i class="fab fa-facebook-f"></i>40
</a>41
</li>42
<li class="nav-item me-3 me-lg-0">43
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">44
<i class="fab fa-twitter"></i>45
</a>46
</li>47
<li class="nav-item me-3 me-lg-0">48
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">49
<i class="fab fa-github"></i>50
</a>51
</li>52
</ul>53
</div>54
</div>55
</nav>56
<!-- Navbar -->57
</header>58
<!--Main Navigation-->59
60
<!--Main layout-->61
<main class="my-5">62
<div class="container">63
<!--Section: Content-->64
<section class="text-center text-md-start">65
<h4 class="mb-5"><strong>Latest posts</strong></h4>66
67
<!-- Post -->68
<div class="row">69
<div class="col-md-4 mb-4">70
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">71
<img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="img-fluid" />72
<a href="#!">73
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>74
</a>75
</div>76
</div>77
78
<div class="col-md-8 mb-4">79
<h5>Very long post title</h5>80
<p>81
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione82
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam minus83
ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos magni.84
</p>85
86
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>87
</div>88
</div>89
90
<!-- Post -->91
<div class="row">92
<div class="col-md-4 mb-4">93
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">94
<img src="https://mdbootstrap.com/img/new/standard/nature/002.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-8 mb-4">102
<h5>Very long post title</h5>103
<p>104
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione105
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam minus106
ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos magni.107
</p>108
109
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>110
</div>111
</div>112
113
<!-- Post -->114
<div class="row">115
<div class="col-md-4 mb-4">116
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">117
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />118
<a href="#!">119
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>120
</a>121
</div>122
</div>123
124
<div class="col-md-8 mb-4">125
<h5>Very long post title</h5>126
<p>127
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione128
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam minus129
ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos magni.130
</p>131
132
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>133
</div>134
</div>135
136
<!-- Post -->137
<div class="row">138
<div class="col-md-4 mb-4">139
<div class="bg-image hover-overlay shadow-1-strong rounded" data-mdb-ripple-init data-mdb-ripple-color="light">140
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />141
<a href="#!">142
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>143
</a>144
</div>145
</div>146
147
<div class="col-md-8 mb-4">148
<h5>Very long post title</h5>149
<p>150
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ratione151
necessitatibus itaque error alias repellendus nemo reiciendis aperiam quisquam minus152
ipsam reprehenderit commodi ducimus, in dicta aliquam eveniet dignissimos magni.153
</p>154
155
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Read</button>156
</div>157
</div>158
</section>159
<!--Section: Content-->160
161
<!-- Pagination -->162
<nav class="my-4" aria-label="...">163
<ul class="pagination pagination-circle justify-content-center">164
<li class="page-item">165
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>166
</li>167
<li class="page-item"><a class="page-link" href="#">1</a></li>168
<li class="page-item active" aria-current="page">169
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>170
</li>171
<li class="page-item"><a class="page-link" href="#">3</a></li>172
<li class="page-item">173
<a class="page-link" href="#">Next</a>174
</li>175
</ul>176
</nav>177
</div>178
</main>179
<!--Main layout-->180
181
<!--Footer-->182
<footer class="bg-light text-lg-start">183
<div class="py-4 text-center">184
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init185
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">186
Learn Bootstrap 5187
</a>188
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">189
Download MDB UI KIT190
</a>191
</div>192
193
<hr class="m-0" />194
195
<div class="text-center py-4 align-items-center">196
<p>Follow MDB on social media</p>197
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init198
rel="nofollow" target="_blank">199
<i class="fab fa-youtube"></i>200
</a>201
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init202
target="_blank">203
<i class="fab fa-facebook-f"></i>204
</a>205
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init206
target="_blank">207
<i class="fab fa-twitter"></i>208
</a>209
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init210
target="_blank">211
<i class="fab fa-github"></i>212
</a>213
</div>214
215
<!-- Copyright -->216
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">217
© 2020 Copyright:218
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>219
</div>220
<!-- Copyright -->221
</footer>222
<!--Footer-->CSS
1
1
JS
1
1
Console errors: 0