• 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>