document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8. body{
  9.     background-color: rgb(31, 31, 31);
  10. }
  11.  
  12. .judul{
  13.   display: flex;
  14.   justify-content: center;
  15.   margin-top: -20px;
  16.   margin-bottom: -50px;
  17.  
  18.  
  19. }
  20.  
  21. h1{
  22.     font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, sans-serif;
  23.     font-weight: bold;
  24.     color: rgb(255, 255, 255);
  25.     text-align: center;
  26.     margin-top: 0%;
  27.     display: flex;
  28.     justify-content: center;
  29. }
  30.  
  31. .container{
  32.     display: flex;
  33.     justify-content: center;
  34.     margin: auto;
  35.     width:fit-content;
  36.     height: fit-content;
  37.     border: 5px solid #1f1f1f;
  38.     background-color: aliceblue;
  39.     padding: 20px;
  40.     margin-top: 60px;
  41.     border-radius: 1rem;
  42.     flex-direction: column;
  43. }
  44.  
  45. td{
  46.   padding: 5px;
  47.   font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, sans-serif;
  48.     border: 2px solid black;
  49. }
  50.  
  51. .foto1{
  52.     height:305px;
  53.     width: 200px;
  54.     margin: auto;
  55.     margin-right: 30px;
  56.     object-fit: cover;
  57.     object-position: -50px 0;
  58. }
  59.  
  60. .satu{
  61.   display: flex;
  62.   justify-content: center;
  63.   flex-direction: column;
  64.   margin: auto;
  65.     background-color:  rgb(46, 59, 175);
  66.     margin-top: 50px;
  67.     padding:50px;
  68.     padding-left: 0%;
  69.     padding-right: 0%;
  70.     width: 70%;
  71.     border-radius: 1rem;
  72. }
  73.  
  74. tr{
  75.   background-color: rgb(214, 255, 235);
  76. }
  77. a{
  78.     display: flex;
  79.     justify-content: center;
  80.     margin: 50px;
  81. }
  82. button {
  83.   display: inline-block;
  84.   border-radius: 4px;
  85.   background-color: #f4511e;
  86.   border: none;
  87.   color: #FFFFFF;
  88.   text-align: center;
  89.   font-size: 18px;
  90.   padding: 10px;
  91.   width: 200px;
  92.   transition: all 0.5s;
  93.   cursor: pointer;
  94.   margin: 5px;
  95. }
  96.  
  97. button span {
  98.   cursor: pointer;
  99.   display: inline-block;
  100.   position: relative;
  101.   transition: 0.5s;
  102. }
  103.  
  104. button span:after {
  105.   content: \'\\2039 \\2039\';
  106.   position: absolute;
  107.   opacity: 0;
  108.   top: 0;
  109.   left: -20px;
  110.   transition: 0.5s;
  111. }
  112.  
  113. button:hover span {
  114.   padding-left: 25px;
  115. }
  116.  
  117. button:hover span:after {
  118.   opacity: 1;
  119.   left: 0;
  120. }
  121. th{
  122.     text-align: center;
  123. }
  124. #customers {
  125.   font-family: Arial, Helvetica, sans-serif;
  126.   border-collapse: collapse;
  127.   width: 700px;
  128. }
  129.  
  130. #customers td, #customers th {
  131.   border: 2px solid rgb(39, 39, 39);
  132.   padding: 8px;
  133. }
  134.  
  135. #customers tr:nth-child(even){background-color: #f2f2f2;}
  136.  
  137. #customers tr:hover {background-color: #ddd;}
  138.  
  139. #customers th {
  140.   padding-top: 12px;
  141.   padding-bottom: 12px;
  142.   text-align: left;
  143.   background-color: #41a051;
  144.   color: white;
  145. }
  146.     </style>
  147.     <title>Data Diri</title>
  148. </head>
  149. <body>
  150. <div class="satu">
  151.   <div class="judul"><h1>Riwayat Jenjang Pendidikan Formal</h1></div>
  152.    <div class="container">
  153.     <table id="customers">
  154.   <tr>
  155.     <th>Jenjang Pendidikan</th>
  156.     <th>Keterangan</th>
  157.     <th>Tahun</th>
  158.   </tr>
  159.   <tr>
  160.     <td>Sekolah Dasar</td>
  161.     <td>SD Al Hikmah Surabaya</td>
  162.     <td>2007-2013</td>
  163.   </tr>
  164.   <tr>
  165.     <td>Sekolah Menengah Pertama</td>
  166.     <td>SMPN 1 Surabaya</td>
  167.     <td>2013-2016</td>
  168.   </tr>
  169.   <tr>
  170.     <td>Sekolah menengah Atas</td>
  171.     <td>SMAN 5 Surabaya</td>
  172.     <td>2016-2019</td>
  173.   </tr>
  174.  
  175.   <tr>
  176.     <td>Perguruan Tinggi</td>
  177.     <td>Institut teknologi Sepuluh Nopember</td>
  178.     <td>2019-Sekarang</td>
  179.   </tr>
  180. </table>
  181.    </div></div>
  182.  
  183. <div class="satu">
  184.   <div class="judul"><h1>Informasi Umum</h1></div>
  185.    <div class="container">
  186.     <table>
  187.         <tr>
  188.           <td>Nomor telepon</td>
  189.           <td>081330550540</td>
  190.         </tr>
  191.         <tr>
  192.             <td>Email</td>
  193.             <td>mrayhanraffip@gmail.com</td>
  194.           </tr>
  195.           <tr>
  196.             <td>Hobi</td>
  197.             <td>Bermain game dan gitar</td>
  198.           </tr>
  199.           <tr>
  200.             <td>Cerita dari hobi saya</td>
  201.             <td>Diwaktu sengang biasanya aku bermain game bersama temanku seperti valorant atau game lainnya.
  202.                 <br>Lalu menjelang waktu tidur biasanya aku bermain gitar untuk membuat diriku mengantuk.</td>
  203.           </tr>
  204.       </table>
  205.      
  206.    </div></div>
  207. </body><a href="index.html"><button><span>kembali ke home</span></button></a>
  208. </html>
');