<!-- Navbar Dark -->
<nav
class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3">
<div class="container">
<a class="navbar-brand text-white" href="https://demos.creative-tim.com/material-design-system-pro/index" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
Material Design System PRO
</a>
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a>
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Pages
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Account
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Blocks
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item dropdown dropdown-hover mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Docs
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
</ul>
<ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary mb-0 me-1" role="button">Buy Now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- Navbar Light -->
<nav
class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3">
<div class="container">
<a class="navbar-brand" href="https://demos.creative-tim.com/material-design-system-pro/index" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
Material Design System PRO
</a>
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a>
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Pages
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Account
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Blocks
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Docs
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
</ul>
<ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary mb-0 me-1" role="button">Buy Now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- Navbar Transparent -->
<nav
class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent">
<div class="container">
<a class="navbar-brand" href="https://demos.creative-tim.com/material-design-system-pro/index" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
Material Design System PRO
</a>
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button">
Pages
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button">
Account
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button">
Blocks
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button">
Docs
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
</ul>
<ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary mb-0 me-1" role="button">Buy Now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<!-- End Navbar -->
<!-- Navbar Light -->
<div class="container position-sticky z-index-sticky top-0 bg-gradient-primary min-vh-100">
<div class="row">
<div class="col-12">
<nav
class="navbar navbar-expand-lg blur border-radius-xl position-absolute my-3 top-0 border-bottom py-3 z-index-3 shadow my-3 py-2 start-0 end-0 mx-4">
<div class="container">
<a class="navbar-brand" href="https://demos.creative-tim.com/material-design-system-pro/index" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
Material Design System PRO
</a>
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a>
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Pages
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Account
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
Blocks
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center">
Docs
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1">
</a>
</li>
</ul>
<ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary mb-0 me-1" role="button">Buy Now</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
</div>
</div>
</div>