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>
</head>
<body>
 <div class="mainBox">
   <div class="titleBox">
     <h1 class="text-center title" id="bookmark1"><b>Nelson Mandela</b>        </h1>
     <h2 class="text-center title"><i>The anti-apartheid hero of South Africa</i></h2>
   </div>
 <div class="container-fluid">
   <div class="row">
    <div class="col-xs-12">
      <div class="imgBox img-responsive">
        <img src="https://ichef-1.bbci.co.uk/news/375/media/images/51003000/jpg/_51003448_07228714-5dff-4561-ac0e-788f412c277b.jpg" class="img-responsive imgTemplate mySlides" alt="Nelson Mandela (right) and Oliver Tambo (left) started the first firm in the country to be run by black partners. Mandela and Tambo was a South African law firm established in Johannesburg in late 1952."/>
        <p class="myCaptions">Nelson Mandela (right) and Oliver Tambo (left) started the first firm in the country to be run by black partners. &quot;Mandela and Tambo&quot; was a South African law firm established in Johannesburg in late 1952.</p>
        <img src="http://n4mb3rs.com/wp-content/uploads/2015/08/nelson_mandela_1918_2013.jpg" class="mySlides img-responsive imgTemplate" alt="Photo of Nelson Mandela. Born in 1918 and died in 2013">
        <p class="myCaptions">.</p>
        <img class="mySlides img-responsive imgTemplate figcaption" src="https://wallpapercave.com/wp/93WKwBt.jpg" alt="Nelson Mandela Quote - 'No one is born hating another person because of the color of his skin, or his background, or his religion. People must learn to hate, and if they can learn to hate, they can be taught to love, for love comes more naturally to the human heart than its opposite.'">
        <p class="myCaptions">.</p>
        <img class="mySlides img-responsive imgTemplate figcaption" src="http://www.africaresource.com/rasta/wp-content/uploads/2010/04/Mandela-and-Col-Wakenu.jpg" alt="Mandela and his Ethiopian Military Training Instructor Col Wakenu">
        <p class="myCaptions">Nelson Mandela and his Ethiopian Military Training Instructor Col Wakenu </p>
        <img class="mySlides img-responsive imgTemplate figcaption" src="https://olawandesalam.files.wordpress.com/2013/12/mandela3.jpg" alt="The Nobel Peace Prize 1993 was awarded jointly to Nelson Mandela and Frederik Willem de Klerk for their work for the peaceful termination of the apartheid regime, and for laying the foundations for a new democratic South Africa"/>
        <p class="myCaptions">The Nobel Peace Prize 1993 was awarded jointly to Nelson Mandela and Frederik Willem de Klerk for their work for the peaceful termination of the apartheid regime, and for laying the foundations for a new democratic South Africa </p>
        <div class="slideNumbButtons text-center">
<!--           Javascript code fills in the html script -->
        </div>
      </div>
     </div>
    <div class="col-xs-12">
      <div class="textBox">
        <h3 class="listHeading">Key events in Nelson Mandela's life<button onclick="factDisplayer(1)" class="factButton" id="factchanger"><i>Interesting Facts</i></button></h3>
        <div class="timeline">
          <ul>
            <li><b>1918</b> — Born to Hendry Mphakanyiswa, a Thembu chief, and Nosekeni Qunu in the Umtata district of the Transkei, at a time when virtually all of Africa was under European colonial rule.</li>
            <li><b>1942</b> — Joins African National Congress, South Africa's main campaigner for black equality.</li>
            <li><b>1943</b> — Receives BA from Fort Hare after completing correspondence courses through University of South Africa.</li>
            <li><b>1948</b> — National Party, dominated by white Dutch-descended Afrikaners, is elected to power and begins installing apartheid, a system of complete racial segregation. It will rule without interruption for 46 years.
1952 — Mandela leads the Defiance Campaign, encouraging people to break racial separation laws. Convicted under Suppression of Communism Act, banned from attending gatherings and leaving Johannesburg. Passes exam to qualify as an attorney and, with Tambo, forms the first black law partnership in the country.</li>
            <li><b>1961</b> — Helps establish ANC guerrilla wing, Umkhonto we Sizwe, or Spear of the Nation.</li>
            <li><b>1964</b> — At a time when many African colonies have become independent and Mandela is on trial for sabotage, he declares from the dock that he is "prepared to die" for a democratic South Africa.</li>
            <li><b>1964</b> — Mandela and six others are sentenced to life imprisonment and sent to notorious Robben Island to serve their sentences</li>
            <li><b>1973</b> — Refuses a government offer of release on condition he agrees to a kind of exile in his native Transkei.</li>
            <li><b>1985</b> — While in hospital for prostate surgery he is visited by Justice Minister Kobie Coetsee, the beginning of a political and diplomatic process that will lead on Dec. 9, 1988, to his transfer to better prison conditions on the mainland, north of Cape Town.</li>
            <li><b>1990</b> — At the opening of Parliament, de Klerk announces the legalization of all political organizations including the African National Congress.</li>
            <li><b>1990</b>— De Klerk announces Mandela will be released the next day.</li>
            <li><b>1990</b>— Mandela walks out of prison, hand in hand with wife Winnie, to cheering crowds.</li>
            <li><b>1993</b>— Mandela and de Klerk share Nobel Peace Prize.</li>
            <li><b>1994</b>— Mandela inaugurated as South Africa's first black president after ANC wins South Africa's first all-race election.</li>
            <li><b>1998</b>— Mandela weds former Mozambican first lady Graca Machel on his 80th birthday.</li>
            <li><b>1999</b>— Mandela retires after one term, a rarity among African presidents, but continues to be active in causes promoting world peace, supporting children and fighting AIDS.</li>
            <li><b>2004</b>— Announces retirement from public life.</li>
            <li><b>2013</b>— The government says Mandela is admitted to a hospital with a recurring lung infection. Officials describe his condition as serious but stable.</li>
            <li><b>December 5, 2013</b>— Mandela dies at age 95.</li>
           </ul>
        </div>
        <p class="quote"><i>"What I will remember most about Mr. Mandela is that he was a man whose heart, soul, and spirit could not be contained or restrained by racial and economic injustices, metal bars, or the burden of hate and revenge. He taught us forgiveness on a grand scale."</i></br> - Muhammad Ali<p>
       <p>Learning more about <a href="https://www.nelsonmandela.org/content/page/biography">Nelson Mandela</a> and the <a href="https://en.wikipedia.org/wiki/Apartheid">South African Apartheid</a> is just one click away! #EducationIsPower</p>  
     </div>
    </div>
   </div>
   </div>
  <a href="#bookmark1" class="backToTop">Back to top</a>
  </div>
<footer>Written by <a href="http://www.politico.com/story/2013/12/nelson-mandela-timeline-100746">The Associated Press</a> and Coded by <a href="https://www.linkedin.com/in/vivek-patel-477156119/">Vivek Patel</a>. Flag GIF by <a href="https://www.crossed-flag-pins.com/animated-flag-gif/flags-South-Africa.html"> Promex</a>.</footer>

</body>



              
            
!

CSS

              
                body {
  margin: 60px auto;
  background-color: #FFFBE5;
  min-width: 300px;
}
.mainBox { 
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px;
  border: 6px dotted gold;
}
.title {
  font-family: Helvetica;
  font-size: 45px;
  line height: 0;
  line-height: 85px;
}
.titleBox {
  margin: 50px auto;
}

.imgTemplate {
  border-radius: 10px;
  border: 5px solid white;
  margin: 0 auto;
  padding: 0;
  width: 80%;
  max-height: 380px;
}
.imgBox {
  padding: 0px;
  margin: 0 auto;
  position: relative;
}
.mySlides {
  display: none;
}
.myCaptions {
  font-size: 10px;
  text-align: center;
  margin: 0 auto;
  padding: 5px;
  max-width: 500px;
  position: relative;
  display: none;
}
.textBox { 
  padding: 15px;
  font-family: Calibri;
  font-size: 20px;
  margin: 10px auto;
  text-align: justify;
}
.gif {
  height: 60px;
  width: 100px;
  margin: 0 10px;
  display: inline;
}

.slideNumb {
  text-align: center;
  padding: 1px 5px;
  font-size: 15px;
  margin: 10px;
  border-radius: 3px;
  background-color: #FFEDCC;

}

.listHeading {
  font-size: 25px;
  padding: 10px;
  text-align: center;
}

.factButton {
  font-size: 25px;
  border-radius: 5px;
  background-color: #FFF5C3;
  margin: 0 0 0 45px;
}

.timeline {
  font-family: Helvetica;
  font-size: 15px;
  text-align: justify;
  max-width: 600px;
  margin: 0 auto;
}

.quote {
  margin: 50px;
}

.backToTop {
  display: block;
  text-align: center;
}

footer {
  text-align: center;
  font-size: 15px;
  margin: 20px;
}
              
            
!

JS

              
                  var counter = 0;

function factDisplayer(n) {
  var facts = ["<b>He lived up to his name:</b> Mandela's birth name was Rolihlahla. In his Xhosa tribe, the name means pulling the branch of a tree or troublemaker. (The name &quot;Nelson&quot; was given to him by his teacher on his first day of elementary school. It's not clear why she chose that particular name. It was the 1920s, and African children were given English names so colonial masters could pronounce them easily).<br> <small>Click for more</small>", "<b>He had a cameo in a Spike Lee film:</b> He had a big part in Spike Lee's 1992 biopic &quot;Malcolm X.&quot; At the very end of the movie, he plays a teacher reciting Malcolm X's famous speech to a room full of Soweto school kids. But the pacifist Mandela wouldn't say &quot;by any means necessary.&quot; So Lee cut back to footage of Malcolm X to close out the film.<br><small>Click for more</small>", "<b>There's a woodpecker named after him:</b> From Cape Town to California, streets named after Mandela abound. But he's also been the subject of some rather unusual tributes. Last year, scientists named a prehistoric woodpecker after him: Australopicus nelsonmandelai. In 1973, the physics institute at Leeds University named a nuclear particle the &quot;Mandela particle.&quot;<br> <small>Click for more</small>", "<b>He married a first lady:</b> Before tying the knot with Mandela on his 80th birthday, Graca Machel was married to Mozambique President Samora Machel. Her marriage to Mandela after her husband's death means she has been the first lady of two nations.<br><small>Click for more</small>", "<b>He was a master of disguise:</b> When Mandela was eluding authorities during his fight against apartheid, he disguised himself in various ways, including as a chauffeur. The press nicknamed him &quot;the Black Pimpernel&quot; because of his police evasion tactics. &quot;I became a creature of the night. I would keep to my hideout during the day, and would emerge to do my work when it became dark,&quot; he says in his biography, &quot;Long Walk to Freedom.&quot;<br><small>Click for more</small>", "<b>A bloody sport intrigued him:</b> Besides politics, Mandela's other passion was boxing. &quot;I did not like the violence of boxing. I was more interested in the science of it - how you move your body to protect yourself, how you use a plan to attack and retreat, and how you pace yourself through a fight&quot; he says in his biography.<br><small>Click for more</small>", "<b>His favorite dish is probably not yours:</b> He's been wined and dined by world leaders. But what Mandela loved eating most was tripe. Yup, the stomach lining of farm animals.<br><small>Click for more</small>", "<b>He quit his day job:</b> He studied law at the University of Witwatersrand in Johannesburg and opened the nation's first black law firm in the city in 1952.<br><small>Click for more</small>", "<b>He was on the U.S. terror watch list:</b> Mandela wasn't removed from the U.S. terror watch list until 2008 -- at age 89. He and other members of the African National Congress were placed on it because of their militant fight against apartheid.<br><small>Click for more</small>", "<b>He drew his inspiration from a poem:</b> While he was in prison, Mandela would read William Ernest Henley's &quot;Invictus&quot; to fellow prisoners. The poem, about never giving up, resonated with Mandela for its lines &quot;I am the master of my fate. I am the captain of my soul.&quot; You may know it from the movie by the same name starring Morgan Freeman as Mandela. <small>Click for more</small>"];
  counter += n;
  if (counter > facts.length) {counter = 1;}
  var x = document.getElementsByClassName("factButton");
  x[0].innerHTML = facts[counter - 1];
    setTimeout(function reset(){x[0].innerHTML = "Interesting Facts";} ,130000);
  }

var myIndex = 0;
slideShow();

function slideShow(n) {
    var x = document.getElementsByClassName("mySlides");
    var y = document.getElementsByClassName("myCaptions");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none"; 
       y[i].style.display = "none"; 
    }

    if (n != null) {
      myIndex = [n - 1];
      x[myIndex].style.display = "block";
      y[myIndex].style.display = "block";
      var timer = setTimeout(slideShow, 3000);
    }
    else {
      myIndex++;
    if (myIndex >= x.length) {
      myIndex = 0;
        }
    x[myIndex].style.display = "block";
    y[myIndex].style.display = "block";
     var timer2 = setTimeout(slideShow, 3000);
         }
     clearTimeout(timer);
}

slideNumber();
function slideNumber() {
  var x = document.getElementsByClassName("mySlides");
  var y = document.getElementsByClassName("slideNumbButtons");
  var html = "";
 for(i = 0; i < x.length; i++) {
   html += "<button class='slideNumb' onclick='slideShow(" + (i + 1) + ")'>" + (i + 1) + "</button>"
 }
    y[0].innerHTML = html;
}





              
            
!
999px

Console