API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 19th, 2019
266
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <title>History Web</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  7. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  9. <style>
  10. body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
  11.  
  12. body, html {
  13. height: 100%;
  14. line-height: 1.8;
  15. }
  16.  
  17. .bgimg-1 {
  18. background-position: center;
  19. background-size: cover;
  20. background-image: url("pic10.jpg");
  21. min-height: 100%;
  22. }
  23.  
  24. .w3-bar .w3-button {
  25. padding: 16px;
  26. }
  27. </style>
  28. <body>
  29.  
  30. <!-- Navbar (sit on top) -->
  31. <div class="w3-top">
  32. <div class="w3-bar w3-white w3-card" id="myNavbar">
  33. <a href="#home" class="w3-bar-item w3-button w3-wide">HOME</a>
  34. <!-- Right-sided navbar links -->
  35. <div class="w3-right w3-hide-small">
  36. <a href="#about" class="w3-bar-item w3-button">ABOUT</a>
  37. <a href="#gallery" class="w3-bar-item w3-button"><i class="fa fa-area-chart"></i> GALLERY</a>
  38. <a href="#contact" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i> CONTACT</a>
  39. </div>
  40. <!-- Hide right-floated links on small screens and replace them with a menu icon -->
  41.  
  42. <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
  43. <i class="fa fa-bars"></i>
  44. </a>
  45. </div>
  46. </div>
  47.  
  48. <!-- Sidebar on small screens when clicking the menu icon -->
  49. <nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  50. <a href="javascript:void(0)" onclick="w3_close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
  51. <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button">ABOUT</a>
  52. <a href="#gallery" onclick="w3_close()" class="w3-bar-item w3-button">GALLERY</a>
  53. <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button">CONTACT</a>
  54. </nav>
  55.  
  56. <!-- Header with full-height image -->
  57. <header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
  58. <div class="w3-display-left w3-text-black" style="padding:48px">
  59. <span class="w3-jumbo w3-hide-small">Welcome to my History Website</span><br>
  60. <span class="w3-xxlarge w3-hide-large w3-hide-medium">history web</span><br>
  61. <p><a href="#about" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Learn more</a></p>
  62. </div>
  63. <div class="w3-display-bottomleft w3-text-grey w3-large" style="padding:24px 48px">
  64. <a href = https://www.facebook.com/><i class="fa fa-facebook-official w3-hover-opacity"></i></a>
  65. <a href = https://www.instagram.com/?hl=en><i class="fa fa-instagram w3-hover-opacity"></i></a>
  66. <a href = https://twitter.com/?lang=en><i class="fa fa-twitter w3-hover-opacity"></i></a>
  67. </div>
  68. </header>
  69.  
  70. <!-- About Section -->
  71. <div class="w3-container" style="padding:128px 16px" id="about">
  72. <h3 class="w3-center">ABOUT THE WEBSITE</h3>
  73. <p class="w3-center w3-large">Brief Summary of the History of the Philppines</p>
  74. <div class="w3-row-padding w3-center" style="margin-top:64px">
  75. <div class="w3-quarter">
  76. <i class="fa fa-history w3-margin-bottom w3-jumbo w3-center"></i>
  77. <p class="w3-large">1380-1896</p>
  78. <p>Muslim Arabs arrived at the Sulu Archipelago, Ferdinand Magellan "discovers" the islands and names them: Archipelago of San Lazaro, Spanish expedition commandeered by Ruy Lopez de Villalobos claims the islands for Spain; names them "Philippines" after Prince Philip, later King Philip II of Spain; the Philippines becomes part of Spanish Empire, Gomburza (Fathers Mariano Gomez, Jose Burgos and Jocinto Zamora) were executed by the Spaniards, Jose Rizal founded the civic organization La Liga Filipina, Katipuneros tear their cedulas & shout in contempt of the Spaniards in what is called the Cry of Pugadlawin.</p>
  79. </div>
  80. <div class="w3-quarter">
  81. <i class="fa fa-history w3-margin-bottom w3-jumbo"></i>
  82. <p class="w3-large">1897-1898</p>
  83. <p> General Emilio Aguinaldo establishes the a new republic at Biak-na-Bato in Bulacan, José Rizal publishes anti-Spanish novel, Noli Me Tangere (The Lost Eden); and seers up independence sentiment, Spanish execute Rizal for instigating insurrection; public outrage spawns rebellion, American warship Maine was blown up in Havana harbour, triggers the the Spanish-American war, the battle of Manila Bay ensues, Emilio Aguinaldo assembled the Malolos Congress in Bulacan, then declares independence in Kawit, Cavite.</p>
  84. </div>
  85. <div class="w3-quarter">
  86. <i class="fa fa-history w3-margin-bottom w3-jumbo"></i>
  87. <p class="w3-large">1899-1916</p>
  88. <p>Treaty of Paris ends Spanish-American War, cedes Philippines to U.S. after payment to Spain by U.S. of $ 20 million. Emilio Aguinaldo declares independence then leads a guerrilla war against U.S, U.S. captures Aguinaldo; William Howard Taft arrives as first U.S. governor of Philippines, Insurrection ends; Taft improves economic conditions, settles disputes over church ownership of land, establishes "Pensionado" program, allowing Filipinos to study in U.S., which helped modernize and westernize the country, U.S. congress passes the Jones Law establishing elected Filipino legislature with house and senate.</p>
  89. </div>
  90. <div class="w3-quarter">
  91. <i class="fa fa-history w3-margin-bottom w3-jumbo"></i>
  92. <p class="w3-large">1934-1945</p>
  93. <p>U.S. congress approves the Tydings-McDuffie Law promising Philippine independence by 1946; transition to independence begins, Filipino people approve constitution creating the Philippine Commonwealth with Manuel Quezon y Molina as president, Japanese invades the Philippines, and defeats Gen. Douglas MacArthur at Bataan and Corregidor; Quezon establishes government in exile in the U.S, Quezon dies in exile; Vice President Sergio Osmena assumes the presidency; MacArthur returns to the Philippines and lands in Leyte with little resistance, Gen. MacArthur liberates Manila and President Osmena establishes government.</p>
  94. </div>
  95. <div class="w3-row-padding w3-center" style="margin-top:64px">
  96. <div class="w3-quarter">
  97. <i class="fa fa-history w3-margin-bottom w3-jumbo w3-center"></i>
  98. <p class="w3-large">1946-1983</p>
  99. <p>The U.S. gave the Philippines independence and Manuel Roxas y Acuna is elected as the first president of the new republic, Ferdinand E. Marcos is elected by a big majority as president, Martial Law was declared by President Marcos. This period is marked with human rights abuses and corruption, Marcos lifts Martial Law, Opposition leader Benigno "Ninoy" Aquino returns from exile and is assassinated on arrival at Manila International Airport; Aquino's widow Corazon leads the "People Power" protest movement.</p>
  100. </div>
  101. <div class="w3-quarter">
  102. <i class="fa fa-history w3-margin-bottom w3-jumbo w3-center"></i>
  103. <p class="w3-large">1986-1996</p>
  104. <p> Marcos was officially declared winner in a presidential election beating Corazon Aquino amid charges of fraud; demonstrations erupt; Marcos flees to Hawaii; Aquino is declared president and forms a new government, Endorsed by Aquino, her Secretary of Defense Gen. Fidel Ramos wins presidential election. U.S. Philippine congress rejects a new treaty with the U.S. and Subic Bay naval base and Clark Air Field returns to Philippine government, ending American military presence in the Philippines, The government of Ramos agrees to greater autonomy for southern island of Mindanao. Moro National Liberation Front (MNLF) ends the guerrilla war with the government.</p>
  105. </div>
  106. <div class="w3-quarter">
  107. <i class="fa fa-history w3-margin-bottom w3-jumbo w3-center"></i>
  108. <p class="w3-large">1997-2004</p>
  109. <p>Asian financial crisis grips Asia and the Philippines escapes the crisis despite series of currency devaluations, Former movie actor Joseph Estrada is elected president, On charges of corruption, the lower house impeach Estrada, Estrada was forced to step down due to public outrage over corruption allegations. Vice President Gloria Macapagal-Arroyo assumes the presidency, Presidential election takes place. Arroyo's closest rival (a dear friend of Ex-President Estrada) is film actor Fernando Poe, Jr. Arroyo narrowly defeats Poe, taking 39.5% of the vote to Poe's 36.6%.</p>
  110. </div>
  111. <div class="w3-quarter">
  112. <i class="fa fa-history w3-margin-bottom w3-jumbo w3-center"></i>
  113. <p class="w3-large">2005-2010</p>
  114. <p> A taped conversation between President Arroyo & an election official surfaced during the 2004 elections implying she influenced the official election results. Calls for her resignation and demonstrations followed soon after. In September 2005, Congress voted down the filing of an impeachment against Arroyo, Former President Joseph Estrada is convicted of plunder, the first ever in the history of the Philippines, First automated national elections in the Philippines.</p>
  115. </div>
  116. <div class="w3-row-padding w3-center" style="margin-top:64px">
  117. <div class="w3-quarter">
  118. <i class="fa fa-history w3-margin-bottom w3-jumbo w3-center"></i>
  119. <p class="w3-large">2010-2017</p>
  120. <p> Benigno "Noynoy" Simeon Cojuangco Aquino III wins the Presidential elections and sworn in at Manila's Rizal Park on June 30, 2010, Rodrigo "Rody" Roa Duterte, the former Mayor of Davao City assumes the Presidency. He is the first president to come from Mindanao, Pres. Duterte declares Martial Law in Mindanao Island due to the rebellion in Marawi City by ISIS-affiliated Maute group on May 23 and extended by both houses of congress to December 31, 2017. The devastated city of Marawi was declared liberated by Duterte on October 17, 2017.</p>
  121. </div>
  122. </div>
  123. </div>
  124.  
  125. <!-- Gallery Section -->
  126. <div class="w3-container" style="padding:128px 16px" id="gallery">
  127. <h3 class="w3-center">GALLERY</h3>
  128. <p class="w3-center w3-large">Images of the old Philippines</p>
  129. <div class="w3-row-padding w3-grayscale" style="margin-top:64px">
  130. <div class="w3-col l3 m6 w3-margin-bottom">
  131. <div class="w3-card">
  132. <img src="pica.jpg" style="width:100%">
  133. <div class="w3-container">
  134. <h3>Filipino Farm Life</h3>
  135. <p class="w3-opacity">1900s</p>
  136. <p>The "Lusong" is the wooden mortar where they pound the rice with a wooden pestle called "Halo" or "Pambayo" to separate the chaff from the grain. The island of Luzon is said to derive its name from this mortar seen in every house as pounding rice was then a daily grind.
  137. Then a winnowing basket called "Bilao" is used to separate the chaff or with the bigger contraption called "Kiskisan" where a fan is turned by hand to blow the chaff away.</p>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="w3-col l3 m6 w3-margin-bottom">
  142. <div class="w3-card">
  143. <img src="picb.jpg" style="width:100%">
  144. <div class="w3-container">
  145. <h3>Pasig River, Manila</h3>
  146. <p class="w3-opacity">1902</p>
  147. <p>Launches & Cascos on the Beautiful Pasig River, It used to be an important transport route in Old Spanish Manila. However, due to negligence and industrial development, the river has become very polluted and is considered dead (unable to sustain life) by Ecologists.</p>
  148. </div>
  149. </div>
  150. </div>
  151. <div class="w3-col l3 m6 w3-margin-bottom">
  152. <div class="w3-card">
  153. <img src="picc.jpg" style="width:100%">
  154. <div class="w3-container">
  155. <h3>Binondo Church, Chinatown, Manila</h3>
  156. <p class="w3-opacity">1902</p>
  157. <p>Binondo Church is located in Manila's Chinatown at the western end of Ongpin Street, Binondo. This church was founded by Dominican priests in 1596 to serve their Chinese converts to Christianity. The original building was destroyed by a bombardment by the British in 1762 during their brief occupation of Manila at that time.
  158. The current granite church was completed on the same site in 1852 and features an octagonal bell tower which suggests the Chinese culture of the parishioners. Binondo Church was greatly damaged during the Second World War, although fortunately the western facade and the octagonal bell tower survived.</p>
  159. </div>
  160. </div>
  161. </div>
  162. <div class="w3-col l3 m6 w3-margin-bottom">
  163. <div class="w3-card">
  164. <img src="picd.jpg" alt="Dan" style="width:100%">
  165. <div class="w3-container">
  166. <h3>Welcome Rotonda</h3>
  167. <p class="w3-opacity">1959</p>
  168. <p>In the year that Quezon City became the official capital of the Philippines, a majestic tower was constructed in the middle of a roundabout to welcome city visitors. The Welcome Rotonda, situated at the intersection of E. Rodriguez Sr. Boulevard, Mayon Avenue,
  169. Quezon Avenue, and Espana Boulevard, was designed by Luciano V. Aquino and executed in fine marble. The Welcome Rotonda was an important transportation hub, serving as a terminal for passenger jeepneys in post-war Manila. It is also a staging place for political and protest rallies.
  170. One such notorious protester was Amando Ducat Jr, who climbed the top of the tower and went on a hunger strike to object to the candidacies of Chinese-Filipinos in the 1995 elections. The Welcome Rotonda was renamed as Mabuhay Rotonda in 1995 by Quezon City Mayor Ismael Mathay.</p>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="w3-row-padding w3-grayscale" style="margin-top:64px">
  175. <div class="w3-col l3 m6 w3-margin-bottom">
  176. <div class="w3-card">
  177. <img src="pice.jpg" style="width:100%">
  178. <div class="w3-container">
  179. <h3>Quezon City Hall</h3>
  180. <p class="w3-opacity">1971</p>
  181. <p>The first city hall stood on Aurora Boulevard, corner EDSA. The current 14-storey city hall, designed by Architect Ruperto Gaite, is located along Elliptical Road, Diliman, and was constructed for a period of eight years from 1964 to 1972 and completed during the term of Mayor Norberto Amoranto.
  182. Its signature feature is the facade with bas-relief images, 40 meters long and 10 meters high. The bas-reliefs were created by Eugenio Bunuan and show images from the life of the late President Manuel Quezon. The central nine-meter figure features the leader standing tall with his trademark clench-fisted stance,
  183. surrounded by other images like his ancestral nipa house, the Quezon Memorial, and many scenes from the Commonwealth Era. </p>
  184. </div>
  185. </div>
  186. </div>
  187. <div class="w3-col l3 m6 w3-margin-bottom">
  188. <div class="w3-card">
  189. <img src="picf.jpg" style="width:100%">
  190. <div class="w3-container">
  191. <h3>Elliptical Road</h3>
  192. <p class="w3-opacity">1963</p>
  193. <p>The Elliptical Road is a two-kilometer road that circumscribes the whole of the Quezon City Memorial Circle, so named because of its elliptical shape.
  194. The eight-lane road serves as the end point or terminus of seven major city thoroughfares, namely: Commonwealth Avenue, Quezon Avenue, North Avenue, East Avenue,
  195. Visayas Avenue, Maharlika Street, and Kalayaan Avenue. Along the perimeter of the Elliptical Road are many government buildings like the Quezon City Hall, Quezon City Hall of Justice,
  196. Philippine Coconut Authority, Department of Agrarian Reform, Department of Agriculture, PTV 4, as well as the Ninoy Aquino Parks and Wildlife Center. </p>
  197. </div>
  198. </div>
  199. </div>
  200. <div class="w3-col l3 m6 w3-margin-bottom">
  201. <div class="w3-card">
  202. <img src="picg.jpg" style="width:100%">
  203. <div class="w3-container">
  204. <h3>Dilliman Disctract</h3>
  205. <p class="w3-opacity">1958</p>
  206. <p>Diliman, an important district located at the southern part of Quezon City, was named after an edible medicinal fern (Stenochlaena palustris), which was said to grow in abundance in the area.
  207. One of its distinguishing landmarks is the Quezon Memorial, which rises in the middle of the Quezon Memorial Circle. It is also a major educational district, home to many important learning institutions like the University of the Philippines Diliman,
  208. Philippine Science High School, Quezon City Science High School, School of the Holy Spirit (formerly Holy Ghost College), and Polytechnic University of the Philippines (formerly Philippine College of Commerce), among others. </p>
  209. </div>
  210. </div>
  211. </div>
  212. <div class="w3-col l3 m6 w3-margin-bottom">
  213. <div class="w3-card">
  214. <img src="pich.jpg" style="width:100%">
  215. <div class="w3-container">
  216. <h3>Camp Murphy/Camp Aguinaldo</h3>
  217. <p class="w3-opacity">1961</p>
  218. <p>The headquarters of the Armed Forces of the Philippines was named Camp Murphy (after Gov. Gen. Frank Murphy) when it was established in 1935. Part of the government-bought land on which the building was built came from the Ortigas clan.
  219. The first residents of the camp were the Philippine Constabulary. When the Philippine Army was formed through the National Defense Act, the Philippine Constabulary (PC) was designated as the Army Constabulary Division.
  220. The Army Constabulary Division (ACD) was separated from the Philippine Army in 1938 to become the National Police Force. After the war, Camp Murphy was divided to give way to a new camp Camp Crame which became the headquarters of the Philippine National Police. In 1965,
  221. Camp Murphy was renamed Camp General Emilio Aguinaldo, after the Philippines first president. </p>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227.  
  228. <!-- Contact Section -->
  229. <div class="w3-container w3-light-grey" style="padding:128px 16px" id="contact">
  230. <h3 class="w3-center">CONTACT</h3>
  231. <p class="w3-center w3-large">Lets get in touch. Send us a message:</p>
  232. <div style="margin-top:48px">
  233. <p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i> Manila, Philippines</p>
  234. <p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: 0966-408-0299</p>
  235. <p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: Chickadees1999@gmail.com</p>
  236. <br>
  237. <form action="/action_page.php" target="_blank">
  238. <p><input class="w3-input w3-border" type="text" placeholder="Name" required name="Name"></p>
  239. <p><input class="w3-input w3-border" type="text" placeholder="Email" required name="Email"></p>
  240. <p><input class="w3-input w3-border" type="text" placeholder="Subject" required name="Subject"></p>
  241. <p><input class="w3-input w3-border" type="text" placeholder="Message" required name="Message"></p>
  242. <p>
  243. <button class="w3-button w3-black" type="submit">
  244. <i class="fa fa-paper-plane"></i> SEND MESSAGE
  245. </button>
  246. </p>
  247. </form>
  248. <!-- Image of location/map -->
  249. <img src="pic1.jpg" class="w3-image w3-greyscale" style="width:100%;margin-top:48px">
  250. </div>
  251. </div>
  252.  
  253. <!-- Footer -->
  254. <footer class="w3-center w3-black w3-padding-64">
  255. <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
  256. <div class="w3-xlarge w3-section">
  257. <a href = https://www.facebook.com/><i class="fa fa-facebook-official w3-hover-opacity"></i></a>
  258. <a href = https://www.instagram.com/?hl=en><i class="fa fa-instagram w3-hover-opacity"></i></a>
  259. <a href = https://twitter.com/?lang=en><i class="fa fa-twitter w3-hover-opacity"></i></a>
  260. </div>
  261. </footer>
  262.  
  263. <script>
  264. // Modal Image Gallery
  265. function onClick(element) {
  266. document.getElementById("img01").src = element.src;
  267. document.getElementById("modal01").style.display = "block";
  268. var captionText = document.getElementById("caption");
  269. captionText.innerHTML = element.alt;
  270. }
  271.  
  272. // Toggle between showing and hiding the sidebar when clicking the menu icon
  273. var mySidebar = document.getElementById("mySidebar");
  274.  
  275. function w3_open() {
  276. if (mySidebar.style.display === 'block') {
  277. mySidebar.style.display = 'none';
  278. } else {
  279. mySidebar.style.display = 'block';
  280. }
  281. }
  282.  
  283. // Close the sidebar with the close button
  284. function w3_close() {
  285. mySidebar.style.display = "none";
  286. }
  287. </script>
  288.  
  289. </body>
  290. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!