Designed the base, homepage and detail html

homepage/static/homepage.css

+@font-face {
+    font-family: 'Oxygen';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/oxygen/v15/2sDfZG1Wl4LcnbuKjk0m.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+.details {
+    color: black;
+    padding: 10px 20px 10px 20px;
+    text-decoration: none;
+    font-family: Oxygen;
+    width: fit-content;
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, #ffffff 50%, #000000 50%);
+    transition: background-position 0.3s ease-in-out, color 0.2s ease-in-out;
+}
+.details:hover {
+    background-color: black;
+    background-position: -100% 0;
+    color: white;
+}
\ No newline at end of file

homepage/templates/homepage/widgetuser_detail.html

 <!-- homepage/widgetuser_detail.html -->
 {% extends 'base.html' %}
+{% load static %}
 
 {% block title %}Homepage{% endblock %}
 
+{% block styles%}
+<link rel="stylesheet" href="{% static '/widgetuser_details.css' %}">
+{% endblock %}
+
 {% block content %}
-<p> {{object.last_name}}, {{object.first_name}} {{object.middle_name}} </p>
-<p> {{object.id_num}}</p>
-<p> {{object.email}}</p>
-<p> {{object.department.home_unit}}, {{object.department.dept_name}}</p>
+    <p> {{object.last_name}}, {{object.first_name}} {{object.middle_name}} </p>
+    <p> {{object.id_num}}</p>
+    <p> {{object.email}}</p>
+    <p> {{object.department.home_unit}}, {{object.department.dept_name}}</p>
 {% endblock %}
\ No newline at end of file

homepage/templates/index.html

 <!-- homepage/index.html -->
 {% extends 'base.html' %}
+{% load static %}
+
 {% block title %}Homepage{% endblock %}
+
 {% block styles %}
+<link rel="stylesheet" href="{% static '/homepage.css' %}">
 {% endblock %}
+
+{% block header %}
+Welcome to Widget!
+{% endblock %}
+
 {% block content %}
-<h1>Welcome to Widget!</h1>
-{% for user in all_widgetusers %}
-<a href="{{user.id}}/details">{{forloop.counter}}. {{user.last_name}}, {{user.first_name}} {{user.middle_name}}</a> </br>
-{% endfor %}
+    {% for user in all_widgetusers %}
+        <a class="details" href="{{user.id}}/details">{{forloop.counter}}. {{user.last_name}}, {{user.first_name}} {{user.middle_name}}</a> </br>
+    {% endfor %}
 {% endblock %}
\ No newline at end of file

widget_father_when_can_i_be_on_my_own_i_have_the_hello_world_to_see/settings.py

@@ -126,7 +126,6 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
 STATIC_URL = '/static/'
-STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field

widget_father_when_can_i_be_on_my_own_i_have_the_hello_world_to_see/static/base_style.css

+@font-face {
+    font-family: 'Khula';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/khula/v12/OpNPnoEOns3V7G-ljBvTpi8.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+    font-family: 'Comfortaa';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/comfortaa/v38/1Pt_g8LJRfWJmhDAuUsSQamb1W0lwk4S4Y_LDrMfIA.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
 nav:focus {
     outline:0 !important;
 }
@@ -13,14 +29,28 @@ ul {
 ul li {
     padding: 20px;
 }
-ul li a {
+.links {
     padding: 21px;
     text-decoration: none;
+    font-size: 15px;
     color: white;
+    font-family: Comfortaa;
+    transition: background-color 0.2s ease-in-out;
 }
-ul li a:hover {
-    background-color: #cc00ff
+.links:hover {
+    background-color: #410178;
 }
 body {
     margin: 0;
 }
+.content {
+    display: flex;
+    flex-direction: column;
+    margin: 16px 0 0 25px;
+}
+.header {
+    margin: 0;
+    padding: 0;
+    font-size: 50px;
+    font-family: Khula
+}
\ No newline at end of file

widget_father_when_can_i_be_on_my_own_i_have_the_hello_world_to_see/templates/base.html

@@ -4,19 +4,20 @@
 <html lang="en">
   <head>
     <title>{% block title %}{% endblock %}</title>
-        <link href="{% static 'base_style.css' %}" rel="stylesheet">
+    <link href="{% static 'base_style.css' %}" rel="stylesheet" />
     {% block styles %}{% endblock %}
   </head>
   <body>
     <nav>
       <ul>
-                <li><a href="/homepage">Homepage</a></li>
-                <li><a href="/assignments">Assignments</a></li>
-                <li><a href="/forum">Forum</a></li>
-                <li><a href="/announcements">Announcement Board</a></li>
+        <li><a class="links" href="/homepage">HOMEPAGE</a></li>
+        <li><a class="links" href="/assignments">ASSIGNMENTS</a></li>
+        <li><a class="links" href="/forum">FORUM</a></li>
+        <li><a class="links" href="/announcements">ANNOUNCEMENTS</a></li>
       </ul>
     </nav>
-        <div id="content">
+    <div class="content">
+      <h1 class="header">{% block header %}{% endblock %}</h1>
       {% block content %}{% endblock %}
     </div>
     {% block scripts %}{% endblock %}