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
</div>181
</main>182
<!--Main layout-->183
184
<!--Footer-->185
<footer>186
187
</footer>188
<!--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