xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-10">3
4
<!-- Navbar -->5
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary shadow-2">6
<!-- Container wrapper -->7
<div class="container-fluid">8
<!-- Toggle button -->9
<button class="navbar-toggler" type="button" data-mdb-collapse-init10
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"11
aria-label="Toggle navigation">12
<i class="fas fa-bars"></i>13
</button>14
15
<!-- Collapsible wrapper -->16
<div class="collapse navbar-collapse" id="navbarSupportedContent">17
<ul class="navbar-nav me-auto mb-2 mb-lg-0">18
<!-- Logo -->19
<a class="navbar-brand me-2 d-none d-lg-inline-block" href="#"><i20
class="fas fa-globe-europe text-primary"></i></a>21
22
<li class="nav-item fw-bold">23
<a class="nav-link" href="#!">Start here</a>24
</li>25
<li class="nav-item">26
<a class="nav-link" href="#!">Articles</a>27
</li>28
<li class="nav-item">29
<a class="nav-link" href="#!">eBooks</a>30
</li>31
<li class="nav-item">32
<a class="nav-link" href="#!">About me</a>33
</li>34
<li class="nav-item">35
<a class="nav-link" href="#!">Newsletter</a>36
</li>37
<li class="nav-item">38
<a class="nav-link" href="#!">Contact</a>39
</li>40
</ul>41
42
43
</div>44
<!-- Collapsible wrapper -->45
46
<ul class="navbar-nav flex-row">47
<!-- Icons -->48
<li class="nav-item">49
<a class="nav-link pe-2" href="#!">50
<i class="fab fa-youtube"></i>51
</a>52
</li>53
<li class="nav-item">54
<a class="nav-link px-2" href="#!">55
<i class="fab fa-facebook-f"></i>56
</a>57
</li>58
<li class="nav-item">59
<a class="nav-link px-2" href="#!">60
<i class="fab fa-twitter"></i>61
</a>62
</li>63
<li class="nav-item">64
<a class="nav-link ps-2" href="#!">65
<i class="fab fa-instagram"></i>66
</a>67
</li>68
</ul>69
70
</div>71
<!-- Container wrapper -->72
</nav>73
<!-- Navbar -->74
75
<!-- Section: Intro -->76
<section class="">77
78
<style>79
#intro-upper {80
height: 500px;81
background-color: hsl(0, 0%, 94%);82
}83
84
@media (max-width: 767.98px) {85
#intro-upper {86
height: 500px;87
}88
}89
90
#intro-lower {91
margin-top: -240px;92
}93
94
@media (max-width: 767.98px) {95
#intro-lower {96
margin-top: -270px;97
}98
}99
</style>100
101
<div id="intro-upper" class="pb-5">102
103
<div class="container pt-4">104
105
<h1 class="display-4 pt-5 fw-bold ls-tight text-primary">Backpacking blog</h1>106
<p class="text-dark pb-5"> <img src="https://mdbootstrap.com/img/new/avatars/13.jpg"107
class="rounded-circle me-2" height="35" alt="" loading="lazy" />108
<span> by</span>109
<a href="" class="text-reset"><u>Anna Maria Doe</u></a>110
</p>111
112
</div>113
</div>114
115
<div id="intro-lower">116
117
<div class="container">118
<div class="row g-0 align-items-center">119
<div class="col-xl-7 mb-4 mb-xl-0">120
<img src="https://blog-tutorial.mdbgo.io/assets/featured.jpg" class="w-100 rounded-6" alt="Backpacker" />121
</div>122
<div class="col-xl-5 ms-0 ms-xl-n5">123
<div class="card rounded-6 shadow-5">124
<div class="card-body px-4 p-4 p-md-5 p-lg-4 p-xl-5">125
<h4 class="mb-4">A Free Beginner's Backpacking Guide126
</h4>127
<p class="text-muted mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, cumque. Labore molestiae itaque vel, quas fugit unde suscipit laborum libero soluta expedita excepturi recusandae nihil atque?</p>128
<button data-mdb-ripple-init class="btn btn-primary btn-rounded">Start here <i129
class="fas fa-angle-right ms-1"></i></button>130
</div>131
</div>132
</div>133
</div>134
</div>135
136
</div>137
138
</section>139
<!-- Section: Intro -->140
141
</header>142
<!--Main Navigation-->143
144
<!--Main layout-->145
<main>146
<div class="container">147
148
<!-- Section: Posts -->149
<section class="text-center mb-10">150
151
<h3 class="fw-bold mb-7 text-center">Latest posts</h3>152
153
<div class="row gx-lg-5">154
155
<!-- Column -->156
<div class="col-lg-4 col-md-12 mb-7">157
158
<div class="card rounded-6 h-100">159
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"160
data-mdb-ripple-init data-mdb-ripple-color="light">161
<img src="https://blog-tutorial.mdbgo.io/assets/1.jpg" class="w-100">162
163
<a href="#!">164
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>165
</a>166
167
</div>168
<div class="card-body">169
<h5 class="card-title">Alone or with a group?</h5>170
171
<p class="text-muted">172
Ut pretium ultricies dignissim. Sed sit amet mi eget urna173
placerat vulputate. Ut vulputate est non quam dignissim174
elementum. Donec a ullamcorper diam.175
</p>176
</div>177
</div>178
179
</div>180
<!-- Column -->181
182
<!-- Columns -->183
<div class="col-lg-4 mb-7">184
185
<div class="card rounded-6 h-100">186
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"187
data-mdb-ripple-init data-mdb-ripple-color="light">188
<img src="https://blog-tutorial.mdbgo.io/assets/2.jpg" class="w-100">189
190
<a href="#!">191
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>192
</a>193
194
</div>195
<div class="card-body">196
<h5 class="card-title">Top 10 places in Europe</h5>197
198
<p class="text-muted">199
Ut pretium ultricies dignissim. Sed sit amet mi eget urna200
placerat vulputate. Ut vulputate est non quam dignissim201
elementum. Donec a ullamcorper diam.202
</p>203
</div>204
</div>205
206
</div>207
<!-- Columns -->208
209
<!-- Column -->210
<div class="col-lg-4 mb-7">211
212
<div class="card rounded-6 h-100">213
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"214
data-mdb-ripple-init data-mdb-ripple-color="light">215
<img src="https://blog-tutorial.mdbgo.io/assets/3.jpg" class="w-100">216
217
<a href="#!">218
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>219
</a>220
221
</div>222
<div class="card-body">223
<h5 class="card-title">Navigation without internet</h5>224
<p class="text-muted">225
Ut pretium ultricies dignissim. Sed sit amet mi eget urna226
placerat vulputate. Ut vulputate est non quam dignissim227
elementum. Donec a ullamcorper diam.228
</p>229
</div>230
</div>231
232
</div>233
<!-- Column -->234
235
<!-- Column -->236
<div class="col-lg-4 col-md-12 mb-7">237
238
<div class="card rounded-6 h-100">239
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"240
data-mdb-ripple-init data-mdb-ripple-color="light">241
<img src="https://blog-tutorial.mdbgo.io/assets/4.jpg" class="w-100">242
243
<a href="#!">244
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>245
</a>246
247
</div>248
<div class="card-body">249
<h5 class="card-title">Which tent should you choose?</h5>250
251
<p class="text-muted">252
Ut pretium ultricies dignissim. Sed sit amet mi eget urna253
placerat vulputate. Ut vulputate est non quam dignissim254
elementum. Donec a ullamcorper diam.255
</p>256
</div>257
</div>258
259
</div>260
<!-- Column -->261
262
<!-- Columns -->263
<div class="col-lg-4 mb-7">264
265
<div class="card rounded-6 h-100">266
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"267
data-mdb-ripple-init data-mdb-ripple-color="light">268
<img src="https://blog-tutorial.mdbgo.io/assets/5.jpg" class="w-100">269
270
<a href="#!">271
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>272
</a>273
274
</div>275
<div class="card-body">276
<h5 class="card-title">The best backpacks ranking</h5>277
<p class="text-muted">278
Ut pretium ultricies dignissim. Sed sit amet mi eget urna279
placerat vulputate. Ut vulputate est non quam dignissim280
elementum. Donec a ullamcorper diam.281
</p>282
</div>283
</div>284
285
</div>286
<!-- Columns -->287
288
<!-- Column -->289
<div class="col-lg-4 mb-7">290
291
<div class="card rounded-6 h-100">292
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3"293
data-mdb-ripple-init data-mdb-ripple-color="light">294
<img src="https://blog-tutorial.mdbgo.io/assets/6.jpg" class="w-100">295
296
<a href="#!">297
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>298
</a>299
300
</div>301
<div class="card-body">302
<h5 class="card-title">How to plan a trip?</h5>303
<p class="text-muted">304
Ut pretium ultricies dignissim. Sed sit amet mi eget urna305
placerat vulputate. Ut vulputate est non quam dignissim306
elementum. Donec a ullamcorper diam.307
</p>308
</div>309
</div>310
311
</div>312
<!-- Column -->313
314
</div>315
316
<a data-mdb-ripple-init class="btn btn-secondary btn-rounded" href="#" role="button">See more posts</a>317
318
</section>319
<!-- Section: Posts -->320
321
<!-- Section: About author -->322
<section class="mb-10">323
<div class="container">324
<div class="row gx-0 align-items-center">325
326
<div class="col-lg-6 mb-5 mb-lg-0">327
328
<div style="background: hsla(0, 0%, 100%, 0.55); backdrop-filter: blur(30px); z-index: 1;" 329
class="card rounded-7 me-lg-n5">330
<div class="card-body p-lg-5">331
<h2 class="fw-bold">332
<span class="text-primary">Anna Maria Doe</span>333
</h2>334
<p class="fw-bold"><em>“Don't be a tourist, be a traveler”</em></p>335
336
<p class="text-muted mb-4">337
Nunc tincidunt vulputate elit. Mauris varius purus malesuada338
neque iaculis malesuada. Aenean gravida magna orci, non339
efficitur est porta id. Donec magna diam.340
</p>341
<p class="text-muted">342
Ad, at blanditiis quaerat laborum officia incidunt343
cupiditate dignissimos voluptates eius aliquid minus344
praesentium! Perferendis et totam ipsum ex aut earum libero345
accusamus voluptas quod numquam saepe, consequuntur nihil346
quia tenetur consequatur. Quis, explicabo deserunt quasi347
assumenda ea maiores nulla, et dolor saepe praesentium natus348
error reiciendis voluptas iste. Esse, laudantium ipsum349
animi, quos voluptatibus atque vero repellat sit eligendi350
autem maiores quasi cum aperiam. Aperiam rerum culpa351
accusantium, ducimus deserunt aliquid alias vitae quasi352
corporis placeat vel maiores explicabo commodi!353
</p>354
</div>355
</div>356
357
</div>358
359
<div class="col-lg-6 mb-5 mb-lg-0">360
361
<img src="https://blog-tutorial.mdbgo.io/assets/about.jpg" class="w-100" alt="Author image" style="border-radius: 53% 47% 52% 48% / 36% 41% 59% 64%;"/>362
363
</div>364
365
</div>366
</div>367
</section>368
<!-- Section: About author -->369
370
</div>371
</main>372
<!--Main layout-->373
374
<!--Footer-->375
<footer>376
377
</footer>378
<!--Footer-->1
1
xxxxxxxxxx1
// Initialization for ES Users2
import { Dropdown, Collapse, initMDB } from "mdb-ui-kit";3
4
initMDB({ Dropdown, Collapse }); Console errors: 0