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">John Doe</h2>82
<h1 class="display-2 fw-bold text-uppercase">Web developer</h1>83
</div>84
85
</div>86
87
<!-- CTA elements -->88
<div class="d-flex align-items-center w-100 justify-content-between px-5 mb-5">89
<a href="https://github.com/mdbootstrap/mdb-ui-kit" target="_blank" class="text-dark"><i90
class="fab fa-github fa-xl"></i></a>91
<hr class="hr d-none d-xl-flex" style="height: 2px; width: 200px;">92
<a class="btn btn-primary btn-lg btn-rounded" href="#" role="button" data-mdb-ripple-init>See my93
projects<i class="fas fa-angle-down ms-2"></i></a>94
</div>95
96
</div>97
<!-- First column -->98
99
<!-- Second column -->100
<div class="col-lg-6 d-none d-lg-inline-block vh-100">101
102
<!-- Carousel wrapper -->103
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel"104
data-mdb-carousel-init>105
<!-- Indicators -->106
<div class="carousel-indicators">107
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0"108
class="rounded-circle active" style="width: 7px; height: 7px" aria-current="true"109
aria-label="Slide 1"></button>110
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1" aria-label="Slide 2"111
class="rounded-circle" style="width: 7px; height: 7px"></button>112
<button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2" aria-label="Slide 3"113
class="rounded-circle" style="width: 7px; height: 7px"></button>114
</div>115
116
<!-- Inner -->117
<div class="carousel-inner shadow-5-strong" style="border-bottom-left-radius: 4rem">118
<!-- Single item -->119
<div class="carousel-item active">120
<img src="https://mdbootstrap.com/img/new/textures/full/243.jpg"121
class="d-block vh-100 vw-100 object-cover" alt="15 years of experience in the IT industry" />122
<div class="carousel-caption d-none d-md-block">123
<h5>15 years of experience in the IT industry</h5>124
<p>I am in love with technology and have spent half my life developing it</p>125
</div>126
</div>127
128
<!-- Single item -->129
<div class="carousel-item">130
<img src="https://mdbootstrap.com/img/new/textures/full/102.jpg"131
class="d-block vh-100 vw-100 object-cover" alt="243 completed projects" />132
<div class="carousel-caption d-none d-md-block">133
<h5>243 completed projects</h5>134
<p>I love challenges and treat each project as my own</p>135
</div>136
</div>137
138
<!-- Single item -->139
<div class="carousel-item">140
<img src="https://mdbootstrap.com/img/new/textures/full/107.jpg"141
class="d-block vh-100 vw-100 object-cover" alt="53 satisfied customers" />142
<div class="carousel-caption d-none d-md-block">143
<h5>53 satisfied customers</h5>144
<p>There is no better reward for me than a happy customer</p>145
</div>146
</div>147
</div>148
<!-- Inner -->149
150
<!-- Controls -->151
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"152
data-mdb-slide="prev">153
<span class="carousel-control-prev-icon" aria-hidden="true"></span>154
<span class="visually-hidden">Previous</span>155
</button>156
<button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"157
data-mdb-slide="next">158
<span class="carousel-control-next-icon" aria-hidden="true"></span>159
<span class="visually-hidden">Next</span>160
</button>161
</div>162
<!-- Carousel wrapper -->163
164
</div>165
<!-- Second column -->166
167
</div>168
</div>169
170
</section>171
<!-- Section: Split screen -->172
173
</header>174
<!--Main Navigation-->175
176
<!--Main layout-->177
<main>178
<div class="container">179
180
<!-- Section: My projects -->181
<section class="mb-10 text-center">182
<h2 class="fw-bold mb-7 text-center">My projects</h2>183
184
<div class="row gx-lg-5">185
186
<!-- First column -->187
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">188
189
<div class="card rounded-6 h-100">190
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init191
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-1">192
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100" />193
<a href="#!">194
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>195
</a>196
</div>197
<div class="card-body">198
<h5 class="card-title">AI engine</h5>199
<p class="text-muted">200
<small>Finished <u>13.09.2021</u> for201
<a href="" class="text-dark">Techify</a></small>202
</p>203
<p class="card-text">204
Ut pretium ultricies dignissim. Sed sit amet mi eget urna205
placerat vulputate. Ut vulputate est non quam dignissim206
elementum. Donec a ullamcorper diam.207
</p>208
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>209
</div>210
</div>211
212
</div>213
<!-- First column -->214
215
<!-- Second column -->216
<div class="col-lg-4 mb-6 mb-lg-0">217
218
<div class="card rounded-6 h-100">219
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init220
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-2">221
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="w-100" />222
<a href="#!">223
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>224
</a>225
</div>226
<div class="card-body">227
<h5 class="card-title">Balanced design</h5>228
<p class="text-muted">229
<small>Finished <u>12.01.2022</u> for230
<a href="" class="text-dark">Rubicon</a></small>231
</p>232
<p class="card-text">233
Suspendisse in volutpat massa. Nulla facilisi. Sed aliquet234
diam orci, nec ornare metus semper sed. Integer volutpat235
ornare erat sit amet rutrum. Ut vulputate est non quam.236
</p>237
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>238
</div>239
</div>240
241
</div>242
<!-- Second column -->243
244
<!-- Third column -->245
<div class="col-lg-4 mb-6 mb-lg-0">246
247
<div class="card rounded-6 h-100">248
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init249
data-mdb-ripple-color="light" data-mdb-modal-init data-mdb-target="#project-3">250
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="w-100" />251
<a href="#!">252
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>253
</a>254
</div>255
<div class="card-body">256
<h5 class="card-title">Metaverse 2.0</h5>257
<p class="text-muted">258
<small>Finished <u>10.11.2022</u> for259
<a href="" class="text-dark">Venom Tech</a></small>260
</p>261
<p class="card-text">262
Curabitur tristique, mi a mollis sagittis, metus felis mattis263
arcu, non vehicula nisl dui quis diam. Mauris ut risus eget264
massa volutpat feugiat. Donec.265
</p>266
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>267
</div>268
</div>269
270
</div>271
<!-- Third column -->272
273
</div>274
275
</section>276
<!-- Section: My projects -->277
278
<!-- Section: Projects modals -->279
<section class="">280
281
<!-- Modal project 1 -->282
<div class="modal fade" id="project-1" tabindex="-1" aria-labelledby="project-1Label" aria-hidden="true">283
<div class="modal-dialog modal-xl">284
<div class="modal-content">285
<div class="modal-header">286
<h5 class="modal-title" id="project-1Label">AI engine</h5>287
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>288
</div>289
<div class="modal-body">290
291
<!-- Section: Design Block -->292
<section>293
294
<div class="row gx-lg-5 align-items-center">295
<div class="col-lg-5 mb-5 mb-lg-0">296
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init297
data-mdb-ripple-color="light">298
<img src="https://mdbootstrap.com/img/new/textures/full/98.jpg" class="w-100" />299
<a href="#!">300
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">301
<div class="d-flex justify-content-center align-items-center h-100">302
<div class="px-4 py-5 px-md-5 text-white text-center">303
<h3 class="text-uppercase fw-bold mb-4">304
The future is <u style="color: hsl(210, 12%, 80%)">now</u>305
</h3>306
<p class="mb-0" style="color: hsl(210, 12%, 80%)">307
Lorem ipsum dolor sit amet consectetur adipisicing elit.308
Harum quia laboriosam error consequuntur fugit,309
doloribus rerum, iure nesciunt amet quidem veniam310
cupiditate hic fugiat dolore aperiam quisquam libero311
earum quibusdam?312
</p>313
</div>314
</div>315
</div>316
<div class="hover-overlay">317
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>318
</div>319
</a>320
</div>321
</div>322
323
<div class="col-lg-7 mb-4 mb-lg-0">324
<div class="d-flex align-items-start mb-5">325
<div class="flex-shrink-0">326
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">327
<i class="fas fa-headset fa-lg text-white fa-fw"></i>328
</div>329
</div>330
<div class="flex-grow-1 ms-4">331
<p class="fw-bold mb-1">Support 24/7</p>332
<p class="text-muted mb-0">333
Lorem ipsum dolor, sit amet consectetur adipisicing elit.334
Nihil quisquam quibusdam modi sapiente magni molestias335
pariatur facilis reprehenderit facere aliquam ex.336
</p>337
</div>338
</div>339
340
<div class="d-flex align-items-start mb-5">341
<div class="flex-shrink-0">342
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">343
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>344
</div>345
</div>346
<div class="flex-grow-1 ms-4">347
<p class="fw-bold mb-1">Safe and solid</p>348
<p class="text-muted mb-0">349
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,350
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!351
</p>352
</div>353
</div>354
355
<div class="d-flex align-items-start mb-5">356
<div class="flex-shrink-0">357
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">358
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>359
</div>360
</div>361
<div class="flex-grow-1 ms-4">362
<p class="fw-bold mb-1">Extremely fast</p>363
<p class="text-muted mb-0">364
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus365
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?366
</p>367
</div>368
</div>369
370
<div class="d-flex align-items-start">371
<div class="flex-shrink-0">372
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(204, 30%, 20%)">373
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>374
</div>375
</div>376
<div class="flex-grow-1 ms-4">377
<p class="fw-bold mb-1">Live analytics</p>378
<p class="text-muted mb-0">379
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque380
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore381
</p>382
</div>383
</div>384
</div>385
</div>386
</section>387
<!-- Section: Design Block -->388
389
</div>390
<div class="modal-footer">391
<button type="button" class="btn btn-secondary" data-mdb-ripple-init392
data-mdb-dismiss="modal">Close</button>393
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save394
changes</button>395
</div>396
</div>397
</div>398
</div>399
400
<!-- Modal project 2 -->401
<div class="modal fade" id="project-2" tabindex="-1" aria-labelledby="project-2Label" aria-hidden="true">402
<div class="modal-dialog modal-xl">403
<div class="modal-content">404
<div class="modal-header">405
<h5 class="modal-title" id="project-2Label">Balanced design</h5>406
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>407
</div>408
<div class="modal-body">409
<!-- Section: Design Block -->410
<section>411
412
<div class="row gx-lg-5 align-items-center">413
<div class="col-lg-5 mb-5 mb-lg-0">414
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init415
data-mdb-ripple-color="light">416
<img src="https://mdbootstrap.com/img/new/textures/full/7.jpg" class="w-100" />417
<a href="#!">418
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">419
<div class="d-flex justify-content-center align-items-center h-100">420
<div class="px-4 py-5 px-md-5 text-white text-center">421
<h3 class="text-uppercase fw-bold mb-4">422
The future is <u style="color: hsl(210, 12%, 80%)">now</u>423
</h3>424
<p class="mb-0" style="color: hsl(210, 12%, 80%)">425
Lorem ipsum dolor sit amet consectetur adipisicing elit.426
Harum quia laboriosam error consequuntur fugit,427
doloribus rerum, iure nesciunt amet quidem veniam428
cupiditate hic fugiat dolore aperiam quisquam libero429
earum quibusdam?430
</p>431
</div>432
</div>433
</div>434
<div class="hover-overlay">435
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>436
</div>437
</a>438
</div>439
</div>440
441
<div class="col-lg-7 mb-4 mb-lg-0">442
<div class="d-flex align-items-start mb-5">443
<div class="flex-shrink-0">444
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">445
<i class="fas fa-headset fa-lg text-white fa-fw"></i>446
</div>447
</div>448
<div class="flex-grow-1 ms-4">449
<p class="fw-bold mb-1">Support 24/7</p>450
<p class="text-muted mb-0">451
Lorem ipsum dolor, sit amet consectetur adipisicing elit.452
Nihil quisquam quibusdam modi sapiente magni molestias453
pariatur facilis reprehenderit facere aliquam ex.454
</p>455
</div>456
</div>457
458
<div class="d-flex align-items-start mb-5">459
<div class="flex-shrink-0">460
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">461
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>462
</div>463
</div>464
<div class="flex-grow-1 ms-4">465
<p class="fw-bold mb-1">Safe and solid</p>466
<p class="text-muted mb-0">467
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,468
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!469
</p>470
</div>471
</div>472
473
<div class="d-flex align-items-start mb-5">474
<div class="flex-shrink-0">475
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">476
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>477
</div>478
</div>479
<div class="flex-grow-1 ms-4">480
<p class="fw-bold mb-1">Extremely fast</p>481
<p class="text-muted mb-0">482
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus483
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?484
</p>485
</div>486
</div>487
488
<div class="d-flex align-items-start">489
<div class="flex-shrink-0">490
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(0, 63%, 44%)">491
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>492
</div>493
</div>494
<div class="flex-grow-1 ms-4">495
<p class="fw-bold mb-1">Live analytics</p>496
<p class="text-muted mb-0">497
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque498
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore499
</p>500
</div>501
</div>502
</div>503
</div>504
</section>505
<!-- Section: Design Block -->506
</div>507
<div class="modal-footer">508
<button type="button" class="btn btn-secondary" data-mdb-ripple-init509
data-mdb-dismiss="modal">Close</button>510
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save511
changes</button>512
</div>513
</div>514
</div>515
</div>516
517
<!-- Modal project 3 -->518
<div class="modal fade" id="project-3" tabindex="-1" aria-labelledby="project-3Label" aria-hidden="true">519
<div class="modal-dialog modal-xl">520
<div class="modal-content">521
<div class="modal-header">522
<h5 class="modal-title" id="project-3Label">Metaverse 2.0</h5>523
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>524
</div>525
<div class="modal-body">526
<!-- Section: Design Block -->527
<section>528
529
<div class="row gx-lg-5 align-items-center">530
<div class="col-lg-5 mb-5 mb-lg-0">531
<div class="bg-image ripple rounded-7 shadow-5-strong" data-mdb-ripple-init532
data-mdb-ripple-color="light">533
<img src="https://mdbootstrap.com/img/new/textures/full/30.jpg" class="w-100" />534
<a href="#!">535
<div class="mask" style="background-color: rgba(0, 0, 0, 0.4)">536
<div class="d-flex justify-content-center align-items-center h-100">537
<div class="px-4 py-5 px-md-5 text-white text-center">538
<h3 class="text-uppercase fw-bold mb-4">539
The future is <u style="color: hsl(210, 12%, 80%)">now</u>540
</h3>541
<p class="mb-0" style="color: hsl(210, 12%, 80%)">542
Lorem ipsum dolor sit amet consectetur adipisicing elit.543
Harum quia laboriosam error consequuntur fugit,544
doloribus rerum, iure nesciunt amet quidem veniam545
cupiditate hic fugiat dolore aperiam quisquam libero546
earum quibusdam?547
</p>548
</div>549
</div>550
</div>551
<div class="hover-overlay">552
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>553
</div>554
</a>555
</div>556
</div>557
558
<div class="col-lg-7 mb-4 mb-lg-0">559
<div class="d-flex align-items-start mb-5">560
<div class="flex-shrink-0">561
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">562
<i class="fas fa-headset fa-lg text-white fa-fw"></i>563
</div>564
</div>565
<div class="flex-grow-1 ms-4">566
<p class="fw-bold mb-1">Support 24/7</p>567
<p class="text-muted mb-0">568
Lorem ipsum dolor, sit amet consectetur adipisicing elit.569
Nihil quisquam quibusdam modi sapiente magni molestias570
pariatur facilis reprehenderit facere aliquam ex.571
</p>572
</div>573
</div>574
575
<div class="d-flex align-items-start mb-5">576
<div class="flex-shrink-0">577
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">578
<i class="fas fa-shield-alt fa-lg text-white fa-fw"></i>579
</div>580
</div>581
<div class="flex-grow-1 ms-4">582
<p class="fw-bold mb-1">Safe and solid</p>583
<p class="text-muted mb-0">584
Eum nostrum fugit numquam, voluptates veniam neque quibusdam ullam aspernatur odio soluta,585
quisquam dolore animi mollitia a omnis praesentium, expedita nobis!586
</p>587
</div>588
</div>589
590
<div class="d-flex align-items-start mb-5">591
<div class="flex-shrink-0">592
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">593
<i class="fas fa-shipping-fast fa-lg text-white fa-fw"></i>594
</div>595
</div>596
<div class="flex-grow-1 ms-4">597
<p class="fw-bold mb-1">Extremely fast</p>598
<p class="text-muted mb-0">599
Enim cupiditate, minus nulla dolor cumque iure eveniet facere ullam beatae hic voluptatibus600
dolores exercitationem? Facilis debitis aspernatur amet nisi iure eveniet facere?601
</p>602
</div>603
</div>604
605
<div class="d-flex align-items-start">606
<div class="flex-shrink-0">607
<div class="p-3 rounded-4 shadow-2-strong" style="background-color: hsl(260, 84%, 43%)">608
<i class="fas fa-chart-pie fa-lg text-white fa-fw"></i>609
</div>610
</div>611
<div class="flex-grow-1 ms-4">612
<p class="fw-bold mb-1">Live analytics</p>613
<p class="text-muted mb-0">614
Illum doloremque ea, blanditiis sed dolor laborum praesentium maxime sint, consectetur atque615
ipsum ab adipisci ullam aspernatur odio soluta, quisquam dolore616
</p>617
</div>618
</div>619
</div>620
</div>621
</section>622
<!-- Section: Design Block -->623
</div>624
<div class="modal-footer">625
<button type="button" class="btn btn-secondary" data-mdb-ripple-init626
data-mdb-dismiss="modal">Close</button>627
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-ripple-init>Save628
changes</button>629
</div>630
</div>631
</div>632
</div>633
634
</section>635
<!-- Section: Projects modals -->636
637
<!-- Section: About me -->638
<section class="mb-10">639
640
<div class="container">641
642
<div class="row gx-0 align-items-center">643
644
<!-- First column -->645
<div class="col-lg-6 mb-5 mb-lg-0">646
647
<div style="background: hsla(0, 0%, 100%, 0.55);648
backdrop-filter: blur(30px);649
z-index: 1;" class="card rounded-7 me-lg-n5">650
<div class="card-body p-lg-5 shadow-5">651
<h2 class="fw-bold">652
<span class="text-primary">John Doe</span>653
</h2>654
<p class="fw-bold"><em>“Design is intelligence made visible.”</em></p>655
656
<p class="text-muted mb-4">657
Nunc tincidunt vulputate elit. Mauris varius purus malesuada658
neque iaculis malesuada. Aenean gravida magna orci, non659
efficitur est porta id. Donec magna diam.660
</p>661
<p class="text-muted">662
Ad, at blanditiis quaerat laborum officia incidunt663
cupiditate dignissimos voluptates eius aliquid minus664
praesentium! Perferendis et totam ipsum ex aut earum libero665
accusamus voluptas quod numquam saepe, consequuntur nihil666
quia tenetur consequatur. Quis, explicabo deserunt quasi667
assumenda ea maiores nulla, et dolor saepe praesentium natus668
error reiciendis voluptas iste. Esse, laudantium ipsum669
animi, quos voluptatibus atque vero repellat sit eligendi670
autem maiores quasi cum aperiam. Aperiam rerum culpa671
accusantium, ducimus deserunt aliquid alias vitae quasi672
corporis placeat vel maiores explicabo commodi!673
</p>674
</div>675
</div>676
677
</div>678
<!-- First column -->679
680
<!-- Second column -->681
<div class="col-lg-6 mb-5 mb-lg-0">682
683
<div class="bg-image hover-overlay rounded-7 shadow-4 rotate-lg">684
<img src="https://mdbootstrap.com/img/new/standard/people/272.jpg" class="w-100" alt="" />685
<div class="mask" style="background: linear-gradient(686
45deg,687
hsla(169, 84.5%, 52%, 0.3),688
hsla(263, 87.7%, 44.7%, 0.3) 100%689
)">690
</div>691
</div>692
693
</div>694
<!-- Second column -->695
696
</div>697
698
</div>699
700
</section>701
<!-- Section: About me -->702
703
<!-- Section: Testimonials -->704
<section class="mb-10 text-center">705
706
<h2 class="fw-bold mb-7 text-center">Happy clients</h2>707
708
<div class="row gx-lg-5">709
710
<!-- First column -->711
<div class="col-lg-4 mb-5 mb-lg-0">712
713
<div>714
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">715
716
<!-- Divider here -->717
<hr class="hr hr-blurry">718
719
<p class="text-muted mt-4 mb-2">Project Manager at Spotify</p>720
<p class="h5 mb-4 text-primary">Garry Lindman</p>721
<p class="pb-4 mb-4">722
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis molestias quidem723
itaque earum tempora distinctio soluta ut, eius, impedit porro iure praesentium724
ratione possimus quos suscipit, ratione nostrum cum odit.725
</p>726
</div>727
<img src="https://mdbootstrap.com/img/new/avatars/22.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"728
style="max-width: 100px" alt="Avatar" />729
</div>730
731
</div>732
<!-- First column -->733
734
<!-- Second column -->735
<div class="col-lg-4 mb-5 mb-lg-0">736
737
<div>738
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">739
740
<!-- Divider here -->741
<hr class="hr hr-blurry">742
743
<p class="text-muted mt-4 mb-2">CEO at Reddit</p>744
<p class="h5 mb-4 text-primary">Lisa Montessori</p>745
<p class="pb-4 mb-4">746
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum747
soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime748
placeat facere possimus, omnis voluptas assumenda est omnis.749
</p>750
</div>751
<img src="https://mdbootstrap.com/img/new/avatars/11.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"752
style="max-width: 100px" alt="Avatar" />753
</div>754
755
</div>756
<!-- Second column -->757
758
<!-- Third column -->759
<div class="col-lg-4">760
761
<div>762
<div class="rounded-7 p-4 shadow-3" style="background-color: hsl(218, 62.2%, 95%)">763
764
<!-- Divider here -->765
<hr class="hr hr-blurry">766
767
<p class="text-muted mt-4 mb-2">Senior Product Designer at Twitter</p>768
<p class="h5 mb-4 text-primary">Ozzy McRyan</p>769
<p class="pb-4 mb-4">770
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe771
eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque772
earum rerum hic tenetur a sapiente delectus ut aut reiciendis.773
</p>774
</div>775
<img src="https://mdbootstrap.com/img/new/avatars/25.jpg" class="w-100 rounded-7 mt-n5 shadow-5-strong"776
style="max-width: 100px" alt="Avatar" />777
</div>778
779
</div>780
<!-- Third column -->781
782
</div>783
</section>784
<!-- Section: Testimonials -->785
786
</div>787
</main>788
<!--Main layout-->789
790
<!--Footer-->791
<footer>792
793
</footer>794
<!--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