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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!DOCTYPE html> 

<html lang='en'>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Playfair+Display&family=Sahitya&display=swap" rel="stylesheet">
  <title>A tribute to Fela by curious_avocado</title>
  <script> https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</script>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
</head>
<body> 
<main id="main">
  <header>
  <h1 id="title">ANIKULAPO</h1>
  <h3>"the one who carries death in his pouch"</h3>
  </header>
  <div id="img-div">
    <figure>
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.5knKCDDJLE5XYnNvbLaY1wAAAA%26pid%3DApi&f=1" id="image" alt="FELA KUTI">
      <br>
     <figcaption id="img-caption"> FELA KUTI born Olufela Olusegun Oludotun Ransome-Kuti</figcaption>
     </figure>
  </div>
  
  <div id="tribute-info">
    <div>
    <article>
     <hr><h2>THE MAN</h2></hr>
      <section>
       <p> Fela Anikulapo Kuti (15 October 1938 – 2 August 1997) was a Nigerian multi-instrumentalist, musician, composer, pioneer of the Afrobeat music genre and human rights activist. At the height of his popularity, he was referred to as one of Africa's most "challenging and charismatic music performers". Fela was born Olufela Olusegun Oludotun Ransome-Kuti in Abeokuta, the modern-day capital of Ogun State in the Federal Republic of Nigeria, then a city in the British Colony of Nigeria. Fela's Music was largely instrumental  in the fight against the corrupt military government of Nigeria at the time (pun intended).</p>
      </section>
    
      <div>
       <figure>
      <img id="the-man-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.M0Clh38H1xjFDS2qXmHNAAHaEu%26pid%3DApi&f=1" alt="Fela surrounded by photographers"> <figcaption>"To be honest and truthful in all endeavours is an experience, not a regret"</figcaption>
         </figure>
      </div>
     
      </article>
    </div>
   <div> 
   <article id="the-music">
     <hr><h2>THE MUSIC</h2></hr>
       <section>
         <p>"With my Music, I create change....I am using my music as a weapon" -Fela Kuti</p>
        <p> The musical style of Fela is called Afrobeat, a style he largely created, which is a complex fusion of jazz, funk, Ghanaian highlife, psychedelic rock and traditional West African chants and rhythms. 
Afrobeat is characterized by a fairly large band with many instruments, vocals and a musical structure featuring jazzy, funky horn sections. A riff-based "endless groove" is used, in which a base rhythm of drums, shekere, muted West African-style guitar and melodic bass guitar riffs are repeated throughout the song. Fela's music was popular among the Nigerian public and Africans in general.In fact, he made the decision to sing in Pidgin English so that his music could be enjoyed by individuals all over Africa, where the local languages spoken are very diverse and numerous. </p>
       </section>
  
     <div>
       <figure>
       <img id="the-music-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.QES7P_T_y6ZvFxSkBoG0ewHaLe%26pid%3DApi&f=1" alt="Fela in front of a microphone">
       <figcaption>"To think how many Africans suffer in oblivion. That makes me sad, despite my sadness, I create joyful rhythms, I am an artist, I want people to be happy and I can do it by playing happy music."</figcaption>
       </figure>
     </div>
     </article>
       </div>
       <div>
      <article>
        <hr><h2>LOVE, LIFE AND DEATH</h2></hr>
        <section><p>In 1960, Fela married his first wife, Remilekun (Remi) Taylor, with whom he would have three children (Femi, Yeni, and Sola).
          Kuti was a political giant in Africa from the 1970s until his death. He criticized the corruption of Nigerian government officials and the mistreatment of Nigerian citizens. He spoke of colonialism as the root of the socio-economic and political problems that plagued the African people especially through his Music. Corruption was one of the worst political problems facing Africa in the 70s, if not the worst; and Nigeria was among the most corrupt countries of the time. Its government was responsible for election rigging and coups that ultimately worsened poverty, economic inequality, unemployment, and political instability, which further promoted corruption and thuggery. Fela's protest songs covered themes inspired by the realities of corruption and socio-economic inequality in Africa.
          Kuti's open vocalization of the violent and oppressive regime controlling Nigeria did not come without consequence. He was arrested on over 200 different occasions and spent time in jail, including his longest stint of 20 months after his arrest in 1984. On top of the jail time, the corrupt government would send soldiers to beat Kuti, his family and friends, and destroy wherever he lived and whatever instruments or recordings he had. All of these however, never stopped him.</p>
        </section>
       
         <div >
         <figure>
         <img id="fela-and-wife"  src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.VhkFtWK9mccI91FM10nn1gHaHZ%26pid%3DApi&f=1" alt="Fela and wife Remi">
           <figcaption>"To be spiritual is not by praying and going to church. Spiritualism is the understanding of the universe so that it can be a better place to live in."</figcaption>
           </figure>
         </div>
        <section>
          <p> On 3 August 1997, Olikoye Ransome-Kuti, already a prominent AIDS activist and former Minister of Health, announced his younger brother's(Fela) death a day earlier from complications related to AIDS. However, some mystrey still surrounds this as there has been no definitive proof that Kuti died from complications related to HIV/AIDS.</p>
        </section>
        <figure>
         <img id="smiling-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.JOvmBlLmVXp7dQxPNeOlCwHaDt%26pid%3DApi&f=1" alt="Fela smiling" >
           <figcaption>"<strong>The secret of Life is to have  No Fear.</strong>" </figcaption>
        </figure>
         </article>
     </div>
  </div> 
  
  </body>
  <footer>
    <p>More
    <a target="_blank" id="tribute-link" href="https://en.wikipedia.org/wiki/Fela_Kuti">about Fela's life and music</a> and it's deep root in the African Culture.  <a target="_blank" id="soundclound" href="https://soundcloud.com/b-groovy/sets/fela-kuti"><p>Feel the sound</p></a></p>
      <hr><p>text credit @Wikipedia with edits by David Erhabor</p></hr>
    <p>A Tribute by <strong>David Erhabor @curious_avocado</strong></p>
  </footer>
</main>
</html> 
              
            
!

CSS

              
                html{
  font-size: 10px;
  text-align: center;
  background-color: #B9B7BD;
  margin: auto auto;
}
body{
  font-family: 'Playfair Display',Impact, Charcoal, sans-serif;
}
h1{
  font-size: 8rem;
  margin: 0px;
  background-height: auto;
  background-color: #EEEDE7;
  text-width: 100%;
}
@media(max-width: 610px){
  h1{
    font-size: 4rem;
  }
  background-height: auto;
}

h3{
  font-size: 2rem;
}
#img-caption{
  font-size: 1.8rem;
}

#tribute-info{
  margin: 50px 64px;
  font-size: 1.7rem;
}
h2{
  font-size: 2.5rem;
}
@media(max-width: 450px){
  h2{
    font-size: 2rem;
  }
}
#image, #the-man-img, #the-music-img, #smiling-img, #fela-and-wife{
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}
hr{
  border:  none;
  height: 2px;
  background-color: #E7D2CC;
  
}
footer{
  font-family: 'Sahitya'Impact, Charcoal, sans-serif;
  font-size: 1.4rem;
  margin: 50px auto 19px;
  line-height: 1.5px;
}
a{
  color: black;
}
a:hover{
  background-color: orange; 
  opacity: 0.35;
}
#soundcloud{
  background-color: orange;
  
}
@media(max-width: 460px){
  footer{
    font-size: 1rem;
  }
  #img-caption{
  font-size: 1.4rem;
}
  #tribute-info{
  margin: 30px 14px;
  font-size: 1.4rem;
}
}


              
            
!

JS

              
                
              
            
!
999px

Console