Add static image, remove unnecessary lines

WidgetFEKK/Announcements/static/Announcements/styles.css

@@ -10,6 +10,10 @@ h1{
     text-align: center;
 }
 
+#back{
+    padding: 2rem 0;
+}
+
 #title{
     margin: 20px 0 10px 0;
 }
@@ -19,7 +23,6 @@ h1{
     text-align: center;
 }
 
-
 .reactions{
     background-color:gainsboro;
     padding: 5px;

WidgetFEKK/Announcements/templates/announcements/details.html

@@ -2,7 +2,6 @@
 {% load static %}
 
 {% block styles %}
-<link rel="stylesheet" type="text/css" href="{% static 'Announcements/index.css' %}">
 <link rel="stylesheet" type="text/css" href="{% static 'Announcements/styles.css' %}">
 {% endblock %}
 
@@ -13,15 +12,17 @@
 {% block content %}
 <article>
     <div id="back"><a href="/announcements">Back to all announcements</a></div>
+    <div align="center"><img id="header" src="{% static 'Announcements/header.png' %}" alt="a header"></div>
     <h1 id="title">{{ announcement.announcement_title}}</h1>
     <h4 id="subtitle">by {{ announcement.author.first_name}} {{ announcement.author.last_name }}, {{ announcement.pub_date|date:"d/m/Y" }}</h4>
 
     <p class="body">{{ announcement.announcement_body }}</p>
     
-    <p class="reactions">
-        {% for reactions in reaction_sorted %}
+    <div id="reactions-container" align="center">
+        <p class="reactions">{% for reactions in reaction_sorted %}
             <strong>{{ reactions.reaction_name }}</strong>: {{ reactions.tally }}
             {% endfor %}
         </p>
+    </div>
 </article>
 {% endblock %}
\ No newline at end of file