Skip to content

Instantly share code, notes, and snippets.

@DarkFM

DarkFM/index.html

Created December 31, 2016 22:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DarkFM/4ce686a50606474eada3743cfe0791e2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DarkFM/4ce686a50606474eada3743cfe0791e2 to your computer and use it in GitHub Desktop.
Download ZIP
NdKGJP
Raw
index.html
<div class="container-fluid">
<h1 class="text-center" id="headingFont">Tribute to Nelson Mandela</h1>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img class="img-responsive" src="http://b-i.forbesimg.com/mfonobongnsehe/files/2013/12/Mandela.jpg" alt="Image of Nelson Mandela" style="max-height:220px" />
<div class="text-center textfont">Nelson Mandela, was the face of the Anti-apartheid movement</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img class="img-responsive" src="http://i.telegraph.co.uk/multimedia/archive/02423/19900211-release_2423573k.jpg" alt="Nelson Mandela and wife Winnie celebrate release from Victor Verster prison" style="max-height:220px" />
<div class="text-center textfont">ANC leader Nelson Mandela and wife Winnie raise their fists upon his release from Victor Verster prison in Paarl, outside Cape Town</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img class="img-responsive" src="http://i.telegraph.co.uk/multimedia/archive/02423/19931210-nobel-de-_2423678k.jpg" alt="South African President FW de Klerk and Nelson Mandela hold up shared 1993 Nobel Peace Prize" style="max-height:220px" />
<div class="text-center textfont">South African President FW de Klerk and African National Congress leader Nelson Mandela hold up medals and certificates after they were jointly awarded the 1993 Nobel Peace Prize</div>
</div>
</div>
</div>
<div class="container-fluid">
<p class="textfont2 text-center">Here is a timeline of his life:</p>
<div class="row" >
<div class="col-md-6 well">
<div id="top-level">
<ul class="list-group">
<li class="list-group-item"><span class="label label-info">1918:</span> Born in Transkei, South Africa on July 18, 1918. He was the son of a local tribal leader of the Tembu tribe.</li>
<li class="list-group-item"><span class="label label-info">1938:</span> Accepted into University of Fort Hare, a black institution</li>
<li class="list-group-item"><span class="label label-info">1940:</span> Became involved in student politics and is expelled as a result of participation in a student strike</li>
<li class="list-group-item"><span class="label label-info">1943:</span> Joins the Afican National Congress (A.N.C.) and actively takes part in the struggle against apartheid</li>
<a href="#listdrop1" class="list-group-item" data-toggle="collapse" data-parent="#top-level"><span class="label label-info">1944:</span> Click to find out more</a>
<div id="listdrop1" class="collapse">
<a href="#image1" class="list-group-item" data-toggle="collapse">Marries Evelyn Ntoko Mase</a>
<div class="collapse" id="image1">
<img class="img-responsive" src="https://cbs947thewave.files.wordpress.com/2013/12/96494101.jpg?w=406" alt="mandela and Evelyn" />
</div>
<li class="list-group-item">Forms the African National Congress (A.N.C.) Youth League after becoming disenchanted with the cautious approach of the older members of the A.N.C.</li>
</div>
<li class="list-group-item"><span class="label label-info">1948:</span> Opposing national party takes power of the country, laying the foundation for Apartheid</li>
<li class="list-group-item"><span class="label label-info">1952:</span> Mr. Mandela and Oliver Tambo open South Africa’s first black law practice.</li>
<li class="list-group-item"><span class="label label-info">1956:</span> Mandela arrested on treason charges along with 155 others who called for a nonracial state in South Africa</li>
<a href="#listdrop2" class="list-group-item" data-toggle="collapse" data-parent="#top-level"><span class="label label-info">1958:</span>Click to find out more</a>
<div class="collapse" id="listdrop2">
<a href="#image2" data-toggle="collapse" class="list-group-item" >Divorces Evelyn and marries Nomzamo Winifred Madikizela</a>
<div id="image2" class="collapse">
<img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/cb/64/00/cb640081b9735e25956d85e282ed4e4a.jpg" alt="Mandela and new wife Nomzamo" />
</div>
</div>
<li class="list-group-item"><span class="label label-info">1961:</span> Acquitted of Treason and goes undeground to form a guerilla army called Umkhonto we Sizwe, or Spear of the Nation</li>
<li class="list-group-item"><span class="label label-info">1962:</span> He is arrested again after eturning from a trip abroad. Sentenced to 5 years in prison</li>
<li class="list-group-item"><span class="label label-info">1963:</span> A government raid of a farm in Rivonia uncovers the secrets of the A.N.C that shows documents outlining the group’s plan for guerrilla warfare. </li>
</ul>
</div>
</div>
<div class="col-md-6 well" >
<div id="top-level-right" >
<ul class="list-group" id="right-row">
<li class="list-group-item"><span class="label label-info">1964:</span> Mr. Mandela and seven others are convicted and sentenced to life in Robben Island prison; where he will stay for 18 years</li>
<li class="list-group-item"><span class="label label-info">1982:</span> Mandela and other famous prisoners are moved from Robben Island to Pollsmoor prison to reduce their influence</li>
<li class="list-group-item"><span class="label label-info">1985:</span> South Africa’s president, P. W. Botha, offers to free Mr. Mandela if he renounces violence. Mr. Mandela refuses, saying the government must first dismantle apartheid.</li>
<li class="list-group-item"><span class="label label-info">1988:</span> Mr. Mandela is transferred to the Victor Verster Prison Farm</li>
<li class="list-group-item"><span class="label label-info">1990:</span> Mr. Mandela, now 71, is freed without conditions, ending 27 and a half years of imprisonment. </li>
<li class="list-group-item"><span class="label label-info">1992:</span> Breakup of Second Marriage</li>
<li class="list-group-item"><span class="label label-info">1993:</span> Mandela receives a Nobel Peace Prize</li>
<li class="list-group-item"><span class="label label-info">1994:</span> Mandela becomes president of South Africa</li>
<li class="list-group-item"><span class="label label-info">1998:</span> Third Marriage at 80 to Graça Machel, the 52-year-old widow of the former president of Mozambique</li>
<li class="list-group-item"><span class="label label-info">2012:</span> Recurring health problems partly due to Tubercoulosis he contracted while in prison causes him to be hospitalized.</li>
<li class="list-group-item"><span class="label label-info">2013:</span> He dies at the age of 91 :(</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Raw
style.css
.thumbnail {
background-color: rgba(187, 206, 237, 0.4);
height: 300px;
}
#headingFont {
font-family: Orbitron;
color: rgb(70, 88, 117);
padding: 10px 10px 10px 10px;
}
.textfont {
font-size: 15px;
font-family: Athiti;
}
.textfont2 {
font-size: 30px;
font-family: Trirong;
}
li {
font-family: Shadows;
}
a{
font-family: Shadows;
}
.container-fluid{
background-color: bisque;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Athiti|Orbitron|Shadows+Into+Light|Trirong" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment