HTML
xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
4
<!-- Navbar -->5
<nav class="navbar navbar-expand-lg navbar-light bg-white">6
<div class="container-fluid">7
<!-- Navbar brand -->8
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">9
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"10
style="margin-top: -3px;" />11
</a>12
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"13
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">14
<i class="fas fa-bars"></i>15
</button>16
<div class="collapse navbar-collapse" id="navbarExample01">17
<ul class="navbar-nav me-auto mb-2 mb-lg-0">18
<li class="nav-item active">19
<a class="nav-link" aria-current="page" href="#intro">Home</a>20
</li>21
<li class="nav-item">22
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"23
target="_blank">Learn Bootstrap 5</a>24
</li>25
<li class="nav-item">26
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>27
</li>28
</ul>29
30
<ul class="navbar-nav d-flex flex-row">31
<!-- Icons -->32
<li class="nav-item me-3 me-lg-0">33
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"34
target="_blank">35
<i class="fab fa-youtube"></i>36
</a>37
</li>38
<li class="nav-item me-3 me-lg-0">39
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">40
<i class="fab fa-facebook-f"></i>41
</a>42
</li>43
<li class="nav-item me-3 me-lg-0">44
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">45
<i class="fab fa-twitter"></i>46
</a>47
</li>48
<li class="nav-item me-3 me-lg-0">49
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">50
<i class="fab fa-github"></i>51
</a>52
</li>53
</ul>54
</div>55
</div>56
</nav>57
<!-- Navbar -->58
</header>59
<!--Main Navigation-->60
61
<!--Main layout-->62
<main class="my-5">63
<div class="container">64
<!--Section: Content-->65
<section class="text-center">66
<h4 class="mb-5"><strong>Latest posts</strong></h4>67
68
<div class="row">69
<div class="col-lg-4 col-md-12 mb-4">70
<div class="card">71
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">72
<img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="img-fluid" />73
<a href="#!">74
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>75
</a>76
</div>77
<div class="card-body">78
<h5 class="card-title">Post title</h5>79
<p class="card-text">80
Some quick example text to build on the card title and make up the bulk of the81
card's content.82
</p>83
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>84
</div>85
</div>86
</div>87
88
<div class="col-lg-4 col-md-6 mb-4">89
<div class="card">90
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">91
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />92
<a href="#!">93
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>94
</a>95
</div>96
<div class="card-body">97
<h5 class="card-title">Post title</h5>98
<p class="card-text">99
Some quick example text to build on the card title and make up the bulk of the100
card's content.101
</p>102
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>103
</div>104
</div>105
</div>106
107
<div class="col-lg-4 col-md-6 mb-4">108
<div class="card">109
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">110
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />111
<a href="#!">112
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>113
</a>114
</div>115
<div class="card-body">116
<h5 class="card-title">Post title</h5>117
<p class="card-text">118
Some quick example text to build on the card title and make up the bulk of the119
card's content.120
</p>121
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>122
</div>123
</div>124
</div>125
</div>126
127
<div class="row">128
<div class="col-lg-4 col-md-12 mb-4">129
<div class="card">130
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">131
<img src="https://mdbootstrap.com/img/new/standard/nature/002.jpg" class="img-fluid" />132
<a href="#!">133
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>134
</a>135
</div>136
<div class="card-body">137
<h5 class="card-title">Post title</h5>138
<p class="card-text">139
Some quick example text to build on the card title and make up the bulk of the140
card's content.141
</p>142
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>143
</div>144
</div>145
</div>146
147
<div class="col-lg-4 col-md-6 mb-4">148
<div class="card">149
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">150
<img src="https://mdbootstrap.com/img/new/standard/nature/022.jpg" class="img-fluid" />151
<a href="#!">152
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>153
</a>154
</div>155
<div class="card-body">156
<h5 class="card-title">Post title</h5>157
<p class="card-text">158
Some quick example text to build on the card title and make up the bulk of the159
card's content.160
</p>161
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>162
</div>163
</div>164
</div>165
166
<div class="col-lg-4 col-md-6 mb-4">167
<div class="card">168
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">169
<img src="https://mdbootstrap.com/img/new/standard/nature/035.jpg" class="img-fluid" />170
<a href="#!">171
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>172
</a>173
</div>174
<div class="card-body">175
<h5 class="card-title">Post title</h5>176
<p class="card-text">177
Some quick example text to build on the card title and make up the bulk of the178
card's content.179
</p>180
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>181
</div>182
</div>183
</div>184
</div>185
</section>186
<!--Section: Content-->187
188
<!-- Pagination -->189
<nav class="my-4" aria-label="...">190
<ul class="pagination pagination-circle justify-content-center">191
<li class="page-item">192
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>193
</li>194
<li class="page-item"><a class="page-link" href="#">1</a></li>195
<li class="page-item active" aria-current="page">196
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>197
</li>198
<li class="page-item"><a class="page-link" href="#">3</a></li>199
<li class="page-item">200
<a class="page-link" href="#">Next</a>201
</li>202
</ul>203
</nav>204
</div>205
</main>206
<!--Main layout-->207
208
<!--Footer-->209
<footer class="bg-light text-lg-start">210
<div class="py-4 text-center">211
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init212
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">213
Learn Bootstrap 5214
</a>215
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">216
Download MDB UI KIT217
</a>218
</div>219
220
<hr class="m-0" />221
222
<div class="text-center py-4 align-items-center">223
<p>Follow MDB on social media</p>224
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init225
rel="nofollow" target="_blank">226
<i class="fab fa-youtube"></i>227
</a>228
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init229
target="_blank">230
<i class="fab fa-facebook-f"></i>231
</a>232
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init233
target="_blank">234
<i class="fab fa-twitter"></i>235
</a>236
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init237
target="_blank">238
<i class="fab fa-github"></i>239
</a>240
</div>241
242
<!-- Copyright -->243
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">244
© 2020 Copyright:245
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>246
</div>247
<!-- Copyright -->248
</footer>249
<!--Footer-->CSS
1
1
JS
1
1
Console errors: 0