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 IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >
​
<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>
    <meta charset="utf-8">
    <!-- If you delete this meta tag World War Z will become a reality -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Coffee Site</title>
​
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
​
        <script src="js/vendor/modernizr.js"></script>
    <script src="js/slickini.js"></script>
</head>
<body>
<div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Coffee Site</a></h1>
        </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">
        <!-- Right Nav Section -->
        <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>
​
        <!-- Left Nav Section -->
        <ul class="left">
            <li class="has-dropdown">
                <a href="#">Left Button Dropdown</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>
<!---main content goes here-->
<div class="single-items">
    <div>
        <img src="http://wallpapercartoon.com/wp-content/uploads/2014/07/o-DOUG-facebook.jpg">
    </div>
​
    <div>
        <img src="http://img3.wikia.nocookie.net/__cb20130803215442/nickelodeon/images/e/e2/Tumblr_lvjvhxwDiM1r6hffko1_400.jpg">
    </div>
​
    <div>
        <img src="http://fc02.deviantart.net/fs70/f/2013/303/b/4/pork_chop_by_barontremaynecaple-d6sdm6s.jpg">
    </div>
</div>
​
​
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="js/vendor/jquery.js"></script>
​
​
<script>
    $(document).foundation();
</script>
</html>
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers