<!DOCTYPE html>
<html>
<title>GPP Lubuk Pakam</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="http://imgs-info.ru/2019/10/12/GPP-transparent-background.jpg">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script src="https://kit.fontawesome.com/215b853942.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
html {
font-family: 'Courgette', cursive;
}
body {
background-image: linear-gradient(red, black);
}
.mySlides {display:none;
z-index: -1;
}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:17px;width:17px;padding:0}
.album{
margin-top: 80px;
text-shadow: 5px 2px 10px #000000;
font-family: 'Courgette', cursive;
}
h2, h3, h4, p, button {
font-family: 'Courgette', cursive;
font-weight: bold;
color: white;
}
.w3-bar{
background-image: linear-gradient(red, black);
}
}
.song{
width: 100%;
height: 100%;
}
#biru:focus{
outline: none;
}
#hijau:focus{
outline: none;
}
#hitam:focus{
outline: none;
}
#grey:focus{
outline: none;
}
#ungu:focus{
outline: none;
}
#biru{
background-image: linear-gradient(blue, black);
}
#hijau{
background-image: linear-gradient(green, black);
}
#hitam{
background-image: linear-gradient(grey, black);
}
#grey{
background-image: linear-gradient(white, grey);
}
#ungu{
background-image: linear-gradient(purple, black);
}
#biru:hover{
background-image: linear-gradient(black, black);
}
#hijau:hover{
background-image: linear-gradient(black, black);
}
#hitam:hover{
background-image: linear-gradient(black, black);
}
#grey:hover{
background-image: linear-gradient(black, black);
}
#ungu:hover{
background-image: linear-gradient(black, black);
}
#myBtn {
display: none;
position: fixed;
bottom: 8px;
right: 5px;
z-index: 99;
font-size: 18px;
outline: none;
background-image: linear-gradient(red, black);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtnBg{
position: fixed;
top: 80px;
left: 0;
z-index: 99;
outline: none;
background-image: linear-gradient(grey, white);
cursor: pointer;
padding: 5px;
border-radius: 10px;
}
#myBtnBg:focus{
outline: none;
}
#myBtn:hover {
background-image: linear-gradient(black, black);
}
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<i class='fas fa-chevron-circle-up w3-border' onclick="topFunction()" id="myBtn" title="Ke Atas"></i>
<img src="http://imgs-info.ru/2019/10/12/GPP-transparent-background.jpg" class="myimg" id="myBtnBg" onclick="plusDivs(1); texttab(1);" alt="Norway" style="width:50px">
<div class="w3-bar w3-top" id="top-bar">
<h2 class="w3-center"><marquee direction="left">Remaja/NGPP L. Pakam</marquee></h2>
</div>
<h2 class="album w3-center">Galeri Foto</h2>
<div class="w3-content w3-display-container" style="max-width:90%">
<img class="mySlides w3-border w3-round-xxlarge w3-leftbar w3-rightbar w3-animate-opacity" src="http://imgs-info.ru/2019/10/15/116b9625e6cb83204.jpg" style="width:100%">
<img class="mySlides w3-border w3-round-xxlarge w3-leftbar w3-rightbar w3-animate-opacity" src="http://imgs-info.ru/2019/10/15/29eb926a92204429b.jpg" style="width:100%">
<img class="mySlides w3-border w3-round-xxlarge w3-leftbar w3-rightbar w3-animate-opacity" src="http://imgs-info.ru/2019/10/15/39e241f3c3c1d092e.jpg" style="width:100%">
<img class="mySlides w3-border w3-round-xxlarge w3-leftbar w3-rightbar w3-animate-opacity" src="http://imgs-info.ru/2019/10/15/41f4339935825b699.jpg" style="width:100%">
<img class="mySlides w3-border w3-round-xxlarge w3-leftbar w3-rightbar w3-animate-opacity" src="http://imgs-info.ru/2019/10/15/57486c10939533dfd.jpg" style="width:100%">
<img class="mySlides w3-border w3-round-xxlarge w3-leftbar w3-rightbar w3-animate-opacity" src="http://imgs-info.ru/2019/10/15/628cc0b2297b643f6.jpg" style="width:100%">
<div class="w3-center w3-container w3-section w3-large w3-text-black w3-display-bottommiddle" style="width:100%">
<div class="w3-container" style="left: 0; margin-bottom: -20px">
<span class="w3-badge demo w3-border w3-border-black w3-transparent w3-hover-black" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-border-black w3-transparent w3-hover-black" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-border-black w3-transparent w3-hover-black" onclick="currentDiv(3)"></span>
<span class="w3-badge demo w3-border w3-border-black w3-transparent w3-hover-black" onclick="currentDiv(4)"></span>
<span class="w3-badge demo w3-border w3-border-black w3-transparent w3-hover-black" onclick="currentDiv(5)"></span>
<span class="w3-badge demo w3-border w3-border-black w3-transparent w3-hover-black" onclick="currentDiv(6)"></span>
</div>
</div>
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-blue w3-border w3-round w3-hover-pale-blue" onclick="plusDivs(-1)"><</button>
<button class="w3-button w3-red w3-border w3-round w3-hover-pale-red" onclick="plusDivs(1)">></button>
</div>
</div>
<div class="w3-center" style="width: 100%" id="lagu">
<div class="w3-bar w3-text-white w3-border w3-bottombar w3-topbar" id="bar">
<button title="Hatiku Percaya" class="w3-bar-item w3-small w3-button testbtn w3-padding-16 w3-hover-dark-grey" onclick="openCity(event,'London')">Hati..</button>
<button title="Pegang Tanganku" class="w3-bar-item w3-small w3-button testbtn w3-padding-16 w3-hover-dark-grey" onclick="openCity(event,'Paris')">Pegang..</button>
<button title="Kau Allah Yang Besar" class="w3-bar-item w3-small w3-button testbtn w3-padding-16 w3-hover-dark-grey" onclick="openCity(event,'Tokyo')">Kau..</button>
<button title="Ada Kota Yang Indah Cerah" class="w3-bar-item w3-small w3-button testbtn w3-padding-16 w3-hover-dark-grey" onclick="openCity(event,'KJ1')">KJ 1</button>
<button title="Betapa Kita Tidak Bersyukur" class="w3-bar-item w3-small w3-button testbtn w3-padding-16 w3-hover-dark-grey" onclick="openCity(event,'KJ2')">KJ 2</button>
</div>
<div id="London" class="w3-container w3-center city w3-animate-opacity">
<h2>Hatiku Percaya</h2>
<h4>Intro</h4>
<h4>Song <small>(cewek duluan)</small></h4>
<p>Saat 'ku tak melihat jalanMu</p>
<p>Saat 'ku tak mengerti rencanaMu</p>
<p>Namun tetap kupegang janjiMu</p>
<p>Pengharapanku hanya padaMu</p>
<h4>Reff</h4>
<p>Hatiku percaya</p>
<p>Hatiku percaya</p>
<p>Hatiku percaya</p>
<p>S'lalu kupercaya</p>
<h4>Intro</h4>
<h4>Song</h4>
<h4>Reff</h4>
<h4>Reff (modulasi)</h4>
<h4>Ending</h4>
<p>S'lalu kupercaya</p>
<div class="song">
<iframe color="black" width="100%" height="100%" src="https://clyp.it/fsxc1hm2/widget" frameborder="10"></iframe>
</div>
</div>
<div id="Paris" class="w3-container city w3-animate-opacity">
<h2>Pegang Tanganku</h2>
<h4>Intro</h4>
<h4>Song 1 <small>(cewek)</small></h4>
<p>Di kala 'ku cemas</p>
<p>Dan di kala 'ku bersenang</p>
<p>KepadaMu kus'rahkan hidupku</p>
<h4>Song 2 <small>(cowok)</small></h4>
<p>Bila ku bersenandung</p>
<p>Dalam masa hidupku</p>
<p>Agar namaMu terpuji kekal</p>
<h4>Reff</h4>
<p>Pegang lah tanganku oh peganglah</p>
<p>Pegang lah tanganku oh peganglah tanganku</p>
<p>Jangan lah 'kutersesat di jalan</p>
<p>Jangan lah 'kutersesat di perjalananku</p>
<p>Oh Tuhan pimpinlah</p>
<br>
<p>Pimpinlah kan daku oh pimpinlah</p>
<p>Pimpinlah kan daku oh pimpinlah hidupku</p>
<p>Oh Tuhan pimpin hambaMu</p>
<p>Jangan lah 'kutersesat di perjalananku</p>
<h4>Intro</h4>
<h4>Song 2</h4>
<h4>Reff</h4>
<h4>Ending</h4>
<p>Oh Tuhan pimpin hambaMu</p>
<p>Jangan lah 'kutersesat di perjalananku</p>
<div class="song">
<iframe color="black" width="100%" height="100%" src="https://clyp.it/ermfsmqf/widget" frameborder="10"></iframe>
</div>
</div>
<div id="Tokyo" class="w3-container city w3-animate-opacity">
<h2>Kau Allah Yang Besar</h2>
<h4>Intro <b>(tanda masuk beat 2x)</b></h4>
<h4>Song 1</h4>
<p>Yesus, Tuhan, Kau layak dipuji</p>
<p>Ditinggikan atas s'luruh bumi</p>
<p>A<u>jaib</u> <u>kua</u>saMu ya Allahku</p>
<p>'Ku kagum hormat padaMu</p>
<h4>Song 2</h4>
<p>Yesus, Tuhan, Kau layak dipuji</p>
<p>Ditinggikan atas s'luruh bumi</p>
<p>Heran kasihMu di hidupku</p>
<p>Yesus kekuatanku</p>
<h4>Reff</h4>
<p>Kau Allah yang besar a<u>jaib</u> dan mulia</p>
<p>Kau Yesus yang s'lalu mem<u>buat</u>ku terpesona</p>
<p>S'gala pujian bagiMu ya Tuhan</p>
<p>Hanya Kau yang layak ku agungkan</p>
<br>
<p>Kau Allah yang besar ajaib dan mulia</p>
<p>Kau Yesus yang s'lalu membuatku terpesona</p>
<p>S'gala pujian bagiMu ya Tuhan</p>
<p>Hanya Kau yang layak ku agungkan</p>
<h4>Intro</h4>
<h4>Song 2</h4>
<h4>Reff</h4>
<h4>Ending</h4>
<p>Hanya Kau yang layak ku agungkan</p>
<p>Hanya Kau yang layak ku agungkan</p>
<div class="song">
<iframe color="black" width="100%" height="100%" src="https://clyp.it/zqdfi1px/widget" frameborder="10"></iframe>
</div>
</div>
<div id="KJ1" class="w3-container city w3-animate-opacity">
<h2 class="w3-center">Ada Kota Yang Indah Cerah</h2>
<h4>Intro Song By Pika</h4>
<h4>Song 1</h4>
<p>Ada kota yang indah cerah</p>
<p>Nampaklah bagi mata iman</p>
<p>Rumah Bapa di Sorga baka</p>
<p>Bagi orang yang sudah menang</p>
<h4>Reff</h4>
<p>Indahnya saatnya</p>
<p>Kita jumpa di kota permai</p>
<p>Indahnya saatnya</p>
<p>Kita jumpa di kota permai</p>
<h4>Intro</h4>
<h4>Song 2</h4>
<p>Pada Bapa Pemurah benar</p>
<p>Kita patut bersyukur tetap</p>
<p>Tiap hari kasihNya besar</p>
<p>Hidup kita teriring berkat</p>
<h4>Reff</h4>
<h4>Reff (modulasi)</h4>
<h4>Ending</h4>
<p>Kita jumpa di kota permai</p>
<div class="song">
<iframe width="100%" height="100%" src="https://clyp.it/i0e1ae05/widget" frameborder="10"></iframe>
</div>
</div>
<div id="KJ2" class="w3-container city w3-animate-opacity">
<h2 class="w3-center">Berkumandang Suara Dari Seberang</h2>
<h4>Intro Song By Rajawin</h4>
<h4>Bridge</h4>
<p>Kirimkan lah kirimkan lah ya Tuhan</p>
<p>Pelita Injili di dalam hatiku</p>
<p>Kirimlah Tuhan</p>
<p>Kirimlah Tuhan, cahayaMu</p>
<h4>Song 1</h4>
<p>Berkumandang <u>sua</u>ra dari seberang</p>
<p>"Kirimlah cahyamu"</p>
<p>Banyak jiwa dalam dosa mengerang</p>
<p>"Kirimlah cahyamu"</p>
<h4>Reff</h4>
<p>Kirimlah pelita Injili</p>
<p>Menyentak yang terlelap</p>
<p>Kirimlah pelita Injili</p>
<p>Menyentak yang terlelap</p>
<h4>Song2</h4>
<p>Kita t'lah dengar jeritan dari <u>jauh</u></p>
<p>"Kirimlah cahyamu"</p>
<p>Bantuanmu b'rikan, janganlah jemu</p>
<p>"Kirimlah cahyamu"</p>
<h4>Reff</h4>
<h4>Ending</h4>
<p>Kirimlah Tuhan</p>
<p>Kirimlah Tuhan, cahayaMu</p>
<hr>
</div>
<h4 class="w3-center">Pilih Warna Favoritmu</h4>
<i class="fa fa-hand-o-down w3-center" style="color: white; font-size: 30px;" aria-hidden="true"></i>
<br><br>
<div class="w3-text-white w3-center">
<button id="biru" class="w3-bar-item w3-button w3-small testbtn w3-padding-16 w3-hover-dark-grey w3-round-xxlarge" onclick="changeBodyBg('blue'); myfooter(); mytopbar();">Biru</button>
<button id="hijau" class="w3-bar-item w3-button w3-small testbtn w3-padding-16 w3-hover-dark-grey w3-round-xxlarge" onclick="changeBodyBg('green'); myfooter1(); mytopbar1();">Hijau</button>
<button id="hitam" class="w3-bar-item w3-button w3-small testbtn w3-padding-16 w3-hover-dark-grey w3-round-xxlarge" onclick="changeBodyBg('black'); myfooter2(); mytopbar2();">Hitam</button>
<button id="grey" class="w3-bar-item w3-button w3-small testbtn w3-padding-16 w3-hover-dark-grey w3-round-xxlarge" onclick="changeBodyBg('grey'); myfooter3(); mytopbar3(); mysong();">Grey</button>
<button id="ungu" class="w3-bar-item w3-button w3-small testbtn w3-padding-16 w3-hover-dark-grey w3-round-xxlarge" onclick="changeBodyBg('purple'); myfooter4(); mytopbar4();">Ungu</button>
</div>
</div>
<br>
<div id="footer" class="w3-bar">
<h2 class="w3-center">GPP Lubuk Pakam</h2>
</div>
<script>
//change background color to blue
function myfooter() {
document.getElementById("footer").style.backgroundImage = "linear-gradient(blue, black)";
document.getElementById("bar").style.backgroundImage = "linear-gradient(black, blue)";
document.getElementById("myBtn").style.backgroundImage = "linear-gradient(black,blue)";
document.getElementsByTagName("BODY")[0].style.backgroundImage = "linear-gradient(blue,black)";
}
function mytopbar() {
document.getElementById("top-bar").style.backgroundImage = "linear-gradient(blue, black)";
}
//change background color to green
function myfooter1() {
document.getElementById("footer").style.backgroundImage = "linear-gradient(green, black)";
document.getElementById("bar").style.backgroundImage = "linear-gradient(black, green)";
document.getElementById("myBtn").style.backgroundImage = "linear-gradient(black,green)";
document.getElementsByTagName("BODY")[0].style.backgroundImage = "linear-gradient(green,black)";
}
function mytopbar1() {
document.getElementById("top-bar").style.backgroundImage = "linear-gradient(green, black)";
}
//change background color to black
function myfooter2() {
document.getElementById("footer").style.backgroundImage = "linear-gradient(grey, black)";
document.getElementById("bar").style.backgroundImage = "linear-gradient(black, grey)";
document.getElementById("myBtn").style.backgroundImage = "linear-gradient(grey,black)";
}
function mytopbar2() {
document.getElementById("top-bar").style.backgroundImage = "linear-gradient(black, grey)";
}
function changeBodyBg(color) {
document.body.style.background = color;
}
//change background color to white
function myfooter3() {
document.getElementById("footer").style.backgroundImage = "linear-gradient(white, grey)";
document.getElementById("bar").style.backgroundImage = "linear-gradient(white, grey)";
document.getElementById("myBtn").style.backgroundImage = "linear-gradient(black,white)";
document.getElementsByTagName("BODY")[0].style.backgroundImage = "linear-gradient(white,black)";
}
function mytopbar3() {
document.getElementById("top-bar").style.backgroundImage = "linear-gradient(white, grey)";
}
//change background color to purple
function myfooter4() {
document.getElementById("footer").style.backgroundImage = "linear-gradient(purple, black)";
document.getElementById("bar").style.backgroundImage = "linear-gradient(black, purple)";
document.getElementById("myBtn").style.backgroundImage = "linear-gradient(black,purple)";
document.getElementsByTagName("BODY")[0].style.backgroundImage = "linear-gradient(purple,black)";
}
function mytopbar4() {
document.getElementById("top-bar").style.backgroundImage = "linear-gradient(purple, black)";
}
</script>
<script>
//Get the button (gpp and back to top button) to hide and display
var mybutton = document.getElementById("myBtn");
var gppbutton = document.getElementById("myBtnBg");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
} if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
gppbutton.style.display = "none";
} else {
gppbutton.style.display = "block";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<script>
// Tabs
function openCity(evt, cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var activebtn = document.getElementsByClassName("testbtn");
for (i = 0; i < x.length; i++) {
activebtn[i].className = activebtn[i].className.replace(" w3-black", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-black";
}
var mybtn = document.getElementsByClassName("testbtn")[0];
mybtn.click();
</script>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-black", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-black";
}
</script>
</body>
</html>