You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
special-issue-11-wiki2html/static_website/item_page/MartsangBayan.html

128 lines
4.7 KiB
HTML

<!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 &#8629;</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>