Basic Page
Base page layout
<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-xl nav-fixed" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-fluid">
<ul class="navbar-nav navbar-nav-user justify-content-split">
<li class="nav-item">
<a href="" class="nav-link">Special Promotion CTA Copy</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-solid fa-cart-shopping" aria-hidden="true"></span><span class="visually-hidden">Cart</span>
</a>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">Shop Now</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Featured</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Merch</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About Herr's</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Recipes</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-cta">Visit Us</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>
<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">
<a href="#" class="btn btn-accordion-link">Shop Now</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Featured</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Merch</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">About Herr's</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Recipes</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Visit Us</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
<div class="container-xxl hro-content sec-spacing-top sec-spacing-offset-lg">
<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>
<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">
<h1 class="display-1">Display Heading 1 Lorem ipsum</h1>
<h1 class="display-2">Display Heading 2 Lorem ipsum</h1>
<h1 class="display-3">Display Heading 3 Lorem ipsum</h1>
<h1 class="display-4">Display Heading 4 Lorem ipsum</h1>
<h1 class="display-5">Display Heading 5 Lorem ipsum</h1>
<h1 class="display-6">Display Heading 6 Lorem ipsum</h1>
<hr>
<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">Lead Paragraph - 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>
<ol>
<li>Ordered List - Lorem ipsum dolor sit amet consectetur.</li>
<li>Pariatur deserunt quasi vitae voluptatem sunt!</li>
<li>Optio odio dolorum vitae pariatur culpa.</li>
<li>Fugit, iure quae. Molestiae, nihil maiores.</li>
</ol>
<ul>
<li>Unordered List - Lorem ipsum dolor sit amet consectetur.</li>
<li>Sint, nam? Accusantium ex quibusdam in?</li>
<li>Deserunt natus ad dolorem magni quos.</li>
<li>Nemo error voluptatum necessitatibus laudantium maxime.</li>
</ul>
<ul class="list-unstyled">
<li>Unstyled List - Lorem ipsum dolor sit amet consectetur.</li>
<li>Mollitia libero iure quidem earum voluptate!</li>
<li>Fugit obcaecati exercitationem quod nulla ut?</li>
<li>Quam sunt unde mollitia id corrupti?</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<footer class="fgr sec-spacing-top herrs-footer">
<div class="fgr-section">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-3">
<!-- BEGIN: Footer Content -->
<img class="footer-logo" src="../../../../assets/img/herrs.png" alt="Herr's">
<p>271 Old Baltimore Pike <br>
Nottingham, PA 19362-9788</p>
<p>(610) 932-6400</p>
<ul class="list-social">
<li><a href="#"><span class="fa-brands fa-instagram" aria-hidden="true"></span><span class="visually-hidden">Instagram</span>
</a></li>
<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-youtube" aria-hidden="true"></span><span class="visually-hidden">Youtube</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-tiktok" aria-hidden="true"></span><span class="visually-hidden">Tiktok</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">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Our Company</p>
<ul class="link-list">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Values</a></li>
<li><a href="#">Leadership Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Contact Us</p>
<ul class="link-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sales & Distribution</a></li>
<li><a href="#">Media Outreach</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Resources</p>
<ul class="link-list">
<li><a href="#">Employees</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Business Review</a></li>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section footer-wave">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-12">
<!-- BEGIN: Footer Content -->
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section footer-secondary-links">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-12">
<!-- BEGIN: Footer Content -->
<ul class="link-list-horiz">
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">California Privacy Notice</a></li>
<li><a href="#">Notice of Financial Incentive</a></li>
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Refund Policy</a></li>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section subfooter">
<div class="container-xxl">
<div class="row justify-content-between align-items-center">
<div class="col-md-12 col-xl-auto text-white">
<!-- BEGIN: Footer Content -->
©Herr Foods Inc.
<!-- END: Footer Content -->
</div>
<div class="col-md-12 col-xl-auto">
<!-- BEGIN: Footer Content -->
Handcrafted by Flylight Media
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
</footer>