LoginPage.vue

<style>
    #gradient{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:linear-gradient(to left,darkblue,rgba(0,0,0,0));
    }

    #campus-image{
        position: fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;
    }

    #uconn-husky{
        position: absolute;
        top:0;
        left:70%;
        width:300px;
    }

    #login-menu{
        width: 80mm;
        position:fixed;
        left:75%;
        top:50%;
    }

    .login-label{
        color:white;
        font-size: 200%;
    }

    #login{
        margin-top: 10%;
        margin-left:15%;
        font-size: 150%;
    }
        
</style>

<template>
    <img id="campus-image" src="UCONN_CAMPUS_VIEW.png">

    <div id="gradient">
    </div>

    <img id="uconn-husky" src="UCONN_husky_logo.png">

    <div id="login-menu">
        <label class="login-label" for="username">Username:</label>
        <input id="username">
        <br>
        <label class="login-label" for="password">Password:</label>
        <input id="password" type="password">
        <br>
        <button id="login">Login</button>

    </div>
</template>