Add supporting organizations

* Used flex
* Should we add the gobierno-canarias?

2 files changed, 26 insertions, 0 deletions

diff --git a/css/base.css b/css/base.css
index 936f801..7182319 100644
--- a/css/base.css
+++ b/css/base.css
@@ -265,6 +265,23 @@ a:hover {
 }
 
 /* ==================================================================
+ * The sponsors
+ * ================================================================== */
+
+.support {
+    display: flex;
+    flex-flow: row wrap; /* stack horizontally and allow wrapping */
+    justify-content: space-around; /* display items with space between */
+    align-items: center; /* align the items in middle of container */
+    margin: 10px auto;
+}
+
+.support img {
+    width: 120px;
+    height: auto;
+}
+
+/* ==================================================================
  * Page footer
  * ================================================================== */
 
diff --git a/index.html b/index.html
index c012b93..4e1ece6 100644
--- a/index.html
+++ b/index.html
@@ -124,6 +124,15 @@ git branch -b my-fix</code></pre>
                         </li>
                     </ol>
                 </section>
+                <section>
+                    <h3>Supporting organizations:</h3>
+                    <div class="support">
+                        <div><a href="https://cordis.europa.eu/project/id/777388"><img src="./img/rda-europe.png"></a></div>
+                        <div><a href="https://www.iac.es/"><img src="./img/iac-compressed.svg"></a></div>
+                        <div><a href="https://cordis.europa.eu/project/id/339659"><img src="./img/erc-compressed.svg"></a></div>
+                        <div><a href="https://www.mext.go.jp/en"><img src="./img/mext-compressed.svg"></a></div>
+                    </div>
+                </section>
                 <footer role="contentinfo">
                     <ul>
                         <li><p>Maneage is currently based in the Instituto de Astrofísica de Canarias (IAC).</p></li>