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 8]>               <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
​
<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">
  <meta name="viewport" content="width=device-width">
  <title>Foundation 4</title>
​
  
  
​
</head>
<body>
​
    <div id="topnav">
        <div class="row">
            <div class="large-7 columns">
                <a href="#">Home</a>
                <a href="#">Today's Five</a>
                <a href="#">Categories</a>
                <a href="#">Newsletter</a>
            </div>
            <div class="large-5 columns hide-for-small">
                <span class="right">
                    <a href="#">Facebook</a>
                    <a href="#">Twitter</a>
                    <a href="#">RSS Feed</a>
                </span>
            </div>
        </div>
    </div>
    
  <div id="header">
    <div class="row">
        <div class="large-12 columns">
            <h2>Five A Day</h2>
            <h1>WEB DESIGN &amp; DEVELOPMENT</h1>
            <h3>News, articles &amp; tutorials&mdash;all in one place</h3>
        </div>
    </div>
  </div>
    
  <div class="row">
    <div class="large-8 columns" id="main_content">
      <h2>Today's Five</h2>
      <ul class="large-block-grid-2">
        <li>
          <h5>Coding a Dynamic IMDb Webapp using My Movie API</h5>
          <p>The online IMDb website is a crucial resource for any type of digital video media. Online web series, TV shows, and movies are all cataloged with credits to the cast and studio help. IMDb is probably the oldest resource for learning about your favorite shows or movies. In the spirit of building on top of […]</p>
          <a href="#" class="button radius">READ MORE</a>
        </li>
        <li>
          <h5>Cartoon Fundamentals: How to Draw a Cartoon Face Correctly</h5>
          <p>Children are the main audience when referring to the cartoons. A good cartoonist is one who can extract the main details of an object or a human being and simplify in shapes so that a child can recognize and be attracted to what they’re looking at. Was studying infant perception that masters like Walt Disney, […]</p>
          <a href="#" class="button radius">READ MORE</a>
        </li>
        <li>
          <h5>Review of Modulus for Node.js Hosting</h5>
          <p>Review of Modulus for Node.js Hosting I’m assuming (hoping at least), that most folks who read my blog entries here have also followed my recent articles on Nettuts+. A few weeks back I wrote about my experience of moving a Node.js site into production (“Going Live with Node”). In that article I spend most of […]</p>
          <a href="#" class="button radius">READ MORE</a>
        </li>
        <li>
          <h5>Kim Goodwin on Designing Culture</h5>
          <p>This article first appeared in issue 242 of .net magazine – the world’s best-selling magazine for web designers and developers. One company is known for its fabulous design. The other is known for its frustrating products. Both have terrific design teams, so how can this be? The answer pretty much always comes down to culture. […]</p>
          <a href="#" class="button radius">READ MORE</a>
        </li>
        <li>
          <h5>How to add iPhone links to WordPress (all smart phones)</h5>
          <p>OMG. The White iPhone! This will show you how to add iPhone links to WordPress so that clicking the link will call the number you decide. The method will also work for most modern smartphones including Android, Blackberry and even Skype if it’s installed. NOTE: Most smart phones automatically detect phone numbers on web pages […]</p>
          <a href="#" class="button radius">READ MORE</a>
        </li>
      </ul>
    </div>
    <div class="large-3 columns right" id="ad_sidebar">
        <div class="row">
            <div class="large-12 columns">
                <p id="contact_intro">OMG, I love what you guys are doing, and I want to work with you. Please get in touch with me ASAP!</p>
                <form class="custom">
                    <select id="contact_select">
                        <option value="select" class="selectlabel">Contact me via&hellip;</option>
                        <option value="email">Email</option>
                        <option value="phone">Phone</option>
                        <option value="sms">SMS</option>
                    </select>
                </form>
                
                <form class="hbd" id="email_opts">
                    <label>Email address</label>
                    <input type="email"/>
                    <label>Retype email address</label>
                    <input type="email"/>
                    <input type="submit" value="Submit" class="large-7 columns button small"/>
                    <input type="button" value="Cancel" class="large-4 columns right button small secondary"/>
                </form>
​
                <form class="hbd custom" id="phone_opts">
                    <label>Primary phone</label>
                    <select>
                        <option value="select" class="selectlabel">Select</option>
                        <option value="home">Home</option>
                        <option value="work">Work</option>
                        <option value="mobile">Mobile</option>
                    </select>
                    <label>Phone number</label>
                    <input type="tel"/>
                    <input type="submit" value="Submit" class="large-7 columns button small"/>
                    <input type="button" value="Cancel" class="large-4 columns right button small secondary"/>
                </form>
  
                <form class="hbd custom" id="sms_opts">
                    <label>Mobile provider</label>
                    <select>
                        <option value="select" class="selectlabel">Select</option>
                        <option value="cellcom">Cellcom</option>
                        <option value="orange">Orange</option>
                        <option value="pelephone">Pelephone</option>
                    </select>
                    <label>Mobile number</label>
                    <input type="tel"/>
                    <input type="submit" value="Submit" class="large-7 columns button small"/>
                    <input type="button" value="Cancel" class="large-4 columns right button small secondary"/>
                </form>
​
                
                <hr/>
            </div>
        </div>
        <div class="row hide-for-small">
            <div class="large-12 columns">
                <div class="ad_container">
                    <h5>An ad</h5>
                    <img src="http://placehold.it/220x150"/>
                    <p>Blah, blah, yadda, yadda.</p>
                </div>
                <div class="ad_container">
                    <h5>An ad</h5>
                    <img src="http://placehold.it/220x150"/>
                    <p>Blah, blah, yadda, yadda.</p>
                </div>
                <div class="ad_container">
                    <h5>An ad</h5>
                    <img src="http://placehold.it/220x150"/>
                    <p>Blah, blah, yadda, yadda.</p>
                </div>
                <div class="ad_container">
                    <h5>An ad</h5>
                    <img src="http://placehold.it/220x150"/>
                    <p>Blah, blah, yadda, yadda.</p>
                </div>
                <div class="ad_container">
                    <h5>An ad</h5>
                    <img src="http://placehold.it/220x150"/>
                    <p>Blah, blah, yadda, yadda.</p>
                </div>
            </div>
        </div>
    </div>
  </div>
  
    <div id="footer">
    <div class="row">
        <div class="large-2 column">
            <h4>Categories</h4>
        </div>
        <div class="large-3 columns">
            <input type="search"/>
        </div>
        <div class="large-7 columns">
            <a href="#" class="button small radius">Search</a>
        </div>
    </div>
    <div class="row">
        <div class="large-3 columns">
            <ul>
                <li><a href="#">Accessibility</a></li>
                <li><a href="#">AJAX</a></li>
                <li><a href="#">Android</a></li>
                <li><a href="#">Animation</a></li>
                <li><a href="#">Bootstrap</a></li>
                <li><a href="#">Browsers</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#">Code</a></li>
                <li><a href="#">Code Editor</a></li>
                <li><a href="#">Concrete5</a></li>
                <li><a href="#">Conferences</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </div>
        <div class="large-3 columns">
            <ul>
                <li><a href="#">Design</a></li>
                <li><a href="#">Drupal</a></li>
                <li><a href="#">eCommerce</a></li>
                <li><a href="#">Email</a></li>
                <li><a href="#">Expression Engine</a></li>
                <li><a href="#">Frameworks</a></li>
                <li><a href="#">Hardware</a></li>
                <li><a href="#">Hosting</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">Illustration</a></li>
                <li><a href="#">iOS</a></li>
                <li><a href="#">Javascript</a></li>
            </ul>
        </div>
        <div class="large-3 columns">
            <ul>
                <li><a href="#">Joomla</a></li>
                <li><a href="#">LESS/SASS</a></li>
                <li><a href="#">Magento</a></li>
                <li><a href="#">Marketing</a></li>
                <li><a href="#">Mobile</a></li>
                <li><a href="#">MODx</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Parallax</a></li>
                <li><a href="#">Perch</a></li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Responsive Design</a></li>
                <li><a href="#">Retina</a></li>
            </ul>
        </div>
        <div class="large-3 columns">
            <ul>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Social Networking</a></li>
                <li><a href="#">Software</a></li>
                <li><a href="#">Tumblr</a></li>
                <li><a href="#">Typography</a></li>
                <li><a href="#">UI</a></li>
                <li><a href="#">Video</a></li>
                <li><a href="#">Wireframing</a></li>
                <li><a href="#">Wordpress</a></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <hr/>
        <div class="large-3 columns">
            <span>&copy; 2013 | <a href="#">Contact</a></span>
        </div>
        <div class="large-3 columns large-offset-6">
            <span class="right">
                <img src="http://placehold.it/30x30&text=twitter">
                <img src="http://placehold.it/30x30&text=facebook">
                <img src="http://placehold.it/30x30&text=rss">
            </span>
        </div>
    </div>
    </div>
​
​
​
​
  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  
    <script src="js/4min.js"></script>
​
  <!--
  
  <script src="js/foundation/foundation.js"></script>
  
  <script src="js/foundation/foundation.alerts.js"></script>
  
  <script src="js/foundation/foundation.clearing.js"></script>
  
  <script src="js/foundation/foundation.cookie.js"></script>
  
  <script src="js/foundation/foundation.dropdown.js"></script>
  
  <script src="js/foundation/foundation.forms.js"></script>
  
  <script src="js/foundation/foundation.joyride.js"></script>
  
  <script src="js/foundation/foundation.magellan.js"></script>
  
  <script src="js/foundation/foundation.orbit.js"></script>
  
  <script src="js/foundation/foundation.reveal.js"></script>
  
  <script src="js/foundation/foundation.section.js"></script>
  
  <script src="js/foundation/foundation.tooltips.js"></script>
  
  <script src="js/foundation/foundation.topbar.js"></script>
  
  <script src="js/foundation/foundation.interchange.js"></script>
  
  <script src="js/foundation/foundation.placeholder.js"></script>
  
  <script src="js/foundation/foundation.abide.js"></script>
  
  -->
  
  <script>
    $(document).foundation();
  </script>
</body>
</html>
​
 
#topnav {
    background: #000000;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
​
#topnav a {
    padding-right: 1rem;
    color: #FFFFFF;
    text-decoration: underline;
}
​
#topnav span.right a {
    padding-right: 0;
    padding-left: 1rem;
}
​
#header {
    background-color: #222222;
    padding: 1rem 0;
}
​
#header h1, #header h2, #header h3 {
    text-align: center;
    color: #FFFFFF;
}
​
.selectlabel {
    font-style: italic !important;
    color: #6D6D6D !important;
}
​
p#contact_intro {
padding-top: 2rem;
}
​
.hbd {
    display: none;
}
​
#footer {
    background-color: #000000;
    padding: 2rem 0;
    color: #FFFFFF;
}
​
#footer h4  {
    color: #FFFFFF;
}
​
#footer input {
    margin-top: 8px;
}
​
#footer a.button {
    margin-top: 8px;
    text-decoration: none;
}
​
#footer a {
    color: #FFFFFF;
    text-decoration: underline;
}
​
#footer li {
    list-style-position: inside;
    color: #FFFFFF;
}
 
$(document).ready(function(){
    /* Depending on the value selected in the drop-down list,
       show the appropriate form and hide the others. */
    $('select#contact_select').change(function(){
        switch ($(this).val()) {
            case 'email':
                $('#email_opts').show();
                $('#phone_opts').hide();
                $('#sms_opts').hide();
                break;
            case 'phone':
                $('#email_opts').hide();
                $('#phone_opts').show();
                $('#sms_opts').hide();
                break;
            case 'sms':
                $('#email_opts').hide();
                $('#phone_opts').hide();
                $('#sms_opts').show();
                break;
            default:
                $('#email_opts').hide();
                $('#phone_opts').hide();
                $('#sms_opts').hide();
        }
    });
});
Output

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

Dismiss x
public
Bin info
martinpolleypro
0viewers