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://code.jquery.com/jquery-1.7.1.min.js"></script>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      <title>Dead Centre</title>
  
 
​
​
​
      <style type="text/css" media="screen">
​
/*default*/
​
​
​
         * { margin: 0; }
         html {
         overflow-y: scroll;
         }
        body{
                min-width:280px;
        }
​
         a{
         text-decoration:none;
         color: rgb(0,51,51);
         }
         a:link {color: rgb(0,51,51); }
         a:visited { }
         a:hover { color: rgb(204,51,51);}
         a:active { color: rgb(204,51,51);}
         body{
         margin:0;
         padding:0;
         background-color: rgb(0,51,51);
        width:100%;
        height:100%;
         }
​
 
​
​
​
​
​
         h2{
         opacity:.2;
         font: 4.9em 'BebasRegular', Arial, sans-serif;letter-spacing: 0;
        text-transform:uppercase;
         text-align: center;
         margin-top:-.28em;
         color: rgba(0,51,51,1);
        display: block;
        text-shadow:
    
        gray -.06em .06em 0,
        white -2px 2px 0;
        
        
​
         }
​
         h3{
         font: 1.5em 'BebasRegular', Arial, sans-serif;letter-spacing: 0;
         letter-spacing:.03em;
         text-transform:uppercase;
​
         }
         h4{
         font:1em 'PetitaBoldRegular',Arial, sans-serif; letter-spacing: .1em;
         text-transform: uppercase;
         font-weight: 90;
        
        
​
         }
​
        .ui-tabs .ui-tabs-nav li {
    
        white-space: normal;
        }
​
​
/*end default*/
​
/*header*/
        #header{
            position:relative;
             width:100%;
            display:block;
​
            
​
​
        overflow:hidden;
         }
​
​
         #headwrapper{background: url('images/bars.gif') repeat-x; background-height: 100%;
        background-size:100% 80%;
        -moz-background-size:100% 80%; /* Firefox 3.6 */
        -webkit-background-size:100% 80%;
        -o-background-size:100% 80%;
        background-color:white;
        
        margin-bottom:-4%;
        
​
        }
​
    
    
    
        header{
         text-align: center;
​
         width:100%;
        display:block;
         margin:0px auto;
         background: url('images/erasers.png') no-repeat center top; 
        background-size:160% 80%;
        -moz-background-size:160% 80%; /* Firefox 3.6 */
        -webkit-background-size:160% 80%;
        -o-background-size:160% 80%;
​
​
         position:relative;
        overflow:hidden;
​
​
​
         }
    
    
    
        #graybar{
    
            background-image:url('images/h2bars.gif');
            width:100%;
            height:16%;
            position:absolute;
​
​
        }
​
​
​
        #logo{
            padding-bottom:4%;
            width:30%;
            position:relative;
            display:inline-block;
             z-index:3;
            margin-top:.5em;    
​
        }
​
        #bars{
            position:absolute;
            width:100%;
            height:75%;
            margin-top:.5em;
            z-index:1;
​
        }
​
​
​
    
    
​
    
        
        .char4 {
            letter-spacing: .4em;
            margin-right: -.107em;
        }
​
        .char1, .char2, .char3, .char4, .char5, .char6, .char7, .char8, .char9 {
            margin-right: .55em;
        }
        
        .char1{
            margin-left: .5em;
        }
        
        .char5, .char6, .char7, .char8, .char9{
            color: rgb(204,51,51);
        }
        
​
​
        /*end header*/  
​
            /*content*/
​
​
​
    
            /*nav*/
            
            #navwrapper{
                 width:100%;
            
            text-align:center;
                
​
            }
        
        .nav{
             display:inline-block;
                   
            
            /*float:right;*/
            
        }
​
        .nav li{
        display:inline-block;
        list-style: none;
        float:right;
​
        }
         .nav li img{
         margin-top: .35em;
        margin-right:.25em;
        margin-left:.25em;
        height:1.7em;
         }
         #tabs{
         /*background: url('images/bars_bottom.jpg') repeat-x;*/
         padding-top:.3em;
         margin:0px;
         }
​
​
​
        
​
​
​
​
        #subnavfront { 
            
            position: relative; 
    display: inline-block;  
    margin-left:-3em;
    margin-top:.25em;
    
​
​
    
    
    /*float:right;*/
    
​
        }
        #subnavfront li { 
            display: inline-block;  
            float:right;
            
        }
        #subnavfront a { 
            
            color: rgb(0,51,51); 
            margin: 0em .3em .7em .3em;
        display: block; 
            
        
​
​
        }
        #subnavfront a:hover { 
            color: rgb(204,51,51); 
        }
        #magic-line { 
            position: absolute;
            bottom: 3px; 
​
            width: 100px; 
            height: 3px; 
            background: rgb(204,51,51);
        }
        .current_page_item a { 
            color: rgb(204,51,51) !important; 
        }
        .ie6 #subnavfront li, .ie7 #subnavfront li { 
            display: inline; 
        }
        .ie6 #magic-line {
            bottom: -3px;
        }
        
    
    
   /*end nav*/     
        
​
        
​
        
​
​
​
         #main{
         background-color:white;
      
         padding-bottom:10em;
         position:relative;
         
         }
​
​
        #topbar{
            width:100%;
            height:.5em;
            
        
            background-color: rgb(0,51,51);
            
​
        }
        
        #bottombar{
​
               
            
              
                 background: url('images/erasers_bottom.png') no-repeat center top; 
                background-size:21em 1.75em;
                -moz-background-size:21em 1.75em; /* Firefox 3.6 */
                -webkit-background-size:21em 1.75em;
                -o-background-size:21em 1.75em;
​
​
            height:.5em;
            background-color: rgb(0,51,51);
            margin-top:-.5em;
        }
        
​
        
​
​
​
​
​
​
/*end content*/
​
        </style>
​
​
   </head>
   <body>
    
       <div id="header">
             <div id="headwrapper">
        
            
                <header>
​
                   <a href="#intro">
                      <h1><img id="logo" src="images/rocketdesign.png" alt="RocketDesign" /></h1>
                   </a>
    <div id="graybar">
    
        </div>
                   <a href="#intro" class="nategines">
                      <h2 id="fittext1">NateGines</h2>
                   </a>
    
                </header>
             </div>
          </div>
    
          <div id="main">
        <div id="topbar">
        </div>
      
             <div id="tabwrapper">
                <div id="tabs" class="group">
                    <div id="navwrapper">
                   <div id="navwidth" class="group">
                      <nav>
                         <ul class="nav" class="group">
                            <li>
                               <a href="#intro" id="introclick" rel="expand[header]"></a>
                            </li>
                            <li>
                               <a href="#contact" id="contactclick" class="hide" rel="expand[header]"><h3>Contact</h3></a>
                            </li>
                            <li><img src="images/star.png" alt="Star" /></li>
                            <li>
                               <a href="#about" id="aboutclick" class="hide" rel="expand[header]"><h3>About</h3></a>
                            </li>
                            <li><img src="images/star.png" alt="Star" /></li>
                            <li>
                               <a href="#work" id="workclick" rel="collapse[header]"><h3>Work</h3></a>
                            </li>
                         </ul>
                         <ul id="subnavfront" class="group">
​
​
                            <li>
                               <a href="#other" id="Otherfront" class="subnav">
                                  <h4>Other</h4>
                               </a>
                            </li>
​
                            <li>
                               <a href="#print" id="Printlinkfront" class="subnav">
                                  <h4>Print</h4>
                               </a>
                            </li>
​
                            <li>
                               <a href="#web" id="Weblinkfront" class="subnav">
                                  <h4>Web</h4>
                               </a>
                            </li>
​
                            <li class="current_page_item">
                               <a href="#campaign" id="Campaignlinkfront" class="subnav">
                                  <h4>Campaign</h4>
                               </a>
                            </li>
​
                         </ul>
                      </nav>
​
                    <div id="bottombar">
                    </div>
    
                   </div>
​
                </div>
​
                   <!--end of content-->
                </div>
                <!--end of Tabs-->
             </div>
             <!--end tabwrapper-->
          </div>
          <!--end of Main-->
    
    
  
    
    
    
​
    
   </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers