Tugas Pemrograman Web B Minggu 1 : Membuat Web Portofolio HTML dan CSS
Tugas Pemrograman Web B adalah membuat website portofolio dari HTML dan CSS native. Portofolio yang saya buat terinspirasi dari tampilan profil pada aplikasi Discord.
Link repositori :
Link web :
Berikut adalah dokumentasi dari portofolio yang saya buat
1. Tampilan Header
Adapun dokumentasi file index.html yang saya buat sebagai berikut
<!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="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Profil Fachrendy</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<section>
<div class="container">
<div class="profile">
<div class="pro-header">
<div class="pro-avatar">
<img src="foto/foto-profil.jpg" size="128">
<span class="pro-status">
<div class="rol green">
<i class="fas fa-circle"></i>
</div>
</span>
</div>
<div class="pro-username">
<span class="text-username">Fachrendy Zulfikar Abdillah</span>
</div>
</div>
<div class="pro-body">
<div class="pro-content">
<div class="title-body">ROLES</div>
<div class="roles-body">
<!-- roles list -->
<div class="rol yellow">
<i class="fas fa-circle"></i>
<span>Mahasiswa ITS</span>
</div>
<div class="rol blue">
<i class="fas fa-circle"></i>
<span>Teknik Informatika</span>
</div>
<div class="rol purple">
<i class="fas fa-circle"></i>
<span>Pemrograman Web B</span>
</div>
<!-- -->
</div>
</div>
</div>
<div class="pro-footer">
<div class="content-footer">
<div class="title-footer">ABOUT ME</div>
<div class="about-me">
<table border="0" style="float: left">
<tbody>
<tr><td colspan="3"><div class="about-title">Profil</div></td></tr>
<tr><td>Nama</td><td>:</td><td>Fachrendy Zulfikar Abdillah</td></tr>
<tr><td>NRP</td><td>:</td><td>5025201018</td></tr>
<tr><td>Asal<td>:</td><td>Tuban, Jawa Timur</td></tr>
<tr><td>Alamat</td><td>:</td><td>Jl. Keputih Tegal Gg. 1 No. 35, Kel. Keputih, Kec. Sukolilo</td></tr>
<tr><td>Email</td><td>:</td><td>fachrenarmy383@gmail.com</td></tr>
</tbody>
</table>
<table border="0" style="float: left">
<tbody>
<tr><td colspan="3"><div class="about-title">Skill</div></td></tr>
<tr><td>•</td><td>Bahasa Inggris aksen British</td></tr>
<tr><td>•</td><td>Mengotak-atik Sistem Hardware Komputer</td></tr>
<tr><td>•</td><td>Programming</td></tr>
<tr><td>•</td><td>Bermain Alat Musik</td></tr>
<tr><td>•</td><td>Keamanan Jaringan Dasar</td></tr>
</tbody>
</table>
<div class="about-me">
</div>
<table border="0" style="float: left">
<tbody>
<tr><td colspan="3"><div class="about-title">Portofolio</div></td></tr>
<tr><td>•</td><td>Bot Discord</td></tr>
<tr><td></td><td>Link undangan klik <a href="https://discord.com/api/oauth2/authorize?client_id=833962481235001354&permissions=1100540340342&scope=bot" style="color: darkgrey">disini</a></td></tr>
<tr><td></td><td>Deskripsi : Bot untuk membantu sistem kode game Vainglory</td></tr>
<tr><td>•</td><td>Snake Game</td></tr>
<tr><td></td><td>Link repositori klik <a href="https://github.com/fHACKrenn/Final-Project-PBO-B" style="color: darkgrey">disini</a></td></tr>
<tr><td></td><td>Deskripsi : Game ular sederhana untuk mendapat skor tertinggi</td></tr>
</tbody>
</table>
<table border="0" style="float: left">
<tbody>
<tr><td colspan="3"><div class="about-title">Roadmap Studi</div></td></tr>
<tr><td>Jaringan Komputer → Keamanan Jaringan → Keamanan Komputer</td></tr>
<tr><td>Dasar Web → Serangan Web → Keamanan Web</td></tr>
</tbody>
</table>
</div>
<div class="title-footer">SOCIAL MEDIA</div>
<div class="social-media-icon">
<div class="column">
<a href="https://www.instagram.com/_fachrendyza" target="_blank">
<img src="foto/instagram-icon.png" alt="Instagram">
</a>
</div>
<div class="column">
<ul class="discord">
<li>
<img src="foto/discord-icon.png" alt="Discord">
<div class="bubblePosition hoverBubble">
<p>PatrickStar#1184</p>
</div>
</li>
</ul>
</div>
<div class="column">
<a href="https://www.github.com/fHACKrenn" target="_blank">
<img src="foto/github-icon.png" alt="Github">
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Sedangkan untuk file styles.css adalah sebagai berikut
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
* {
margin: 0;
}
body {
padding: 20px;
font-family: 'Open Sans',
sans-serif;
background-color: #36393f;
border-top: 15px solid #202225;
}
.profile {
background-color: #202225;
width: 750px;
color: white;
border-radius: 5px;
margin: 0 auto;
-webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(32,34,37,.6);
box-shadow: 0 2px 10px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(32,34,37,.6);
}
.profile .pro-header {
padding: 20px;
flex: 1 1 auto;
flex-direction: column;
}
/* ----- */
/* Header Profile */
.pro-header {
display: flex;
align-items: center;
justify-content: center;
}
/* Avatar */
.pro-avatar {
display: inline-block;
position: relative;
}
.pro-avatar img {
border-radius: 50%;
width: 100px;
}
.pro-status {
transform: translate(50%, 50%);
position: absolute;
bottom: 14.64%;
right: 14.64%;
background-color: #202225;
border-radius: 50%;
padding: 3px;
}
.pro-status i{
font-size: 20px;
}
/* Username */
.pro-username {
margin-top: 15px;
}
.pro-username .text-username {
font-weight: 900;
}
.pro-username .text-discrim {
color: darkgrey;
font-weight: 400;
}
/* ------ */
/* Body Profile */
.pro-body {
background-color: #2f3136;
padding: 10px;
}
.pro-body .title-body {
font-weight: 700;
color: darkgrey;
font-size: 13px;
}
.pro-body .roles-body{
margin-top: 15px;
}
.roles-body{
flex-wrap: wrap;
display: flex;
}
.roles-body .rol {
border: 1px solid;
border-radius: 11px;
display: flex;
align-items: center;
margin: 0 4px 4px 0;
padding: 4px;
box-sizing: border-box;
height: 22px;
font-size: 12px;
font-weight: 500;
}
.rol span {
color: white;
margin-left: 5px;
margin-right: 5px;
}
/* ----- */
/* Footer Profile */
.pro-footer {
background-color: #2f3136;
padding: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.title-footer {
font-weight: 700;
color: darkgrey;
font-size: 13px;
}
.about-me{
font-size: 11px;
margin-top: 8px;
color: darkgrey;
width: 95%;
padding: 10px;
background-color: #2f3136;
border: none;
resize: none;
overflow: auto;
}
.about-title{
font-size: 13px;
font-weight: bold;
}
.social-media-icon {
padding-top: 12px;
display: inline-block;
position: relative;
}
.social-media-icon img{
width:30px;
}
.social-media-icon::after {
content:"";
clear: both;
display: flex;
}
.column {
float: left;
padding: 5px;
}
/* navigation */
ul.discord {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
ul.discord li {
display: inline-block;
width: 100%px;
}
ul.discord li{
display: block;
position: relative;
text-decoration: none;
}
/* bubble style */
.hoverBubble{
background: #202225;
color: #ffffff;
cursor: pointer;
opacity: 1;
padding: 2px;
position: absolute;
text-align: middle;
visibility: hidden;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
}
.bubblePosition {
bottom: 100%;
margin-left: auto;
margin-right: auto;
}
.hoverBubble:after {
border: 8px solid transparent;
bottom: -15px;
content: '';
height: 0px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
width: 0px;
}
/* bubble hover */
ul.discord li:hover .hoverBubble {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-ms-transition: all 0.25s;
-o-transition: all 0.25s;
transition: all 0.25s;
}
/* content in the bubble */
.hoverBubble i {
display: block;
font-size: 1.5em;
text-align: center;
}
/* colors */
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.yellow {
color: yellow;
}
.purple {
color: purple;
}
Comments
Post a Comment