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

              
                <div class="container">
  <div class="jumbotron clearfix">
    <h2 class="text-center" >
      The King of Filipino Action Movies
    </h2>
    <h1 class="text-center">
      <strong class="text-primary">Fernando Poe Jr.</strong>
    </h1>
  </div>
  <div class="well">
    <img class="img-responsive center-img" src="http://entertainment.inquirer.net/files/2011/06/Fernando-Poe.jpg" style="width:100%">
    <p>Ronald Allan Kelley Poe, better known by his screen name Fernando Poe, Jr, was a leading Philippine action star and a former presidential candidate. He was an icon admired by millions of Filipinos. His bid for presidency in the 2004 presidential elections against the popular and incumbent Gloria Macapagal-Arroyo was unsuccessful. He was commonly known as "FPJ" and "Da King." He died at the age of 65 on December 14, 2004 after suffering a stroke.
    </p>
  </div>
  <div class="clearfix">
    <h3 class="col-xs-12" >Da King appeared in over a hundred films, some of them he himself directed or produced. Let us revisit the top ten best FPJ films of all time, and rekindle the memory of our National Artist for Film.
    </h3>
  </div>
  <div class="row movie-list-container" style="margin-top:20px; padding:10px;"> 
    <div class="col-xs-4 clearfix" style="position:relative;">
      <img class="img-responsive movie-pic" src="http://i0.wp.com/toplistnetwork.com/wp-content/uploads/2015/08/AngProbinsyano.jpg">
    </div>
    <div class="col-xs-8">
      <h1 class="text-primary">Ang Probinsyano (1996)</h1>
      <p>FPJ stars as Kardo, a provincial cop. His twin brother, Ador, is killed in a drug bust operation after a fellow cop betrayed him. Kardo, under direction from Ador’s superior, assumed Ador’s identity to capture the drug syndicate responsible for his death.
      </p>
    </div>
   </div>
   <div class="row movie-list-container" style="margin-top:20px; padding:10px;">
     <div class="col-xs-4 clearfix" style="position:relative;">
      <img class="img-responsive movie-pic" src="http://i0.wp.com/toplistnetwork.com/wp-content/uploads/2015/08/Dalubhasa.jpg">
     </div>
     <div class="col-xs-8">
      <h1 class="text-primary">Ang Dalubhasa (2000)</h1>
      <p>Da King stars in “Ang Dalubhasa” as Dr. Jaime De Guzman, a military neurosurgeon. After surviving a massacre that killed his wife and daughter, he hunts down all perpetrators. He tries living a normal life, but continues to carry the guilt from his past.
      </p>
      </div>
    </div>
    <div class="row movie-list-container" style="margin-top:20px; padding:10px;">
     <div class="col-xs-4 clearfix" style="position:relative;">
      <img class="img-responsive movie-pic" src="http://i1.wp.com/toplistnetwork.com/wp-content/uploads/2015/08/BatasngLansangan.jpg">
     </div>
     <div class="col-xs-8">
      <h1 class="text-primary">Batas Ng Lansangan (2002)</h1>
      <p>Once a part of an elite anti-kidnapping task force, Army Major Ruben Mercado (FPJ) returns to Manila and tries to renew ties with his Daughter Marissa who has been reluctant to reconcile with her father. Marissa’s been living with her late mother’s sister, Mariel.</p>
      <p>In his stay in Manila, he discovers a drug syndicate which he later on tries to hunt down. The drug lord’s hit man, Carlos, becomes Ruben’s greatest nemesis.
      </p>
      </div>
    </div>
    <div class="row movie-list-container" style="margin-top:20px; padding:10px;">
     <div class="col-xs-4 clearfix" style="position:relative;">
      <img class="img-responsive movie-pic" src="http://i2.wp.com/toplistnetwork.com/wp-content/uploads/2015/08/HindiPaTaposAngLaban.jpg">
     </div>
     <div class="col-xs-8">
      <h1 class="text-primary">Hindi Pa Tapos Ang Laban (1994)</h1>
      <p>Fernando Poe Jr. plays the role of Carding Villamar in “Hindi Pa Tapos Ang Laban”. Learning his brother’s death, he returns to their hometown, Evangelista. He discovers his brother did not die of heart attack as he was made to believe. His brother was shot in cold blood after refusing to sell their land to a landed Congressman. Carding, seeking to avenge his brother’s death, now faces a militia, and police operatives who are all in the Congressman’s pocket.
      </p>
      </div>
    </div>
    <div class="row movie-list-container" style="margin-top:20px; padding:10px;">
     <div class="col-xs-4 clearfix" style="position:relative;">
      <img class="img-responsive movie-pic" src="http://i0.wp.com/toplistnetwork.com/wp-content/uploads/2015/08/IsusumbongKitaSaTatayKo.jpg">
     </div>
     <div class="col-xs-8">
      <h1 class="text-primary">Isusumbong Kita Sa Tatay Ko (1999)</h1>
      <p>This is a story of a father and daughter, Badong (FPJ) and Joey (Judy Ann Santos), a pretty but boyish daughter. Badong is a protective father who would scare away Joey’s suitors. Badong meets and falls in love with a beautiful doctor. Joey now thinks she is losing her father’s love to another woman. She agrees to go out with her boastful suitor to spite Badong.
      </p>
      </div>
    </div>
    <h4 class="text-center">content credit: <a href="http://toplistnetwork.com/top-10-best-fernando-poe-jr-movies-of-all-time/" target="_blank">http://toplistnetwork.com/</a>
    </h4>
    <br>
    <h3 class="text-center">Know more about Fernando Poe Jr. at <a href="https://en.wikipedia.org/wiki/Fernando_Poe_Jr." target="_blank">Wikipedia.org</a></h3>
    <p class="text-center">coded by: <em>Michael Alegrado</em></p>
</div>
              
            
!

CSS

              
                .text-center {
  text-align: center;
}

.center-img {
   display: block;
   margin-left: auto;
   margin-right: auto }
}
.center-div {
  margin-left: auto;
  margin-right: auto 
}
.movie-list {
  list-style: none;
}

.movie-pic {
  float:right;
  width:150px;
  margin: 0
}
.movie-list-container {
  display: flex;
  align-items: center;
  justify-content: center
}

.clearfix {
  overflow: auto;
}

              
            
!

JS

              
                $("h1").hover( function() {
 $(this).addClass("animated shake");
  }, 
  function() {
    $(this).removeClass("animated shake");
    $(this).addClass("animated bounce");
  }
);
  

              
            
!
999px

Console