Merge branch 'master' into front-end

app/assets/stylesheets/application.scss

@@ -18,3 +18,4 @@
 body {
   background-color: $background;
 }
+@import "devise/index";

app/assets/stylesheets/components/_banner.scss

@@ -0,0 +1,24 @@
+.banner {
+  color: white;
+  text-align: center;
+  height: 100vh;
+  /* if you have a 70px navbar => height: calc(100vh - 70px); */
+  background-size: cover !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.banner h1 {
+  font-size: 60px;
+  font-weight: bold;
+  text-shadow: 0px 1px rgba(0, 0, 0, 0.2);
+  color: #F0FFFF;
+}
+.banner p {
+  font-size: 30px;
+  font-weight: lighter;
+  color: #F0FFFF;
+  opacity: 0.8;
+  margin-bottom: 20px;
+}
+

app/assets/stylesheets/components/_index.scss

@@ -1,3 +1,4 @@
 // Import your components CSS files here.
 @import "alert";
 @import "navbar";
+@import "banner";

app/assets/stylesheets/devise/_index.scss

@@ -0,0 +1 @@
+@import 'login';

app/assets/stylesheets/devise/_login.scss

@@ -0,0 +1,40 @@
+.login-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  background-image:
+    linear-gradient(
+      -225deg,
+        rgba(5,25,55,0.3) 0%,
+        rgba(68,73,101,0.3),
+        rgba(128,129,149,0.3),
+        rgba(191,190,200,0.3),
+        rgba(255,255,255,0.3)
+      50%),
+    url('https://unsplash.com/photos/jay5BqVyf5A');
+
+
+
+  .login-content {
+    position: relative;
+    top: -10vh;
+    padding: 50px;
+    background-color: white;
+    width: 25vw;
+    border-radius: 3px;
+    box-shadow: 1px 1px 10px rgba(0,0,0, 0.21);
+
+    h2 {
+      color: $primary;
+    }
+  }
+}
+
+.login {
+  // color: $primary;
+  width:100%;
+}