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="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
    
    <header>
        <img class="logo" src="resources/img/chris.gif" alt="logo">
        <h2>Web Design by Chris Atkinson</h2>
        <nav>
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">projects</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </header>
    <section>
​
        <h3>Welcome to my site</h3>
        <p>Please take a good look around, and send me some feedback in
            the 'contact' section. I'd love to hear from you</p>
    </section>
​
</body>
</html>
 
@CHARSET "ISO-8859-1";
​
body {
    font-family: "Comic Sans MS", cursive, sans-serif
}
​
header {
    background-color: #ffd800;
    color: black;
    height: 119px;
    width: 100%;
    margin: -20px -10px;
    min-width: 800px;
    position: fixed;
    text-align: center;
}
​
.logo {
  position: absolute;
    width: 118px;
    height: 118px;
  z-index: 2;
}
​
header h2 {
    min-width: 800px;
}
​
nav ul {
    background-color: #ffd800;
    text-align:center;
    list-style: none;
    width: 800px;
    margin: 0 auto 0 auto;
}
​
nav li {
    display: inline;
}
​
nav a {
    display: inline-block;
    padding: 0 30px;
    text-decoration: none;
}
​
nav a:hover {
    color: white;
}
​
section {
    width: 800px;
    background-color: #ffff80;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
    padding: 100px 40px 5px 40px
}
​
section h3 {
    text-align: center;
}
​
.clear {
    clear: both;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers