pembuatan tugas cv pweb ini dibuat meliputi dua file yaitu file HTML dan file CSS berikut dibawah ini adalah dokumentasi dari file-file dan hasilnya.
HTML :
html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Resume/CV Design</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
</head>
<body>
<div class="resume">
<div class="resume_left">
<div class="resume_profile">
<img src="img.png" width="150" height="auto" class ="profile_pict">
</div>
<div class = "resume_content">
<div class="resume_item resume_info">
<div class="title">
<p class="bold">Gian Ega Wijaya</p>
<p class="regular">College Student</p>
</div>
<ul>
<li>
<div class="icon"><i class="fas fa-map-signs"></i></div>
<div class="data">
Jawa Tengah, Indonesia
</div>
</li>
<li>
<div class="icon"><i class="fas fa-mobile-alt"></i></div>
<div class="data">
+6281-2599-0376-4
</div>
</li>
<li>
<div class="icon"><i class="fas fa-envelope"></i></div>
<div class="data">
gianegawijaya43</br>@gmail.com
</div>
</li>
</ul>
</div>
<div class="resume_item resume_skill">
<div class="title">
<p class="bold">skill's</p>
</div>
<ul>
<li>
<div class="skill_name">
HTML
</div>
<div class = "skill_progress">
<span style="width: 20%;"></span>
</div>
<div class="skill_per">20%</div>
</li>
<li>
<div class="skill_name">
C
</div>
<div class = "skill_progress">
<span style="width: 80%;"></span>
</div>
<div class="skill_per">80%</div>
</li>
</ul>
</div>
<div class="resume_item resume_social">
<div class="title">
<p class="bold">social</p>
</div>
<ul>
<li>
<div class="icon">
<i class="fab fa-line"></i>
</div>
<div class="data">
<p class="semi_bold">
Line
</p>
<p>
gian.wijaya
</p>
</div>
</li>
<li>
<div class="icon">
<i class="fab fa-whatsapp"></i>
</div>
<div class="data">
<p class="semi_bold">
Whatsapp
</p>
<p>
+6281-2599-0376-4
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class ="resume_right">
<div class="resume_item resume_about">
<div class="title">
<p class="bold">About Me</p>
</div>
<p>Saya memiliki umur 20 tahun, dan tertarik pada pada ilmu komputer. Quisque non lorem elit. Phasellus rhoncus lorem purus, ut cursus diam gravida non. Sed eu tincidunt quam. Vestibulum sit amet gravida lorem. Nam vitae facilisis sapien, id euismod nisi. Pellentesque commodo tristique lorem eu malesuada. Nullam id mauris eget metus tempus congue. Morbi at ipsum nec augue consequat efficitur. </p>
</div>
<div class="resume_item resume_education">
<div class="title">
<p class="bold">Education</p>
</div>
<ul>
<li>
<div class="date">2014-2016</div>
<div class="info">
<p class="semi_bold">SMPIT Nur Hidayah Surakarta</p>
</div>
</li>
<li>
<div class="date">2016-2019</div>
<div class="info">
<p class="semi_bold">SMAIT Nur Hidayah Surakarta</p>
</div>
</li>
<li>
<div class="date">2019 - Sekarang</div>
<div class="info">
<p class="semi_bold">Institut Teknologi Sepuluh Nopember, Informatika</p>
</div>
</li>
</ul>
</div>
<div class="resume_item resume_hobby">
<div class="title">
<p class="bold">Hobby</p>
</div>
<ul>
<li><i class="fas fa-film"></i>
<p class="info">Movie</p>
</li>
<li><i class="fas fa-biking"></i>
<p class="info">Sport</p>
</li>
<li><i class="fas fa-music"></i>
<p class="info">Music</p>
</li>
<li><i class="fas fa-gamepad"></i>
<p class="info">Games</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
qN
CSS :
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: "Montserrat", sans-serif;
}
body {
background: #585c68;
font-size: 14px;
line-height: 22px;
color: #555555;
}
.bold {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
}
.semi-bold {
font-weight: 500;
font-size: 16px;
}
.resume {
width: 800px;
height: auto;
display: flex;
margin: 50px auto;
}
.resume .resume_left {
width: 280px;
background: #0bb5f4;
}
.resume .resume_left .resume_profile {
width: 100%;
height: 280px;
}
.resume .resume_left .resume_profile img {
width: 100%;
height: 100%;
}
.resume .resume_left .resume_content {
padding: 0 25px;
}
.resume .title {
margin-bottom: 20px;
}
.resume .resume_left .bold {
color: #fff;
}
.resume .resume_left .regular {
color: #b1eaff;
}
.resume .resume_item{
padding: 20px 0;
}
.resume .resume_left .resume_item{
border-bottom: 2px solid #b1eaff;
}
.resume .resume_right .resume_item{
border-bottom: 2px solid #b1eaff;
}
.resume .resume_left .resume_item:last-child,
.resume .resume_right .resume_item:last-child {
border-bottom: 0px;
}
.resume .resume_left ul li {
display: flex;
margin-bottom: 10px;
align-items: center;
}
.resume .resume_left ul li:last-child {
margin-bottom: 0;
}
.resume .resume_left ul li .icon {
width: 35px;
height: 35px;
background: #fff;
color: #0bb5f4;
border-radius: 50%;
margin-right: 15px;
font-size: 16px;
position: relative;
}
.resume .icon i,
.resume .resume_right .resume_hobby ul li i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.resume .resume_left ul li .data{
color: #b1eaff;
}
.resume .resume_left .resume_skill ul li{
display: flex;
margin-bottom: 10px;
color: #b1eaff;
justify-content: space-between;
align-items: center;
}
.resume .resume_left .resume_skill ul li .skill_name{
width: 25%;
}
.resume .resume_left .resume_skill ul li .skill_progress{
width: 60%;
margin: 0 5px;
height: 5px;
position: relative;
}
.resume .resume_left .resume_skill ul li .skill_per{
width: 15%;
}
.resume .resume_left .resume_skill ul li .skill_progress span{
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #fff;
}
.resume .resume_left .resume_social .data .semi_bold{
color: #fff;
margin-bottom: 2px;
}
.resume .resume_right {
width: 520px;
background: #fff;
padding: 30px;
}
.resume .resume_right .bold{
color: #0bb5f4;
}
.resume .resume_right .resume_education ul{
padding-left: 40px;
overflow: hidden;
}
.resume .resume_right ul li{
position: relative;
}
.resume .resume_right ul li .date{
font-size: 16px;
font-weight: 500;
margin-bottom: 15px;
}
.resume .resume_right ul li .info{
margin-bottom: 20px;
}
.resume .resum_right ul li:last-child .info{
margin-bottom: 0px;
}
.resume .resume_right .resume_education ul li:before {
content: "";
position: absolute;
top: 5px;
left: -25px;
width: 7px;
height: 6px;
border: 2px solid #0bb5f4;
}
.resume .resume_right .resume_education ul li:after {
content: "";
position: absolute;
top: 14px;
left: -21px;
width: 2px;
background: #0bb5f4;
}
.resume .resume_right .resume_hobby ul {
display: flex;
justify-content: space-between;
}
.resume .resume_right .resume_hobby ul li {
width: 80px;
height: 80px;
border: 2px solid #0bb5f4;
border-radius: 50%;
position: relative;
color: #0bb5f4;
}
.resume .resume_right .resume_hobby ul li i {
font-size: 30px;
}
.resume .resume_right .resume_hobby ul li .info {
margin-top: 90px;
margin-left: 15px;
}
.resume .resume_right .resume_hobby ul li:before {
content: "";
position: absolute;
top: 40px;
right: -52px;
width: 50px;
height: 2px;
background: #0bb5f4;
}
.resume .resume_right .resume_hobby ul li:last-child:before {
display: none;
}
Hasil dari kedua file tersebut dapat diakses pada https://gianegaa.github.io/
Gian Egaa 