<link rel="stylesheet" type="text/css" href="style.css">
<html>
<style>
body {   
background-image: url(images/bg.jpg);
background-position: center top;
margin-top:72;
margin-left:0;
background-size:cover;
text-align:center; 
background-repeat:no-repeat;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    height:70;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 25px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
    border-radius: 12px;
}

.button:hover {
    background-color: #4CAF50;
    color: white;
}


div.container{
 width: inherit;
 height: auto;
 margin-left: 100px;
margin-right: 100px;
 font-family: 'Raleway', sans-serif;
}
 div.main{
padding: 8px 50px 500px;
 border: 2px solid #b3dda1;
 border-radius: 0px;
 //background-color: white;
 //opacity:0.6;
background: rgba(255,255,255,0.5);
 //background-image: URL(bg.jpg);
 //background-repeat:no-repeat;
 //background-size:cover;
 font-family: raleway;
 float:center;
 margin-top:72;
}
</style>
<head>

</head>

<ul>
  <li><a href="index.php">Home</a></li>
  <li><a class="active" href="login.php">Login</a></li>
  <li><a href="reg.php">Registration</a></li>
  <li><a href="about.php">About</a></li>
</ul>
<body>
<div class="container">
<div class="main">
<h1 style="color:green";>Login</h1><hr> </br></br></br><br> 
<a href="wlogin.php"><button class="button">WARDEN</button></a>
<a href="alogin.php"><button class="button">ADMINISTRATOR</button></a> 
<a href="slogin.php"><button class="button">STUDENT</button></a>
</div>
</div>
<?php
include('footer.php');
?> 
</body>
<script type="text/javascript">
    alert("Admin [admin,admin]\nWarden [warden,warden]\nStudent [joice,joice]\n")
</script>
</html>