Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
  
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="Odo Peter"/>
    <meta name="description" content="This Tribute is dedicated to a true African Icon, Nelson Mandela"/>
    <link rel="stylesheet" href="mandela.css" type="text/css" />
    <title>FCC Project: Tribute Page</title>
  </head>
  
  <body class="body">
  <main id="main">  
    <header>
    <h1 id="title">
      Nelson Rolihlahla Mandela 
    </h1>
    <p id="first-paragraph">The man who fought for <abbr title="South Africa's">SA's</abbr> freedom</p>
    <figure id="img-div">
    <img src="https://images.pexels.com/photos/10527763/pexels-photo-10527763.jpeg?cs=srgb&dl=pexels-clayton-10527763.jpg&fm=jpg" alt="A picture of Nelson Mandela's stature placed at the entrance of a memorial park in south africa" id="image" />
      <figcaption id="img-caption">A stature of Nelson Mandela at a memorial park in <abbr title="South Africa's">SA</abbr></figcaption>
    </figure>
    </header>
    <br />
  
      <section id="tribute-info">
      <h2>Here is a timeline of his life</h2>
        <ul>
          <li>
            <strong>1918:</strong> Nelson "Rolihlahla" Mandela was born into the Madiba clan in the village of Mvezo, in the Eastern Cape, on 18 July. His mother was Nonqaphi Nosekeni and his father was Nkosi Mphakanyiswa Gadla Mandela, <em>principal counsellor to the Acting King of the Thembu people</em>, Jongintaba Dalindyebo. <br /><br />
          </li>
          <li>
          <strong>1930:</strong> When he was 12 years old, his father died and the young Rolihlahla became a ward of Jongintaba at the <em>Great Place in Mqhekezweni1</em>. Hearing the elders' stories of his ancestors' valour during the wars of resistance, he dreamed also of making his own contribution to the freedom struggle of his people. He attended primary school in Qunu where his teacher, Miss Mdingane, gave him the name <strong>Nelson</strong>, in accordance with the custom of giving all schoolchildren “Christian” names. <br /><br />
          </li>
          <li>
            <strong>1939:</strong> He completed his Junior Certificate at Clarkebury Boarding Institute and went on to Healdtown, a Wesleyan secondary school of some repute, where he matriculated. Mandela began his studies for a Bachelor of Arts degree at the University College of Fort Hare but did not complete the degree there as he was expelled for joining in a student protest.<br /><br />
          </li>
          <li>
            <strong>1941:</strong> He  returned to the <em>Great Place at Mqhekezweni</em>, the King was furious and said if he didn't return to Fort Hare he would arrange wives for him and his cousin Justice. They ran away to Johannesburg instead. There he worked as a mine security officer and after meeting Walter Sisulu, an estate agent, he was introduced to Lazer Sidelsky.<br /><br />
          </li>
          <li>
            <strong>1942:</strong> Mandela, while increasingly getting involved in politics, only joined the African National Congress, when he helped to form the ANC Youth League (ANCYL).<br /><br />
          </li>
          <li>
            <strong>1943:</strong> He completed his <abbr title="Bachelor of Arts">BA</abbr> through the University of South Africa and went back to Fort Hare for his graduation. Meanwhile, he began studying for an <abbr title="Bachelor of Law">LLB</abbr> at the University of the Witwatersrand. By his own admission he was a poor student and left the university without graduating. <br /><br />
          </li>
          <li>
            <strong>1944:</strong> He married Walter Sisulu's cousin, Evelyn Mase, a nurse. They had two sons, Madiba Thembekile "Thembi" and Makgatho, and two daughters both called Makaziwe, the first of whom died in infancy.<br /><br />
          </li>
          <li>
            <strong>1952:</strong> He was chosen as the National Volunteer-in-Chief of the Defiance Campaign with Maulvi Cachalia as his deputy. This campaign of civil disobedience against six unjust laws was a joint programme between the ANC and the South African Indian Congress. He and 19 others were charged under the Suppression of Communism Act for their part in the campaign and sentenced to nine months of hard labour, suspended for two years.<br /><br />
          </li>
          <li>
            <strong>1956:</strong> Mandela was arrested in a countrywide police swoop on 5 December, which led to the <a href="https://en.m.wikipedia.org/wiki/1956_Treason_Trial" target="_blank">1956 Treason Trial</a>. Men and women of all races found themselves in the dock in the marathon trial that only ended when the last 28 accused, including Mandela, were acquitted on 29 March 1961.<br /><br />
          </li>
          <li>
            <strong>1958:</strong> During the trial and his imprisonment, Mandela married a social worker, Winnie Madikizela, on 14 June. They had two daughters, Zenani and Zindziswa. <br /><br />
          </li>
          <li>
            <strong>1962:</strong> He started studying again through the University of London after his imprisonment but also did not complete that degree. <br /><br />
          </li>
          <li>
          <strong>1962:</strong> On 11 January, using the adopted name "David Motsamayi", Mandela secretly left South Africa. He travelled around Africa and visited England to gain support for the armed struggle. He was charged with leaving the country without a permit and inciting workers to strike. He was convicted and sentenced to five years' imprisonment, which he began serving at the Pretoria Local Prison. <br /><br />
          </li>
          <li>
            <strong>1963:</strong> On 9 October, Mandela joined 10 others on trial for sabotage in what became known as the <a href="https://en.m.wikipedia.org/wiki/Rivonia_Trial" target="_blank">Rivonia Trial</a>. While facing the death penalty his words to the court at the end of his famous "Speech from the Dock" on 20 April 1964 became immortalised. <br /><br />
          </li>
          <li>
            <strong>1964:</strong> On 11 June, Mandela and seven other accused, Walter Sisulu, Ahmed Kathrada, Govan Mbeki, Raymond Mhlaba, Denis Goldberg, Elias Motsoaledi and Andrew Mlangeni, were convicted and the next day were sentenced to life imprisonment. Goldberg was sent to Pretoria Prison <strong>because he was white</strong>, while the others went to Robben Island. <br /><br />
          </li>
          <li>
            <strong>1982:</strong> On 31 March, Mandela was transferred to Pollsmoor Prison in Cape Town with Sisulu, Mhlaba and Mlangeni. Kathrada joined them in October. <br /><br />
          </li>
          <li>
            <strong>1985:</strong>  He returned back to the prison in November 1985 after prostate surgery, Mandela was held alone. Justice Minister Kobie Coetsee visited him in hospital. Later Mandela initiated talks about an ultimate meeting between the apartheid government and the <abbr title="African National Congress">ANC</abbr>. <br /><br />
          </li>
          <li>
            <strong>1988:</strong> On 12 August, he was taken to hospital where he was diagnosed with tuberculosis. After more than three months in two hospitals, he was transferred on 7 December 1988 to a house at Victor Verster Prison near Paarl where he spent his last 14 months of imprisonment. <br /><br />
          </li>
          <li>
            <strong>1989:</strong> While in the last months of his imprisonment, he obtained an <abbr title="Bachelor of Law">LLB</abbr> through the University of South Africa. He graduated in absentia at a ceremony in Cape Town.<br /><br />
          </li>
          <li>
            <strong>1990:</strong> He was released from its gates on Sunday 11 February, nine days after the unbanning of the <abbr title="African National Congress">ANC</abbr>. Throughout his imprisonment he had rejected at least three conditional offers of release.<br /><br />
          </li>
          <li>
            <strong>1994:</strong> On 10 May, he was inaugurated as South Africa's first democratically elected President.<br /><br />
          </li>
          <li>
            <strong>1998:</strong> On his 80th birthday, he married Graça Machel, his third wife.<br /> <br /><br />
          </li>
          <li>
            <strong>1999:</strong> True to his promise, Mandela stepped down after one term as President. He continued to work with the Nelson Mandela Children's Fund and established the Nelson Mandela Foundation and The Mandela Rhodes Foundation. <br /><br />
          </li>
          <li>
            <strong>2013:</strong> He died at his home in Johannesburg on 5 December 2013.<br /><br />
          </li>
        </ul>
      <br />
      <p id="last-paragraph">
          <em>But the spirit of greatness that he personified resides in all of us. Human beings are made for greatness. Nelson Mandela embodied and reflected our collective greatness. He embodied our hopes and our dreams. He symbolised our enormous potential, potential that has not always been fulfilled.</em></p>
        <br />
        <p id="last-caption">-The Archbishop Emeritus Desmond Tutu</p>
    </section>
    <br />
  <br />
  <footer>
    If you want to know more about this African Icon and how he is a reference to what a leader should be, check out his <a href="https://en.m.wikipedia.org/wiki/Nelson_Mandela" target="_blank" id="tribute-link">Wikientry</a>. <br /> <br />
    <a href="#">Bact to Top</a>
  </footer>
  </main>
  </body>
              
            
!

CSS

              
                .body {
  background-color: #f2d2bd;
  font-family: 'Times New Roman';
}

h1 {
  text-align: center;
  font-family: Sans-Serif;
}

#img-div {
  background-color: #f2d2bd;
  margin: 0;
  padding: 10px;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

#first-paragraph {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

#img-caption {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}

h2 {
  text-align: center;
  font-family: 'Sans-Serif';
  padding-top: 20px;
}

section {
  background-color: #d2b48c;
  margin: 0% 10% 0% 10%;
  padding: 0px 15px 0px 15px;
}

#last-paragraph {
  margin: 0% 4% 0% 4%;
  border-left: solid 3px;
  border-color: #f2d2bd;
  padding: 0px 10px 0px 10px;
  font-size: 16px;
}

#last-caption {
  margin: 0% 4% 0% 25%;
  padding: 0px 10px 0px 10px;
  font-size: 14px;
  padding-bottom: 10px;
}

footer {
  margin: 0% 5% 0% 5%;
  text-align: center;
  font-size: 14px;
}

              
            
!

JS

              
                
              
            
!
999px

Console