Recipe Page
Displays a list of ingreedients and set of instructions that to prepare or make a dish.
<header class="hro hro-recipe hro-img bg-pos-bc bg-pos-xl-bc" style="--kb-bgimg-xs: url('../img/bg_yellow_wave@xs.jpg'); --kb-bgimg-md: url('../img/bg_yellow_wave@md.jpg'); --kb-bgimg-xl: url('../img/bg_yellow_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-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 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>
<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>
<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>