added style to assignment list view

widget_Francoconuts/assignments/templates/assignments/course_list.html

 {% extends 'base.html' %}
 {% block content %}
-<h1>Assignments Per Course </h1>
-<label>List of Courses:</label>
-<ul>
-    {% for course in object_list %}
-    <li>{{course.course_code}} {{course.course_title}} {{course.section}}</li>
-    <ul>
-        {% for assignment in course.assignment.all %}
-        <li>
-            <a href="{% url 'assignment-detail' assignment.id %}">{{assignment}}</a> 
-        </li>    
-        {% endfor %}
-    </ul>
-    {% endfor %}
-    <a href="{% url 'assignment-add' %}"><button>New Assignment</button></a>
-</ul>
+<div class="assignments">
+    <div class="headers">
+        <h1>assignments 
+            <span>per course</span>
+        </h1>
+        <div class="header2">
+            <h2>List of Courses</h2>
+            <div class="lower-box"></div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="course-list">
+            {% for course in object_list %}
+            <div class="course">
+                <div class="course-header">
+                    <h3>{{course.course_code}} {{course.course_title}} {{course.section}}</h3>
+                </div>
+                <ul>
+                    {% for assignment in course.assignment.all %}
+                    <li>
+                        <a href="{% url 'assignment-detail' assignment.id %}">{{assignment}}</a> 
+                    </li>    
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endfor %}
+        </div>
+            <a class="new-assign" href="{% url 'assignment-add' %}"><button>New Assignment</button></a>
+    </div>
+</div>
+{% load static %}
+<link rel="stylesheet" href="{% static 'assignments/css/styles.css' %}">
+
 {% endblock content %}
\ No newline at end of file

widget_Francoconuts/static/assignments/css/styles.css

+* {
+    padding:0;
+    margin:0;
+}
+
+.assignments{
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+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 0.5em 0.5em 0.5em;
+    border-left: 0.5em solid #A8BCDF;
+    border-right: 0.5em solid #A8BCDF;
+}
+
+.course-list{
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.course{
+    /* border: 1px solid; */
+    background-color: rgb(240, 240, 240);
+    width: 24%;
+    margin: 0.4%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+
+.course h3{
+    padding: 1em 0;
+    /* border-bottom: 1px solid; */
+    width: 100%;
+    text-align: center;
+    background-color: rgb(168, 188, 223);
+    color: #000080;
+}
+
+.course ul{
+    padding: 1em;
+}
+
+.course ul li{
+    /* list-style: none; */
+    margin-left: 2em;
+    margin-bottom: 0.5em;
+}
+
+
+.course ul li a{
+    text-decoration: none;
+    color: #000080;
+}
+
+.course ul li a:hover{
+    text-decoration: underline;
+}
+
+.new-assign{
+    margin: 0.4%;
+}
+
+.new-assign button{
+    width: 20em;
+    height: 5em;
+}
+