add legend to activities.md

Author: supernord

pages/activities.md

@@ -1,10 +1,81 @@
 ---
-title: Community Activities
+title: Community activities
 page_id: activities
 #type: resources
 toc: false
 ---
 
+<div class="legend-item-1">
+    <div class="legend-tile-content-1">
+        <p class="legend-title" style="text-align: center">Roadmap deliverable 1: An Australian Structural Biology community space capable of fostering collaboration and knowledge sharing</p>
+    </div>
+</div>
+<div class="legend-item-2">
+    <div class="legend-tile-content-2">
+        <p class="legend-title" style="text-align: center">Roadmap deliverable 2: A computational structural biology training program, developed in conjunction with the community</p>
+    </div>
+</div>
+<div class="legend-item-3">
+    <div class="legend-tile-content-3">
+        <p class="legend-title" style="text-align: center">Roadmap deliverable 3: A shared platform, or platforms, for computational structural biology</p>
+    </div>
+</div>
+<div class="legend-item-4">
+    <div class="legend-tile-content-4">
+        <p class="legend-title" style="text-align: center">Roadmap deliverable 4: Alignment, adoption and contribution to global best-practice efforts</p>
+    </div>
+</div>
+
+<style>
+
+.legend-item-1 {
+           border: 1px solid #e0e0e0;
+           border-radius: 12px;
+           width: 90%;
+           background: #a4c2f4ff;
+           display: flex;
+           flex-direction: column;
+           justify-content: space-between;
+  }
+
+.legend-item-2 {
+           border: 1px solid #e0e0e0;
+           border-radius: 12px;
+           width: 90%;
+           background: #6d9eebff;
+           display: flex;
+           flex-direction: column;
+           justify-content: space-between;
+  }
+
+.legend-item-3 {
+           border: 1px solid #e0e0e0;
+           border-radius: 12px;
+           width: 90%;
+           background: #1155ccff;
+           display: flex;
+           flex-direction: column;
+           justify-content: space-between;
+  }
+
+.legend-item-4 {
+           border: 1px solid #e0e0e0;
+           border-radius: 12px;
+           width: 90%;
+           background: #1c4587ff;
+           display: flex;
+           flex-direction: column;
+           justify-content: space-between;
+  }
+
+.legend-title {
+           color: #ffffff;
+           font-size: 0.8rem;
+           font-weight: 600;
+           margin-bottom: 0px;
+  }
+
+</style>
 
 ## In progress