Tugas 2 PWEB-B : Membuat CV dengan HTML

on

Pada tugas 2 ini kami diminta untuk membuat biodata atau profil diri sederhana menggunakan HTML. 

Link CV :

https://erzajanitra.github.io/biodata-cv/

Dokumentasi :

Berikut adalah tampilan dari CV yang dibuat dengan HTML dan CSS :

1. Tampilan Section Profile


2.Tampilan Section Education

3.Tampilan Section Contact

Berikut adalah source code HTML dan CSS yang digunakan :

1. index.html

<!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>Biodata</title>
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
</head>
<body style="width: 800px; margin-left: auto; margin-right: auto;"">
<h1>Biodata</h1>
<hr style="height: 5px; background-color: black;">
<h2>Profile</h2>
<div class="container">
<div class="row align-items-lg-start">
<div class="col">
<img src="img/if.jpg" style="float: left; margin-right: 20px;"/>
</div>
<div class="col">
<table style="width: 500px;" >
<tr>
<th><b>Nama Lengkap</b></th>
<td>Erza Janitradevi Nadine</td>
</tr>
<tr>
<th><b>Tempat/Tanggal Lahir</b></th>
<td>Surabaya, 23 Maret 2002</td>
</tr>
<tr>
<th><b>Jenis Kelamin</b></th>
<td>Perempuan</td>
</tr>
<tr>
<th><b>Agama</b></th>
<td>Islam</td>
</tr>
<tr>
<th><b>Alamat</b></th>
<td>Jl. Wiguna Timur VII No.32, Surabaya</td>
</tr>
<tr>
<th><b>Pekerjaan</b></th>
<td>Mahasiswa</td>
</tr>
<tr>
<th><b>Kewarganegaraan</b></th>
<td>Indonesia</td>
</tr>
</table>
</div>
</div>
<h2>Education</h2>
<table class="tabel2;" style="width: 90%;">
<tr>
<th><b>Jenjang Pendidikan</b></th>
<th><b>Keterangan</b></th>
<th><b>Tahun</b></th>
</tr>
<tr>
<td>Sekolah Dasar</td>
<td>SD Muhammadiyah 2 Denpasar</td>
<td>2007-2012</td>
</tr>
<tr>
<td><b></b></td>
<td>SD Integral Luqman Al-Hakim Surabaya</td>
<td>2012-2013</td>
</tr>
<tr>
<td>Sekolah Menengah Pertama</td>
<td>SMP Negeri 17 Surabaya</td>
<td>2013-2016</td>
</tr>
<tr>
<td>Sekolah Menengah Atas</td>
<td>SMA Negeri 5 Surabaya</td>
<td>2016-2019</td>
</tr>
<tr>
<td>S1</td>
<td>Institut Teknologi Sepuluh Nopember <br> Teknik Informatika</td>
<td>2019-Sekarang</td>
</tr>
</table>
<h2>Contact</h2>
<table class="tabel2;" style="width: 70%;">
<tr>
<th><b>Nomor HP</b></th>
<td>082245185912</td>
</tr>
<tr>
<th><b>Email</b></th>
<td>erzan63@gmail.com</td>
</tr>
</table>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

2. main.css

body{
font-family: 'Manrope', sans-serif;
background-color: #d8e2dc;
align-content: center;
}
body h1{
margin-top: 2rem;
margin-bottom: 2rem;
}
body h2{
text-align: left;
padding-top: 4rem ;
padding-bottom:2rem ;
}
img{
position: relative;
margin-left: auto;
padding-top: 2rem ;
padding-bottom:2rem ;
display: block;
width: 30%;
height: 30%;
border-radius: 50%;
}
table{
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
}
td,th{
text-align: left;
padding: 8px;
border: 2px solid black
}
th {
background-color: #6b705c;
color: white;
}
view raw main.css hosted with ❤ by GitHub

Comments

Post a Comment