TUGAS PWEB-C MINGGU KE-1 (MEMBUAT CV HTML)
TUGAS PWEB-C MINGGU KE-1 (MEMBUAT CV HTML)
Pada minggu pertama pemrograman web kelas C, ditugaskan membuat CV menggunakan HTML .
Link Repository : https://github.com/kielnaingggolan07/Portofolio.github.io
Link Referensi : https://bagusistighfar.blogspot.com/2021/09/tugas-pweb-d-minggu-ke-2-membuat-cv-html.html
Berikut penjelasan mengenai file yang saya buat:
1. index.html
Pada file ini menyimpan mengenai informasi mengenai biodata saya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CV</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="foto">
<img src="img1/pp3.png" alt="Foto Profil">
</div>
<h1 class="name">Hesekiel Nainggolan</h1>
<div class="tabel">
<h2 class="Biodata">Biodata</h2>
<table class="Biodata">
<tr>
<td class="create-bold">Nama Lengkap</td>
<td>Hesekiel Nainggolan</td>
</tr>
<tr>
<td class="create-bold">Tempat, Tanggal Lahir</td>
<td>Pematangsiantar, 10 April 2002</td>
</tr>
<tr>
<td class="create-bold">Jenis Kelamin</td>
<td>Laki - Laki</td>
</tr>
<tr>
<td class="create-bold">Agama</td>
<td>Kristen Protestan</td>
</tr>
<tr>
<td class="create-bold">Alamat</td>
<td>Jl. Makmur No. 06</td>
</tr>
<tr>
<td class="create-bold">Status</td>
<td>Mahasiswa</td>
</tr>
</table>
</div>
<div class="lanjut">
<p>Penasaran?</p>
<div class="btn">
<form action="pendidikan.html">
<button>Klik untuk lanjut!</button>
</form>
</div>
</div>
</div>
</body>
</html>
2. pendidikan.html
Dalam file ini menyimpan informasi mengenai riwayat pendidikan dan kontak saya. Selain itu dalam file ini saya juga mencantumkan link ke CV lain saya.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Riwayat Pendidikan!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="foto">
<img src="img1/pp3.png" alt="Foto Profil">
</div>
<h1 class="name">Hesekiel Nainggolan</h1>
<div class="tabel">
<h2 class="Riwayat Pendidikan">Riwayat Pendidikan</h2>
<table class="Riwayat Pendidikan">
<tr>
<td class="create-bold">SD</td>
<td>SD Negeri 122371</td>
<td>2008-2014</td>
</tr>
<tr>
<td class="create-bold">SMP</td>
<td>SMP Negeri 8</td>
<td>2014-2017</td>
</tr>
<tr>
<td class="create-bold">SMA</td>
<td>SMA Negeri 2</td>
<td>2017-2020</td>
</tr>
<tr>
<td class="create-bold">Perguruan Tinggi</td>
<td>Teknik Informatika, Institut Teknologi Sepuluh Nopember</td>
<td>2020-sekarang</td>
</tr>
</table>
</div>
<div class="tabel">
<h2 class="kontak">Kontak</h2>
<table class="kotak">
<tr>
<td class="create-bold">Nomor Hp</td>
<td>081376004912</td>
</tr>
<tr>
<td class="create-bold">Email</td>
<td><a href="mailto:nainggolanhesekiel07@gmail.com"
target="_blank"
class="animate__animated animate__backInLeft">nainggolanhesekiel07@gmail.com</a></td>
</tr>
<tr>
<td class="create-bold">Instagram</td>
<td><a href="https://instagram.com/hesekiel.n"
target="_blank"
class="animate__animated animate__backInLeft">hesekiel.n</a></td>
</tr>
</table>
</div>
<!-- membuat link ke cv -->
<div class="lanjut">
<div class="btn">
<form action="https://kielnaingggolan07.github.io/cv.github.io/">
<button>LIhat CV!</button>
</form>
</div>
</div>
</body>
</html>
3. style.scc
File ini mengatur dan memberikan hiasan pada tampilan CV saya.
@import url(reset.css);
body{
font-family: Arial, Helvetica, sans-serif;
background-image: url(img1/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position-y: 100%;
}
.container{
width: 1000px;
height: 1500px;
margin :0 auto;
padding : 100px 0;
}
.foto img {
display: block;
margin : 0 auto;
background: rgb(135,206,250);
background: linear-gradient(180deg, rgba(247, 244, 243, 0) 50%, rgb(248, 248, 248) 100%);
border-radius: 50%;
width: 350px;
border: 5px solid #eee5e1;
}
h1.name {
font-size: 35px;
font-weight: bold;
text-align: center;
margin-top: 30px;
margin-bottom: 50px;
}
.tabel h2{
font-weight: bold;
font-size: 25px;
margin-left: 45%;
}
.tabel table{
font-size: 20px;
margin-top: 20px;
width: 100%;
}
.create-bold{
font-weight: bold;
}
table tr:nth-child(odd){
background-color: #92caf0;
}
table tr:nth-child(even){
background-color: #a8cfe6;
}
table,thead,th, tr,td{
padding: 10px;
}
.tabel{
background-color: #a8cfe6;
padding: 30px;
padding-bottom: 20px;
border-radius: 20px;
margin-bottom: 50px;
}
.lanjut p{
font-size: 15px;
text-align: center;
font-weight: bold;
color: rgb(12, 27, 235);
}
.lanjut button{
display: block;
margin: 10px auto;
font-size: 15px;
border-radius: 10px;
background-color: #a8cfe6;
padding : 10px 30px;
border-width: 0px;
box-shadow: 0px 5px 5px #4CAF50;
font-weight: bold;
}
button:hover {
background-color: #4CAF50;
color: white;
}
4.reset.css
File ini untuk mempermudah dalam pengeditan style.css
5. Folder img1
File ini berisikan foto profil dan background dari CV saya.
Dokumentasi Tampilan CV
Komentar
Posting Komentar