
   <head>

      <title>CMS: Pharmatheka consult</title>

      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="resursi/login.css" />

      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

      <script>
         $(document).ready(function() {
            $("#logout").click(function() { var x = "<?php $_SESSION['LoggedIn'] = 0; ?>"; window.location.reload(); return false; });
            $("#tabulator a").click(function() { $("#tabulator a").removeClass("active"); $(this).addClass("active"); });
         });
      </script>

      <style>

* {box-sizing: border-box;}

body > div {
   position: fixed;
}

#logo {
   background-color: black;
   color: orangered;
   top: 0;
   left: 0;
   height: 50px;
   width: 300px;
}

#title {
   left: 301px;
   height: 51px;
   right: 0;
   top: 0;
   background-color: rgba(255, 255, 255, .3);
   color: orange;
}

#workarea {
   top: 51px;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(255, 255, 255, .5);
}
#tabulator {
   display: block;
   position: absolute;
   top: 0;
   left: 331px;
   /* right: 0; */
   height: 33px;
   margin: 0;
   padding: 0;
   /*
   border-right: solid 1px orange;
   border-left: solid 1px orange;
   */
   /* background-color: rgba(255, 255, 255, .5); */
}
.menu {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 301px;
   background-color: #28323C; /* rgba(255, 255, 255, .5); */
   
}
.module {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}
.content {
   position: absolute;
   top: 33px;
   left: 302px;
   bottom: 0;
   right: 0;
   background-color: rgba(255, 255, 255, .5);
}
#tabulator li {
   list-style-type: none;
   float: left;
   display: inline-block;
}

#tabulator li a {
   font-size: 12px;
   display: inline-block;
   padding: 0px 15px;
   border-top: solid 4px orange;
   height: 33px;
   line-height: 31px;
   min-width: 120px;
   text-align: center;
   text-decoration: none;
   color: black;
   border-right: solid 1px #b0b0b0;
   border-bottom: solid 1px #b0b0b0;
   background-color: #dfdfdf;
}

#tabulator li:not(:first-child) {
   border-left: solid 1px white;
}

#tabulator li a:hover { color: orangered; }

#tabulator li a.active {
   background-color: rgba(255, 255, 255, .5);
   color: orangered;
   border-bottom: none;
}
#logout {
   float: right;
}
      </style>

   </head>

   <body>

      <div id="logo">CMS</div>

      <div id="title">
         <div id="user">
            <div id="username">Prijavljeni korisnik: <strong><?php echo $_SESSION["name"]; ?></strong></div>
            <button id="logout" href="">LOGOUT</button>
         </div>
      </div>

      <div id="workarea">

         <div class="module">
            <div class="menu"></div>
            <div class="content"></div>
         </div>

         <ul id="tabulator">
            <li><a href="#" class="active">POČETNA</a></li>
            <li><a href="#">PROIZVODI</a></li>
            <li><a href="#">GALERIJA</a></li>
            <li><a href="#">WEB SADRŽAJ</a></li>
            <li><a href="#">PRIPREME</a></li>
         </ul>

      </div>

   </body>