c0.1.128 CSS ihp-timeline-legend space-evenly

static/style.css

@@ -360,8 +360,13 @@ b {
   display: table-cell;
   border-radius: 50%;
   background: black;
-  float: left;
-  margin-right: 5px;
+}
+
+#ihp-timeline-legend {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  margin: auto;
 }
 
 .wet-lab-timeline-circle {}

wiki/pages/human-practices.html

@@ -172,7 +172,8 @@
         any product, and thereby it has contributed majorly for the amalgamation of our project.</p>
       <b>References</b>
       <ol>
-        <li class="reveal-on-scroll">M. Y. Ina-Salwany et al., “Vibriosis in Fish: A Review on Disease Development and Prevention,” J. Aquat.
+        <li class="reveal-on-scroll">M. Y. Ina-Salwany et al., “Vibriosis in Fish: A Review on Disease Development and
+          Prevention,” J. Aquat.
           Anim. Health, vol. 31, no. 1, pp. 3–22, Mar. 2019, doi: 10.1002/AAH.10045.
         </li>
       </ol>
@@ -606,32 +607,46 @@
         <h1 class="reveal-on-scroll">Integrated Human Practices Timeline</h1>
         <hr><br>
       </div>
-      <div class="row">
+
+      <div class="row" id="ihp-timeline-legend">
+
         <div class="col">
-          <div class="row">
-            <div class="col">
-              <span class="ihp-circle" style="background: #D8C200;"></span>
-              <p class="reveal-on-scroll">Academia</p>
-            </div>
-            <div class="col">
-              <span class="ihp-circle" style="background: #FF0000;"></span>
-              <p class="reveal-on-scroll">Companies</p>
-            </div>
-            <div class="col">
-              <span class="ihp-circle" style="background: #2020F1;"></span>
-              <p class="reveal-on-scroll">Outreach</p>
-            </div>
-            <div class="col">
-              <span class="ihp-circle" style="background: #429F89;"></span>
-              <p class="reveal-on-scroll">Doctors</p>
-            </div>
-            <div class="col-3">
-              <span class="ihp-circle" style="background: #002F40;"></span>
-              <p class="reveal-on-scroll">Entrepreneurs</p>
-            </div>
-          </div>
+          <p class="reveal-on-scroll">
+          <div class="ihp-circle" style="background: #D8C200;"></div>
+          Academia
+          </p>
+        </div>
+
+        <div class="col">
+          <p class="reveal-on-scroll">
+          <div class="ihp-circle" style="background: #FF0000;"></div>
+          Companies
+          </p>
         </div>
+
+        <div class="col">
+          <p class="reveal-on-scroll">
+          <div class="ihp-circle" style="background: #2020F1;"></div>
+          Outreach
+          </p>
+        </div>
+
+        <div class="col">
+          <p class="reveal-on-scroll">
+          <div class="ihp-circle" style="background: #429F89;"></div>
+          Doctors
+          </p>
+        </div>
+
+        <div class="col">
+          <p class="reveal-on-scroll">
+          <div class="ihp-circle" style="background: #002F40;"></div>
+          Entrepreneurs
+          </p>
+        </div>
+
       </div>
+
       <div class="row">
         <img src="https://static.igem.wiki/teams/4200/wiki/human-practices/ihp-timeline.png" alt="IHP Timeline">
       </div>