HTML
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
</div>322
</main>323
<!--Main layout-->324
325
<!--Footer-->326
<footer>327
328
</footer>329
<!--Footer-->CSS
1
1
JS
1
1
Console errors: 0