ETS PWEB-B

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



4. Buatlah sebuah front end web yang berisi
        Home
            Halaman home adalah halaman utama yang akan dibuka pertama kali saat pengunjung membuka website. Halaman ini berisi menu, foto, teks, dan tabel.
        Download CV
            Berisi daftar portofolio dan link yang pernah dikerjakan, dan juga CV yang dipunyai. 
        Contact
            Halaman contact adalah halaman yang berisi form untuk menghubungi pemilik website.
        Aboutme
            Halaman about adalah halaman yang berisi informasi lengkap tentang website. Lengkapi link dengan social media anda

Link Website: yanzkosim.github.io/ETS/ 



Demo web: 





index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./css/style.css"/>
<title>Home</title>
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="row justify-content-between" id="header">
<h1>Personal Blog</h1>
<ul>
<li><a class="pl-4 my-auto" href="about.html">About me</a></li>
<li><a class="pl-4 pr-4 my-auto" href="contact.html">Contact</a></li>
<li><a class="pl-4 pr-4 my-auto" href="https://yanzkosim.github.io/Pweb1-CV/" target="_blank">CV</a></li>
<li><a class="pr-4 my-auto" href="index.html" style="color: rgba(219, 219, 219, 0.9); text-decoration: underline;">Home</a></li>
</ul>
</div>
<div class="my-4" id="photo-content">
<div class="photo">
<img src="./images/about.jpeg">
</div>
<div class="photo-name">
<h2>Stefanus Albert Kosim</h2>
</div>
</div>
<div class="my-1" id="overview">
<div class="section-message">
<p>
Halo perkenalkan nama saya Stefanus Albert Kosim, sedang berkuliah di Institut Teknologi Sepuluh Nopember Surabaya jurusan Teknik Informatika.
Saya tertarik dan sedang belajar mengenai android.
</p>
</div>
<div id="skills-table">
<table border="1" width="100%">
<thead>
<tr>
<th>Skill</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>Android Studio</li>
<li>Java</li>
<li>Kotlin</li>
<li>C++</li>
<li>C#</li>
<li>Unity</li>
</ul>
</td>
<td>
<ul>
<li>Sedang belajar</li>
<li>Bisa</li>
<li>Sedang belajar</li>
<li>Bisa</li>
<li>Bisa</li>
<li>Bisa</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<footer style="text-align: center;">
<p>Copyright &copy; 2021 Stefanus Albert Kosim.</p>
</footer>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
cv.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
contact.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<link rel="stylesheet" href="./css/style.css"/>
<title>Contact</title>
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="row justify-content-between" id="header">
<h1>Personal Blog </h1>
<ul>
<li><a class="pl-4 my-auto" href="about.html">About me</a></li>
<li><a class="pl-4 pr-4 my-auto" href="contact.html" style="color: rgba(219, 219, 219, 0.9); text-decoration: underline;">Contact</a></li>
<li><a class="pl-4 pr-4 my-auto" href="https://yanzkosim.github.io/Pweb1-CV/" target="_blank">CV</a></li>
<li><a class="pr-4 my-auto" href="index.html">Home</a></li>
</ul>
</div>
<div class="container my-4">
<div class="row row justify-content-center">
<div class="col-sm-6" style="border: 1px solid rgb(155,155,155);">
<h3 class="h3 ml-4 mt-5 mb-5 font-weight-bold">Ask a Question</h3>
<form method="post" id="validasiLogin">
<div class="form-group">
<label for="name" class="sr-only">Your Email*</label>
<input type="email" name="email" id="email" class="form-control form-control-lg required mt-5 mb-5" placeholder="Your Email*">
</div>
<div class="form-group">
<label for="name" class="sr-only">Your Name*</label>
<input type="text" name="name" id="name" class="form-control form-control-lg required mt-5 mb-5" placeholder="Your Name*">
</div>
<div class="form-group">
<label for="subject" class="sr-only">Subject*</label>
<input type="text" name="subject" id="subject" class="form-control form-control-lg required mt-5 mb-5" placeholder="Subject*">
</div>
<div class="form-group">
<label for="message" class="sr-only">Type Your Message*</label>
<textarea name="message" id="message" class="form-control form-control-lg required mt-5 mb-5" placeholder="Type Your Message*" rows="5"></textarea>
</div>
<button class="btn mb-4" id="button" type="submit" style="background-color: #5f5f5f; color: white">Send Mail</button>
</form>
</div>
</div>
</div>
<footer style="text-align: center;">
<p>Copyright &copy; 2021 Stefanus Albert Kosim.</p>
</footer>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#validasiLogin').validate({
rules: {
name: {
minlength: 4,
maxlength: 50
},
subject: {
minlength: 6,
maxlength: 25
},
message: {
minlength: 30,
maxlength: 255
}
},
messages: {
email: {
required: "Email harus diisi"
},
name: {
required: "Nama harus diisi",
minlength: "Nama minimum 4 karakter",
maxlength: "Nama maksimum 50 karakter"
},
subject: {
required: "Subject harus diisi",
minlength: "Subject minimum 6 karakter",
maxlength: "Subject maksimum 25 karakter"
},
message: {
required: "Message harus diisi",
minlength: "Message minimum 30 karakter",
maxlength: "Message maksimum 255 karakter"
}
}
});
});
</script>
</html>
view raw contact.html hosted with ❤ by GitHub
about.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./css/style.css"/>
<title>Home</title>
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="row justify-content-between" id="header">
<h1>Personal Blog</h1>
<ul>
<li><a class="pl-4 my-auto" href="about.html" style="color: rgba(219, 219, 219, 0.9); text-decoration: underline;">About me</a></li>
<li><a class="pl-4 pr-4 my-auto" href="contact.html">Contact</a></li>
<li><a class="pl-4 pr-4 my-auto" href="https://yanzkosim.github.io/Pweb1-CV/" target="_blank">CV</a></li>
<li><a class="pr-4 my-auto" href="index.html">Home</a></li>
</ul>
</div>
<div class="text-center">
<h1 class="mt-2">About Me</h1>
<p>Halo perkenalkan nama saya Stefanus Albert Kosim, sedang berkuliah di Institut Teknologi Sepuluh Nopember Surabaya jurusan Teknik Informatika.
Saya tertarik dan sedang belajar mengenai android. Saya juga tertarik pada networking. Saya menguasai fundamental unity dan beberapa bahasa pemrograman seperti C++, C#, Java.
Target saya saat ini adalah memperdalam mengenai mobile development.</p>
<ul class="text-left">Berikut adalah kontak sosial media saya:
<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 (WhatsApp & Telegram)</li>
<li><a href="https://www.facebook.com/StefanusAlbert24/" target="_blank">Facebook</a></li>
</ul>
</div>
<footer style="text-align: center;">
<p>Copyright &copy; 2021 Stefanus Albert Kosim.</p>
</footer>
</div>
</body>
</html>
view raw about.html hosted with ❤ by GitHub
style.css:

body {
background-color: rgba(28, 28, 29, 0.9);
overflow-x: hidden;
font-family: 'Poppins';
height: 100%;
background-repeat: no-repeat;
background-size: cover;
color: rgba(194, 188, 188, 0.9);;
}
#header {
width: 100%;
border-bottom: 1px solid rgb(94, 94, 94);
display: flex;
}
#header li {
list-style: none;
font-size: 20px;
float: right;
}
#header a {
font-size: larger;
}
a {
color:rgba(168, 162, 162, 0.9);
text-decoration: none;
}
a:hover {
color: rgba(219, 219, 219, 0.9);
}
.clear {
clear: both;
}
.section-message {
padding-bottom: 20px;
}
.section-message p {
margin: auto;
padding-left: 50px;
}
img {
width: 275px;
padding-bottom: 20px;
border-radius: 50%;
}
#photo-content {
text-align: center;
border-bottom: 1px solid rgb(94, 94, 94);
}
#overview {
text-align: center;
}
#skills-table {
max-width: 600px;
margin: 3em auto;
}
#skills-table li {
text-align: left;
list-style-type: none;
}
footer {
border-top: 1px solid rgb(94, 94, 94);
padding-top: 10px;
}
view raw style.css hosted with ❤ by GitHub
stylesheet.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

Tugas 1 PWEB-B (CV)

-
Gambar
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 :  CSS :
Baca selengkapnya