<!DOCTYPE html>
 <html>
 <head>
<a href= "login_form.php">
    <img src="pictures/login.jpg" alt="tiger" width="100" height="100"></a>
 <style>

  body {
    margin:0 12;
    height: 100%;
    width: 100%;

    } ul {
   list-style-type: none;
    margin: 10px 4%;
    padding: 9px;
     overflow: hidden;
      background-color: #333;
      position-top: fixed;
      top: 0;
      width: 90%;

       }


       li {
        float: left;
         }
         li a {
          display: block;
           color: white;
            text-align: center;
             padding: 14px 80px;
              text-decoration: none;
               }
                li a:hover:not(.active) {
                  background-color: steelblue;
                   }

                   .active {
                    background-color: steelblue;
                     }

                      </style>
                      </head>
                      <body background="pictures/home.png" fixed background-position: center>


                       <ul>
                       <li>

                       <a href="home.php"> Home</a></li> <li>
                      </li> <li>

                      </li><li>
                    <a href="artworks.php">Artworks</a> </li> <li>
                       <a href="display_artist.php">Artist </a> </li> <li>


                       <a href="guidelines.php">Guidelines</a> </li> <li>
                       <a href="about_us.php">About us</a> </li> <li>

                     </li> <li> </li></ul>


                        </div>

                        </body>
                         </html>





