Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie11 lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie11 lt-ie10 lt-ie9 lt-ie8 " lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie11 lt-ie10 lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie11 lt-ie10" lang="en"> <![endif]-->
<!--[if IE 10]>         <html class="no-js lt-ie11" lang="en"> <![endif]-->
<!--[if gt IE 10]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.0/css/normalize.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.0/css/foundation.min.css">
  <!--[if lt IE 9]>
  <style>
    /* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
​
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
​
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
​
.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }
​
.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }
​
.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }
​
.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }
​
.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }
​
.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }
​
.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }
​
.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }
​
.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }
​
.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }
​
.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }
​
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
​
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
​
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
​
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
​
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }
  </style>
  <![endif]-->
  <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="//builds.emberjs.com/tags/v1.8.1/ember.js"></script>
</head>
<body>
  <script type="text/x-handlebars">
    <nav class="row">
      <div class="columns">
        <ul class="inline-list">
          <li>Home</li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
      </div>
    </nav>
    
    <header class="row">
      <div class="large-3 columns">
        <img src="http://dummyimage.com/320x200/999/fff.jpg&text=Logo" alt="Logo">
      </div>
      
      <div class="large-9 columns">
        <h3>Welcome to the Site</h3>
        
        <p>
          Blah blah, something site is cool. You should buy our stuff because xyz, best ever, makes you cool.
        </p>
      </div>
    </header>
    
    <main class="row">
      {{outlet}}
    </main>
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
      <div class="large-9 columns">
        <p>
          Main content here
        </p>
      </div>
      
      <div class="large-3 columns">
        <h4>Sidebar</h4>
        
        <ul>
          <li>Popular post</li>
          <li>New stuff</li>
          <li>Fan favorites</li>
        </ul>
      </div>
  </script>
  
  <!--[if lt IE 9]>
    <script src="//vikingglory.com/js/rem.min.js"></script>
  <![endif]-->
</body>
</html>
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers