Login design

redhat-beyond · Jan 19, 2023 · 6f5b54c · 6f5b54c
1 parent 8bf4750
commit 6f5b54c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/projboard/static/css/login.css b/projboard/static/css/login.css
@@ -1,31 +1,28 @@
 :root {
     --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);
 }
-
-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 20px;
-}
-
-.login-form {
-    overflow: hidden;
-    position: relative;
-    max-width: 1000px;
-    margin: auto;
-    border-radius: 4px;
-    margin-bottom: 60px;
-    box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.1);
-}
-
+
 .content-container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 10vh;
 }
 
+.user_card {
+    width: 350px;
+    margin-top: 10px;
+    margin-bottom: auto;
+    background: #d6e0f3;
+    ;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding: 10px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.20);
+  }
+
 .highlight {
     position: relative;
 }
@@ -44,18 +41,27 @@ form {
     background-image: var(--gradient-primary);
 }
 
-.name_card{
-    color: black;
-    background-image: var(--gradient-primary);
-    font-size: 20px;
-    font-weight: bold;
-    text-decoration: underline;
+.form_container {
+    margin-top: 20px;
 }
-
-.card {
-    background-color: #e8eff9;
-    margin-top: 5px;
+
+.login_btn {
+    width: 100%;
+    background: var(--gradient-primary);
+    color: white;
+}
+
+.input-group-text {
+    background: var(--gradient-primary);
+    color: white;
+    border: 0;
+    border-radius: 0.25rem 0 0 0.25rem;
+}
+
+#messages{
+    background-color: lightgray;
+    color: darkslategray;
     padding: 10px;
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1),
-          0 6px 20px 0 rgba(0, 0, 0, 0.15);
+    margin-top: 10px;
 }
+
diff --git a/projboard/templates/login/login.html b/projboard/templates/login/login.html
@@ -1,14 +1,20 @@
 {% extends 'base.html' %}
 {% load static %}
-    <link rel="stylesheet" type="text/css" href="{% static 'css/authentication.css' %}">
-	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
 {% block content %}
+<haed>
+    <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}"/>
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
+</head>
+<div class="content-container">
+    <h1>
+      <!-- Green highlight effect -->
+      <span class="highlight">LOGIN</span>
+      <br />
+    </h1>
+</div>
     <div class="container h-100">
         <div class="d-flex justify-content-center h-100">
             <div class="user_card">
-                <div class="d-flex justify-content-center">
-                    <h1 id="form-title">LOGIN</h1>
-                </div>
                 <div class="d-flex justify-content-center form_container">
                     <form method="POST" action="">
                         {% csrf_token %}
@@ -35,7 +41,7 @@ <h1 id="form-title">LOGIN</h1>
                 </div>
                 <div class="mt-4">
                     <div class="d-flex justify-content-center links">
-                        Don't have an account? <a href="#" class="ml-2">Sign Up</a>
+                        Don't have an account? <a href="{% url 'signup' %}" class="ml-2">Sign Up</a>
                     </div>
 
                 </div>