Membuat Curriculum Vitae Menggunakan HTML dan CSS


Kali ini saya akan memberikan contoh kode HTML dan CSS untuk membuat Curriculum Vitae menggunakan HTML dan CSS yang terdiri dari 2 page.
berikut adalah contoh hasilnya :

Page 1 :

Page 2 :

Selanjutnya saya akan memperlihatkan kode HTML dan CSS untuk membuat Curriculum Vitae. Langkah pertama adalah menyiapkan teks editor yang akan anda digunakan untuk mengetikkan kode HTML dan CSS, disini saya menggunakan Notepad++. Berikut adalah kode HTML dan CSS dari Curriculum Vitae yang saya buat :

HTML Page 1

<!DOCTYPE html>
<html>
<head>
<title>Curriculum Vitae</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Isi dengan nama file css page 1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="background">
<div class="wadah">

<ul class="mynav topnav">
<li><a class="active" href="#home">About Me</a></li>
<li><a href="page2.html">Skills</a></li>
</ul>

<div class="row">

<div class="side">
<h5 id="textFoto"></h5>
<div><img src="Isi dengan nama file foto anda" style="width:100%"></div>
</div>

<script>
document.getElementById("textFoto").innerHTML = "Photo of me : ";
</script>
  
<div class="main">

<table>
<tr>
</td>
<h4>Data Diri</h4>
</td>
</tr>
<tr>
<td>Nama</td>
<td> : </td>
<td>Old Post Books</td>
</tr>
<tr>
<td>TTL</td>
<td> : </td>
<td>Sleman, 01 April 1998</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td> : </td>
<td>Laki - Laki</td>
</tr>
<tr>
<td>Kewarganegaraan</td>
<td> : </td>
<td>Indonesia</td>
</tr>
<tr>
<td>Alamat Sekarang</td>
<td> : </td>
<td>Indonesia</td>
</tr>
<tr>
<td>No Hp</td>
<td> : </td>
<td>0858 xxxx xxxx</td>
</tr>
<tr>
<td>Email</td>
<td> : </td>
<td>akbarhr2018@gmail.com</td>
</tr>
<tr>
<td>
<h4>Pendidikan</h4>
</td>
</tr>
<tr>
<td>2004-2010</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>2010-2013</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<tr>
<td>2013-2016</td>
<td> : </td>
<td>xxxxx</td>
</tr>
<td>
<h4>Riwayat Pekerjaan</h4>
</td>
</tr>
<tr>
<td>2016-2016</td>
<td> : </td>
<td>Front End Developer</td>
</tr>
</table>

</div>
</div>

<div class="botnav" style="align:center">
<li><a href="#">Facebook : (xxxxx)</a></li>
<li><a href="#">Twitter : (xxxxx)</a></li>
<li><a href="#">Github : (xxxxx)</a></li>
<li><a href="#">Instagram : (xxxxx)</a></li>
<li><a href="#">Linkedin : (xxxxx)</a></li>
         /* ganti (xxxxx) di atas dengan nama media sosial anda */
</div>
</div>
</div>
</body>
</html>

CSS Page 1 

.background
{
background-color: #008080;
width: 100%;
height: 100%;
position: absolute;
padding-top: 5%;;
}

.wadah
{
background-color: white;
width: 80%;
min-height: 80%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

body
{
margin: 0;
font-family: Arial ;
}

.mynav.topnav
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mynav.topnav li
{
float: left;
}

.mynav.topnav li a
{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.mynav.topnav li a:hover:not(.active)
{
background-color: mediumSeaGreen;
}

.mynav.topnav li a.active
{
background-color: red;
}

.mynav.topnav li.right
{
float: right;
}

@media screen and (max-width: 600px)
{
  .mynav.topnav li.right, 
  .mynav.topnav li {float: none;}
  .botnav
  .wadah
  .background
  .row, .navbar {   
    flex-direction: column;
  }
  table
  img
}

.row
{  
display: flex;
flex-wrap: wrap;
}

.side
{
text-align: center;
flex: 8%;
padding: 20px;
}

.main
{
  flex: 50%;
  padding: 20px;
}

img
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: transform .2s;
}

img:hover
{
  transform: scale(1.1);  
}

.botnav
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.botnav li
{
float:left;
}

.botnav li a
{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.botnav li a:hover:not(.active)
{
background-color: mediumSeaGreen;
}

HTML page 2

<!DOCTYPE html>
<html>
<head>
<title>Curriculum Vitae</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Isi dengan nama file css untuk page 2">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="background">
<div class="wadah">

<ul class="mynav topnav">
<li><a class="active" href="index.html">About Me</a></li>
<li><a href="#news">Skills</a></li>
</ul>
<div class="row">
<div class="leftMain">
<p>HTML</p>
<div class="container">
<div class="skills html">80%</div>
</div>

<p>CSS</p>
<div class="container">
<div class="skills css">70%</div>
</div>

<p>JavaScript</p>
<div class="container">
<div class="skills js">60%</div>
</div>

<p>C++</p>
<div class="container">
<div class="skills c">65%</div>
</div>
</div>
<div class="centerMain">

<p>CorelDraw</p>
<div class="container">
<div class="skills corel">80%</div>
</div>

<p>Photoshop</p>
<div class="container">
<div class="skills photoshop">75%</div>
</div>

<p>Premiere Pro</p>
<div class="container">
<div class="skills premiere">75%</div>
</div>
</div>
<div class="rightMain">
<p>Bahasa Indoneisa</p>
<div class="container">
<div class="skills bhsindo">85%</div>
</div>
<p>Bahasa Inggris</p>
<div class="container">
<div class="skills bhsinggris">60%</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS page 2

.background
{
background-color: #008080;
width: 100%;
height: 100%;
position: absolute;
padding-top: 5%;;
}

.wadah
{
background-color: white;
width: 80%;
min-height: 80%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:0;
}

body
{
margin: 0;
font-family: Arial ;
}

.mynav.topnav
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.mynav.topnav li
{
float: left;
}

.mynav.topnav li a
{
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.mynav.topnav li a:hover:not(.active)
{
background-color: mediumSeaGreen;
}

.mynav.topnav li a.active
{
background-color: red;
}

.mynav.topnav li.right
{
float: right;
}

.container
{
  width: 100%;
  background-color: #ddd;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 25px;
  transition: transform .2s;
}

.skills
{
  text-align: right;
  padding-top: 10px;
  padding-bottom: 10px;
  color: black;
}

.container:hover
{
  transform: scale(1.1); 
}

.html
{
border-radius: 25px;
width: 80%; background-color: DodgerBlue;
}

.css
{
border-radius: 25px;
width: 70%; background-color: DodgerBlue;
}

.js
{
border-radius: 25px;
width: 60%; background-color: DodgerBlue;
}

.c
{
border-radius: 25px;
width: 65%; background-color: DodgerBlue;
}

.corel
{
border-radius: 25px;
width: 80%; background-color: Orange;
}

.photoshop
{
border-radius: 25px;
width: 75%; background-color: Orange;
}

.premiere
{
border-radius: 25px;
width: 75%; background-color: Orange;
}

.bhsindo
{
border-radius: 25px;
width: 85%; background-color: MediumSeaGreen;
}

.bhsinggris
{
border-radius: 25px;
width: 60%; background-color: MediumSeaGreen;
}

@media screen and (max-width: 600px)
{
  .mynav.topnav li.right, 
  .mynav.topnav li {float: none;}
  .botnav
  .wadah
  .background
  .row, .navbar {   
    flex-direction: column;
  }
  img
}

.row
{  
display: flex;
flex-wrap: wrap;
}

.leftMain
{
flex: 25%;
padding: 20px;
}

.centerMain
{
flex: 25%;
padding: 20px;
}

.rightMain
{
flex: 25%;
padding: 20px;
}

Setelah ke empat file itu anda buat, simpan semua file tersebut dalam satu folder bersama foto yang anda tempel di cv tadi, Lalu jalankan file HTML page 1 di broswer anda. Selamat anda telah berhasil membuat Curriculum Vitae dengan HTML dan CSS.
Labels: Info Menarik, pemrograman

Thanks for reading Membuat Curriculum Vitae Menggunakan HTML dan CSS. Please share...!

0 Komentar untuk "Membuat Curriculum Vitae Menggunakan HTML dan CSS"

Back To Top