From 7fcd483592f79cde1f824b0d2cefd9727072be84 Mon Sep 17 00:00:00 2001 From: Grisu Date: Sat, 18 Jun 2022 15:27:38 +0200 Subject: [PATCH] added css for login page --- app/public/css/login.css | 122 +++++++++++++++++++++++++++++++++++++++ app/public/login.php | 23 ++++++-- 2 files changed, 139 insertions(+), 6 deletions(-) create mode 100644 app/public/css/login.css diff --git a/app/public/css/login.css b/app/public/css/login.css new file mode 100644 index 0000000..3e7c29b --- /dev/null +++ b/app/public/css/login.css @@ -0,0 +1,122 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; +} + +html { + background: url("../pictures/Gerätehaus.jpg") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +body{ + margin: 0; + padding: 0; + height: 100vh; + overflow: hidden; +} +.center{ + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + width: 400px; + background: white; + border-radius: 10px; + box-shadow: 10px 10px 15px rgba(0,0,0,0.05); +} +.center h1{ + text-align: center; + padding: 20px 0; + border-bottom: 1px solid silver; + font-weight: 400; + color: #002e5b; +} +.center form{ + padding: 0 40px; + box-sizing: border-box; +} +form .txt_field{ + position: relative; + border-bottom: 2px solid #adadad; + margin: 30px 0; +} +.txt_field input{ + width: 100%; + padding: 0 5px; + height: 40px; + font-size: 16px; + border: none; + background: none; + outline: none; +} +.txt_field label{ + position: absolute; + top: 50%; + left: 5px; + color: #adadad; + transform: translateY(-50%); + font-size: 16px; + pointer-events: none; + transition: .5s; +} +.txt_field span::before{ + content: ''; + position: absolute; + top: 40px; + left: 0; + width: 0%; + height: 2px; + background: #2691d9; + transition: .5s; +} +.txt_field input:focus ~ label, +.txt_field input:valid ~ label{ + top: -5px; + color: #2691d9; +} +.txt_field input:focus ~ span::before, +.txt_field input:valid ~ span::before{ + width: 100%; +} +.pass{ + margin: -5px 0 20px 5px; + color: #a6a6a6; + cursor: pointer; +} +.pass:hover{ + text-decoration: underline; +} +input[type="submit"]{ + width: 100%; + height: 50px; + border: 1px solid; + background: #2691d9; + border-radius: 25px; + font-size: 18px; + color: #e9f4fb; + font-weight: 700; + cursor: pointer; + outline: none; +} +input[type="submit"]:hover{ + border-color: #2691d9; + transition: .5s; +} +.signup_link{ + margin: 30px 0; + text-align: center; + font-size: 16px; + color: #666666; +} +.signup_link a{ + color: #2691d9; + text-decoration: none; +} +.signup_link a:hover{ + text-decoration: underline; +} diff --git a/app/public/login.php b/app/public/login.php index 00c57dc..60097d0 100644 --- a/app/public/login.php +++ b/app/public/login.php @@ -36,14 +36,25 @@ + Punktesystem-KSP -
-

-

- -

-
+
+

PUNKTESYSTEM-KSP

+
+
+ + + +
+
+ + + +
+

+
+
\ No newline at end of file