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-init192
data-mdb-target="#exampleModal">193
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100" />194
<a href="#!">195
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>196
</a>197
</div>198
<div class="card-body">199
<h5 class="card-title">AI engine</h5>200
<p class="text-muted">201
<small>Finished <u>13.09.2021</u> for202
<a href="" class="text-dark">Techify</a></small>203
</p>204
<p class="card-text">205
Ut pretium ultricies dignissim. Sed sit amet mi eget urna206
placerat vulputate. Ut vulputate est non quam dignissim207
elementum. Donec a ullamcorper diam.208
</p>209
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>210
</div>211
</div>212
213
</div>214
<!-- First column -->215
216
<!-- Second column -->217
<div class="col-lg-4 mb-6 mb-lg-0">218
219
<div class="card rounded-6 h-100">220
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init221
data-mdb-ripple-color="light">222
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="w-100" />223
<a href="#!">224
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>225
</a>226
</div>227
<div class="card-body">228
<h5 class="card-title">Balanced design</h5>229
<p class="text-muted">230
<small>Finished <u>12.01.2022</u> for231
<a href="" class="text-dark">Rubicon</a></small>232
</p>233
<p class="card-text">234
Suspendisse in volutpat massa. Nulla facilisi. Sed aliquet235
diam orci, nec ornare metus semper sed. Integer volutpat236
ornare erat sit amet rutrum. Ut vulputate est non quam.237
</p>238
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>239
</div>240
</div>241
242
</div>243
<!-- Second column -->244
245
<!-- Third column -->246
<div class="col-lg-4 mb-6 mb-lg-0">247
248
<div class="card rounded-6 h-100">249
<div class="mt-n3 bg-image hover-overlay mx-3 shadow-4-strong rounded-6" data-mdb-ripple-init250
data-mdb-ripple-color="light">251
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="w-100" />252
<a href="#!">253
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>254
</a>255
</div>256
<div class="card-body">257
<h5 class="card-title">Metaverse 2.0</h5>258
<p class="text-muted">259
<small>Finished <u>10.11.2022</u> for260
<a href="" class="text-dark">Venom Tech</a></small>261
</p>262
<p class="card-text">263
Curabitur tristique, mi a mollis sagittis, metus felis mattis264
arcu, non vehicula nisl dui quis diam. Mauris ut risus eget265
massa volutpat feugiat. Donec.266
</p>267
<a href="#!" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Read more</a>268
</div>269
</div>270
271
</div>272
<!-- Third column -->273
274
</div>275
276
</section>277
<!-- Section: My projects -->278
279
<!-- Section: Projects modals -->280
<section class="">281
282
<!-- Modal -->283
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">284
<div class="modal-dialog">285
<div class="modal-content">286
<div class="modal-header">287
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>288
<button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal"289
aria-label="Close"></button>290
</div>291
<div class="modal-body">...</div>292
<div class="modal-footer">293
<button type="button" class="btn btn-secondary" data-mdb-ripple-init294
data-mdb-dismiss="modal">Close</button>295
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>296
</div>297
</div>298
</div>299
</div>300
301
</section>302
<!-- Section: Projects modals -->303
304
</div>305
</main>306
<!--Main layout-->307
308
<!--Footer-->309
<footer>310
311
</footer>312
<!--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
}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