 |
| Beranda dan Tentang Kami |
 |
| Struktur Organisasi dan Galeri |
 |
| Kontak |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hania Maghfira</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="style.css"> -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<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>
<link rel="icon" type="image/gif" href="https://s-media-cache-ak0.pinimg.com/originals/03/11/20/0311203c3a6e3808bff8d23daf44a4af.png">
<!--style-->
<style>
body, h1 {font-family: "Raleway"}
h1 {letter-spacing: 7px}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<!--Page content-->
<div class="w3-content" style="max-width: 1000px">
<!--Header-->
<header class="w3-center w3-opacity w3-padding-16 w3-container ">
<h1 class="w3-xlarge">Autobiography</h1>
<h1 style="font-size: 45px">Hania Maghfira</h1>
<p style="letter-spacing: 4px; font-size: 12px">student ⚬ netizen ⚬ traveller</p>
<div style="margin-top: 30px; letter-spacing: 3px" class="w3-center">
<a href="https://twitter.com/haniamaghfira" rel="nofollow" target="_blank" title="Twitter" class="w3-hover-text-red"><i class="fa fa-twitter transition35"></i></a>
<a href="https://www.facebook.com/haniamaghfira" rel="nofollow" target="_blank" title="Facebook" class="w3-hover-text-kight-blue"><i class="fa fa-facebook transition35"></i></a>
<a href="https://www.linkedin.com/in/hmaghfira" rel="nofollow" target="_blank" title="Linkedin" class="w3-hover-text-yellow"><i class="fa fa-linkedin transition35"></i></a>
<a href="https://www.instagram.com/hmaghfira" rel="nofollow" target="_blank" title="Instagram" class="w3-hover-text-green"><i class="fa fa-instagram transition35"></i></a>
</div>
</header>
<!--end header-->
<!--body content-->
<div class="w3-center" style="margin-right: 200px; margin-left: 200px">
<div class="w3-container">
<br>
<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-sit4-1.cdninstagram.com/t51.2885-15/e35/16585346_206911493117517_7226495926804676608_n.jpg" alt="Hania" style="width: 760px; height: 357px">
<div class="carousel-caption" style="font-size: 11px">
<h5>Rooftop, 10 February 2017</h5>
<p class="w3-opacity">"If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you."—A. A. Milne</p>
</div>
</div>
<div class="item">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/16585590_435309843478880_538959915373297664_n.jpg" style="width: 412px; height: 357px">
<div class="carousel-caption" style="font-size: 11px">
<h5>Villa Bumi Mas Pacet, East Java, 18-19 April 2017</h5>
<p class="w3-opacity">"Life isn't about finding yourself. Life is about creating yourself."—George Bernard.</p>
</div>
</div>
<div class="item">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/12317534_1060464463984013_1459294193_n.jpg" style="width: 451px; height: 357px">
<div class="carousel-caption" style="font-size: 11px">
<h5>Penanggungan, East Java</h5>
</div>
</div>
<div class="item">
<img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/17126877_770919969724602_829539754600038400_n.jpg" style="width: 482px; height: 357px">
<div class="carousel-caption" style="font-size: 11px">
<h5>Kamu</h5>
<p class="w3-opacity">"Ada begitu banyak cara bagi Tuhan untuk mempertemukan. Terlihat rumit padahal sederhana, terlihat jauh padahal dekat, terlihat orang lain padahal kamu"—Makna Pencarian</p>
</div>
</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>
<!-- quote -->
<blockquote style="margin-top: 12px; letter-spacing: 1px; font-size: 13px">Bukankah mengharapkan surga jauh lebih mungkin dari mengharapkan seseorang yang tidak jelas? Mari kita tata dan benahi lagi harapan kita. Sudahkah di tempat yang tepat?<footer>Kurniawan Gunadi</footer>
</blockquote>
</div>
<!-- boumme -->
<div style="margin-left: 100px; margin-right: 100px; margin-top: 20px; margin-bottom: 100px; font-size: 18px; word-spacing: 5px; text-align: justify;">
<p>An on-going-to 20 years old girl who still pursuing and striving to reach her dreams. Become ESTJ person makes her love thinking, expressing all of her feeling, sometimes judging with sensing. But, she's actually friendly girl. Making joke or conversation with her will make you comfort and become entertained.<br>
<br>I was born on 19th August in Pasuruan, East Java. Do you know where is it? It is located among three main roads which is connecting Surabaya-Malang-Banyuwangi. It's so amazing, isn't? Haha. I am naturally Javanese, my mom from Brebes and my dad from Pasuruan. They meet each other in 'Rain City' when they were bachelor student in one of the best institute in there. And now, I am study in Surabaya. Will I meet my soulmate as my parent did? Wqwq.<br>
<br>My family live in Bali, paradise of Indonesia. And my current address is Keputih, Surabaya. I have become 2nd year student in Informatics Department of ITS Surabaya. It's such a wonderful life become a part of this world haha. I can create code, compile, and run it. Sounds easy, right? Wqwq. Beside that, I can meet people with unique characteristics, so I can learn how to life with manner and face them.<br>
<br>I like writing, anything, but often personal opini. Actually I'm not a girl who very loves read novel, story, or something like that, but I'm trying to love books and try to read them. Since October 2016 till now, I've succeeded read 4 books, those are Hujan Matahari and Lautan Langit by Kurniawan Gunadi, Filosofi Kopi by Dee Lestari, and Tentang Kamu by Tere Liye. And now I'm still reading biography of Tan Malaka. Beside writing, I love travelling. Adventure (always) makes my day haha!<br>
<br>Maybe this is just short of my life story. If you wonder how my life was or is or will, feel free to talk with me :). Choose any social media (that I have) to keep in touch. It won't make you regret, trust me, it works :D
</p>
</div>
<div class="w3-container" style="background-color: #242423; margin-top: 16px">
<p class="w3-center" style="letter-spacing: 1px; color: #FFFFFF; margin-top: 20px">Visit <a href="http://hmaghfira.blogspot.com">hmaghfira.blogspot.com</a>
</p>
</div>
<!--end of body content-->
</div>
<!--end of page content-->
</body>
</html>
 |
| Tampilan source code |
<html>
<head>
<title>Registration Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="icon" type="image/gif" href="http://www.eyp74.com/imagenes/logo-form.gif">
<style>
body {font-family: "Raleway"; font-size: 12px;
}
</style>
<script type="text/javascript">
function valregister(){
var x=register.txtusername.value;
var x1=parseInt(x);
if(register.txtusername.value==""){
alert("Nama masih kosong");
register.txtusername.focus();
return false;
}
if(isNaN(x1)==false){
alert("Nama harus huruf");
register.txtusername.focus();
return false;
}
var y=register.txtnim.value;
var panjang=y.length;
if(register.txtnim.value==""){
alert("NIM masih kosong");
register.txtnim.focus();
return false;
}
if(panjang<10 || panjang>10){
alert("NIM harus 10 karakter");
register.txtnim.focus();
return false;
}
var z=register.txtmatkul.value;
if(z==""){
alert("NIM masih kosong");
register.txtnim.focus();
return false;
}
var a=register.txtdosen.value;
if(a==""){
alert("Dosen masih kosong");
register.txtdosen.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div class="w3-container" style="background-color: #2E2E2E">
<h1 class="w3-center" style="margin-top: 64px; color: #FFFFFF; letter-spacing: 7px">REGISTRATION FORM</h1>
<hr>
</div>
<form name="register" action="" method="post" enctype="multipart/form-data" onSubmit="return valregister()">
<table align="center" width="364" border="0" style="margin-top: 128px">
<tr>
<td width="113">Nama</td>
<td width="241">
<label>
<input name="txtusername" type="text" id="txtusername" list="daftarnama">
<datalist id="daftarnama"></datalist>
<script>
var nama = ["Hania Maghfira", "M Satrio Ramadhana Y", "Irfun Hanif", "Panji", "Yuga Mitra Hakiki", "Lee Yong Dae", "Rio Haryanto", "Syamsir Alam"];
var option = '';
for(var m=0; m<nama.length; m++){
option += '<option value="'+nama[m]+'">';
}
document.getElementById('daftarnama').innerHTML = option;
console.log(option);
</script>
</label>
</td>
</tr>
<tr>
<td height="32">NIM</td>
<td>
<label>
<input type="text" name="txtnim" id="txtnim" maxlength="10" list="daftarnim"></td>
<datalist id="daftarnim"></datalist>
<script>
var nim = ["5115100042", "5112100217", "5114100177", "5115100706", "5114100075", "5113100097"];
var option = '';
for(var n=0; n<nim.length; n++){
option += '<option value="'+nim[n]+'">';
}
document.getElementById('daftarnim').innerHTML = option;
console.log(option);
</script>
</label>
</tr>
<tr>
<td height="32">Mata Kuliah</td>
<td>
<label>
<input name="txtmatkul" type="text" id="txtmatkul" list="daftarmatkul">
<datalist id="daftarmatkul"></datalist>
<script>
var matkul = ["Jaringan Komputer", "Kecerdasan Buatan","Manajemen Basis Data","Otomata","Pemrograman Web","Perancangan Analisis Algoritma II"];
var option = '';
for(var k=0; k<matkul.length; k++){
option += '<option value="'+matkul[k]+'">';
}
document.getElementById('daftarmatkul').innerHTML = option;
console.log(option);
</script>
</label>
</td>
</tr>
<tr>
<td height="32">Dosen</td>
<td>
<label>
<input name="txtdosen" type="text" id="txtdosen" list="daftardosen">
<datalist id="daftardosen"></datalist>
<script>
var dosen = ["Abdul Munif", "Bilqis Amaliah", "Chastine Fatichah", "Fajar Baskoro", "Hening TC", "M. Husni", "Rizky Januar", "Sarwosri", "Tohari Ahmad", "Victor"];
var option = '';
for(var l=0; l<dosen.length; l++){
option += '<option value="'+dosen[l]+'">';
}
document.getElementById('daftardosen').innerHTML = option;
console.log(option);
</script>
</label>
</td>
</tr>
<tr>
<td>
<input name="save" type="submit" id="save" value="Submit">
</td>
</tr>
</table>
</form>
<div class="w3-container" style="background-color: #FFFFFF; margin-top: 128px">
<hr>
<p class="w3-center w3-bar" style="color: #000000; letter-spacing: 7px">THANKS</p>
</div>
</body>
</html>
 |
| Tampilan source code |
<!DOCTYPE html>
<html>
<head>
<title>Situs Resmi PT KAI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="form.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="icon" type="image/gif" href="https://upload.wikimedia.org/wikipedia/id/thumb/4/4e/Logo_PT_KAI_(Persero).svg/1280px-Logo_PT_KAI_(Persero).svg.png">
</head>
<body>
<div class="content" style="background-color: #E0E0E0;">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#" style="color: #FFFFFF; font-size: 20px; margin-left: 25px">Pemesanan Tiket Kereta Online</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="background-color: #3399CC">
<ul class="nav navbar-nav">
<li><a href="#" style="color: #FFFFFF; font-size: 16px">Daftar Harga Kelas KA</a></li>
<li><a href="#" style="color: #FFFFFF; font-size: 16px">Daftar Jadwal KA</a></li>
<li><a href="#" style="color: #FFFFFF; font-size: 16px">Data Pesanan Tiket</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" style="color: #FFFFFF"><span class="glyphicon glyphicon-log-out" style="color: #FFF"></span> Logout</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="col-sm-3">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/id/thumb/4/4e/Logo_PT_KAI_(Persero).svg/1280px-Logo_PT_KAI_(Persero).svg.png" alt="PT KAI">
</div>
<div class="col-sm-6">
<h1 style="color : #3366CC; font-size: 50px; margin-top: 50px;">Selamat Datang!!!</h1>
</div>
</div>
<hr>
<div class="container">
<form class="form-horizontal" role="form" method="post" action="send.php">
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="pilihan-kereta">Nama Kereta:</label>
<div class="col-sm-3">
<select class="form-control" id="pilihan-kereta" style="background-color: #F0F0F0">
<option> </option>
<option>Argo Anggrek</option>
<option>Jayabaya</option>
<option>Kertajaya</option>
<option>Bima</option>
<option>Argo Bromo</option>
<option>Matarmaja</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tgl-berangkat">Tanggal Berangkat:</label>
<div class="col-sm-3">
<input type="date" class="form-control" id="tgl-berangkat" style="background-color: #F0F0F0">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="jam-berangkat">Jam Berangkat:</label>
<div class="col-sm-3">
<input type="time" class="form-control" id="jam-berangkat" style="background-color: #F0F0F0">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-asal">Dari:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-asal" style="background-color: #F0F0F0">
<option> </option>
<option>Bandung</option>
<option>Cirebon</option>
<option>Jakarta</option>
<option>Kediri</option>
<option>Semarang</option>
<option>Surabaya</option>
<option>Yogyakarta</option>
<option>Tegal</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-tujuan">Ke:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-tujuan" style="background-color: #F0F0F0">
<option> </option>
<option>Bandung</option>
<option>Cirebon</option>
<option>Jakarta</option>
<option>Kediri</option>
<option>Semarang</option>
<option>Surabaya</option>
<option>Yogyakarta</option>
<option>Tegal</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="kelas">Kelas:</label>
<div class="col-sm-3">
<select class="form-control" id="kelas" style="background-color: #F0F0F0">
<option> </option>
<option>Eksekutif</option>
<option>Bisnis</option>
<option>Ekonomi</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-10">
<button type="submit" class="btn btn-primary">Pesan Tiket</button>
<button type="submit" class="btn btn-warning" style="color:white">Batal</button>
</div>
</div>
</form>
</div>
<hr>
<footer class="container">
<p>
<center>Terima kasih atas kepercayaan Anda</center>
</p>
</footer>
</div>
</body>
</html>
 |
| Tampilan source code |
