Update homepage design

widget_alipins/homepage/templates/homepage/detail.html

@@ -7,16 +7,27 @@
 
 {% block title %}{{user.user_id}}{% endblock %}
 {% block content %}
+    <nav class="topnav">
+        <a href="{% url 'homepage:indexHomepage' %}">Homepage</a>
+        <a href="{% url 'announcements:indexAnnouncements' %}">Announcements</a>
+        <a href="{% url 'forum:indexForum' %}">Forum</a>
+        <a href="{% url 'assignments:indexAssignments' %}">Assignments</a>
+    </nav>
+
+    <div class="flex-container">
+        <div class="user-card">
             <h1>{{user.last_name}}, {{user.first_name}} {{user.middle_name}}</h1>
             <div>
                 {% if user.image %}
-            <p style="text-align:center"><img src = "{{ user.image.url }}"></p><br>
+                    <img class="user-image flex-item" src = "{{ user.image.url }}">
                 {% endif %}
-        <ul>
+                <ul class="flex-item">
                     <li>ID Number: {{user.id_num}}</li>
                     <li>Email Address: {{user.email}}</li>
                     <li>Department: {{user.department.dept_name}}</li>
                     <li>Home Unit: {{user.department.home_unit}}</li>
                 </ul>
             </div>
+        </div>
+    </div>
 {% endblock %}
\ No newline at end of file

widget_alipins/homepage/templates/homepage/index.html

@@ -16,7 +16,7 @@
 
     <h1 class="welcome">Welcome to Widget!</h1>
     <div class="users">
-        <h2>Widget Users:</h3>
+        <h2>Widget Users:</h2>
         {% if user_list %}
             <ol>
             {% for user in user_list %}

widget_alipins/static/homepage/style.css

 @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -31,7 +30,7 @@ body {
     height: 100%;
     width: 100%;
     font-family: "Inter", sans-serif;
-    color:#161616;
+    color:white;
     line-height: 2;
     background-image: url(https://dailystocktips.co.in/wp-content/uploads/2020/12/gradient-background-02.jpg);
     background-size: 100% 100%;
@@ -41,6 +40,7 @@ body {
     background-attachment: fixed;
     -ms-overflow-style: none;
     scrollbar-width: none;
+    background-color: #121212;
 }
 
 body::-webkit-scrollbar {
@@ -51,13 +51,50 @@ body::-webkit-scrollbar {
     display: block;
     margin: auto;
     width: 20%;
-    padding: 30px 40px;
+    padding: 30px 70px;
     margin-bottom: 100px;
     color: white;
     border-top: 1px solid white;
     border-bottom: 1px solid white;
 }
 
+.user-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    padding: 30px 50px;
+    color: white;
+    background-color: #121212;
+    border-radius: 25px;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+}
+
+.flex-container {
+    display: flex;
+    flex: 1 1 75%;
+    justify-content: center;
+    align-items: center;
+}
+
+.user-card > div {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 10px 0;
+}
+
+.flex-item {
+    flex: 1 1 auto;
+    margin: auto 0;
+}
+
+.user-image {
+    width: 25%;
+    margin: 0 20px;
+}
+
 h1 {
     display: block;
     font-size: 40px;
@@ -100,7 +137,7 @@ ol li:before {
     
     width: 20px; 
     height: 20px;
-    background: rgb(16, 16, 16);
+    background: #121212;
 }
 
 li {
@@ -142,9 +179,10 @@ a:hover {
 }
 
 h1.welcome {
-    font-size: 100px;
-    margin: 0px;
-    padding: 14vh 0 9vh 0;
+    font-size: 7vw;
+    margin: 14vh 0 9vh 0;
+    padding: 1vh 0 1vh 0;
     color: white;
-    font-family: "Arimo";
+    font-family: "Inter";
+    background-color: #121212;
 }
\ No newline at end of file