item page tryout
Slayr
5 years ago
parent
66c33ecc7b
commit
66c9e1afd4
@ -0,0 +1,137 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Liberation: Vol. 14 No. 4</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Liberation: Vol. 14 No. 4 ↵</h1>
|
||||||
|
<h2>1986.6.1</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>National Democratic Front (NDF)</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="orgbtn" onclick="myFunction()">Organizations</button>
|
||||||
|
|
||||||
|
<div class="square"></div>
|
||||||
|
|
||||||
|
<div id="myDIV">
|
||||||
|
<ul><a href="index.html">New People's Army (NPA)</a></ul>, National Democratic Front (NDF), Armed Forces of the Philippines (AFP), International Monetary Fund (IMF), Katipunan ng mga Gurong Makabayan (KAGUMA), Philippine Conference for Human Rights (PCHR), World Bank (WB), Kilusang Mayo Uno - May First Movement (KMU), Kabataang Makabayan - Patriotic Youth (KM), National Press Club (NPC), Ministry of National Defense (MND), National Intelligence Security Authority (NISA), Federation of Free Farmers (FFF), Integrated National Police (INP), Military Security Unit (MSU), Communist Party of the Philippines (CPP), Civilian Home Defense Force (CHDF), Communist Party of the Philppines & New Peoples Army (CPP-NPA), Kilusan ng Magbubukid ng Pilipinas (KMP), Trade Union Congress of the Philippines (TUCP), Military Intelligence Service (MIS), Movement of Concerned Citizens for Civil Liberties (MCCCL), Executive Committee of the Central Committee (of the CPP) (EC-CC), National Economic Protectionism Association (NEPA), Pambansang Lakas ng Kilusang Mamamalakaya ng Pilipinas (PAMALAKAYA-Pilipinas), Reform the AFP Movement (RAM), Presidential Security Command (PSC), Metrocom Intelligence and Security Group (MISG), Civilian Armed Geographical Unit (CAFGU), Katipunan Dagiti Mannalon ti Isabela (KAMI-KMP)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No401.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No405.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No409.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No413.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No418.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No422.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No426.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No402.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No406.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No410.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No414.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No419.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No423.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No427.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No403.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No407.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No411.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No415.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No420.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No424.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No428.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No404.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No408.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No412.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No416.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No421.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No425.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>
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Nineteen Eighty Sick: Year of the Lupus</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Nineteen Eighty Sick: Year of the Lupus ↵</h1>
|
||||||
|
<h2>1986.1.1</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>Manuel Pamaran, Paki A. Lamero</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="orgbtn" onclick="myFunction()">Organizations</button>
|
||||||
|
|
||||||
|
<div class="square"></div>
|
||||||
|
<div id="myDIV">
|
||||||
|
<ul><a href="index.html">Kabataang Makabayan - Patriotic Youth (KM)</a></ul>
|
||||||
|
<ul><a href="index.html">Civilian Home Defense Force (CHDF)</a></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus01.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus05.jpg" style="width:100%">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus02.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus06.jpg" style="width:100%">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus03.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus07.jpg" style="width:100%">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus04.jpg" style="width:100%">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus08.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>
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Free all political prisoners: our solidarity will set them free</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Free all political prisoners: our solidarity will set them free ↵</h1>
|
||||||
|
<h2>1984.12.4</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>
|
||||||
|
|
||||||
|
|
||||||
|
<button class="orgbtn" onclick="myFunction()">Organizations</button>
|
||||||
|
|
||||||
|
<div class="square"></div>
|
||||||
|
|
||||||
|
<div id="myDIV">
|
||||||
|
<ul><a href="index.html">Task Force Detainees of the Philippines (TFDP)</a></ul>, Nationalist Alliance for Justice, Freedom and Democracy (NAJFD), Kapisanan para sa Pagpapalaya at Amnestiya ng mga Detenido sa Pilipinas - Association for the Release and Amnesty of Detainees in the Philippines (KAPATID)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF269Freeallpoliticalprisoners01.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF269Freeallpoliticalprisoners02.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
</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>
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon ↵</h1>
|
||||||
|
<h2>1977.6.12</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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/VF383Hamok00.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok01.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok02.jpg" style="width:100%">
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok03.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>
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h3>Results from query:<br/><code>[[Format::Song]]</code></h3>
|
||||||
|
<ul class="indexlist">
|
||||||
|
|
||||||
|
<li><a href="./MartsangBayan.html">Martsa ng Bayan</a>
|
||||||
|
1974.1.7
|
||||||
|
Philippine Conference for Human Rights (PCHR)
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="./HamokIsulongAngPambansangDemokratikongRebolusyon.html">Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon</a>
|
||||||
|
1977.6.12
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="./Freeallpoliticalprisonersoursolidaritywillsetthemfree.html">Free all political prisoners: our solidarity will set them free</a>
|
||||||
|
1984.12.4
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="./2NineteenEightySickYearoftheLupus.html">Nineteen Eighty Sick: Year of the Lupus</a>
|
||||||
|
1986.1.1
|
||||||
|
Manuel Pamaran, Paki A. Lamero
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li><a href="./1LiberationVol14No. 4.html">Liberation: Vol. 14 No. 4</a>
|
||||||
|
1986.6.1
|
||||||
|
National Democratic Front (NDF)
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,337 @@
|
|||||||
|
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
background-color: #aaa4a0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*index page links*/
|
||||||
|
|
||||||
|
li a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
position: fixed;
|
||||||
|
/*height: 50px;
|
||||||
|
width: auto;*/
|
||||||
|
right:0%;
|
||||||
|
text-align: right;
|
||||||
|
background-color: grey;
|
||||||
|
padding: 3px 30px 3px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3{
|
||||||
|
position: fixed;
|
||||||
|
left: 0%;
|
||||||
|
top: 5%;
|
||||||
|
text-align: left;
|
||||||
|
background-color: grey;
|
||||||
|
padding: 3px 3px 3px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexlist {
|
||||||
|
position: absolute;
|
||||||
|
top:20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header {
|
||||||
|
/*display: inline-block;*/
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
padding: 32px;
|
||||||
|
top: 15%;
|
||||||
|
right: 0%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: -ms-flexbox; /* IE 10 */
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
-ms-flex-wrap: wrap; /* IE 10 */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0 4px;
|
||||||
|
top: 35%;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create two equal columns that sits next to each other */
|
||||||
|
.column {
|
||||||
|
-ms-flex: 25%; /* IE 10 */
|
||||||
|
flex: 25%;
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column img {
|
||||||
|
margin-top: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the buttons */
|
||||||
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
width: 110px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 0px;
|
||||||
|
background-color: grey;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*metadata dropup*/
|
||||||
|
|
||||||
|
.dropbtn {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
width: 200px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropup {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropup-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: black;
|
||||||
|
opacity: 0.8;
|
||||||
|
min-width: 160px;
|
||||||
|
bottom: 50px;
|
||||||
|
z-index: 1;
|
||||||
|
width: 300px;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropup-content a {
|
||||||
|
color: grey;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropup-content a:hover {color: white;}
|
||||||
|
|
||||||
|
.dropup:hover .dropup-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropup:hover .dropbtn {
|
||||||
|
background-color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*metadata dropdown*/
|
||||||
|
.dropbtn {
|
||||||
|
position: fixed;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
bottom:30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
position: fixed;
|
||||||
|
display: inline-block;
|
||||||
|
bottom:30%;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 160px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content a {
|
||||||
|
color: black;
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-content a:hover {background-color: #f1f1f1;}
|
||||||
|
.dropdown:hover .dropdown-content {display: block;}
|
||||||
|
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*something*/
|
||||||
|
|
||||||
|
|
||||||
|
#rightnav a {
|
||||||
|
position: absolute;
|
||||||
|
right: -90px;
|
||||||
|
/*top:10%;*/
|
||||||
|
transition: 0.3s;
|
||||||
|
padding: 10px 50px 10px 30px;
|
||||||
|
width: 150px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightnav a:hover {
|
||||||
|
right: 0;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
top: 10%;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#view {
|
||||||
|
top: 27%;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftnav a {
|
||||||
|
position: absolute;
|
||||||
|
left: -80px;
|
||||||
|
/*top:10%;*/
|
||||||
|
transition: 0.3s;
|
||||||
|
padding: 10px 50px 10px 20px;
|
||||||
|
width: 125px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftnav a:hover {
|
||||||
|
left: 0;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#date {
|
||||||
|
top: 14%;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#creator {
|
||||||
|
top: 25%;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata_Creator{
|
||||||
|
position: absolute;
|
||||||
|
top:20%;
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: grey;
|
||||||
|
padding: 3px 5px 3px 30px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata_Creator a:hover{
|
||||||
|
color: blue;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#myDIV {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 48%;
|
||||||
|
height: auto;
|
||||||
|
left:26%;
|
||||||
|
top:15%;
|
||||||
|
/*padding: 50px 0;*/
|
||||||
|
text-align: center;
|
||||||
|
background-color: grey;
|
||||||
|
margin-top: 20px;
|
||||||
|
z-index: 4;
|
||||||
|
opacity:0.8;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#myDIV a:hover{
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.orgbtn {
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
width: 15%;
|
||||||
|
left:11%;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 12px;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
background-color: grey;
|
||||||
|
color: grey;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
/*margin-right: 5px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.orgbtn:hover {
|
||||||
|
background-color: black;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.square {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 50%;
|
||||||
|
height: 80%;
|
||||||
|
left:25%;
|
||||||
|
top:11%;
|
||||||
|
text-align: center;
|
||||||
|
background-color: transparent;
|
||||||
|
z-index: 2;
|
||||||
|
border-color: black;
|
||||||
|
border: solid 5px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue