HTML
xxxxxxxxxx1
<header>2
<!-- Navbar -->3
<nav class="navbar navbar-expand-lg fixed-top bg-light navbar-light">4
<div class="container">5
<a class="navbar-brand" href="#"6
><img7
id="MDB-logo"8
src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"9
alt="MDB Logo"10
draggable="false"11
height="30"12
/></a>13
<button14
class="navbar-toggler"15
type="button"16
data-mdb-toggle="collapse"17
data-mdb-target="#navbarSupportedContent"18
aria-controls="navbarSupportedContent"19
aria-expanded="false"20
aria-label="Toggle navigation"21
>22
<i class="fas fa-bars"></i>23
</button>24
<div class="collapse navbar-collapse" id="navbarSupportedContent">25
<ul class="navbar-nav ms-auto align-items-center">26
<li class="nav-item">27
<a class="nav-link mx-2" href="#!"><i class="fas fa-plus-circle pe-2"></i>Post</a>28
</li>29
<li class="nav-item">30
<a class="nav-link mx-2" href="#!"><i class="fas fa-bell pe-2"></i>Alerts</a>31
</li>32
<li class="nav-item">33
<a class="nav-link mx-2" href="#!"><i class="fas fa-heart pe-2"></i>Trips</a>34
</li>35
<li class="nav-item ms-3">36
<a class="btn btn-black btn-rounded" href="#!">Sign in</a>37
</li>38
</ul>39
</div>40
</div>41
</nav>42
<!-- Navbar -->43
44
<div class="container">45
<section class="pt-5" style="margin-top: 58px;">46
<div class="d-flex justify-content-center flex-wrap">47
<button48
type="button"49
class="btn btn-outline-dark flex-xl-fill me-3 btn-lg mb-2"50
data-mdb-ripple-color="dark"51
>52
Hotels <i class="fas fa-concierge-bell ps-2"></i>53
</button>54
<button55
type="button"56
class="btn btn-outline-dark flex-xl-fill me-3 btn-lg mb-2"57
data-mdb-ripple-color="dark"58
>59
Vacation rentals <i class="fas fa-key ps-2"></i>60
</button>61
<button62
type="button"63
class="btn btn-outline-dark flex-xl-fill me-3 btn-lg mb-2"64
data-mdb-ripple-color="dark"65
>66
Things to do <i class="fas fa-ticket-alt ps-2"></i>67
</button>68
<button69
type="button"70
class="btn btn-outline-dark flex-xl-fill me-3 btn-lg mb-2"71
data-mdb-ripple-color="dark"72
>73
restaurants <i class="fas fa-utensils ps-2"></i>74
</button>75
<button76
type="button"77
class="btn btn-outline-dark flex-xl-fill me-3 btn-lg mb-2"78
data-mdb-ripple-color="dark"79
>80
write a review <i class="fas fa-edit ps-2"></i>81
</button>82
<button83
type="button"84
class="btn btn-outline-dark flex-xl-fill me-3 btn-lg mb-2"85
data-mdb-ripple-color="dark"86
>87
travel forums <i class="fas fa-comment-alt ps-2"></i>88
</button>89
<div class="dropdown">90
<button91
type="button"92
class="btn btn-outline-dark flex-xl-fill btn-lg mb-2 dropdown-toggle"93
data-mdb-ripple-color="dark"94
id="dropdownMenuButton"95
data-mdb-toggle="dropdown"96
aria-expanded="false"97
>98
More99
</button>100
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">101
<li><a class="dropdown-item" href="#">Add a place</a></li>102
<li><a class="dropdown-item" href="#">Airlines</a></li>103
<li><a class="dropdown-item" href="#">Cruises</a></li>104
<li><a class="dropdown-item" href="#">Flights</a></li>105
<li><a class="dropdown-item" href="#">Help Center</a></li>106
<li><a class="dropdown-item" href="#">Hire a Trip Designer</a></li>107
<li><a class="dropdown-item" href="#">Insurance</a></li>108
<li><a class="dropdown-item" href="#">Rental Cars</a></li>109
<li><a class="dropdown-item" href="#">Road Trips</a></li>110
<li><a class="dropdown-item" href="#">Traveler's Choice</a></li>111
<li><a class="dropdown-item" href="#">Vacation Packages</a></li>112
</ul>113
</div>114
</div>115
</section>116
</div>117
118
<div class="container">119
<section>120
<div class="row mt-4 pt-3">121
<div class="col-12">122
<!-- Jumbotron -->123
<div class="p-5 rounded rounded-3" style="background-color: #c9f2e3; height: 365px;">124
<div class="row">125
<div class="col-lg-7">126
<div class="pt-5 mt-4">127
<h2 class="my-3" style="font-weight: 700;">Find the good out there.</h2>128
<form class="d-flex input-group input-group-lg w-100 align-items-center">129
<input130
autocomplete="off"131
type="search"132
class="form-control rounded"133
placeholder="Where to?"134
/>135
<a href="#!"136
><span class="input-group-text border-0"137
><i class="fas fa-search"></i></span138
></a>139
</form>140
</div>141
</div>142
<div class="col-lg-5">143
<img144
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img2.svg"145
alt="illustration"146
class="w-100"147
/>148
</div>149
</div>150
</div>151
<!-- Jumbotron -->152
</div>153
</div>154
</section>155
</div>156
</header>157
158
<main>159
<div class="container my-5 py-5">160
<section class="mt-5 py-5">161
<!-- Jumbotron -->162
<div class="position-relative" style="background-color: #faf1ed;">163
<div class="row">164
<div class="col-lg-7">165
<div class="pt-5 ps-5">166
<h2 class="h2 mb-0">Don't go it alone.</h2>167
<h2 class="h2 mb-4">Hire an expert to craft your trip.</h2>168
<a href="#!" class="btn btn-black stretched-link">Learn more</a>169
</div>170
</div>171
<div class="col-lg-5">172
<img173
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(3).jpg"174
alt="illustration"175
class="w-100"176
/>177
</div>178
</div>179
</div>180
<!-- Jumbotron -->181
</section>182
183
<section>184
<div class="divider-new">185
<h4 class="text-center h1 mb-0" style="font-weight: 700;">Home Rentals Near You</h4>186
</div>187
188
<div class="row">189
<div class="col-lg-3">190
<h2>We think you'd enjoy these homes for a quick trip out of town.</h2>191
</div>192
<div class="col-lg-9">193
<div class="row">194
<div class="col-lg-4 mb-lg-5 mb-4">195
<div class="position-relative">196
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">197
<img198
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(4).jpg"199
class="w-100"200
/>201
<a href="#!">202
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>203
</a>204
</div>205
<h5><a href="#!" class="link-black">Rentals in Zakopane, Poland</a></h5>206
<h6>40 rentals</h6>207
</div>208
</div>209
<div class="col-lg-4 mb-lg-5 mb-4">210
<div class="position-relative">211
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">212
<img213
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(5).jpg"214
class="w-100"215
/>216
<a href="#!">217
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>218
</a>219
</div>220
<h5><a href="#!" class="link-black">Rentals in Sopot, Poland</a></h5>221
<h6>520 rentals</h6>222
</div>223
</div>224
<div class="col-lg-4 mb-lg-5 mb-4">225
<div class="position-relative">226
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">227
<img228
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(12).jpg"229
class="w-100"230
/>231
<a href="#!">232
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>233
</a>234
</div>235
<h5><a href="#!" class="link-black">Rentals in Zakopane, Poland</a></h5>236
<h6>619 rentals</h6>237
</div>238
</div>239
</div>240
<div class="row">241
<div class="col-lg-4 mb-lg-5 mb-4">242
<div class="position-relative">243
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">244
<img245
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(7).jpg"246
class="w-100"247
/>248
<a href="#!">249
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>250
</a>251
</div>252
<h5><a href="#!" class="link-black">Rentals in Poznan, Poland</a></h5>253
<h6>66 rentals</h6>254
</div>255
</div>256
<div class="col-lg-4 mb-lg-5 mb-4">257
<div class="position-relative">258
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">259
<img260
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(8).jpg"261
class="w-100"262
/>263
<a href="#!">264
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>265
</a>266
</div>267
<h5><a href="#!" class="link-black">Rentals in Krakow, Poland</a></h5>268
<h6>110 rentals $54/night</h6>269
</div>270
</div>271
<div class="col-lg-4 mb-lg-5 mb-4">272
<div class="position-relative">273
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">274
<img275
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(9).jpg"276
class="w-100"277
/>278
<a href="#!">279
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>280
</a>281
</div>282
<h5><a href="#!" class="link-black">Rentals in Warsaw, Poland</a></h5>283
<h6>431 rentals</h6>284
</div>285
</div>286
</div>287
</div>288
</div>289
</section>290
</div>291
292
<section class="my-5">293
<div style="background-color: #faf1ed;">294
<div class="d-flex justify-content-center mb-5 pb-5">295
<div296
class="py-3 px-5 text-center mt-n6 mb-4"297
style="background-color: #000; width: 300px;"298
>299
<p class="h4 mb-0 text-white">More to explore</p>300
</div>301
</div>302
303
<div class="container pb-4">304
<div class="row pb-5">305
<div class="col-lg-4 col-md-12 mb-5">306
<div class="card">307
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">308
<img309
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(10).jpg"310
class="card-img-top"311
alt="..."312
/>313
<a href="#!">314
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>315
</a>316
</div>317
<div class="card-body text-center">318
<h6 class="card-title mt-2 mb-3">319
From <a href="#!" class="link-black">Tripadvisor</a>320
</h6>321
<h4 class="card-text mb-4">322
<a href="#!" class="link-black"> Discover Amazing Landscapes in America</a>323
</h4>324
<button class="btn btn-floating btn-lg btn-light">325
<i class="far fa-heart fa-lg"></i>326
</button>327
</div>328
</div>329
</div>330
<div class="col-lg-4 col-md-6 mb-5">331
<div class="card">332
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">333
<img334
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(11).jpg"335
class="card-img-top"336
alt="..."337
/>338
<a href="#!">339
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>340
</a>341
</div>342
<div class="card-body text-center">343
<h6 class="card-title mt-2 mb-3">344
From <a href="#!" class="link-black">Tripadvisor</a>345
</h6>346
<h4 class="card-text mb-4">347
<a href="#!" class="link-black"> Your Ultimate Ski Season Resource Guide</a>348
</h4>349
<button class="btn btn-floating btn-lg btn-light">350
<i class="far fa-heart fa-lg"></i>351
</button>352
</div>353
</div>354
</div>355
<div class="col-lg-4 col-md-6 mb-5">356
<div class="card">357
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">358
<img359
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(6).jpg"360
class="card-img-top"361
alt="..."362
/>363
<a href="#!">364
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>365
</a>366
</div>367
<div class="card-body text-center">368
<h6 class="card-title mt-2 mb-3">369
From <a href="#!" class="link-black">Tripadvisor</a>370
</h6>371
<h4 class="card-text mb-4">372
<a href="#!" class="link-black">373
The Best Winter Weekend Gateways in NEW England</a374
>375
</h4>376
<button class="btn btn-floating btn-lg btn-light">377
<i class="far fa-heart fa-lg"></i>378
</button>379
</div>380
</div>381
</div>382
</div>383
</div>384
</div>385
</section>386
387
<div class="container pt-1 pb-5">388
<section>389
<div class="divider-new">390
<h4 class="text-center h1 mb-0" style="font-weight: 700;">Dream Your Next Trip</h4>391
</div>392
393
<h3 class="mb-4">Destinations travelers love</h3>394
395
<div class="row">396
<div class="col-xl-3 col-md-6 mb-lg-5 mb-4">397
<div class="position-relative">398
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">399
<img400
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(13).jpg"401
class="w-100"402
alt="..."403
/>404
<a href="#!">405
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>406
</a>407
</div>408
<div>409
<h5><a href="#!" class="link-black">New York City, NY</a></h5>410
<button class="btn btn-floating btn-lg btn-light">411
<i class="far fa-heart fa-lg"></i>412
</button>413
</div>414
</div>415
</div>416
<div class="col-xl-3 col-md-6 mb-lg-5 mb-4">417
<div class="position-relative">418
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">419
<img420
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(14).jpg"421
class="w-100"422
alt="..."423
/>424
<a href="#!">425
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>426
</a>427
</div>428
<div>429
<h5><a href="#!" class="link-black">Mexico</a></h5>430
<button class="btn btn-floating btn-lg btn-light">431
<i class="far fa-heart fa-lg"></i>432
</button>433
</div>434
</div>435
</div>436
<div class="col-xl-3 col-md-6 mb-lg-5 mb-4">437
<div class="position-relative">438
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">439
<img440
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(15).jpg"441
class="w-100"442
alt="..."443
/>444
<a href="#!">445
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>446
</a>447
</div>448
<div>449
<h5><a href="#!" class="link-black">Las Vegas, NV</a></h5>450
<button class="btn btn-floating btn-lg btn-light">451
<i class="far fa-heart fa-lg"></i>452
</button>453
</div>454
</div>455
</div>456
<div class="col-xl-3 col-md-6 mb-lg-5 mb-4">457
<div class="position-relative">458
<div class="bg-image hover-overlay ripple mb-3" data-mdb-ripple-color="light">459
<img460
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(16).jpg"461
class="w-100"462
alt="..."463
/>464
<a href="#!">465
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>466
</a>467
</div>468
<div>469
<h5><a href="#!" class="link-black">Orlando, FL</a></h5>470
<button class="btn btn-floating btn-lg btn-light">471
<i class="far fa-heart fa-lg"></i>472
</button>473
</div>474
</div>475
</div>476
</div>477
</section>478
</div>479
480
<section class="mt-3">481
<div style="background-color: #094f31;">482
<div class="container">483
<div class="row">484
<div485
class="col-xl-3 col-lg-4 col-md-6 mb-5 mb-md-0 text-center d-flex align-items-center"486
>487
<div>488
<i class="fab fa-tripadvisor fa-8x text-white mb-3"></i>489
<h2 class="display-4 text-white mb-5 lh-1" style="font-weight: 700;">490
2020 Travelers' Choice Awards491
</h2>492
<button class="btn btn-black btn-lg btn-rounded mb-3">See the winners</button>493
</div>494
</div>495
<div class="col-xl-8 col-lg-8 col-md-6 offset-xl-1">496
<img497
src="https://mdbootstrap.com/img/Photos/new-templates/tripadvisor/img(17).png"498
class="w-100"499
alt="screenshot"500
/>501
</div>502
</div>503
</div>504
</div>505
</section>506
</main>507
508
<footer class="pt-4 text-center text-lg-start" style="background-color: #faf1ed;">509
<div class="container p-4">510
<div class="row">511
<div class="col-xl-2 col-lg-3 col-md-6 mb-4">512
<h5 class="mb-3 font-weight-light">About Tripadvisor</h5>513
514
<ul class="list-unstyled mb-0">515
<li>516
<a href="#!" class="link-black font-weight-bold">About Us</a>517
</li>518
<li>519
<a href="#!" class="link-black font-weight-bold">Press</a>520
</li>521
<li>522
<a href="#!" class="link-black font-weight-bold">Resources and Policies</a>523
</li>524
<li>525
<a href="#!" class="link-black font-weight-bold">Careers</a>526
</li>527
<li>528
<a href="#!" class="link-black font-weight-bold">Investor Relations</a>529
</li>530
<li>531
<a href="#!" class="link-black font-weight-bold">Content Integrity</a>532
</li>533
</ul>534
</div>535
<div class="col-xl-2 col-lg-3 col-md-6 mb-4">536
<h5 class="mb-3 font-weight-light">Explore</h5>537
538
<ul class="list-unstyled mb-0">539
<li>540
<a href="#!" class="link-black font-weight-bold">Write a review</a>541
</li>542
<li>543
<a href="#!" class="link-black font-weight-bold">Add a Place</a>544
</li>545
<li>546
<a href="#!" class="link-black font-weight-bold">Join</a>547
</li>548
<li>549
<a href="#!" class="link-black font-weight-bold">Travelers' Choice</a>550
</li>551
<li>552
<a href="#!" class="link-black font-weight-bold">Insurance</a>553
</li>554
<li>555
<a href="#!" class="link-black font-weight-bold">GreenLeaders</a>556
</li>557
<li>558
<a href="#!" class="link-black font-weight-bold">Blog</a>559
</li>560
<li>561
<a href="#!" class="link-black font-weight-bold">Help Center</a>562
</li>563
</ul>564
</div>565
<div class="col-xl-2 col-lg-3 col-md-6 mb-4">566
<h5 class="mb-3 font-weight-light">Do Business With Us</h5>567
568
<ul class="list-unstyled mb-0">569
<li>570
<a href="#!" class="link-black font-weight-bold">Owners</a>571
</li>572
<li>573
<a href="#!" class="link-black font-weight-bold">Business Advantage</a>574
</li>575
<li>576
<a href="#!" class="link-black font-weight-bold">Sponsored Placements</a>577
</li>578
<li>579
<a href="#!" class="link-black font-weight-bold">Advertise with Us</a>580
</li>581
<li>582
<a href="#!" class="link-black font-weight-bold">Become an Affiliate</a>583
</li>584
<li>585
<a href="#!" class="link-black font-weight-bold">Get The App</a>586
</li>587
</ul>588
</div>589
<div class="col-xl-4 offset-xl-2 col-lg-3 col-md-6 mb-4">590
<h5 class="mb-3 font-weight-light">Tripadvisor Sites</h5>591
592
<ul class="list-unstyled mb-0">593
<li>594
Discover your dream destination with595
<a href="#!" class="link-black font-weight-bold">Jetsletter</a>596
</li>597
<li>598
Book the best restaurants with599
<a href="#!" class="link-black font-weight-bold">TheFork</a>600
</li>601
<li>602
Book tours and attraction tickets on603
<a href="#!" class="link-black font-weight-bold">Viator</a>604
</li>605
<li>606
Read cruise reviews on607
<a href="#!" class="link-black font-weight-bold">Cruise Critic</a>608
</li>609
<li>610
Get airline seating charts on611
<a href="#!" class="link-black font-weight-bold">Seat Guru</a>612
</li>613
<li>614
Find vacation rentals on615
<a href="#!" class="link-black font-weight-bold">FlipKey</a>616
</li>617
<li>618
Search for holiday rentals on619
<a href="#!" class="link-black font-weight-bold">Holiday Lettings</a>620
</li>621
<li>622
Find a vacation home on623
<a href="#!" class="link-black font-weight-bold">Vacation Home Rentals</a>624
</li>625
<li>626
Plan and book your next trip with627
<a href="#!" class="link-black font-weight-bold">Reco Trip Designers</a>628
</li>629
</ul>630
</div>631
</div>632
</div>633
<!-- Copyright -->634
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">635
© 2020 Copyright:636
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>637
</div>638
<!-- Copyright -->639
</footer>640
CSS
xxxxxxxxxx1
.divider-new {2
flex-direction: row;3
justify-content: center;4
align-items: center;5
display: flex;6
margin-top: 2.8rem;7
margin-bottom: 2.8rem;8
}9
10
.divider-new:before {11
margin: 0 1.5rem 0 0;12
}13
14
.divider-new:after {15
margin: 0 0 0 1.5rem;16
}17
18
.divider-new:after,19
.divider-new:before {20
content: '';21
flex: 1;22
height: 1px;23
background: #000;24
}25
26
body {27
color: #000;28
}29
30
.link-black {31
text-decoration: underline;32
text-decoration-color: transparent;33
transition: 0.3s;34
}35
36
.link-black:hover {37
text-decoration-color: #000;38
}39
40
.mt-n6 {41
margin-top: -30px;42
}43
.btn-floating {44
position: absolute;45
top: 10px;46
right: 10px;47
}48
.btn-floating.btn-lg .far {49
padding-top: 1px;50
padding-left: 1px;51
color: #000;52
}53
.navbar-light .navbar-nav .nav-link {54
coloJS
xxxxxxxxxx1
const sidenav = document.getElementById('sidenav-1');2
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);3
4
let innerWidth = null;5
6
const setMode = (e) => {7
// Check necessary for Android devices8
if (window.innerWidth === innerWidth) {9
return;10
}11
12
innerWidth = window.innerWidth;13
14
if (window.innerWidth < 1400) {15
sidenavInstance.changeMode('over');16
sidenavInstance.hide();17
} else {18
sidenavInstance.changeMode('side');19
sidenavInstance.show();20
}21
};22
23
setMode();24
25
// Event listeners26
window.addEventListener('resize', setMode); Console errors: 0