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>Sample website</title>
    <link href="style.css" rel="stylesheet" />
    <!--internal style -->
  </head>
  <body>
    <div id="container">
      <header id="header">
        <div id="menu" class="menu">
          <ul class="menu2">
            <li class="child"><a href="index.php" > HOME </a> </li>
            <li><a href="#"> ABOUT THE PRODUCT </a>
              <ul class="sub"> 
                <li> <a href="#" > PRODUCT </a> </li>
                <li> <a href="#" > PRODUCT REVIEWS </a> </li>
              </ul>
            </li>
            <li> <a href="#" > BLOG </a>
              <ul>
                <li> <a href="#" > ARTICLES </a> </li>
                <li> <a href="#" > RECIPES </a> </li>
              </ul>
            </li>
            <li> <a href="#" > ABOUT US </a> </li>
            <li> <a href="#" > CONTACT US </a> </li>
          </ul> 
        </div>
      </header>
​
​
      <section id="content">
        <h2>Welcome visitor!</h2>
        <div id="news">
          <center>
            <p> insert text here </p>
          </center>   
        </div>  
      </section>
​
​
      <footer id="footer">
        <div id="fmenu" class="fmenu">
          <p>©2015 ALL RIGHTS RESERVED</p>
          </footer>
        </div>
    </div>
  </body>
</html>
 
body {
    background: url(images/background.jpg)no-repeat center center fixed;
    font-family: Verdana !important;
    font-size: 10pt;
    line-height: 20px;
    
    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
​
}
#header {
    background: url(images/header.jpg) no-repeat;
    min-height: 270px;
    overflow: hidden;
    background-size: 100%;
}
#content {
    background: #fff;
    float: left;
    width: 100%;
    margin-top: -101px;
    
    opacity: 0.6;
    filter: alpha(opacity=60);
}
​
#container {
    width: 826px;
    margin: 0 auto;
    box-shadow: 0 0 5px 1px #ccc;
}
​
#menu{
    margin:0;
    padding:0;
    /*position:fixed; */
}
#menu ul{
    margin:0;
    padding:0; 
    line-height:30px;
    margin-left:35px;
    margin-top: 139px;
}
​
#menu li{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#fff;
}
​
#menu ul li a{
    text-align:center;
    font-family:"Comic Sans MS", cursive;
    font-size:12px;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#000;
    margin-left:10px;
    text-shadow:1px 1px 1px #999;
}
​
#menu ul li{
    text-align:center;
    font-family:"Comic Sans MS", cursive;
    font-size:12px;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#000;
    
    text-shadow:1px 1px 1px #999;
}
​
#menu ul li ul li a{
    text-align:center;
    margin-left:0px;
    
    
}
​
#menu ul li ul{
    margin-top:-5px;
}
​
#menu ul li ul li{
    margin-top:-2px;
    margin-left:-35px;
    position:relative;
    z-index:3px;
}
#menu ul ul{
    position:absolute;
    visibility:hidden;
    top:32px;
    z-index:10px;
    
}
​
#menu ul li:hover ul{
    visibility:visible;
}
​
/*******************************/
#menu li:hover{
    text-decoration:underline;
​
}
​
#menu ul li:hover ul li a:hover{
    text-decoration:underline;
    color:#fa9a2a;
    
}
​
#menu a:hover{
    color:#fa9a2a;
}
​
#menu ul li:hover {
    color:#fa9a2a;
}
​
​
​
.clearFloat{
    clear:both;
    margin:0;
    padding:0;
    
}
​
#content p {
    margin: 30px 30px;
}
​
#footer {
    background: url(images/footer.jpg);
    min-height: 146px;
    background-size: 100%;
    clear: both;
}
#fmenu ul {
    padding: 0;
    margin-top: 120px;
    padding-top: 19px;
}
#fmenu ul li {
    display: inline-block;
}
#fmenu ul li a {
    font-size: 14px;
    font-weight: bold;
    padding: 1px 14px 0;
    margin-top: 0px;
    color: #000000;
}
​
​
​
#footer p {
    margin-top: 100px;
    margin-left: -3px;
    display: inline;
    width: 850px;
    font-size: 11px;
    color: #000;
}
Output 300px

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

Dismiss x
public
Bin info
MisaChanpro
0viewers