Skip to content
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

Created a Footer for the EDAM Website. #8

Closed
wants to merge 3 commits into from
Closed

Created a Footer for the EDAM Website. #8

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
387a69a
Added a nav bar
Uttam-Singhh Apr 20, 2021
d66a0a2
Made Requested Changes - floating navbar, background & breakpoint
Uttam-Singhh Apr 23, 2021
95f3294
Created a Footer for the EDAM Website
Uttam-Singhh Apr 25, 2021
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
353 changes: 352 additions & 1 deletion page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,308 @@
<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>

.navbar-default {
height: 55px;
}

.navbar-brand {
font-size: 1.5em;
}

.navbar{
margin-left: 30px;
margin-right: 30px;
position: -webkit-sticky;
position: sticky;
top: 0;
overflow: fixed;
}

.navbar-nav{
font-size: 1.5em;
}
.navbar-collapse{
background-color: whitesmoke;
}

@media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

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>

<nav class="navbar navbar-default" >
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">EDAM</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#Viewing">Viewing</a></li>
<li><a href="#Download">Downloads</a></li>
<li><a href="#Documentation">Documentation</a></li>
<li><a href="#Scope">Scope</a></li>
<li><a href="#Architecture">Architecture</a></li>


</ul>
<ul class="nav navbar-nav navbar-right">
<li><button type="button" href="#Documentation" class="btn btn-default navbar-btn"><a href="#Contacts">CONTACT US</a></button></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Credentials<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#License">Licence</a></li>
<li><a href="#Publications">Publications</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


<!--header-panel
# EDAM - Ontology of bioscientific data analysis
-->
Expand Down Expand Up @@ -143,8 +441,61 @@
-->

<!--footer-panel
<small>Last update: 2021-Mar-27</small>
<small>Last update: 2021-April-24</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>
Expand Down