<!DOCTYPE html>
<html>
<head>
    <title>ForeSight Software & Systems</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/Images/Favicon/TS3.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/css")
    @RenderSection("individualCSS", required: false)
</head>
<body class="columnWrap spaceBetween">
        <header class="rowNoWrap spaceBetween centerItems">
            <h3 id="courseName">Brookfield Country Club</h3>
            <button type="button" class="burgerButton">
                <span class="burger"></span>
                <span class="burger"></span>
                <span class="burger"></span> 
            </button>
        </header>
        <article>
<div id="contentWrapper" class="columnWrap spaceBetween">
    <div id="content" class="columnNoWrap">
        <div class="redAndBrown rowNoWrap spaceBetween centerItems">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <h2>Water</h2>
            <a class="iconSize25 infoBubble_YellowRedDollarSign centerItems" href="#"></a>
            <span>$5.00</span>
        </div>
        <div class="redAndBrown rowNoWrap spaceBetween centerItems">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <h2>Budweiser</h2>
            <a class="iconSize25 infoBubble_YellowRedDollarSign centerItems" href="#"></a>
            <span>$2.00</span>
        </div>
        <div class="redAndBrown rowNoWrap spaceBetween centerItems">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <h2>Sport Drink</h2>
            <a class="iconSize25 infoBubble_YellowRedDollarSign centerItems" href="#"></a>
            <span>$5.00</span>
        </div>
        <div class="redAndBrown rowNoWrap spaceBetween centerItems">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <h2>Sleeve Golf Balls</h2>
            <a class="iconSize25 infoBubble_Blue centerItems" href="#"></a>
            <span>$5.00</span>
        </div>
    </div>


    <div id="pageFooter" class="columnWrap" >
        <a id="specials" class="redAndOrange rowNoWrap spaceAround centerItems" href="#">
            <div class="infoBubble_YellowRedDollarSign iconSize25"></div>
            <h2>Specials</h2>
            <div class="infoBubble_YellowRedDollarSign iconSize25"></div>
        </a>
        <a id="priorOrders" class="redAndGreen rowNoWrap spaceAround centerItems" href="#">
            <div class="iconSize25 tags_Purple centerItems"></div>
            <div><h2>Prior Orders</h2></div>
            <div class="iconSize25 tags_Purple centerItems"></div>
        </a>
    </div>
    </div>
        </article>
        <aside id="aside" class="adArea">Advertisement Banner</aside>
        <nav class="rowNoWrap spaceAround">
            <a href=""><div id="tagCupAndBurger_Active" class="iconSizeSmall"></div></a>
            <a href=""><div id="gpsTeeFlag_White"class="iconSizeSmall"></div></a>
            <a href=""><div id="scoreCard_White" class="iconSizeSmall"></div></a>
            <a href=""><div id="deliveryCar_White" class="iconSizeSmall"></div></a>
        </nav>
        <footer class="rowNoWrap flexEnd copyright">
            <p>
                <span>&copy; 2015</span>
                <span><a href="http://www.kevinbrasfield.com" target="_blank"><em>T<sub>S</sub><sup>3</sup></em> &reg;</a></span>
            </p>
        </footer>
</body>
</html>
* {
  margin: 0;
  padding: 0;
}

.flexWrapper {
  /* height: 19rem; */
  display: flex;
  flex-flow: row no-wrap;
  justify-content: flex-start;
  align-items: center;
}

.nonFlexRow {
  width: 90%;
  margin: 1rem;
}

.flexRow {
  flex: 0 1 auto;
  align-self: flex-end;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.