Tribute Page For NTR

HTML

              
                  <div class="notifications"></div>
    <header>
        <!-- contains blurred background image displayed through css -->
    </header>

    <div class="container">

        <div class="description">
            <div class="avatar">
                <img src="https://res.cloudinary.com/vinaypuppal/image/upload/v1460024151/timthumb.php_dxksxe.jpg" alt="NTR_img" />
                <p class="caption">Nandamuri Taraka Rama Rao (28 May 1923 – 18 January 1996)</p>
            </div>
            <p class="description-text">"Nandamuri Taraka Rama Rao (28 May 1923 – 18 January 1996), popularly known as N. T. Rama Rao or by his initials NTR, was an Indian film actor, writer, director, producer, and politician who also served as the Chief Minister of Andhra Pradesh for three terms.NTR had voted as the greatest Indian Actor Ever in a poll conducted by CNN- IBN"</p>
        </div>

        <div id="timeline">

            <h1 class='section-title'>NTR's Timeline</h1>
            <div class="timeline-item wow zoomIn">
                <div class="timeline-icon">1923</div>
                <div class="timeline-content">
                    <h2>Early life</h2>
                    <p> N. T. Rama Rao (NTR) was born on 28 May 1923 in Nimmakuru, a small village in Gudivada taluk of Krishna District, which was a part of the erstwhile Madras Presidency of British India. He was born to a farming couple, Nandamuri Lakshmaih Chowdary and Venkata Ramamma, but was given in adoption to his paternal uncle.</p>
                </div>
            </div>
            <div class="timeline-item wow zoomIn">
                <div class="timeline-icon">1940</div>
                <div class="timeline-content right">
                    <h2>Education Details</h2>
                    <p> He attended school at first in his village, and later in Vijayawada. After his matriculation in 1940, he studied at SRR & CVR college in Vijayawada and at the Andhra-Christian College in Guntur.</p>
                </div>
            </div>
            <div class="timeline-item wow zoomIn">
                <div class="timeline-icon">1943</div>
                <div class="timeline-content">
                    <h2>NTR married Basava Tarakam</h2>
                    <p>In May 1943, at the age of 20, while still pursuing his Intermediate, NTR married Basava Tarakam, the daughter of his maternal uncle. The couple had eight sons and four daughters.</p>
                </div>
            </div>
            <div class="timeline-item wow zoomIn">
                <div class="timeline-icon">1947</div>
                <div class="timeline-content right">
                    <h2>First Job</h2>
                    <p>In 1947, he joined the Madras Service Commission as a sub-registrar, a much-coveted job that he nevertheless quit within three weeks to devote himself to acting.</p>
                </div>
            </div>

            <h1 class='section-title' id='acting'>Acting Career</h1>
            <!-- Time line components are added by javascript -->

            <h1 class="section-title">For More Movies <a href="https://en.wikipedia.org/wiki/N._T._Rama_Rao#toc">Click Here</a></h1>

            <h1 class="section-title" id="political">Political Career</h1>
            <div class="timeline-item wow zoomIn">
                <div class="timeline-icon">1982</div>
                <div class="timeline-content right">
                    <h2>TDP Was Founded</h2>
                    <p>NTR entered politics when he founded the Telugu Desam Party (TDP) on 29 March 1982 in Hyderabad. He said that this decision was based on a historic need to rid Andhra Pradesh of the corrupt and inept rule of the Indian National Congress</p>
                </div>
            </div>
            <div class="timeline-item wow zoomIn">
                <div class="timeline-icon">1983</div>
                <div class="timeline-content">
                    <h2>TDP Won Elections</h2>
                    <p>TDP won by an absolute majority, winning 199 out of the 294 seats in the state assembly, with NTR himself winning both the seats he contested</p>
                </div>
            </div>
            <div class="timeline-item wow zoomIn">
                <div class="timeline-icon">1989</div>
                <div class="timeline-content right">
                    <h2>TDP Lost Elections</h2>
                    <p>NTR completed his five-year term as Chief Minister. In the December 1989 assembly elections however, he was voted out of power due to a wave of anti-incumbency sweeping the state as a result of which the Congress returned to power. NTR himself lost from Kalwakurthy by a narrow margin to the Congress,[38] but retained the Hindupur assembly seat.[36] During this time, he suffered a mild stroke, as a result of which he was unable to campaign</p>
                </div>
            </div>
            <div class="timeline-item wow zoomIn no-content">
                <div class="timeline-icon">1994</div>
                <div class="timeline-content">
                    <h2>NTR returned to power for a third and final time</h2>
                </div>
            </div>
            <div class="timeline-item wow zoomIn no-content">
                <div class="timeline-icon">1996</div>
                <div class="timeline-content right">
                    <h2>NTR died of a heart attack on 18 January 1996 at his residence in Hyderabad, aged 72.</h2>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p class="conclusion">If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/N._T._Rama_Rao" target="_blank">Wikipedia entry.</a></p>
        <div>
            <p>Share</p>
            <ul>
                <li class="fb"><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li class="tw"><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
        </div>
        <p class="made-by">Made With <i class='fa fa-heart'></i> By <a href="https://www.vinaypuppal.com">VinayPuppal</a></p>
    </footer>

CSS

              
                /*===========================================
=            Responsive Timeline css by brunodsgn            =
=   Found At https://github.com/brunodsgn/responsive-timeline       =
=============================================*/

header:after,
#timeline .timeline-item:after,
header:before,
#timeline .timeline-item:before {
    content: '';
    display: block;
    width: 100%;
    clear: both;
}

#timeline {
    width: 90%;
    margin: 30px auto;
    position: relative;
    transition: all 0.4s ease;
}

#timeline:before {
    content: "";
    width: 3px;
    height: 100%;
    background: #ee4d4d;
    left: 50%;
    top: 0;
    position: absolute;
}

#timeline:after {
    content: "";
    clear: both;
    display: table;
    width: 100%;
}

#timeline .timeline-item {
    margin-bottom: 50px;
    position: relative;
}

#timeline .timeline-item .timeline-icon {
    background: #ee4d4d;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    margin-left: -23px;
    border-radius: 50%;
}

#timeline .timeline-item .timeline-icon img {
    position: relative;
    top: 14px;
    left: 14px;
}

#timeline .timeline-item .timeline-content {
    width: 45%;
    background: #fff;
    padding: 20px;
    -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: all 0.3s ease;
}

#timeline .timeline-item .timeline-content h2 {
    padding: 15px;
    background: #ee4d4d;
    color: #fff;
    margin: -20px -20px 0 -20px;
    font-weight: 300;
    border-radius: 3px 3px 0 0;
}

#timeline .timeline-item .timeline-content:before {
    content: '';
    position: absolute;
    left: 45%;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #ee4d4d;
}

#timeline .timeline-item .timeline-content.right {
    float: right;
}

#timeline .timeline-item .timeline-content.right:before {
    content: '';
    right: 45%;
    left: inherit;
    border-left: 0;
    border-right: 7px solid #ee4d4d;
}

@media screen and (max-width: 768px) {
    #timeline {
        margin: 30px;
        padding: 0;
    }
    #timeline:before {
        left: 0;
    }
    #timeline .timeline-item .timeline-content {
        width: 90%;
        float: right;
    }
    #timeline .timeline-item .timeline-content:before,
    #timeline .timeline-item .timeline-content.right:before {
        left: 10%;
        margin-left: -6px;
        border-left: 0;
        border-right: 7px solid #ee4d4d;
    }
    #timeline .timeline-item .timeline-icon {
        left: 0;
    }
}

/*=====  End of  Responsive Timeline css  ======*/



/*=============================================
=            My Custom CSS Styles            =
=============================================*/

/*----------  Base Styles  ----------*/

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body,
html {
    height: 100%;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4 {
    font-family: "Dosis", arial, verdana;
    font-weight: 500;
}

/*----------  End Of Base Styles  ----------*/


body {
    font-size: 13px;
    background: #f9f9f9;
    background-size: cover;
    margin: 0;
    padding: 0;
    font-family: "Dosis", helvetica, arial, verdana;
    line-height: 20px;
    font-size: 14px;
    color: #726f77;
}

.notifications{
    position:fixed;
    top: 20px;
    right: 20px;
    z-index: 4;
}

.notifications p{
    padding: 10px 20px;
    background: #ff6a00;
    color: #fff;
    font-weight:bold;
}

/* Dummy Header element to show blured background image behind description */
header {
    height: 500px;
    background: #2b2e48;
    background: url("https://i.ytimg.com/vi/P9Y0SiYPXGI/maxresdefault.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -webkit-filter: blur(10px);
            filter: blur(10px);
    padding: 10px;
    -ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}


.container {
    width: 90%;
    margin: -400px auto 0;
    background: #f9f9f9;
    position: relative;
}

/*----------  Description div styles block  ----------*/

.avatar {
    padding-top: 20px;
    text-align: center;
}

.avatar .caption {
    font-size: 14px;
    padding: 5px;
    text-align: center;
    margin: 0;
}

.avatar img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.description .description-text {
    padding: 0 20px;
    font-size: 21px;
    letter-spacing: 2px;
    line-height: 1.5;
    color: #726577;
    text-align: justify;
    font-family: "Dosis", arial, tahoma, verdana;
}

/*----------  End of Description Styles block  ----------*/


/*---------- My Styles overriding above Responsive css timeline styles  ----------*/


#timeline:before {
    background: #ffa500 !important;
}

.timeline-icon {
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
    background: #ffa500 !important;
}

#timeline .timeline-item .timeline-content h2 {
    background: #ffac00;
}

#timeline .timeline-item .timeline-content:before {
    border-left-color: #ffac00;
}

#timeline .timeline-item .timeline-content.right:before {
    border-right-color: #ffac00;
}

.no-content .timeline-content{
    padding-bottom: 0 !important;
}

@media(max-width: 768px) {
    #timeline .timeline-item .timeline-content:before,
    #timeline .timeline-item .timeline-content.right:before {
        border-right-color: #ffac00;
    }
}

/*----------  End of Overriding Styles  ----------*/


.section-title {
    background: #f9f9f9;
    padding: 20px 0;
    text-align: center;
    position: relative;
}


/*----------  Styles for Movie Thumbnails inside timeline content div  ----------*/


#timeline .timeline-content .thumbnail-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

#timeline .timeline-content .thumbnail-container .thumbnail {
    margin: 10px;
    -webkit-flex-basis: calc(33.33% - 20px);
        -ms-flex-preferred-size: calc(33.33% - 20px);
            flex-basis: calc(33.33% - 20px);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

#timeline .timeline-content .thumbnail-container .thumbnail:hover .thumbnail-info {
    color: #ff6600;
}

#timeline .timeline-content .thumbnail-container .thumbnail:hover .thumbnail-img img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}

#timeline .timeline-content .thumbnail-container .thumbnail:hover .thumbnail-img:before {
    opacity: 1;
}

#timeline .timeline-content .thumbnail-container .thumbnail:hover .thumbnail-img:after {
    opacity: 1;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}

#timeline .timeline-content .thumbnail-container .thumbnail .thumbnail-img img {
    width: 100%;
    height: 130px;
    transition: all, 0.2s, ease-in;
}

#timeline .timeline-content .thumbnail-container .thumbnail .thumbnail-img {
    position: relative;
    height: 130px;
}

#timeline .timeline-content .thumbnail-container .thumbnail .thumbnail-img:before {
    content: 'Click To Know More';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 12px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    opacity: 0;
    transition: all 0.2ms ease-in;
    z-index: 1;
}

#timeline .timeline-content .thumbnail-container .thumbnail .thumbnail-img:after {
    content: '';
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 169, 0, 0.5);
    top: 0;
    left: 0;
    transition: all 0.2ms ease-in;
    opacity: 0;
}

#timeline .timeline-content .thumbnail-container .thumbnail .thumbnail-info {
    margin-top: 5px;
    text-align: center;
    color: #726f77;
    transition: all 0.2s ease-in;
}

.awards-container h3 {
    font-size: 22px;
}

.awards-container a {
    color: #ff6600;
}

.awards-container a:hover {
    color: #ffa500;
}

/*----------  End of thumbnail styles block  ----------*/


/*----------  Footer Styles  ----------*/


footer {
    width: 100%;
    background: #ffac00;
    color: #fff;
    font-size: 21px;
}

footer p.conclusion {
    text-align: center;
    padding: 20px 30px;
    margin: 0;
    line-height: 1.5;
    letter-spacing: 2px;
}

footer p{
    text-align: center;
    margin: 0;
    padding: 0;
}

footer p a {
    transition: all 0.2s ease-out;
}

footer p a:hover {
    color: #00aaff;
}


footer ul {
    margin: 0;
    padding: 10px 0;
    list-style: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

footer li {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.2ms esae-out;
}

footer li a {
    display: block;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    transition: all 0.2ms esae-out;
}

footer li.fb {
    background: blue;
    margin-right: 20px;
}

footer li.tw {
    background: #4099ff;
}

footer li:hover {
    background: #fff !important;
}

footer li.fb:hover a {
    color: blue;
}

footer li.tw:hover a {
    color: #4099ff;
}

footer .made-by {
    padding: 15px;
    text-align: center;
    background: #EAA004;
    color: #fff;
    letter-spacing: 2px;
    font-size: 12px;
}

footer .made-by i {
    color: red;
}

/*----------  End of footer styles  ----------*/


@media(max-width: 768px) {
    .section-title {
        text-align: left;
    }
    .description .description-text {
        font-size: 18px;
    }
    footer .conclusion {
        font-size: 14px;
        padding: 10px;
    }
}


/*=====  End of My Custom Styles  ======*/

JS

              
                $('document').ready(function() {
    new WOW({ live: true }).init();

    var notify = function(message) {
          var $message = $('<p style="display:none;">' + message + '</p>');
          // console.log('reached');
          $('.notifications').append($message);
          $message.slideDown(300, function() {
            window.setTimeout(function() {
              $message.slideUp(300, function() {
                $message.remove();
              });
            }, 2000);
          });
        };

    var waypoint = new Waypoint({
      element: document.getElementById('acting'),
      handler: function() {
        notify('Click on movie thumbnails to know more about that movie');
        // console.log('Got It');
        this.destroy();
      }
    });

    var actingCareer = [{
        year: 1949,
        title: 'NTR\'s Debut Film',
        films: [{
            name: 'Mana Desam',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/en/thumb/e/ef/Mana_Desam.png/220px-Mana_Desam.png',
            link: 'https://en.wikipedia.org/wiki/Mana_Desam'
        }]
    }, {
        year: 1950,
        title: 'Films in 1950',
        films: [{
            name: 'Shavukaru',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/en/8/81/Shavukaru.jpg',
            link: 'https://en.wikipedia.org/wiki/Shavukaru'
        }, {
            name: 'Palletoori Pilla',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/en/thumb/6/64/Palletoori_Pilla.jpg/220px-Palletoori_Pilla.jpg',
            link: 'https://en.wikipedia.org/wiki/Palletoori_Pilla'
        }, {
            name: 'Samsaram',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/en/thumb/4/48/Samsaram_1950.jpg/220px-Samsaram_1950.jpg',
            link: 'https://en.wikipedia.org/wiki/Samsaram_(1950_film)'
        }]
    }, {
        year: 1951,
        title: 'Films in 1951',
        films: [{
            name: 'Pathala Bhairavi',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/en/thumb/b/b1/Pathala_Bhairavi.jpg/220px-Pathala_Bhairavi.jpg',
            link: 'https://en.wikipedia.org/wiki/Pathala_Bhairavi'
        }, {
            name: 'Malliswari',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Malliswari_1951.JPG/220px-Malliswari_1951.JPG',
            link: 'https://en.wikipedia.org/wiki/Malliswari_(1951_film)'
        }]
    },{
        year:1952,
        title: 'Films in 1952',
        films:[{
            name:'Pelli Chesi Choodu',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/Pelli_Chesi_Choodu.jpg/220px-Pelli_Chesi_Choodu.jpg',
            link: 'https://en.wikipedia.org/wiki/Pelli_Chesi_Choodu'
        },{
            name:'Palletooru',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/d/d9/Palletooru.jpg/220px-Palletooru.jpg',
            link:'https://en.wikipedia.org/wiki/Palletooru'
        }]
    },{
        year: 1954,
        title: 'Films in 1954',
        films:[{
            name:'Todu Dongalu',
            imageUrl:'',
            link:'https://en.wikipedia.org/wiki/Thodu_Dongalu_(1954_film)'
        },{
            name:'Rechukka',
            imageUrl:'data:image/jpeg;base64,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',
            link:'https://en.wikipedia.org/wiki/Rechukka'
        },{
            name:'Raju Peda',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/0/0c/Raju_peda_poster.jpg/220px-Raju_peda_poster.jpg',
            link:'https://en.wikipedia.org/wiki/Raju_Peda'
        },{
            name:'Parivartana',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/1/1a/Parivartana.jpg/220px-Parivartana.jpg',
            link:'https://en.wikipedia.org/wiki/Parivartana'
        }]
    },{
        year:1955,
        title: 'Films in 1955',
        films:[{
            name:'Missamma',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/7/76/Missamma_poster.jpg/220px-Missamma_poster.jpg',
            link:'https://en.wikipedia.org/wiki/Missamma'
        },{
            name:'Kanyasulkam',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/3/38/Kanyasulkam.JPG',
            link:'https://en.wikipedia.org/wiki/Kanyasulkam_(film)'
        },{
            name:'Jayasimha',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/Jayasimha.JPG/220px-Jayasimha.JPG',
            link:'https://en.wikipedia.org/wiki/Jayasimha_(1955_film)'
        }]
    },{
        year: 1956,
        title:"Films in 1956",
        films:[{
            name:'Tenali Ramakrishna',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/3/3b/Tenali_Ramakrishna.jpg/220px-Tenali_Ramakrishna.jpg',
            link:'https://en.wikipedia.org/wiki/Tenali_Ramakrishna_(film)'
        },{
            name:'Chiranjeevulu',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/7/72/Chiranjeevulu.jpg/220px-Chiranjeevulu.jpg',
            link:'https://en.wikipedia.org/wiki/Chiranjeevulu'
        }]
    },{
        year: 1957,
        title: 'Films in 1957',
        films: [{
            name:'Vinayaka Chaviti',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/f/fd/Vinayaka_Chavithi_poster.jpg/220px-Vinayaka_Chavithi_poster.jpg',
            link:'https://en.wikipedia.org/wiki/Vinayaka_Chaviti'
        },{
            name:'Bhagya Rekha',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/7/7a/Bhagyarekha.jpg/220px-Bhagyarekha.jpg',
            link:'https://en.wikipedia.org/wiki/Bhagya_Rekha'
        },{
            name:'Sarangadhara',
            imageUrl:'data:image/jpeg;base64,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',
            link:'https://en.wikipedia.org/wiki/Sarangadhara'
        },{
            name:'Panduranga Mahatyam',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/e/ed/Panduranga_Mahatyam.jpg',
            link:'https://en.wikipedia.org/wiki/Panduranga_Mahatyam_(film)'
        },{
            name:'Mayabazar',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/b/bb/Mayabazar.jpg/220px-Mayabazar.jpg',
            link:'https://en.wikipedia.org/wiki/Mayabazar'
        }]
    },{
        year: 1958,
        title: "Films in 1958",
        films:[{
            name:'Bhookailas',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/3/3a/Bhookailas58.jpg/220px-Bhookailas58.jpg',
            link:'https://en.wikipedia.org/wiki/Bhookailas_(film)'
        }]
    },{
        year: 1959,
        title: "Films in 1959",
        films:[{
            name:'Raja Makutam',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/c/ca/Raja_Makutam.jpg/220px-Raja_Makutam.jpg',
            link:'https://en.wikipedia.org/wiki/Raja_Makutam'
        }]
    },{
        year: 1960,
        title: 'Films in 1960',
        films:[{
            name:'Bhatti Vikramarka',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/0/0c/Bhatti_Vikramarka_poster.jpg/220px-Bhatti_Vikramarka_poster.jpg',
            link:'https://en.wikipedia.org/wiki/Bhatti_Vikramarka'
        },{
            name:'Sri Venkateswara Mahatyam',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/c/c1/Sri_Venkateswara_Mahatyam_%281960%29.jpg/220px-Sri_Venkateswara_Mahatyam_%281960%29.jpg',
            link:'https://en.wikipedia.org/wiki/Sri_Venkateswara_Mahatyam'
        }]
    },{
        year: 1961,
        title: 'Films in 1961',
        films:[{
            name:'Jagadeka_Veeruni_Katha',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/d/d8/Jagadeka_Veeruni_Katha_poster.jpg/220px-Jagadeka_Veeruni_Katha_poster.jpg',
            link:'https://en.wikipedia.org/wiki/Jagadeka_Veeruni_Katha'
        },{
            name:'Seetharama_Kalyanam',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/1/1b/Seetha_Rama_Kalyanam_1961.jpg/220px-Seetha_Rama_Kalyanam_1961.jpg',
            link:'https://en.wikipedia.org/wiki/Seetharama_Kalyanam'
        }]
    },{
        year: 1963,
        title: 'Films in 1963',
        films:[{
            name:'Lava_Kusha',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/2/2c/Lava_Kusa.JPG',
            link:'https://en.wikipedia.org/wiki/Lava_Kusha'
        },{
            name:'Nartanasala',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/d/de/Nartanasala.jpg',
            link:'https://en.wikipedia.org/wiki/Nartanasala'
        }]
    },{
        year: 1964,
        title: 'Films in 1964',
        films:[{
            name:'Ramudu_Bheemudu',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/c/cd/Ramudu_Bheemudu.jpg/220px-Ramudu_Bheemudu.jpg',
            link:'https://en.wikipedia.org/wiki/Ramudu_Bheemudu'
        },{
            name:'Karnan',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/b/b1/Karnan_poster.jpg/220px-Karnan_poster.jpg',
            link:'https://en.wikipedia.org/wiki/Karnan_(film)'
        },{
            name:'Gudi_Gantalu',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/7/77/Gudi_Gantalu.jpg/220px-Gudi_Gantalu.jpg',
            link:'https://en.wikipedia.org/wiki/Gudi_Gantalu'
        }]
    },{
        year: 1965,
        title: 'Films in 1965',
        films:[{
            name:'Pandava_Vanavasam',
            imageUrl:'https://upload.wikimedia.org/wikipedia/en/thumb/b/bc/Pandava_Vanavasam.jpg/220px-Pandava_Vanavasam.jpg',
            link:'https://en.wikipedia.org/wiki/Pandava_Vanavasam'
        }]
    }].reverse();

    for (var i = 0; i < actingCareer.length; i++) {
        var item = actingCareer[i];
        var el = '<div class="timeline-item wow zoomIn">' + '<div class="timeline-icon">' + item.year + '</div>';
        el += '<div class="timeline-content ' + (i % 2 === 0 ? '' : 'right') + '">';
        el += '<h2>' + item.title + '</h2>';
        el += '<div class="thumbnail-container">';
        // console.log(item);
        for (var j = 0; j < item.films.length; j++) {
            var film = item.films[j];
            el += '<a href="' + film.link + '"target="_blank" class="thumbnail">';
            el += '<div class="thumbnail-img"><img src="' + film.imageUrl + '"" alt="' + film.name + '_img" /></div><div class="thumbnail-info">' + film.name + '</div></a>';
        }
        el += '</div>';
        if (item.awards) {
            el += '<div class="awards-container"><h3>Awards:</h3><ul>';
            for (var k = 0; k < item.awards.length; k++) {
                var award = item.awards[k];
                el += '<li>' + award.name + '<a href="' + award.link + '">' + award.for+'</a></li>';
            }
            el += '</ul></div>';
        }
        el += '</div></div>';
        // console.log(el);
        $("#acting").after($(el));
    }

});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions