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">65
<h4 class="mb-5"><strong>Latest posts</strong></h4>66
67
<div class="row">68
<div class="col-lg-6 mb-4">69
<div class="card">70
<div class="bg-image hover-overlay ripple" 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 class="card-body">77
<h5 class="card-title">Post title</h5>78
<p class="card-text">79
Some quick example text to build on the card title and make up the bulk of the80
card's content.81
</p>82
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>83
</div>84
</div>85
</div>86
87
<div class="col-lg-6 mb-4">88
<div class="card">89
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">90
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />91
<a href="#!">92
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>93
</a>94
</div>95
<div class="card-body">96
<h5 class="card-title">Post title</h5>97
<p class="card-text">98
Some quick example text to build on the card title and make up the bulk of the99
card's content.100
</p>101
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>102
</div>103
</div>104
</div>105
</div>106
107
<div class="row">108
<div class="col-lg-6 mb-4">109
<div class="card">110
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">111
<img src="https://mdbootstrap.com/img/new/standard/nature/002.jpg" class="img-fluid" />112
<a href="#!">113
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>114
</a>115
</div>116
<div class="card-body">117
<h5 class="card-title">Post title</h5>118
<p class="card-text">119
Some quick example text to build on the card title and make up the bulk of the120
card's content.121
</p>122
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>123
</div>124
</div>125
</div>126
127
<div class="col-lg-6 mb-4">128
<div class="card">129
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">130
<img src="https://mdbootstrap.com/img/new/standard/nature/022.jpg" class="img-fluid" />131
<a href="#!">132
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>133
</a>134
</div>135
<div class="card-body">136
<h5 class="card-title">Post title</h5>137
<p class="card-text">138
Some quick example text to build on the card title and make up the bulk of the139
card's content.140
</p>141
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>142
</div>143
</div>144
</div>145
</div>146
</section>147
<!--Section: Content-->148
149
<!-- Pagination -->150
<nav class="my-4" aria-label="...">151
<ul class="pagination pagination-circle justify-content-center">152
<li class="page-item">153
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>154
</li>155
<li class="page-item"><a class="page-link" href="#">1</a></li>156
<li class="page-item active" aria-current="page">157
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>158
</li>159
<li class="page-item"><a class="page-link" href="#">3</a></li>160
<li class="page-item">161
<a class="page-link" href="#">Next</a>162
</li>163
</ul>164
</nav>165
</div>166
</main>167
<!--Main layout-->168
169
<!--Footer-->170
<footer class="bg-light text-lg-start">171
<div class="py-4 text-center">172
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init173
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">174
Learn Bootstrap 5175
</a>176
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">177
Download MDB UI KIT178
</a>179
</div>180
181
<hr class="m-0" />182
183
<div class="text-center py-4 align-items-center">184
<p>Follow MDB on social media</p>185
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init186
rel="nofollow" target="_blank">187
<i class="fab fa-youtube"></i>188
</a>189
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init190
target="_blank">191
<i class="fab fa-facebook-f"></i>192
</a>193
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init194
target="_blank">195
<i class="fab fa-twitter"></i>196
</a>197
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init198
target="_blank">199
<i class="fab fa-github"></i>200
</a>201
</div>202
203
<!-- Copyright -->204
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">205
© 2020 Copyright:206
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>207
</div>208
<!-- Copyright -->209
</footer>210
<!--Footer-->1
1
1
1
Console errors: 0