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.   position: fixed;
  16.   margin-top: -20px;
  17.  
  18. }
  19.  
  20. h1{
  21.     font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, sans-serif;
  22.     font-weight: bold;
  23.     color: rgb(255, 255, 255);
  24.     text-align: center;
  25.     margin-top: 0%;
  26.     display: flex;
  27.     justify-content: center;
  28. }
  29.  
  30. .container{
  31.     display: flex;
  32.     justify-content: center;
  33.     margin: auto;
  34.     width:fit-content;
  35.     height: fit-content;
  36.     border: 5px solid #1f1f1f;
  37.     background-color: aliceblue;
  38.     padding: 20px;
  39.     margin-top: 60px;
  40.     border-radius: 1rem;
  41. }
  42.  
  43. td{
  44.   padding: 5px;
  45.   font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, sans-serif;
  46.     border: 2px solid black;
  47. }
  48.  
  49. .foto1{
  50.     height:305px;
  51.     width: 200px;
  52.     margin: auto;
  53.     margin-right: 20px;
  54.     object-fit: cover;
  55. }
  56. .satu{
  57.   display: flex;
  58.   justify-content: center;
  59.   margin: auto;
  60.     background-color:  rgb(46, 59, 175);
  61.     margin-top: 50px;
  62.     padding:50px;
  63.     padding-left: 0%;
  64.     padding-right: 0%;
  65.     width: 70%;
  66.     border-radius: 1rem;
  67. }
  68.  
  69. tr{
  70.   background-color: rgb(214, 255, 235);
  71. }
  72.  
  73. button {
  74.   display: inline-block;
  75.   border-radius: 4px;
  76.   background-color: #f4511e;
  77.   border: none;
  78.   color: #FFFFFF;
  79.   text-align: center;
  80.   font-size: 18px;
  81.   padding: 10px;
  82.   width: 200px;
  83.   transition: all 0.5s;
  84.   cursor: pointer;
  85.   margin: 5px;
  86. }
  87.  
  88. button span {
  89.   cursor: pointer;
  90.   display: inline-block;
  91.   position: relative;
  92.   transition: 0.5s;
  93. }
  94.  
  95. button span:after {
  96.   content: \'\\203A\\203A\';
  97.   position: absolute;
  98.   opacity: 0;
  99.   top: 0;
  100.   right: -20px;
  101.   transition: 0.5s;
  102. }
  103.  
  104. button:hover span {
  105.   padding-right: 25px;
  106. }
  107.  
  108. button:hover span:after {
  109.   opacity: 1;
  110.   right: 0;
  111. }
  112.     </style>
  113.     <title>Data Diri</title>
  114. </head>
  115. <body>
  116. <div class="satu">
  117.   <div class="judul"><h1>BIODATA</h1></div>
  118.    <div class="container">
  119.     <img src="./profil2.jpg" class="foto1" style="border: 5px solid #1f1f1f; border-radius: 1rem;">
  120.     <table>
  121.         <tr>
  122.           <td>Nama Lengkap</td>
  123.           <td>Muhammad Rayhan Raffi Pratama</td>
  124.         </tr>
  125.         <tr>
  126.             <td>Tempat tanggal lahir</td>
  127.             <td>Surabaya, 18 Desember 2000</td>
  128.           </tr>
  129.           <tr>
  130.             <td>Jenis Kelamin</td>
  131.             <td>Laki Laki</td>
  132.           </tr>
  133.           <tr>
  134.             <td>Agama</td>
  135.             <td>Islam</td>
  136.           </tr>
  137.           <tr>
  138.             <td>Alamat</td>
  139.             <td>Wonosari Wetan Baru Sekolahan 31</td>
  140.           </tr>
  141.           <tr>
  142.             <td>Status</td>
  143.             <td>Belum menikah</td>
  144.           </tr>
  145.           <tr>
  146.             <td>Pekerjaan</td>
  147.             <td>Mahasiswa</td>
  148.           </tr>
  149.           <tr>
  150.             <td>Kewarganegaraan</td>
  151.             <td>Indonesia</td>
  152.           </tr>
  153.           <tr>
  154.             <td>Riwayat & hobi</td>
  155.           <td>Ingin tau riwayat dan hobiku? <a href="page2.html"><button><span>klik disini</span></button></a></td>
  156.         </tr>
  157.     </table>
  158.  </div></div>
  159. </body>
  160. </html>
');