https://github.com/ishaqadhel/pweb-homework-2
Pada Minggu Ke-2 Kuliah, saya ditugaskan untuk membuat CV dari Tabel Menggunakan HTML, CSS. Di tugas ini saya menggunakan HTML, CSS, dan JS Native.
index.html
<!-- Tugas 1 Sowftware House HMTC Ishaq Adheltyo 05111940000167 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="view/style.css">
<link rel="stylesheet" href="<https://unicons.iconscout.com/release/v2.1.9/css/unicons.css>">
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<link rel="shortcut icon" href="images/cv-logo.jpg">
<title>CV Ishaq Adheltyo</title>
</head>
<body>
<!-- CV -->
<main class="container">
<!-- section profile -->
<section class="profile">
<div class="left">
<div class="avatar">
<img src="images/pas-foto.jpg" alt="pas-foto">
<span>
<i onClick="window.location.reload()" class="uil uil-sync"></i>
</span>
</div>
<div>
<h2>Ishaq Adheltyo</h2>
<p>Web Developer</p>
</div>
</div>
<div class="right">
<ul class="contact">
<li>
<i class="uil uil-phone-volume"></i>
<strong>Phone : </strong> +62 85156557840
</li>
<li>
<i class="uil uil-envelope"></i>
<strong>Email : </strong> [email protected]
</li>
</ul>
<ul class="socials">
<li>
<a href="<https://www.facebook.com/Ishaq.Adheltyo>" target="_blank">
<i class="uil uil-facebook"></i>
</a>
</li>
<li>
<a href="<https://twitter.com/ishaqadhel>" target="_blank">
<i class="uil uil-twitter"></i>
</a>
</li>
<li>
<a href="<https://www.instagram.com/ishaqadhel>" target="_blank">
<i class="uil uil-instagram"></i>
</a>
</li>
</ul>
</div>
</section>
<!-- section about me -->
<section class="about">
<h1 class="section-heading">About Me</h1>
<div class="content">
<div class="left">
<h2>I'm Ishaq Adheltyo</h2>
<p>
Hi, you can call me ishaq. I would say that Iām humble, hard-working, and I like to challenge myself on a regular basis.
I like to set goals in both my personal and professional life and then strive to accomplish them. I am a very adaptable individual.
Iām a very sociable person, and I think that open communication is one of the most important factors to contribute to a productive workplace.
</div>
<div class="right">
<p>
<span>Name</span>
<span>Ishaq Adheltyo</span>
</p>
<p>
<span>Language</span>
<span>Indonesian, English</span>
</p>
<p>
<span>Nationality</span>
<span>Indonesia</span>
</p>
<p>
<span>Hobbies</span>
<span>Playing Football, Basketball, Watch Netflix</span>
</p>
</div>
</div>
</section>
<!-- section education & skills -->
<section class="skills">
<h1 class="section-heading">Education & Skills</h1>
<div class="content">
<div class="left">
<div class="inner-left">
<div class="heading">
<i class="uil uil-graduation-cap"></i>
<h5>Education</h5>
</div>
<div class="timeline-wrapper">
<div class="item">
<p>20019-Now</p>
<p class="center">College</p>
<p>Institut Teknologi Sepuluh Nopember Surabaya</p>
</div>
<div class="item">
<p>2015-2018</p>
<p class="center">Senior Highschool</p>
<p>SMAN 21 Jakarta</p>
</div>
<div class="item">
<p>2012-2015</p>
<p class="center">Junior Highschool</p>
<p>SMPN 216 Jakarta</p>
</div>
</div>
</div>
<div class="inner-right">
<div class="heading">
<i class="uil uil-suitcase"></i>
<h5>Experience</h5>
</div>
<div class="timeline-wrapper">
<div class="item">
<p>Nov 2020 - Now</p>
<p class="center">Web Developer</p>
<p> <a href="<https://simplus.id>" target="_blank">PT. Simur Indonesia</a></p>
</div>
<div class="item">
<p>Oct 2020 - Jan 2021</p>
<p class="center">Web Developer Intern</p>
<p> <a href="<https://magangupdate.id>" target="_blank">Magang Update ID</a></p>
</div>
<div class="item">
<p>Oct 2019 - Oct 2020</p>
<p class="center">Web Developer</p>
<p> <a href="<https://rindang.co>" target="_blank">Rindang.co</a></p>
</div>
</div>
</div>
</div>
<div class="right">
<div class="skills-wrapper">
<div class="skills-box">
<h4>HTML / CSS / JS</h4>
<div class="progress-wrapper">
<span data-percent="95" class="progress-bar">
<span class="progressnumber">9.5 / 10</span>
</span>
</div>
</div>
<div class="skills-box">
<h4>Laravel</h4>
<div class="progress-wrapper">
<span data-percent="85" class="progress-bar">
<span class="progressnumber">8.5 / 10</span>
</span>
</div>
</div>
<div class="skills-box">
<h4>Flask Python</h4>
<div class="progress-wrapper">
<span data-percent="75" class="progress-bar">
<span class="progressnumber">7.5 / 10</span>
</span>
</div>
</div>
<div class="skills-box">
<h4>React JS</h4>
<div class="progress-wrapper">
<span data-percent="70" class="progress-bar">
<span class="progressnumber">7 / 10</span>
</span>
</div>
</div>
<div class="skills-box">
<h4>UI / UX Design</h4>
<div class="progress-wrapper">
<span data-percent="75" class="progress-bar">
<span class="progressnumber">7.5 / 10</span>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section footer cv -->
<section class="footer-cv">
</section>
</main>
<script src="js/main.js"></script>
</body>
</html>
style.css
/* Warna */
:root {
--primary : #1a253f;
--dark : #151A33;
--secondary : #2b55cc;
--info : #4d79f6;
--ternary : #848db3;
--pure : #eff2f9;
--fade : #7081b9;
--mild : #8997bd;
--footer : #212A4A;
--black:#060b1b;
--twitter: #4ac7ec;
--dribbble : #ff5da0;
--success : #1ecab8;
--danger : #f1646c;
--dark-blue : #28365f;
--dark-gray: #171f33;
--yellow: #f3c74d;
}
/* setting awal untuk umum */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: var(--dark);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
line-height: 1;
}
.container {
max-width: 1140px;
margin: 0 auto;
}
/* css untuk semua section dan main */
section {
padding: 3rem;
}
main {
background: var(--primary);
}
/* css bagian profile */
section.profile {
background: var(--black);
display: flex;
align-items: center;
padding: 3rem;
margin-top: 60px;
clip-path: polygon(0 0, 100% 0, 100% 80%, 25% 100%, 0 80%);
padding-bottom: 4rem;
}
section.profile .left {
flex : 2;
display: flex;
align-items: center;
}
section.profile .left h2 {
color: var(--fade);
font-size: 24px;
font-weight: 600;
margin-bottom: 1rem;
}
section.profile .left p {
color: var(--mild);
font-size: 14px;
}
section.profile .left img {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
}
section.profile .left .avatar {
position: relative;
margin-right: 2rem;
}
section.profile .left .avatar span{
position: absolute;
right: 0;
bottom: 0;
background: var(--info);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--pure);
box-shadow: 0px 0px 20px 0px rgba(32, 41, 54, 0.05);
cursor: pointer;
}
section.profile .right ul.contact {
list-style-type: none;
margin-bottom: 1.6rem;
}
section.profile .right ul.contact li {
color: var(--ternary);
margin-bottom: 0.7rem;
font-size: 14px;
}
section.profile .right ul.contact li i{
font-size: 18px;
margin-right: 0.3rem;
}
section.profile .right ul.socials {
display: flex;
align-items: center;
list-style-type: none;
}
section.profile .right ul.socials li {
margin-right: 0.8rem;
}
section.profile .right ul.socials li a {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--pure);
line-height: 36px;
text-align: center;
}
section.profile .right ul.socials li:nth-child(1) a {
background: var(--secondary);
}
section.profile .right ul.socials li:nth-child(2) a {
background: var(--twitter);
}
section.profile .right ul.socials li:nth-child(3) a {
background: var(--dribbble);
}
.section-heading {
font-size: 16px;
font-weight: 500;
color: var(--pure);
margin-bottom: 3rem;
text-shadow: 0 0 1px rgba(40, 54, 95, 0.1);
position: relative;
}
.section-heading:after {
content: '';
height: 3px;
width: 80px;
position: absolute;
top: 28px;
left: 0;
border: 2px solid var(--danger);
}
/* css untuk bagian about me */
section.about .content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16rem;
}
section.about .content h2 {
color: var(--info);
font-size: 18px;
line-height: 22px;
font-weight: 700;
margin-bottom: 1.6rem;
}
section.about .content p {
color: var(--ternary);
font-size: 14px;
line-height: 1.6;
letter-spacing: 0.1px;
margin-bottom: 1rem;
}
section.about .content .right p {
line-height: 1.6;
font-size: 14px;
color: var(--ternary);
letter-spacing: 0.1px;
margin-bottom: 1rem;
}
section.about .content .right p span:nth-child(1) {
width: 130px;
float: left;
font-weight: 500;
padding-right: 10px;
display: block;
position: relative;
}
section.about .content .right p span:nth-child(2) {
padding-left: 150px;
display: block;
}
section.about .content .right p span:nth-child(1):after {
content: ':';
position: absolute;
right: 0;
top: 0;
}
/* css untuk bagian education & skills */
section.skills .section-heading:after {
content: '';
height: 3px;
width: 140px;
position: absolute;
top: 28px;
left: 0;
border: 2px solid var(--danger);
}
section.skills .content {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
section.skills .content .left {
display: grid;
grid-template-columns: 1fr 1fr;
}
section.skills .content .left .heading {
margin-bottom: 2rem;
}
section.skills .content .left .heading i {
color: var(--fade);
font-size: 52px;
}
section.skills .content .left .heading h5 {
font-size: 16px;
margin-top: 0.5rem;
color: var(--mild);
}
section.skills .content .left p {
font-size: 14px;
color: var(--ternary);
line-height: 1.7;
}
section.skills .content .left a {
font-size: 14px;
color: var(--ternary);
line-height: 1.7;
}
section.skills .content .left p.center {
color: var(--fade);
}
section.skills .content .left .item {
margin-bottom: 2.6rem;
}
section.skills .content .left .item::after {
content: '';
width: 10px;
}
section.skills .content .right {
padding-left: 15px;
}
section.skills .skills-wrapper .skills-box h4{
color: var(--ternary);
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 1rem;
}
section.skills .skills-wrapper .skills-box {
margin-bottom: 4rem;
}
section.skills .skills-wrapper .skills-box .progress-wrapper {
background: #20294a;
height: 6px;
width: 100%;
box-shadow: 0px 0px 1px 0.25px #4d79f6;
border-radius: 10px;
border: 2px solid var(--primary);
}
section.skills .skills-wrapper .skills-box .progress-wrapper .progress-bar {
display: block;
height: 100%;
background: var(--info);
width: 0;
position: relative;
}
section.skills .skills-wrapper .skills-box .progress-wrapper .progress-bar .progressnumber {
position: absolute;
right: -15px;
top: -30px;
margin-bottom: 10px;
color: var(--ternary);
font-size: 16px;
text-transform: uppercase;
}
/* css untuk footer cv */
section.footer-cv {
background: var(--black);
padding: 3rem;
margin-bottom: 60px;
}
/* CSS untuk mobile */
@media (max-width: 768px) {
section.about .content {
display: block;
}
section.profile {
display: block;
}
section.profile .left {
padding-bottom: 3rem;
}
section.skills .content {
display: block;
}
section.skills .skills-wrapper .skills-box .progress-wrapper .progress-bar .progressnumber {
display: none;
}
}
main.js
document.addEventListener('DOMContentLoaded', function () {
const bars = document.querySelectorAll('.progress-bar');
bars.forEach(function(bar){
let percentage = bar.dataset.percent;
let progressnumber = bar.children[0];
// progressnumber.innerText = percentage + '%';
bar.style.width = percentage + '%';
console.log(percentage);
})
});