<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3 Boxes</title>
<meta name="description" content="">
<meta name="author" content="ink, cookbook, recipes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Place favicon.ico and apple-touch-icon(s) here -->
<link rel="shortcut icon" href="http://cdn.ink.sapo.pt/3.1.0/img/favicon.ico">
<!-- load inks css from the cdn -->
<link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.0/css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.1.0/css/font-awesome.min.css">
<!-- load inks css for IE8 -->
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="http://cdn.ink.sapo.pt/3.1.0/css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<![endif]-->
<!-- test browser flexbox support and load legacy grid if unsupported -->
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.0/js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.flexbox,
nope : 'http://cdn.ink.sapo.pt/3.1.0/css/ink-legacy.min.css'
});
</script>
<!-- load inks javascript files from the cdn -->
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.0/js/holder.js"></script>
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.0/js/ink-all.min.js"></script>
<script type="text/javascript" src="http://cdn.ink.sapo.pt/3.1.0/js/autoload.js"></script>
<style type="text/css">
body {
background: #ededed;
}
header h1 small:before {
content: "|";
margin: 0 0.5em;
font-size: 1.6em;
}
footer {
background: #ccc;
}
</style>
</head>
<body>
<div class="ink-grid">
<!--[if lte IE 9 ]>
<div class="ink-alert basic" role="alert">
<button class="ink-dismiss">×</button>
<p>
<strong>You are using an outdated Internet Explorer version.</strong>
Please <a href="http://browsehappy.com/">upgrade to a modern browser</a> to improve your web experience.
</p>
</div>
-->
<!-- Add your site or application content here -->
<header class="vertical-space">
<h1>site name<small>smaller text</small></h1>
<nav class="ink-navigation">
<ul class="menu horizontal black">
<li class="active"><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</nav>
</header>
<div class="column-group gutters">
<div class="all-100">
<h2>heading</h2>
<img src="holder.js/1650x928/auto/ink" alt="">
</div>
</div>
<div class="column-group gutters">
<div class="all-50 small-100 tiny-100">
<h3>heading</h3>
<img src="holder.js/1200x600/auto/ink" alt="">
<p class="quarter-top-space">"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."</p>
</div>
<div class="all-50 small-100 tiny-100">
<h3>heading</h3>
<img src="holder.js/1200x600/auto/ink" alt="">
<p class="quarter-top-space">"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."</p>
</div>
</div>
</div>
<footer class="clearfix">
<div class="ink-grid">
<ul class="unstyled inline half-vertical-space">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<p class="note">Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.</p>
</div>
</footer>
</body>
</html>
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |