added styles to announcement details page

announcements/templates/announcements/announcement_detail.html

@@ -11,20 +11,22 @@
 <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>
 
+<p>
+  {{ announcement.announcement_body }}
+</p>
+
 {% load static %}
 {% if announcement.id == 1 %}
-<img src="{% static 'announcement1.jpg' %}" alt="Leni Robredo">
+<img src="{% static 'announcement1.jpg' %}" class="announcement-image" alt="Leni Robredo">
 {% elif announcement.id == 2 %}
-<img src="{% static 'announcement2.jpg' %}" alt="Lady Gaga in her meat dress">
+<img src="{% static 'announcement2.jpg' %}" class="announcement-image" 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' %}" class="announcement-image" 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 %}
+<div class="announcement-reactions">
+  {% for reaction in announcement.reactions.all %}
+    <p>{{ reaction.reaction_name }} Reactions: {{ reaction.getTally }}</p>
+  {% endfor %}
+</div>
 {% endblock %}
\ No newline at end of file

static/announcements.css

@@ -15,6 +15,44 @@
   font-weight: 500;
 }
 
+.announcement-subtitle {
+  text-align: center;
+  font-weight: 500;
+  font-size: 18px;
+}
+
 .announcement-list {
   margin-left: 24px;
+}
+
+.announcement-image {
+  width: 20%;
+}
+
+.announcement-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.announcement-reactions {
+  display: flex;
+  margin: 8px 0 0 0;
+  padding: 0;
+}
+
+.announcement-reactions p {
+  border: 1px solid #e6e6e6;
+  padding: 6px 12px;
+}
+
+.announcement-reactions p:nth-child(1) {
+  color: #118AB2;
+}
+
+.announcement-reactions p:nth-child(2) {
+  color: #FB898D;
+}
+
+.announcement-reactions p:last-child {
+  color: #B72A3F;
 }
\ No newline at end of file