Tribute Page Code

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Tribute Page</title>

  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> 

<style>

/**

 * My Styles

 */

/*  

   Kishor Kumar 

https://2.bp.blogspot.com/-m8EXgjrJbxo/U6hwumwFVmI/AAAAAAAAANY/1eo3-cHyweY/s1600/Kishore+Kumar+Romantic+Hits+Mp3+Songs+Free+Download.jpg

*/

.main {

  background-image: url('http://texturelib.com/Textures/wood/planks%20new/wood_planks_new_0026_02_preview.jpg');

  background-repeat: repeat;

}

.page-title {

  border-radius: 50%;

  width: 300px;

  height: 300px;

  margin: -150px auto 15px auto;

  padding: 155px 30px 30px 30px;

  background-image: radial-gradient(circle farthest-corner at 75px 75px, #616161 0%, #212121 100%);

  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.8);

  color: #f2f2f2;

  text-align: center;

}

.panel-custom {

  padding-bottom: 15px;

}

.burning-flame-animation{

  color: #FF5722;

  background-image: linear-gradient(to bottom, #FFAB91 0%,  #FF5722 100%);

  -webkit-background-clip: text;

  background-clip: text;

  text-shadow: 0 0 1px rgba(255, 255, 255, 0.6);

  -webkit-text-fill-color: transparent;

  -webkit-animation: burn 60s infinite linear;

          animation: burn 60s infinite linear;

}

@-webkit-keyframes burn{

  from{

    filter: hue-rotate(0deg);

  }  

  to{

    filter: hue-rotate(360deg);  

  }

}

@keyframes burn{

  from{

    filter: hue-rotate(0deg);

  }  

  to{

    filter: hue-rotate(360deg);  

  }

}

/**

 * Bootstrap customized

 */

.jumbotron {

  padding: 40px 15px 40px 15px;

  background-color: rgba(211, 47, 47, 0.6);

  background-image: url('http://www.thefrustratedindian.com/wp-content/uploads/2015/08/1280x720-wWI.jpg');

  color: #f2f2f2;

  background-size: cover;

  background-position: center;

  box-shadow: inset 10000px 0 0px rgba(0, 0, 0, 0.4);

  background-blend-mode: multiply;

}

.jumbotron p {

  font-size: 14px;

}

@media (min-width: 480px) {

  .jumbotron {

    padding: 70px 30px 70px 30px;

    -webkit-animation-name: blendAnimate;

            animation-name: blendAnimate;

    -webkit-animation-duration: 20s;

            animation-duration: 20s;

    -webkit-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

  }

  @-webkit-keyframes blendAnimate {

    0% {

      background-color: rgba(211, 47, 47, 0.6);

    }

    50% {

      background-color: rgba(56, 142, 60, 0.6);

    }

    to {

      background-color: rgba(211, 47, 47, 0.6);

    }

  }

  @keyframes blendAnimate {

    0% {

      background-color: rgba(211, 47, 47, 0.6);

    }

    50% {

      background-color: rgba(56, 142, 60, 0.6);

    }

    to {

      background-color: rgba(211, 47, 47, 0.6);

    }

  }

}

.navbar {

  border-radius: 0;

}

.navbar-inverse {

  background-color: #B71C1C;

  color: #f2f2f2;

}

.panel > img {

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);

}

</style>    

</head>

<body translate="no">

  <div class="main">

  <div class="page-title animated">

    <h2 class="burning-flame-animation">

      Tribute to Kishore Kumar

     </h2>

  </div>

  <div class="jumbotron text-justify">

    <p class="h5 animated">Kishore Kumar (4 August 1929 – 13 October 1987) was an Indian film playback singer, actor, lyricist, composer, producer, director, and screenwriter.[1] He is considered one of the most successful playback singers of the Hindi film industry. Apart

      from Hindi, he sang in many Indian languages including Bengali, Marathi, Assamese, Gujarati, Kannada, Bhojpuri, Malayalam, Odia, and Urdu. He has also sung in private albums in several languages especially in Bengali which are noted as all time

      classics. He won 8 Filmfare Awards for Best Male Playback Singer and holds the record for winning the most Filmfare Awards in that category. He was awarded the "Lata Mangeshkar Award" by the Madhya Pradesh government and from that year onwards,

      the Madhya Pradesh Government initiated a new award called the "Kishore Kumar Award" for contributions to Hindi cinema.

    </p>

    <p class="h5 animated">The young Kishore and his family used to visit Ashok Kumar in Bombay very often. There was 18 years difference between Ashok and Kishore, so the elder Ashok was well established in the film field while Kishore was still just a kid. Due to his brother's

      connections, Kishore was able to secure odd positions at an early age. When quite young he became a chorus singer for Bombay Talkies, where his brother Ashok worked. This was in spite of the fact that Kishore never had any formal training in music.

      Several other films also came his way. Kishore got his first role in "Shikari" (1946); he was only about 17 at the time. He was also hired by Khemchand Prakash to sing a song for the film "Ziddi" (1948). These were just odd assignments, Kishore

      was still with his family then and not in Bombay where the Hindi film industry was centred.

    </p>

  </div>

  <div class="container">

    <div class="row">      

      <div class="col-xs-12 col-sm-6">

        <!-- Column 1 with Biography and Careers -->

        <div class="panel-custom">

          <div class="panel panel-default" style="margin-top: 25%;">

            <img height=50% width=50% class="img-responsive img-circle center-block" style="margin-top: -25%;" src="https://i1.sndcdn.com/artworks-000111545323-l4zdx8-t500x500.jpg"></img>

            <div style="margin-top: -5%;" class="panel-body">

              <h1 class="text-center text-uppercase page-header">Biography</h1>

              <p class="h5 text-justify text-muted">Kishore Kumar was an actor, and playback singer in Bollywood films. He was most active from 1949 until his death in 1987. He was famous for singing upbeat light songs, and light comical acting roles. However in his long career, he worked

                in almost every capacity in the film industry; not only as a a singer and actor but as a screenwriter, producer, director, and script writer. Kishore Kumar was born Abhas Kumar Ganguly on August 4, 1929 in Khandwa (present day Madhya Pradesh).

                Although this is a Hindi speaking area he was a Bengali. His father was a lawyer named was Kunjilal, and his mother's name was Gouri Devi. He was one of four children. He had two older brothers named Ashok Kumar and Anoop Kumar, and a

                younger sister named Sati. Kishore Kumar's entrance to the film industry was very different from most people. Most of the famous playback singers struggled hard to find a position and struggled equally hard, often unsuccessfully to retain

                that position. However Kishore Kumar easily slid into the film industry without any real effort. The reason for this was through the influence of his elder brother Ashok Kumar. Kishore Kumar never had any formal musical training but this

                did not stop him. In his career he showed proficiency in a variety of musical styles. Furthermore he was able to pick up the piano and played it well. <a href="http://chandrakantha.com/biodata/kishore_kumar.html" target="_blank" ><span class="badge">More &raquo;</span></a>

              </p>

            </div>

          </div>

        </div>

        <div class="panel-custom">

          <div class="panel panel-default" style="margin-top: 25%;">

            <img height=50% width=50% class="img-responsive img-circle center-block" style="margin-top: -25%;" src="https://i1.sndcdn.com/artworks-000063659708-80imnw-t500x500.jpg"></img>

            <div style="margin-top: -5%;" class="panel-body">

              <h1 class="text-center text-uppercase page-header">Career</h1>

              <p class="h5 text-justify text-muted">

                After Ashok Kumar became a star of Hindi films, the Ganguly family visited Mumbai regularly. Abhas Kumar changed his name to Kishore and started his cinema career as a chorus singer at Bombay Talkies, where his brother worked. Kumar's first film appearance

                was in Shikari (1946), in which his brother Ashok played the lead role. Music director Khemchand Prakash gave Kumar a chance to sing "Marne ki duayen kyon mangu" for the film Ziddi (1948). After this, Kumar was offered many other assignments,

                but he was not very serious about a film career.[6] In 1949, he settled in Mumbai.[citation needed] Kumar played the hero in the Bombay Talkies film Andolan (1951), directed by Phani Majumdar. Although he got some acting assignments with

                the help of his brother, he was more interested in becoming a singer. Ashok wanted Kumar to be an actor like him. <a href="https://en.wikipedia.org/wiki/Kishore_Kumar#Career" target="_blank" ><span class="badge">More &raquo;</span></a>

              </p>

            </div>

          </div>

        </div>    

        <div class="alert alert-info alert-block" role="alert">

          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>

          To know more about Kishore Kumar, goto his <a href="https://en.wikipedia.org/wiki/Kishore_Kumar" target="_blank" class="alert-link">Wiki Page</a>.          

    </div>    

    <div class="well">

      <blockquote>

        Mohabbat ussi ka naam hai joh insaan ko qurbaaniya sikhati hai

        <footer> Kishore Kumar

          <cite>Movie: Tamasha (1952)</cite>

      </footer>

      </blockquote>

    </div>

      </div>

      <div class="col-xs-12 col-sm-6">

        <!-- This Column Contains Kishore's Early life and Awards-->

        <div class="panel-custom">

          <div class="panel panel-default" style="margin-top: 25%;">

            <img height=50% width=50% class="img-responsive img-circle center-block" style="margin-top: -25%;" src="http://c.saavncdn.com/artists/Kishore_Kumar.jpg"></img>

            <div class="panel-body">

              <h2 class="text-center text-uppercase page-header">Early life</h2>

              <p class="h5 text-justify text-muted">Kishore Kumar was born in a Bengali Ganguly family in Khandwa, Central Provinces (now in Madhya Pradesh) as Abhas Kumar Ganguly. His father Kunjalal Ganguly (Gangopadhyay) was a lawyer and his mother Gouri Devi came from a wealthy Bengali

                family. Kunjalal Gangopadhyaya was invited by the Kamavisadar Gokhale family of Khandwa to be their personal lawyer. Kishore was the youngest of four siblings, the other three were Ashok (the eldest), Sati Devi, and Anoop. While Kishore

                was still a child, his brother Ashok became a Bollywood actor. Later, Anoop also ventured into cinema with Ashok's help. Spending time with his brothers, Kishore became interested in films and music. He became a fan of singer-actor K.

                L. Saigal—whom he considered his guru, and tried to emulate his singing style. He graduated from Christian College, Indore. <a href="https://en.wikipedia.org/wiki/Kishore_Kumar#Early_life" target="_blank" ><span class="badge">More &raquo;</span></a>

              </p>

            </div>

          </div>

        </div>

        <div class="panel-custom">

          <div class="panel panel-default" style="margin-top: 25%;">

            <img height=50% width=50% class="img-responsive img-circle center-block" style="margin-top: -25%;" src="http://images.iimg.in/c/55bd0c97c6711848a28b45a6-1-500-500-1438541070/google/kishore-kumar-the-genius.jpg"></img>

            <div style="margin-top: -5%;" class="panel-body">

              <h1 class="text-center text-uppercase page-header">Awards</h1>

              <p class="h5 text-justify text-muted">Kishore Kumar being a great singer achieved various accomplishments during his period in Bollywood Singing. Following is a list of Kishore's successful achievements: <a href="https://en.wikipedia.org/wiki/Kishore_Kumar#Awards" target="_blank" ><span class="badge">More &raquo;</span></a>

              </p>

            </div>

            <div class="table-responsive">

              <table class="table table-striped">

                <thead>

                  <tr>

                    <th tabindex="0" role="columnheader">Year</th>

                    <th tabindex="0" role="columnheader">Song</th>

                    <th tabindex="0" role="columnheader">Film</th>

                    <th tabindex="0" role="columnheader">Music director</th>

                    <th tabindex="0" role="columnheader">Lyricist</th>

                  </tr>

                </thead>

                <tbody>

                  <tr>

                    <td>1969</td>

                    <td>"Roop Tera Mastana"</td>

                    <td><i><a href="/wiki/Aradhana_(1969_film)" title="Aradhana (1969 film)">Aradhana</a></i></td>

                    <td><a href="/wiki/Sachin_Dev_Burman" class="mw-redirect" title="Sachin Dev Burman">Sachin Dev Burman</a></td>

                    <td><a href="/wiki/Anand_Bakshi" title="Anand Bakshi">Anand Bakshi</a></td>

                  </tr>

                  <tr>

                    <td>1975</td>

                    <td>"Dil Aisa Kisi Ne Mera"</td>

                    <td><i><a href="/wiki/Amanush" title="Amanush">Amanush</a></i></td>

                    <td><a href="/wiki/Shyamal_Mitra" title="Shyamal Mitra">Shyamal Mitra</a></td>

                    <td><a href="/wiki/Indeevar" title="Indeevar">Indeevar</a></td>

                  </tr>

                  <tr>

                    <td>1978</td>

                    <td>"Khaike Paan Banaras Wala"</td>

                    <td><i><a href="/wiki/Don_(1978_film)" title="Don (1978 film)">Don</a></i></td>

                    <td><a href="/wiki/Kalyanji_Anandji" class="mw-redirect" title="Kalyanji Anandji">Kalyanji Anandji</a></td>

                    <td><a href="/wiki/Anjaan_(lyricist)" title="Anjaan (lyricist)">Anjaan</a></td>

                  </tr>

                  <tr>

                    <td>1980</td>

                    <td>"Hazaar Raahen Mudke Dekheen"</td>

                    <td><i><a href="/wiki/Thodisi_Bewafaii" title="Thodisi Bewafaii">Thodisi Bewafaii</a></i></td>

                    <td><a href="/wiki/Mohammed_Zahur_Khayyam" title="Mohammed Zahur Khayyam">Khayyam</a></td>

                    <td><a href="/wiki/Gulzar" title="Gulzar">Gulzar</a></td>

                  </tr>

                  <tr>

                    <td>1982</td>

                    <td>"Pag Ghungroo Baandh"</td>

                    <td><i><a href="/wiki/Namak_Halaal" title="Namak Halaal">Namak Halaal</a></i></td>

                    <td><a href="/wiki/Bappi_Lahiri" title="Bappi Lahiri">Bappi Lahiri</a></td>

                    <td><a href="/wiki/Anjaan_(lyricist)" title="Anjaan (lyricist)">Anjaan</a></td>

                  </tr>

                  <tr>

                    <td>1983</td>

                    <td>"Agar Tum Na Hote"</td>

                    <td><i><a href="/wiki/Agar_Tum_Na_Hote" title="Agar Tum Na Hote">Agar Tum Na Hote</a></i></td>

                    <td><a href="/wiki/Rahul_Dev_Burman" class="mw-redirect" title="Rahul Dev Burman">Rahul Dev Burman</a></td>

                    <td><a href="/wiki/Gulshan_Bawra" class="mw-redirect" title="Gulshan Bawra">Gulshan Bawra</a></td>

                  </tr>

                  <tr>

                    <td>1984</td>

                    <td>"Manzilein Apni Jagah Hain"</td>

                    <td><i><a href="/wiki/Sharaabi" title="Sharaabi">Sharaabi</a></i></td>

                    <td><a href="/wiki/Bappi_Lahiri" title="Bappi Lahiri">Bappi Lahiri</a></td>

                    <td><a href="/wiki/Prakash_Mehra" title="Prakash Mehra">Prakash Mehra</a></td>

                  </tr>

                  <tr>

                    <td>1985</td>

                    <td>"Saagar Kinaare"</td>

                    <td><i><a href="/wiki/Saagar_(1985_film)" class="mw-redirect" title="Saagar (1985 film)">Saagar</a></i></td>

                    <td><a href="/wiki/Rahul_Dev_Burman" class="mw-redirect" title="Rahul Dev Burman">Rahul Dev Burman</a></td>

                    <td><a href="/wiki/Javed_Akhtar" title="Javed Akhtar">Javed Akhtar</a></td>

                  </tr>

                </tbody>

                <tfoot></tfoot>

              </table>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

      <script id="rendered-js" >

var $animation_elements, $window;

$(function () {

  $animation_elements = $('.panel > img');

  $window = $(window);

  $(".jumbotron p").addClass("invisible");

  $animation_elements.addClass("invisible");

  setTimeout(function () {

    $(".jumbotron p").removeClass("invisible").addClass('fadeInRight');

  }, 500);

  $window.on('scroll resize', check_if_in_view);

});

function check_if_in_view() {

  var window_height = $window.height();

  var window_top_position = $window.scrollTop();

  var window_bottom_position = window_top_position + window_height;

  $.each($animation_elements, function () {

    var $element = $(this);

    var element_height = $element.outerHeight();

    var element_top_position = $element.offset().top;

    var element_bottom_position = element_top_position + element_height;

    //check to see if this current container is within viewport

    if (element_top_position + element_height / 2 <= window_bottom_position) {

      $element.removeClass("invisible");

      $element.addClass('animated zoomIn');

    } else if (element_top_position > window_bottom_position) {

      $element.addClass('invisible');

      $element.removeClass('zoomIn');

    }

  });

}

    </script>

</body>

</html>


Comments