FelaKuti tribute

felakuti-tribute.markdown

FelaKuti tribute

A Pen by Bonface Munyoki on CodePen.

License.

index.html

<div class="container-fluid nullify-padding">
  <section class="introduction">
    <h1 class="main-heading text-center">
      Fela Kuti </h1>
    <div class="row parent">
      <div class="col-xs-offset-2 col-xs-5 col-md-offset-2 col-md-5"
           <figure class="figure">
      <img class="img-responsive fela-img figure-img img-fluid rounded" src="http://atlantablackstar.com/wp-content/uploads/2014/07/Fela7-npr.org_.jpg" alt="Olufela Olusegun Oludotun Ransome-Kuti">
      <figcaption class="text-center figure-caption">Fela Kuti</figcaption>
      </figure>
    </div>
  <div class="col-md-5">
    <table>
      <tr>
        <td><span class="text-bold">Birth Name</span></td>
        <td>Olufela Olusegun Oludotun Ransome-Kuti</td>
      </tr>
      <tr>
        <td><span class="text-bold">Popular name</span></td>
        <td>Fela Kuti</td>
      </tr>
      <tr>
        <td><span class="text-bold">Born</span></td>
        <td>15 October 1938</td>
      </tr>
      <tr>
        <td><span class="text-bold">Died</span></td>
        <td> 2 August 1997</td>
      </tr>
      <tr>
        <td><span class="text-bold">Genres</span></td>
        <td>Afrobeat, Highlife</td>
      </tr>

    </table>
  </div>
</div>
</section>
<section class="introduction">
  <div class="row">
    <div class="col-xs-offset-2 col-xs-10 col-md-6 col-md-offset-3">
      <p> Fela Kuti was a Nigerian multi-instrumentalist, musician and composer. He pioneered the <a href="https://en.wikipedia.org/wiki/Afrobeat" target="_blank">Afrobeat</a> music genre. In addition to being a musician, Felas was a world reknown human rights activist and a political maverick. During the height of his popularity, many people hailed him as one of Africa's most "challenging and charismatic music performers."
      </p>
    </div>
  </div>
</section>

<section class="color timeline">
  <h2 class="text-center">Timeline</h2>
  <ul>

    <li>
      <div>
        <time>October 15 1938</time>
        Fela was born in Abeokuta, Ogun State, Nigeria.
      </div>
    </li>

    <li>
      <div><time>1958</time>
        Sent to London to study medicine by instead decided to study music ath the Trinity College of Music, the trumpet being his preferred instrument. While in London, he formed the band Koola Lobitos, playing a fusion of jazz and high life.
      </div>
    </li>


    <li><div><time>1960</time>
      Married his first wife, Remi Taylor, with whom he had 3 children.
      </div>
    </li>

    <li><div><time>1963</time>
      Fela moved back to Nigeria, re-formed Koola Lobitos and trained as a radio producer for the Nigerian Broadcasting Corporation. He played for some time with Victor Olaiya and his All Stars.</div>
    </li>

    <li><div><time>1967</time>
      He moved to Ghana where he would first call his style of music Afrobeat</div>
    </li>

    <li><div><time>1969</time>
      He took the band to the US where they spent 10 months in Los Angeles. While there, he discovered the Black Power movement through Sandra Smiths. He renamed tha band Nigeria '70.</div>
    </li>

    <li><div><time>1970s</time>
      After Fela and his band returnde to Nigeria. the group was renamed The Africa '70. He then formed the Kalakuta Republic, a commune, a recording studio, and a home for the many people connected to the band that he later declared independent from the Nigerian state.
      </div>
    </li>

    <li><div><time>1972</time>
      Ginger Baker recorded Stratavarious with Fela appearing alongside Bobby Tench. Around this time, Kuti became even more involved in the Yoruba religion.
      </div>
    </li>

    <li><div><time>1977</time>
      Fela and the Afrika '70 released the album Zombie, a scathing attack on Nigerian soldiers using the zombie metaphor to describe the methods of the Nigerian military. The album was a smash hit and infuriated the government, setting off a vicious attack against the Kalakuta Republic, during which one thousand soldiers attacked the commune. Fela was severely beaten, and his elderly mother (whose house was located opposite the commune) was thrown from a window, causing fatal injuries. The Kalakuta Republic was burned, and Fela's studio, instruments, and master tapes were destroyed. Fela claimed that he would have been killed had it not been for the intervention of a commanding officer as he was being beaten. Fela's response to the attack was to deliver his mother's coffin to the Dodan Barracks in Lagos, General Olusegun Obasanjo's residence, and to write two songs, "Coffin for Head of State" and "Unknown Soldier", referencing the official inquiry that claimed the commune had been destroyed by an unknown soldier. Fela and his band then took residence in Crossroads Hotel, as the Shrine had been destroyed along with his commune.
      </div>
    </li>

    <li><div><time>1978</time>
      Fela married 27 women, many of whom were his dancers, composers, and singers to mark the anniversary of the attack on the Kalakuta Republic. Later, he was to adopt a rotation system of keeping only 12 simultaneous wives. The year was also marked by two notorious concerts, the first in Accra in which riots broke out during the song "Zombie", which led to Fela being banned from entering Ghana. The second was at the Berlin Jazz Festival after which most of Fela's musicians deserted him, due to rumours that Fela was planning to use the entire proceeds to fund his presidential campaign. He later on went to form his own political party, which he called Movement of the People(MOP), in ordet to "clean up society like a mop". Apart from being a mass political party, MOP preached Nkrumahism and African soc
      </div>
    </li>

    <li><div><time>1979</time>
      Fela put himself forward for President in Nigeria's first elections for more than a decade, but his candidature was refused. At this time, Fela created a new band called Egypt '80 (reflecting his reading of pan-African literature) and continued to record albums and tour the country. He further infuriated the political establishment by dropping the names of ITT Corporation vice-president Moshood Abiola and then General Olusegun Obasanjo at the end of a hot-selling 25-minute political screed entitled "I.T.T. (International Thief-Thief)".
      </div>
    </li>

    <li><div><time>1984</time>
      Muhammadu Buhari's government, of which Kuti was a vocal opponent, jailed him on a charge of currency smuggling which Amnesty International and others denounced as politically motivated. Amnesty designated him a prisoner of conscience, and his case was also taken up by other human rights groups. After 20 months, he was released from prison by General Ibrahim Babangida. On his release he divorced his 12 remaining wives, saying that "marriage brings jealousy and selfishness".
      </div>
    </li>

    <li><div><time>1986</time>
      Fela performed in Giants Stadium in New Jersey as part of the Amnesty International A Conspiracy of Hope concert, sharing the bill with Bono, Carlos Santana, and The Neville Brothers.
      </div>
    </li>

    <li><div><time>1989</time>
      Fela and Egypt '80 released the anti-apartheid Beasts of No Nation that depicts on its cover U.S. President Ronald Reagan, UK Prime Minister Margaret Thatcher and South African State President Pieter Willem Botha, that title of the composition, as Barrett notes, having evolved out of a statement by Botha: "This uprising [against the apartheid system] will bring out the beast in us."
      </div>
    </li>

    <li><div><time>1993</time>
      Fela and four members of the Afrika '70 organization were arrested for murder. The battle against military corruption in Nigeria was taking its toll, especially during the rise of dictator Sani Abacha. Rumours were also spreading that he was suffering from an illness for which he was refusing treatment.
      </div>
    </li>

    <li><div><time>August 3 1997</time>
      Olikoye Ransome-Kuti, already a prominent AIDS activist and former Minister of Health, announced his younger brother's death a day earlier from Kaposi's sarcoma brought on by AIDS. More than a million people attended Fela's funeral at the site of the old Shrine compound. The New Afrika Shrine has opened since Fela's death in a different section of Lagos under the supervision of his son Femi Kuti.
      </div>
    </li>

  </ul>
</section>

script.js

(function() {

  'use strict';

  // define variables
  var items = document.querySelectorAll(".timeline li");

  // check if an element is in viewport
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function callbackFunc() {
    for (var i = 0; i < items.length; i++) {
      if (isElementInViewport(items[i])) {
        items[i].classList.add("in-view");
      }
    }
  }

  // listen for events
  window.addEventListener("load", callbackFunc);
  window.addEventListener("resize", callbackFunc);
  window.addEventListener("scroll", callbackFunc);

})();

style.css

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html{
    margin: 0;
    padding: 0;
}
body {
  width: 100%;
  position: relative;
  background: #ECF0F1!important;
  overflow-x: hidden;
  margin-top: 0!important;
  padding-bottom: 50px;
  font: 'Oxygen', sans-serif;
}


/* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.main-heading{
    padding-top: 1em;
    padding-bottom: 1em;
    
}
section h1 {
    color: #2c3e50;
    font-family: 'Oswald', sans-serif;
    font-size: 4em;
    letter-spacing:2px;
} 
.figure{
    position: relative;
}

.nullify-padding{
    padding: 0 !important;
}

.fela-img{
    width: 25em;
    margin-left: auto;
    margin-right: auto;
}

.introduction {
  background: #ECF0F1;
  color: #ecececff;
  padding-bottom: 5em;
  padding-right: 2em;
  padding-left: 2em;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

figcaption{
    color:#1a1a1aff;
    font-size: 16px;
    margin-top: 1em;
    margin-bottom: 1em;
}
p{
    color: #1a1a1aff;
    font-family: 'Oxygen', sans-serif;
    font-size: 18px;
    line-height: 1.5;
}
h1 {
  font-size: 2.5rem;
}

/* TABLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.parent{
    display: block;
    position: relative;
}
table{
    height: 300px;
    border-top: 2px solid #2c3e50;
    display:flex;
    align-items: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 14px;
    lineheight: 1.5;
    color:#1a1a1aff;
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
}
.text-bold{
    font-weight: 900;
}
td{
    padding-left: 2em!important;
    padding-top: .5em!important;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section h2 {
    color: #ECF0F1;
    font-family: 'Oswald', sans-serif;
    font-size: 3.5em;
    letter-spacing:2px;
    background: #2980B9;
    margin-bottom: 0!important;
    margin-top: 0!important;
    padding-top: 1em;
}
.timeline ul {
  background: #2980B9;
  padding: 50px 0;
  font-family: 'Oxygen', sans-serif;
 
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #2C3E50;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:  #3498DB;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #3498DB;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #3498DB transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #3498DB;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: 'Oswald', sans-serif;
}


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li::after {
  transition: background .5s ease-in-out;
}

.timeline ul li.in-view::after {
  background: #2C3E50;
}

.timeline ul li div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline ul li:nth-child(odd) div {
  transform: translate3d(200px, 0, 0);
}

.timeline ul li:nth-child(even) div {
  transform: translate3d(-200px, 0, 0);
}

.timeline ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}

styles

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