<link href="<?=base_url()?>asset/css/bootstrap.min.css" rel="stylesheet">
<link href="<?=base_url()?>asset/css/_style.css" rel="stylesheet">

<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>

<style type="text/css">
  body {
    background-image: url('<?= base_url() ?>asset/images/gymdumbels.jpg');
    background-size: cover;
    background-attachment: fixed;
  }
</style>

<section class="h-100 gradient-custom-2">
  <div class="container py-5 h-100">
    <div class="row d-flex justify-content-center">
      <div class="col col-lg-9 col-xl-8">
        <div class="card">
          <div class="rounded-top text-white d-flex flex-row" style="background-color: #000; height:200px;">
            <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
              <img src="<?=base_url()?>asset/images/don.jpg" alt="My Image" class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">    
            </div>
            <div class="ms-3" style="margin-top: 130px;">
              <h5>Ridzkhan Edzla Abdulatip</h5>
              <p>Admin</p>
            </div>
          </div>
          <div class="p-4 text-black bg-body-tertiary">
          
          </div>
          <div class="card-body p-4 text-black">
            <div class="mb-5 text-body">
              <p class="lead fw-normal mb-1">About</p>
              <div class="p-4 bg-body-tertiary">
                <p class="font-italic mb-1">Lives in Cotabato City</p>
                <p class="font-italic mb-1">Web Developer</p>
                <p class="font-italic mb-0">Mr.Olympia Gold Medalist</p>
                <p class="font-italic mb-0">Football Athlete</p>
              </div>
            
            <div class="d-flex justify-content-between align-items-center mb-4 text-body">
              <p class="lead fw-normal mb-0">Recent photos</p> 
            </div>
            <div class="row g-2">
              <div class="col mb-2">
                <img src="<?=base_url()?>asset/images/adult.jpg" alt="image 1" class="w-100 rounded-3">
              </div>
              <div class="col mb-2">
                <img src="<?=base_url()?>asset/images/abdulatip.jpg" alt="image 1" class="w-100 rounded-3">
              </div>
            </div>
            <div class="row g-2">
              <div class="col">
                <img src="<?=base_url()?>asset/images/football.jpg" alt="image 1" class="w-100 rounded-3">
              </div>
              <div class="col">
                <img src="<?=base_url()?>asset/images/training.jpg" alt="image 1" class="w-100 rounded-3">
              </div>
            </div>
            <div class="mt-3 text-end">
              <a href="<?= base_url() ?>visitor_portal" class="btn btn-secondary">Back</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>          
</section>

</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
<script src="assets/demo/chart-area-demo.js"></script>
<script src="assets/demo/chart-bar-demo.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>

<script src="js/datatables-simple-demo.js"></script>
<script src="<?=base_url()?>asset/js/jquery-3.2.1.slim.min.js"></script>
<script src="<?=base_url()?>asset/js/vendor/popper.min.js"></script>
<script src="<?=base_url()?>asset/js/bootstrap.min.js"></script>
<script src="<?=base_url()?>asset/js/vendor/holder.min.js"></script>
<script src="<?=base_url()?>asset/js/offcanvas.js"></script>
<script src='<?=base_url()?>assets/dist/index.global.js'></script>
