BBC Website

bbc-website.markdown

BBC Website

A Pen by Terron Johnson on CodePen.

License.

index.html

<div class="container">

  <div id="topbar">
    <div class="fixed-width">
      <div class="logodiv">
        <img src="https://s31.postimg.org/vqm78co4b/Screen_Shot_2016_06_26_at_12_40_38_PM.png">
      </div>

      <div id="signindiv">

        &#x2612; Sign In
      </div>
      <div id="topmenu">
        <ul>
          <li>News</li>
          <li>Sports</li>
          <li>Weather</li>
          <li>IPlayer</li>
          <li>TV</li>
          <li>Radio</li>
          <li>More...</li>

        </ul>

      </div>

      <div id="searchdiv">
        <input placeholder="Search" type="text">


      </div>

    </div>

  </div>


  <div id="newsbar">
    <div class="fixed-width">
      <p id="newsheader">NEWS<span id="uk"> UK</span></p>

      <div id="rss">
        <img src="https://s32.postimg.org/pjw1adhcl/RSS.jpg" width=8 0px;/>
      </div>
    </div>
    <div class=""></div>

    <div id="topicmenu">
      <ul>
        <li>Home</lI>

        <li>World</lI>
        <li class="selected">UK</lI>
        <li>
          <li>England</lI>
          <li>N. Ireland</lI>
          <li>Scotland</lI>
          <li>Wales</lI>
          <li>Business</lI>
          <li>Politics</lI>
          <li>Health</lI>
          <li>Education</lI>
          <li>Sci/Environment</lI>
          <li>Technology</lI>
          <li style="border-right: none">Entertainment and Arts</lI>
      </ul>
    </div>
  </div>
  <div class="break"></div>

  <div id="content">
    <div class="fixed-width">
      <p><b>April 2 2016</b> Last Updated at 18;43</p>
      <h1>
Pollution to spread across England</h1>

      <img class="headlineimage" src="https://web.archive.org/web/20140402100846im_/http://news.bbcimg.co.uk/media/images/73965000/jpg/_73965812_73965807.jpg" width="600px" />
    </div>
    <div class="newsitem">
      <p>Health warnings have been issued by the government as pollution spreading across England is forecast to hit high levels.</p>
      <p class="links"><a class="video" href="">Why are pollution levels so high?</a><br><a class="video" href="">Quake panics coastal residents Watch In pictures: Chile earthquake</a><br>
        <a class="video" href="">President urges calm</a><br>
        <a class="video" href="">Quake panics coastal residents Watch In pictures: Chile earthquake</a><br>
        <a class="speaker" href="">President urges calm</a></p>

    </div>

    <div class="watchlist">
      <img class="boxes" src="https://s32.postimg.org/5991dyt2d/boxes.jpg" />
      <h2>Watch/Listen</h2>
      <img class="watch-image" src="https://s31.postimg.org/dkv056g8b/image.jpg" />
    </div>


  </div>

style.css

body {
  margin: 0px;
  font-family: arial, sans-serif;
}
#topbar {
  background-color: #7A0000;
  width: 100%;
  height: 40px;
 padding-bottom: 10px
}

.fixed-width {
  width: 1600px;
  margin: 0 auto;
  color: white;
 
}

.logodiv {
  padding-top: 2px;
  float: left;
  border-right: solid 1px #990000;
  padding-right: 10px;
  padding-left: 20;
  padding-bottom: 10px
}


#signindiv {
  font-weight: bold;
  padding-top: 5px;
  padding-right: 40px;
  float: left;
  padding-left: 20px;
  padding-bottom: 18px;
 border-right: solid 1px #990000;
}

#topmenu {
 
}

#topmenu li {
  list-style: none;
  font-weight: bold;
 border-right: solid 1px #990000;
 padding: 10px 20px 15px 20px;
  height: 100%;
  float: left;
}

#topmenu ul {
  margin: 0px;
  padding-top: 0;
 
}

#searchdiv {
  float: left;
  padding-top: 5px;
  padding-left: 50px;
  border: none
}

#searchdiv input {
  height: 25px;
  padding: 2px;
    font-size: 1.2em;
  font-weight: bold;
  font-color: black;
  padding-left: 10px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg");
 background-size: 20px;
 background-repeat: no-repeat;
  background-position: right center;

} 

.break {
  clear: both;
}

#newsbar {
  background-color: #990000;
  width: 100%;
  height: 100px;
 
}

#newsbar p {
  margin: 0;
  padding: 0;
  padding-top: 5px;
}

#newsheader {
  font-size: 3em;
  padding-left: 10px;
  
}

#uk {
  font-size: 0.7em;
}

#rss {
  float: right;
  margin-top: 0;
  position: relative;
  bottom: 40px;
  color: white
}

#topicmenu {
  width: 1600px;
position: relative;
right: -80px;
}


#topicmenu ul {
  background-color: #3E0C0D;
  color: white;
  list-style: none;
  padding: 5px 0 0 5px;
  margin: 0;
  height: 30px;
}

#topicmenu li {
  list-style: none;
padding: 0 10px 0 10px;
  margin: 0;
  font-size: ;
   border-right: solid 1px #990000;
  float: left;
}

.selected {
  background-color: #EDEDED;
  color: #666666;
    height: 30px;
  position: relative;
  top: -4px;
  padding-top: 5px ! important;
}


#content .fixed-width {
  color: #535353;
  width: 100%;
  font-size: 0.8em;
  padding-left: 80px;
}

h1 {
  color: #1F4F82;
  font-size: 3em;
}

.headlineimage {
  float: left;
}

.newsitem {
 position: relative;
  left: 10px;
   top: -25px;
  float: left;
  width: 450px;
  font-size: 1.1em;
}


.newsitem  a{
    color: #1F4F82;
  text-decoration: none;
  
}

.newsitem  a:hover{
    color: #1F4F82;
  text-decoration: underline;
  
}

.video {
  background-image: url("https://s32.postimg.org/w28alvbfp/arrow.jpg");
 background-repeat: no-repeat;
  background-position: left center;
  padding-left: 25px;
}

.speaker {
    background-image: url("https://s31.postimg.org/puc6qm7bv/speaker.jpg");
 background-repeat: no-repeat;
  background-position: left center;
  padding-left: 25px;
}

.links {
  line-height: 1.5em;
}

.watchlist {
  background-color: #EEEEEE;
  float: right;
  height: 300px;
  width: 480px;
  position: relative;
  top: -80px;
  left: -110px;
}
h2 {
  color: #505050;
  margin: 15px 0 5px 15px;
  font-size: 1.8em;
}
.boxes {
  float: right;
  margin: 30px 10px 0 0;
}
.watch-image {
  height: 100%;
    width: 100%;
}

@media (max-width:1300px) {
/* some think */


  body {
  margin: 0px;
  font-family: arial, sans-serif;
}
#topbar {
  background-color: #7A0000;
  width: 100%;
  height: 40px;
 padding-bottom: 10px
}

.fixed-width {
  width: 1200px;
  margin: 0 auto;
  color: white;
 
}

.logodiv {
  padding-top: 5px;
  float: left;
  border-right: solid 1px #990000;
  padding-right: 10px;
  padding-left: 20;
  padding-bottom: 10px
}


#signindiv {
  font-weight: bold;
  padding-top: 15px;
  padding-right: 40px;
  float: left;
  padding-left: 20px;
  padding-bottom: 18px;
 border-right: solid 1px #990000;
}

#topmenu {
 
}

#topmenu li {
  list-style: none;
  font-weight: bold;
 border-right: solid 1px #990000;
 padding: 15px 20px 20px 20px;
  height: 100%;
  float: left;
}

#topmenu ul {
  margin: 0px;
  padding-top: 0;
 
}

#searchdiv {
  float: left;
  padding-top: 5px;
  padding-left: 50px;
  border: none
}

#searchdiv input {
  height: 25px;
  padding: 2px;
    font-size: 1.2em;
  font-weight: bold;
  font-color: black;
  padding-left: 10px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg");
 background-size: 20px;
 background-repeat: no-repeat;
  background-position: right center;

} 

.break {
  clear: both;
}

#newsbar {
  background-color: #990000;
  width: 100%;
  height: 100px;
 
}

#newsbar p {
  margin: 0;
  padding: 0;
  padding-top: 5px;
}
  
  
  #topicmenu {
  width: 1200px;
position: relative;
right: -40px;
left: 40px;
}


#topicmenu ul {
  background-color: #3E0C0D;
  color: white;
  list-style: none;
  padding: 5px 10px 15px 25px;
  margin: 0;
  width: ;
  height: 25px;
}

#topicmenu li {
  list-style: none;
padding:  10 5px 20px;
  margin-top: 10px;
  font-size: ;
   border-right: solid 1px #990000;
  float: left;
  font-size: 0.9em;
}

.selected {
  background-color: #EDEDED;
  color: #666666;
    height: 28px;
  position: relative;
  top: -18px;
  padding-top: 20px !important;
}



}