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


2. Tampilan About Me


3. Tampilan Portofolio dan Roadmap Studi


4. Tampilan Social Media



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

Popular Posts