Skip to content

Created a Footer for the EDAM Website #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Uttam-Singhh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Created a Footer for the EDAM Website #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
261 changes: 258 additions & 3 deletions page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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:[email protected]">[email protected]</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>