<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Crafty Brewery</title>
    <link rel="stylesheet" href="/bower_components/foundation/css/foundation.css"/>
    <link rel="stylesheet" href="/stylesheets/app.css"/>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="/bower_components/modernizr/modernizr.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Playfair+Display:700|Fauna+One|Pacifico' rel='stylesheet'
          type='text/css'>

</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="/"><span class="scripty">Crafty</span> Brewery</a></h1>
        </li>
        <li class="toggle-topbar menu-icon">
            <a href="#"><span>Menu</span></a>
        </li>
    </ul>
    <section class="top-bar-section">
        <ul class="right">
            <li><a href="#">About Crafty Brewery</a></li>
            <li class="has-dropdown">
                <a href="#">Our Beers</a>
                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a></li>
                    <li class="active"><a href="#">Active link in dropdown</a></li>
                </ul>
            </li>
            <li class="has-dropdown">
                <a href="#">Our Recipes</a>
                <ul class="dropdown">
                    <li><a href="#">First link in dropdown</a></li>
                    <li class="active"><a href="#">Active link in dropdown</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>
<ul class="breadcrumbs">
    <li><a href="">Recipes</a></li>
    <li>Unabridged Stout</li>
</ul>
<div class="row">
    <div class="large-9 small-12 columns">
        <div class="page-title">
            <h2>Unabridged Stout</h2>

            <h3>American Stout</h3>

            <p>Creamy, dark and velvety. This one you could have for both breakfast <em>and</em> dessert. Originally
                brewed: June 2015</p>
        </div>

        <div class="panel radius snapshot">
            <h3>Brew Snapshot</h3>
            <ul>
                <li>Difficulty: Experienced</li>
                <li>Time Required: 6 hours</li>
                <li>Cost: $$$</li>
                <li>Yield: 10 gallons</li>
            </ul>
        </div>
        <div class="photo-inset full"> <!-- full, left, right -->
            <img src="https://thepintpundits.files.wordpress.com/2013/02/dark-horse-tres-blueberry-stout-1.jpg"
                 alt=""/>

            <p class="caption">
                <small>Photo caption here</small>
            </p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur deleniti dignissimos est
            explicabo, iure laborum minima natus nihil qui repudiandae, velit voluptatum! Animi id illo illum in
            maiores velit?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur deleniti dignissimos est
            explicabo, iure laborum minima natus nihil qui repudiandae, velit voluptatum! Animi id illo illum in
            maiores velit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur deleniti
            dignissimos est explicabo, iure laborum minima natus nihil qui repudiandae, velit voluptatum! Animi id
            illo illum in maiores velit?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur deleniti dignissimos est
            explicabo, iure laborum minima natus nihil qui repudiandae, velit voluptatum! Animi id illo illum in
            maiores velit?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur deleniti dignissimos est
            explicabo, iure laborum minima natus nihil qui repudiandae, velit voluptatum! Animi id illo illum in
            maiores velit?</p>
        <table width="100%">
            <tr>
                <th width="20%">Amount</th>
                <th>Ingredient</th>
            </tr>
            <tr>
                <td>1 can</td>
                <td>Malt extract</td>
            </tr>
            <tr>
                <td>1 can</td>
                <td>Malt extract</td>
            </tr>
            <tr>
                <td>1 can</td>
                <td>Malt extract</td>
            </tr>
        </table>
        <div class="steps">
            <h4>Preparation</h4>
            <ol>
                <li>Something here</li>
                <li>Something else here</li>
            </ol>
        </div>
        <div class="photo-inset full"> <!-- full, left, right -->
            <img src="http://cruisenews.net/brewing/images/02VIII2004/274.jpg" alt=""/>

            <p class="caption">
                <small>Photo caption here</small>
            </p>
        </div>
        <div class="steps">
            <h4>Brewing</h4>
            <ol>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt laborum magni quia saepe
                    suscipit? Ad aspernatur assumenda dolores doloribus eum facere, illo itaque minima quo
                    repellat sit sunt ut voluptas?
                </li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at consequuntur dignissimos
                    distinctio dolor doloremque eius esse expedita iste itaque libero maiores modi odit
                    perferendis quam quidem, repudiandae, soluta ullam.
                </li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at consequuntur dignissimos
                    distinctio dolor doloremque eius esse expedita iste itaque libero maiores modi odit
                    perferendis quam quidem, repudiandae, soluta ullam.
                </li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at consequuntur dignissimos
                    distinctio dolor doloremque eius esse expedita iste itaque libero maiores modi odit
                    perferendis quam quidem, repudiandae, soluta ullam.
                </li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at consequuntur dignissimos
                    distinctio dolor doloremque eius esse expedita iste itaque libero maiores modi odit
                    perferendis quam quidem, repudiandae, soluta ullam.
                </li>
            </ol>
        </div>
        <div class="panel tip">
            <p>Don't forget to put some tip text here to point out something imporant!</p>
        </div>
        <div class="steps">
            <h4>Fermenting</h4>
            <ol>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam amet
                    consectetur consequatur cum, dicta ducimus expedita itaque mollitia odio placeat quae qui
                    quis quos soluta totam ut velit!
                </li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dolorem enim et, incidunt
                    laudantium praesentium quam quibusdam? A eos, illum. Cumque distinctio dolorum fugiat modi
                    neque odit quae quaerat vel.
                </li>
            </ol>
        </div>
        <div class="steps">
            <h4>Storing/Bottling</h4>
            <ol>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad aliquam amet
                    consectetur consequatur cum, dicta ducimus expedita itaque mollitia odio placeat quae qui
                    quis quos soluta totam ut velit!
                </li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus dolorem enim et, incidunt
                    laudantium praesentium quam quibusdam? A eos, illum. Cumque distinctio dolorum fugiat modi
                    neque odit quae quaerat vel.
                </li>
            </ol>
        </div>
        <div class="panel tip">
            <p>Don't forget to put some tip text here to point out something imporant!</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur deleniti dignissimos est
            explicabo, iure laborum minima natus nihil qui repudiandae, velit voluptatum! Animi id illo illum in
            maiores velit?</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur deleniti dignissimos est
            explicabo, iure laborum minima natus nihil qui repudiandae, velit voluptatum! Animi id illo illum in
            maiores velit?</p>
    </div>
</div>
<div class="row">
    <div class="footer">
        <p>Copyright 2015 Crafty Brewery, Inc. All rights reserved. Enjoy the brew!</p>
    </div>
</div>

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/foundation/js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>
</body>
</html>
