c0.1.130 Awards Redesign

static/style.css

@@ -569,6 +569,21 @@ b {
   }
 }
 
+/* --------------------------------------------------------------------------- */
+/* Awards Page */
+
+.awards-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-radius: 10px;
+  border-width: 2px;
+  padding: 5px;
+  padding-bottom: 0px;
+}
+
 /* --------------------------------------------------------------------------- */
 /* Deep blue waves */
 

wiki/pages/awards.html

@@ -7,20 +7,34 @@
 <img src="https://static.igem.wiki/teams/4200/wiki/home/igem-team-pic.jpeg" alt="iGEM Team Pic"
     class="reveal-on-scroll">
 
-<div class="row">
-    <div class="col reveal-on-scroll">
-        <p class="display-6">Gold medal 🥇</p>
-    </div>
-    <div class="col reveal-on-scroll">
-        <p>Nominations in</p>
-
-        <li class="reveal-on-scroll">Best Track Prize | Food and Nutrition</li>
-        <li class="reveal-on-scroll">Best Software</li>
-        <li class="reveal-on-scroll">Best Education</li>
-        <li class="reveal-on-scroll">Best Presentation</li>
-        <li class="reveal-on-scroll">Best Wiki</li>
-        </ul>
-    </div>
+<br>
+<p class="display-4">Gold medal 🥇</p>
+
+<h1>Nominations</h1>
+
+<div class="awards-box reveal-on-scroll">
+    <img src="/static/assets/awards/track-foodandnutrition.svg" alt="Track Prize" width="50px">
+    <h2 class="reveal-on-scroll">Best Track Prize | Food and Nutrition</h2>
+</div>
+
+<div class="awards-box reveal-on-scroll">
+    <img src="/static/assets/awards/software-tool.svg" alt="Track Prize" width="50px">
+    <h2 class="reveal-on-scroll">Best Software Tool</h2>
+</div>
+
+<div class="awards-box reveal-on-scroll">
+    <img src="/static/assets/awards/education.svg" alt="Track Prize" width="50px">
+    <h2 class="reveal-on-scroll">Best Education</h2>
+</div>
+
+<div class="awards-box reveal-on-scroll">
+    <img src="/static/assets/awards/presentation.svg" alt="Track Prize" width="50px">
+    <h2 class="reveal-on-scroll">Best Presentation</h2>
+</div>
+
+<div class="awards-box reveal-on-scroll">
+    <img src="/static/assets/awards/wiki.svg" alt="Track Prize" width="50px">
+    <h2 class="reveal-on-scroll">Best Wiki</h2>
 </div>
 
 {% endblock %}
\ No newline at end of file