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 class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  ul{list-style:none;}
  a{text-decoration:none;}
@charset "utf-8";
/* CSS Document */
​
body {
    background-color:#333;
    background-attachment:fixed;
    background-position:center;
    background-repeat:repeat;
    margin: 0 auto;
    text-align:center;
    width:800px;
}
div {
        margin:0 auto;
}
.tri {
    width:400px;
    height:200px;
    margin:0 auto;
}
#one {
    background-color:#0F0;
}
#two {
    background-color:#00F;
}
#three {
    background-color:#F00;
}
.title {
    width:400px;
    height:100px;
}
.content {
    margin:0px;
}
#title {
    font-style:italic;
    font-size:72px;
    color:#0F0;
    text-align:center;
}
.prev {
    position:fixed;
    left:0;
    top:0;
    width:200px;
    height:100px;
    background-color:#000;
}
.next {
    position:fixed;
    right:0;
    top:0;
    width:200px;
    height:100px;
    background-color:#000;
}
p {
    font-size:48px;
    font-family:"Courier New", Courier, monospace;
    color:#FFF;
    margin:20px;
}
​
  
</style>
</head>
<body>
  
​
<div class="title"><p id="title">One</p></div>
<div class="prev"><p>Prev</p></div>
<div class="next"><p>Next</p></div>
  
<div class="tri" id="one" title="One"><p style="padding-top: 57.1429px;" class="content">Content One</p></div>
<div class="tri" id="two" title="Two"><p style="padding-top: 57.1429px;" class="content">Content Two</p></div>
<div class="tri" id="three" title="Three"><p style="padding-top: 57.1429px;" class="content">Content Three</p></div>
​
  
  
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers