Add navbar and design to homepage

widget_alipins/assignments/urls.py

@@ -4,6 +4,6 @@ from . import views
 
 app_name="assignments"
 urlpatterns = [
-    path('', views.index, name="index"),
+    path('', views.index, name="indexAssignments"),
     path('<int:assignment_id>/details', views.details, name="details")
 ]
\ No newline at end of file

widget_alipins/homepage/templates/homepage/index.html

@@ -7,17 +7,24 @@
 
 {% block title %}Homepage{% endblock %}
 {% block content %}
-    <h1>Welcome to Widget!</h1>
-        <div>
-            <h2>Widget Users:</h3>
-            {% if user_list %}
-                <ol>
-                {% for user in user_list %}
-                    <li><a href="{% url 'homepage:details' user.id%}">{{user.last_name}}, {{user.first_name}} {{user.middle_name}}</a></li>
-                {% endfor %}
-                </ol>
-            {% else %}
-                <p>There are no existing users.</p>
-            {% endif %}
-        </div>
+    <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>
+
+    <h1 class="welcome">Welcome to Widget!</h1>
+    <div class="users">
+        <h2>Widget Users:</h3>
+        {% if user_list %}
+            <ol>
+            {% for user in user_list %}
+                <li><a href="{% url 'homepage:details' user.id%}">{{user.last_name}}, {{user.first_name}} {{user.middle_name}}</a></li>
+            {% endfor %}
+            </ol>
+        {% else %}
+            <p>There are no existing users.</p>
+        {% endif %}
+    </div>
 {% endblock %}
\ No newline at end of file

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,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+html {
+    height: 100%;
+    width: 100%;
+}
+
 body {
-    font-family: sans-serif, Arial, Helvetica;
-    color:#035700;
+    height: 100%;
+    width: 100%;
+    font-family: "Inter", sans-serif;
+    color:#161616;
     line-height: 2;
+    background-image: url(https://dailystocktips.co.in/wp-content/uploads/2020/12/gradient-background-02.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+body::-webkit-scrollbar {
+    display: none;
 }
 
-div {
+.users {
+    display: block;
     margin: auto;
-    width: 50%;
-    border: 3px solid rgb(194, 7, 169);
-    padding: 30px 40px 40px 40px;
+    width: 20%;
+    padding: 30px 40px;
+    margin-bottom: 100px;
+    color: white;
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
 }
 
 h1 {
+    display: block;
     font-size: 40px;
     text-align: center;
-    text-decoration: underline;
 }
 
 h2 {
-    font-size: 28px;
+    font-size: 15px;
     margin: 0px 0px 10px 0px;
     text-align: center;
 }
@@ -27,24 +74,41 @@ ul {
     list-style-type: none;
 }
 
-li {
-    font-size: 20px;
+ol {
+    display: block;
+    padding: 0 0 0 25px;
+    counter-reset: numList;
 }
 
-p {
-    font-size: 20px;
+ol li {
+    width: 100%;
+    position: relative;
+    padding-left: 10px;
 }
 
-span {
-    font-weight: bold;
+ol li:before {
+    counter-increment: numList;
+    content: counter(numList);
+    
+    position: absolute;
+    left: -20px;
+    top: 5px;
+    
+    font: bold 15px 'Inter';
+    text-align: center;
+    color: #fff;
+    
+    width: 20px; 
+    height: 20px;
+    background: rgb(16, 16, 16);
 }
 
-span.perfect {
-    color: rgb(96, 189, 96);
+li {
+    font-size: 15px;
 }
 
-span.passing {
-    color:#bb5959
+p {
+    font-size: 15px;
 }
 
 img {
@@ -54,5 +118,33 @@ img {
 }
 
 a {
-    color:#891fa3;
+    color:#e1bb54;
+}
+
+a:hover {
+    color: white;
+}
+
+.topnav {
+    padding: 30px 30px;
+}
+
+.topnav a {
+    display: inline-block;
+    padding: 8px;
+    color:#f4eeee;
+    text-align: center;
+    text-decoration: none;
+}
+
+.topnav a:hover {
+    text-decoration: underline;
+}
+
+h1.welcome {
+    font-size: 100px;
+    margin: 0px;
+    padding: 14vh 0 9vh 0;
+    color: white;
+    font-family: "Arimo";
 }
\ No newline at end of file