Tugas 1 Pemrograman Web (D) - Curiculum Vitae

-

Nama :  M. Iqbal Abdi

NRP : 05111940000151

Kelas : PWEB D

 

Tugas 1 Pemrograman Web : Membuat CV

Link Website :  Link

  1. Membuat Tampilan Profil

    Tampilan profil terdiri dari navigation bar dan dilanjutkan dengan bagian yang berisi nama lengkap, status, dan interest.




  2. Membuat Tampilan Experience dan Education

    Pada bagian ini terdiri pengalaman yang pernah dilakukan dan pendidikan yang pernah ditempuh




  3. Membuat Tampilan Hobbies, Skills, dan Contact Info

    Pada bagian ini berisi hobi yang disukai, skills yang dimiliki, dan juga contact person 




  4. Membuat Tampilan Footer

    Bagian ini merupakan footer berisi media sosial yang dapat digunakan untuk menghubungi saya.


  5. Source Code
Berikut ini adalah source code HTML : 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CV M. Iqbal Abdi</title>
<link rel="stylesheet" href="Assets/libraries/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="Assets/styles/style.css">
</head>
<body style="background-color: #ebfff5;">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark page-navbar gradient">
<div class="container">
<a class="navbar-brand logo" href="#">My CV</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item item">
<li class="nav-item item">
<a class="nav-link" href="#work-experience">Experience</a>
</li>
<li class="nav-item item">
<a class="nav-link" href="#education">Education</a>
</li>
<li class="nav-item item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item item">
<a class="nav-link" href="#hobbies">Hobbies</a>
</li>
</li>
</ul>
</div>
</div>
</nav>
<main class="page cv-page">
<section class="cv-block block-intro border-bottom">
<div class="container">
<div class="avatar">
<img class="img-fluid rounded-circle" src="Assets/image/avatar_2.jpg"/>
</div>
<p>Hello! I am <strong>M. Iqbal Abdi</strong>. Currently being an Informatics student at Institut Teknologi
Sepuluh Nopember. I have passion in Networking, Cyber Security, and Web Development.</p>
</div>
</section>
<section class="cv-block info">
<div class="container">
<div class="work-experience group" id="work-experience">
<h2 class="text-center">Experience</h2>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Kepala Divisi Publikasi Dokumentasi</h3>
<h4 class="organization">Integrated Roadshow ITS 2021</h4>
</div>
<div class="col-md-6">
<time class="period">10/2013 - 04/2015</time>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Anggota Ikatan Pelajar Mahasiswa Riau</h3>
<h4 class="organization">Forda Riau</h4>
</div>
<div class="col-md-6">
<time class="period">10/2013 - 04/2015</time>
</div>
</div>
</div>
<div class="education group" id="education">
<h2 class="text-center">Education</h2>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>SMAN 4 Pekanbaru</h3>
<h4 class="organization">High School</h4>
</div>
<div class="col-md-6">
<time class="period">09/2005 - 05/2010</time>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<h3>Institut Teknologi Sepuluh Nopember</h3>
<h4 class="organization">Informatics</h4>
</div>
<div class="col-md-6">
<time class="period">09/2010 - 06/2015</time>
</div>
</div>
</div>
</div>
<div class="hobbies group" id="hobbies">
<h2 class="text-center">Hobbies</h2>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla aspernatur ullam fuga. Delectus ratione tempora assumenda atque tempore maiores repellendus voluptatibus cum nihil repudiandae suscipit, et eligendi. Voluptates, eum magni? </p>
<div class="group" id="skills">
<div class="row">
<div class="col-md-6">
<div class="skills info-card">
<h2>Skills</h2>
<h3>HTML</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:100%">
</div>
</div>
<h3>PHP</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:90%">
</div>
</div>
<h3>JavaScript</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:80%">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-info info-card">
<h2>Contact Info</h2>
<div class="row">
<div class="col-1">
<i class="ion-android-calendar icon"></i>
</div>
<div class="col-9">
<span>07/09/2000</span>
</div>
</div>
<div class="row">
<div class="col-1">
<i class="ion-person icon"></i>
</div>
<div class="col-9">
<span>M Iqbal Abdi</span>
</div>
</div>
<div class="row">
<div class="col-1">
<i class="ion-ios-telephone icon"></i>
</div>
<div class="col-9">
<span>+235 3217 424</span>
</div>
</div>
<div class="row">
<div class="col-1">
<i class="ion-at icon"></i>
</div>
<div class="col-9">
<span>iqbalabdi07@email.com</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="page-footer">
<div class="container">
<div class="social-icons">
<a href="#"><i class="bi bi-facebook"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
<a href="#"><i class="bi bi-twitter"></i></a>
</div>
</div>
</footer>
</main>
</body>
<script src="Assets/libraries/jquery/jquery-3.6.0.min.js"></script>
<script src="Assets/libraries/bootstrap/js/bootstrap.js"></script>
<script src="Assets/scripts/script.js"></script>
</html>
view raw cv_index.html hosted with ❤ by GitHub

Dan berikut adalah source code CSS nya : 

@import url("https://fonts.googleapis.com/css?family=Lato:300,400");
body{
font-family: 'Lato', sans-serif;
}
.page-navbar.navbar{
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.page-navbar .navbar-nav .nav-item a{
font-weight: bold;
}
.page-navbar.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.page-navbar .logo{
font-size: 1.5rem;
}
.page-navbar.fixed-top + .page{
padding-top: 62px;
}
.download-template{
color: #fff;
background-color: #ed36ad;
border: none;
font-weight: bold;
text-transform: uppercase;
font-size: 13px;
padding: 10px 24px;
border-radius: 40px;
}
.download-template:hover{
background-color: #fb5ec4;
}
.gradient{
background: linear-gradient(120deg, #0b9143, #0ea0ff);
color: #fff !important;
}
.cv-block{
padding-bottom: 60px;
padding-top: 60px;
}
.cv-block.block-intro{
text-align: center;
max-width: 850px;
margin: auto;
}
.cv-block.block-intro .about-me{
max-width: 800px;
margin: auto;
}
.cv-block.block-intro p{
font-size: 1.5em;
font-weight: 300;
margin-bottom: 30px;
}
.cv-block.block-intro .btn {
padding: 0.375rem 1rem;
border-radius: 2em;
}
.cv-block.block-intro .avatar{
width: 250px;
height: 150px;
background-size: cover;
background-repeat: no-repeat;
margin: auto;
border-radius: 100px;
margin-bottom: 30px;
}
.cv-block.info{
padding-top: 70px;
}
.cv-block.info h2{
font-weight: bold;
margin-bottom: 70px;
}
.cv-block.info h3{
font-size: 1.3rem;
}
.cv-block.info .group{
max-width: 800px;
margin: auto;
}
.cv-block.info .group:not(:first-child){
margin-top: 90px;
}
.cv-block.info .group .period{
font-size: 0.8rem;
float: none;
font-weight: bold;
margin-top: 4px;
color: #6c757d;
opacity: 0.8;
}
.cv-block.info .group .organization{
font-size: 0.9em;
background-color: #0ea0ff;
display: inline-block;
color: #fff;
padding: 2px 8px;
border-radius: 2em;
}
.cv-block.info .education.group .organization{
background-color: #20c997;
}
.cv-block.info .group .item{
padding-bottom: 10px;
margin-bottom: 25px;
border-bottom: 1px solid #eee;
}
.cv-block.info .group h2 + .item{
padding-top:25px;
border-top: 1px solid #eee;
}
.cv-block.info .group .item .row{
margin-bottom: 5px;
}
.cv-block.info .work-experience h3,
.cv-block.info .education h3{
font-weight: bold;
}
.cv-block .info-card{
padding: 40px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
height: 100%;
}
.cv-block .info-card h2{
margin-top: 0;
margin-bottom: 24px !important;
font-size: 1.4rem;
}
.cv-block .info-card.skills h3{
margin-top: 25px;
font-size: 1rem;
font-weight: bold;
}
.cv-block .info-card.skills .progress{
height: 3px;
}
.cv-block .info-card.contact-info .icon{
font-size: 1.3em;
color: #c9c9c9;
position: relative;
bottom: 4px;
}
.cv-block.info .hobbies p{
max-width: 700px;
margin: auto;
font-size: 1.2em;
}
.page-footer{
padding-top: 32px;
border-top: 1px solid #ddd;
text-align: center;
padding-bottom: 20px;
}
.page-footer a{
display: inline-block;
margin: 0px 10px;
color: #282b2d;
font-size: 18px;
}
.page-footer .links{
display: inline-block;
}
.page-footer .social-icons{
margin-top: 20px;
margin-bottom: 16px;
}
.page-footer .social-icons a{
font-size: 18px;
margin: 0 3px;
color: #ffffff;
border: 1px solid;
opacity: 0.75;
border-radius: 50%;
width: 36px;
display: inline-block;
height: 36px;
text-align: center;
background-color: #c5c9d2;
line-height: 34px;
}
.page-footer .social-icons a:hover{
opacity: 1;
}
@media (min-width: 768px) {
.cv-block {
padding-bottom: 120px;
padding-top: 120px;
}
.cv-block.info .group .period {
float: right;
}
}
@media (min-width: 576px){
.navbar {
padding-top: 1.2rem;
padding-bottom:1.2rem;
}
.portfolio-navbar.fixed-top + .page{
padding-top: 6rem;
}
}
view raw cv_style.css hosted with ❤ by GitHub
 


 

Comments

Post a Comment

Popular posts from this blog

Tugas 1 Rekayasa Kebutuhan

-
Image
Nama      : M. Iqbal Abdi NRP      : 05111940000151 Kelas     : Rekayasa Kebutuhan B Tugas 1 Rekayasa Kebutuhan B Aplikasi Parkir Non Tunai Soal : Deskripsikan aplikasi Sistem Parkir Non Tunai Identifikasi User dan Stakeholder Tulis/gambarkan kebutuhan dari masing-masing user/stakeholder Tentukan aspek lain yang penting supaya aplikasi berjalan lancar Jawaban : 1.  Deskripsikan aplikasi Sistem Parkir Non Tunai Aplikasi Parkir Non Tunai merupakan sebuah perangkat yang memungkinkan untuk mebayar tiket parkir tanpa menggunakan mata uang tunai. Aplikasi ini beguna bagi pihak yang membutuhkan sistem pengaturan dan pembayaran tiket parkir secara cepat dan instan, seperti pihak pemilik mall. Aplikasi ini memiliki benefit dimana kebanyakan orang sekarang sudah jarang untuk memegang uang tunai, melainkan menyimpan uang mereka pada e-wallet atau e-banking. Sehingga memudahkan masyarakat saat akan membayar parkir tanpa perlu mencari uang tunai. Aplika...
Read more

ETS Rekayasa Kebutuhan (B) - GoBiz

-
Image
Nama : M. Iqbal Abdi NRP : 05111940000151 Kelas : RK B ETS RK (B) 1.  Jelaskan macam-macam kebutuhan yang harus digali di dalam membuat perangkat lunak Pada Evaluasi Tengah Semester (ETS) kali ini melakukan analisis kebutuhan aplikasi GoBiz. GoBiz adalah aplikasi untuk memudahkan para pemilik usaha untuk mengelola usaha hanya dalam genggaman mereka. Fitur-fitur yang disediakan untuk pemilik usaha pun cukup lengkap, seperti layanan kasir, fitur promo untuk membuat diskon, monitor penjualan, food delivery, dan penerimaan pembayaran secara online/non-cash Kebutuhan Fungsional : Kebutuhan fungsional berisi proses-proses apa saja / layanan apa saja yang nantinya harus disediakan oleh sistem, mencakup bagaimana sistem harus bereaksi pada input tertentu dan bagaimana perilaku sistem pada situasi tertentu. Kebutuhan Fungsional sangat bergantung dari jenis perangkat lunak, pengg...
Read more