<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" /> <title>Martsa ng Bayan</title> </head> <body> <h1>Martsa ng Bayan ↵</h1> <h2>1974.1.7</h2> <!-- Header --> <div class="header" id="myHeader"> <button class="btn active" onclick="four()">Overview</button> <button class="btn" onclick="one()">100%</button> </div> <!-- metadata dropdown --> <div id="rightnav" class="rightnav"> <a href="index.html" id="title">Title</a> <a href="#" id="view">View</a> </div> <div id="leftnav" class="leftnav"> <a href="#" id="date">Date</a> <a href="https://www.google.com/" id="creator">Creator</a> </div> <div class="metadata_Creator"><a href>Philippine Conference for Human Rights (PCHR)</a> </div> <button class="orgbtn" onclick="myFunction()">Organizations</button> <div class="square"></div> <div id="myDIV"> <ul><a href="index.html">All Organizations</a></ul> </div> <div class="row"> <div class="column"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197401.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197405.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197409.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197413.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197417.jpg" style="width:100%"> </div> <div class="column"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197402.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197406.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197410.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197414.jpg" style="width:100%"> </div> <div class="column"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197403.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197407.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197411.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197415.jpg" style="width:100%"> </div> <div class="column"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197404.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197408.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197412.jpg" style="width:100%"> <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197416.jpg" style="width:100%"> </div> </div> <script> // Get the elements with class="column" var elements = document.getElementsByClassName("column"); // Declare a loop variable var i; // Four images side by side function four() { for (i = 0; i < elements.length; i++) { elements[i].style.msFlex = "25%"; // IE10 elements[i].style.flex = "25%"; } } // Full-width images function one() { for (i = 0; i < elements.length; i++) { elements[i].style.msFlex = "80%"; // IE10 elements[i].style.flex = "80%"; } } // // Two images side by side // function two() { // for (i = 0; i < elements.length; i++) { // elements[i].style.msFlex = "50%"; // IE10 // elements[i].style.flex = "50%"; // } // } // Add active class to the current button (highlight it) var header = document.getElementById("myHeader"); var btns = header.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } // toggle text function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } </script> </body> </html>