Adding login box
This commit is contained in:
parent
c83809b0dc
commit
771b0984f1
@ -33,6 +33,20 @@ html {
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: #a02d2a;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
padding: 7px 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
|
||||||
|
}
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
* *
|
* *
|
||||||
* Header *
|
* Header *
|
||||||
@ -151,6 +165,52 @@ html {
|
|||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#welcome_text {
|
||||||
|
font-family: 'ringbearer';
|
||||||
|
font-size: 16px;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login_container {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login_image {
|
||||||
|
height: 85px;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
border: 3px solid #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login_container_right input,
|
||||||
|
#login_container_right label {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login_container_left {
|
||||||
|
padding: 10px 0 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#login_container_right {
|
||||||
|
padding: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login_field {
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: 'Segoe UI';
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#button_login {
|
||||||
|
float: right;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
* *
|
* *
|
||||||
* Right Body Container *
|
* Right Body Container *
|
||||||
|
@ -38,7 +38,21 @@
|
|||||||
|
|
||||||
<div id="main_content">
|
<div id="main_content">
|
||||||
<div id="left_pane">
|
<div id="left_pane">
|
||||||
|
<span id="welcome_text">Welcome to WesterosCraft!</span>
|
||||||
|
<div id="login_container">
|
||||||
|
<div id="login_container_left">
|
||||||
|
<img src="https://minotar.net/avatar/TheAventine.png" id="login_image" />
|
||||||
|
</div>
|
||||||
|
<div id="login_container_right">
|
||||||
|
<label class="login_field">Username</label>
|
||||||
|
<input type="text" name="username"></input>
|
||||||
|
<label class="login_field">Password</label>
|
||||||
|
<input type="password" name="password"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="login_button_dock">
|
||||||
|
<button id="button_login">Login</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="right_pane">
|
<div id="right_pane">
|
||||||
<div class="toggle-btn-grp">
|
<div class="toggle-btn-grp">
|
||||||
|
Loading…
Reference in New Issue
Block a user