PWEB C - Membuat CV dengan HTML sederhana.
Dalam bagian jurnal kali ini, saya akan menyampaikan proses paling awal saya dalam membuat sebuah web, yakni sebuah tampilan sederhana menggunakan HTML.
Sedikit penjelasan mengenai tampilan web ini :
-Menggunakan style terpisah yaitu css (agar lebih mudah dalam pengaturan dan penggunaannya)
-Menggunakan foto secara data offline untuk foto profil.
Untuk info lebih lanjut, dapat dilihat pada Website Profil saya di carwima.github.io
Untuk info lebih lanjut, dapat dilihat pada Website Profil saya di carwima.github.io
Kode CSS
p#test{
font-family: arial, sans-serif;
font-size:13 px;
}
p.sidebar{
font-size:20px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
background-color: #ffffff
}
#profile{
font-size:12px;
}
#cv{
font-size:12px;
display:none;
}
h2 {
padding: 12px 15px;
background-color:#ccc;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
body {
background-color: #aaa; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #aaa, #fff); /* Standard syntax (must be last) */
}
/*main content starts*/
.mainsize{
width:600px;
margin:0 auto;
}
* {
box-sizing: border-box;
}
.column {
float: left;
padding: 10px;
}
.column.side {
width: 30%;
height:800px;
}
.column.middle {
width: 70%;
height:800px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
/*main content ends*/
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
font-size: 35px;
}
ul {
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-family:Arial;
font-size:14px;
}
.block {
border: none;
background-color: #333;
color: white;
padding: 14px 16px;
cursor: pointer;
text-align: center;
}
.block:hover {
background-color: red;
color: white;
}
li {
float: left;
}
li a, .dropbtn {
padding: 14px 16px;
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
Kode HTML
<!DOCTYPE html>
<html>
<head>
<title> Carlo's Blog </title>
<link rel="stylesheet" type="text/css" href="Carlo.css">
<meta charset="utf-8">
<style>
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="mainsize">
<div class="header"> Curriculum Vitae </div>
<ul>
<li> <button class="block" onclick="Check(2)"> Informasi Umum</button></li>
<li> <button class="block" onclick="Check(1)"> Riwayat Pendidikan</button></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Prestasi</a>
<div class="dropdown-content">
<a href="#">TBA</a>
</div>
</li>
</ul>
<div class="row">
<div class="column middle" style="background-color:#bbb;">
<!–– Batas Hidup ––>
<div id="profile">
<table>
<tr>
<th> Profile </th>
<th> Data Diri </th>
</tr>
<tr>
<td rowspan="6"> <img src="text594.png" width="120"></td>
</tr>
<tr>
<td> Nama : Carlo Win Marshal </td>
</tr>
<tr>
<td> Tanggal Lahir : 5 Juni 1999 </td>
</tr>
<tr>
<td> Agama : Katolik </td>
</tr>
<tr>
<td> Kewarganegaraan : Indonesia </td>
</tr>
<tr>
<td> Alamat : Jl Sukolilo Kasih no 5, Surabaya </td>
</tr>
</table>
<br>
<h2>Kontak</h2>
<br>
<table>
<tr>
<th>Media</th>
<th>Contact</th>
</tr>
<tr>
<td>WA/NoHP</td>
<td>082113200041</td>
</tr>
<tr>
<td>Email</td>
<td>carlowinmarshal08@gmail.com</td>
</tr>
<tr>
<td>Line</td>
<td>@camarwin</td>
</tr>
</table>
</div>
<!–– Batas Hidup ––>
<div id="cv">
<h2>Riwayat Pendidikan</h2>
<br>
<table>
<tr>
<th>Pendidikan</th>
<th>Sekolah</th>
<th>Tahun</th>
</tr>
<tr>
<td>Sekolah Dasar</td>
<td>SDN 08 Jakarta</td>
<td>2011</td>
</tr>
<tr>
<td>Sekolah Menengah Pertama</td>
<td>SMPN 117 Jakarta</td>
<td>2014</td>
</tr>
<tr>
<td>Sekolah Menengah atas</td>
<td>SMAN 71 Jakarta</td>
<td>2017</td>
</tr>
<tr>
<td>Perguruan Tinggi</td>
<td>Informatika ITS</td>
<td>-Present</td>
</tr>
</table>
<h2>Pelatihan Khusus</h2>
<br>
<table>
<tr>
<th>Pelatihan</th>
<th>Pelaksana</th>
<th>Tahun</th>
</tr>
<tr>
<td>Pelatihan Kewirausahaan</td>
<td>HMTC ITS</td>
<td>2017</td>
</tr>
<tr>
<td>Pelatihan Kepemimpinan Dasar</td>
<td>HMTC ITS</td>
<td>2018</td>
</tr>
</table>
</div>
</div>
<!–– Batas Hidup ––>
<div class="column side" style="background-color:#ccc;">
<p class="sidebar"> OH WHAT'S THE TIME? </p>
<iframe src="http://free.timeanddate.com/clock/i6ebra98/n108/tlid/fn7/fs20/tct/pct/ftb/bo2/th2" frameborder="0" width="130" height="32" allowTransparency="true"></iframe>
<p class="sidebar"> OH WHAT'S THE DATE? </p>
<iframe src="http://free.timeanddate.com/clock/i6ebs6im/n108/tlid/fn7/fs12/tct/pct/ftb/pd3/tt1/tm1" frameborder="0" width="156" height="19" allowTransparency="true"></iframe>
</div>
</div>
<div class="footer">2018 EnlightenTech. All rights reserved. </div>
</div>
<script>
function Check (a) {
var x = document.getElementById("cv");
var y = document.getElementById("profile");
if (a==1){
x.style.display = "block";
y.style.display = "none";
}
else if (a==2){
y.style.display = "block";
x.style.display = "none";
}
}
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar