xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<!-- Sidenav -->4
<div id="sidenav-1" class="sidenav" data-color="dark" role="navigation" data-hidden="false" data-accordion="true">5
<a class="ripple d-flex justify-content-center py-3" href="#!" data-ripple-color="primary">6
<img id="MDB-logo" src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" alt="MDB Logo" draggable="false" height="25"/>7
</a>8
<ul class="sidenav-menu">9
<li class="sidenav-item">10
<a class="sidenav-link active">11
<i class="fas fa-home fa-fw mr-3"></i><span>Home</span>12
</a>13
</li>14
<li class="sidenav-item">15
<a class="sidenav-link">16
<i class="fas fa-fire fa-fw mr-3"></i><span>Trending</span>17
</a>18
</li>19
<li class="sidenav-item">20
<a class="sidenav-link">21
<i class="fab fa-youtube-square fa-fw mr-3"></i><span>Subscriptions</span>22
</a>23
</li>24
</ul>25
<hr>26
<ul class="sidenav-menu">27
<li class="sidenav-item">28
<a class="sidenav-link">29
<i class="fas fa-caret-square-right fa-fw mr-3"></i><span>Library</span>30
</a>31
</li>32
<li class="sidenav-item">33
<a class="sidenav-link">34
<i class="fas fa-history fa-fw mr-3"></i><span>History</span>35
</a>36
</li>37
<li class="sidenav-item">38
<a class="sidenav-link">39
<i class="far fa-caret-square-right fa-fw mr-3"></i><span>Your videos</span>40
</a>41
</li>42
<li class="sidenav-item">43
<a class="sidenav-link">44
<i class="fas fa-clock fa-fw mr-3"></i><span>Watch later</span>45
</a>46
</li>47
<li class="sidenav-item">48
<a class="sidenav-link">49
<i class="fas fa-thumbs-up fa-fw mr-3"></i><span>Liked videos</span>50
</a>51
</li>52
</ul>53
<hr>54
<ul class="sidenav-menu">55
<h6 class="text-muted text-uppercase pl-4">Subscriptions</h6>56
<li class="sidenav-item">57
<a class="sidenav-link">58
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle mr-3" height="25" alt="" loading="lazy"/><span>The Jazz Hop Cafe</span>59
</a>60
</li>61
<li class="sidenav-item">62
<a class="sidenav-link">63
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (32).jpg" class="rounded-circle mr-3" height="25" alt="" loading="lazy"/><span>MDB Youth</span>64
</a>65
</li>66
<li class="sidenav-item">67
<a class="sidenav-link">68
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (33).jpg" class="rounded-circle mr-3" height="25" alt="" loading="lazy"/><span>Travels by Bus Around the World</span>69
</a>70
</li>71
<li class="sidenav-item">72
<a class="sidenav-link">73
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" class="rounded-circle mr-3" height="25" alt="" loading="lazy"/><span>The Awesome</span>74
</a>75
</li>76
<li class="sidenav-item">77
<a class="sidenav-link">78
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (28).jpg" class="rounded-circle mr-3" height="25" alt="" loading="lazy"/><span>SheriffUSA</span>79
</a>80
</li>81
<li class="sidenav-item">82
<a class="sidenav-link" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseExample">83
<i class="fas fa-chevron-down fa-fw mr-3"></i><span>Show 2 more</span>84
</a>85
</li>86
</ul>87
<hr>88
<ul class="sidenav-menu">89
<h6 class="text-muted text-uppercase pl-4">More from youtube</h6>90
<li class="sidenav-item">91
<a class="sidenav-link">92
<i class="fab fa-youtube fa-fw mr-3"></i><span>YouTube Premium</span>93
</a>94
</li>95
<li class="sidenav-item">96
<a class="sidenav-link">97
<i class="fas fa-film fa-fw mr-3"></i><span>Movies</span>98
</a>99
</li>100
<li class="sidenav-item">101
<a class="sidenav-link">102
<i class="fas fa-gamepad fa-fw mr-3"></i><span>Gaming</span>103
</a>104
</li>105
<li class="sidenav-item">106
<a class="sidenav-link">107
<i class="fas fa-broadcast-tower fa-fw mr-3"></i><span>Live</span>108
</a>109
</li>110
</ul>111
<hr>112
<ul class="sidenav-menu">113
<li class="sidenav-item">114
<a class="sidenav-link">115
<i class="fas fa-cog fa-fw mr-3"></i><span>Settings</span>116
</a>117
</li>118
<li class="sidenav-item">119
<a class="sidenav-link">120
<i class="fas fa-flag fa-fw mr-3"></i><span>Report history</span>121
</a>122
</li>123
<li class="sidenav-item">124
<a class="sidenav-link">125
<i class="fas fa-question-circle fa-fw mr-3"></i><span>Help</span>126
</a>127
</li>128
<li class="sidenav-item">129
<a class="sidenav-link">130
<i class="fas fa-comment-alt fa-fw mr-3"></i><span>Send feedback</span>131
</a>132
</li>133
</ul>134
<hr>135
<div class="pl-4 mb-3">136
<a href="" class="text-body small mr-3">About</a>137
<a href="" class="text-body small mr-3">Press</a>138
<a href="" class="text-body small mr-3">Copyright</a>139
<a href="" class="text-body small mr-3">Contact us</a>140
<a href="" class="text-body small mr-3">Creators</a>141
<a href="" class="text-body small mr-3">Advertise</a>142
<a href="" class="text-body small mr-3">Developers</a>143
</div>144
<div class="pl-4 mb-4 pb-2">145
<a href="" class="text-body small mr-3">Terms</a>146
<a href="" class="text-body small mr-3">Privacy</a>147
<a href="" class="text-body small mr-3">Policy & Safety</a>148
<a href="" class="text-body small mr-3">How YouTube works</a>149
<a href="" class="text-body small mr-3">Test new features</a>150
</div>151
<p class="small text-muted pl-4">© 2020 MDBootstrap</p>152
</div>153
<!-- Sidenav -->154
155
<!-- Navbar -->156
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top">157
<!-- Container wrapper -->158
<div class="container-fluid">159
<!-- Toggler -->160
<button data-toggle="sidenav" data-target="#sidenav-1" class="btn shadow-0 p-0 mr-3 d-block d-xxl-none" aria-controls="#sidenav-1" aria-haspopup="true">161
<i class="fas fa-bars fa-lg"></i>162
</button>163
164
<!-- Search form -->165
<form class="d-none d-md-flex justify-content-center mx-auto input-group w-auto my-auto">166
<input autocomplete="off" type="search" class="form-control rounded" placeholder='Search' style="min-width: 225px;"/>167
<span class="input-group-text border-0"><i class="fas fa-search"></i></span>168
</form>169
170
<!-- Right links -->171
<ul class="navbar-nav d-flex align-items-center flex-row">172
<li class="nav-item">173
<a class="nav-link mr-3 py-1" href="#" data-toggle="tooltip" title="Create">174
<i class="fas fa-video"></i>175
</a>176
</li>177
<li class="nav-item">178
<a class="nav-link mr-3 py-1" href="#" data-toggle="tooltip" title="YouTube apps">179
<i class="fas fa-th"></i>180
</a>181
</li>182
<li class="nav-item mr-3">183
<a class="nav-link py-1" href="#" data-toggle="tooltip" title="Notifications">184
<i class="fas fa-bell"></i>185
</a>186
</li>187
188
<!-- Avatar -->189
<li class="nav-item dropdown">190
<a class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center py-1" href="#"191
id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">192
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="30" alt="" loading="lazy" />193
</a>194
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink" style="min-width: 19rem;">195
<li>196
<div class="px-3 pt-3 d-flex">197
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />198
<div>199
<h6 class="mb-0">Marie Campbell</h6>200
<p class="mb-2">mariecampbell@example.com</p>201
<a class="mb-0" href="">Manage your Google Account</a>202
</div>203
</div>204
<hr class="mb-2">205
</li>206
<li><a class="dropdown-item" href="#"><i class="fas fa-user-circle fa-fw mr-3"></i><span>Your channel</span></a></li>207
<li><a class="dropdown-item" href="#"><i class="fas fa-dollar-sign fa-fw mr-3"></i><span>Paid memberships</span></a></li>208
<li><a class="dropdown-item" href="#"><i class="fas fa-play-circle fa-fw mr-3"></i><span>YouTube Studio</span></a></li>209
<li><a class="dropdown-item" href="#"><i class="fas fa-users-cog fa-fw mr-3"></i><span>Switch account</span><i class="fas fa-chevron-right float-right mt-1"></i></a></li>210
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt mr-3"></i><span>Sign out</span></a></li>211
<hr class="my-2">212
<li><a class="dropdown-item" href="#"><i class="fas fa-sun fa-fw mr-3"></i><span>Appearance: Device theme</span><i class="fas fa-chevron-right float-right mt-1"></i></a></li>213
<li><a class="dropdown-item" href="#"><i class="fas fa-language fa-fw mr-3"></i><span>Language: English</span><i class="fas fa-chevron-right float-right mt-1"></i></a></li>214
<li><a class="dropdown-item" href="#"><i class="fas fa-globe fa-fw mr-3"></i><span>Location: United Kingdom</span><i class="fas fa-chevron-right float-right mt-1"></i></a></li>215
<li><a class="dropdown-item" href="#"><i class="fas fa-cog fa-fw mr-3"></i><span>Settings</span></a></li>216
<li><a class="dropdown-item" href="#"><i class="fas fa-shield-alt fa-fw mr-3"></i><span>Your data in YouTube</span></a></li>217
<li><a class="dropdown-item" href="#"><i class="fas fa-question-circle fa-fw mr-3"></i><span>Help</span></a></li>218
<li><a class="dropdown-item" href="#"><i class="fas fa-comment-alt fa-fw mr-3"></i><span>Send feedback</span></a></li>219
<li><a class="dropdown-item" href="#"><i class="fas fa-keyboard fa-fw mr-3"></i><span>Keyboard shortcuts</span></a></li>220
<hr class="my-2">221
<li><a class="dropdown-item mb-2" href="#"><span>Restricted Mode: Off</span><i class="fas fa-chevron-right float-right mt-1"></i></a></li>222
</ul>223
</li>224
</ul>225
</div>226
<!-- Container wrapper -->227
</nav>228
<!-- Navbar -->229
</header>230
<!--Main Navigation-->231
232
<!--Main layout-->233
<main style="margin-top: 58px">234
<div class="container-fluid pt-4">235
<div class="row pt-2">236
<div class="col-md-6 col-lg-3 mb-5">237
<a class="ripple" href="#!">238
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT1.png" />239
</a>240
<div class="d-flex mt-3">241
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (30).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />242
<div>243
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>244
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">alexrainbirdMusic</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>245
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>246
</div>247
</div>248
</div>249
<div class="col-md-6 col-lg-3 mb-5">250
<a class="ripple" href="#!">251
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT2.png" />252
</a>253
<div class="d-flex mt-3">254
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />255
<div>256
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>257
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">loremIpsum</span></a></p>258
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>259
</div>260
</div>261
</div>262
<div class="col-md-6 col-lg-3 mb-5">263
<a class="ripple" href="#!">264
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT3.png" />265
</a>266
<div class="d-flex mt-3">267
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (12).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />268
<div>269
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>270
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">MDB</span></a></p>271
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>272
</div>273
</div>274
</div>275
<div class="col-md-6 col-lg-3 mb-5">276
<a class="ripple" href="#!">277
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT4.png" />278
</a>279
<div class="d-flex mt-3">280
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (13).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />281
<div>282
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>283
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">ElitConcestatur</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>284
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>285
</div>286
</div>287
</div>288
</div>289
<div class="row">290
<div class="col-md-6 col-lg-3 mb-5">291
<a class="ripple" href="#!">292
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT5.png" />293
</a>294
<div class="d-flex mt-3">295
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (26).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />296
<div>297
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>298
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">Anna Doe</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>299
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>300
</div>301
</div>302
</div>303
<div class="col-md-6 col-lg-3 mb-5">304
<a class="ripple" href="#!">305
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT6.png" />306
</a>307
<div class="d-flex mt-3">308
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (27).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />309
<div>310
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>311
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">palm on beach</span></a></p>312
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>313
</div>314
</div>315
</div>316
<div class="col-md-6 col-lg-3 mb-5">317
<a class="ripple" href="#!">318
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT7.png" />319
</a>320
<div class="d-flex mt-3">321
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (28).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />322
<div>323
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>324
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">HELLYEAH</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>325
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>326
</div>327
</div>328
</div>329
<div class="col-md-6 col-lg-3 mb-5">330
<a class="ripple" href="#!">331
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT8.png" />332
</a>333
<div class="d-flex mt-3">334
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (29).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />335
<div>336
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>337
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">Mark Hemp</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>338
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>339
</div>340
</div>341
</div>342
</div>343
<div class="row">344
<div class="col-md-6 col-lg-3 mb-5">345
<a class="ripple" href="#!">346
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT9.png" />347
</a>348
<div class="d-flex mt-3">349
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />350
<div>351
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>352
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">ZeroWasteTips</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>353
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>354
</div>355
</div>356
</div>357
<div class="col-md-6 col-lg-3 mb-5">358
<a class="ripple" href="#!">359
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT10.png" />360
</a>361
<div class="d-flex mt-3">362
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (22).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />363
<div>364
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>365
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">Heal Your Living</span></a></p>366
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>367
</div>368
</div>369
</div>370
<div class="col-md-6 col-lg-3 mb-5">371
<a class="ripple" href="#!">372
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT11.png" />373
</a>374
<div class="d-flex mt-3">375
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (21).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />376
<div>377
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>378
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">ZeroWasteTips</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>379
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>380
</div>381
</div>382
</div>383
<div class="col-md-6 col-lg-3 mb-5">384
<a class="ripple" href="#!">385
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT12.png" />386
</a>387
<div class="d-flex mt-3">388
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (22).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />389
<div>390
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>391
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">Heal Your Living</span></a></p>392
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>393
</div>394
</div>395
</div>396
</div>397
<div class="row">398
<div class="col-md-6 col-lg-3 mb-5">399
<a class="ripple" href="#!">400
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT17.png" />401
</a>402
<div class="d-flex mt-3">403
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (6).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />404
<div>405
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>406
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">fitnessAlex</span></a></p>407
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>408
</div>409
</div>410
</div>411
<div class="col-md-6 col-lg-3 mb-5">412
<a class="ripple" href="#!">413
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT18.png" />414
</a>415
<div class="d-flex mt-3">416
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (7).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />417
<div>418
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>419
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">CLIMBINGfan</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>420
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>421
</div>422
</div>423
</div>424
<div class="col-md-6 col-lg-3 mb-5">425
<a class="ripple" href="#!">426
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT19.png" />427
</a>428
<div class="d-flex mt-3">429
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />430
<div>431
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>432
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">fitnessAlex</span></a></p>433
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>434
</div>435
</div>436
</div>437
<div class="col-md-6 col-lg-3 mb-5">438
<a class="ripple" href="#!">439
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT20.png" />440
</a>441
<div class="d-flex mt-3">442
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (9).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />443
<div>444
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>445
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="alexrainbirdMusic">BaseBALL</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>446
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>447
</div>448
</div>449
</div>450
</div>451
<div class="row">452
<div class="col-md-6 col-lg-3 mb-5">453
<a class="ripple" href="#!">454
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT21.png" />455
</a>456
<div class="d-flex mt-3">457
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (3).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />458
<div>459
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>460
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="Learn Drawing">Learn Drawing</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>461
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>462
</div>463
</div>464
</div>465
<div class="col-md-6 col-lg-3 mb-5">466
<a class="ripple" href="#!">467
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT22.png" />468
</a>469
<div class="d-flex mt-3">470
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (3).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />471
<div>472
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>473
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="Learn Drawing">Learn Drawing</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>474
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>475
</div>476
</div>477
</div>478
<div class="col-md-6 col-lg-3 mb-5">479
<a class="ripple" href="#!">480
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT23.png" />481
</a>482
<div class="d-flex mt-3">483
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (3).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />484
<div>485
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>486
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="Learn Drawing">Learn Drawing</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>487
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>488
</div>489
</div>490
</div>491
<div class="col-md-6 col-lg-3 mb-5">492
<a class="ripple" href="#!">493
<img alt="example" class="w-100" src="https://mdbootstrap.com/img/screens/yt/YT24.png" />494
</a>495
<div class="d-flex mt-3">496
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (3).jpg" class="rounded-circle mr-3" height="40" alt="" loading="lazy" />497
<div>498
<h6 class="mb-1 text-dark">Lorem ipsum, dolor sit amet elit consectetur adipisicing</h6>499
<p class="mb-n1"><a class="text-muted small mb-0" href=""><span data-toggle="tooltip" title="Learn Drawing">Learn Drawing</span><i class="fas fa-check-circle ml-2" data-toggle="tooltip" title="Verified"></i></a></p>500
<p class="mb-0"><a class="text-muted small mb-0" href="">68K views • 5 days ago</a></p>501
</div>502
</div>503
</div>504
</div>505
</div>506
</main>507
<!--Main layout-->xxxxxxxxxx1
body {2
background-color: #f9f9f9;3
}4
5
@media (min-width: 1400px) {6
main,7
header,8
#main-navbar {9
padding-left: 240px;10
}11
}12
13
@media (min-width: 1025px) {14
.container-fluid {15
padding-left: 6rem; 16
padding-right: 6rem;17
}18
}19
20
@media (min-width: 750px) and (max-width: 1023px) {21
input {22
width: 400px !important;23
}24
}25
26
@media (min-width: 1024px) {27
input {28
width: 600px !important;29
}30
}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