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>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  </head>
  <body>
    <div id="index">
        <h2>Template One</h2>
        <div id="boxbutton">
          <span class="link"><span id="msg">Congrats! You found it with </span><span id="count">0</span> Try</span>
        </div>
        <div id="boxcard">
        </div>
    </div>
    <footer><p>Some Footer Text</p></footer>
  </body>
</html>
* { font-family: Arial, sans-serif; padding: 0; margin: 0; }
​
#index { margin: 0 auto; width: 700px; z-index: 1; }
#boxcard { float: left; }
    div[id^=wrapper] { width: 300px; height: 100px; background: #d9d9d9; margin: 5px; padding: 10px; border: 1px solid #999; cursor: pointer; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 1px 2px rgba(0,0,0,.5); display: inline-block; }
        p[class^=para] { display: block; float: left; color: #333; position: relative; }
        div[id^=wrapper] ul { float: left; margin: 10px; list-style: none; display: block; }
            a[id^=q] { clear: both; display:block; margin: 3px 0; }
    .hovered { background: #eaeaea; }
    .correct { background: #89FF29; }
​
#boxbutton { text-align: center; padding: 20px; }
    .link { font-size: 18px; color: #ffffff; text-decoration: none; background: #0066cc; padding: 5px 10px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; }
    .link.index { font-size: 24px; color: #ffffff; text-decoration: none; background: #0066cc; padding: 10px 15px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; margin-left: 180px; }
    .link:hover { background: #999; }
​
h2 { color: #0066cc; width: 300px; margin: 30px auto; }
footer p { color: #999; width: 525px; margin: 0 auto; margin-top: 30px; }
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers