xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<style>4
#intro {5
background-image: url("https://mdbootstrap.com/img/new/fluid/city/018.jpg");6
height: 100vh;7
}8
9
/* Height for devices larger than 576px */10
@media (min-width: 992px) {11
#intro {12
margin-top: -58.59px;13
}14
}15
16
.navbar .nav-link {17
color: #fff !important;18
}19
</style>20
21
<!-- Navbar -->22
<nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">23
<div class="container-fluid">24
<!-- Navbar brand -->25
<a class="navbar-brand nav-link" target="_blank" href="https://mdbootstrap.com/docs/standard/">26
<strong>MDB</strong>27
</a>28
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#navbarExample01"29
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">30
<i class="fas fa-bars"></i>31
</button>32
<div class="collapse navbar-collapse" id="navbarExample01">33
<ul class="navbar-nav me-auto mb-2 mb-lg-0">34
<li class="nav-item active">35
<a class="nav-link" aria-current="page" href="#intro">Home</a>36
</li>37
<li class="nav-item">38
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"39
target="_blank">Learn Bootstrap 5</a>40
</li>41
<li class="nav-item">42
<a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank">Download MDB UI KIT</a>43
</li>44
</ul>45
46
<ul class="navbar-nav d-flex flex-row">47
<!-- Icons -->48
<li class="nav-item me-3 me-lg-0">49
<a class="nav-link" href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow"50
target="_blank">51
<i class="fab fa-youtube"></i>52
</a>53
</li>54
<li class="nav-item me-3 me-lg-0">55
<a class="nav-link" href="https://www.facebook.com/mdbootstrap" rel="nofollow" target="_blank">56
<i class="fab fa-facebook-f"></i>57
</a>58
</li>59
<li class="nav-item me-3 me-lg-0">60
<a class="nav-link" href="https://twitter.com/MDBootstrap" rel="nofollow" target="_blank">61
<i class="fab fa-twitter"></i>62
</a>63
</li>64
<li class="nav-item me-3 me-lg-0">65
<a class="nav-link" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">66
<i class="fab fa-github"></i>67
</a>68
</li>69
</ul>70
</div>71
</div>72
</nav>73
<!-- Navbar -->74
75
<!-- Background image -->76
<div id="intro" class="bg-image shadow-2-strong">77
<div class="mask" style="background-color: rgba(0, 0, 0, 0.8);">78
<div class="container d-flex align-items-center justify-content-center text-center h-100">79
<div class="text-white" data-mdb-theme="dark">80
<h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>81
<h5 class="mb-4">Best & free guide of responsive web design</h5>82
<a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init href="https://www.youtube.com/watch?v=c9B4TPnak1A" role="button"83
rel="nofollow" target="_blank">Start tutorial</a>84
<a class="btn btn-outline-light btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank"85
role="button">Download MDB UI KIT</a>86
</div>87
</div>88
</div>89
</div>90
<!-- Background image -->91
</header>92
<!--Main Navigation-->93
94
<!--Main layout-->95
<main class="mt-5">96
<div class="container">97
<!--Section: Content-->98
<section>99
<div class="row">100
<div class="col-md-6 gx-5 mb-4">101
<div class="bg-image hover-overlay shadow-2-strong" data-mdb-ripple-init data-mdb-ripple-color="light">102
<img src="https://mdbootstrap.com/img/new/slides/031.jpg" class="img-fluid" />103
<a href="#!">104
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>105
</a>106
</div>107
</div>108
109
<div class="col-md-6 gx-5 mb-4">110
<h4><strong>Facilis consequatur eligendi</strong></h4>111
<p class="text-muted">112
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consequatur113
eligendi quisquam doloremque vero ex debitis veritatis placeat unde animi laborum114
sapiente illo possimus, commodi dignissimos obcaecati illum maiores corporis.115
</p>116
<p><strong>Doloremque vero ex debitis veritatis?</strong></p>117
<p class="text-muted">118
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod itaque voluptate119
nesciunt laborum incidunt. Officia, quam consectetur. Earum eligendi aliquam illum120
alias, unde optio accusantium soluta, iusto molestiae adipisci et?121
</p>122
</div>123
</div>124
</section>125
<!--Section: Content-->126
127
<hr class="my-5" />128
129
<!--Section: Content-->130
<section class="text-center">131
<h4 class="mb-5"><strong>Facilis consequatur eligendi</strong></h4>132
133
<div class="row">134
<div class="col-lg-4 col-md-12 mb-4">135
<div class="card">136
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">137
<img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="img-fluid" />138
<a href="#!">139
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>140
</a>141
</div>142
<div class="card-body">143
<h5 class="card-title">Card title</h5>144
<p class="card-text">145
Some quick example text to build on the card title and make up the bulk of the146
card's content.147
</p>148
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>149
</div>150
</div>151
</div>152
153
<div class="col-lg-4 col-md-6 mb-4">154
<div class="card">155
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">156
<img src="https://mdbootstrap.com/img/new/standard/nature/023.jpg" class="img-fluid" />157
<a href="#!">158
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>159
</a>160
</div>161
<div class="card-body">162
<h5 class="card-title">Card title</h5>163
<p class="card-text">164
Some quick example text to build on the card title and make up the bulk of the165
card's content.166
</p>167
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>168
</div>169
</div>170
</div>171
172
<div class="col-lg-4 col-md-6 mb-4">173
<div class="card">174
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">175
<img src="https://mdbootstrap.com/img/new/standard/nature/111.jpg" class="img-fluid" />176
<a href="#!">177
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>178
</a>179
</div>180
<div class="card-body">181
<h5 class="card-title">Card title</h5>182
<p class="card-text">183
Some quick example text to build on the card title and make up the bulk of the184
card's content.185
</p>186
<a href="#!" class="btn btn-primary" data-mdb-ripple-init>Button</a>187
</div>188
</div>189
</div>190
</div>191
</section>192
<!--Section: Content-->193
194
<hr class="my-5" />195
196
<!--Section: Content-->197
<section class="mb-5">198
<h4 class="mb-5 text-center"><strong>Facilis consequatur eligendi</strong></h4>199
200
<div class="row d-flex justify-content-center">201
<div class="col-md-6">202
<form>203
<!-- 2 column grid layout with text inputs for the first and last names -->204
<div class="row mb-4">205
<div class="col">206
<div class="form-outline" data-mdb-input-init>207
<input type="text" id="form3Example1" class="form-control" />208
<label class="form-label" for="form3Example1">First name</label>209
</div>210
</div>211
<div class="col">212
<div class="form-outline" data-mdb-input-init>213
<input type="text" id="form3Example2" class="form-control" />214
<label class="form-label" for="form3Example2">Last name</label>215
</div>216
</div>217
</div>218
219
<!-- Email input -->220
<div class="form-outline mb-4" data-mdb-input-init>221
<input type="email" id="form3Example3" class="form-control" />222
<label class="form-label" for="form3Example3">Email address</label>223
</div>224
225
<!-- Password input -->226
<div class="form-outline mb-4" data-mdb-input-init>227
<input type="password" id="form3Example4" class="form-control" />228
<label class="form-label" for="form3Example4">Password</label>229
</div>230
231
<!-- Checkbox -->232
<div class="form-check d-flex justify-content-center mb-4">233
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" checked />234
<label class="form-check-label" for="form2Example3">235
Subscribe to our newsletter236
</label>237
</div>238
239
<!-- Submit button -->240
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>241
Sign up242
</button>243
244
<!-- Register buttons -->245
<div class="text-center">246
<p>or sign up with:</p>247
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>248
<i class="fab fa-facebook-f"></i>249
</button>250
251
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>252
<i class="fab fa-google"></i>253
</button>254
255
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>256
<i class="fab fa-twitter"></i>257
</button>258
259
<button type="button" class="btn btn-primary btn-floating mx-1" data-mdb-ripple-init>260
<i class="fab fa-github"></i>261
</button>262
</div>263
</form>264
</div>265
</div>266
</section>267
<!--Section: Content-->268
</div>269
</main>270
<!--Main layout-->271
272
<!--Footer-->273
<footer class="bg-light text-lg-start">274
<div class="py-4 text-center">275
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init276
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" rel="nofollow" target="_blank">277
Learn Bootstrap 5278
</a>279
<a role="button" class="btn btn-primary btn-lg m-2" data-mdb-ripple-init href="https://mdbootstrap.com/docs/standard/" target="_blank">280
Download MDB UI KIT281
</a>282
</div>283
284
<hr class="m-0" />285
286
<div class="text-center py-4 align-items-center">287
<p>Follow MDB on social media</p>288
<a href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA" class="btn btn-primary m-1" role="button" data-mdb-ripple-init289
rel="nofollow" target="_blank">290
<i class="fab fa-youtube"></i>291
</a>292
<a href="https://www.facebook.com/mdbootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init293
target="_blank">294
<i class="fab fa-facebook-f"></i>295
</a>296
<a href="https://twitter.com/MDBootstrap" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init297
target="_blank">298
<i class="fab fa-twitter"></i>299
</a>300
<a href="https://github.com/mdbootstrap/mdb-ui-kit" class="btn btn-primary m-1" role="button" rel="nofollow" data-mdb-ripple-init301
target="_blank">302
<i class="fab fa-github"></i>303
</a>304
</div>305
306
<!-- Copyright -->307
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">308
© 2020 Copyright:309
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>310
</div>311
<!-- Copyright -->312
</footer>313
<!--Footer-->1
1
1
1
Console errors: 0