<html>
<head>
<script src="http://zeptojs.com/zepto.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="nav">
</div>
<div class="regform closed">
<form action="#">
<span>
<input type="text" placeholder="user">
</span>
<span>
<input type="password" placeholder="password">
</span>
</form>
<a href="#" onclick="$('.regform').toggleClass('closed'); return false">Вход</a>
</div>
<div class="logo">
<h1>Xandra </h1>
<h2>Lorem ipsum dolor uno momento</h2>
<img src="http://storage8.static.itmages.ru/i/14/1229/h_1419867751_3295095_fd0a0b4342.jpg" height="496px" />
</div>
<div class="row">
<div class="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in semper nulla. Praesent et ornare purus, auctor placerat dui. Quisque tincidunt est tortor, vitae sodales nibh pretium quis. Duis dolor enim, feugiat vel sem sed, luctus finibus mi. Mauris aliquam hendrerit varius. Nam nec tortor tempor magna varius maximus vel sit amet elit. Maecenas vitae arcu quis erat posuere hendrerit vel at odio. Curabitur luctus augue risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc leo lorem, aliquam sed ante at, tempus posuere metus. Vestibulum lobortis risus quis suscipit dapibus.
</p>
<p>
Aenean finibus diam et auctor semper. Duis nec rhoncus orci, quis suscipit dolor. Duis luctus nec felis id luctus. Quisque viverra tempus augue eu ullamcorper. Mauris vel aliquam nulla. Fusce semper ligula urna, quis pharetra lacus pretium at. Cras vitae felis quam. Sed elementum maximus nibh eu aliquam. Sed at risus mi. Cras a ligula convallis, consectetur erat id, fermentum nulla.
</p>
Vestibulum semper auctor enim, eget facilisis nibh venenatis sit amet. Praesent consectetur vehicula tempor. Phasellus volutpat eu nisl a viverra. Morbi in eros molestie, scelerisque tellus at, pulvinar sem. Vivamus maximus posuere porttitor. Sed bibendum, tortor in lacinia eleifend, enim nibh pretium arcu, non pulvinar turpis augue eu quam. Vestibulum facilisis, metus et imperdiet pellentesque, nisi lorem faucibus nisi, nec egestas augue lacus vitae quam. Aenean rhoncus odio quis dolor congue, sit amet blandit massa commodo. Sed sit amet nisi blandit, tristique elit id, placerat mauris.
Mauris a velit sed tellus malesuada ultricies. Suspendisse posuere nunc dui, vel laoreet est dapibus vel. Donec scelerisque fermentum lorem nec ultricies. Nulla condimentum convallis lacus. Donec eu felis dapibus, lacinia arcu ac, tempor urna. Suspendisse feugiat magna justo, at auctor ante interdum nec. Nullam dapibus consequat tellus, a porttitor libero mattis et. Nullam turpis felis, tristique vel eleifend vitae, volutpat in odio. Sed nibh libero, ullamcorper placerat suscipit ac, tempor sed mauris. Fusce pretium enim at est feugiat, hendrerit tempor odio semper. Nam id sapien fringilla, lobortis dolor nec, pulvinar est. Morbi viverra varius risus, at auctor ante ultrices ac. Vivamus ac massa iaculis, finibus mi consequat, maximus turpis. Sed eleifend dui a orci viverra, at consequat urna maximus.
Duis ornare elit est, non laoreet velit vestibulum vel. Fusce eu commodo risus. Donec a augue imperdiet arcu commodo malesuada. Duis dapibus velit in lacus ultrices, vel rhoncus leo volutpat. Cras dapibus velit lorem, at tincidunt massa aliquam a. Aliquam bibendum sapien quis ligula egestas, eu volutpat diam pharetra. Praesent ipsum tortor, cursus vel vulputate ac, vulputate sed ligula. Vestibulum maximus ultrices metus et fringilla. Praesent ut purus pulvinar, finibus erat eu, maximus neque.
Nulla vulputate ullamcorper orci. Aenean pretium commodo tellus. Etiam condimentum vulputate mauris, sed venenatis ante ornare eget. Mauris mattis iaculis metus, eget tempus enim condimentum bibendum. Nunc ornare risus eros. Mauris at tellus molestie, hendrerit massa non, sagittis diam. Fusce feugiat felis ligula, vestibulum faucibus elit finibus id. Maecenas scelerisque malesuada mi a lacinia. Integer sed facilisis ante, vel mattis massa. Ut commodo ipsum id nibh semper, non viverra nisi porta.
Vivamus ex mi, dapibus vitae justo a, sagittis lobortis sem. Duis ligula eros, pellentesque ac congue nec, gravida pharetra nisl. Donec leo justo, condimentum ut accumsan sed, rhoncus nec ante. Sed eget laoreet ligula. Aliquam sapien justo, interdum sed laoreet vel, laoreet iaculis velit. Etiam faucibus ornare elementum. Pellentesque eget placerat eros. Integer tristique est libero. Phasellus id bibendum dui. In hac habitasse platea dictumst.
Nunc commodo diam eu velit congue viverra sit amet vel metus. Fusce neque est, sollicitudin sit amet convallis ac, venenatis ut est. Vivamus interdum, ex nec congue molestie, quam dolor mattis lectus, eu rhoncus mi sem at elit. Suspendisse at auctor enim, eu vehicula odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec malesuada tortor quis porta fermentum. Nunc rutrum pulvinar lorem, sit amet imperdiet sapien laoreet sit amet. In vel venenatis magna. Integer ante tellus, efficitur ac sem at, scelerisque scelerisque arcu. Sed elementum, eros quis scelerisque lacinia, leo lacus vestibulum leo, sed porttitor elit ante eu lectus.
Mauris ac lobortis eros, quis viverra augue. Aenean tempor posuere quam vitae blandit. Vivamus id finibus justo. Fusce vehicula pretium imperdiet. Aliquam sollicitudin aliquet orci, semper ullamcorper turpis feugiat at. Etiam sapien purus, porttitor vitae eleifend vitae, euismod quis leo. Mauris congue sem non viverra dictum. Morbi tristique urna eget cursus convallis.
Ut nulla ex, pulvinar ut felis vitae, scelerisque aliquam nisi. Nullam ultrices erat nec enim lacinia ultrices. Proin iaculis aliquam porta. Etiam non molestie orci. Vivamus scelerisque urna nec nunc pellentesque ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eros mauris, rutrum et dignissim eu, gravida in urna. Sed accumsan auctor justo at rutrum. Maecenas eu pellentesque purus. Proin et pellentesque orci, eu auctor tortor. Nam molestie, sapien vel cursus molestie, turpis velit rutrum ligula, sed iaculis lorem libero a lorem. Nam auctor vitae lorem dignissim lobortis. Proin finibus ut ante ut placerat.
Curabitur accumsan dapibus risus non euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis porta ipsum diam, sed mollis arcu aliquet in. Aenean convallis in neque sit amet mollis. Donec faucibus, enim congue pretium ultrices, ante metus facilisis elit, vel pretium nulla quam vitae orci. Vivamus molestie fermentum tristique. Pellentesque magna orci, interdum eu accumsan in, tincidunt eu urna.
Curabitur gravida ultrices purus id elementum. Curabitur in elit urna. Praesent pellentesque urna auctor urna volutpat tempor. Fusce cursus est nisi. Praesent quis nibh orci. Morbi porttitor orci at ligula vehicula, vel ornare sapien auctor. Fusce lobortis sit amet velit id commodo. Praesent mattis felis quis ligula semper, quis hendrerit dolor accumsan. Vestibulum vestibulum mauris venenatis tempus vehicula.
Maecenas ac ante sed sem sodales lacinia. Proin suscipit, sem ut egestas varius, orci augue dictum tortor, suscipit rhoncus felis nisi sed lorem. Maecenas vitae tortor velit. Curabitur tristique iaculis iaculis. Nullam quis neque nec sapien blandit gravida sit amet a nibh. Mauris ac aliquet ex. Sed porta semper malesuada. Etiam ultrices posuere magna sit amet blandit. In ac cursus augue. Aliquam erat volutpat. Fusce iaculis dictum quam vitae sodales. Maecenas fringilla cursus semper.
Aliquam sit amet rutrum magna, eu faucibus ipsum. Pellentesque sagittis eu velit eu euismod. Donec at urna tempus risus finibus maximus quis eleifend nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas at egestas nunc, ut rhoncus est. Maecenas nec quam lobortis, lacinia lectus eget, dapibus diam. Pellentesque pharetra placerat facilisis. Praesent ullamcorper dui at augue aliquam, nec euismod diam gravida.
Vestibulum vehicula ullamcorper tellus eget dapibus. In hac habitasse platea dictumst. Donec massa augue, tincidunt vitae suscipit eget, pellentesque quis sem. Ut vehicula enim non erat maximus, quis ullamcorper tellus congue. Fusce vitae diam nec turpis gravida posuere. Fusce placerat dolor suscipit vulputate tincidunt. Maecenas luctus, est quis suscipit gravida, libero eros dictum tellus, ut venenatis nibh quam nec leo. Fusce faucibus bibendum mi, id tincidunt nisl ornare bibendum. Nullam non consequat lectus. Cras mollis sagittis ipsum vitae aliquet. Mauris eu diam nibh.
</div>
<div class="navigate">
<h3>Навигация</h3>
Vestibulum vehicula ullamcorper tellus eget dapibus. In hac habitasse platea dictumst. Donec massa augue, tincidunt vitae suscipit eget, pellentesque quis sem. Ut vehicula enim non erat maximus, quis ullamcorper tellus congue. Fusce vitae diam nec turpis gravida posuere. Fusce placerat dolor suscipit vulputate tincidunt. Maecenas luctus, est quis suscipit gravida, libero eros dictum tellus, ut venenatis nibh quam nec leo. Fusce faucibus bibendum mi, id tincidunt nisl ornare bibendum. Nullam non consequat lectus. Cras mollis sagittis ipsum vitae aliquet. Mauris eu diam nibh.
</div>
</div>
<footer>
<div class="footer">1</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. |