Sabtu, 15 April 2017

Lima Hari Penuh Ekspresi

Kita tidak akan pernah tau apa yang akan terjadi. Kadang yang terlihat sekarang bukanlah hasil akhir di belakang. Kadang pula yang diprediksikan tidak akan terjadi, ternyata itulah realitanya. Hidup ini memang misteri. Tidak ada satupun yang bisa tepat memprediksi kecuali Sang Ilahi. Yang dirasa saat ini bisa jadi hanya sebuah ilusi. Yang tampak hari ini mungkin saja fatamorgana. Tidak ada yang kekal, tidak ada yang mutlak benar, kecuali Yang Maha Besar.

Lima hari yang berarti dan penuh ekspresi. Dimana aku, kamu, dia, mereka, saling menunjukkan identitas, saling berbagi kisah, saling berbagi resah dan gelisah. Bukan hal yang mudah untuk menjadikan banyak kepala ini menjadi satu frekuensi, satu harmoni, satu sinergi. Konflik, perdebatan, muka masam, masa bodo, dan ekspresi kecut lainnya yang telah menjadi warna dasar dari pelangi kami. Perlahan mulai berdamai, seiring berjalan, bersama-sama berusaha melunturkan ego, membuka hati dan mata, hingga terwujudnya satu suara.

Lima hari yang penuh makna dan cerita. Dimana aku, kamu, dia, dan kita saling bertatap muka. Berusaha menjadi kuat, tidak patah semangat, dan sebisa mungkin untuk tetap tegak. Lelah? Pastinya. Waktu tidur kami berkurang, waktu istirahat kami juga menipis. Hanya saja jatah makan kami yang bertambah. Membuat semangat kembali membuncah. Saat-saat ternikmat yang pernah ada ketika duduk bersama dengan satu rasa. Rasa yang membuat kami menjadi akrab, dekat, dan hangat. Rasa yang membuat kami malah menjadi semangat, kompak, dan bergerak cepat. Tidak peduli apa dan seberapa banyak yang disajikan. Yang terpenting adalah satu, kenyang. Momen selanjutnya yang selalu ditunggu-tunggu adalah berdiri di depan pintu ekspresi. Saling berbagi semangat, berbagi kisah, berbagi tatap. Tatapan yang selalu aku tunggu, tatapan yang selalu bisa membuatku untuk rela menunggu, tatapan yang selalu bisa menaikkan gairahku. Seketika tatapan itu berkakhir, kami digiring masuk ke dalam meja setengah lingkaran. Dimulailah lagi perjuangan kami. Berjuang melawan lelah, suntuk, dan aura negatif lainnya. Sesekali mata ini mencuri-curi untuk mencari tatapan tadi. Tatapan yang bisa menghilangkan rasa lelah, gelisah, dan resah. Sesekali pula tatapanku terperangkap dalam tatapannya, yang membuat aku terkejut namun tetap bisa naif.

Hari pertama kami berjalan sangat menarik, sampai-sampai tidak ada satupun yang bisa tetap energik. Ya, kami menjadi bulan-bulanan amukan massa. Berbagai tuduhan menghujani kami yang sudah setengah sadar. Ingin rasanya cepat berakhir, cepat diakhiri. Agar tak ada lagi suara tinggi yang selalu membuat kami ingin menjerit. Dengan sabar dan penuh pengertiannya, sosok manusia itu menenangkan kami. Dan ia selalu berhasil membuat kami merasa tidak salah dan berada diposisi yang benar. Walau sebenarnya memang kami yang salah, walau sebenarnya juga mereka tidak sepenuhnya benar. Namun, pada akhirnya ia selalu memberikan pesan dan misi ke depan untuk kami yang lebih baik lagi. Begitu seterusnya, dengan suara dan nada yang sama, dengan gaya bahasa dan pembawaan yang tidak berbeda, ia selalu berhasil membuat kami patuh, membuat kami teguh, membuat kami semangat untuk menjadi lebih baik. Kami saling menguatkan, saling mengingatkan, saling mendorong dan saling berbagi. Tanpa tendensi yang bertele-tele, yang penting misi kami berhasil.

For better endurance, for better performance, for better relation, for better memory. Rentetan misi yang berhasil kami jalani. Matriks performance menunjukkan grafik yang meningkat. Tidak hanya satu atau beberapa orang. Semua tersenyum dan bangga, namun tetap rendah dan tidak jemawa. Keberhasilan ini bukan hanya karena kita sebagai peserta, namun juga sosok manusia yang sangat berjasa memberi kami asa, sosok mereka yang memiliki peran penting untuk membuat kami satu nasib satu perjuangan, dan sosok dia yang selalu berhasil melenyapkan lelah menghilangkan gundah.

Lima hari yang telah mengajarkanku banyak hal, banyak arti. Lewat kisah yang aku tangkap dari setiap gerak-geriknya. Lewat pesan yang bisa kupahami lewat mata dan perkataannya. Lima hari yang tidak akan cukup diceritakan dalam waktu lima hari. Lima hari yang tidak akan dikenang selama lima hari, bulan, tahun, windu, ataupun abad. Namun lima hari, yang selalu akan membekas di hati. Tumbuh menjadi benih-benih relasi yang akan terus bersemi. Karena kami adalah kita, Balvacordia. 

Terima kasih untuk yang telah memberikan ekspresinya. Terima kasih untuk yang tidak malu berbagi kisah hidupnya. Jangan lupa makan dan tidur yang cukup. Ingat untuk bahagia.

Dari yang sedang berdamai dengan diri sendiri,
With love.


Surabaya, 15 April 2017.
Ba’da Isya.


Share:

Tanya #1

Rasa khawatir ini membuatku berpikir. Apakah ini perasaan antara manusia dengan manusia, atau perasaan antara wanita dengan pria?  HM

­­­Surabaya, 15 April 2017.
Sedang berdamai dengan diri sendiri.
Share:

Sabtu, 01 April 2017

Tugas 5-ETS Pemrograman Web Kelas F: Membuat Website

Tugas 5-ETS Pemrograman Web Kelas F: Membuat Website

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 &amp; 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&amp;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&amp;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&amp;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&amp;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

Share: