Tugas 1 PWEB - D (2021)

Muhammad Raihan
05111940000100
PWEB - D (2021)

Berikut adalah kode yang saya tulis untuk membuat CV dari HTML. Untuk tampilan lengkapnya, bisa diakses melalui link ini

1. index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="800px.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>CV Muhammad Raihan</title>
</head>
<body>
<div class="cont">
<div id="nav"> <a>CV</a> <a href="#aa">About Me</a> <a href="#dd">Educations</a>
<a href="#cc">Skills</a> <a href="#bb">Experiences</a> <a id="ls" href="#pp"><i
class="fa fa-home" aria-hidden="true"></i></a> </div>
<div class="sub-cont">
<div class="left left-full" id="pp"> <img src="Image/photo.JPG" alt="My Photo">
</div>
<div class="right right-full" id="ss">
<div id="nt"> <a id="name">Muhammad Raihan</a><br>
<a id="title">Undergraduate Student</a><br>
<div id="it">
<table>
<tbody>
<tr>
<th class="u"><i class="fa fa-map-marker" aria-hidden="true"></i>
Location</th>
<th class="u"><i class="fa fa-phone" aria-hidden="true"></i>
Phone</th>
<th class="u"><i class="fa fa-envelope-o" aria-hidden="true"></i>
Email</th>
</tr>
<tr>
<td class="u">Dumai, Riau</td>
<td class="u">822-8452-0555</td>
<td class="u">haann.m5@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="sub-cont">
<div class="left" id="aa"><a><span class="sub-judul" id="intr">Introduction
<i class="fa fa-hand-o-right" aria-hidden="true"></i></span><br>
<br>
This is about myself</a></div>
<div class="right" id="kanan">
<div>
<p> I'm a hardworking and ambitious individual with a great passion
for the information technology. As an undergraduate student, i
have experienced working with others to achieve a certain
objective ontime perfectly. I am currently in my second year of
studying BA Informatics Engineering at Sepuluh Nopember Institute
of Technology. I also get used to study something by myself, so i
can grow up my skills everytime i wanted to. </p>
</div>
</div>
</div>
<div class="sub-cont">
<div class="left left-full" id="dd"><a><span class="sub-judul" id="ed">Educations
<i class="fa fa-hand-o-right" aria-hidden="true"></i></span><br>
<br>
My Lifetime Education</a> </div>
<div class="right right-full">
<div class="timeline">
<div class="cont-right">
<div class="content">
<div id="lc"> <a id="year">2013 - 2016</a><br>
<a id="event">MTs Husnul Khotimah</a><br>
<a id="tl">Junior Highschool</a><br>
<a id="loc"><i class="fa fa-map-marker" aria-hidden="true"> </i>
Kuningan, Jawa Barat</a> </div>
</div>
</div>
<div class="cont-right">
<div class="content">
<div id="lc"> <a id="year">2016 - 2019</a><br>
<a id="event">MA Husnul Khotimah</a><br>
<a id="tl">Senior Highschool</a><br>
<a id="loc"><i class="fa fa-map-marker" aria-hidden="true"> </i>
Kuningan, Jawa Barat</a> </div>
</div>
</div>
<div class="cont-right">
<div class="content">
<div id="lc"> <a id="year">2019 - Present</a><br>
<a id="event">Institut Teknologi Sepuluh Nopember</a><br>
<a id="tl">5th Semester Undergraduate (GPA : 3.77)</a><br>
<a id="loc"><i class="fa fa-map-marker" aria-hidden="true"> </i>
Surabaya, Jawa Timur</a> </div>
</div>
</div>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
<div class="sub-cont">
<div class="left" id="cc"><a><span class="sub-judul" id="sk">Skills <i
class="fa fa-hand-o-right" aria-hidden="true"></i></span><br>
<br>
These are my skills</a> </div>
<div class="right">
<div class="skill"> <a><i class="fa fa-link" aria-hidden="true"></i>
Problem Solving</a>
<div id="pr-bar">
<div class="empty">
<div class="skills" id="PS">80%</div>
</div>
</div>
<a><i class="fa fa-link" aria-hidden="true"></i> Active Learning</a>
<div id="pr-bar">
<div class="empty">
<div class="skills" id="AL">70%</div>
</div>
</div>
<a><i class="fa fa-link" aria-hidden="true"></i> Programming</a>
<div id="pr-bar">
<div class="empty">
<div class="skills" id="PRG">85%</div>
</div>
</div>
<a><i class="fa fa-link" aria-hidden="true"></i> Reliability</a>
<div id="pr-bar">
<div class="empty">
<div class="skills" id="RLB">70%</div>
</div>
</div>
</div>
</div>
</div>
<div class="sub-cont">
<div class="left left-full" id="bb"> <a><span class="sub-judul" id="exp">Experiences
and Achivements <i class="fa fa-hand-o-right" aria-hidden="true"></i>
</span><br>
<br>
I've been achieve something in my life</a> </div>
<div class="right right-full">
<div class="timeline">
<div class="cont-right">
<div class="content">
<div id="lc"> <a id="year">2017 - 2018</a><br>
<a id="event">Highschool Student Council</a><br>
<a id="tl">Islamic Spiritual Department</a><br>
<a id="loc"><i class="fa fa-map-marker" aria-hidden="true"> </i>
Kuningan, Jawa Barat</a> </div>
</div>
</div>
<div class="cont-right">
<div class="content">
<div id="lc"> <a id="year">2018</a><br>
<a id="event">Physics National Science Olympiad (OSN)</a><br>
<a id="tl">Bronze Medal</a><br>
<a id="loc"><i class="fa fa-map-marker" aria-hidden="true"> </i>
Padang, Sumatera Barat</a> </div>
</div>
</div>
<div class="cont-right">
<div class="content">
<div id="lc"> <a id="year">2019 - 2020</a><br>
<a id="event">Lembaga Pendidikan IRIT</a><br>
<a id="tl">Teaching Staff</a><br>
<a id="loc"><i class="fa fa-map-marker" aria-hidden="true"> </i>
Surabaya, Jawa Timur</a> </div>
</div>
</div>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./JavaScript.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

2. style.css

body{margin:0;background: black;}
html{scroll-behavior: smooth;}
.cont {
margin:0;
}
#nav {
background: #737373 ;
position: fixed;
top:0;
width:100%;
display: block;
z-index: 2;
transition: top 0.5s;
}
#nav a:hover{
background:#262626;
color:white;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
#nav a{
color:#e6e6e6;
display: block;
float:left;
text-decoration: none;
padding:14px 16px;
text-align: center;
font-size: 16px;
}
#nav a:last-child{
float:right;
}
.sub-cont {
margin:0;
min-height: 300px;
}
.left {
width :30%;
height :300px;
float:left;
background: #262626;
}
.right {
width:70%;
height: 300px;
float:right;
background: #1a1a1a;
overflow: auto;
}
#kanan div{
margin-left: 50px;
margin-right: 50px;
margin-top:50px;
margin-bottom: 50px;
font-size: 20px;
color:#999999;
line-height: 1.8;
}
.left-full{
background: #333333;
height:100vh;
}
.right-full{
background: #262626;
height:100vh;
}
#pp img {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
display: block;
margin:auto;
width:70%;
height: auto;
}
#pp {
position: relative;
}
#nt {
display: table-cell;
vertical-align: middle;
}
#ss {
display: table;
}
#name {
color:white;
margin-left:10%;
font-size: 60px;
}
#title{
color:#999999;
margin-left:10%;
font-size: 20px;
}
#it {
border-top: solid grey 2px;
margin-left:10%;
margin-right: 10%;
margin-top: 10%;
}
#it table {
width: 100%;
}
#it td{
font-size: 13px;
}
.u {
margin-left: 10%;
font-size: 16px;
padding:14px;
text-align: center;
color:grey;
}
.left a {
text-align: right;
}
.left a {
display: block;
float: right;
font-size: 17px;
margin-top: 50px;
margin-right: 50px;
margin-left:25px;
color: #b3b3b3;
}
.sub-judul {
color:lightgrey;
font-weight: bold;
font-size: 20px;
}
.timeline {
max-width: 1200px;
position: relative;
margin:0 auto;
}
.timeline::after{
content: "";
position: absolute;
width:8px;
background-color:grey;
top:0;
bottom: 0;
left:30%;
margin-left: 0;
}
.cont-right {
padding:0;
position: relative;
width:70%;
background-color:yellow;
left:30%;
}
.cont-right::before {
content:'';
position: absolute;
width:20px;
height:20px;
left: -12px;
background-color: #cccc00;
border: solid 6px #262626;
top:25px;
border-radius: 50%;
z-index: 1;
}
.content {
background-color: #262626;
padding: 20px;
padding-left: 35px;
line-height: 1.8;
color: grey;
}
#event {
font-size: 26px;
color:white;
}
#tl {
font-size: 24px;
color:#ffb84d;
}
.lc {
width:100%;
display: block;
float:left;
background-color: blue;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: rgb(128,128,144);
background: linear-gradient(90deg, rgba(128,128,144,1) 0%, rgba(97,98,98,1) 45%, rgba(52,52,120,1) 96%);
}
.skill {
margin :40px;
margin-left: 100px;
margin-right:100px;
line-height: 2;
}
#pr-bar{
padding: 0;
width:100%;
background-color:#999999;
border-radius: 20px;
line-height: 1.1;
}
.skill a {
color:grey;
padding: 15px;
}
.empty {
text-align: center;
color: white;
}
#PS{width:80%;background-color:#cc7a00;border-radius: 20px;}
#AL{width:70%;background-color:#cc7a00;border-radius: 20px;}
#PRG{width:85%;background-color:#cc7a00;border-radius: 20px;}
#RLB{width:70%;background-color:#cc7a00;border-radius: 20px;}
view raw style.css hosted with ❤ by GitHub

3. JavaScript.js

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("nav").style.top = "0";
} else {
document.getElementById("nav").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
view raw JavaScript.js hosted with ❤ by GitHub

4. Style Responsif

Saya juga membuat CV ini secara responsif sehingga dapat mengikuti tampilan device yang digunakan untuk melihat

4.1 800px.css

@media only screen and (max-width: 800px) {
.right {
height: auto;
width:100%;
}
.left-full, .left {
width: 100%;
height: 200px;
padding: 0;
background-color:#333333;
}
.right-full {
height: auto;
width:100%;
}
.left a {
text-align: left;
float: initial;
margin:50px;
}
#name {
font-size: 45px;
}
#title {
font-size: 20px;
color:#999999;
}
#pp {
background-color: #262626;
position: initial;
height:auto;
}
#pp img{
padding-top: 100px;
padding-bottom: 100px;
height: 200px;
width:200px;
position: initial;
transform:none;
}
.u {
width:33.33%;
}
}
view raw 800px.css hosted with ❤ by GitHub

4.2 540px.css

@media only screen and (max-width: 540px) {
#nav a{
font-size: 8px;
padding: 6px 8px;
}
.left-full, .left {
width: 100%;
height: 200px;
padding: 0;
background-color:#333333;
font-size: 12px;
}
.right, .right-full {
height: auto;
width:100%;
font-size: 12px;
}
.left a {
text-align: left;
float: initial;
margin:30px;
}
#name {
font-size: 40px;
}
#title {
font-size: 15px;
color:#999999;
}
#pp {
background-color: #404040;
position: initial;
height:auto;
}
#pp img{
padding-top: 80px;
padding-bottom: 80px;
height: 150px;
width:150px;
position: initial;
transform:none;
}
.u {
width:33.33%;
font-size: 10px;
}
}
view raw 540px.css hosted with ❤ by GitHub

Baik, mungkin sekian pemaparan tugas pertama PWEB kali ini. Terima Kasih.

-Han

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 MPPL-A

Gambar
Muhammad Raihan 05111940000100 MPPL - A (2021) 1. Bergabung ke situs Freelance Ketika saya melakukan pencarian di google, saya menemukan situs freelancer.co.id dan memutuskan untuk mendaftar disana. 2. Memilih Project dalam situs tersebut Saya memilih project membuat chatbot Kemampuan yang harus dimiliki untuk membuat chatbot tersebut adalah 1. Python 2. Natural Language Processing 3. Deep Learning dan atau Machine Learning 4. Django Sekian pemaparan dari tugas saya, terima kasih -Han
Baca selengkapnya

Evaluasi Akhir Semester RK D

Gambar
Muhammad Raihan 05111940000100 Rekayasa Kebutuhan D Nomor 1 Kebutuhan Fungsional Admin 1. Dapat melakukan login 2. Dapat melakukan verifikasi penyewa 3. Dapat melakukan manajemen alat berat (membuat, mengupdate, menghapus).  4. Dapat memilih alat berat yang dapat disewakan.  5. Dapat melihat detail booking alat sewa.  6. Dapat melakukan penjadwalan peminjaman dan pengembalian alat sewa dari ajuan penyewa.  7. Dapat mengubah status penjadwalan penyewaan. 8. Dapat melakukan manajemen Laporan Kerusakan  9. Dapat melihat laporan penyewaan alat berat. Penyewa 1. Dapat melakukan login apabila ingin masuk ke dalam sistem.  2. Dapat melakukan registrasi apabila belum memiliki akun.  3. Dapat melihat detail alat-alat berat yang disewakan Jaya Konstruksi.  4. Dapat melakukan filtering pada alat-alat berat untuk mencari kebutuhan yang sesuai.  5. Dapat melakukan booking alat berat yang ingin disewa sesuai durasi yang diinginkan.  6. Dapat melihat s...
Baca selengkapnya

Evaluasi Tengah Semester RK D

Gambar
Muhammad Raihan 05111940000100 Rekayasa Kebutuhan - D Nomor 1 Ada 4 buah kebutuhan yang harus digali dalam pembuatan suatu perangkat lunak, berikut akan saya jabarkan satu per satu definisi dari masing - masing kebutuhan. Business Requirement Business Requirement atau kebutuhan bisnis merupakan kebutuhan yang mendasari suatu proses bisnis yang terjadi dalam suatu aplikasi. Sebagai contoh adalah pada aplikasi pada video (Pegadaian Digital) terdapat Kebutuhan agar User dapat menabung uangnya untuk membeli emas, User juga dapat melihat harga emas secara langsung. Requirement ini biasanya ditulis dalam sebuah dokumen yang disebut Business Requirement Document atau BRD. User Requirement User requirement atau kebutuhan pengguna merupakan kebutuhan yang mendasari tiap - tiap bagian pengguna yang akan menggunakan aplikasi. Sebagai contoh pada video (Pegadaian Digital) salah sastu bagian dari pengguna adalah Penabung lalu kebutuhannya adalah menabung Uang untuk membeli emas. Functional Requirem...
Baca selengkapnya