<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: "Segoe UI", sans-serif;
}

/* HEADER */
.user-header{
  width:100%;
  height:60px;

  display:flex;
  align-items:center;
  gap:15px;
  padding:0 18px;
  position:sticky;
  top:0;
  z-index:1000;
}

/* BACK BUTTON */
.back-btn{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#1e293b;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:0.3s;
}

.back-btn:hover{
  background:#309992;
}

/* LOGO */
.user-logo{
  display:flex;
  align-items:center;

}

.user-logo img{
  height:34px;
  width:auto;
}

/* MOBILE */
@media(max-width:480px){
  .user-header{
    padding:0 12px;
  }
  .user-logo img{
    height:30px;
  }
}
</style>
</head>
<body>

<header class="user-header">
  
  <!-- BACK -->
  <div class="back-btn" onclick="goBack()">
    <i class="fas fa-chevron-left"></i>
  </div>

  <!-- LOGO IMAGE -->
  <!--<div class="user-logo">-->
  <!--  <img src="../assets/images/Activ8-Hub-logo.png" alt="Logo"-->
  <!--       onerror="this.style.display='none'" style="ba">-->
  <!--</div>-->

</header>

<script>
function goBack(){
  window.history.back();
}
</script>

</body>
</html>
