<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-primary mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-primary">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-white mb-0">Primary navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Primary Navbar -->
<!-- Tertiary Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-secondary mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-secondary">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-white mb-0">Secondary navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Secondary Navbar -->
<!-- Primary Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-tertiary mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-tertiary">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-white mb-0">Tertiary navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Tertiary Navbar -->
<!-- Danger Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-danger mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-danger">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-white mb-0">Danger navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Danger Navbar -->
<!-- Warning Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-warning mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-warning">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-white mb-0">Warning navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Warning Navbar -->
<!-- Info Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-info mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-info">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-white mb-0">Info navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Info Navbar -->
<!-- Success Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-success mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-success">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-white mb-0">Success navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Success Navbar -->
<!-- Dark Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark navbar-theme-dark mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-dark">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-light mb-0">Dark navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Dark Navbar -->
<!-- Light Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-light mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-light">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-dark mb-0">Light navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of Light Navbar -->
<!-- White Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent navbar-light navbar-theme-white mb-4">
<div class="container position-relative">
<a class="navbar-brand mr-lg-5" href="../../index.html">
<img class="navbar-brand-dark" src="../../img/brand/light.svg" alt="menuimage">
<img class="navbar-brand-light" src="../../img/brand/dark.svg" alt="menuimage">
</a>
<div class="navbar-collapse collapse" id="navbar-white">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="../../index.html">
<img src="../../img/brand/secondary.svg" alt="menuimage">
</a>
</div>
<div class="col-6 collapse-close">
<i class="fas fa-times" data-toggle="collapse" role="button"
data-target="#navbar-primary" aria-controls="navbar-primary"
aria-expanded="false" aria-label="Toggle navigation"></i>
</div>
</div>
</div>
<ul class="navbar-nav navbar-nav-hover align-items-lg-center">
<li class="nav-item"><a href="#" class="nav-link">Account</a></li>
<li class="nav-item"><a href="#" class="nav-link">Profile</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" data-toggle="dropdown" role="button">
<i class="fas fa-angle-down nav-link-arrow"></i>
<span class="nav-link-inner-text">Settings</span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="../../html/sections/about.html">Action 1</a></li>
<li><a class="dropdown-item" href="../../html/sections/blog.html">Action 2</a></li>
<li><a class="dropdown-item" href="../../html/sections/clients.html">Action 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="d-flex align-items-center">
<p class="text-dark mb-0">White navbar</p>
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse"
data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
<!-- End of White Navbar -->
