added more styles to templates

widget_Francoconuts/assignments/templates/assignments/assignment_add.html

 {% extends 'base.html' %}
 {% block content %}
-<h1>New Assignment</h1>
-<form method="POST">
-    {% csrf_token %}
-    {{form.as_p}}
-    <input type="submit" value="Save Assignment">
-</form>
-<a href="{% url 'assignments' %}"><button>Go back</button></a>
+<div class="assignment-form">
+    {% load static %}
+    <div class="headers">
+        <h1>new <span>assignment</span></h1>
+        <div class="header2">
+            <h2>New Assignment Form</h2>
+            <div class="lower-box"></div>
+        </div>
+    </div>
+
+    <div class="container">
+        <form method="POST">
+            {% csrf_token %}
+            <table border="1">
+                {{form.as_table}}
+                <tr>
+                    <td colspan="2"><input class="save-btn" type="submit" value="Save Assignment"></td>
+                </tr>
+            </table>
+            
+        </form>
+        <a class="go-back" href="{% url 'assignments' %}"><button>Go back</button></a>
+    </div>
+    <link rel="stylesheet" href="{% static 'assignments/css/assignment-add.css' %}">
+</div>
 {% endblock content %}

widget_Francoconuts/assignments/templates/assignments/assignment_detail.html

-<ul>
-    <ul>
-        <li>
-            {{object.course.course_code}} {{object.course.course_title}} {{object.course.section}}
-        </li>
-    </ul>
-    <li>{{object.name}}</li>
-    <li>{{object.description}}</li>
-    <li>{{object.max_points}}</li>
-    <li>{{object.passing_score}}</li>
+{% extends 'base.html' %}
+{% block content %}
+<div class="assignment">
     {% load static %}
-    <li><img src="{% static 'assignments/chesterC.png' %}" alt="image"></li>
+
+    <div class="headers">
+        <h1>{{object.course.course_code}} <span>{{object.course.course_title}}-{{object.course.section}}</span></h1>
+        <div class="header2">
+            <h2>Assignment: {{object.name}}</h2>
+            <div class="lower-box"></div>
+        </div>
+    </div>
+       
+    <div class="container">
+        <div class="details">
+            <h3>ASSIGNMENT DETAILS</h3>
+            <ul>
+                <li><span>Description:</span> {{object.description}}</li>
+                <li><span>Max points:</span> {{object.max_points}}</li>
+                <li><span>Passing score:</span> {{object.passing_score}}</li>
+                <li><span>Image:</span> <img src="{% static 'assignments/chesterC.png' %}" alt="image"></li>
+            </ul>
+        </div>
+        <a class="go-back" href="{% url 'assignments' %}"><button>Go back</button></a>
+    </div>
+    
+    
+    
 </ul>
-<a href="{% url 'assignments' %}"><button>Go back</button></a>
\ No newline at end of file
+</div>
+{% load static %}
+<link rel="stylesheet" href="{% static 'assignments/css/assignment-detail.css' %}">
+{% endblock content %}
\ No newline at end of file

widget_Francoconuts/assignments/templates/assignments/course_list.html

@@ -2,11 +2,10 @@
 {% block content %}
 <div class="assignments">
     <div class="headers">
-        <h1>assignments 
-            <span>per course</span>
+        <h1>assignments <span>per course</span>
         </h1>
         <div class="header2">
-            <h2>List of Courses</h2>
+            <h2>Courses</h2>
             <div class="lower-box"></div>
         </div>
     </div>
@@ -32,6 +31,6 @@
     </div>
 </div>
 {% load static %}
-<link rel="stylesheet" href="{% static 'assignments/css/styles.css' %}">
+<link rel="stylesheet" href="{% static 'assignments/css/course-list.css' %}">
 
 {% endblock content %}
\ No newline at end of file

widget_Francoconuts/static/assignments/css/assignment-add.css

+* {
+    padding: 0;
+    margin: 0;
+}
+
+.assignment-form{
+    font-family: Arial, Helvetica, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+body{
+    background-color: #A8BCDF;
+}
+
+.headers{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+    background-color: #23488B;
+}
+
+h1 span{
+    color: #E2C03E;
+}
+
+.lower-box{
+    background-color: #E0BD3F;
+    width:100%;
+    height: 1.5em;
+}
+
+.headers h2{
+    text-align: center;
+    background-color: #CEAC31;
+}
+
+.header2{
+    width: 95%;
+    border: 0.3em solid #E3A304;
+}
+
+
+.headers h1{
+    padding: 0.5em 0;
+    font-weight: normal;
+}
+
+.headers h2{
+    padding-top: 0.5em;
+    font-weight: normal;
+}
+
+.container{
+    background-color: white;
+    height: 100%;
+    padding: 0.5em;
+    border-left: 0.5em solid #A8BCDF;
+    border-right: 0.5em solid #A8BCDF;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+label{
+    color:#000080;
+}
+
+form{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+table{
+    width: max-content;
+    background-color: rgb(240, 240, 240);
+    margin: 1em 0;
+}
+
+.save-btn{
+    width: 100%;
+}
+
+.go-back{
+    margin: 0.4%;
+}
+
+.go-back button{
+    width: 20em;
+    height: 5em;
+}

widget_Francoconuts/static/assignments/css/assignment-detail.css

+* {
+    padding: 0;
+    margin: 0;
+}
+
+.assignment{
+    font-family: Arial, Helvetica, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+body{
+    background-color: #A8BCDF;
+}
+
+.headers{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+    background-color: #23488B;
+}
+
+h1 span{
+    color: #E2C03E;
+}
+
+.lower-box{
+    background-color: #E0BD3F;
+    width:100%;
+    height: 1.5em;
+}
+
+.headers h2{
+    text-align: center;
+    background-color: #CEAC31;
+}
+
+.header2{
+    width: 95%;
+    border: 0.3em solid #E3A304;
+}
+
+
+.headers h1{
+    padding: 0.5em 0;
+    font-weight: normal;
+}
+
+.headers h2{
+    padding-top: 0.5em;
+    font-weight: normal;
+}
+
+.container{
+    background-color: white;
+    height: 100%;
+    padding: 0.5em;
+    border-left: 0.5em solid #A8BCDF;
+    border-right: 0.5em solid #A8BCDF;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.details{
+    background-color: rgb(240, 240, 240);
+    color: #000080;
+    width: 100%;
+}
+
+.details h3{
+    background-color: rgb(168, 188, 223);
+    text-align: center;
+    padding: 1em 0;
+}
+
+.details li{
+    list-style: none;
+    margin-left: 2em;
+    margin-bottom: 0.5em;
+}
+
+.details ul{
+    padding: 1em;
+}
+
+.details span{
+    font-weight: bold;
+}
+
+img {
+    width: 8%;
+}
+
+.go-back{
+    margin: 0.4%;
+}
+
+.go-back button{
+    width: 20em;
+    height: 5em;
+}

widget_Francoconuts/static/css/base.css

+* {
+    padding: 0;
+    margin: 0;
+}
+
+.widget{
+    display: flex;
+    background: rgb(240, 240, 240);
+    align-items: center;
+}
+
+.widget h1{
+    margin: 0 1em;
+}
+
+.app-links{
+    flex-grow: 1;
+    display: flex;
+    justify-content: space-around;
+}
+
+.app-links li{
+    list-style: none;
+}
+
+.app-links li a{
+    text-decoration: none;
+    color: #000080;;
+}
+
+.app-links li a:hover{
+    text-decoration: underline;
+}
+

widget_Francoconuts/templates/base.html

@@ -4,7 +4,18 @@
     <title>Francoconuts Widget</title>
 </head>
 <body>
-    <h1>WIDGET</h1>
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'css/base.css' %}">
+    <div class="widget">
+        <h1>WIDGET</h1>
+        <ul class="app-links">
+            <li><a href="{% url 'homepage:widgetuser-list' %}">Homepage</a></li>
+            <li><a href="{% url 'announcements:announcement-list' %}">Announcement Board</a></li>
+            <li><a href="{% url 'forum:forum' %}">Forum</a></li>
+            <li><a href="{% url 'assignments' %}">Assignments</a></li>
+        </ul>
+
+    </div>
     <hr></hr>
     {% block content %}
     {% endblock content %}