<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width-device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="https://icon2.cleanpng.com/20180329/ade/kisspng-computer-icons-university-symbol-school-college-5abd223abadd44.5278093615223445067654.jpg" type="image/x-icon">
    <title>Website With Login for Student and Teacher</title>
    <style>
     @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,300&family=Montserrat&display=swap');
*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
    font-family: 'poppins',sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url('https://p4.wallpaperbetter.com/wallpaper/542/50/545/simple-background-blue-simple-minimalism-wallpaper-preview.jpg') no-repeat;
    background-size:cover;
    background-position: center;

}
header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:20px 100px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    z-index:99;
}
.logo{
    font-size: 2em;
    color:#fff;
    user-select:none;
}

.navigation a{
    position: relative;
    font-size:1.1em;
    color:beige;
    text-decoration: dotted;
    font-weight: 200;
    margin-left: 3ch;
}
.navigation a::after{
    content:'';
    position: absolute;
    left: 0;
    bottom:-6px;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius:5px;
    transform-origin: right;
    transform:scaleX(0);
    transition: transform .5s;

}

.navigation a:hover::after{
    transform-origin:left;
    transform:scaleX(1);

}
.navigation .btnlogin-popup{
    width: 130px;
    height:50px;
    background:transparent;
    border: 2px solid #fff;
    outline:none;
    border-radius: 6px;
    cursor:pointer;
    font-size:1.1em;
    color: #fff;
    font-weight:500;
    margin: 40px;
    transition: .5s;

}
.butt1{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgba(112, 218, 218, 0.192);
    height: 40px;
    width: 500px;
    font-size:2.1em;
    border: 2px solid rgba(120, 42, 42, 0);
    border-radius: 15px;
    margin-top: -50%;
    opacity: 0.9;
}
.butt1:hover {opacity: 1;background: rgba(199, 199, 199, 0.31);}
.butt2{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgba(112, 218, 218, 0.192);
    height: 40px;
    width: 500px;
    font-size:2.1em;
    border: 2px solid rgba(255, 255, 255, 0);
    border-radius: 15px;
    margin-top: 5%;
    opacity: 0.9;
}
.butt2:hover {opacity: 1;background: rgba(199, 199, 199, 0.31);}
</style>
</head>
<body>
    <header>
        <h2 class="logo">A4</h2>
        <nav class="navigation">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>

        </nav>
    </header>
    <div class="btn-group">
        <div>
            <a href="/teacher/login">
        <button class="butt1" style="cursor: pointer;">Teacher</button></a>
        </div>
        <div>
            <a href="/student/login"> 
        <button class="butt2" style="cursor: pointer;">Student</button></a>     
        </div>
        
      </div> 
         
</body>

</html>