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>
 <title>My BBC</title>
​
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
​
<style>
     
    body {
        
        margin: 0;
        font-family: arial;
        line-height: 16px;
    }
    
    #topbar {
        
        background-color: #600c0c;
        width: 100%;
        height: 46px;
        color: white;
        margin: 0;
    }
      
​
    .fixedwidth {
        
        width: 1050px;
        margin: 0 auto;
    }
​
    #logodiv {
        
        padding-top: 5px;
        float: left;
        border-right: 1px solid #b20505;
        padding-right: 10px;
        padding-bottom: 4px;
    }
    
    #signindiv {
        
        font-weight: bold;
        font-size: 0.9em;
        border-right: 1px solid #b20505;
        padding: 1px 80px 0px 12px;
        float: left;
    }
    
    #topmenudiv {
        
        float: left;
    }
    
    #topmenudiv ul {
        
        padding: 0;
        margin: 0px;
    }
    
    #topmenudiv li {
        
        list-style: none;
        font-weight: bold;
        font-size: 0.9em;
        border-right: 1px solid #b20505;
        height: 100%;
        padding: 15px 20px 15px 20px;
​
        float: left;
​
        
    }
    
    #searchdiv {
        
        float: left;
        padding: 5px 0 0 10px;
    }
​
    #searchdiv input {
        
        height: 25px;
        border: none;
        font-size: 0.9em;
        padding-left: 10px;
        background-image: url(images/Search.png);
        background-repeat: no-repeat;
        background-position: right center;
    }
​
    .break {
        clear: both;
    }
    
    #newsbar {
        
        background-color: #b20505;
        width: 100%;
        height: 80px;
        color: white;
        margin: 0;
        
    }
    
    #newsbar p {
        
        margin: 0;
        padding: 0;
        padding-top: 30px;
        padding-left: 0px;
        float: left;
​
    }
    
    #newsheader {
        font-size: 3em;
    }
    
    #uk {
        
        font-size: 0.7em;
        padding-left: 8px;
    }
    
    rss {
        
        float: right;
        
        
    }
​
     </style>     
 </head>
​
 <body>
 
     <div id="container">
     
        <div id="topbar">
         
         <div class="fixedwidth">
        
         <div id="logodiv">
​
            <img src="images/BBCLogo.png" />
​
            </div>
             
             <div id="signindiv">
             
                 <p>Sign In</p>
             
             </div>
             
             <div id="topmenudiv">
             
                <ul>
                 
                    <li>News</li>
                    <li>Sport</li>
                    <li>Weather</li>
                    <li>iPlayer</li>
                    <li>TV</li>
                    <li>Radio</li>
                    <li>More...</li>
                 
                 </ul>
             
             </div>
             
              <div id="searchdiv">
             
                    <input type="text" placeholder="Search"/>
             
             </div>
​
            </div>
         
         </div>
         
         <div class="break"></div>
         
         <div id="newsbar">
             
         
            <div class="fixedwidth">
        
        
                <p id="newsheader">NEWS <span id="uk">UK</span></p>
                
                <div id="rss">
                
                    <p>RSS</p>
                    
                </div>
​
            </div>
         
         </div>
     
     
     
     </div>
     
 </body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers