From 6a935f59d76cb296f9c40b1b60e0adbcb15efb29 Mon Sep 17 00:00:00 2001
From: Uttam Singh <uttamkhanduja@yahoo.in>
Date: Sun, 25 Apr 2021 15:42:18 +0530
Subject: [PATCH] Created a Footer for the EDAM Website

---
 page.html | 261 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 258 insertions(+), 3 deletions(-)

diff --git a/page.html b/page.html
index e458458..13b6b15 100644
--- a/page.html
+++ b/page.html
@@ -10,7 +10,204 @@
 		<link rel="alternate" type="text/plain" title="OBO-format representation of EDAM" href="http://edamontology.org/EDAM.obo"/>
 		<link rel="alternate" type="text/csv; charset=utf-8" title="CSV representation of EDAM" href="http://edamontology.org/EDAM.csv"/>
 		<link rel="alternate" type="text/tab-separated-values; charset=utf-8" title="TSV representation of EDAM" href="http://edamontology.org/EDAM.tsv"/>
+		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
+		<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
 		<script src="document.min.js" userjs="user.js" icon="favicon.ico" id="DOC" onerror="var l=document.createElement('link'),s=document.createElement('script');l.rel='stylesheet';l.href='http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css';l.id='bootstrap.css';l.auto='1';document.head.insertBefore(l,document.getElementById('DOC'));s.src='http://aplib.github.io/document.min.js';document.head.appendChild(s);"></script>
+	<style>
+	    footer{
+	position: fixed;
+	bottom: 0;
+}
+
+@media (max-height:800px){
+	footer { position: static; }
+	header { padding-top:40px; }
+}
+
+
+.footer-distributed{
+	background-color: whitesmoke;
+	box-sizing: border-box;
+	width: 100%;
+	text-align: left;
+	font: bold 16px sans-serif;
+	padding: 50px 50px 60px 50px;
+	margin-top: 80px;
+}
+
+.footer-distributed .footer-left,
+.footer-distributed .footer-center,
+.footer-distributed .footer-right{
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* Footer left */
+
+
+.footer-distributed .footer-left{
+	width: 30%;
+}
+.footer-distributed a{
+  color: darkblue;
+}
+
+.footer-distributed h3{
+	color:  black;
+	font: normal 36px 'Cookie', cursive;
+	margin: 0;
+}
+
+/* The company logo */
+
+.footer-distributed .footer-left img{
+	width: 30%;
+}
+
+.footer-distributed h3 span{
+	color:  darkblue;
+  font-weight: bold;
+}
+
+/* Footer links */
+
+.footer-distributed .footer-links{
+	color:  black;
+	margin: 20px 0 12px;
+}
+
+.footer-distributed .footer-links a{
+	display:inline-block;
+	line-height: 1.8;
+	text-decoration: none;
+	color:  inherit;
+}
+
+.footer-distributed .footer-company-name{
+	color:  #8f9296;
+	font-size: 14px;
+	font-weight: normal;
+	margin: 0;
+}
+
+/* Footer Center */
+
+.footer-distributed .footer-center{
+	width: 35%;
+}
+
+
+.footer-distributed .footer-center i{
+	background-color:  #33383b;
+	color: #ffffff;
+	font-size: 25px;
+	width: 38px;
+	height: 38px;
+	border-radius: 50%;
+	text-align: center;
+	line-height: 42px;
+	margin: 10px 15px;
+	vertical-align: middle;
+}
+
+.footer-distributed .footer-center i.fa-envelope{
+	font-size: 17px;
+	line-height: 38px;
+}
+
+.footer-distributed .footer-center p{
+	display: inline-block;
+	color: black;
+	vertical-align: middle;
+	margin:0;
+}
+
+.footer-distributed .footer-center p span{
+	display:block;
+	font-weight: normal;
+	font-size:14px;
+	line-height:2;
+}
+
+.footer-distributed .footer-center p a{
+	color:  darkblue;
+	text-decoration: none;
+}
+
+
+/* Footer Right */
+
+.footer-distributed .footer-right{
+	width: 30%;
+}
+
+.footer-distributed .footer-company-about{
+	line-height: 20px;
+	color:  black;
+	font-size: 13px;
+	font-weight: normal;
+	margin: 0;
+}
+
+.footer-distributed .footer-company-about span{
+	display: block;
+	color:  black;
+	font-size: 18px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.footer-distributed .footer-icons{
+	margin-top: 25px;
+}
+
+.footer-distributed .footer-icons a{
+	display: inline-block;
+	width: 35px;
+	height: 35px;
+	cursor: pointer;
+	background-color:  #33383b;
+	border-radius: 2px;
+
+	font-size: 20px;
+	color: #ffffff;
+	text-align: center;
+	line-height: 35px;
+
+	margin-right: 3px;
+	margin-bottom: 5px;
+}
+
+/* Here is the code for Responsive Footer */
+/* You can remove below code if you don't want Footer to be responsive */
+
+
+@media (max-width: 880px) {
+
+	.footer-distributed .footer-left,
+	.footer-distributed .footer-center,
+	.footer-distributed .footer-right{
+		display: block;
+		width: 100%;
+		margin-bottom: 40px;
+		text-align: center;
+	}
+
+	.footer-distributed .footer-center i{
+		margin-left: 0;
+	}
+
+  .mail{
+    color: black;
+  }
+
+  .fa-envelope a{
+    color: darkblue;
+  }
+
+}
+	</style>
+	
 	</head>
 	<body>
 
@@ -143,9 +340,67 @@
 -->
 
 <!--footer-panel
-<small>Last update: 2021-Mar-27</small>
+<small>Last update: 2021-April-25</small>
 -->
+<footer class="footer-distributed">
+
+	<div class="footer-left">
+		<!-- <img src="img/logo.png"> -->
+		<h3><span>EDAM</span></h3>
+
+		<p class="footer-links">
+			<a href="#">Home</a>
+			|
+			<a href="https://edamontologydocs.readthedocs.io/en/latest/index.html">Documentation</a>
+			|
+			<a href="#Download">Downloads</a>
+			<br>
+			<br>
+			<a href="#">Mailing Lists:</a>
+		<div>
+			<i class="fa fa-envelope"></i>
+			<a href="http://elixirmail.cbs.dtu.dk/mailman/listinfo/edam-announce ">Announcements</a>
+			<br>
+			<br>
+			<i class="fa fa-envelope"></i>
+			<a href="http://elixirmail.cbs.dtu.dk/mailman/listinfo/edam">General Discussions</a>
+		</div>
+		</p>
+	</div>
+
+	<div class="footer-center">
+		<br>
+		<div>
+			<i class="fa fa-envelope"></i>
+			<p><a href="mailto:edam@elixir-dk.org">edam@elixir-dk.org</a></p>
+			<br>
+			<a href="https://twitter.com/edamontology"><i class="fa fa-twitter"></i>Twitter</a>
+			<br>
+			<a href="https://github.com/edamontology"><i class="fa fa-github"></i>GitHub</a>
+		</div>
+	</div>
+	<div class="footer-right">
+		<br>
+		<br>
+		<p class="footer-company-about">
+			<span>About the company</span>
+			EDAM is a comprehensive ontology of well-established, familiar concepts that are prevalent within
+			computational biology,
+			bioinformatics, and bioimage informatics.
+		</p>
+		<br>
+		<br>
+		<p class="footer-company-name">CC BY-SA 4.0</p>
+	</div>
+	</div>
+</footer>
+</body>
+
+</html>
+
+<noscript>
+	<div class="alert alert-warning">This website requires your browser to have JavaScript enabled.</div>
+</noscript>
+</body>
 
-		<noscript><div class="alert alert-warning">This website requires your browser to have JavaScript enabled.</div></noscript>
-	</body>
 </html>