FreeCodeCamp Tribute Page

freecodecamp-tribute-page.markdown

FreeCodeCamp Tribute Page

A Pen by Warren R on CodePen.

License.

index.html

<div class="container-fluid">
  <h1 class="text-center">Winston Churchill</h1>
  <h2 class="text-center">British politician and statesman.</h2>
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
      <div class="wrapper">
        <img class="img-responsive" src="http://bit.ly/2viijJ5" alt="Winston Churchill">
        <p class="text-center">British Prime Minister, Winston Churchill.</p>
      </div>
      <div class="col-md-1"></div>
    </div>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <h3>Here is a short timeline of the life of Winston Churchill.</h3>
        <ul>
          <li><strong>1874</strong> - Born, 30 November, eldest son of Rt. Hon. Lord Randolph Churchill, 3rd son of 7th Duke of Marlborough, and Jennie Jerome.</li>
          <li><strong>1888-93</strong> - Attendance at Harrow School.</li>
          <li><strong>1893-94</strong> - Cavalry cadet at Sandhurst Royal Military Academy.</li>
          <li><strong>1895</strong> - Death of Lord Randolph Churchill, 24 January.</li>
          <li><strong>1904</strong> - Moved from Conservative Party to Liberal Party, 31 May.</li>
          <li><strong>1907</strong> - Became Privy Councillor, 1 May.</li>
          <li><strong>1908</strong> - Married, 12 September, to Clementine, daughter of Sir Henry Hozier and Lady Blanche (née Ogilvy).</li>
          <li><strong>1922</strong> - Bought Chartwell Manor, Kent.</li>
          <li><strong>1924</strong> - Returned to Conservative Party from Liberal Party.</li>
          <li><strong>1931</strong> - Lecture tour in the United States.</li>
          <li><strong>1940-45</strong> - Prime Minister, First Lord of the Treasury and Minister of Defence.</li>
          <li><strong>1946</strong> - "Iron Curtain" Speech, Fulton, Missouri, 5 March.</li>
          <li><strong>1951-55</strong> - Prime Minister and First Lord of the Treasury.</li>
          <li><strong>1953</strong> - Awarded Nobel Prize for Literature.</li>
          <li><strong>1965</strong> - Died, 24 January.</li>
        </ul>
        <h4><em>"Attitude is a little thing that makes a big fifference."</em></h4>
        <p class="quote"><em>- Winston Churchill</em></p>
        <h3 class="reference">Read more about Winston Churchill on <a href="https://en.wikipedia.org/wiki/Winston_Churchill">Wikipedia</a></h3>
      </div>
      <div class="col-md-2"></div>
    </div>
  </div>

script.js

document
.getElementsByTagName("h1")[0].style.fontSize = "60px";

style.css

.container-fluid {
  max-width: 1000px;
  background-color: #ECEDF1;
  margin-top: 60px;
}

h1 {
  padding-top: 60px;
  color: #2F3133;
}

h2 {
  font-size: 30px;
  color: #2F3133;
  margin-bottom: 40px;
}

h3 {
  line-height: 35px;
  margin-bottom: 20px;
}

h4 {
  margin-bottom: 10px;
  line-height: 25px;
}

ul {
  margin-bottom: 40px;
}

.quote {
  color: #cccccc;
  font-size: 16px;
  margin-bottom: 40px;
}

.reference {
  margin-bottom: 80px;
}

img {
  margin-bottom: 15px;
}

.wrapper {
  padding: 5px;
  background-color: #ffffff;
  margin-bottom: 20px;
  border: 1px solid #cccccc;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />