Tugas 1 PWEB-B (CV)

-
Nama    : Stefanus Albert Kosim
NRP      : 05111940000096
Kelas     : PWEB-B

Pada kesempatan ini, saya akan menuliskan hasil dari tugas yang saya kerjakan. Dalam membuat CV ini, saya menggunakan pure HTML dan CSS dan dihosting menggunakan github

Untuk CV dapat diakses disini

Preview : 




HTML : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Stefanus Albert</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="header-logo"><a href="#">Stefanus Albert Kosim</a></div>
<div class="header-list">
<ul>
<li><a href="#contact">Kontak</a></li>
<li><a href="#work">Hasil Pekerjaan</a></li>
<li><a href="#edu">Pendidikan</a></li>
<li><a href="#skills">Kemampuan</a></li>
<li><a href="#about">Tentang</a></li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="container">
<div id="about">
<div class="section-title">
<h1>Tentang </h1>
</div>
<div class="section-content">
<div class="photo">
<img src="img/about.jpeg">
</div>
<div class="section-message">
<p>
Halo perkenalkan nama saya Stefanus Albert Kosim, sedang berkuliah di Institut Teknologi Sepuluh Nopember Surabaya jurusan Teknik Informatika. Saat ini saya sedang tertarik di bidang Android Developer dan sedang mengasah skill kedepannya dengan memperdalam pembelajaran Android Studio dengan Kotlin serta Flutter.
Saya juga memiliki kemampuan dasar dalam menggunakan unity.
</p>
</div>
</div>
<div class="divider"></div>
</div>
<div id="skills">
<div class="section-title">
<h1>Skill</h1>
</div>
<div class="hardskill">
<h2>Hard Skills</h2>
<div class="section-message">
<div class="skill-item">
<img src="img/ruby.png">
<p>Basic</p>
</div>
<div class="skill-item">
<img src="img/cpp.png">
<p>Intermediate</p>
</div>
<div class="skill-item">
<img src="img/java.png">
<p>Intermediate</p>
</div>
<div class="skill-item">
<img src="img/unity.png">
<p>Basic</p>
</div>
<div class="skill-item">
<img src="img/html.png">
<p>Basic</p>
</div>
<div class="skill-item">
<img src="img/css.png">
<p>Basic</p>
</div>
<div class="skill-item">
<img src="img/rails.png">
<p>Basic</p>
</div>
<div class="skill-item">
<img src="img/postgres.png">
<p>Intermediate</p>
</div>
</div>
</div>
<div class="clear"></div>
<div class="softskill">
<h2>Soft Skills</h2>
<div class="skill-item">
<ul>
<li>Teamwork</li>
<li>Adaptibility</li>
<li>Problem Solving</li>
</ul>
</div>
</div>
<div class="divider"></div>
</div>
<div id="edu">
<div class="section-title">
<h1>Pendidikan</h1>
</div>
<div class="section-message">
<div class="edu-icon">
<img src="img/ITS.png">
</div>
<div class="edu-message">
<p>Institut Teknologi Sepuluh Nopember</p>
<p>Teknik Informatika</p>
</div>
</div>
<div class="divider"></div>
</div>
<div id="work">
<div class="section-title">
<h1>Produk yang sudah pernah dihasilkan</h1>
</div>
<div class="section-message">
<h2><a href="https://www.figma.com/proto/glzFYhj5P8iDGxdQWEIY1R/Chat-app?node-id=9%3A2&starting-point-node-id=9%3A2" target="_blank">Simple Social Media Prototype</a></h2>
<div class="work-items">
<img src="img/soc1.png">
<img src="img/soc2.png">
<img src="img/soc3.png">
</div>
<div class="clear"></div>
<h2>Simple Bullet Hell 2D Game</h2>
<div class="work-items">
<img src="img/dan1.png">
<img src="img/dan2.png">
<img src="img/dan3.png">
</div>
</div>
<div class="divider"></div>
</div>
<div id="contact">
<div class="section-title">
<h1>Kontak</h1>
</div>
<div class="section-message footer">
<ul>
<li>Email: <a href="mailto:albertkosim24@gmail.com" target="_blank">albertkosim24@gmail.com</a></li>
<li><a href="https://github.com/yanzkosim" target="_blank">Github</a></li>
<li><a href="https://www.linkedin.com/in/stefanusalbertkosim/" target="_blank">LinkedIn</a></li>
<li>Phone number: +6281269002248</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

CSS :

body {
margin: 0;
background-color: rgba(28, 28, 29, 0.9);
}
li {
list-style: none;
font-size: 20px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
p {
font-size: 20px;
}
a {
color:rgba(168, 162, 162, 0.9);
text-decoration: none;
}
a:hover {
color: rgba(219, 219, 219, 0.9);
}
.clear {
clear: both;
}
.container {
width: 920px;
padding: 0 40px;
margin: 0 auto;
background-color: rgba(28, 28, 29, 0.527);
}
.header {
width: 100%;
background-color: rgba(28, 28, 29, 0.95);
position: fixed;
top: 0;
z-index: 10;
color:rgba(168, 162, 162, 0.9);
line-height: 65px;
}
.header-list li {
float: right;
padding-left: 66px;
font-size: 16px;
}
.header-logo {
float: left;
font-size: 24px;
}
.header-list li:hover {
color: rgba(255, 255, 255, 0.9);
}
.main {
padding: 100px 0;
color:rgb(139, 136, 136);
}
.section-title {
color:rgba(168, 162, 162, 0.9);
padding-top: 20px;
}
.section-message {
padding-bottom: 20px;
}
.section-content {
display: flex;
}
.section-content p {
margin: auto;
text-align: justify;
padding-left: 50px;
}
.divider {
background: url(/img/divider.png) repeat-x;
width: 100%;
height: 20px;
clear: both;
}
.photo img{
width: 275px;
padding-bottom: 20px;
}
.skill-item {
text-align: center;
flex-wrap: wrap;
padding-left: 60px;
float: left;
}
.skill-item img {
display: flex;
width: 150px;
height: 150px;
}
#skills h2 {
text-align: center;
padding-top: 20px;
}
.softskill li {
text-align: left;
list-style: circle;
padding: 10px 0;
}
.softskill ul{
margin-bottom: 40px;
}
#edu .section-message{
text-align: center;
}
.edu-icon img{
width: 150px;
padding: 20px 20px;
}
#work .section-message{
padding-top: 20px;
text-align: center;
}
.work-items {
padding: 20px 20px;
}
.work-items img {
padding-left: 10px;
}
.footer li {
padding-bottom: 10px
}
view raw stylesheet.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

MPPL A - Tugas 1

-
Gambar
Membangun Kompetensi untuk Kebutuhan Proyek Nama         : Stefanus Albert Kosim NRP        : 05111940000096 Kelas      : MPPL A Pada kesempatan ini, saya akan menuliskan hasil dari tugas MPPL yaitu bergabung ke situs proyek, mencari sebuah proyek yang diinginkan, kemudian membuat daftar skill yang diperlukan serta penguasaan skill tersebut. 1. Bergabung ke Situs Proyek Saya bergabung ke beberapa situs proyek, salah satu diantaranya adalah  https://projects.co.id/ . Registrasi di situs ini lebih mudah karena tidak diperlukan pekerjaan spesifik yang dimiliki saat mendaftar. Username dari akun saya adalah yanzkosim. Tampilan home setelah berhasil melakukan registrasi dan telah login dengan username yanzkosim 2. Temukan proyek yang sesuai Karena saya tertarik dengan Android Programming, maka saya memilih proyek yang berhubungan dengan Android Link menuju proyek bisa diklik disini Preview proyek yang dipilih 3. Membuat skill yang h...
Baca selengkapnya

MPPL A - Tugas 2

-
Tugas 2 Identifikasi Aplikasi Moka POS Nama     : Stefanus Albert Kosim NRP         : 05111940000096 Kelas      : MPPL A 2021 1. Identification of the Problems Kesulitan dalam mencatat dan menelusuri riwayat transaksi Dibutuhkan kalkulasi serta yang cepat dan benar Kesulitan mencatat stok dan harga produk Ramainya uang digital digunakan Kesulitan ketika transaksi yang terjadi sangat banyak 2. Identification of the Scope Scope dari aplikasi Moka POS adalah UMKM di seluruh Indonesia 3. Identification of the Deliverables Dapat berupa aplikasi web atau berupa hardware sekaligus softwarenya 4. Identification of the Stakeholders Pemilik usaha Pemilik startup Perusahaan pembayaran digital 5. Development of Business Case Aplikasi dapat menyimpan riwayat transaksi secara otomatis Penjual dapat mencari transaksi tertentu Penjual dapat melihat detail transaksi Aplikasi dapat menghitung total pembayaran di transaksi secara otomatis Aplikasi dap...
Baca selengkapnya