Tugas 1 - Pemrograman Web Kelas C 2018
Nama : Yusran Hadi
NRP : 05111740000105
Kelas : Pemrograman Web C
Membuat CV berbasis HTML dan CSS. Saya juga menggunakan JavaScript untuk membuat beberapa fitur. Berikut saya Source Code dari CV saya.
1. Source Code HTML
2. Source Code CSS
Berikut adalah tampilan dari source code di atas :
NRP : 05111740000105
Kelas : Pemrograman Web C
Membuat CV berbasis HTML dan CSS. Saya juga menggunakan JavaScript untuk membuat beberapa fitur. Berikut saya Source Code dari CV saya.
1. Source Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yusran Hadi</title>
<link rel="stylesheet" href="desain.css"/>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 11px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active, .bttn:hover {
background-color: forestgreen;
color: white;
}
img.background {
width: 110%;
height: 110%;
position: fixed;
left: -5%;
top: -5%;
z-index: -1;
-webkit-filter: blur(5px);
filter: blur(5px);
}
td {
background-color: transparent;
border-radius: 0%;
text-align: left;
color: azure;
padding-left: 40px;
}
</style>
</head>
<body >
<img class="background" src="bg2.jpg" alt="backgrounds" width="300" height="300">
<ul>
<div id="myDIV">
<li><a class="bttn active" href="#home">Home</a></li>
<li><a class="bttn" href="#about">About Me</a></li>
</div>
</ul>
<script>
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("bttn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
function myFunction() {
var x = document.getElementById("Bio");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("pendidikan");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction3() {
var x = document.getElementById("experience");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<h1 class="palingAtas">
Sekilas Tentang Saya
</h1>
<h1>
<center>
<fieldset class="kotak">
<legend style="background-color:rgba(35, 124, 17);padding:15px;border-radius: 50%; color: rgb(213, 213, 219); font-size: 150%">
Yusran Hadi
</legend>
<table id="Bio" style="width: 1100px; display: none;" class="tabel">
<tr>
<td rowspan="14" width="250px">
<img src="yusran.jpg" width="250px" height="300px" style="border-radius: 50%"/>
</td>
</tr>
<button onclick="myFunction()" style="font-size: 20px;">
Biodata
</button>
<tr>
<td><b>Nama Panggilan</b></td>
<td>:</td>
<td>Yusran</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Padang, 10 mei 1999</td>
</tr>
<tr>
<td><b>Jenis Kelamin</b></td>
<td>:</td>
<td>Laki - Laki</td>
</tr>
<tr>
<td><b>Agama</b></td>
<td>:</td>
<td>Islam</td>
</tr>
<tr>
<td><b>Alamat</b></td>
<td>:</td>
<td>Asrama Mahasiswa ITS E-203, Keputih, Sukolilo, Surabaya</td>
</tr>
<tr>
<td><b>Pekerjaan</b></td>
<td>:</td>
<td>Mahasiswa</td>
</tr>
<tr>
<td><b>Kewarganegaraan</b></td>
<td>:</td>
<td>Indonesia</td>
</tr>
</table>
<center>
<table id="pendidikan" style="width: 1100px; display: none;" class="RiwPend">
<button onclick="myFunction2()" style="font-size: 20px;">
Riwayat Pendidikan
</button>
<tr>
<th style="background-color: forestgreen"><b>Sekolah Dasar</b></th>
</tr>
<tr>
<td>SD Negeri 20 Pasar Tiku (2005-2011)</td>
</tr>
<tr></tr>
<tr>
<th style="background-color: forestgreen"><b>Sekolah Menengah Pertama</b></th>
</tr>
<tr>
<td>MTs Negeri 1 Pasir Tiku (2011-2012)</td>
</tr>
<tr>
<td>SMP Negeri 3 Lubuk Basung (2012-2014)</td>
</tr>
<tr>
<th style="background-color: forestgreen"><b>Sekolah Menengah Atas</b></th>
</tr>
<tr>
<td>SMA Negeri 2 Lubuk Basung (2014-2017)</td>
</tr>
<tr>
<th style="background-color: forestgreen;"><b>Perguruan Tinggi</b></th>
</tr>
<tr>
<td>Institut Teknologi Sepuluh Nopember (2017-Sekarang)</td>
</tr>
</table>
</center>
<center>
<table id="experience" style="width: 1100px; display: none;" class="pengalaman">
<button onclick="myFunction3()" style="font-size: 20px;">
Pengalaman
</button>
<tr>
<th style="background-color: forestgreen"><b>Organisasi dan Kepanitiaan</b></th>
</tr>
<tr>
<td>Staff Schematic NLC 2018</td>
</tr>
<tr></tr>
<tr>
<td>Staff TCarena Keamanan dan Perizinan 2017</td>
</tr>
</table>
</center>
</fieldset>
</center>
</h1>
<div class="footer">
<p><img src="gmail.png" style="float:center;width:30px;height:15px;">yusranhadi99@gmail.com</p>
</div>
</body>
</html>
2. Source Code CSS
body {
font-family: Arial, Helvetica, sans-serif;
}
.tabel{
margin-left: -5%;
margin-top: 5%;
margin-bottom: 5%;
}
.kotak {
border: 10px groove forestgreen;
padding: 0px;
width: 1260px;
margin-bottom: 4rem;
}
.palingAtas {
text-align: center;
color: rgb(213, 213, 219);
font-size: 300%;
}
.RiwPend, th {
margin-left: 250px;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.pengalaman {
top: 50%;
left: 50%;
margin-left: 360px;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
padding-bottom: 1rem;
width: 100%;
height: 40px;
background-color: forestgreen;
color: rgb(213, 213, 219);
text-align: center;
font-size: 20px;
}
Berikut adalah tampilan dari source code di atas :
Komentar
Posting Komentar