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>
<html lang="en"> 
  <head>
    <meta charset="utf-8">
    <title>Tim's first webpage</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
​
  <body>
    <div class="container">
      <h1>Hello World!</h1>
      <h2>My name is Tim.</h2>
      <p>This is a webpage that I made and coded on my own. Soon it will be an entire site with all sorts of cool things!</p>
      <form>
        <input type="submit" id="submit" value="Click here for a special message">
      </form>
    </div>
  </body>
</html>
 
body {
        background: #34495E;
        font-family: Helvetica, Verdana, sans-serif;
        font-size: 1.5em;
        color: #2C3E50;
      }
      .container {
        background: #FFF;
        max-width: 700px;
        margin: 1em auto;
        border-radius: 10px;
        padding: 20px;
      }
      h1 {
        color: #34495E;
        text-align: center;
        font-family: 'Lobster';
        font-weight: 300;
        font-size: 5em;
        margin: 0px;
      }
      h2 {
        color: #7F8C8D;
        text-align: center;
        font-family: 'Open sans';
      }
      p {
        color: #333;
      }
      form {
        text-align: center;
      }
      .btn {
        text-decoration: none;
        background: #3FB58E; 
        border: none; 
        color: #FFF; 
        padding: 0.5em; 
        font-size: 0.75em;
        display: inline-block;
        margin-top: 10px;
      }
      a.btn:hover {
        color: #333;
      }
      .blue {
        background: #3498DB;
      }
 
​
    $(document).ready(function() {
      $('#submit').click(function(event){
        event.preventDefault();
        alert("Hello world!");  
      });
    });
Output

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

Dismiss x
public
Bin info
millrt138pro
0viewers