HTML
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">192
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="img-fluid" />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">221
<img src="https://mdbootstrap.com/img/new/textures/small/38.jpg" class="img-fluid" />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">250
<img src="https://mdbootstrap.com/img/new/textures/small/55.jpg" class="img-fluid" />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
</div>279
</main>280
<!--Main layout-->281
282
<!--Footer-->283
<footer>284
285
</footer>286
<!--Footer-->CSS
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
}JS
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