xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<!--4
Bonus - if you add a special attribute data-mdb-theme="dark" to the <html> element, your project will change the theme to dark mode!5
<html lang="en" data-mdb-theme="dark"></html>6
-->7
8
9
<!-- Opening tag of <head> element. -->10
<head>11
12
<!-- This tells the browser to use the UTF-8 character encoding when translating machine code into human-readable text. -->13
<meta charset="UTF-8" />14
<!-- This tells the browser how should it render this HTML document. -->15
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />16
<!-- This meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. -->17
<meta http-equiv="x-ua-compatible" content="ie=edge" />18
<!-- This is simply the title of this HTML document. You can enter whatever you want here. -->19
<title>Bootstrap Design Tests</title>20
<!-- This is the icon you see in the page tab. It currently shows the MDB logo, but you can replace it with whatever you want. -->21
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />22
23
<!-- Font Awesome -->24
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" /> 25
<!-- Google Fonts Roboto -->26
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />27
<!-- MDB CSS & JS files -->28
<link rel="stylesheet" href="css/mdb.min.css" />29
<!-- <script type="text/javascript" src="js/mdb.umd.min.js"></script> -->30
31
<style>32
.hm-gradient {33
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);34
}35
.darken-grey-text {36
color: #2E2E2E;37
}38
</style>39
40
<script> 41
// Initialization for ES Users42
//import { Dropdown, Collapse, initMDB } from "mdb-ui-kit";43
44
//initMDB({ Dropdown, Collapse });45
//new WOW().init(); 46
</script>47
48
<body class="hm-gradient">49
<!-- Start your project here-->50
51
52
<header> <!-- Begin of Main Navigation-->53
<!-- Navbar -->54
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary"> 55
<!-- <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> -->56
<div class="container-fluid">57
<!-- (container-fluid, i.e. a container without margins) -->58
<!-- <div class="container">-->59
<!-- Toggle button -->60
<button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-target="#navbarSupportedContent"61
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" >62
<i class="fas fa-bars"></i>63
</button>64
65
<!-- Collapsible wrapper -->66
<div class="collapse navbar-collapse" id="navbarSupportedContent">67
<!-- Navbar brand -->68
<a class="navbar-brand mt-2 mt-lg-0" href="#">69
<!-- <img src="./img/me db-transaprent-noshadows.webp" height="15" alt="MDB Logo" loading="lazy" /> -->70
<i class="fas fa-gem text-secondary"></i>71
</a>72
<!-- Left links -->73
<ul class="navbar-nav me-auto mb-2 mb-lg-0">74
<li class="nav-item">75
<a class="nav-link text-secondary fw-bold" href="#">Dashboard</a>76
</li>77
<li class="nav-item">78
<a class="nav-link text-secondary fw-bold" href="#">Team</a>79
</li>80
<li class="nav-item">81
<a class="nav-link text-secondary fw-bold" href="#">Projects</a>82
</li>83
</ul>84
<!-- Left links -->85
</div>86
<!-- Collapsible wrapper -->87
88
<!-- Right elements -->89
<div class="d-flex align-items-center">90
<!-- Icon -->91
<a class="text-secondary me-3" href="https://www.youtube.com/c/Mdbootstrap/videos" rel="nofollow" target="_blank">92
<i class="fab fa-youtube"></i>93
</a>94
<!-- Icon -->95
<a class="text-secondary me-3" href="https://twitter.com/ascensus_mdb" rel="nofollow" target="_blank">96
<i class="fab fa-twitter"></i>97
</a>98
<!-- Icon -->99
<a class="text-secondary me-3" href="https://github.com/mdbootstrap/mdb-ui-kit" rel="nofollow" target="_blank">100
<i class="fab fa-github"></i>101
</a> 102
<a class="text-reset me-3" href="#">103
<i class="fas fa-shopping-cart"></i>104
</a>105
106
<!-- Notifications -->107
<div class="dropdown">108
<a data-mdb-dropdown-init class="text-reset me-3 dropdown-toggle hidden-arrow" href="#"109
id="navbarDropdownMenuLink" role="button" aria-expanded="false" >110
<i class="fas fa-bell"></i>111
<span class="badge rounded-pill badge-notification bg-danger">1</span>112
</a>113
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink" >114
<li>115
<a class="dropdown-item" href="#">Some news</a>116
</li>117
<li>118
<a class="dropdown-item" href="#">Another news</a>119
</li>120
<li>121
<a class="dropdown-item" href="#">Something else here</a>122
</li>123
</ul>124
</div>125
<!-- Avatar -->126
<div class="dropdown">127
<a data-mdb-dropdown-init class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#" id="navbarDropdownMenuAvatar"128
role="button" aria-expanded="false" >129
<img src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp" class="rounded-circle" height="25" alt="Black and White Portrait of a Man" loading="lazy" />130
</a>131
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar" >132
<li>133
<a class="dropdown-item" href="#">My profile</a>134
</li>135
<li>136
<a class="dropdown-item" href="#">Settings</a>137
</li>138
<li>139
<a class="dropdown-item" href="#">Logout</a>140
</li>141
</ul>142
</div>143
</div>144
<!-- Right elements -->145
</div>146
<!-- Container wrapper -->147
</nav>148
<!-- Navbar -->149
150
</header> <!-- End of Main Navigation-->151
152
<main> <!-- Begin of Main layout-->153
154
<!-- Jumbotron -->155
<div class="p-5 text-center bg-body-tertiary mb-5">156
<h1 class="mb-3">I am learning MDB</h1>157
<h4 class="mb-4">...and it's awesome!</h4>158
<a class="btn btn-primary btn-lg" href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/"159
role="button">Learn with me</a>160
</div>161
<!-- Jumbotron -->162
<!-- Gride with Cards -->163
<div class="container">164
<div class="row">165
166
<!-- First column -->167
<div class="col-md">168
169
<!-- Card -->170
<div class="card">171
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">172
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid" />173
<a href="#!">174
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>175
</a>176
</div>177
<div class="card-body">178
<h5 class="card-title">Card title</h5>179
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's180
content.</p>181
<a href="#!" class="btn btn-primary">Button</a>182
</div>183
</div>184
<!-- Card -->185
186
</div>187
<!-- First column -->188
189
<!-- Second column -->190
<div class="col-md">191
192
<!-- Card -->193
<div class="card">194
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">195
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/112.webp" class="img-fluid" />196
<a href="#!">197
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>198
</a>199
</div>200
<div class="card-body">201
<h5 class="card-title">Card title</h5>202
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's203
content.</p>204
<a href="#!" class="btn btn-primary">Button</a>205
</div>206
</div>207
<!-- Card -->208
209
</div>210
<!-- Second column -->211
212
<!-- Third column -->213
<div class="col-md">214
215
<!-- Card -->216
<div class="card">217
<div class="bg-image hover-overlay" data-mdb-ripple-init data-mdb-ripple-color="light">218
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/113.webp" class="img-fluid" />219
<a href="#!">220
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>221
</a>222
</div>223
<div class="card-body">224
<h5 class="card-title">Card title</h5>225
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's226
content.</p>227
<a href="#!" class="btn btn-primary">Button</a>228
</div>229
</div>230
<!-- Card -->231
232
</div>233
<!-- Third column -->234
235
</div>236
</div> 237
<!-- Gride with Cards -->238
239
<!--MDB Animations-->240
<div class="container mt-4" >241
242
<div class="text-center darken-grey-text mb-4">243
<h1 class="font-bold mt-4 mb-3 h5">Built with Material Design for Bootstrap 4</h1>244
<a class="btn btn-danger btn-md" href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank">Free download<i class="fa fa-download pl-2"></i></a>245
</div>246
247
<!--Section: Live preview-->248
<section>249
250
<div class="row mb-4 d-flex flex-column">251
252
<div class="col-md-4 mb-4 mx-auto">253
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(121).jpg" alt="A view on mountains." class="img-fluid z-depth-1 wow bounceIn">254
</div>255
256
<div class="col-md-4 mb-4 mx-auto">257
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg" alt="Cottage on a lake surrounded by mountains." class="img-fluid z-depth-1 wow tada" data-wow-delay="0.2s">258
</div>259
260
<div class="col-md-4 mb-4 mx-auto">261
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(122).jpg" alt="Cyclist riding down the mountain path." class="img-fluid z-depth-1 wow fadeInLeft" data-wow-delay="0.3s">262
</div>263
264
<div class="col-md-4 mb-4 mx-auto">265
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(1).jpg" alt="View on mountains from mountain top." class="img-fluid z-depth-1 wow fadeInRight">266
</div>267
268
<div class="col-md-4 mb-4 mx-auto">269
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(2).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow jello">270
</div>271
272
<div class="col-md-4 mb-4 mx-auto">273
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(7).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow swing">274
</div>275
276
<div class="col-md-4 mb-4 mx-auto">277
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg" alt="View on mountains from mountain top." class="img-fluid z-depth-1 wow wobble">278
</div>279
280
<div class="col-md-4 mb-4 mx-auto">281
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow zoomIn">282
</div>283
284
<div class="col-md-4 mx-auto">285
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(125).jpg" alt="Rocky shore in the morning." class="img-fluid z-depth-1 wow flipInX">286
</div>287
288
</div>289
290
</section>291
<!--Section: Live preview-->292
293
<hr class="my-4">294
295
<div class="text-center darken-grey-text mb-4">296
<h3 class="font-bold mb-3">Here you can find more Animations:</h3>297
<a class="btn btn-danger" href="https://mdbootstrap.com/css/animations/" target="_blank">Bootstrap Animations</a>298
</div>299
300
</div>301
<!--MDB Animations-->302
303
</main> <!-- End of Main layout-->304
305
<footer class="text-center text-lg-start bg-body-tertiary text-muted"> <!-- Begin of Footer-->306
<!-- Section: Social media -->307
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">308
<!-- Left -->309
<div class="me-5 d-none d-lg-block">310
<span>Get connected with us on social networks:</span>311
</div>312
<!-- Left -->313
314
<!-- Right -->315
<div>316
<a href="" class="me-4 text-reset">317
<i class="fab fa-facebook-f"></i>318
</a>319
<a href="" class="me-4 text-reset">320
<i class="fab fa-twitter"></i>321
</a>322
<a href="" class="me-4 text-reset">323
<i class="fab fa-google"></i>324
</a>325
<a href="" class="me-4 text-reset">326
<i class="fab fa-instagram"></i>327
</a>328
<a href="" class="me-4 text-reset">329
<i class="fab fa-linkedin"></i>330
</a>331
<a href="" class="me-4 text-reset">332
<i class="fab fa-github"></i>333
</a>334
</div>335
<!-- Right -->336
</section>337
<!-- Section: Social media -->338
339
<!-- Section: Links -->340
<section class="">341
<div class="container text-center text-md-start mt-5">342
<!-- Grid row -->343
<div class="row mt-3">344
<!-- Grid column -->345
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">346
<!-- Content -->347
<h6 class="text-uppercase fw-bold mb-4">348
<i class="fas fa-gem me-3"></i>Company name349
</h6>350
<p>351
Here you can use rows and columns to organize your footer content. Lorem ipsum352
dolor sit amet, consectetur adipisicing elit.353
</p>354
</div>355
<!-- Grid column -->356
357
<!-- Grid column -->358
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">359
<!-- Links -->360
<h6 class="text-uppercase fw-bold mb-4">361
Products362
</h6>363
<p>364
<a href="#!" class="text-reset">Angular</a>365
</p>366
<p>367
<a href="#!" class="text-reset">React</a>368
</p>369
<p>370
<a href="#!" class="text-reset">Vue</a>371
</p>372
<p>373
<a href="#!" class="text-reset">Laravel</a>374
</p>375
</div>376
<!-- Grid column -->377
378
<!-- Grid column -->379
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">380
<!-- Links -->381
<h6 class="text-uppercase fw-bold mb-4">382
Useful links383
</h6>384
<p>385
<a href="#!" class="text-reset">Pricing</a>386
</p>387
<p>388
<a href="#!" class="text-reset">Settings</a>389
</p>390
<p>391
<a href="#!" class="text-reset">Orders</a>392
</p>393
<p>394
<a href="#!" class="text-reset">Help</a>395
</p>396
</div>397
<!-- Grid column -->398
399
<!-- Grid column -->400
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">401
<!-- Links -->402
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>403
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>404
<p>405
<i class="fas fa-envelope me-3"></i>406
info@example.com407
</p>408
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>409
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>410
</div>411
<!-- Grid column -->412
</div>413
<!-- Grid row -->414
</div>415
</section>416
<!-- Section: Links -->417
418
<!-- Copyright -->419
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">420
© 2021 Copyright:421
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>422
</div>423
<!-- Copyright -->424
425
</footer> <!-- End of Footer-->426
427
<!-- Added on Feb 13, 2024 -->428
<!-- MDB -->429
<script type="text/javascript" src="js/mdb.umd.min.js"></script>430
<!-- Added on Feb 13, 2024 -->431
432
433
</body>1
1
1
1
Console errors: 0