Advertisement
kevjonesin

jsbin.com 'Welcome' HTML

May 18th, 2014
282
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
  5. <meta charset=utf-8 />
  6. <title>Welcome to JS Bin</title>
  7. <meta name="viewport" content="width=device-width">
  8. <link href='http://fonts.googleapis.com/css?family=Doppio+One' rel='stylesheet' type='text/css'>
  9. <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  10. </head>
  11.  
  12. <body>
  13.  
  14.   <div class="wrapper">
  15.    
  16.     <img id="dave" src="http://static.jsbin.com/images/logo.png" alt="Dave, the JS Bin bot">
  17.    
  18.     <div id="welcome">
  19.       <h1>Welcome to JS Bin!</h1>
  20.       <p class="bubble"><strong>Hello</strong>, I'm <em><strong>Dave</strong> the <strong>JS Bin</strong> bot</em>. <br/>JS Bin is a JavaScript, HTML and CSS playground. If you want to experiment, learn or help your friends with a problem, then JS Bin is for you.<br/>Have a play and build something <strong>cool</strong> &mdash; and don't forget to <a target="_blank" href="http://twitter.com/js_bin">follow me on Twitter</a>!<small id="message">Oh, and please don't click on, I get rather dizzy...</small></p>
  21.       <h2>Here's just a few of the things I can do:</h2>
  22.     </div>
  23.    
  24.     <div id="features">
  25.       <ol>
  26.         <li><h2>Saving</h2>As you type, HTML, CSS &amp; JavaScript is automagically rendered <em>live</em> in this window. I'll save the bin for you too <em>as you type</em>.</li>
  27.         <li><h2>History</h2>If you're <a class="open" href="http://jsbin.com/welcome/edit?html,live#register">registered</a> and logged in, I'll remember all your bins and give you a nice complete list with quick previews.</li>
  28.         <li><h2>Sharing</h2>You can share bins, but the output is automatically refreshed as you edit this page. You can also embed and <a class="open" href="http://jsbin.com/welcome/edit?html,live#share">do other cool stuff</a>.</li>
  29.       </ol>
  30.     </div>
  31.    
  32.     <div id="next">
  33.       <div>
  34.         <h2>Get meddling!</h2>
  35.         <p>Open the <a class="open" href="http://jsbin.com/welcome/edit?css,live#css">CSS</a> panel and try changing things about! You'll see this window update <em>live</em> (and get your own unique copy of this <em>bin</em> right away).</p>
  36.         <p>You won't see this message again by default, but if you do want a reminder, you can either use the <a class="open" href="#helpmenu">help</a> or visit <a href="http://jsbin.com/welcome/edit?html,live">jsbin.com/welcome</a>.</p>
  37.       </div>
  38.       <div>
  39.         <h2>How you can contribute</h2>
  40.         <p>JS Bin is an open source project available on <a href="http://github.com/remy/jsbin">github</a> with instructions on how to host it yourself.</p>
  41.         <p>If you're in the running workshops (or teaching to a much wider audience), you can get a custom skin and starting templates &ndash; like <a target="_blank" href="http://sebly.jsbin.com">this</a> one. Just <a target="_blank" href="http://leftlogic.com/contact">get in touch</a> and ask for Rem.</p>
  42.       </div>
  43.     </div>
  44.    
  45.   </div>
  46.  
  47. </body>
  48. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement