• Source 
    1. <?php  
    2.  defined('BASEPATH') OR exit('No direct script access allowed');  
    3.  ?><!DOCTYPE html>  
    4.  <html lang="en">  
    5.  <head>  
    6.    <meta charset="utf-8">  
    7.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
    8.    <title>Fany's Bio</title>  
    9.    <style type="text/css">  
    10.    body {  
    11.      margin-top:20px;  
    12.      color: #000;  
    13.      text-align: left;  
    14.      background-color: #e2e8ff;    
    15.    }  
    16.    .card {  
    17.      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  
    18.      max-width: 300px;  
    19.      margin: auto;  
    20.      text-align: center;  
    21.      font-family: arial;  
    22.      background-color:#ffffff;  
    23.    }  
    24.    .title {  
    25.      color: #000000;  
    26.      font-size: 18px;  
    27.    }  
    28.    button {  
    29.      border: none;  
    30.      outline: 0;  
    31.      display: inline-block;  
    32.      padding: 8px;  
    33.      color: white;  
    34.      background-color: #7FCDCD;  
    35.      text-align: center;  
    36.      cursor: pointer;  
    37.      width: 100%;  
    38.      font-size: 18px;  
    39.      color: white;  
    40.    }  
    41.    a {  
    42.      text-decoration: none;  
    43.      font-size: 22px;  
    44.      color: black;  
    45.    }  
    46.    button:hover, a:hover {  
    47.      opacity: 0.7;  
    48.    }  
    49.    </style>  
    50.  </head>  
    51.  <body>  
    52.    <h2 style="text-align:center; font-family:Arial;">User Profile Card - Tugas PBKK A</h2>  
    53.    <div class="card">  
    54.      <img src="https://media-exp1.licdn.com/dms/image/C5603AQEo8-dkXWakgg/profile-displayphoto-shrink_200_200/0/1631962536096?e=1660780800&v=beta&t=pWPUuFiWkvwsVGMnF6Erl4saWZ1oCLl0dIpa3xMli4A" alt="Fany Faizul" style="width:80%">  
    55.      <h1>Mohammad Fany Faizul Akbar</h1>  
    56.      <p class="title">Student at Informatics ITS</p>  
    57.      <p>Institut Teknologi Sepuluh Nopember Surabaya</p>  
    58.      <div style="margin: 24px 0;">  
    59.        <a href="https://www.instagram.com/fannyfaizul/"><i class="fa fa-instagram"></i></a>  
    60.        <a href="https://www.linkedin.com/in/mohammad-fany-faizul-akbar-316631169"><i class="fa fa-linkedin"></i></a>   
    61.      </div>  
    62.    </div>  
    63.       <div class="row rofile-sm">  
    64.        <div class="col-md-4">  
    65.         <div class="card">  
    66.          <div class="card-body">  
    67.           <div class="d-flex flex-column align-items-center text-center">  
    68.           </div>  
    69.          </div>  
    70.         </div>  
    71.        </div>  
    72.        <div class="col-md-8">  
    73.         <div class="card mb-3">  
    74.          <div class="card-body">  
    75.           <div class="row">  
    76.            <div class="col-sm-9"><h4 class="mb-0">Tugas PBKK A</h6></div>  
    77.           </div>  
    78.           <hr>  
    79.           <div class="row"><div class="col-sm-3"><h6 class="mb-0">Nama Lengkap:</h6></div><div class="col-sm-9 text-secondary">Mohammad Fany Faizul Akbar</div></div><hr>  
    80.           <div class="row"><div class="col-sm-3"><h6 class="mb-0">Tanggal Lahir:</h6></div><div class="col-sm-9 text-secondary">21 Mei 2003</div></div><hr>  
    81.           <div class="row"><div class="col-sm-3"><h6 class="mb-0">Email:</h6></div><div class="col-sm-9 text-secondary">faizulfanny@gmail.com</div></div><hr>  
    82.           <div class="row"><div class="col-sm-3"><h6 class="mb-0">Nomor Telepon:</h6></div><div class="col-sm-9 text-secondary">085331331156</div></div><hr>  
    83.           <div class="row"><div class="col-sm-3"><h6 class="mb-0">Alamat:</h6></div><div class="col-sm-9 text-secondary">Gebang Putih, Surabaya</div></div>  
    84.          </div>  
    85.         </div>  
    86.          </div>  
    87.         </div>  
    88.        </div>  
    89.       </div>  
    90.      </div>  
    91.  </body>  
    92.  </html>