xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<!-- Intro settings -->4
<style>5
#intro {6
/* Margin to fix overlapping fixed navbar */7
margin-top: 100px;8
}9
</style>10
11
<!-- Navbar -->12
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">13
<div class="container-fluid">14
<!-- Navbar brand -->15
<a class="navbar-brand" target="_blank" href="https://mdbootstrap.com/docs/standard/">16
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="16" alt="" loading="lazy"17
style="margin-top: -3px;" />18
</a>19
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"20
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">21
<i class="fas fa-bars"></i>22
</button>23
<div class="collapse navbar-collapse" id="navbarExample01">24
<ul class="navbar-nav me-auto mb-2 mb-lg-0">25
<li class="nav-item active">26
<a class="nav-link" aria-current="page" href="#intro">Home</a>27
</li>28
<li class="nav-item">29
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"30
target="_blank">Learn Bootstrap 5</a>31
</li>32
<li class="nav-item">33
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>34
</li>35
</ul>36
37
<ul class="navbar-nav d-flex flex-row">38
<!-- Icons -->39
<li class="nav-item me-3 me-lg-0">40
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"41
target="_blank">42
<i class="fab fa-youtube"></i>43
</a>44
</li>45
<li class="nav-item me-3 me-lg-0">46
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">47
<i class="fab fa-facebook-f"></i>48
</a>49
</li>50
<li class="nav-item me-3 me-lg-0">51
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">52
<i class="fab fa-twitter"></i>53
</a>54
</li>55
<li class="nav-item me-3 me-lg-0">56
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">57
<i class="fab fa-github"></i>58
</a>59
</li>60
</ul>61
</div>62
</div>63
</nav>64
<!-- Navbar -->65
</header>66
<!--Main Navigation-->67
68
<!--Main layout-->69
<main class="my-5">70
<div class="container">71
<!--Section: Content-->72
<section>73
<!-- Jumbotron -->74
<div id="intro" class="p-5 text-center bg-light shadow-5 rounded mb-5">75
<h1 class="mb-3 h2">Learn Bootstrap 5 with MDB</h1>76
<p class="mb-3">Best & free guide of responsive web design</p>77
<a class="btn btn-primary m-2" href="https://www.youtube.com/watch?v=c9B4TPnak1A" role="button" rel="nofollow" data-mdb-ripple-init78
target="_blank">Start tutorial</a>79
<a class="btn btn-primary m-2" href="https://mdbootstrap.com/docs/standard/" target="_blank" data-mdb-ripple-init80
role="button">Download MDB UI KIT</a>81
</div>82
<!-- Jumbotron -->83
</section>84
<!--Section: Content-->85
86
<!--Section: Content-->87
<section class="text-center">88
<h4 class="mb-5"><strong>Latest posts</strong></h4>89
90
<div class="row">91
<div class="col-lg-4 col-md-12 mb-4">92
<div class="card">93
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">94
<img src="https://mdbootstrap.com/img/new/standard/nature/184.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 class="card-body">100
<h5 class="card-title">Post title</h5>101
<p class="card-text">102
Some quick example text to build on the card title and make up the bulk of the103
card's content.104
</p>105
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>106
</div>107
</div>108
</div>109
110
<div class="col-lg-4 col-md-6 mb-4">111
<div class="card">112
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">113
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />114
<a href="#!">115
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>116
</a>117
</div>118
<div class="card-body">119
<h5 class="card-title">Post title</h5>120
<p class="card-text">121
Some quick example text to build on the card title and make up the bulk of the122
card's content.123
</p>124
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>125
</div>126
</div>127
</div>128
129
<div class="col-lg-4 col-md-6 mb-4">130
<div class="card">131
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">132
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />133
<a href="#!">134
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>135
</a>136
</div>137
<div class="card-body">138
<h5 class="card-title">Post title</h5>139
<p class="card-text">140
Some quick example text to build on the card title and make up the bulk of the141
card's content.142
</p>143
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>144
</div>145
</div>146
</div>147
</div>148
149
<div class="row">150
<div class="col-lg-4 col-md-12 mb-4">151
<div class="card">152
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">153
<img src="https://mdbootstrap.com/img/new/standard/nature/002.jpg" class="img-fluid" />154
<a href="#!">155
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>156
</a>157
</div>158
<div class="card-body">159
<h5 class="card-title">Post title</h5>160
<p class="card-text">161
Some quick example text to build on the card title and make up the bulk of the162
card's content.163
</p>164
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>165
</div>166
</div>167
</div>168
169
<div class="col-lg-4 col-md-6 mb-4">170
<div class="card">171
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">172
<img src="https://mdbootstrap.com/img/new/standard/nature/022.jpg" class="img-fluid" />173
<a href="#!">174
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>175
</a>176
</div>177
<div class="card-body">178
<h5 class="card-title">Post title</h5>179
<p class="card-text">180
Some quick example text to build on the card title and make up the bulk of the181
card's content.182
</p>183
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>184
</div>185
</div>186
</div>187
188
<div class="col-lg-4 col-md-6 mb-4">189
<div class="card">190
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">191
<img src="https://mdbootstrap.com/img/new/standard/nature/035.jpg" class="img-fluid" />192
<a href="#!">193
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>194
</a>195
</div>196
<div class="card-body">197
<h5 class="card-title">Post title</h5>198
<p class="card-text">199
Some quick example text to build on the card title and make up the bulk of the200
card's content.201
</p>202
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Read</a>203
</div>204
</div>205
</div>206
</div>207
</section>208
<!--Section: Content-->209
210
<!-- Pagination -->211
<nav class="my-4" aria-label="...">212
<ul class="pagination pagination-circle justify-content-center">213
<li class="page-item">214
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>215
</li>216
<li class="page-item"><a class="page-link" href="#">1</a></li>217
<li class="page-item active" aria-current="page">218
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>219
</li>220
<li class="page-item"><a class="page-link" href="#">3</a></li>221
<li class="page-item">222
<a class="page-link" href="#">Next</a>223
</li>224
</ul>225
</nav>226
</div>227
</main>228
<!--Main layout-->229
230
<!--Footer-->231
<footer class="bg-light text-lg-start">232
<div class="py-4 text-center">233
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init234
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">235
Learn Bootstrap 5236
</a>237
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">238
Download MDB UI KIT239
</a>240
</div>241
242
<hr class="m-0" />243
244
<div class="text-center py-4 align-items-center">245
<p>Follow MDB on social media</p>246
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init247
rel="nofollow" target="_blank">248
<i class="fab fa-youtube"></i>249
</a>250
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init251
target="_blank">252
<i class="fab fa-facebook-f"></i>253
</a>254
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init255
target="_blank">256
<i class="fab fa-twitter"></i>257
</a>258
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init259
target="_blank">260
<i class="fab fa-github"></i>261
</a>262
</div>263
264
<!-- Copyright -->265
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">266
© 2020 Copyright:267
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>268
</div>269
<!-- Copyright -->270
</footer>271
<!--Footer-->1
1
1
1
Console errors: 0