2024-03-03 18:37:55 +01:00
|
|
|
<template>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="logBoxCenterer">
|
|
|
|
|
<div class='loginBox'>
|
|
|
|
|
<div class="form">
|
|
|
|
|
<h1 style="color:rgb(239,60,168); font-family: sans-serif;">SIGN IN</h1>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>USERNAME</p>
|
|
|
|
|
<input type="text" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<p>PASSWORD</p>
|
|
|
|
|
<input type="password" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="register">
|
|
|
|
|
<a>Register</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="inputBox">
|
|
|
|
|
<input type="submit" value="Login">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
2024-03-02 15:52:35 +01:00
|
|
|
|
|
|
|
|
.logBoxCenterer {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginBox {
|
|
|
|
|
background-color: rgb(24,24,24);
|
|
|
|
|
position : absolute;
|
|
|
|
|
width: 400px;
|
|
|
|
|
display:flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 40px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
box-shadow:0 5px 25px #000000;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.form {
|
|
|
|
|
position:relative;
|
|
|
|
|
width:100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items:center;
|
|
|
|
|
gap: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.inputBox input {
|
|
|
|
|
width:100%;
|
|
|
|
|
background:rgb(255, 0 255);
|
|
|
|
|
border: none;
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
padding-top:10px;
|
|
|
|
|
padding-bottom:10px;
|
|
|
|
|
outline:none;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
font-size:1.35em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inputBox p{
|
|
|
|
|
position:relative;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
font-family:sans-serif ;
|
|
|
|
|
color:rgb(239,60,168);
|
|
|
|
|
transition:0.5;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.register{
|
|
|
|
|
color:rgb(239,60,168);
|
|
|
|
|
width: 100%;
|
|
|
|
|
align-items:center;
|
|
|
|
|
display:flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type = "submit"] {
|
|
|
|
|
background-color: rgb(239,60,168);
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding:10px;
|
|
|
|
|
font-size:1.35em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type = "submit"]:active{
|
|
|
|
|
opacity:0.8;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2024-03-03 18:37:55 +01:00
|
|
|
</style>
|
