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>
<meta charset="UTF-8">
    <title>why?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<!--HEADER -->
    <header>
        <div id="pageHeader">
        <a href="#" id="logo"></a>
    <!--NAVIGATION -->
        <nav id="mainNav">
            <ul>
                <li id="about-link"><a href="#about">about</a></li>
                <li id="work-link"><a href="#work">work</a></li>
                <li id="contact-link"><a href="#contact">contact</a></li>
                <li id="resume-link"><a href="#resume">resume</a></li>
            </ul>
        </nav>
        </div>
</header> <!-- end header -->
  </body>
</html>
 
/*Global styles -----------------------------------------------------------------------------------------------------------*/
​
/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align:baseline;
    font: inherit;
}
​
/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
    display: block;
}
​
​
html {
    background-color: #E7E9D1;
    background-image: url(http://s24.postimg.org/4rcaja0lh/image.png);
}
​
body
{
    font-family: Arial, helvetica, sans-serif;
    font-size: 14px;
}
​
​
​
/*header styles*/
header
{
    background-image: url("http://s7.postimg.org/59ft4upyf/header_bg.png");
    background-repeat: repeat-x;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
}
#pageHeader
{
    height: 128px;
    margin: 0 auto;
    position: relative;
    width: 960px;
}
#pageHeader:after {
    content: '';
    display: block;
    position: absolute; 
    width: 120px;
    height: 100%;
    left: 425px;
    top: 0;
    background: url('http://s18.postimg.org/5ktpz4rid/logo.png') 0 0 no-repeat scroll;
}
​
​
/*nav styles*/
#mainNav {
    font-size: 18px;
    list-style: none outside none;
    text-align: center;
    padding-top: 20px;
}
​
#mainNav li {
    display: inline;
}
​
#mainNav a {
    text-decoration: none;
    color: rgb(252,250,230);
    display: inline-block;
    padding: 10px;
}
​
#mainNav a:hover {
    color: #9f9e8f;
}
​
#mainNav #about-link {
    margin-right: 50px;
}
#mainNav #work-link {
    margin-right: 0px;
}
#mainNav #contact-link {
    margin-left: 160px;
}
#mainNav #resume-link {
    margin-left: 20px;
}
​
 
​
Output

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

Dismiss x
public
Bin info
tenderfootpro
0viewers