diff --git a/src/App.vue b/src/App.vue
index f46b1d20e476edafb483f92baa1aab89db04834c..ee0470a043e2b26b957c81fae36cfe80657fcbb4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,14 @@
<template>
- <html>
- <head>
- <title>
- webpage
- </title>
- </head>
- <body>
-
- <SignIn msg="Hello" />
- </body>
- </html>
+ <html>
+ <head>
+ <title>
+ Sign In
+ </title>
+ </head>
+ <body>
+ <SignIn/>
+ </body>
+ </html>
</template>
<script>
diff --git a/src/assets/fub-logo.png b/src/assets/fub-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..75728d2073f39d0486cdda92e48bbf2d9ccbe087
Binary files /dev/null and b/src/assets/fub-logo.png differ
diff --git a/src/assets/mail.png b/src/assets/mail.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c831f1faa1017764361628804d78f4280ee7e01
Binary files /dev/null and b/src/assets/mail.png differ
diff --git a/src/assets/natlab-logo.png b/src/assets/natlab-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..90ba91ace60597777df0c42a0d5bf0da5a5a1274
Binary files /dev/null and b/src/assets/natlab-logo.png differ
diff --git a/src/components/SignIn.vue b/src/components/SignIn.vue
index ab035f664dc21a624d8d0c4e947c3f1a39a8bed6..78ba0d780fd848d9159d2c47bf09488f348d42fd 100644
--- a/src/components/SignIn.vue
+++ b/src/components/SignIn.vue
@@ -1,36 +1,87 @@
<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
-
- </div>
+ <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
- }
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+html, body {
+ height: 100%;
+ margin: 0px;
+ float: left;
+ background-color: #f6f6f8;
}
-</script>
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-html{
- background-color: #f6f6f8;
+.form {
+ position: relative;
+ z-index: 1;
+ background: #ffffff;
+ max-width: 400px;
+ height: 100%;
+ margin: 0 auto 100px;
+ padding: 25px;
+ text-align: center;
+}
+.form img {
+ position: relative;
+ float: left;
+ width: 50%;
+ height: auto;
}
-h3 {
- margin: 40px 0 0;
+
+.login .login-header{
+ display: table;
+ padding: 50px;
+ margin: 0 auto;
+ text-align: center;
}
-ul {
- list-style-type: none;
- padding: 0;
+
+.form label {
+ font-family: "Roboto", sans-serif;
+ position: relative;
+ float: left;
+ font-size: 14px;
}
-li {
- display: inline-block;
- margin: 0 10px;
+
+.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;
}
-a {
- color: #42b983;
+
+.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>