xxxxxxxxxx1
<body class="bg-info">2
<header>3
<!-- Navbar -->4
<nav class="navbar navbar-expand-lg fixed-top navbar-scroll">5
<div class="container">6
<a class="navbar-brand" href="#"><img src="img/logo.jpg" height="100" alt="MR Vermietung Logo"7
loading="lazy" /></a>8
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"9
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"10
aria-expanded="false" aria-label="Toggle navigation">11
<i class="fas fa-bars"></i>12
</button>13
<div class="collapse navbar-collapse" id="navbarSupportedContent">14
<ul class="navbar-nav me-auto">15
<li class="nav-item">16
<a class="nav-link" href="#!">Über Uns</a>17
</li>18
<li class="nav-item">19
<a class="nav-link" href="#vorteile">Vorteile</a>20
</li>21
<li class="nav-item">22
<a class="nav-link" href="#rooms">Unsere Zimmer</a>23
</li>24
25
<li class="nav-item">26
<a class="nav-link" href="#!">Kontakt</a>27
</li>28
</ul>29
<ul class="navbar-nav d-flex flex-row">30
<li class="nav-item me-3 me-lg-0">31
<a class="nav-link" href="#!">32
<i class="fab fa-instagram fa-2x"></i>33
</a>34
</li>35
</ul>36
</div>37
</div>38
</nav>39
<!-- Navbar -->40
41
<!--Section: Design Block-->42
<section>43
<!-- Intro -->44
<div id="intro" class="text-center bg-image" style="45
background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img (29).jpg');46
height: 100vh;47
">48
<div class="mask" style="background-color: rgba(0, 0, 0, 0.1);">49
<div class="d-flex justify-content-center align-items-center h-100 mt-4">50
<div class="text-white">51
<h1 class="display-3 font-weight-bold font-italic mb-3">Man sagt Zuhause ist dort, wo man52
sich so fühlt</h1>53
<ul class="list-unstyled d-flex justify-content-center text-warning pb-2">54
<li><i class="fas fa-star"></i></li>55
<li><i class="fas fa-star"></i></li>56
<li><i class="fas fa-star"></i></li>57
<li><i class="fas fa-star"></i></li>58
<li><i class="fas fa-star"></i></li>59
</ul>60
<h4 class="text-uppercase mb-4 pb-2">Wir verleihen dieses Gefühl, für Handwerker auf Montage61
</h4>62
</div>63
</div>64
</div>65
</div>66
<!-- Intro -->67
</section>68
<!--Section: Design Block-->69
</header>70
<main>71
<div id="vorteile" class="container my-5">72
<section class="text-center">73
<h3 class="mb-4">Welcome to our cafe</h3>74
75
<h6 class="mb-5 text-uppercase text-muted">we serve the best coffee</h6>76
77
<div class="row">78
<div class="col-lg-4 col-md-12">79
<div class="row mb-5">80
<div class="col-12">81
<i class="fas fa-home fa-3x mt-3" style="color: #795548;"></i>82
<h5 class="card-title my-4">100% Natural</h5>83
<p class="card-text">84
Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.85
</p>86
</div>87
</div>88
<div class="row mb-5">89
<div class="col-12">90
<i class="fas fa-umbrella fa-3x mt-3" style="color: #795548;"></i>91
<h5 class="card-title my-4">Always fresh</h5>92
<p class="card-text">93
Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.94
</p>95
</div>96
</div>97
</div>98
<div class="col-lg-4 col-md-12 text-center">99
<img src="https://mdbootstrap.com/img/Photos/Others/coffee.jpg" alt="" class="img-fluid" />100
</div>101
<div class="col-lg-4 col-md-12">102
<div class="row mb-5">103
<div class="col-12">104
<i class="fas fa-users fa-3x mt-3" style="color: #795548;"></i>105
<h5 class="card-title my-4">Organic products</h5>106
<p class="card-text">107
Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.108
</p>109
</div>110
</div>111
<div class="row mb-5">112
<div class="col-12">113
<i class="fas fa-tachometer-alt fa-3x mt-3" style="color: #795548;"></i>114
<h5 class="card-title my-4">Best Quality</h5>115
<p class="card-text">116
Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.117
</p>118
</div>119
</div>120
</div>121
</div>122
</section>123
<section class="" id="rooms">124
<h3 class="text-center my-5 mb-5">Unsere Zimmer</h3>125
126
<div class="row">127
<div class="col-md-12 col-lg-4 mb-4 mb-lg-0">128
<div class="card">129
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">130
<img src="https://mdbootstrap.com/img/Photos/Others/images/21.jpg" class="card-img" />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="text-uppercase mb-3">137
<strong>Einzelzimmer</strong>138
</h5>139
<span class="badge bg-info p-2"><i class="fas fa-bed dark-grey-text"140
aria-hidden="true"></i>141
1 Bett</span>142
<p class="mt-3">143
Some quick example text to build on the card title and make up the bulk of the144
card's content.145
</p>146
<hr>147
<div class="d-flex justify-content-between">148
<p class="mb-0">149
<i class="fas fa-snowflake dark-grey-text" aria-hidden="true"></i> Kühlschrank150
</p>151
<p class="mb-0">152
<i class="fas fa-tv dark-grey-text" aria-hidden="true"></i> Fehrnseher153
</p>154
<p class="mb-0">155
<i class="fas fa-wifi dark-grey-text" aria-hidden="true"></i> WLAN156
</p>157
</div>158
</div>159
</div>160
</div>161
<div class="col-md-6 col-lg-4 mb-4 mb-md-0">162
<div class="card">163
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">164
<img src="img/hochbett2.JPG" height ="100" class="card-img" />165
<a href="#!">166
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>167
</a>168
</div>169
<div class="card-body">170
<h5 class="text-uppercase mb-3">171
<strong>Doppelzimmer</strong>172
</h5>173
<span class="badge bg-info p-2"><i class="fas fa-bed dark-grey-text"174
aria-hidden="true"></i>175
1-2 Betten</span>176
<p class="mt-3">177
Some quick example text to build on the card title and make up the bulk of the178
card's content.179
</p>180
<hr>181
<div class="d-flex justify-content-between">182
<p class="mb-0">183
<i class="fas fa-snowflake dark-grey-text" aria-hidden="true"></i> Kühlschrank184
</p>185
<p class="mb-0">186
<i class="fas fa-tv dark-grey-text" aria-hidden="true"></i> Fehrnseher187
</p>188
<p class="mb-0">189
<i class="fas fa-wifi dark-grey-text" aria-hidden="true"></i> WLAN190
</p>191
</div>192
</div>193
</div>194
</div>195
<div class="col-md-6 col-lg-4 mb-0">196
<div class="card">197
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">198
<img src="img/hochbett2.jpg" class="card-img" />199
<a href="#!">200
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>201
</a>202
</div>203
<div class="card-body">204
<h5 class="text-uppercase mb-3">205
<strong>Hochbett Zimmer</strong>206
</h5>207
<span class="badge bg-info p-2"><i class="fas fa-bed dark-grey-text"208
aria-hidden="true"></i>209
1-4 Betten</span>210
<p class="mt-3">211
Some quick example text to build on the card title and make up the bulk of the212
card's content.213
</p>214
<hr>215
<div class="d-flex justify-content-between">216
<p class="mb-0">217
<i class="fas fa-snowflake dark-grey-text" aria-hidden="true"></i> Kühlschrank218
</p>219
<p class="mb-0">220
<i class="fas fa-tv dark-grey-text" aria-hidden="true"></i> Fehrnseher221
</p>222
<p class="mb-0">223
<i class="fas fa-wifi dark-grey-text" aria-hidden="true"></i> WLAN224
</p>225
</div>226
</div>227
</div>228
</div>229
</div>230
<div class="row">231
<h3 class="mb-5">Facilities</h3>232
233
<div class="row">234
<div class="col-md-4 mb-4 mb-md-0">235
<div class="card hover-shadow-light">236
<div class="card-body">237
<i class="fas fa-utensils fa-3x mt-3"></i>238
<h5 class="card-title my-4">Restaurant</h5>239
<p class="card-text mb-3">240
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt241
sapiente earu proident. Ad vegan excepteur butcher vice lomo leggings occaecat.242
</p>243
</div>244
</div>245
</div>246
<div class="col-md-4 mb-4 mb-md-0">247
<div class="card hover-shadow-light">248
<div class="card-body">249
<i class="fas fa-wifi fa-3x mt-3"></i>250
<h5 class="card-title my-4">Free wi-fi</h5>251
<p class="card-text mb-3">252
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt253
sapiente earu proident. Ad vegan excepteur butcher vice lomo leggings occaecat.254
</p>255
</div>256
</div>257
</div>258
<div class="col-md-4 mb-0">259
<div class="card hover-shadow-light">260
<div class="card-body">261
<i class="fas fa-tint fa-3x mt-3"></i>262
<h5 class="card-title my-4">Spa & Pool</h5>263
<p class="card-text mb-3">264
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt265
sapiente earu proident. Ad vegan excepteur butcher vice lomo leggings occaecat.266
</p>267
</div>268
</div>269
</div>270
</div>271
</div>272
</section>273
<section class="" id="">274
<h3 class="text-center my-5 mb-5">Unsere Zimmer</h3>275
276
<div class="row">277
<div class="col-md-12 col-lg-4 mb-4 mb-lg-0">278
<div class="card">279
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">280
<img src="https://mdbootstrap.com/img/Photos/Others/images/21.jpg" class="card-img" />281
<a href="#!">282
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>283
</a>284
</div>285
<div class="card-body">286
<h5 class="text-uppercase mb-3">287
<strong>Einzelzimmer</strong>288
</h5>289
<span class="badge bg-info p-2"><i class="fas fa-bed dark-grey-text"290
aria-hidden="true"></i>291
1 Bett</span>292
<p class="mt-3">293
Some quick example text to build on the card title and make up the bulk of the294
card's content.295
</p>296
<hr>297
<div class="d-flex justify-content-between">298
<p class="mb-0">299
<i class="fas fa-snowflake dark-grey-text" aria-hidden="true"></i> Kühlschrank300
</p>301
<p class="mb-0">302
<i class="fas fa-tv dark-grey-text" aria-hidden="true"></i> Fehrnseher303
</p>304
<p class="mb-0">305
<i class="fas fa-wifi dark-grey-text" aria-hidden="true"></i> WLAN306
</p>307
</div>308
</div>309
</div>310
</div>311
<div class="col-md-6 col-lg-4 mb-4 mb-md-0">312
<div class="card">313
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">314
<img src="img/hochbett2.JPG" height ="100" class="card-img" />315
<a href="#!">316
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>317
</a>318
</div>319
<div class="card-body">320
<h5 class="text-uppercase mb-3">321
<strong>Doppelzimmer</strong>322
</h5>323
<span class="badge bg-info p-2"><i class="fas fa-bed dark-grey-text"324
aria-hidden="true"></i>325
1-2 Betten</span>326
<p class="mt-3">327
Some quick example text to build on the card title and make up the bulk of the328
card's content.329
</p>330
<hr>331
<div class="d-flex justify-content-between">332
<p class="mb-0">333
<i class="fas fa-snowflake dark-grey-text" aria-hidden="true"></i> Kühlschrank334
</p>335
<p class="mb-0">336
<i class="fas fa-tv dark-grey-text" aria-hidden="true"></i> Fehrnseher337
</p>338
<p class="mb-0">339
<i class="fas fa-wifi dark-grey-text" aria-hidden="true"></i> WLAN340
</p>341
</div>342
</div>343
</div>344
</div>345
<div class="col-md-6 col-lg-4 mb-0">346
<div class="card">347
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">348
<img src="img/hochbett2.jpg" class="card-img" />349
<a href="#!">350
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>351
</a>352
</div>353
<div class="card-body">354
<h5 class="text-uppercase mb-3">355
<strong>Hochbett Zimmer</strong>356
</h5>357
<span class="badge bg-info p-2"><i class="fas fa-bed dark-grey-text"358
aria-hidden="true"></i>359
1-4 Betten</span>360
<p class="mt-3">361
Some quick example text to build on the card title and make up the bulk of the362
card's content.363
</p>364
<hr>365
<div class="d-flex justify-content-between">366
<p class="mb-0">367
<i class="fas fa-snowflake dark-grey-text" aria-hidden="true"></i> Kühlschrank368
</p>369
<p class="mb-0">370
<i class="fas fa-tv dark-grey-text" aria-hidden="true"></i> Fehrnseher371
</p>372
<p class="mb-0">373
<i class="fas fa-wifi dark-grey-text" aria-hidden="true"></i> WLAN374
</p>375
</div>376
</div>377
</div>378
</div>379
</div>380
<div class="row">381
<h3 class="mb-5">Facilities</h3>382
383
<div class="row">384
<div class="col-md-4 mb-4 mb-md-0">385
<div class="card hover-shadow-light">386
<div class="card-body">387
<i class="fas fa-utensils fa-3x mt-3"></i>388
<h5 class="card-title my-4">Restaurant</h5>389
<p class="card-text mb-3">390
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt391
sapiente earu proident. Ad vegan excepteur butcher vice lomo leggings occaecat.392
</p>393
</div>394
</div>395
</div>396
<div class="col-md-4 mb-4 mb-md-0">397
<div class="card hover-shadow-light">398
<div class="card-body">399
<i class="fas fa-wifi fa-3x mt-3"></i>400
<h5 class="card-title my-4">Free wi-fi</h5>401
<p class="card-text mb-3">402
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt403
sapiente earu proident. Ad vegan excepteur butcher vice lomo leggings occaecat.404
</p>405
</div>406
</div>407
</div>408
<div class="col-md-4 mb-0">409
<div class="card hover-shadow-light">410
<div class="card-body">411
<i class="fas fa-tint fa-3x mt-3"></i>412
<h5 class="card-title my-4">Spa & Pool</h5>413
<p class="card-text mb-3">414
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt415
sapiente earu proident. Ad vegan excepteur butcher vice lomo leggings occaecat.416
</p>417
</div>418
</div>419
</div>420
</div>421
</div>422
</section>423
</div>424
</main>425
<footer>426
<section id="contact ">427
<div class="text-center p-3 " style="background-color: orange; ">428
made with429
<i class="fa fa-heart heart "></i> by:430
<a class="text-dark " href="https://neoexperience.de/ ">Neo Experience</a>431
</div>432
</section>433
</footer>434
</body>xxxxxxxxxx1
/* Color of the links BEFORE scroll */2
.navbar-scroll .nav-link,3
.navbar-scroll .navbar-toggler-icon {4
color: #fff;5
}6
7
/* Color of the links AFTER scroll */8
.navbar-scrolled .nav-link,9
.navbar-scrolled .navbar-toggler-icon {10
color: #fff;11
}12
13
/* Color of the navbar AFTER scroll */14
.navbar-scrolled {15
background-color: #0034b5;16
}17
18
/* An optional height of the navbar AFTER scroll */19
.navbar.navbar-scroll.navbar-scrolled {20
padding-top: 5px;21
padding-bottom: 5px;22
}23
1
1
Console errors: 0