rearrange announcement details order of elements

announcements/templates/announcements/announcement_detail.html

@@ -4,25 +4,26 @@
 {% block title %}Announcements{% endblock %}
 
 {% block styles %}
-<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+<link rel="stylesheet" href="{% static 'announcements.css' %}">
 {% endblock %}
 
 {% block content %}
-<h1>{{ announcement.announcement_title }}</h1>
-<h2>by {{ announcement.author.first_name }} {{ announcement.author.last_name }} dated {{ announcement.pub_date|date:'d/m/Y' }}</h2>
-<p>
-  {{ announcement.announcement_body }}
-</p>
+<h1 class="announcement-heading">{{ announcement.announcement_title }}</h1>
+<h2 class="announcement-subtitle">by {{ announcement.author.first_name }} {{ announcement.author.last_name }} dated {{ announcement.pub_date|date:'d/m/Y' }}</h2>
 
 {% load static %}
 {% if announcement.id == 1 %}
-  <img src="{% static 'announcement1.jpg' %}" alt="Leni Robredo">
+<img src="{% static 'announcement1.jpg' %}" alt="Leni Robredo">
 {% elif announcement.id == 2 %}
-  <img src="{% static 'announcement2.jpg' %}" alt="Lady Gaga in her meat dress">
+<img src="{% static 'announcement2.jpg' %}" alt="Lady Gaga in her meat dress">
 {% else %}
-  <img src="{% static 'announcement3.jpg' %}" alt="Taylor Swift handing an award to Bruno Mars">
+<img src="{% static 'announcement3.jpg' %}" alt="Taylor Swift handing an award to Bruno Mars">
 {% endif %}
 
+<p>
+  {{ announcement.announcement_body }}
+</p>
+
 {% for reaction in announcement.reactions.all %}
   <p>{{ reaction.reaction_name }} Reactions: {{ reaction.getTally }}</p>
 {% endfor %}