Nama: Hania Maghfira
NRP: 5115100042
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MAPAGAMA – Mahasiswa Pencinta Alam Universitas Gadjah Mada</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arial">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="http://mapagama.ukm.ugm.ac.id/wp-content/uploads/2012/09/Lambang-MAPAGAMA-150x150.png" sizes="32x32">
<!--style-->
<style>
body{font-family: "Raleway"}
#overlay {
position: scroll;
display: block;
width: 100%;
height: 512px;
}
h1 {letter-spacing: 1px; font-family: "Arial"}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
.parallax1 {
/* The image used */
background-image: url("bendera-mapa.jpg");
opacity: 0.9;
margin-top: -40px;
/* Set a specific height */
width: 100%;
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
/* The image used */
background-image: url("body1.jpg");
opacity: 0.9;
/* Set a specific height */
width: 100%;
height: 1300px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax3 {
/* The image used */
background-image: url("head.jpg");
opacity: 0.9;
/* Set a specific height */
width: 100%;
height: 300px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
}
.w3-button {width:120px; border-radius: 6px;}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: grey;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
#a{font-family: "Arial"}
#p{font-family: "Pacifico"}
#r{font-family: "Rancho"}
#rl{font-family: "Raleway"}
</style>
</head>
<body>
<!-- button up -->
<div id="r" style="font-size: 14px">
<button onclick="topFunction()" id="myBtn" title="Go to top">UP</button>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- end of button up -->
<!-- HEADER -->
<section id="header">
<header>
<div class="content">
<div class="parallax1">
<div class="header-content-wrap" style="background: rgba(0,0,0,0.5); min-height: 600px; width: 100%">
<div class="w3-container w3-center">
<h1 style="color: #FFFFFF; margin-top: 250px; margin-left: 100px; margin-right: 100px; font-size: 55px"><b>MAHASISWA PENCINTA ALAM UNIVERSITAS GADJAH MADA</b></h1>
<div id="a" style="margin-top: 100px; font-size: 12px;">
<a href="#focus" class="w3-button w3-indigo">BERANDA</a>
<a href="#about" class="w3-button w3-pink">TENTANG KAMI</a>
<a href="#galeri" class="w3-button w3-green">GALERI</a>
<a href="#hub" class="w3-button w3-deep-orange">HUBUNGI KAMI</a>
</div>
</div>
</div>
</div>
</div>
</header>
</section>
<!-- / END HEADER SECTION -->
<!-- SECTION BERANDA -->
<section class="focus" id="focus">
<div class="w3-container" style="min-height: 670px;">
<div class="w3-center">
<h2 style="margin-top: 20px; font-size: 30px; color: #212121" id="a"><b>MAPAGAMA</b></h2>
<div id="r" style="color: #8A8A8A; font-size: 20px">Mahasiswa Pencinta Alam Universitas Gadjah Mada</div>
</div>
<div class="w3-center" style="margin-top: 100px; margin-left: 100px; margin-right: 100px; ">
<div class="row">
<div class="col-lg-4 col-sm-4 focus-box">
<div class="service-icon">
<img src="h1.png" class="img-circle" width="105" height="100">
</div>
<br>
<h3 id="r" class="w3-red-border-bottom" style="letter-spacing: 2px"><b>GUNUNG HUTAN</b></h3>
<hr>
<p>Divisi yang menawarkan pengalaman berpetualang menjelajah gunung-gunung di nusantara dan dunia</p>
<br>
<br>
</div>
<div class="col-lg-4 col-sm-4 focus-box">
<div class="service-icon">
<img src="h2.png" class="img-circle" width="105" height="119">
</div>
<h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>OLAHRAGA ARUS DERAS</b></h3>
<hr>
<p>Divisi yang menawarkan sensasi lebih bagi para petualang dan eksplorasi sungai-sungai di nusantara & dunia</p>
<br>
<br>
</div>
<div class="col-lg-4 col-sm-4 focus-box">
<div class="service-icon">
<img src="h3.png" class="img-circle" width="105" height="118">
</div>
<h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>PANJAT TEBING</b></h3>
<hr>
<p>Divisi yang menawarkan pengalaman menantang adrenalin di ketinggian dan tebing-tebing di nusantara maupun dunia</p>
<br>
<br>
</div>
<div class="col-lg-6 col-sm-6 focus-box">
<div class="service-icon">
<img src="h4.png" class="img-circle" width="105" height="119">
</div>
<h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>PENELUSURAN GUA</b></h3>
<hr>
<p>Divisi yang menawarkan petualangan di dalam lorong gelap dan mengeksplorasi gua-gua di nusantara dan dunia</p>
<br>
<br>
</div>
<div class="col-lg-6 col-sm-6 focus-box">
<div class="service-icon">
<img src="h5.jpg" class="img-circle" width="105" height="119">
</div>
<h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>PARALAYANG</b></h3>
<hr>
<p>Divisi yang menawarkan terbang melayang di udara. Membutuhkan skill tingkat tinggi dan pengalaman, dapat mengeksplorasi keindahan alam nusantara dan dunia dari udara.</p>
<br>
<br>
</div>
</div>
</div>
</div>
</section>
<!-- / END OF BERANDA -->
<!-- TENTANG KAMI -->
<section id=about>
<div class="content">
<div class="parallax2">
<div class="header-content-wrap" style="background: rgba(0,0,0,0.1); min-height: 1300px; width: 100%">
<br>
<br>
<br>
<div id="a" class="w3-center">
<h2 style="margin-top: 20px; font-size: 50px; color: #FFFFFF"><b>TENTANG KAMI</b></h2>
<div id="r" style="color: #EFEBEB; font-size: 30px">Selamat Datang di website resmi Mahasiswa Pencinta Alam Universitas Gadjah Mada</div>
</div>
<div class="w3-row col-md-6">
<div class="w3-container">
<h1 id="rl" style="color: #FFFFFF; margin-top: 100px; margin-left: 100px; font-size: 40px; text-align: right; letter-spacing: 2px">"Setiap manusia punya sejarahnya, lalu dengan sejarah mereka mengenyam masa depan."
</h1>
</div>
</div>
<div class="w3-row col-md-6">
<div class="w3-container">
<p id="rl" style="color: #FFFFFF; text-align: left; font-size: 14px; margin-top: 100px; margin-right: 100px">Mahasiswa Pencinta Alam Universitas Gadjah Mada merupakan unit kegiatan mahasiswa di tingkat universitas yang mewadahi minat dan bakat mahasiswa di lingkungan UGM dalam kegiatan yang bersifat kepencintaalaman. MAPAGAMA merupakan salah satu sarana guna mewujudkan keberadaan mahasiswa UGM dalam memperjuangkan cita-citanya yang berlandaskan Pancasila, UUD 1945 dan Tri Dharma Perguruan Tinggi. Dalam setiap kegiatan kepencintaalaman secara operasional MAPAGAMA selalu berlandaskan pada Tri Dharma Perguruan Tinggi yaitu Pendidikan, Penelitian dan Pengabdian Masyarakat. <br> <br> Pada bulan September 1973 MAPAGAMA didirikan sebagai unit kegiatan ekstrakurikuler kepencintaalaman di bawah Dewan Mahasiswa UGM (DEMA UGM). Namun, pada saat itu sedang terjadi gerakan Mahasiswa yang mengalami puncaknya pada peristiwa Malari 1974. Sehingga mendorong Pangkop kamtib mengeluarkan S.Kep/02/Kopkam/1978 tentang pembubaran Dema dan Sema dan lanjut keluar SK tentang NKK/BKK oleh Menteri P dan K. Sehingga dengan dibekukannnya Dema, maka secara otomatis MAPAGAMA yang pada saat itu berada di bawah DEMA ikut bubar. Hingga dari tahun tersebut sampai tahun 1981, MAPAGAMA tidak aktif lagi. <br> <br> Pada Tahun 80-an muncul kembali ide untuk menghidupkan MAPAGAMA, sehingga pada Agustus 1981 MAPAGAMA resmi berdiri lagi dengan Pengurus Harian yang memperoleh mandat dari kelompok-kelompok PENCINTA alam yang ada di UGM untuk mengembalikan eksistensi MAPAGAMA dengan menyusun program kerja serta sistem organisasi yang baru. Pada saat itu MAPAGAMA merupakan sentral wadah kepencintaalaman di UGM dan sebagai pusat koordinasi mapala fakultas. Internal MAPAGAMA sebagai pengarah kegiatan MG di fakultas dan ekstern sebagai saluran aspirasi mapala fakultas. <br> <br> Sebagai langkah untuk membuktikan eksistensi MAPAGAMA pada tahun 1984 direncakan sebuah Ekspedisi Gajah Mada yang akhirnya berhasil terlaksana tepatnya pada bulan Juli – September 1989 di Kecamatan Ilaga dan Beoga, Kabupaten Jayawijaya, Irian. Materi ekspedisi meliputi penelitian pengabdian masyarakat dan olahraga PENCINTA alam (ke Pegunungan Jaya Wijaya-Puncak Carstenz). Seusai EGM 84 beberapa personil kembali ke fakultas karena merasa bentuk perserikatan dirasa kurang cocok bagi perkembangan MAPAGA. Oleh karena itu pada tanggal 23 Desember 1984 diadakan suatu pertemuan untuk membahas masalah keanggotaan dan bentuk MAPAGAMA. <br> <br> Berdasarkan pertemuan tersebut, akhirnya diputuskan bahwa keanggotaan MAPAGAMA bersifat individu. Diadakan heregistrasi bagi anggota agar sesuai dengan bentuk organisasi yang baru. Kriteria anggota adalah eks Gladimula 1, eks panitia pembina, instruktur Gladimula 1, eks EGM 84 dan pengurus harian. Dan setelah itu dibentuk kepengurusan transisi dari bentuk perserikatan ke bentuk perhimpunan biasa. Maka harus ada revisi total untuk AD/ART, yang pelaksanaannya dikerjakan oleh tim yang dipimpin Mas Sunyoto, disahkan tanggal 23 September 1985. Sejak tahun 1985, MG hidup sebagai organisasi kepencintaalaman dengan semangat yang baru. MAPAGAMA mempertahankan eksistensi struktur organisasi dan keanggotaannya hingga sekarang sudah dilaksanakan 33 kali Gladimula.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END TENTANG KAMI -->
<!-- STRUKTUR-->
<section id=struktur>
<div class="w3-container w3-center" style="background-color: #FFFFFF; min-height: 500px">
<h1 id="r" style="color: #000000; margin-top: 50px"><b>PENGURUS HARIAN MAPAGAMA 2017</b></h1>
<br>
<br>
<br>
<div class="row">
<div style="color: #000000" id="rl">
<div class="col-sm-3">
<div class="service-icon">
<img src="ketua.jpg" class="img-circle" width="100" height="100">
</div>
<br>
<p><b>MANTO SITINDAON</b></p><p>Ketua Umum</p>
<br>
<br>
</div>
<div class="col-sm-3">
<div class="service-icon">
<img src="sekretaris.jpg" class="img-circle" width="100" height="100">
</div>
<br>
<p><b>ANDOYO RESPATI FITRIONO</b></p><p>Sekretari</p>
<br>
<br>
</div>
<div class="col-sm-3" style="margin-top: 115px">
<p><b>EVA LUTVI ATUR ROHMAH NINGSIH</b></p><p>Bendahara</p>
<br>
<br>
</div>
<div class="col-sm-3">
<div class="service-icon">
<img src="kabid.jpg" class="img-circle" width="100" height="100">
</div>
<br>
<p><b>M. REZA KHAIRURRAHMAN</b></p><p>Kabid. Pendidikan dan Pengembangan</p>
<br>
<br>
</div>
<div>
<p><b>ALIEF FAHMIL UMAM</b></p><p>Kabid. Operasional</p>
</div>
</div>
</div>
</div>
</section>
<!-- END OF STRUKTUR -->
<!-- GALERI -->
<section id=galeri>
<div class="w3-container w3-center" style="background-color: #141414; min-height: 750px">
<h2 style="margin-top: 40px; font-size: 35px; color: #FFFFFF" id="a"><b>GALERI</b></h2>
<div id="r" style="color: #EFEBEB; font-size: 20px">Kumpulan beberapa dokumentasi dari kegiatan MAPAGAMA</div>
<br>
<br>
<div class="w3-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17634437_1241286579325789_4352830271091747789_n.jpg?oh=d58a27dd6529c0d173613c83ae6bc4b3&oe=595E6913" style="width: 760px; height: 500px">
</div>
<div class="item">
<img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17626686_1241286649325782_2679845175080918401_n.jpg?oh=4bca56e6eef641a58df56294c7ff730d&oe=595943F7" style="width: 760px; height: 500px">
</div>
<div class="item">
<img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17757531_1241286619325785_6402507763782517221_n.jpg?oh=a1e02575d8179348f31ef5f61c396ed1&oe=5992FA3D" style="width: 760px; height: 500px">
</div>
<div class="item">
<img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17522674_1241286702659110_4637063509380936746_n.jpg?oh=f655113005455b9be6a9935990cc0a97&oe=594E1094" style="width: 760px; height: 500px">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
<!-- <span class="icon-prev"></span> -->
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<!-- END OF GALERI -->
<!-- HUBUNGI KAMI -->
<section id=hub>
<div class="content">
<div class="header-content-wrap" style="background-color: #FFFFFF; min-height: 300px; width: 100%">
<div class="w3-center">
<h2 style="margin-top: 50px; font-size: 30px; color: #212121" id="a"><b>KONTAK</b></h2>
<div class="w3-row" style="margin-left: 300px ">
<div class="col-sm-3 w3-center" style="margin-top: 30px">
<div style="color: #000000; margin-top: 40px;">
<div class="service-icon">
<img src="loc.png" width="50" height="50">
</div>
<br>
<p>Jln. Bougenvile, Kompleks Perumahan Dosen Blok N30, Sekip Utara, Sinduadi, Mlati, Sleman, Yogyakarta. 55281</p>
</div>
</div>
<div class="col-sm-3 w3-center" style="margin-top: 30px">
<div style="color: #000000; margin-top: 40px;">
<div class="service-icon">
<img src="fb.png" width="50" height="50">
</div>
<br>
<p>MAPAGAMA UGM</p>
</div>
</div>
<div class="col-sm-3 w3-center" style="margin-top: 30px">
<div style="color: #000000; margin-top: 40px;">
<div class="service-icon">
<img src="ig.png" width="50" height="50">
</div>
<br>
<p>@mapagama</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END OF HUBUNGI KAMI -->
<!-- ISI FEEDBACK -->
<section id=call>
<div class="w3-container" style="background-color: #2E2E2E; min-height: 300px">
<h2 class="w3-center" style="margin-top: 40px; font-size: 35px; color: #FFFFFF" id="a"><b>HUBUNGI KAMI</b></h2>
<div class="w3-center" id="r" style="color: #EFEBEB; font-size: 20px">Anda dapat menghubungi kami disini:</div>
<br>
<br>
<div style="margin-left: 300px; margin-right: 300px; max-width: 800px;">
<form action="/action_page.php">
<label for="fname" style="color: #FFFFFF">Nama Lengkap</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="fname" style="color: #FFFFFF">Email</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="fname" style="color: #FFFFFF">Subjek</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="subject" style="color: #FFFFFF">Pesan</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</section>
<!-- END OF FEEDBACK -->
</body>
</html>
 |
| Tampilan Source Code |
0 Comment:
Posting Komentar