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/konsoka.svg" class="brand-img-sm" alt="Konsoka" width="150" height="40">
<img src="../../../../assets/img/konsoka.svg" class="brand-img-lg" alt="Konsoka" 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>
<!-- END: Header Content -->
</div>
</div>
</div>
</header>
<!-- BEGIN: Main Content -->
<main id="main-content" tabindex="0">
<div class="sec-breadcrumbs">
<div class="container-xxl">
<div class="row">
<div class="col">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Section 1</a></li>
<li class="breadcrumb-item"><a href="#">Section 2</a></li>
<li class="breadcrumb-item active" aria-current="page">Active Page</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<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-secondary 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/konsoka.svg" alt="Konsoka" class="img-fluid" height="181" width="300">
<hr>
<p>123 Main Street,<br>Portsmouth, NH 03803<br>tel: 555-123-4545</p>
<ul class="list-social fs-5">
<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 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 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 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="#">Privacy Notice</a></p>
<!-- END: Footer Content -->
</div>
</div>
</div>
</footer>
<!-- BEGIN: End Page Content -->
<!-- BEGIN: Header Content -->
<header class="hro text-bg-light">
<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
<!-- [Navigation Area] -->
<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>
<!-- END: Header Content -->
</div>
</div>
</div>
</header>
<!-- BEGIN: Main Content -->
<main id="main-content" tabindex="0">
<section class="flm-section flm-hero text-bg-primary sec-spacing" style="">
<div class="container section-content">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-xl-8 text-center">
<!-- BEGIN: Section Content -->
<h4 class="display-5">Lorem ipsum dolor sit amet</h4>
<a href="#" class="btn btn-outline-light btn-lg">CTA Button</a>
<!-- END: Section Content -->
</div>
</div>
</div>
<div class="overlay"></div>
</section>
</main>
<!-- BEGIN: Footer Content -->
<footer class="fgr sec-spacing- text-bg-dark">
<div class="container">
<div class="row">
</div>
</div>
</footer>
<!-- BEGIN: End Page Content -->