<style>
 /* Full-width input fields */
 input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* Set a style for all buttons */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 20px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.akbarnimakir {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modalkir {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(8, 8, 8, 0.55); /* Fallback color */
  background-color: rgba(8, 8, 8, 0.55);; /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modalkir-content {
  background-color: #fefefe;
  margin: 5% auto auto auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
   display: block;
   float: none;
 }
 .cancelbtn {
   width: 100%;
 }
}
</style>
<div class="w3-top">
 <div class="w3-bar w3-theme-d2 w3-left-align w3-large">
  <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
  <a href=" <?php echo  $home; ?> " class="w3-bar-item w3-button w3-padding-large w3-theme-d4"><i class="fa fa-home w3-margin-right"></i></a>
  <a href=" <?php echo $home; ?>/library/index.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Kutubhona"><i class="fa fa-book-open"></i></a>
  <a href=" <?php echo $home; ?>/news/index.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Sayt yangliklari"><i class="fa fa-globe"></i></a>
  <a href=" <?php echo $home; ?>/download/index.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Yuklamalar"><i class="fa fa-download"></i></a>
  <a href=" <?php echo $home; ?>/users/index.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Foydalanuvchilar"><i class="fa fa-users"></i></a>
  <a href=" <?php echo $home; ?>/guestbook/index.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Mehmonhona"><i class="fa fa-comment-dots"></i></a>
  <a onclick="document.getElementById('id01').style.display='block'" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white" title="My Account"><i class="fa fa-sign-in-alt"></i></a>
  <a href="<?php echo $home; ?>/registration.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white" title="My Account"><i class="fa fa-user-plus"></i>
  </a>
</div>
<!-- Foydalanuvchilar kirishi uchun Kompyuterda ko`rinadi -->
<div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium w3-large">
 <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
 <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
 <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
 <a href="<?php echo $home ?>/registration.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-padding-large"><i class="fa fa-user-plus"></i> <?php echo $lng['registration']; ?></a>
 <a href="<?php echo $home ?>/login.<?php echo$akb_for;?>" class="w3-bar-item w3-button w3-padding-large"><i class="fa fa-sign-in-alt"></i> <?php echo $lng['login']; ?></a>
</div>
</div>
<div id="id01" class="modalkir" style="display: block;">
 <form class="modalkir-content animate" action="/login.<?php echo$akb_for; ?><?php echo ($id ? '?id=' . $id : ''); ?>" method="post">
  <div class="imgcontainer">
   <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
   <img src="<?php echo $home;?>/images/akbarico.jpg" " alt="Avatar" class="avatar" style="width: 210px; height: 210px; border: 2px solid #4D636F;">
 </div>
 <div class="akbarnimakir">
   <label for="uname"><b><?php echo $lng['login_name']; ?></b></label>
   <input type="text" placeholder="Enter Username" name="n" value="<?php echo htmlentities($user_login, ENT_QUOTES, 'UTF-8'); ?>" required>
   <label for="psw"><b><?php echo $lng['password']; ?></b></label>
   <input type="password" placeholder="Enter Password" name="p" value="<?php echo $user_pass;?>" required>
   <input type="hidden" name="mem" value="<?php echo $user_mem; ?>"/>
   <input type="submit" name="submit" value="<?php echo $lng['login']; ?>"/>
   <label>
    <input type="checkbox" checked="checked" name="mem" value="1"> <?php echo $lng['remember']; ?>
  </label>
</div>
<div class="akbarnimakir" style="background-color:#f1f1f1">
 <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
 <span class="psw"><a href="<?php echo $home; ?>/users/skl.<?php echo$akb_for;?>?continue"><?php echo $lng['forgotten_password'];?></a></span>
</div>
</form>
</div>
<div class="w3-container w3-content" style="max-width:1200px;margin-top:80px">    
  <!-- The Grid --> 
  <div class="w3-row">
    <!-- Left Column -->
    <div class="w3-col m3">
      <!-- Profile -->
      <div class="w3-card w3-round w3-white">
        <div class="w3-container">
         <h3 class="w3-center"><?php echo $lng['hi'];?> <?php echo $lng['guest']; ?>!</h3>
         </div>
     </div> <br>