Add new background color and transition to mission jumbotron

@jandt-desy We probably need to talk about the colors still.

_layouts/frontpage.html

@@ -33,39 +33,48 @@
                 <a href="{{ 'news/' | relative_url }}" class="btn btn-outline-secondary">More</a>
             </section>
         </div>
-        <div class="frontpage-mission-jumbotron">
-            <section>
-                <div class="info-col">
-                    <div class="info-box">
-                        <a href="{% link index.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
-                        </a>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
-                            labore et dolore magna aliqua.</p>
-                    </div>
-                    <div class="info-box">
-                        <a href="{% link mission/index.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS Mission</h3>
-                        </a>
-                        <p>Strengthening and developing the ICT competences of the whole Helmholtz Association.</p>
-                    </div>
-                    <div class="info-box">
-                        <a href="{% link partners.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS Partners</h3>
-                        </a>
-                        <p>Take a look at our partners, within the Helmholtz Association and throughout the World.</p>
-                    </div>
-                    <div class="info-box">
-                        <a href="{% link roadmap/index.md %}" class="btn btn-outline-light">
-                            <h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS Roadmap</h3>
-                        </a>
-                        <p>Get the latest updates of the HIFIS roadmap, summarizing our goals for the months and years to come.
-</p>
+        <div class="transition-block">
+
+            {% include transition.html direction="top" %}
+            <div class="frontpage-mission-jumbotron">
+                <section>
+                    <div class="info-col">
+                        <div class="info-box">
+                            <a href="{% link index.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-user-plus" aria-hidden="true"></i>&nbsp; You & HIFIS</h3>
+                            </a>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+                                incididunt ut
+                                labore et dolore magna aliqua.</p>
+                        </div>
+                        <div class="info-box">
+                            <a href="{% link mission/index.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-atom" aria-hidden="true"></i>&nbsp; HIFIS Mission</h3>
+                            </a>
+                            <p>Strengthening and developing the ICT competences of the whole Helmholtz Association.</p>
+                        </div>
+                        <div class="info-box">
+                            <a href="{% link partners.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-globe-europe" aria-hidden="true"></i>&nbsp; HIFIS Partners</h3>
+                            </a>
+                            <p>Take a look at our partners, within the Helmholtz Association and throughout the World.
+                            </p>
+                        </div>
+                        <div class="info-box">
+                            <a href="{% link roadmap/index.md %}" class="btn btn-outline-primary">
+                                <h3><i class="fas fa-road" aria-hidden="true"></i>&nbsp; Now & tomorrow - The HIFIS
+                                    Roadmap
+                                </h3>
+                            </a>
+                            <p>Get the latest updates of the HIFIS roadmap, summarizing our goals for the months
+                                andyears to
+                                come.</p>
+                        </div>
                     </div>
-                </div>
-            </section>
+                </section>
+            </div>
         </div>
-        
+
     </main>
 
     {% include footer.html %}