Update assignments page to also show images

widget_alipins/assignments/templates/assignments/detail.html

 {% extends 'base.html' %}
 {% load static %}
+
     {% block styles %}
         <link rel="stylesheet" type="text/css" href="{% static 'assignments/style.css' %}">   
     {% endblock %}
@@ -9,6 +10,9 @@
     <h1>{{assignment.course.course_code}} | {{assignment.course.course_title}} - {{assignment.course.section}}</h1>
     <div>
         <h2>Assignment: {{assignment.name}}</h2>
+        {% if assignment.assignment_image %}
+                <img src = "{{ assignment.assignment_image.url }}"><br>
+        {% endif %}
         <p>
             <span>Description:</span> {{assignment.description}}<br><br>
             <span>Passing Score:</span> <span class="passing">{{assignment.passing_score}}</span><br>

widget_alipins/assignments/templates/assignments/index.html

 {% extends 'base.html' %}
 {% load static %}
+
     {% block styles %}
         <link rel="stylesheet" type="text/css" href="{% static 'assignments/style.css' %}">   
     {% endblock %}
 
-
 {% block title %}Assignments{% endblock %}
 {% block content %}
     <h1>Assignments Per Course</h1>

widget_alipins/static/assignments/style.css

 body {
     font-family: sans-serif, Arial, Helvetica;
     color:#2d384e;
-    margin: 40px;
     line-height: 2;
 }
 
@@ -9,7 +8,7 @@ div {
     margin: auto;
     width: 50%;
     border: 3px solid rgb(194, 129, 7);
-    padding: 20px 40px 40px 80px;
+    padding: 30px 40px 40px 40px;
 }
 
 h1 {
@@ -20,6 +19,7 @@ h1 {
 
 h2 {
     font-size: 28px;
+    margin: 0px 0px 10px 0px;
 }
 
 li {
@@ -40,4 +40,9 @@ span.perfect {
 
 span.passing {
     color:#bb5959
+}
+
+img {
+    max-width: 100%;
+    height: auto;
 }
\ No newline at end of file