Feature: Add sponsor section

_config.yml

@@ -58,6 +58,61 @@ alliance_members:
     logo: '/images/alliance_member_logos/matportal.png'
     color: '#009574'
 
+sponsors:
+  - acronym: 'D2KAB'
+    logo: https://agroportal.lirmm.fr/assets/logos/collaboration/d2kab_logo-5155645cfcfe00890f3cad2307ca7975a1ff43b841755002830c99aba060a9e5.png
+    link: http://www.d2kab.org/
+    portals: 'AgroPortal'
+  - acronym: 'Numev'
+    logo: https://agroportal.lirmm.fr/assets/logos/supports/numev_logo-422570c5e78de28887f0f154c108a8941e8558b08b5029d1d2c72c810d572675.png
+    link: https://numev.edu.umontpellier.fr/
+    portals: 'AgroPortal, OntoPortal'
+  - acronym: 'INRAE'
+    logo: https://www.inrae.fr/themes/custom/inrae_socle/logo.svg
+    link: https://www.inrae.fr/
+    portals: 'AgroPortal'
+  - acronym: 'CNRS'
+    logo: https://www.cnrs.fr/themes/custom/cnrs/logo.svg
+    link: https://www.cnrs.fr/en
+    portals: 'AgroPortal'
+  - acronym: 'UMontpellier'
+    logo: https://agroportal.lirmm.fr/assets/logos/collaboration/um_logo-8646cda265744e9b552d471514ebb35147a210696328a76ea8ec7f9ff99cb98a.png
+    link: https://www.umontpellier.fr/en/
+    portals: 'AgroPortal, SIFR BioPortal'
+  - acronym: 'FAIR-IMPACT'
+    logo: https://fair-impact.eu/themes/fairimpact/logo.svg
+    link: https://fair-impact.eu/
+    portals: 'AgroPortal, EcoPortal, EarthPortal, SIFR BioPortal'
+  - acronym: 'Stanford'
+    logo: https://identity.stanford.edu/wp-content/uploads/sites/3/2020/07/SU_SealColor_web3.png
+    link: https://bmir.stanford.edu/
+    portals: 'BioPortal, OntoPortal'
+  - acronym: 'LifeWatch ERIC'
+    logo: https://www.lifewatch.eu/wp-content/uploads/2021/07/logoLW_eric_outline2-01.svg
+    link: https://www.lifewatch.eu/
+    portals: 'EcoPortal'
+  - acronym: 'BAM'
+    logo: https://www.bam.de/SiteGlobals/StyleBundles/Bilder/Farbschema/DE/logo.png?__blob=normal
+    link: https://www.bam.de/Navigation/DE/Home/home.html
+    portals: 'MatPortal'
+  - acronym: 'Fraunhofer Materials'
+    logo: https://www.materials.fraunhofer.de/content/dam/materials/materials_190x52.gif
+    link: https://www.materials.fraunhofer.de/
+    portals: 'MatPortal'
+  - acronym: 'OntoCommons'
+    logo: https://ontocommons.eu/themes/paranoid/logo.png
+    link: https://ontocommons.eu/
+    portals: 'IndustryPortal'
+  - acronym: 'ENIT'
+    logo: https://www.enit.fr/skins/enit-new/resources/img/logo_enit.jpg
+    portals: 'IndustryPortal'
+    link: https://www.enit.fr/fr/index.html
+  - acronym: 'BMICC'
+    logo: http://59.108.16.249:8883/biomarker/image/a.jpg
+    link: http://www.bmicc.cn/web/share/home/
+    portals: 'MedPortal'
+
+
 
 # -----
 # Build

_sass/layout.scss

@@ -172,3 +172,82 @@ blockquote:before {
 	}
 
 }
+
+.tns-controls{
+	display: flex;
+	justify-content: center;
+}
+
+.tns-controls [aria-controls] {
+	font-size: 15px;
+	margin: 0 5px;
+	padding: 0 1em;
+	height: 2.5em;
+	color: white;
+	background: #666666;
+	border-radius: 25px;
+	border: 0;
+}
+
+.sponsorsFooter {
+	width: 100%;
+	height: auto;
+	padding: 40px 0 10px;
+	margin-top: 0px;
+	text-align: center !important;
+	z-index: 99;
+}
+
+.sponsorsFooter img {
+	vertical-align: middle;
+	height: 120px;
+	width: 120px;
+	object-fit: contain;
+}
+
+.sponsorsFooter ul {
+	padding: 0;
+	margin: 15px 0 0 0;
+	list-style: none;
+	display: block;
+}
+
+.sponsorsFooter ul.enter > li:not(.hover) {
+	opacity: .1;
+}
+
+.sponsorsFooter ul.enter > li.hover {
+	opacity: 1;
+}
+.sponsorsFooter li:hover {
+	cursor: pointer;
+	box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12)
+}
+
+.sponsorsFooter ul li {
+	word-break: break-all;
+	word-wrap: break-word;
+	margin: 0px;
+	padding: 20px;
+	border-radius: 10px;
+	background-color: white;
+	-webkit-transition: opacity 0.25s ease;
+	-moz-transition: opacity 0.25s ease;
+	-ms-transition: opacity 0.25s ease;
+	-o-transition: opacity 0.25s ease;
+	transition: opacity 0.25s ease;
+}
+
+
+.sponsorsFooter ul li {
+	margin: 35px 16px 0px;
+	display: inline-block;
+}
+
+
+@media(max-width: 750px) {
+	.sponsorsFooter img { max-width: 70px; }
+	.sponsorsFooter ul li {
+		margin: 15px 5px 0;
+	}
+}

index.html

@@ -3,24 +3,6 @@
 description: Deploy and use your Ontoportal repository
 ---
 
-<style>
-	.tns-controls{
-		display: flex;
-		justify-content: center;
-	}
-
-	.tns-controls [aria-controls] {
-		font-size: 15px;
-		margin: 0 5px;
-		padding: 0 1em;
-		height: 2.5em;
-		color: white;
-		background: #666666;
-		border-radius: 25px;
-		border: 0;
-	}
-</style>
-
 <section class="hero">
 	<div class="text-container">
 		<h1 class="editable">Ontoportal <strong>your semantic artefact repository</strong></h1>
@@ -190,8 +172,65 @@ <h2>Be part of a <strong>community</strong></h2>
         </iframe>
 	</section>
 
-	<section class="bottom-cta">
-		<h2 class="editable"><strong>Deploy</strong> and <strong>use</strong> your own Ontoportal today</h2>
-		<div class="button alt"><a href="https://ontoportal.github.io/documentation/administration/steps/getting_started">Get Started Free</a></div>
+	<section  class="bottom-cta">
+		<div class="container flex sponsorsFooter" style="flex-direction: column; justify-content: center"  >
+			<div class="text editable flex" style="justify-content: center; flex-direction: column; align-items: center; margin-top: 10px">
+				<h2><span class="sponsorsFooter-Title">Our</span> <strong>sponsors</strong></h2>
+			</div>
+			<ul class="flex">
+				{% for sponsor in site.sponsors %}
+					<li data-group="{{ sponsor.portals }}">
+                       <a href="{{sponsor.link}}" target="_blank"><img src="{{ sponsor.logo }}" alt="{{sponsor.acronym}} image"></a>
+					</li>
+				{% endfor %}
+			</ul>
+			<script>
+				const ul = document.querySelector(".sponsorsFooter ul");
+				const title = document.querySelector(".sponsorsFooter .sponsorsFooter-Title");
+
+				ul.querySelectorAll('li').forEach(li => {
+					const portals =  li.getAttribute("data-group").toString().trim().split(',')
+					li.addEventListener("mouseenter", () => {
+						showPortals(ul,portals)
+						title.innerHTML = getTitle(portals)
+					})
+
+					li.addEventListener("mouseleave", () => {
+						title.innerHTML = "Our";
+						resetPortals(ul)
+					})
+				})
+
+				function getTitle(portals){
+					const length  = portals.length
+					if (length === 1) {
+						return portals[0]
+					} else if (length === 2) {
+						return portals.join(' and ');
+					} else {
+						const last = portals.slice(-1)
+						const rest = portals.slice(0, - 1)
+						return rest.join(', ') + ', and ' + last
+					}
+				}
+				function showPortals(container,portals){
+					container.querySelectorAll('li').forEach(li => {
+						const currentPortals =  li.getAttribute("data-group").toString().trim().split(',')
+						if(portals.every(item => currentPortals.includes(item))){
+							li.classList.add("hover")
+							container.classList.add("enter")
+						}
+					})
+				}
+				function resetPortals(container){
+					container.classList.remove("enter")
+					container.querySelectorAll('li').forEach(li => {
+						li.classList.remove("hover")
+					})
+				}
+
+
+			</script>
+		</div>
 	</section>
 </div>