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.

              <div class="container">
  <div class="row">
    <div class="col-sm-8 padding setHeight  wow fadeInDownBig" data-wow-duration="2s" data-wow-delay="2s">
      <h1 class="tangerie">Facts About Mandela</h1>
      	<div class="banner">
		<div class="typed_wrap">
			<h2><span class="typed"></span></h2>
    <div class="col-sm-4 padding  wow zoomInUp" data-wow-duration="2s" data-wow-delay="2s">
      <img class="img-fluid setHeight" src="https://upload.wikimedia.org/wikipedia/commons/a/af/Nelson_Mandela%2C_2000_%282%29.jpg">
  <div class="row " >
    <div class="col-sm-3 padding wow fadeInUpBig" data-wow-duration="2s" data-wow-delay="2s">
      <img class="img-fluid" src="http://www.mandela.gov.za/images/gallery/celebrate_big.jpg"/>
      <h1> Quick Facts </h1>
      <h3 class="lead bold">Did you know? </h3>
      <p class="lead">Mandela's African name "Rolihlahla" means "troublemaker."</p>
      <h3 class="lead bold">Did you know? </h3>
        <p class="lead">Mandela became the first black president of South Africa in 1994, serving until 1999.</p>
      <h3 class="lead bold">Did you know? </h3>
      <p class="lead">Mandela was imprisoned from 1962-1990 for treason and conspiracy against the government.</p>
      <h3 class="bold lead"> Education </h3>
      <p class="lead">
        Wesleyan College, University of London, University College of Fort Hare, University of Witwatersrand, Johannesburg, Clarkebury Boarding Institute
    <div class="col-sm-9 wow fadeInUpBig" ata-wow-duration="2s" data-wow-delay="2s">
      <h1 > Biography of Nelson Mandela</h1>
      <p>Nelson Mandela became the first black president of South Africa in 1994, serving until 1999. A symbol of global peacemaking, he won the Nobel Peace Prize in 1993.</p>
      <h3 class="bold">Who Was Nelson Mandela?</h3>
      <p>Nelson Rolihlahla Mandela (July 18, 1918 to December 5, 2013) was a nonviolence anti-apartheid activist, politician and philanthropist who became South Africa’s first black president from 1994 to 1999. Becoming actively involved in the anti-apartheid movement in his 20s, Mandela joined the African National Congress in 1942. For 20 years, he directed a campaign of peaceful, nonviolent defiance against the South African government and its racist policies. Beginning in 1962, Mandela spent 27 years in prison for political offenses. In 1993, Mandela and South African President F.W. de Klerk were jointly awarded the Nobel Peace Prize for their efforts to dismantle the country's apartheid system. For generations to come, Nelson Mandela will continue to be a source of inspiration for civil rights activists worldwide.</p>
      <h3 class="bold">When and How Did Nelson Mandela Die? </h3>
      <p>On December 5, 2013, at the age of 95, Nelson Mandela died at his home in Johannesburg, South Africa. After suffering a lung infection in January 2011, Mandela was briefly hospitalized in Johannesburg to undergo surgery for a stomach ailment in early 2012. He was released after a few days, later returning to Qunu. Mandela would be hospitalized many times over the next several years — in December 2012, March 2013 and June 2013 — for further testing and medical treatment relating to his recurrent lung infection.

Following his June 2013 hospital visit, Mandela's wife, Graca Machel, canceled a scheduled appearance in London to remain at her husband's his side, and his daughter, Zenani Dlamini, flew back from Argentina to South Africa to be with her father. Jacob Zuma, South Africa's president, issued a statement in response to public concern over Mandela's March 2013 health scare, asking for support in the form of prayer: "We appeal to the people of South Africa and the world to pray for our beloved Madiba and his family and to keep them in their thoughts," Zuma said.
      <p>On the day of Mandela’s death, Zuma released a statement speaking to Mandela's legacy: "Wherever we are in the country, wherever we are in the world, let us reaffirm his vision of a society ... in which none is exploited, oppressed or dispossessed by another," he said.</p>
      <h3 class="bold">Mandela Day</h3>
      <p>In 2009, Mandela's birthday (July 18th) was declared Mandela Day, an international day to promote global peace and celebrate the South African leader's legacy. According to the Nelson Mandela Centre of Memory, the annual event is meant to encourage citizens worldwide to give back the way that Mandela has throughout his lifetime. A statement on the Nelson Mandela Centre of Memory's website reads: "Mr. Mandela gave 67 years of his life fighting for the rights of humanity. All we are asking is that everyone gives 67 minutes of their time, whether it's supporting your chosen charity or serving your local community."</p>
      <p>If you interested in reading more about Nelson Mandela, you can learn more on his <a href="https://www.nelsonmandela.org/content/page/biography" target="_blank">Biography Page</a>
              /* tangerine font */
@import url(https://fonts.googleapis.com/css?family=Tangerine);

/* bigshot one font */
@import url(https://fonts.googleapis.com/css?family=Bigshot+One);

/* Over the rainbow font */
@import url(https://fonts.googleapis.com/css?family=Over+the+Rainbow);

/* pacifico font */
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* Content styling */
/* fonts for the text */
@import url('https://fonts.googleapis.com/css?family=Merriweather:700|Roboto');
  text-align: center;
  color: white;
  font-family: Tangerine;
  text-decoration: underline;

  height: 375px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/27/Bill-Clinton-with-Nelson-Mandela.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  text-align: center;
  color: white;
  font-family: Pacifico;
h1, h3{
  text-align: center;
  font-family: Pacifico;
  background-color: #F5F1F1;

  text-align: center;
  margin-buttom: 5px;
  font-weight: bold;
  text-align: justify;
  font-family: Roboto;
		strings: ["President of South Africa from 1994-1999.", "A Freedom Fighter.", " A Human Rights Activist.", " A True Leader.", "The father of Modern South Africa.", " Received the Nobel Peace Prize in 1993."],
		// Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
		stringsElement: null,
		// typing speed
		typeSpeed: 30,
		// time before typing starts
		startDelay: 1200,
		// backspacing speed
		backSpeed: 20,
		// time before backspacing
		backDelay: 500,
		// loop
		loop: true,
		// false = infinite
		// show cursor
		showCursor: false,
		// character for cursor
		cursorChar: "|",

  wow = new WOW(
                      boxClass:     'wow',      // default
                      animateClass: 'animated', // default
                      offset:       0,          // default
                      mobile:       true,       // default
                      live:         true        // default

🕑 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.