<nav id="bullet-one" class="nav bullet-nav bullet-one-page-scroll-navigation nav-dark">
<a href="#section-01" data-skin="light" class="nav-link active" ></a>
<a href="#section-02" data-skin="light" class="nav-link"></a>
<a href="#section-03" data-skin="light" class="nav-link"></a>
<a href="#section-04" data-skin="dark" class="nav-link"></a>
<a href="#section-05" data-skin="light" class="nav-link"></a>
</nav>
<div class="scrollspy-bullet">
<section id="section-01" style="background-image: url('../../../images/scroll-navigation-01.jpg');background-position: center;background-size: cover;" class="h-100vh py-11 d-flex align-items-center">
<div class="container container-xl">
<div class="row">
<div class="col-xl-5 offset-xl-7 col-lg-6 offset-lg-6 text-center">
<div class="fs-56 text-white custom-font pb-4">Made for You!</div>
<h2 class="fs-68 font-weight-500 text-white">Love Your Skin Naturally</h2>
<a href="#" class="btn btn-md btn-link text-white pb-1 border-2x border-bottom border-color-white px-0 pt-5 rounded-0">Discover now<i class="far fa-arrow-right fs-12 pl-1"></i></a>
</div>
</div>
</div>
</section>
<section id="section-02" style="background-image: url('../../../images/scroll-navigation-02.jpg');background-position: center;background-size: cover;" class="h-100vh py-11 d-flex align-items-center">
<div class="container container-xl">
<div class="row">
<div class="col-xl-5 col-lg-6 text-center">
<div class="fs-56 text-primary custom-font pb-4">Autumn Skincare</div>
<h2 class="fs-68 font-weight-500 text-secondary">Pamper Your Skin</h2>
<a href="#" class="btn btn-md btn-link text-secondary pb-1 border-0 border-2x border-bottom border-secondary px-0 pt-7 rounded-0">Shop Now<i class="far fa-arrow-right fs-12 pl-1"></i></a>
</div>
</div>
</div>
</section>
<section id="section-03" style="background-image: url('../../../images/scroll-navigation-03.jpg');background-position: center;background-size: cover;" class="h-100vh py-11 d-flex align-items-center">
<div class="container container-xl">
<div class="row">
<div class="col text-center">
<div class="fs-sm-90 fs-55 text-white font-weight-500">25% off Everything</div>
<h2 class="fs-24 font-weight-600 text-white">Made using clean, non-toxic ingredients</h2>
<a href="#" class="btn btn-md btn-link text-white pb-1 border-2x border-bottom border-color-white px-0 pt-7 rounded-0">Shop Sale<i class="far fa-arrow-right fs-12 pl-1"></i></a>
</div>
</div>
</div>
</section>
<section id="section-04" style="background-image: url('../../../images/scroll-navigation-04.jpg');background-position: center;background-size: cover;" class="h-100vh py-11 d-flex align-items-center">
<div class="container container-xl">
<div class="row">
<div class="col-xl-5 offset-xl-7 col-lg-6 offset-lg-6 text-center">
<div class="fs-56 text-primary custom-font pb-4">Made for You!</div>
<h2 class="fs-68 font-weight-500 text-secondary">Be yourself more, do care more</h2>
<a href="#" class="btn btn-md btn-link text-secondary pb-1 border-0 border-2x border-bottom border-secondary px-0 pt-7 rounded-0">Discover Now<i class="far fa-arrow-right fs-12 pl-1"></i></a>
</div>
</div>
</div>
</section>
<section id="section-05" style="background-image: url('../../../images/scroll-navigation-05.jpg');background-position: center;background-size: cover;" class="h-100vh py-11 d-flex align-items-center">
<div class="container container-xl">
<div class="row">
<div class="col-xl-5 col-lg-6 text-center">
<div class="fs-56 text-primary custom-font pb-4">Get the Glow</div>
<h2 class="fs-68 font-weight-500 text-secondary">Save on sets</h2>
<a href="#" class="btn btn-md btn-link text-secondary pb-1 border-0 border-2x border-bottom border-secondary px-0 pt-7 rounded-0">Discover Now<i class="far fa-arrow-right fs-12 pl-1"></i></a>
</div>
</div>
</div>
</section>
</div>
