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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                
<h1>Gabriela Silang</h1>
<h2>The Filipina who paved the way to a revolution</h2>
<img class="image" src="http://1.bp.blogspot.com/_FFKau-MIe2I/TJeITIdTmsI/AAAAAAAACME/zT9VsuejbRM/s320/gabriela+silang+philstar+com.jpg" alt="Famed image of revolutionary leader Gabriela Silang">
<h3>Silang's life and contributions</h3>
<ul>
  <li>She was born on March 19, 1731 at Barangay Caniogan, Santa, Ilocos Sur.</li>  
  <li>Her father, Anselmo Cariño, was a Spanish trader who ferried his wares from Vigan to Abra along the Abra River. Her mother was a Tinguian from San Quintin Abra.</li>
  <li>After being separated from her parents at a young age, Gabriela was raised by a Christian priest and was eventually married off to a wealthy businessman in 1751.</li>
  <li>Due to illness, however, Gabriela's husband died after three years of marriage.</li>
  <li>After being widowed by her first husband, Gabriela met insurgent leader Diego Silang and married him in 1757.</li>
  <li>Diego Silang fought for freedom from the Spanish who colonized the Philippines. Gabriela supported this mission and helped Diego in however way she can.</li>
  <li>When British naval forces captured Manila in October 1762, Diego Silang saw this as an opportunity and initiated an armed struggle to overthrow the Spanish functionaries in Ilocos and replace them with native-born officials. He collaborated with the British occupiers, who appointed him governor of the Ilocos region on their behalf.</li> 	
  <li>During this revolt, Gabriela became one of Diego's closest advisors and his unofficial aide-de-camp during skirmishes with Spanish troops. She was also a major figure in her husband's collaboration with the British occupiers.</li>
  <li>Spanish authorities retaliated by offering a reward for Diego’s assassination. Consequently, his two former allies Miguel Vicos and Pedro Becbec killed him in Vigan on May 28, 1763.</li>
  <li>After Diego’s assassination, Gabriela fled to Tayum, Abra to seek refuge in the house of her paternal uncle, Nicolas Cariño.</li>	
  <li>There, she appointed her first two generals, Miguel Flores and Tagabuen Infiel. She later assumed her husband's role as commander of the rebel troops and achieved a “priestess” status amongst her community and followers.</li>
  <li>On September 10, 1763, Silang tried to besiege Vigan but the Spanish retaliated, forcing her into hiding. She retreated once more to Abra, where the Spanish later captured her.</li>
  <li>On September 20, 1763, Silang and her troops were executed by hanging in Vigan's central plaza.</li>
<li>After her death, she was revered and celebrated as a revolutionary hero and was given the title "la Generala", which means "female general".</li>
</ul>

<p>More information about Gabriela Silang can be seen <a href="https://en.wikipedia.org/wiki/Gabriela_Silang">here.</a>

              
            
!

CSS

              
                $white: #FFFFFF;

body {
  background-color: $white;
  font-family: cambria;
  margin: 50px;
}
h2{
  font-size: 30px;
  font-style: italic;
}
h1, h2 {
  text-align: center;
}

h4 {
  font-size: 20px;
}
p {
  font-size: 17px;
}

.image {
    width: 700px;
    border-style: solid;
    border-color: black;
    border-width: 10px;
  }
img {
display: block;
margin: auto;
}

              
            
!

JS

              
                document.getElementsByTagName("h1")[0].style.fontSize = "60px";
document.getElementsByTagName("h3")[0].style.fontSize = "20px";



              
            
!
999px

Console