Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <!--                      -->
    <!-- navbar with dropdown -->
    <!--                      -->
    <div class="contain-to-grid sticky">
      <nav class="top-bar docs-bar">
        <section class="top-bar-section">
          <ul class="left">
            <li class="divider"></li>
            <li class="has-dropdown not-click">
              <a href="#">One</a>
              <ul class="dropdown">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li><li class="divider"></li>
            <li class="has-dropdown not-click">
              <a href="#">Two</a>
              <ul class="dropdown">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li><li class="divider"></li>
            <li class="has-dropdown not-click">
              <a href="#">Three</a>
              <ul class="dropdown">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li><li class="divider"></li>
            <li class="has-dropdown not-click">
              <a href="#">Four</a>
              <ul class="dropdown">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li><li class="divider"></li>
            <li class="has-dropdown not-click">
              <a href="#">Five</a>
              <ul class="dropdown">
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
              </ul>
            </li><li class="divider"></li>
            
            
          </ul>
          <ul class="right">
            <li class="has-form">
              <div class="row collapse">
                <div class="large-8 small-9 columns">
                  <input type="text" placeholder="Find Stuff">
                </div>
                <div class="large-4 small-3 columns">
                  <a href="#" class="alert button expand">Search</a>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </nav>
    </div>
    <section role="main" class="scroll-container">
      <div class="row">
        <div class="large-3 medium-4 columns">
          <div>words</div>
        </div>
        <div class="large-9 medium-8 columns">
          <h1 id="global-styles">Global Styles</h1>
          <h3 class="subheader">Every Foundation project needs to include these global styles in order to work properly. These include things like basic formatting and global utility classes.</h3>
          <hr>
          <h4>SCSS</h4>
        </div>
        </body>
      </html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kizzlebotpro
0viewers