<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Synrok - Mobile HTML Template</title>

  <!-- Plugins -->
  <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/metisMenu.min.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/metismenu/mm-vertical.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/slick/slick.css">
  <link rel="stylesheet" type="text/css" href="assets/plugins/slick/slick-theme.css">

  <!--CSS Files-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../../css2-1?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../npm/bootstrap-icons%401.8.3/font/bootstrap-icons-1.css">
  <link href="assets/css/style.css" rel="stylesheet">
  <link href="assets/css/dark-theme.css" rel="stylesheet">

  <style>
    input:focus {
      outline: none !important;
      box-shadow: none !important;
    }
  </style>
  <?php
  include('headerlink.php');
  ?>
</head>

<body>

  <!--page loader-->
  <div class="loader-wrapper">
    <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
      <div class="spinner-border text-white" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
  </div>
  <!--end loader-->

  <!--start wrapper-->
  <div class="wrapper">

    <!--start to header-->
    <header class="top-header background fixed-top border-bottom d-flex align-items-center">
      <nav class="navbar navbar-expand w-100 p-0 gap-3 align-items-center">
        <div class="nav-button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSidenav"><a href="javascript:;"><i class="bi bi-list text-white"></i></a></div>
        <div class="brand-logo ">
          <h1 style="font-size: 20px;  margin: 2px;" class="text-white">USER PROFILE</h1>
        </div>
        <form class="searchbar">
          <div class="position-absolute top-50 translate-middle-y search-icon start-0"><i class="bi bi-search"></i></div>
          <input class="form-control px-5" type="text" placeholder="Search for anything">
          <div class="position-absolute top-50 translate-middle-y end-0 search-close-icon"><i class="bi bi-x-lg"></i></div>
        </form>
       
      </nav>
    </header>
    <!--end to header-->

    <!--start to page content-->
    <div class="page-content">

      <div class="profile-img mb-3 border p-3 text-center rounded-3 bg-light">
        <img src="assets/images/avatars/01.webp" width="90" height="90" class="rounded-circle" alt="">
        <h6 class="mb-0 fw-bold mt-3 text-dark">Michael Clarke</h6>
      </div>

      <div class="card rounded-3 border-0 bg-transparent">
        <div class="card-body p-0">
          <form>
            <div class="row row-cols-1 g-3">
              <div class="col">
                <div class="form-floating">
                  <input type="text" class="form-control rounded-3" id="floatingInputName" placeholder="Name" value="jhon Deo">
                  <label for="floatingInputName">Name</label>
                </div>
              </div>
              
              <div class="col">
                <div class="form-floating">
                  <input type="text" class="form-control rounded-3" id="floatingInputEmail" placeholder="Email" value="name@example.com">
                  <label for="floatingInputEmail">Email</label>
                </div>
              </div>
              
             
              <div class="col">
                <div class="form-floating">
                  <input type="text" class="form-control rounded-3" id="floatingInputLocation" placeholder="Location" value="United Kingdom">
                  <label for="floatingInputLocation">Password</label>
                </div>
              </div>

              <div class="col">
                <div class="form-floating">
                  <input type="text" class="form-control rounded-3" id="floatingInputLocation" placeholder="Location" value="United Kingdom">
                  <label for="floatingInputLocation">Answer</label>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>

    </div>
    <!--end to page content-->

    <!--start to footer-->
    <footer class="page-footer fixed-bottom border-top d-flex align-items-center justify-content-center gap-3">
      <a href="#OrderCancleModal" data-bs-toggle="modal" class="btn btn-ecomm background text-white rounded-3 flex-fill">Save</a>
      <div class="vr"></div>
      <a href="javascript:;" class="btn btn-ecomm background text-white rounded-3 flex-fill">Cancel</a>
    </footer>
    <!--end to footer-->

    <!--start sidenav-->
    <?php
    include('sidebar.php');
    ?>
    <!--end sidenav-->


  </div>
  <!--end wrapper-->


  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/show-hide-password.js"></script>
  <script src="assets/js/loader.js"></script>

</body>

</html>