March 16, 2018
Haloo semuanya :D
Kali ini saya akan share script HTML + CSS buatan saya sendiri.
Ini hanya form sederhana yang saya buat untuk tugas desain grafis sebenarnya hehe :v
Formnya akan saya bagi menjadi dua page HTML yang berbeda namun memiliki 1 file CSS yang sama.
Ini penampakan sekilasnya
Ketika sudah meng-klik "Lanjut Ke Pengisian Nilai..."
Okeee cekidotttt... Ini Script buat HTML pertama atau index-nya.
<html>
<title>Pengisian Data Nilai UNBK</title>
<head>
<link rel="stylesheet" type="text/css" href="unbk.css">
</head>
<body>
<h1>FORM PENGISIAN1 NILAI UNBK TAHUN 2018<br>SMK NEGERI 1 CIMAHI</h1>
<div class="Isian">
<div class="teks">
<label><br>Nama</label><br><input type="text" placeholder="Masukkan Nama Anda..." required><br>
<label>NISN</label><br><input type="number" placeholder="Masukkan No. NISN" required><br>
<label for="kelas">Kelas</label><br>
<select id name="kelas">
<option>-Pilih Kelas-</option>
<option value="12 A">12 A</option>
<option value="12 B">12 B</option>
</select><br>
<label for="jurusan">Kompetisi Keahlian</label><br>
<select id name="jurusan">
<option value="0">-Pilih Jurusan-</option>
<option value="IOP">IOP</option>
<option value="RPL">RPL</option>
<option value="TP4">TP4</option>
<option value="SIJA/TKJ">SIJA/TKJ</option>
<option value="EIND">EIND</option>
<option value="TOI">TOI</option>
<option value="TPTU">TPTU</option>
<option value="ELKOM">ELKOM</option>
</select>
</div>
<div class="cekbox">
<input type="checkbox" required> Saya pastikan data diatas adalah benar.<br>
</div>
<div class="buttondes"><center><a href="nilai.html"><input type="button" value="Lanjut Ke Pengisian Nilai..."></a></center></div>
</div>
</body>
<footer><a href="http://jri-kun.blogspot.co.id">Copyright Jri-Kun 2018 © </a></footer>
</html>
Dan ini untuk HTML ke-2 dengan nama file "Nilai.html"
<html>
<title>Pengisian Data Nilai UNBK</title>
<head>
<link rel="stylesheet" type="text/css" href="unbk.css">
</head>
<body>
<h1>FORM PENGISIAN1 NILAI UNBK TAHUN 2018<br>SMK NEGERI 1 CIMAHI</h1>
<div class="Isian">
<div class="teks">
<label><br>Bahasa Indonesia</label><br><input type="number" placeholder="Masukkan Nilai Bahasa Indonesia Anda..." required><br>
<label>Bahasa Inggris</label><br><input type="number" placeholder="Masukkan Nilai Bahasa Inggris Anda..." required><br>
<label>Matematika</label><br><input type="number" placeholder="Masukkan Nilai Matematika Anda..." required><br>
<label>Teori Kejuruan</label><br><input type="number" placeholder="Masukkan Nilai Teori Kejuruan Anda..." required><br>
</div>
<div class="cekbox">
<input type="checkbox" required> Saya pastikan data diatas adalah benar.<br>
</div>
<div class="buttondes"><center><a href="#"><input type="button" value="Submit ke Server"></a></center></div>
</div>
</body>
<footer><a href="http://jri-kun.blogspot.co.id">Copyright Jri-Kun 2018 © </a></footer>
</html>
Lalu untuk file CSS-nya dengan nama "unbk.css"
h1 {
text-align: center;
font-family: "Break";
font-size: 50px;
margin-bottom: 10px;
margin-top:50px;
}
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
color: white;
}
input[type=text],
input[type=number],
select{
background-color: rgba(0,0,0,0.5);
color: white;
width: 83%;
padding: 12px 20px;
margin: 8px 10;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
outline: none;
}
input:hover[type=text],
input:hover[type=number],
select:hover{
background-color: rgba(255,255,255,0.3);
}
select:hover{
color:black;
}
footer {
margin-top: 15px;
font-family: Break;
font-size: 20px;
text-align:right;
}
input[type=button]{
width: 200px;
height:40px;
border:none;
border-radius:10px;
margin-top:30px;
background-color: rgba(255,255,255,0.3);
color: white;
outline:none;
}
input:hover[type=button]{
background-color: rgba(255,0,0,0.3);
}
a{
color:white;
}
a:hover{
color:cyan;
}
.Isian {
background-color: rgba(0,0,0,0.7);
width: 500px;
height: 430px;
border-radius: 20px;
margin: 0 auto;
font-family: "Maiandra GD";
}
.teks {
margin-left:50px;
}
.cekbox {
margin-left:58px;
}
.buttondes {
margin-top:-10px;
}
Dan ini link download untuk background-nya, simpan dgn nama "bg.png".
download disini.
download disini.
Letakkan semua file dalam satu folder.
Okee seperti itu lah form nilai UNBK sederhana saya.
TOLONG JIKA INGIN COPAS (COPY&PASTE). DIHARAP UNTUK TETAP MENCANTUMKAN KREDIT ATAU TIDAK MENGHAPUS KREDIT.
Anda dapat menambahkan kredit "Redesign By..." tetapi TIDAK BOLEH menghapus KREDITnya.
Ingat bahwa ini form gratis yang dishare. Saya tidak butuh uang ataupun imbalan/timbal balik. maka kredit adalah cara untuk berterima kasih kepada saya yang membuat, merancang dan membuat template ini. Saya harap anda bisa lebih menghargai hasil kerja keras saya. Bila anda merasa mampu membuat template,silakan gunakan template yang BUKAN dari template saya. Cobalah kreatif, jangan hanya bisa mengganti gambar, warna, background, css dan kredit.
