diff options
| -rw-r--r-- | login-page/README.md | 1 | ||||
| -rw-r--r-- | login-page/preview.gif | bin | 0 -> 251714 bytes | |||
| -rw-r--r-- | login-page/src/index.html | 28 | ||||
| -rw-r--r-- | login-page/src/styles.css | 130 |
4 files changed, 159 insertions, 0 deletions
diff --git a/login-page/README.md b/login-page/README.md new file mode 100644 index 0000000..ee66bcf --- /dev/null +++ b/login-page/README.md @@ -0,0 +1 @@ + diff --git a/login-page/preview.gif b/login-page/preview.gif Binary files differnew file mode 100644 index 0000000..8907a8c --- /dev/null +++ b/login-page/preview.gif diff --git a/login-page/src/index.html b/login-page/src/index.html new file mode 100644 index 0000000..51e896a --- /dev/null +++ b/login-page/src/index.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="stylesheet" href="styles.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>DevHive - Login</title> + </head> + <body> + <div id="content"> + <div id="title"> + Login + </div> + <hr> + <form> + <div class="input-selection"> + <input type="text" placeholder="Username" required> + <label>Username</label> + </div> + <div class="input-selection"> + <input type="password" placeholder="Password" required> + <label>Password</label> + </div> + <hr> + <button type="submit" value="Submit" id="submit-btn">Submit</button> + </form> + </div> + </body> +</html> diff --git a/login-page/src/styles.css b/login-page/src/styles.css new file mode 100644 index 0000000..87a1cfb --- /dev/null +++ b/login-page/src/styles.css @@ -0,0 +1,130 @@ +:root { + --focus-color: forestgreen; +} + +html, body { + height: 100%; + margin: 0; +} + +body { + font: 21px sans-serif; +} + +form { + width: 100%; +} + +#content { + height: 100%; + max-width: 20em; + margin-left: auto; + margin-right: auto; + + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +#title { + font-size: 2em; + font-weight: bold; +} + +#content input { + border: 0; + border-bottom: 1px solid grey; + padding: 0.4em; + padding-left: 0; + width: 100%; + box-sizing: border-box; + font-size: inherit; + margin-bottom: 0.5em; +} + +#content #submit-btn { + border: 2px solid black; + border-radius: 0.4em; + box-sizing: border-box; + width: 100%; + margin-top: 0.5em; + font-size: 0.8em; + padding: 0.3em; +} + +#content input[type=text]:nth-last-of-type(1) { + +} + +input:focus, button:focus { + outline: 0; +} + +.input-selection { + position: relative; + margin-top: 0.7em; +} + +.input-selection label { + transition: 0.2s; + width: inherit; + height: inherit; + position: absolute; + margin-top: 0.4em; + scale: 1em; + color: grey; + left: 0; +} + +.input-selection input::-webkit-input-placeholder { + opacity: 0; +} + +.input-selection:hover > label, +.input-selection > input:not(:placeholder-shown) + label, +.input-selection > input:focus + label { + font-size: 0.7em; + transition: 0.2s; + transform: translate(0, -1.2em); + color: var(--focus-color); +} + +.input-selection:hover > input::-webkit-input-placeholder, +.input-selection > input:focus::-webkit-input-placeholder { + opacity: 1; +} + +.input-selection:hover > input, +.input-selection > input:focus { + border-color: var(--focus-color) !important; + caret-color: var(--focus-color); + border-width: 2px !important; + margin-top: -1px !important; +} + + +#content hr { + width: 100%; + border: 1px solid black; + box-sizing: border-box; +} + +#submit-btn { + transition: 0.2s; + background-color: black; + color: white; + text-align: center; +} + +#submit-btn:hover { + cursor: pointer; + border-color: var(--focus-color) !important; + color: var(--focus-color); + background-color: white; +} + +#submit-btn:active { + transition: 0s; + transform: scale(0.9); +} |
