Dokumentasi Pembuatan Profil Diri dengan HTML
- kiranazea01
- Sep 14, 2021
- 2 min read
Updated: Feb 8, 2022
Pada kesempatan kali ini saya membuat profil diri dengan menggunakan HTML. Tampilan profil diri saya terlihat seperti berikut:
Halaman Profil Diri
Untuk source code-nya adalah sebagai berikut:
<!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>Profil Diri</title>
<style>
table, th, td {
border: 0px solid black;
}
body {
font-family: 'Lato', sans-serif;
}
</style>
<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=Lato&display=swap" rel="stylesheet">
</head>
<body style="background-color: lavender;">
<table style="width:100%;">
<tr>
<td style="text-align:center;">
<h1 style="color: rebeccapurple">Kirana Zea</h1>
<h1 style="color: rebeccapurple">Sachdania Mayz</h1>
<p style="color: indigo">05111940000081</p>
</td>
<td style="border-bottom: 2px solid indigo">
<h2 style="color: rebeccapurple">Professional Goals</h2>
<p style="color: indigo">Currently in my fifth semester at a college and willing to learn more.
<br>Studying computer science and open to any major field of study.
<br>I am seeking a HRD Staff position to pursue my interest in developing
<br>a humanly working environment and employee's career growth.</p>
</td>
</tr>
<tr>
<td >
<table>
<tr>
<td>
<pre> </pre>
</td>
<td style="color: indigo; border-top: 2px solid indigo">
<h2 style="color: rebeccapurple">Get in touch!</h2>
<b style="color: rebeccapurple">Mobile:</b>
<br>0812-xxxx-xxxx
<br><b style="color: rebeccapurple">E-mail:</b>
<br>kiranazea01@gmail.com
<br><b style="color: rebeccapurple">Website:</b>
<br><a href="https://zeasch.wixsite.com/dearsycko" style="text-decoration: none; color: indigo">
zeasch.wixsite.com/dearsycko</a>
<br><b style="color: rebeccapurple">Address:</b>
<br>Malang, East Java
</td>
</tr>
</table>
</td>
<td>
<h2 style="color: rebeccapurple;">Skills</h2>
<table style="width:100%; border-bottom: 2px solid indigo;">
<tr>
<td style="color: indigo;">
<b style="color: rebeccapurple;">C language</b>
<br>Able to understand basic C program
<br><pre></pre>
</td>
<td style="color: indigo;">
<b style="color: rebeccapurple;">Java language</b>
<br>Able to understand basic Java program
<br><pre></pre>
</td>
<td style="color: indigo;">
<b style="color: rebeccapurple;">Design</b>
<br>Able to create simple design
<br><pre></pre>
</td>
</tr>
</table>
<h2 style="color: rebeccapurple;"">Tools</h2>
<table style="width:100%; border-bottom: 2px solid indigo;">
<tr>
<td style="color: indigo;">
<b style="color: rebeccapurple;">Adobe Photoshop</b>
<br>Able to create simple design
<br>using Adobe Photoshop
<br><pre></pre>
</td>
<td style="color: indigo;">
<b style="color: rebeccapurple;">Adobe Premiere Pro</b>
<br>Able to create simple video
<br>using Adobe Premiere Pro
<br><pre></pre>
</td>
<td style="color: indigo;">
<b style="color: rebeccapurple;">Adobe XD, Figma</b>
<br>Able to create simple UI design
<br>using Adobe XD or Figma
<br><pre></pre>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<h2 style="color: rebeccapurple;">Academic History</h2>
<table style="width:100%">
<tr>
<td>
<b style="color: rebeccapurple;">Institut Teknologi Sepuluh Nopember</b>
</td>
<td style="color: indigo;">
2019-Present
</td>
</tr>
<tr>
<td style="color: indigo;">
Computer Science
<br><pre> </pre>
</td>
</tr>
<tr>
<td>
<br><b style="color: rebeccapurple;">SMAN 1 Malang</b>
</td>
<td style="color: indigo;"><br>2016-2019</td>
</tr>
<tr>
<td style="color: indigo;">
<br>- Member, Student Council Year 2017/2018
<br>- Member, Student Council Year 2016/2017
<br>- Crew, The Nevasca 2018
<br>- Crew, The Nevasca 2017
<br><pre></pre>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<table style="width: 100%; border-top: 2px solid indigo">
<tr>
<td style="color: indigo;">
<h2 style="color: rebeccapurple;">Languages</h2>
<b style="color: rebeccapurple;">English</b>
<br>Intermediate
<br><br><b style="color: rebeccapurple;">Bahasa Indonesia</b>
<br>Native
<br><pre></pre>
</td>
<td style="color: rebeccapurple;">
<h2 style="color: rebeccapurple;">Interests</h2>
<b>Classic Literature</b>
<br><br><b>Art and Design</b>
<br><br><b>Architecture and Interior Design</b>
<br><pre></pre>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Source code
Demikian yang dapat saya sampaikan, terima kasih.
コメント