<!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>
<div class="row">
    <div class="page-title">
        <h2>Our Latest Brew Recipes</h2>

        <p>That's right, you can brew our brews at home. We don't care. Bring some in for us to try and we'll compare.
            If yours is better, we'll hire you. On the spot. No kidding. Just ask our brew master.</p>
    </div>
    <div class="large-12 small-12 columns">
        <table width="100%">
            <tr>
                <th>Beer Name</th>
                <th>Original Brew Date</th>
                <th>Style</th>
            </tr>
            <tr>

                <td><a href="brews/unabridged.html">Big Bad Brew</a></td>
                <td>June 2015</td>
                <td>Pilsner</td>
            </tr>
            <tr>
                <td>Big Bad Brew</td>
                <td>June 2015</td>
                <td>Pilsner</td>
            </tr>
            <tr>
                <td>Big Bad Brew</td>
                <td>June 2015</td>
                <td>Pilsner</td>
            </tr>
            <tr>
                <td>Big Bad Brew</td>
                <td>June 2015</td>
                <td>Pilsner</td>
            </tr>
            <tr>
                <td>Big Bad Brew</td>
                <td>June 2015</td>
                <td>Pilsner</td>
            </tr>
        </table>
    </div>
</div>

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