CSS Project: Example BBC News Site

Started to play around with CSS. A small example of just the design of the BBC news site. Small example of working with classes, containers, positioning, fonts, links, etc in CSS

- Fahad

Example BBC News Website:
!
!
<!doctype html> <html>
<head>
    <title>Fahad BBC site</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 {
  font-family: Arial, Helmet, Freesans, sans-serif;
  margin:0;
  line-height:16px;
  }
  #top-bar {
        width:100%;
        height:46px;
        background-color:#7A0000;
}
margin:0;
   
    .fixed-width {
      width:1150px;
      margin: 0 auto;
}
#bbc-logo {
}
padding-right:10px;
float:left;
border-right:1px solid #990000;
height:46px;
#bbc-logo img {
      margin:10px 10px 0 10px;
}
#sign-in {
      float:left;
      color:#FFF;
            height:41px;
      width:200px;
}
#sign-in:hover {
      border-bottom:5px solid white;
}
   
    #sign-in p {
      margin: 13px 0 0 50px;
}
#top-menu ul {
      float:left;
      padding:0; margin:0;
      height:46px;
}
#top-menu li {
      float:left;
      color:white;
      border-left:1px solid #990000;
      height:33px;
      list-style:none;
      padding: 13px 20px 0 20px;
}
      height:28px;
}
.white-border:hover {
      border-bottom:5px solid white;
}
#top-menu li:hover {
   
    #news:hover {
      border-bottom:5px solid #9b2313;
}
#sport:hover {
      border-bottom:5px solid #ffe711;
}
#weather:hover {
      border-bottom:5px solid #77cdff;
}
#iplayer:hover {
      border-bottom:5px solid #ed3482;
}
#top-menu input {
      height:25px;
      border:none;
      width:180px;
      font-weight:bold;
      color:black;
      font-size:110%;
      padding-left:10px;
      position:relative;
      top:-4px;
}
   
    #title-bar {
            background-color:#990000;
            width:100%;
            height:110px;
}
    #news-title {
            padding:35px 0 0 10px;
            float:left;
            font-size:50px;
            color:white;
}
#date {
      float:left;
      color:white;
      padding:30px 0 0 20px;
}
#rss {
      float:right;
      color:white;
      padding:30px 20px 0 0;
}
#rss img {
      height:16px;
      position:relative;
   
    top:2px; }
.clear {
      clear: both;
}
#news-menu ul {
      background-color:#3E0C0D;
      width:100%;
      height:24px;
      padding:7px 0 0 0;
      position:relative;
      top:-17px;
}
#news-menu li {
      border-right:1px solid #990000;
      background-color:#3E0C0D;
      float:left;
      list-style:none;
      color:white;
      padding: 0 10px 0 10px;
      font-size:90%;
}
#eanda {
      border-right:none;
   
    }
#news-menu a {
      color:white;
}
h1 a {
      color:#1F4F82;
      font-weight:bold;
      font-size:105%;
      float:left;
      padding-bottom:30px;
}
a{
text-decoration:none;
}
#news-container {
      position:relative;
top:-15px; }
.new {
      color:#990000;
float:left;
      padding: 6px 0 0 10px;
}
   
    #news-left {
      float:left;
      width:727px;
}
.newsimage {
      float:left;
}
.news-info {
      float:left;
      width:290px;
      left:15px;
      padding: 0 20px 0 20px;
}
.live {
      background-color:#F42924;
      color:#FFF;
      padding: 0 3px 0 3px;
      margin-right:4px;
      font-size:14px;
      position:relative;
      top:-3px;
}
.news-info p {
   
                margin:0;
            color: #616161;
            line-height:19px;
}
      .news-info a {
            color:#50759D;
}
      a:hover {
            text-decoration:underline;
}
      #watch-listen {
            margin-top:25px;
            background-color:#EEEEEE;
            float:left;
      }
      #watch-listen h2 {
            color:#565656;
            margin:10px 0 10px 10px;
            font-size:180%;
      }
!
#watch-listen-links a {
      font-size:140%;
      font-weight:bold;
   
          color:#39638F;
}
#arrow-left {
      float:left;
      border-right: 1px solid white;
}
.wl-block {
      float:left;
      background-color:#D1700E;
      border-right: 1px solid white;
      width:179px;
      height:155px;
}
.wl-block-link-container {
      padding:5px;
}
.wl-block-link-container a {
      color:white;
}
#arrow-left {
      float:left;
      border-left: 1px solid white;
}
   
    </style>
!
</head>
!
<body>
!
<div id="container">
            <div id="top-bar">
                  <div class="fixed-width">
                  <div id="bbc-logo">
                        <img src="images/logo.png" />
</div>
                  <div id="sign-in">
                        <p>Sign In</p>
</div>
                  <div id="top-menu">
                        <ul>
                              <li id="news">
                                    News
                              </li>
                              <li id="sport">
Sport </li>
   
    </ul> </div>
</div>
</div>
<div class="clear"></div>
<li id="weather">
      Weather
</li>
<li id="iplayer">
      iPlayer
</li>
<li class="white-border">
      TV
</li>
<li class="white-border">
Radio </li>
<li class="white-border">
      More...
</li> <li>
      <input type="text" placeholder="Search" />
</li>
   
    <div id="title-bar">
<div class="fixed-width">
<div id="news-title">
      NEWS
</div>
<div id="date">
      <p><strong>25 March 2014</strong> Last updated at 09:13</p>
</div>
<div id="rss">
      <p>RSS <img src="images/rss.png" /> </p>
</div>
<div class="clear"></div>
<div id="news-menu">
      <ul>
            <li>
                  <a href="">Home</a>
</li> <li>
                  <a href="">World</a>
            </li>
            <li>
                  <a href="">UK</a>
   
    </li> <li>
      <a href="">England</a>
</li>
<li>
      <a href="">N. Ireland</a>
</li> <li>
      <a href="">Scotland</a>
</li>
<li>
      <a href="">Wales</a>
</li> <li>
      <a href="">Business</a>
</li>
<li>
      <a href="">Politics</a>
</li> <li>
      <a href="">Health</a>
</li>
<li>
      <a href="">Education</a>
</li> <li>
      <a href="">Sci/Environment</a>
</li>
   
    </ul> </div>
</div>
<li>
      <a href="">Technology</a>
</li>
<li style="border-right:none">
      <a href="">Entertainment & Arts</a>
</li>
            <div class="fixed-width">
            <div id="news-left">
            <h1><a href="">Beijing clashes over missing plane</a></h1>
            <img class="newsimage" src="images/newsimage1.jpg" />
            <div class="news-info">
                  <p>Angry relatives of passengers on board the missing Malaysia
Airways plane scuffle with police outside Malaysia's embassy in the Chinese
capital.</p>
protest </a></p>
<p><a href="">Coming up: News briefing </a></p>
<p><a href=""><span class="live">Live</span> Missing relatives
<p><a href="">Watch 'Massive logistical exercise' </a></p>
<p><a href="">Watch 'Flight ended in ocean' </a></p>
   
    reopen</a>
      <p><a href="">Watch How 'pings' helped track plane </a></p>
      <p><a href="">Watch Cutting-edge methods </a></p>
      <p><a href="">Can black boxes provide answers? </a></p>
      <p><a href="">The search for flight MH370</a></p>
</div>
</div>
<div id="watch-listen">
      <h2>Watch/Listen</h2>
      <div class="watch-carousel">
            <img id="arrow-left" src="images/arrowleft.png" />
            <div class="wl-block">
                  <img src="images/ss1.png" />
                  <div class="wl-block-link-container">
                        <a href="">Ceiling collapse theatre set to
</div>
</div>
   
    landslide</a>
            <img src="images/ss2.png" />
            <div class="wl-block-link-container">
                  <a href="">Frantic call after deadly
</div>
</div>
      <img id="arrow-right" src="images/arrowright.png" />
</div>
<div id="watch-listen-links">
<div class="wl-block">
                        <p><span class="live">Live</span><a href="">Live
coverage of Pistorius trial Live</a>
Channel Live</a>
Live</a>
            <p><span class="live">Live</span><a href="">BBC News
            <p><span class="live">Live</span><a href="">BBC Radio 5
</div>
</div>
   
          </div>
</body>
</html>
</div>