Basic Page
Base page layout
<!-- BEGIN: Header Content -->
<header class="hro text-bg-light">
<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
<!-- [Navigation Area] -->
<nav class="kb-nav navbar kb-navbar-lg" ariaLabel="main" data-bs-theme="light">
<div class="container-xxl">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/vk-logo.png" class="brand-img-sm" alt="Vince Kotchian" width="150" height="40">
<img src="../../../../assets/img/vk-logo.png" class="brand-img-lg" alt="Vince Kotchian" width="150" height="40">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-end">
<li class="nav-item has-dropdown" data-content="nav_01_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Main Nav Item 1</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Main Nav Item 2</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_03_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Main Nav Item 3</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-cta">CTA Button</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="nav_01_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div id="nav_02_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
<div id="nav_03_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-layer"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_01_ItemsMenu" aria-expanded="false" aria-controls="nav_01_ItemsMenu">
Main Nav Item 1
</button>
</div>
<div id="nav_01_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
Main Nav Item 2
</button>
</div>
<div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_03_ItemsMenu" aria-expanded="false" aria-controls="nav_03_ItemsMenu">
Main Nav Item 3
</button>
</div>
<div id="nav_03_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">CTA Button</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
<div class="container-xxl hro-content sec-spacing">
<div class="row justify-content-center">
<div class="col-md-10 col-xl-8 text-center">
<!-- BEGIN: Header Content -->
<h1>Main Page Title (h1)</h1>
<p class="lead">Deleniti quia dicta ex facilis vero tempore molestias quam quod culpa! Cumque animi quibusdam quo voluptatibus fugiat possimus accusantium maiores quas, fugit officia vitae.</p>
<a href="#" class="btn btn-outline-primary btn-lg">CTA Button</a>
<!-- END: Header Content -->
</div>
</div>
</div>
</header>
<!-- BEGIN: Main Content -->
<main id="main-content" tabindex="0">
<section class="grd sec-spacing-lg">
<div class="container-xxl">
<div class="row gy-3">
<div class="col-md-12 col-xl-12">
<h2>h2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
<h3>h3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
<h4>h4 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
<h5>h5 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h5>
<h6>h6 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing, elit. Neque aliquam officiis laudantium laboriosam odit quae quas cumque dolorem, ducimus. Fuga debitis dicta nemo laborum, omnis accusantium, quia cum ratione deleniti.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ut labore est ratione ea excepturi aperiam nemo, ipsam obcaecati, officia id magnam quo, eaque. Qui, dolores optio, quae minus assumenda id quaerat praesentium, cupiditate voluptatum consectetur possimus ipsa, nostrum culpa.</p>
<p>Doloremque culpa harum, consectetur debitis unde ducimus, earum, dicta voluptas, alias aperiam tempore itaque adipisci rem similique a error. Voluptatum, nobis autem cum, cumque nulla nisi, explicabo ducimus dignissimos veniam neque culpa error soluta corporis aspernatur tempore ab illo iure.</p>
<p>Numquam labore corrupti quaerat dignissimos voluptatibus id est magnam tempore repellat tenetur, eos ipsum fugit soluta possimus! Eos, iusto architecto animi fugit sapiente molestiae repudiandae soluta quasi adipisci ullam, et! Sunt praesentium consequuntur ipsum, repellendus commodi, sapiente velit voluptas architecto.</p>
</div>
</div>
</div>
</section>
</main>
<!-- BEGIN: Footer Content -->
<footer class="fgr text-bg-dark sec-spacing-top-lg text-center text-xl-start">
<div class="container">
<div class="row gy-3 gx-3">
<div class="col-md-12 col-xl-2">
<!-- BEGIN: Footer Content -->
<img src="../../../../assets/img/vk-logo.png" alt="Vince Kotchian" class="img-fluid" height="181" width="300">
<hr>
<p>5230 Carroll Canyon Road, Suite 206<br>San Diego, CA 92121<br>tel: (760) 542-8395</p>
<ul class="list-social links-light">
<li><a href="#"><span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-linkedin" aria-hidden="true"></span><span class="visually-hidden">Linkedin</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-youtube" aria-hidden="true"></span><span class="visually-hidden">Youtube</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">x-twitter</span>
</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3 ms-auto">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links links-light small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links links-light small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links links-light small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-12 col-xl-12 d-flex justify-content-between small">
<!-- BEGIN: Footer Content -->
<p>© 2024 Konsoka</p>
<p><a href="#" class="text-white">Privacy Notice</a></p>
<!-- END: Footer Content -->
</div>
</div>
</div>
</footer>
<!-- BEGIN: End Page Content -->