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" />
    
    
    <!-- Utils -->
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    
    <!-- JQuery mix -->
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    
    <!-- backbone -->
    <script src="//jashkenas.github.io/underscore/underscore-min.js"></script>
    <script src="//jashkenas.github.io/backbone/backbone-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
    <!-- foundation -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
    
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    
  <header class="banner">
    <center></center>
  </header>
  <!-- Main Navi -->
  <div id="main-navi" class="contain-to-grid">
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name"></li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>
      <section class="top-bar-section">
        <!-- Left Nav Section -->
        <ul class="left">
          <li class="divider"></li>
          <!-- home Link -->
          <li class="active">
            <a href="#">Home</a>
          </li>
          <li class="divider"></li>
          <!-- Bulletin link -->
          <li class="not-click has-dropdown">
            <a href="#">Bulletin</a>
            <ul class="dropdown">
              <li><a href='#'>Announcements</a></li>
              <li><a href='#'>Current Projects</a></li>
              <li><a href='#'>Relevant Interests</a></li>
              <li><a href='#'>New Development</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <!-- community -->
          <li class="not-click has-dropdown">
            <a href="#">Community</a>
            <ul class="dropdown">
              <li><a href="#">General</a></li>
              <li><a href="#">Technical</a></li>
              <li><a href="#">Classified</a></li>
              <li><a href="#">Forums</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <!-- Documents/Reference -->
          <li class="not-click has-dropdown">
            <a href="#">Reference</a>
            <ul class="dropdown">
              <li><a href="#">Text Resources</a></li>
              <li><a href="#">Training</a></li>
              <li><a href="#">Deparment Contact</a></li>
              <li><a href="#">Support Request</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="not-click has-dropdown">
            <a href="#">About us</a>
            <ul class="dropdown">
              <li><a href="#">History</a></li>
              <li class='has-dropdown'><a href="#">Ideal</a>
                <ul class="dropdown">
                  <li><a href="#">History</a></li>
                  <li><a href="#">ideal</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="divider"></li>
        </ul>
        <ul class='right'>
          <li class="has-form">
            <div class="row collapse">
              <div class="large-8 columns">
                <input type="text" placeholder="Search"></input>
              </div>
              <div class="large-4 columns">
                <a href="#" class="alert button expand">Search</a>
              </div>
            </div>
          </li>
        </ul>
      </section>
    </nav>
  </div>
  <div class="row">
    <section>
      <h1>Home</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, delectus possimus necessitatibus alias est quo omnis sequi cupiditate consectetur praesentium id amet hic, dolorum blanditiis ut ipsum optio autem.</p>
    </section>
    <hr/>
    <section>
      <h3>Article</h3>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
  </div>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
kizzlebotpro
0viewers