css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>

<body>
  <div class="wrapper">
    <header id="main-heading">
      <h1>Richard Burns</h1>
      <h3>17 January 1971 ~ 25 November 2005</h3>
      <hr>
    </header>
    <section class="row">
      <article>
        <div class="col-lg-6 col-lg-push-6">

          <img src="https://www.richardburnsfoundation.com.gridhosted.co.uk/uploads/images/_page/29205_RB_BW_02.jpg" id="bust">
        </div>
        <div class="col-lg-6 col-lg-pull-6">
          <h2>Who was Richard Burns?</h2>
          <p>Richard Burns. Two words which summed up everything that was great about British rallying.</p>

          <p>Richard was a master of his art. But then you’d expect that from a man who was born to drive – and was driving well before his 17th birthday. By the time he was allowed behind the wheel on the road, he’d already spent hours testing rally cars
            in the forest. Richard didn’t just hit the ground running, he hit the ground sprinting.</p>
          <p>After 18 months at club level, a 19-year-old Richard took on his first national series and won it. Hands down. He dominated the 1990 Peugeot Challenge and then destroyed the opposition for a second season in succession in 1991. By then, he’d
            been spotted and was fast-tracked into a factory car to become Britain’s youngest ever works rally driver. Richard’s progression from stacking shelves in his local Waitrose to a national champion in 1992 was a remarkable story of commitment
            and dedication from one of Britain’s youngest sporting stars.</p>
          <p>Now, though, the world was waiting and watching. The launchpad to his arrival in the World Rally Championship was a sensational British Rally Championship win in what Richard and his co-driver Robert Reid both rated as their favourite rally
            car: the Subaru Legacy RS. It was a beast of a thing with an enormous amount of power – more than enough for your average 22-year-old! </p>
          <p>But, there was nothing average about Richard. He dominated the British series, making it four titles in four years. The next one, the big one, would come eight years later.</p>
          <p>In the intervening seasons, Richard became the benchmark for both speed on the stages and precision of car set-up off the stages. The attention to detail which had driven him to laboriously, yet lovingly, repaint his mud flaps and wheel rims
            after every event in his cash-strapped Peugeot 205 was the same meticulous thoroughness which pushed him harder and harder as his sparkling career progressed.</p>
          <p>His early world championship years were with Subaru, but that all-important first win came in a Mitsubishi in 1998. And it came on one of the hardest rallies the world has ever known, the Safari. A few months down the line, RB picked up the
            win he really wanted: the RAC Rally.</p>

          <p>That home win was the first of a hat-trick of British victories. When that run ended, in 2001, Richard wasn’t too concerned; he was celebrating on a different level. Third place was enough for Craven Motor Club’s finest to be confirmed as England’s
            first ever World Rally Champion.</p>

        </div>
    </section>
    <hr>
    <section class="row">
      <article class="col-md-7">
        <h2>Death</h2>
        <p>Late on Friday, 25 November 2005, four years to the day after winning the World Rally Championship, Burns died in Westminster, London, aged 34, after having been in a coma for some days as a result of a brain tumour. He is survived by his father
          Alex and girlfriend Zoe Scott (née Keen)</p>
        <h2>Legacy</h2>
        <p>The Richard Burns Foundation was created following the death of Richard Burns, the 2001 world rally champion, from an astrocytoma – a virulent form of brain tumour – in November 2005.</p>
        <p>Richard’s strength and determination throughout his illness were an inspiration to those who knew and worked with him. He faced his disease with the same attitude that he displayed on the world’s rally stages: showing bravery, intelligence and
          single-mindedness. These were all the qualities that helped make him England’s only world rally champion.</p>
        <p>After Richard’s death, the Richard Burns Foundation was set up by some of his closest friends and colleagues as a lasting tribute to his memory. It aims to help people who are affected by serious illness or injury.</p>
        <p>It is also there to recognise the people who display the same fortitude as Richard during their individual ordeals, giving them the means to face the future with confidence.</p>
        <p>Marcus Grönholm, a two-time world rally champion and former team-mate of Richard’s, is the newly-appointed patron of the Foundation, with Richard’s former team boss David Lapworth, and Zoe Scott, Richard’s long-term girlfriend, among the trustees.
          Richard’s navigator Robert Reid was a co-founder of the charity and also remains heavily involved in its day-to-day running.</p>
        <p>The Richard Burns Foundation will hold a number of fund-raising events this year, which we ask everyone to support. Thanks to your help and generosity, the Foundation aims to change a number of lives for the better.</p>
        <p>One of the most valuable gifts is publicity. Spreading the word about the work of the Foundation enables more money to be raised and Richard’s memory to be kept alive through offering hope to people who have their lives unexpectedly disrupted.</p>
        <p>The Foundation is constantly evolving and looking at new ways to remember Richard and benefit people. All your comments and suggestions are gratefully received: please e-mail <a href="mailto:info@richardburnsfoundation.com">info@richardburnsfoundation.com</a>.</p>
        <p>Thank you very much for your valuable support.</p>

      </article>
      <article class="col-md-5">

        <h2>WRC Record</h2>
        <div class="table-responsive">
        <table class="table">

          <tr class="table-head-internal">
            <td colspan="2">
              <h4>Personal Information</h4></td>
          </tr>


          <tr>
            <td>Nationality</td>
            <td>British (Eng)</td>
          </tr>
          <tr>
            <td>Born</td>
            <td>17.1.1971</td>
          </tr>
          <tr>
            <td>Died</td>
            <td>25.5.2005</td>
          </tr>

          <tr class="table-head-internal">
            <td colspan="2">
              <h4>WRC stats</h4></td>
          </tr>


          <tr>
            <td>Active years</td>
            <td>1990-2003</td>
          </tr>
          <tr>
            <td>Co-driver</td>
            <td>Robert Reid</td>
          </tr>
          <tr>
            <td>Teams</td>
            <td>Subaru, Mitsubishi, Peugeot</td>
          </tr>
          <tr>
            <td>Rallies</td>
            <td>104</td>
          </tr>
          <tr>
            <td>Championships</td>
            <td>1 (2001)</td>
          </tr>
          <tr>
            <td>Rally wins</td>
            <td>10</td>
          </tr>
          <tr>
            <td>Podiums</td>
            <td>34</td>
          </tr>
          <tr>
            <td>Stage wins</td>
            <td>277</td>
          </tr>
          <tr>
            <td>Total points</td>
            <td>351</td>
          </tr>
          <tr>
            <td>First rally</td>
            <td>1990 RAC Rally</td>
          </tr>
          <tr>
            <td>First win</td>
            <td>1998 Safari Rally</td>
          </tr>
          <tr>
            <td>Last win</td>
            <td>2001 Rally New Zealand</td>
          </tr>
          <tr>
            <td>Last rally</td>
            <td>2003 Rally Catalunya</td>
          </tr>
          </tbody>
        </table>
        </div>
      </article>
    </section>
    <hr>
    <div class="row  money-shots">
      <h2>Richard in action</h2>
      <div class="col-md-6 fillpic">
        <img src="http://i1244.photobucket.com/albums/gg575/bernhardv/wrc_project/1147644_686023928093780_1830801390_o_zpse5fde2ab.jpg" alt="Richard burns in his subaru wrx">
      </div>
      <!--<div class="col-md-6 fillpic">
        <img src="http://rideonboard.net/wp-content/uploads/2013/05/Burns.Peugeot.jpg" alt="Richard Burns getting sideways in his 206">
      </div>-->
    </div>
    <footer>
      <div class="row">
        <div class="col-md-12">
          <h2>Further Reading</h2>
          <ul id="further-reading">
            <li><a href="https://en.wikipedia.org/wiki/Richard_Burns">Richard Burns Wiki</a></li>
            <li><a href="http://www.richardburnsfoundation.com/">The Richard Burns Foundation</a></li>
          </ul>
          <!--</div>
        <div class="col-md-6" id="badge">
          <a href="http://www.richardburnsfoundation.com/">
            <img src="https://www.richardburnsmemorialrally.co.uk/RB%20Logo.jpg" >
            <a>
        </div>-->
        </div>
    </footer>
    </div>
</body>

</html>
            
          
!
            
              body {
  background-color: #263767;
  font-size: 1.8em;
}

hr {
  color: #263767;
  background-color: #263767;
  height: 2px;
  width: 95%;
}

.wrapper {
  margin: 0 10% 5%;
  background-color: #E0E0C5;
}

h1 {
  color: #263767;
  padding-top: 20px;
  border-top: 5px solid #303030;
}

h2 {
  text-align: center;
  color: #263767;
}

p {
  margin: 25px;
}

a {
  color: #263767;
  text-decoration: none;
  font-size: 1.1em;
}

a:hover {
  color: #314470;
}

li {
  list-style: none;
  padding-right: 50px;
}

#main-heading {
  text-align: center;
}

#bust {
  max-width: 100%;
  padding: 50px 10px;
  display: block;
  margin: 0 auto;
}

#further-reading {
  text-align: center;
}

/*table {
  width: 100%;
  align: center;
}*/

tr:nth-child(odd) {
  background-color: #E0E0C5;
}

tr:nth-child(even) {
  background-color: #D5CFBA;
}

td {
  padding: 15px;
  max-width: 50%;
}

.table-head-internal {
  background-color: #A7A5A8;
  color: #314470;
  text-align: center;
}

.money-shots {
  display: block;
  margin: 0 auto;
}

.fillpic {
  padding: 0px;
}

.money-shots img {
  max-width: 100%;
  height: auto;
}

#badge {
  max-width: 10%;
  padding: 50px 10px;
  display: block;
  margin: 0 auto;
}

footer {
  background-color: #A7A5A8;
  border-top: 5px solid #303030;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console