Tugas 1 PWEB (CV-HTML)

Nama: Dimas Fadilah Akbar 
NRP: 5025211010 
Kelas: Pemrograman Web A 
Tahun: 2022/2023

pada pertemuan kedua ini, kami diberikan tugas berupa membuat CV dengan menggunakan HTML murni. Pada CV yang saya terdapat beberapa bagian yaitu about, education, experience, honors/awards, skills, portofolio, dan contact. 

website dapat diakses melalui link berikut
kode sumber website dapat diakses melalui link github berikut

Penjelasan Kode Sumber

Disini saya membagi kode menjadi beberapa segmen menyesuaikan dengan bagian-bagian yang telah saya jelaskan diatas. Dalam membuat tiap bagian saya berfokus menggunakan table tag yang terdiri dari table, tr, dan td, juga memanfaatkan attribut yang dimiliki oleh tag-tag tersebut.

Kode Sumber

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- for font icons -->
  <!-- <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   -->
  <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body style="margin: 0;">
  <!-- Start Header -->
  <table border="0" style="position: fixed;" cellpadding="0" cellspacing="0" width="100%" bgcolor="#424874">
    <tr>
      <td>
        <table border="0" cellpadding="8" cellspacing="0" width="85%" align="center">
          <tr>
            <td>
              <font color="black" face="arial" size="5"><strong>Curiculum Vitae</strong></font>
            </td>
            <td width="30%">&nbsp;</td>
            <td><a style="text-decoration: none;" href="#home">
                <font face="arial" size="3" color="#cdcdc0">Home</font>
              </a></td>
            <td><a style="text-decoration: none;" href="#about">
                <font face="arial" size="3" color="#cdcdc0">About</font>
              </a></td>
            <td><a style="text-decoration: none;" href="#education">
                <font face="arial" size="3" color="#cdcdc0">Education</font>
              </a></td>
            <td><a style="text-decoration: none;" href="#experience">
                <font face="arial" size="3" color="#cdcdc0">Experience</font>
              </a></td>
            <td><a style="text-decoration: none;" href="#awards">
                <font face="arial" size="3" color="#cdcdc0">Awards</font>
              </a></td>
            <td><a style="text-decoration: none;" href="#contact">
                <font face="arial" size="3" color="#cdcdc0">Contact</font>
              </a></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- End Header -->

  <!-- Start Home  -->
  <table border="0" id="home" cellpadding="0" cellspacing="0" width="100%" bgcolor="#A6B1E1">
    <tr>
      <td>
        <table border="0" style="margin-top: 3rem;" cellpadding="15" cellspacing="0" width="50%" align="center">
          <tr>
            <td align="center" valign="left" height="90"><!--Valign digunakan untuk-->
              <h3>
                <!-- <marquee behavior="alternate" direction ="left" scrollamount="2">Membuat teks Bergerak -->
                <font face="times new roman" size="6" color="#ffffff">Hi, I'm Dimas Fadilah Akbar</font>
                <!-- </marquee> -->
              </h3>
              <h1>
                <!-- <marquee behavior="alternate" direction="right" scrollamount="2"> -->
                <font face="times new roman" size="6" color="#626d71">Informatics student at Sepuluh Nopember Institute
                  Of Technology</font>
              </h1>
              <!-- </marquee> -->
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- End Home -->

  <!-- Start About -->
  <table border="0" id="about" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F4EEFF">
    <tr>
      <td>
        <table border="0" cellpadding="10" cellspacing="0" width="85%" align="center">
          <!-- Heading -->
          <tr>
            <td align="center" height="100" valign="middle" colspan="2">
              <font face="arial" id="about" size="6" color="#626d71"> About </font>
              <hr width="70" color="#626d71">
            </td>
          </tr>
          <!-- Heading End-->
          <tr>
            <td width="35%" align="center"><img src="images/dimas.jpg" width="50%" align="center"></td>
            <td width="65%" valign="top">
              <table border="0" cellpadding="10" cellspacing="10" width="100%" align="center">
                <tr>
                  <td height="40">
                    <font face="times new roman" size="4" color="black">Hi, I'm Dimas Fadilah Akbar</font>
                  </td>
                </tr>
                <tr>
                  <td>
                    <font face="times new roman" size="4" color="black">
                      Informatic Engineering Student at Institut Teknologi Sepuluh Nopember
                    </font>
                  </td>
                </tr>
                <tr>
                  <td>
                    <p>Dimas Fadilah Akbar is a current Informatics Engineering student at Institut Teknologi Sepuluh
                      Nopember
                      Surabaya. Dimas is someone who is passionate, never gives up, likes challenges, and teamwork. He
                      believes that every hard work
                      done will pay off well.
                    </p>
                    <!-- <hr noshade=""> -->
                    <br>
                    <!-- <button type="button"><font size="4" face="arial">Download CV</font></button>&nbsp;&nbsp;&nbsp;&nbsp;
                  <button type="button"><font size="4" face="arial">Hire Me</font></button> -->
                  </td>
                </tr>
              </table>

            </td>
          </tr>
          <tr>
            <td height="60" colspan="2"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- End About -->

  <!-- Start Education -->
  <table border="0"  id="education" cellpadding="0" cellspacing="0" width="100%" bgcolor="#DCD6F7">
    <tr>
      <td align="center">
        <table border="1" width="80%" cellpadding="0" cellspacing="0">
          <tr>
            <td align="center" bgcolor="424874">
              <h3>Education</h3>
            </td>
          </tr>
          <tr>
            <td>
              <table border="0" width="100%" cellpadding="0" cellspacing="0" valign="middle" align="center" >
                <tr align="center">
                  <td width="33.33%">
                    <h4>Jenjang Pendidikan</h4>
                  </td>
                  <td width="33.33%">
                    <h4>Keterangan</h4>
                  </td>
                  <td>
                    <h4>Tahun</h4>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table border="0" width="100%" cellpadding="0" cellspacing="0" valign="left" align="left" bgcolor="F4EEFF">
                <tr>
                  <td width="33.33%">
                    <p>Sekolah Dasar</p>
                  </td>
                  <td width="33.33%">
                    <p>SD Negeri Tegalsari 1</p>
                  </td>
                  <td width="33.33%">
                    <p>2006-2012</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table border="0" width="100%" cellpadding="0" cellspacing="0" valign="left" align="left" bgcolor="F4EEFF">
                <tr>
                  <td width="33.33%">
                    <p>Sekolah Menengah Pertama</p>
                  </td>
                  <td width="33.33%">
                    <p>SMP Negeri Ambulu 1</p>
                  </td>
                  <td width="33.33%">
                    <p>2012-2015</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table border="0" width="100%" cellpadding="0" cellspacing="0" valign="left" align="left" bgcolor="F4EEFF">
                <tr>
                  <td width="33.33%">
                    <p>Sekolah Menengah Atas</p>
                  </td>
                  <td width="33.33%">
                    <p>SMA Negeri 1 Jember</p>
                  </td>
                  <td width="33.33%">
                    <p>2016-2018</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table border="0" width="100%" cellpadding="0" cellspacing="0" valign="left" align="left" bgcolor="F4EEFF">
                <tr>
                  <td width="33.33%">
                    <p>Perguruan Tinggi</p>
                  </td>
                  <td width="33.33%">
                    <p>Institut Teknologi Sepuluh Nopember</p>
                  </td>
                  <td width="33.33%">
                    <p>2019-Now</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
    </tr>
  </table>
  </td>
  </tr>
  </table>
  <!-- End Education -->

  <!-- start experience -->
  <table border="0" id="experience" cellpadding="0" cellspacing="50" id="experience" cellspacing="0" width="100%" bgcolor="#F4EEFF">
    <tr>
      <td>
        <table border="0" cellpadding="10" cellspacing="0" width="85%" align="center" valign="middle">
          <tr>
            <td align="center" height="160" valign="middle" colspan="3">
              <font face="arial" size="6" color="#626d71"> Experience </font>
              <hr width="70" color="#626d71">
            </td>
          </tr>
          <tr>
            <td>
            <td width="50%">
              <!-- <h1>test</h1> -->
              <table border="0" valign="left" align="center" width="85%" bgcolor="A6B1E1">
                <tr>
                  <td align="center">
                    <h3>Event Staff of Metallio | 2022</h3>
                  </td>
                </tr>
                <tr>
                  <td>
                    <h3>Responsibilities</h3>
                    <ul>
                      <li>Promoting Metallio to Senior Highschool Students</li>
                      <li>Connecting committee and participants</li>
                      <li>Conduct a survey of the place of the Metallio</li>
                      <li>Finding, preparing, and forming brand ambassadors</li>
                      <li>Conduct roadshows both online and offline</li>
                    </ul>
                  </td>
                </tr>
              </table>
            </td>
            <td width="50%">
              <!-- <h1>test</h1> -->
              <table border="0" valign="left" align="center" width="85%" bgcolor="A6B1E1">
                <tr>
                  <td align="center">
                    <h3>Programming Intern at IRIS Robotic Team | 2022</h3>
                  </td>
                </tr>
                <tr>
                  <td>
                    <h3>Responsibilities</h3>
                    <ul>
                      <li>Learn basic programming for C and C++</li>
                      <li>Learn basic of OpenCv using C++</li>
                      <li>Learn Object Oriented Programming using C++</li>
                      <li>Learn Robot Operating System</li>
                    </ul>
                  </td>
                </tr>
              </table>
            </td>
      </td>
    </tr>
    <tr>
      <td>
      <td width="50%">
        <!-- <h1>test</h1> -->
        <table border="0" valign="left" align="center" width="85%" bgcolor="A6B1E1">
          <tr>
            <td align="center">
              <h3>Programming Division at IRIS Robotic Team | 2022-now</h3>
            </td>
          </tr>
          <tr>
            <td>
              <h3>Responsibilities</h3>
              <ul>
                <p>Working as a Programmer at IRIS Robotics Team ITS, I have responsibilities to program and develop
                  IRIS robots for
                  National and International competitions especially KRI and RoboCup</p>
              </ul>
            </td>
          </tr>
        </table>
      </td>
      <td width="50%">
        <!-- <h1>test</h1> -->
        <table border="0" valign="left" align="center" width="85%" bgcolor="A6B1E1">
          <tr>
            <td align="center">
              <h3>ITS Robotic | 2023</h3>
            </td>
          </tr>
          <tr>
            <td>
              <h3>Responsibilities</h3>
              <ul>
                <li>Pemateri Pelatihan tingkat dasar robotika di bidang programming</li>
                <li>Penulis modul pelatihan tingkat dasar robotika</li>
              </ul>
            </td>
          </tr>
        </table>
      </td>
      </td>
    </tr>
  </table>
  </td>
  </tr>
  </table>
  <!-- end experience -->

  <!-- Start Awards -->
  <table border="0" id="awards" cellpadding="0" id="Services" cellspacing="0" align="center" width="100%" bgcolor="#DCD6F7">
    <tr>
      <td>
        <table border="0" cellpadding="15" cellspacing="0" width="85%" align="center">
          <!-- Heading -->
          <tr>
            <td align="center" height="160" valign="middle" colspan="3">
              <font face="arial" size="6" color="#626d71"> Honors and Awards </font>
              <hr width="70" color="#626d71">
            </td>
          </tr>
          <!-- Heading End-->
          <tr>
            <td width="33.33%" align="center" valign="top">
              <table border="1" cellpadding="15" cellspacing="0" width="100%" align="center">
                <tr>
                  <td align="center" valign="middle" bgcolor="#A6B1E1">
                    <font face="arial" size="6" color="#626d71">
                      <span class="fa fa-trophy "></span>
                    </font>
                    <br>
                    <br>
                    <font size="4" color="black">
                      <strong>
                        1st Place at Cooperation Challenge RoboCup Asia Pacific</strong>
                    </font>
                    <br>
                    <p>
                      <font face="arial" size="3" color="black">
                        Issued by MSL Organizing Committee · Nov 2022 | "Middle Size League" Category
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>

            <td width="33.33%" align="center" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td align="center" valign="middle" bgcolor="#A6B1E1">
                    <font size="6" color="#626d71"><span class="fa fa-trophy"></span></font>
                    <br>
                    <br>
                    <font size="4" color="black"><strong>
                        1st Place at Open Challenge RoboCup Asia Pacific
                      </strong></font>
                    <br>
                    <p>
                      <font face="arial" size="3" color="black">
                        Issued by Puspresnas, Kemendikbudristek RI · Jul 2022 | "KRSBI-B" Category
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>

            <td width="33.33%" align="center" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td align="center" valign="middle" bgcolor="#A6B1E1">
                    <font size="6" color="#626d71"><span class="fa fa-trophy"></span></font>
                    <br>
                    <br>
                    <font face="arial" size="4" color="black"><strong>
                        1st Place at Kontes Robot Indonesia 2022 Nasional
                      </strong></font>
                    <br>
                    <p>
                      <font size="3" face="arial" color="black">
                        Issued by MSL Organizing Committee · Nov 2022 | "Middle Size League" Category
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>

          </tr>
          <tr align="center">
            <td>
              <table border="1" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td align="center" bgcolor="#A6B1E1" valign="middle">
                    <font size="6" color="#626d71"><span class="fa fa-trophy"></span></font>
                    <br>
                    <br>
                    <font face="arial" size="4" color="black"><strong>
                        Best Strategy at Kontes Robot Indonesia 2022
                      </strong></font>
                    <br>
                    <p>
                      <font size="3" color="black" face="arial">
                        Issued by Puspresnas, Kemendikbudristek RI · Jul 2022 | "KRSBI-B" Category
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>
            <td>
              <table border="1" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td valign="middle" bgcolor="#A6B1E1" align="center">
                    <font size="6" color="#626d71"><span class="fa fa-trophy"></span></font>
                    <br>
                    <br>
                    <font size="4" face="arial" color="black"><strong>
                        1st Place at Kontes Robot Indonesia 2022 Region 2
                      </strong></font>
                    <br>
                    <p>
                      <font face="arial" size="3" color="black">
                        Issued by Puspresnas, Kemendikbudristek RI · Jul 2022 | "KRSBI-B" Category
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>
            <td>
              <table border="1" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td valign="middle" bgcolor="#A6B1E1" align="center">
                    <font size="6" color="#626d71"><span class="fa fa-trophy"></span></font>
                    <br>
                    <br>
                    <font size="4" face="arial" color="black"><strong>
                        3rd Place at RoboCup in Thailand
                      </strong></font>
                    <br>
                    <p>
                      <font face="arial" size="3" color="black">
                        Issued by MSL Organizing Committee · Nov 2022 | "Middle Size League" Category
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td height="60" colspan="3"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- End Services -->

  <!-- Start SKills -->
  <table border="0" id="skills" width="100%" cellpadding="0" cellspacing="0" bgcolor="#F4EEFF">
    <tr>
      <td>
        <table border="0" width="85%" cellpadding="15" cellspacing="0" align="center">
          <!-- Heading Start -->
          <tr>
            <td align="center" valign="middle" colspan="2">
              <font face="arial" size="6" color="#626d71">
                Skills
              </font>
              <hr width="70" color="#626d71">
            </td>
          </tr>
          <!-- Heading End-->
          <tr>
            <td width="50%" height="100%" valign="top">
              <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      HTML 5
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-brands fa-html5 fa-3x"></i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="1" width="0%" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td width="50%" height="100%" valign="top">
              <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      CSS 3
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-brands fa-css3 fa-3x"></i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="1" width="0" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="50%" height="100%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      Javascript
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-brands fa-square-js fa-3x"></i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="0" width="0%" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td width="50%" height="100%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      R
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-brands fa-r fa-3x"></i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="0" width="0%" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="50%" height="100%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      JAVA
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-brands fa-java fa-3x"></i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="0" width="0%" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td width="50%" height="100%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      OpenCv
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-solid fa-camera fa-3x"></i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="0" width="0%" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="50%" height="100%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      C++
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-brands fa-c fa-2x">++</i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="0" width="0%" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
            <td width="50%" height="100%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                  <td align="left" valign="top" height="40">
                    <font face="arial" size="5" color="#626d71">
                      Phyton
                    </font>
                  </td>
                  <td align="right" valign="top" height="40">
                    <i class="fa-brands fa-python fa-3x"></i>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" bgcolor="black" align="left">
                    <table border="0" width="0%" cellpadding="0" cellspacing="0" bgcolor="#626d71">
                      <tr>
                        <td height="10"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="2" height="60"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <!-- End Skilss -->

  <!-- Start Portofolio -->
  <table border="0" id="portofolio" width="100%" cellpadding="0" cellspacing="0" bgcolor="#A6B1E1">
    <tr>
      <td>
        <table border="0" width="85%" cellpadding="15" cellspacing="0" align="center">
          <!-- Start Heading -->
          <tr>
            <td colspan="3" align="center" valign="middle">
              <font face="arial" size="6" color="#626d71">
                Portofolio
              </font>
              <hr width="80" color="#626d71">
            </td>
          </tr>
          <!-- End Heading -->
          <tr>
            <td width="33.33%" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center" bgcolor="#F4EEFF">
                <tr>
                  <td align="center">
                    <font face="arial" size="5" color="black">Light Night Game</font>
                    <br>
                    <br>
                    <img src="images/logo.png" width="100%">
                    <br>
                    <br>
                    <font face="arial" size="3" color="#626d71">
                      <h3> <a href="https://github.com/dimss113/Light-Night"
                          style="text-decoration: none; color: black;"> source</a></h3>
                    </font>
                  </td>
                </tr>
              </table>
            </td>
            <td width="33.33%" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center" bgcolor="#F4EEFF">
                <tr>
                  <td align="center">
                    <font face="arial" size="5" color="black">Tindog</font>
                    <br>
                    <br>
                    <img src="images/tindog.jpeg" width="85%">
                    <br>
                    <br>
                    <font face="arial" size="3" color="#626d71">
                      <h3> <a href="https://dimss113.github.io/tindog_website/"
                          style="text-decoration: none; color: black;"> source</a></h3>
                    </font>
                  </td>
                </tr>
              </table>
            </td>
            <td width="33.33%" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center" bgcolor="#F4EEFF">
                <tr>
                  <td align="center">
                    <font face="arial" size="5" color="black">Simon</font>
                    <br>
                    <br>
                    <img src="images/simon.jpeg" width="80%">
                    <br>
                    <br>
                    <font face="arial" size="3" color="#626d71">
                      <h3> <a href="https://dimss113.github.io/simon/" style="text-decoration: none; color: black;">
                          source</a></h3>
                    </font>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td width="33.33%" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center" bgcolor="#F4EEFF">
                <tr>
                  <td align="center">
                    <font face="arial" size="5" color="black">drumkit</font>
                    <br>
                    <br>
                    <img src="images/drum.jpeg" width="75%">
                    <br>
                    <br>
                    <font face="arial" size="3" color="#626d71">
                      <h3> <a href="https://dimss113.github.io/drum_kit/" style="text-decoration: none; color: black;">
                          source</a></h3>
                    </font>
                  </td>
                </tr>
              </table>
            </td>
            <td width="33.33%" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center" bgcolor="#F4EEFF">
                <tr>
                  <td align="center">
                    <font face="arial" size="5" color="black">Random Dice</font>
                    <br>
                    <br>
                    <img src="images/dice.jpeg" width="80%">
                    <br>
                    <br>
                    <font face="arial" size="3" color="#626d71">
                      <h3> <a href="https://dimss113.github.io/diceu/" style="text-decoration: none; color: black;">
                          source</a></h3>
                    </font>
                  </td>
                </tr>
              </table>
            </td>
            <td width="33.33%" valign="top">
              <table border="1" width="100%" cellpadding="15" cellspacing="0" align="center" bgcolor="#F4EEFF">
                <tr>
                  <td align="center">
                    <font face="arial" size="3" color="black">Utilize Deep Learning (Yolo and OpenCV) and Fuzzy
                      Reasoning to Reduce Traffic</font>
                    <br>
                    <br>
                    <br>
                    <img src="images/object.webp" width="100%">
                    <br>
                    <br>
                    <br>
                    <font face="arial" size="3" color="#626d71">
                      <h3> <a
                          href="https://medium.com/@rulelulu833/utilize-deep-learning-yolo-and-opencv-and-fuzzy-reasoning-to-reduce-traffic-1fb27984c04e"
                          style="text-decoration: none; color: black;"> source</a></h3>
                    </font>

                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="3" height="60"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- End Portofolio -->


  <!-- Start Contact -->
  <table border="0" id="contact" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F4EEFF">
    <tr>
      <td>
        <table border="0" width="85%" cellpadding="15" cellspacing="0" align="center">
          <tr>
            <!-- Start Heading -->
            <td align="center" valign="middle">
              <font face="arial" size="6" color="#626d71">
                Contact
              </font>
              <hr width="70" color="#626d71">
            </td>
            <!-- End Heading -->
          </tr>
          <tr>
            <td align="center" valign="top">
              <table border="0" width="55%" cellpadding="20" cellspacing="0" align="center" bgcolor="#DCD6F7">
                <tr>
                  <td>
                    <table border="0" width="100%" cellpadding="15" cellspacing="0" align="center" bgcolor="#DCD6F7">
                      <tr>
                        <td width="30%">
                          <font face="arial" size="4" color="black">
                            Name
                          </font>
                        </td>
                        <td width="70%">
                          <input type="text" size="50">
                        </td>
                      </tr>
                      <tr width="30%">
                        <td>
                          <font face="arial" size="4" color="black">
                            Email
                          </font>
                        </td>
                        <td width="70%">
                          <input type="text" size="50">
                        </td>
                      </tr>
                      <tr>
                        <td width="30%">
                          <font face="arial" size="4" color="black">
                            Subject
                          </font>
                        </td>
                        <td width="70%">
                          <input type="text" size="50">
                        </td>
                      </tr>
                      <tr>
                        <td width="30%">
                          <font face="arial" size="4" color="black">
                            Message
                          </font>
                        </td>
                        <td width="70%">
                          <textarea cols="51" rows="4"></textarea>
                        </td>
                      </tr>
                      <tr>
                        <td width="30%">
                          &nbsp;
                        </td>
                        <td width="70%">
                          <button type="submit">
                            <font size="5" face="arial">
                              Send Message
                            </font>
                          </button>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td height="60"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- End Contact -->

  <!-- Start Footer -->
  <table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#DCD6F7">
    <tr>
      <td>
        <table border="0" width="85%" cellpadding="15" cellspacing="0" align="center">

          <tr>
            <td width="33.33%" valign="top">
              <table border="0" width="100%" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td align="center" valign="top">
                    <font color="#626d71" size="6">
                      <span class="fa fa-phone"></span>
                    </font>
                    <br /><br />
                    <font color="black" size="5" face="arial">
                      Phone No
                    </font>
                    <p>
                      <font color="#626d71" size="3" face="arial">
                        +62 82332584966
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>

            <td width="33.33%" valign="top">
              <table border="0" width="100%" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td align="center" valign="top">
                    <font color="#626d71" size="6">
                      <span class="fa fa-envelope"></span>
                    </font>
                    <br /><br />
                    <font color="#black" size="5" face="arial">
                      Email
                    </font>
                    <p>
                      <font color="#626d71" size="3" face="arial">
                        dimasfadilah20@gmail.com
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>

            <td width="33.33%" valign="top">
              <table border="0" width="100%" cellpadding="15" cellspacing="0" align="center">
                <tr>
                  <td align="center" valign="top">
                    <font color="#626d71" size="6">
                      <span class="fa fa-map-marker"></span>
                    </font>
                    <br /><br />
                    <font color="#black" size="5" face="arial">
                      Location
                    </font>
                    <p>
                      <font color="#626d71" size="3" face="arial">
                        Jawa Timur, Indonesia
                      </font>
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <hr noshade>
            </td>
          </tr>
          <tr>
            <td colspan="3" height="100" valign="top">
              <table border="0" width="30%" cellpadding="0" cellspacing="0" align="center">

                <tr>
                  <td width="25%" align="center">
                    <table border="0" width="50" cellpadding="0" cellspacing="0" align="center" height="50"
                      bgcolor="#DCD6F7">
                      <tr>
                        <td align="center" valign="middle">
                          <a href="">
                            <font size="5" color="#626d71">
                              <span class="fa-brands fa-facebook"></span>
                            </font>
                          </a>
                        </td>
                      </tr>

                    </table>
                  </td>
                  <td width="25%" align="center">
                    <table border="0" width="50" cellpadding="0" cellspacing="0" align="center" height="50"
                      bgcolor="#DCD6F7">
                      <tr>
                        <td align="center" valign="middle">
                          <a href="">
                            <font size="5" color="#626d71">
                              <span class="fa-brands fa-skype"></span>
                            </font>
                          </a>
                        </td>
                      </tr>

                    </table>
                  </td>
                  <td width="25%" align="center">
                    <table border="0" width="50" cellpadding="0" cellspacing="0" align="center" height="50"
                      bgcolor="#DCD6F7">
                      <tr>
                        <td align="center" valign="middle">
                          <a href="">
                            <font size="5" color="#626d71">
                              <span class="fa-brands fa-linkedin"></span>
                            </font>
                          </a>
                        </td>
                      </tr>

                    </table>
                  </td>
                  <td width="25%" align="center">
                    <table border="0" width="50" cellpadding="0" cellspacing="0" align="center" height="50"
                      bgcolor="#DCD6F7">
                      <tr>
                        <td align="center" valign="middle">
                          <a href="">
                            <font size="5" color="#626d71">
                              <span class="fa-brands fa-google-plus"></span>
                            </font>
                          </a>
                        </td>
                      </tr>

                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <!-- End Footer -->
</body>

</html>

berikut merupakan beberapa bagian dari hasil kode diatas:





Comments

Popular posts from this blog

PWEB Membuat Laporan PDF