xxxxxxxxxx1
<!--Main Navigation-->2
<header class="mb-10">3
4
<!-- Navbar -->5
<nav id="main-navbar" class="navbar navbar-expand-md fixed-top navbar-before-scroll shadow-0">6
<!-- Container wrapper -->7
<div class="container-fluid">8
<!-- Toggle button -->9
<button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-toggle="collapse"10
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
19
<!-- Logo -->20
<a class="navbar-brand me-1" href="#"><img src="https://ascensus-mdb-uikit-tutorial.mdbgo.io/img/logo.png"21
height="20px" alt="Logo" loading="lazy" /></a>22
23
<li class="nav-item">24
<a class="nav-link text-dark" href="#!">Projects</a>25
</li>26
<li class="nav-item">27
<a class="nav-link text-dark" href="#!">About me</a>28
</li>29
<li class="nav-item">30
<a class="nav-link text-dark" href="#!">Testimonials</a>31
</li>32
<li class="nav-item">33
<a class="nav-link text-dark" href="#!">Contact</a>34
</li>35
</ul>36
37
<ul class="navbar-nav flex-row">38
<!-- Icons -->39
<li class="nav-item">40
<a class="nav-link pe-2" href="#!">41
<i class="fab fa-youtube"></i>42
</a>43
</li>44
<li class="nav-item">45
<a class="nav-link px-2" href="#!">46
<i class="fab fa-facebook-f"></i>47
</a>48
</li>49
<li class="nav-item">50
<a class="nav-link px-2" href="#!">51
<i class="fab fa-twitter"></i>52
</a>53
</li>54
<li class="nav-item">55
<a class="nav-link ps-2" href="#!">56
<i class="fab fa-instagram"></i>57
</a>58
</li>59
</ul>60
</div>61
<!-- Collapsible wrapper -->62
63
</div>64
<!-- Container wrapper -->65
</nav>66
<!-- Navbar -->67
68
<!-- Section: Split screen -->69
<section class="">70
71
<div class="container-fluid px-0">72
<div class="row g-0">73
74
<!-- First column -->75
<div class="col-lg-6 vh-100 d-flex flex-column justify-content-center align-items-center">76
77
<!-- Headings -->78
<div class="h-100 d-flex justify-content-center align-items-center px-5">79
80
<div class="">81
<h2 class="display-4" data-mdb-animation-init data-mdb-animation-start="onLoad"82
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="200">83
John Doe</h2>84
85
<h1 class="display-2 fw-bold text-uppercase" data-mdb-animation-init data-mdb-animation-start="onLoad"86
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="400">87
Web developer</h1>88
</div>89
90
</div>91
92
<!-- CTA elements -->93
<div class="d-flex align-items-center w-100 justify-content-between px-5 mb-5" data-mdb-animation-init94
data-mdb-animation-start="onLoad" data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false"95
data-mdb-animation-delay="600">96
<a href="https://github.com/mdbootstrap/mdb-ui-kit" target="_blank" class="text-dark"><i97
class="fab fa-github fa-xl"></i></a>98
<hr class="hr d-none d-xl-flex" style="height: 2px; width: 200px;">99
<a class="btn btn-primary btn-lg btn-rounded" href="#" role="button" data-mdb-ripple-init>See my100
projects<i class="fas fa-angle-down ms-2"></i></a>101
</div>102
103
</div>104
<!-- First column -->105
106
<!-- Second column -->107
<div class="col-lg-6 d-none d-lg-inline-block vh-100">108
109
<!-- Carousel wrapper -->110
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"111
data-mdb-carousel-init>112
<!-- Indicators -->113
<div class="carousel-indicators">114
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0"115
class="rounded-circle active" style="width: 7px; height: 7px" aria-current="true"116
aria-label="Slide 1"></button>117
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1" aria-label="Slide 2"118
class="rounded-circle" style="width: 7px; height: 7px"></button>119
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2" aria-label="Slide 3"120
class="rounded-circle" style="width: 7px; height: 7px"></button>121
</div>122
123
<!-- Inner -->124
<div class="carousel-inner shadow-5-strong" style="border-bottom-left-radius: 4rem">125
<!-- Single item -->126
<div class="carousel-item active">127
<img src="https://mdbootstrap.com/img/new/textures/full/243.jpg"128
class="d-block vh-100 vw-100 object-cover" alt="15 years of experience in the IT industry" />129
<div class="carousel-caption d-none d-md-block">130
<h5>15 years of experience in the IT industry</h5>131
<p>I am in love with technology and have spent half my life developing it</p>132
</div>133
</div>134
135
<!-- Single item -->136
<div class="carousel-item">137
<img src="https://mdbootstrap.com/img/new/textures/full/102.jpg"138
class="d-block vh-100 vw-100 object-cover" alt="243 completed projects" />139
<div class="carousel-caption d-none d-md-block">140
<h5>243 completed projects</h5>141
<p>I love challenges and treat each project as my own</p>142
</div>143
</div>144
145
<!-- Single item -->146
<div class="carousel-item">147
<img src="https://mdbootstrap.com/img/new/textures/full/107.jpg"148
class="d-block vh-100 vw-100 object-cover" alt="53 satisfied customers" />149
<div class="carousel-caption d-none d-md-block">150
<h5>53 satisfied customers</h5>151
<p>There is no better reward for me than a happy customer</p>152
</div>153
</div>154
</div>155
<!-- Inner -->156
157
<!-- Controls -->158
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"159
data-mdb-slide="prev">160
<span class="carousel-control-prev-icon" aria-hidden="true"></span>161
<span class="visually-hidden">Previous</span>162
</button>163
<button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"164
data-mdb-slide="next">165
<span class="carousel-control-next-icon" aria-hidden="true"></span>166
<span class="visually-hidden">Next</span>167
</button>168
</div>169
<!-- Carousel wrapper -->170
171
</div>172
<!-- Second column -->173
174
</div>175
</div>176
177
</section>178
<!-- Section: Split screen -->179
180
</header>181
<!--Main Navigation-->182
183
<!--Main layout-->184
<main>185
<div class="container">186
187
<!-- Section: My projects -->188
<section class="mb-10 text-center">189
<h2 class="fw-bold mb-7 text-center">My projects</h2>190
191
<div class="row gx-lg-5">192
193
<!-- First column -->194
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">195
196
<div class="card rounded-6 h-100" data-mdb-animation-init data-mdb-animation-start="onScroll"197
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="200">198
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init199
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-1">200
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100" />201
<a href="#!">202
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>203
</a>204
</div>205
<div class="card-body">206
<h5 class="card-title">AI engine</h5>207
<p class="text-muted">208
<small>Finished <u>13.09.2021</u> for209
<a href="" class="text-dark">Techify</a></small>210
</p>211
<p class="card-text">212
Ut pretium ultricies dignissim. Sed sit amet mi eget urna213
placerat vulputate. Ut vulputate est non quam dignissim214
elementum. Donec a ullamcorper diam.215
</p>216
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>217
</div>218
</div>219
220
</div>221
<!-- First column -->222
223
<!-- Second column -->224
<div class="col-lg-4 mb-6 mb-lg-0">225
226
<div class="card rounded-6 h-100" data-mdb-animation-init data-mdb-animation-start="onScroll"227
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="400">228
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init229
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-2">230
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="w-100" />231
<a href="#!">232
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>233
</a>234
</div>235
<div class="card-body">236
<h5 class="card-title">Balanced design</h5>237
<p class="text-muted">238
<small>Finished <u>12.01.2022</u> for239
<a href="" class="text-dark">Rubicon</a></small>240
</p>241
<p class="card-text">242
Suspendisse in volutpat massa. Nulla facilisi. Sed aliquet243
diam orci, nec ornare metus semper sed. Integer volutpat244
ornare erat sit amet rutrum. Ut vulputate est non quam.245
</p>246
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>247
</div>248
</div>249
250
</div>251
<!-- Second column -->252
253
<!-- Third column -->254
<div class="col-lg-4 mb-6 mb-lg-0">255
256
<div class="card rounded-6 h-100" data-mdb-animation-init data-mdb-animation-start="onScroll"257
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="600">258
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init259
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-3">260
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="w-100" />261
<a href="#!">262
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>263
</a>264
</div>265
<div class="card-body">266
<h5 class="card-title">Metaverse 2.0</h5>267
<p class="text-muted">268
<small>Finished <u>10.11.2022</u> for269
<a href="" class="text-dark">Venom Tech</a></small>270
</p>271
<p class="card-text">272
Curabitur tristique, mi a mollis sagittis, metus felis mattis273
arcu, non vehicula nisl dui quis diam. Mauris ut risus eget274
massa volutpat feugiat. Donec.275
</p>276
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>277
</div>278
</div>279
280
</div>281
<!-- Third column -->282
283
</div>284
285
</section>286
<!-- Section: My projects -->287
288
<!-- Section: Projects modals -->289
<section class="">290
291
<!-- Modal project 1 -->292
<div class="modal fade" id="project-1" tabindex="-1" aria-labelledby="project-1Label" aria-hidden="true">293
<div class="modal-dialog modal-xl">294
<div class="modal-content">295
<div class="modal-header">296
<h5 class="modal-title" id="project-1Label">AI engine</h5>297
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>298
</div>299
<div class="modal-body">300
301
<!-- Section: Design Block -->302
<section>303
304
<div class="row gx-lg-5 align-items-center">305
<div class="col-lg-5 mb-5 mb-lg-0">306
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init307
data-mdb-ripple-color="light">308
<img src="https://mdbootstrap.com/img/new/textures/full/98.jpg" class="w-100" />309
<a href="#!">310
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">311
<div class="d-flex justify-content-center align-items-center h-100">312
<div class="px-4 py-5 px-md-5 text-white text-center">313
<h3 class="text-uppercase fw-bold mb-4">314
The future is <u style="color: hsl(210, 12%, 80%)">now</u>315
</h3>316
<p class="mb-0" style="color: hsl(210, 12%, 80%)">317
Lorem ipsum dolor sit amet consectetur adipisicing elit.318
Harum quia laboriosam error consequuntur fugit,319
doloribus rerum, iure nesciunt amet quidem veniam320
cupiditate hic fugiat dolore aperiam quisquam libero321
earum quibusdam?322
</p>323
</div>324
</div>325
</div>326
<div class="hover-overlay">327
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>328
</div>329
</a>330
</div>331
</div>332
333
<div class="col-lg-7 mb-4 mb-lg-0">334
<div class="d-flex align-items-start mb-5">335
<div class="flex-shrink-0">336
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">337
<i class="fas fa-headset fa-lg text-white fa-fw"></i>338
</div>339
</div>340
<div class="flex-grow-1 ms-4">341
<p class="fw-bold mb-1">Support 24/7</p>342
<p class="text-muted mb-0">343
Lorem ipsum dolor, sit amet consectetur adipisicing elit.344
Nihil quisquam quibusdam modi sapiente magni molestias345
pariatur facilis reprehenderit facere aliquam ex.346
</p>347
</div>348
</div>349
350
<div class="d-flex align-items-start mb-5">351
<div class="flex-shrink-0">352
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">353
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>354
</div>355
</div>356
<div class="flex-grow-1 ms-4">357
<p class="fw-bold mb-1">Safe and solid</p>358
<p class="text-muted mb-0">359
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,360
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!361
</p>362
</div>363
</div>364
365
<div class="d-flex align-items-start mb-5">366
<div class="flex-shrink-0">367
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">368
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>369
</div>370
</div>371
<div class="flex-grow-1 ms-4">372
<p class="fw-bold mb-1">Extremely fast</p>373
<p class="text-muted mb-0">374
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus375
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?376
</p>377
</div>378
</div>379
380
<div class="d-flex align-items-start">381
<div class="flex-shrink-0">382
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">383
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>384
</div>385
</div>386
<div class="flex-grow-1 ms-4">387
<p class="fw-bold mb-1">Live analytics</p>388
<p class="text-muted mb-0">389
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque390
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore391
</p>392
</div>393
</div>394
</div>395
</div>396
</section>397
<!-- Section: Design Block -->398
399
</div>400
<div class="modal-footer">401
<button type="button" class="btn btn-secondary" data-mdb-ripple-init402
data-mdb-dismiss="modal">Close</button>403
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save404
changes</button>405
</div>406
</div>407
</div>408
</div>409
410
<!-- Modal project 2 -->411
<div class="modal fade" id="project-2" tabindex="-1" aria-labelledby="project-2Label" aria-hidden="true">412
<div class="modal-dialog modal-xl">413
<div class="modal-content">414
<div class="modal-header">415
<h5 class="modal-title" id="project-2Label">Balanced design</h5>416
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>417
</div>418
<div class="modal-body">419
<!-- Section: Design Block -->420
<section>421
422
<div class="row gx-lg-5 align-items-center">423
<div class="col-lg-5 mb-5 mb-lg-0">424
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init425
data-mdb-ripple-color="light">426
<img src="https://mdbootstrap.com/img/new/textures/full/7.jpg" class="w-100" />427
<a href="#!">428
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">429
<div class="d-flex justify-content-center align-items-center h-100">430
<div class="px-4 py-5 px-md-5 text-white text-center">431
<h3 class="text-uppercase fw-bold mb-4">432
The future is <u style="color: hsl(210, 12%, 80%)">now</u>433
</h3>434
<p class="mb-0" style="color: hsl(210, 12%, 80%)">435
Lorem ipsum dolor sit amet consectetur adipisicing elit.436
Harum quia laboriosam error consequuntur fugit,437
doloribus rerum, iure nesciunt amet quidem veniam438
cupiditate hic fugiat dolore aperiam quisquam libero439
earum quibusdam?440
</p>441
</div>442
</div>443
</div>444
<div class="hover-overlay">445
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>446
</div>447
</a>448
</div>449
</div>450
451
<div class="col-lg-7 mb-4 mb-lg-0">452
<div class="d-flex align-items-start mb-5">453
<div class="flex-shrink-0">454
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">455
<i class="fas fa-headset fa-lg text-white fa-fw"></i>456
</div>457
</div>458
<div class="flex-grow-1 ms-4">459
<p class="fw-bold mb-1">Support 24/7</p>460
<p class="text-muted mb-0">461
Lorem ipsum dolor, sit amet consectetur adipisicing elit.462
Nihil quisquam quibusdam modi sapiente magni molestias463
pariatur facilis reprehenderit facere aliquam ex.464
</p>465
</div>466
</div>467
468
<div class="d-flex align-items-start mb-5">469
<div class="flex-shrink-0">470
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">471
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>472
</div>473
</div>474
<div class="flex-grow-1 ms-4">475
<p class="fw-bold mb-1">Safe and solid</p>476
<p class="text-muted mb-0">477
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,478
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!479
</p>480
</div>481
</div>482
483
<div class="d-flex align-items-start mb-5">484
<div class="flex-shrink-0">485
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">486
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>487
</div>488
</div>489
<div class="flex-grow-1 ms-4">490
<p class="fw-bold mb-1">Extremely fast</p>491
<p class="text-muted mb-0">492
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus493
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?494
</p>495
</div>496
</div>497
498
<div class="d-flex align-items-start">499
<div class="flex-shrink-0">500
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">501
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>502
</div>503
</div>504
<div class="flex-grow-1 ms-4">505
<p class="fw-bold mb-1">Live analytics</p>506
<p class="text-muted mb-0">507
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque508
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore509
</p>510
</div>511
</div>512
</div>513
</div>514
</section>515
<!-- Section: Design Block -->516
</div>517
<div class="modal-footer">518
<button type="button" class="btn btn-secondary" data-mdb-ripple-init519
data-mdb-dismiss="modal">Close</button>520
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save521
changes</button>522
</div>523
</div>524
</div>525
</div>526
527
<!-- Modal project 3 -->528
<div class="modal fade" id="project-3" tabindex="-1" aria-labelledby="project-3Label" aria-hidden="true">529
<div class="modal-dialog modal-xl">530
<div class="modal-content">531
<div class="modal-header">532
<h5 class="modal-title" id="project-3Label">Metaverse 2.0</h5>533
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>534
</div>535
<div class="modal-body">536
<!-- Section: Design Block -->537
<section>538
539
<div class="row gx-lg-5 align-items-center">540
<div class="col-lg-5 mb-5 mb-lg-0">541
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init542
data-mdb-ripple-color="light">543
<img src="https://mdbootstrap.com/img/new/textures/full/30.jpg" class="w-100" />544
<a href="#!">545
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">546
<div class="d-flex justify-content-center align-items-center h-100">547
<div class="px-4 py-5 px-md-5 text-white text-center">548
<h3 class="text-uppercase fw-bold mb-4">549
The future is <u style="color: hsl(210, 12%, 80%)">now</u>550
</h3>551
<p class="mb-0" style="color: hsl(210, 12%, 80%)">552
Lorem ipsum dolor sit amet consectetur adipisicing elit.553
Harum quia laboriosam error consequuntur fugit,554
doloribus rerum, iure nesciunt amet quidem veniam555
cupiditate hic fugiat dolore aperiam quisquam libero556
earum quibusdam?557
</p>558
</div>559
</div>560
</div>561
<div class="hover-overlay">562
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>563
</div>564
</a>565
</div>566
</div>567
568
<div class="col-lg-7 mb-4 mb-lg-0">569
<div class="d-flex align-items-start mb-5">570
<div class="flex-shrink-0">571
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">572
<i class="fas fa-headset fa-lg text-white fa-fw"></i>573
</div>574
</div>575
<div class="flex-grow-1 ms-4">576
<p class="fw-bold mb-1">Support 24/7</p>577
<p class="text-muted mb-0">578
Lorem ipsum dolor, sit amet consectetur adipisicing elit.579
Nihil quisquam quibusdam modi sapiente magni molestias580
pariatur facilis reprehenderit facere aliquam ex.581
</p>582
</div>583
</div>584
585
<div class="d-flex align-items-start mb-5">586
<div class="flex-shrink-0">587
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">588
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>589
</div>590
</div>591
<div class="flex-grow-1 ms-4">592
<p class="fw-bold mb-1">Safe and solid</p>593
<p class="text-muted mb-0">594
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,595
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!596
</p>597
</div>598
</div>599
600
<div class="d-flex align-items-start mb-5">601
<div class="flex-shrink-0">602
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">603
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>604
</div>605
</div>606
<div class="flex-grow-1 ms-4">607
<p class="fw-bold mb-1">Extremely fast</p>608
<p class="text-muted mb-0">609
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus610
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?611
</p>612
</div>613
</div>614
615
<div class="d-flex align-items-start">616
<div class="flex-shrink-0">617
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">618
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>619
</div>620
</div>621
<div class="flex-grow-1 ms-4">622
<p class="fw-bold mb-1">Live analytics</p>623
<p class="text-muted mb-0">624
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque625
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore626
</p>627
</div>628
</div>629
</div>630
</div>631
</section>632
<!-- Section: Design Block -->633
</div>634
<div class="modal-footer">635
<button type="button" class="btn btn-secondary" data-mdb-ripple-init636
data-mdb-dismiss="modal">Close</button>637
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save638
changes</button>639
</div>640
</div>641
</div>642
</div>643
644
</section>645
<!-- Section: Projects modals -->646
647
<!-- Section: About me -->648
<section class="mb-10">649
650
<div class="container">651
652
<div class="row gx-0 align-items-center">653
654
<!-- First column -->655
<div class="col-lg-6 mb-5 mb-lg-0">656
657
<div style="background: hsla(0, 0%, 100%, 0.55);658
backdrop-filter: blur(30px);659
z-index: 1;" class="card rounded-7 me-lg-n5" data-mdb-animation-init data-mdb-animation-start="onScroll"660
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="600">661
<div class="card-body p-lg-5 shadow-5">662
<h2 class="fw-bold">663
<span class="text-primary">John Doe</span>664
</h2>665
<p class="fw-bold"><em>“Design is intelligence made visible.”</em></p>666
667
<p class="text-muted mb-4">668
Nunc tincidunt vulputate elit. Mauris varius purus malesuada669
neque iaculis malesuada. Aenean gravida magna orci, non670
efficitur est porta id. Donec magna diam.671
</p>672
<p class="text-muted">673
Ad, at blanditiis quaerat laborum officia incidunt674
cupiditate dignissimos voluptates eius aliquid minus675
praesentium! Perferendis et totam ipsum ex aut earum libero676
accusamus voluptas quod numquam saepe, consequuntur nihil677
quia tenetur consequatur. Quis, explicabo deserunt quasi678
assumenda ea maiores nulla, et dolor saepe praesentium natus679
error reiciendis voluptas iste. Esse, laudantium ipsum680
animi, quos voluptatibus atque vero repellat sit eligendi681
autem maiores quasi cum aperiam. Aperiam rerum culpa682
accusantium, ducimus deserunt aliquid alias vitae quasi683
corporis placeat vel maiores explicabo commodi!684
</p>685
</div>686
</div>687
688
</div>689
<!-- First column -->690
691
<!-- Second column -->692
<div class="col-lg-6 mb-5 mb-lg-0">693
694
<div class="bg-image hover-overlay rounded-7 shadow-4 rotate-lg" data-mdb-animation-init695
data-mdb-animation-start="onScroll" data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false"696
data-mdb-animation-delay="200" data-mdb-animation-offset="300">697
<img src="https://mdbootstrap.com/img/new/standard/people/272.jpg" class="w-100" alt="" />698
<div class="mask" style="background: linear-gradient(699
45deg,700
hsla(169, 84.5%, 52%, 0.3),701
hsla(263, 87.7%, 44.7%, 0.3) 100%702
)">703
</div>704
</div>705
706
</div>707
<!-- Second column -->708
709
</div>710
711
</div>712
713
</section>714
<!-- Section: About me -->715
716
<!-- Section: Testimonials -->717
<section class="mb-10 text-center">718
719
<h2 class="fw-bold mb-7 text-center">Happy clients</h2>720
721
<div class="row gx-lg-5">722
723
<!-- First column -->724
<div class="col-lg-4 mb-5 mb-lg-0">725
726
<div data-mdb-animation-init data-mdb-animation-start="onScroll" data-mdb-animation="fade-in"727
data-mdb-animation-show-on-load="false" data-mdb-animation-delay="200">728
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">729
730
<!-- Divider here -->731
<hr class="hr hr-blurry">732
733
<p class="text-muted mt-4 mb-2">Project Manager at Spotify</p>734
<p class="h5 mb-4 text-primary">Garry Lindman</p>735
<p class="pb-4 mb-4">736
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem737
itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium738
ratione possimus quos suscipit, ratione nostrum cum odit.739
</p>740
</div>741
<img src="https://mdbootstrap.com/img/new/avatars/22.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"742
style="max-width: 100px" alt="Avatar" />743
</div>744
745
</div>746
<!-- First column -->747
748
<!-- Second column -->749
<div class="col-lg-4 mb-5 mb-lg-0">750
751
<div data-mdb-animation-init data-mdb-animation-start="onScroll" data-mdb-animation="fade-in"752
data-mdb-animation-show-on-load="false" data-mdb-animation-delay="400">753
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">754
755
<!-- Divider here -->756
<hr class="hr hr-blurry">757
758
<p class="text-muted mt-4 mb-2">CEO at Reddit</p>759
<p class="h5 mb-4 text-primary">Lisa Montessori</p>760
<p class="pb-4 mb-4">761
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum762
soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime763
placeat facere possimus, omnis voluptas assumenda est omnis.764
</p>765
</div>766
<img src="https://mdbootstrap.com/img/new/avatars/11.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"767
style="max-width: 100px" alt="Avatar" />768
</div>769
770
</div>771
<!-- Second column -->772
773
<!-- Third column -->774
<div class="col-lg-4">775
776
<div data-mdb-animation-init data-mdb-animation-start="onScroll" data-mdb-animation="fade-in"777
data-mdb-animation-show-on-load="false" data-mdb-animation-delay="600">778
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">779
780
<!-- Divider here -->781
<hr class="hr hr-blurry">782
783
<p class="text-muted mt-4 mb-2">Senior Product Designer at Twitter</p>784
<p class="h5 mb-4 text-primary">Ozzy McRyan</p>785
<p class="pb-4 mb-4">786
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe787
eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque788
earum rerum hic tenetur a sapiente delectus ut aut reiciendis.789
</p>790
</div>791
<img src="https://mdbootstrap.com/img/new/avatars/25.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"792
style="max-width: 100px" alt="Avatar" />793
</div>794
795
</div>796
<!-- Third column -->797
798
</div>799
</section>800
<!-- Section: Testimonials -->801
802
<!-- Section: Contact -->803
<section class="mb-10 text-center">804
805
<div class="container">806
807
<div class="row gx-0 align-items-center">808
809
<!-- First column -->810
<div class="col-lg-6 mb-5 mb-lg-0">811
812
<div style="background: hsla(0, 0%, 100%, 0.55); 813
backdrop-filter: blur(30px);814
z-index: 1;" class="card rounded-7 me-lg-n5" data-mdb-animation-init815
data-mdb-animation-start="onScroll" data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false"816
data-mdb-animation-delay="500">817
<div class="card-body p-lg-5 shadow-5">818
<form>819
<!-- Name input -->820
<div class="form-outline mb-4" data-mdb-input-init>821
<input type="text" id="form4Example1" class="form-control" />822
<label class="form-label" for="form4Example1">Name</label>823
</div>824
825
<!-- Email input -->826
<div class="form-outline mb-4" data-mdb-input-init>827
<input type="email" id="form4Example2" class="form-control" />828
<label class="form-label" for="form4Example2">Email address</label>829
</div>830
831
<!-- Message input -->832
<div class="form-outline mb-4" data-mdb-input-init>833
<textarea class="form-control" id="form4Example3" rows="4"></textarea>834
<label class="form-label" for="form4Example3">Message</label>835
</div>836
837
<!-- Checkbox -->838
<div class="form-check d-flex justify-content-center mb-4">839
<input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />840
<label class="form-check-label" for="form4Example4">841
Send me a copy of this message842
</label>843
</div>844
845
<!-- Submit button -->846
<button type="submit" class="btn btn-primary btn-block mb-4" data-mdb-ripple-init>Send</button>847
</form>848
</div>849
</div>850
851
</div>852
<!-- First column -->853
854
<!-- Second column -->855
<div class="col-lg-6 mb-5 mb-lg-0">856
857
<div class="ratio ratio-1x1" data-mdb-animation-init data-mdb-animation-start="onScroll"858
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="200"859
data-mdb-animation-offset="200">860
<iframe class="shadow-3-strong rounded-7"861
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d96813.17497894862!2d-73.97484803586903!3d40.68692922859912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2588f046ee661%3A0xa0b3281fcecc08c!2sManhattan%2C%20New%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2spl!4v1671718528728!5m2!1sen!2spl"862
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>863
</div>864
865
</div>866
<!-- Second column -->867
868
</div>869
870
</div>871
872
</section>873
<!-- Section: Contact -->874
875
</div>876
</main>877
<!--Main layout-->878
879
<!--Footer-->880
<footer class="text-center" style="background-color: hsl(218, 62.2%, 95%)">881
<div class="container py-4" data-mdb-animation-init data-mdb-animation-start="onScroll"882
data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false" data-mdb-animation-delay="200">883
884
<!-- Facebook -->885
<a class="btn text-white btn-floating m-2" style="background-color: #3b5998;" href="#!" role="button"><i886
class="fab fa-facebook-f"></i></a>887
888
<!-- Twitter -->889
<a class="btn text-white btn-floating m-2" style="background-color: #55acee;" href="#!" role="button"><i890
class="fab fa-twitter"></i></a>891
892
<!-- Google -->893
<a class="btn text-white btn-floating m-2" style="background-color: #dd4b39;" href="#!" role="button"><i894
class="fab fa-google"></i></a>895
896
<!-- Instagram -->897
<a class="btn text-white btn-floating m-2" style="background-color: #ac2bac;" href="#!" role="button"><i898
class="fab fa-instagram"></i></a>899
900
<!-- Linkedin -->901
<a class="btn text-white btn-floating m-2" style="background-color: #0082ca;" href="#!" role="button"><i902
class="fab fa-linkedin-in"></i></a>903
<!-- Github -->904
<a class="btn text-white btn-floating m-2" style="background-color: #333333;" href="#!" role="button"><i905
class="fab fa-github"></i></a>906
907
</div>908
<!-- Copyright -->909
<div class="text-center p-3" style="background-color: hsla(218, 62.2%, 35%, 0.2)" data-mdb-animation-init910
data-mdb-animation-start="onScroll" data-mdb-animation="fade-in" data-mdb-animation-show-on-load="false"911
data-mdb-animation-delay="300">912
© 2022 Copyright:913
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>914
</div>915
<!-- Copyright -->916
</footer>917
<!--Footer-->xxxxxxxxxx1
/* Color of the links BEFORE scroll */2
.navbar-before-scroll .nav-link,3
.navbar-before-scroll .navbar-toggler-icon {4
color: #fff;5
}6
7
/* Color of the links AFTER scroll */8
.navbar-after-scroll .nav-link,9
.navbar-after-scroll .navbar-toggler-icon {10
color: #4f4f4f;11
}12
13
/* Color of the navbar AFTER scroll */14
.navbar-after-scroll {15
background-color: #fff;16
}17
18
/* Transition after scrolling */19
.navbar-after-scroll {20
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;21
}22
23
/* Transition to the initial state */24
.navbar-before-scroll {25
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;26
}27
28
/* An optional height of the navbar AFTER scroll */29
.navbar.navbar-before-scroll.navbar-after-scroll {30
padding-top: 5px;31
padding-bottom: 5px;32
}33
34
/* Navbar on mobile */35
@media (max-width: 991.98px) {36
#main-navbar {37
background-color: #fff;38
}39
40
.nav-link,41
.navbar-toggler-icon {42
color: #4f4f4f !important;43
}44
}45
@media (min-width: 992px) {46
.rotate-lg {47
transform: rotate(6deg);48
}49
}xxxxxxxxxx1
const navbar = document.getElementById("main-navbar")2
3
window.addEventListener('scroll', function () {4
if (window.pageYOffset > 0) {5
navbar.classList.add("navbar-after-scroll")6
} else {7
navbar.classList.remove("navbar-after-scroll")8
}9
}) Console errors: 0