loginpage updated

8ed0b79f · oetrb · 8efd86e6 · 8ed0b79f · 8ed0b79f · 8ed0b79f
Commit 8ed0b79f authored Sep 15, 2020 by oetrb
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,12 +2,11 @@
  <html>
  <head>
    <title>
-              webpage
+      Sign In
    </title>
  </head>
  <body>
-
-          <SignIn msg="Hello" />
+  <SignIn/>
  </body>
  </html>
 </template>

--- a/src/assets/fub-logo.png
+++ b/src/assets/fub-logo.png
--- a/src/assets/mail.png
+++ b/src/assets/mail.png
--- a/src/assets/natlab-logo.png
+++ b/src/assets/natlab-logo.png
--- a/src/components/SignIn.vue
+++ b/src/components/SignIn.vue
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-
+  <mdb-container>
+    <mdb-col md="8">
+      <div class="form">
+        <img src="../assets/fub-logo.png" alt="Freie Universität Berlin Logo">
+        <div class="login">
+          <div class="login-header">
+            <h1>Willkommen !</h1>
+            <p>Bitte melden Sie sich an.</p>
+          </div>
        </div>
+        <form class="login-form">
+          <input type="text" id="email" placeholder="E-Mail-Adresse"/>
+          <input type="password" placeholder="Passwort"/>
+          <button>Anmelden</button>
+        </form>
+      </div>
+    </mdb-col>
+  </mdb-container>
 </template>

-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-html{
+<style>
+html, body {
+  height: 100%;
+  margin: 0px;
+  float: left;
  background-color: #f6f6f8;
 }
-h3 {
-  margin: 40px 0 0;
+
+.form {
+  position: relative;
+  z-index: 1;
+  background: #ffffff;
+  max-width: 400px;
+  height: 100%;
+  margin: 0 auto 100px;
+  padding: 25px;
+  text-align: center;
 }
-ul {
-  list-style-type: none;
-  padding: 0;
+.form img {
+  position: relative;
+  float: left;
+  width: 50%;
+  height: auto;
 }
-li {
-  display: inline-block;
-  margin: 0 10px;
+
+.login .login-header{
+  display: table;
+  padding: 50px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.form label {
+  font-family: "Roboto", sans-serif;
+  position: relative;
+  float: left;
+  font-size: 14px;
 }
-a {
-  color: #42b983;
+
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  border-radius: 10px;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.form button {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background-color: #5c94fc;
+  width: 100%;
+  border: 0;
+  border-radius: 10px;
+  padding: 15px;
+  color: #ffffff;
+  font-size: 14px;
+  cursor: pointer;
 }
 </style>