Recipe Page
Displays a list of ingreedients and set of instructions that to prepare or make a dish.
<!-- BEGIN: Header Content -->
<header class="hro hro-recipe hro-img bg-pos-bc bg-pos-xl-bc" style="--kb-bgimg-xs: url('../img/fpo/fpo-21-9_wave@xs.jpg'); --kb-bgimg-md: url('../img/fpo/fpo-21-9_wave@md.jpg'); --kb-bgimg-xl: url('../img/fpo/fpo-21-9_wave@xl.jpg');">
<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
<!-- [Navigation Area] -->
<nav class="kb-nav navbar kb-navbar-lg 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/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-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</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Recipe</a>
</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>
<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</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Recipe</a>
</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-top sec-spacing-offset-lg">
<div class="row g-0">
<div class="col-md-6 col-xl-6 text-start">
<!-- BEGIN: Header Content -->
<div class="recipe-category">Seasonal</div>
<h1>Tasty Overstuffed Mushrooms</h1>
<div class="header-divider"></div>
<p>Repellat a tenetur aliquid rem placeat distinctio quae beatae facilis, quod saepe consequuntur, quaerat aut at voluptas similique! Debitis, consectetur ullam est sit optio natus ipsa repellat.</p>
<div class="hero-recipe-widgets">
<div class="cooktime-widget">
<span class="fa-solid fa-clock fs-4" aria-hidden="true"></span>
<span class="widget-value">10 min prep</span>
</div>
<div class="share-widget">
<span class="widget-label">Share:</span>
<a href="#" class="btn btn-outline-light"><span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
</a>
<a href="#" class="btn btn-outline-light"><span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">X Twitter</span>
</a>
</div>
</div>
<!-- END: Header Content -->
</div>
<div class="col-md-6 col-xl-6 text-start">
<!-- BEGIN: Header Content -->
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,
../../../../assets/img//fpo/fpo-5-4@lg.jpg 960w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Recipe image description"
class="figure-img"
>
</figure>
<!-- END: Header Content -->
</div>
</div>
</div>
<div class="overlay bg-opacity-25"></div>
</header>
<!-- BEGIN: Main Content -->
<main id="main-content" tabindex="0">
<section class="grd sec-spacing-sm grd-recipe-info">
<div class="container-xxl">
<div class="row">
<div class="col-md-6 col-xl-6">
<div class="recipe-info">
<h2 class="h3">Ingredients:</h2>
<ul>
<li>24 (1 1/2 lbs.) 2-inch mushrooms</li>
<li>1/4 cup butter or margarine, melted</li>
<li>1 cup crushed Regular Potato Chips</li>
<li>2 green onions, sliced</li>
<li>2 tbsp. chopped parsley</li>
<li>2 tbsp. mayonnaise</li>
<li>1 clove garlic, crushed</li>
<li>Dash liquid hot pepper sauce</li>
<li>Paprika</li>
</ul>
</div>
</div>
<div class="col-md-6 col-xl-6">
<div class="recipe-info">
<h2 class="h3">Directions:</h2>
<ol>
<li>Remove and chop mushroom stems; set aside.</li>
<li>Brush mushroom caps with butter.</li>
<li>Arrange the mushroom caps round side down on a baking sheet.In a bowl, combine the mushroom stems, Herr's Potato chips, onions, and parsley.</li>
<li>Mix mayonnaise, garlic, and pepper sauce in a separate bowl.</li>
<li>Toss the sauce with the chip mixture & mound in mushroom caps.</li>
<li>Dust with paprika.</li>
<li>Bake in 375 oven for 8 to 10 minutes until head through.</li>
<li>Take out and let cool before serving. Serves 24.</li>
</ol>
</div>
</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/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>
<!-- 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>
<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>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</footer>
<!-- BEGIN: End Page Content -->