Update design of form to add user

widget_alipins/homepage/templates/homepage/widgetuser_form.html

@@ -14,9 +14,11 @@
         <a href="{% url 'assignments:indexAssignments' %}">Assignments</a>
     </nav>
 
-    <form method="POST" enctype="multipart/form-data">
-        {% csrf_token %}
-        {{ form.as_p }}  
-        <input type="submit" value="Submit">
-    </form>
+    <div class="flex-container">
+        <form method="POST" enctype="multipart/form-data">
+            {% csrf_token %}
+            {{ form.as_p }}  
+            <input type="submit" value="Submit">
+        </form>
+    </div>
 {% endblock %}
\ No newline at end of file

widget_alipins/static/homepage/style.css

@@ -206,4 +206,53 @@ button {
 
 button:hover {
     color: #e1bb54;
+    cursor: pointer;
+}
+
+form {
+    display: flex;
+    flex-flow: nowrap column;
+    justify-content: center;
+    padding: 30px 50px;
+    color: white;
+    background-color: #121212;
+    border-radius: 25px;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+}
+
+form > p {
+    margin: 7px 0;
+}
+
+input, select {
+    display: inline-block;
+    border-radius: 5px;
+    padding: 7px;
+    border: 0;
+    font-family: 'Inter';
+}
+
+label {
+    float: left;
+    clear: left;
+    width: 100px;
+    text-align: right;
+    margin-right: 15px;
+}
+
+input[type="file"]{
+    padding: 0;
+    border-radius: 0;
+}
+
+input[type="Submit"]{
+    width: 100px;
+    background-color: #e1bb54;
+    margin: 30px auto 0 auto;
+}
+
+input[type="Submit"]:hover{
+    background-color: #d38a2a;
+    cursor: pointer;
 }
\ No newline at end of file