diff --git a/ippisite/ippidb/static/css/ippidb.css b/ippisite/ippidb/static/css/ippidb.css
index 2d389136bf140fccd69f66514b4aef7713485f4c..d0dc8179f2f82f60555100957d2193d0905cbada 100644
--- a/ippisite/ippidb/static/css/ippidb.css
+++ b/ippisite/ippidb/static/css/ippidb.css
@@ -99,6 +99,201 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
font-size: 18px;
}
+#main-header{
+ margin-bottom: 2px;
+}
+
+#head-top {
+ background-color: #211b1d;
+ height: 33px;
+ position:relative;
+}
+
+/* -- Header Menu -- */
+
+#head-top #mainmenu {
+ position: relative;
+}
+
+#head-top #mainmenu ul{
+ list-style: outside none none;
+ margin: 0px;
+ padding: 0px;
+ border: 0px none;
+}
+
+#head-top #mainmenu ul li{
+ float: left;
+ list-style: none;
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0px 10px;
+}
+
+#head-top #mainmenu ul li a{
+ font-size: 11px;
+ font-family: "BrandonGrotesqueBld";
+ color:#fff;
+ text-transform: uppercase;
+ text-decoration: none;
+ position: relative;
+ display: inline-block;
+ padding: 9px 35px;
+ text-align: center;
+
+}
+
+#head-top #mainmenu ul li a:hover{
+ background: #FFF none repeat scroll 0% 0%;
+ color: #2D80E2;
+ text-decoration: none;
+}
+
+#head-top #mainmenu ul li a:focus{
+ background: #FFF none repeat scroll 0% 0%;
+ color: #2D80E2;
+ text-decoration: none;
+}
+
+div.tabs {
+ will-change: transform;
+ position: fixed;
+ bottom: 0px;
+ right: 0px;
+ left: 0px;
+ z-index: 999;
+ margin: 0px;
+ text-align: center;
+}
+
+.locale-block {
+ float: right;
+ margin-left: 10px;
+ margin-top: 5px;
+}
+
+.jumbotron {
+ padding: 40px 15px;
+ margin-bottom: 0px;
+ color: inherit;
+ background-image: url("../images/banner.png");
+}
+
+#home div.jumbotron{
+ background: url('/static/images/banner.png');
+ background-repeat: no-repeat;
+}
+
+/* -- Jumbotron -- */
+
+.jumbotron a {
+ color: rgb(0, 0, 0);
+ text-decoration: none;
+}
+
+.jumbotron a:hover {
+ color: rgb(0, 0, 0);
+ text-decoration: none;
+}
+
+.jumbotron a:focus {
+ color: rgb(0, 0, 0);
+ text-decoration: none;
+}
+
+/* -- Main Menu -- */
+
+#mainnav{
+ overflow: hidden;
+}
+
+.main-nav{
+ margin-left: auto;
+ margin-right: auto;
+ position: relative;
+ width: 600px;
+ text-align: center;
+}
+
+.main-nav ul {
+ list-style: outside none none;
+ margin: 0px;
+ padding: 0px;
+ border: 0px none;
+}
+
+.main-nav ul li {
+ float: left;
+ list-style: none;
+ display: inline-block;
+ vertical-align: middle;
+ margin: 0px 30px;
+}
+
+.main-nav ul li a{
+ font-size: 12px;
+ font-family: "BrandonGrotesqueBlk";
+ color:#636060;
+ text-transform: uppercase;
+ text-decoration: none;
+ padding: 5px 0px;
+ position: relative;
+ display: inline-block;
+}
+
+.main-nav ul li a:hover {
+ font-size: 12px;
+ font-family: "BrandonGrotesqueBlk";
+ color:#211B1D;
+ text-transform: uppercase;
+ text-decoration: none;
+ padding: 5px 0px;
+ position: relative;
+ display: inline-block;
+}
+
+.main-nav ul li a:hover::after {
+ content: "";
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ height: 2px;
+ background: #211B1D none repeat scroll 0% 0%;
+}
+
+.main-nav ul li a:focus {
+ font-size: 12px;
+ font-family: "BrandonGrotesqueBlk";
+ color:#211B1D;
+ text-transform: uppercase;
+ text-decoration: none;
+ padding: 5px 0px;
+ position: relative;
+ display: inline-block;
+}
+
+.main-nav ul li a:focus::after {
+ content: "";
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ height: 2px;
+ background: #211B1D none repeat scroll 0% 0%;
+}
+
+.main-nav ul li a:active {
+ font-size: 12px;
+ font-family: "BrandonGrotesqueBlk";
+ color:#211B1D;
+ text-transform: uppercase;
+ text-decoration: none;
+ padding: 5px 0px;
+ position: relative;
+ display: inline-block;
+}
+
button {
font-family:"BrandonGrotesqueReg";
}
@@ -158,8 +353,157 @@ display:block;
text-decoration: none;
}
+/* CONTENT */
-#home div.jumbotron{
- background: url('/static/images/banner.png');
- background-repeat: no-repeat;
+#content{
+ min-height: 400px;
+}
+
+
+/* FOOTER */
+
+.main-footer {
+ padding: 80px 0px;
+ background: #211B1D none repeat scroll 0% 0%;
+ color: #FFF;
+ font: 12px "BrandonGrotesqueReg","Arial","Helvetica",sans-serif;
+line-height: 21px;
+}
+
+.main-footer a {
+ color: #FFF;
+}
+
+.inner-wrap {
+ max-width: 1200px;
+ margin: 0px auto;
+ position: relative;
+}
+
+.footer__address::before {
+ content: "";
+ display: inline-block;
+ vertical-align: middle;
+ background: transparent url("https://www.pasteur.fr/sites/all/themes/custom/pasteur/assets/img/map.png") no-repeat scroll left top;
+ width: 152px;
+ height: 153px;
+ margin-right: 40px;
+ float: left;
+}
+
+.clearfix::after {
+ content: ".";
+ display: block;
+ height: 0px;
+ clear: both;
+ visibility: hidden;
+}
+
+.footer__address {
+ margin-right: 40px;
+ display: inline-block;
+ vertical-align: middle;
+ min-width: 400px;
+}
+
+.footer__address .block {
+ display: block;
+ margin-top: -15px;
+}
+
+.footer__address .footer__logo {
+ display: inline-block;
+ margin-top: 20px;
+}
+
+.footer__address .block {
+ display: block;
+ margin-top: -15px;
+}
+
+.footer__section {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.footer__menu-social, .footer__menu-2, .footer__menu-1 {
+ vertical-align: top;
+ min-height: 172px;
+ border-left: 1px solid #2D96FA;
+ padding: 10px 50px;
+}
+
+.footer__menu-social .content {
+ text-align: center;
+}
+
+.footer__menu-social .content li {
+ margin-bottom: 15px;
+}
+
+.footer__menu-social .content a {
+ display: inline-block;
+ vertical-align: middle;
+ text-indent: -9999px;
+}
+
+.footer__menu-social ul, .footer__menu-2 ul, .footer__menu-1 ul {
+ list-style: outside none none;
+ margin: 0px;
+ padding: 0px;
+ border: 0px none;
+
+}
+
+.footer__menu-2 li, .footer__menu-1 li {
+ margin-bottom: 8px;
+}
+
+.footer__menu-social a, .footer__menu-2 a, .footer__menu-1 a {
+ text-transform: uppercase;
+ text-decoration: none;
+}
+
+.footer__menu-2 a:hover, .footer__menu-1 a:hover {
+ text-transform: uppercase;
+ text-decoration: underline;
+
+}
+
+.footer__menu-2 a:focus, .footer__menu-1 a:focus {
+ text-transform: uppercase;
+ text-decoration: underline;
+
+}
+
+.footer__menu-2 a:active, .footer__menu-1 a:active {
+ text-transform: uppercase;
+ text-decoration: underline;
+
+}
+
+.main-footer .donate a {
+ color: #2D96FA;
+ font-family:"BrandonGrotesqueBld";
+}
+
+.suivre_pasteur_facebook {
+ background-image: url("https://www.pasteur.fr/sites/all/themes/custom/pasteur/assets/img/sprites.png?0afff4d5b47e28179e26b2749a597aee");
+ background-position: -230px -28px;
+ width: 11px;
+ height: 20px;
+}
+
+.suivre_pasteur_linkedin {
+ background-image: url("https://www.pasteur.fr/sites/all/themes/custom/pasteur/assets/img/sprites.png?0afff4d5b47e28179e26b2749a597aee");
+ background-position: -167px -177px;
+ width: 15px;
+ height: 15px;
+}
+
+.suivre_pasteur_twitter {
+ background-image: url("https://www.pasteur.fr/sites/all/themes/custom/pasteur/assets/img/sprites.png?0afff4d5b47e28179e26b2749a597aee");
+ background-position: -100px -177px;
+ width: 19px;
+ height: 16px;
}
diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index 0a8c103ca2f99dede08b43372a4d6fa788269a14..a3ebba8e116852592fffc55dcda7f1e136f2153d 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -1,25 +1,140 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <title>IPPI-DB {% block title %}{% endblock %}</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
- <link rel="stylesheet" href="/static/ippidb.css">
- <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
-</head>
+ <head>
+ <title>IPPI-DB {% block title %}{% endblock %}</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+ <link rel="stylesheet" href="/static/css/ippidb.css">
+ <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
+ </head>
-<body>
- <div class="container">
- <a href="/" id="home">
- <div class="jumbotron">
- <h1 class="display-3">iPPI-DB</h1>
- <p class="lead">Inhibitors of Protein-Protein Interaction Database</p>
+ <body>
+ <div id="main-header">
+ <div id="head-top">
+ <div id="mainmenu">
+ <nav class="mainmenu">
+ <ul>
+ <li>
+ <a href="https://www.pasteur.fr/fr">Research</a>
+ </li>
+ <li>
+ <a hfre="https://www.pasteur.fr/en/education">Education</a>
+ </li>
+ <li>
+ <a href="https://www.pasteur.fr/en/international-en">International</a>
+ </li>
+ <li>
+ <a href="https://www.pasteur.fr/en/public-health">Public Health</a>
+ </li>
+ </ul>
+ </nav>
+ </div>
</div>
- </a>
- </div><!-- /.container-fluid -->
- <div id="content">
- {% block content %}{% endblock %}
- </div>
-</body>
+ </div>
+ <div class="jumbotron">
+ <div class="container">
+ <a href="/" id="home">
+ <h1 class="display-3">iPPI-DB</h1>
+ <p class="lead">Inhibitors of Protein-Protein Interaction Database</p>
+
+ </a>
+ </div><!-- /.container-fluid -->
+ </div>
+ <div id="mainnav">
+ <nav class="main-nav">
+ <ul>
+ <li>
+ <a href="/">Home</a>
+ </li>
+ <li>
+ <a hfre="/other">About</a>
+ </li>
+ <li>
+ <a href="/submit">Submit</a>
+ </li>
+ <li>
+ <a href="/tutorials">Tutorials</a>
+ </li>
+ <li>
+ <a href="/admin">Admin</a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ <div id="content">
+ {% block content %}{% endblock %}
+ </div> <!-- end main -->
+ <div class="main-footer">
+ <div class="inner-wrap">
+ <div class="footer__section footer__address">
+ <div class="footer__logo clearfix">
+ <img src="https://www.pasteur.fr/sites/all/themes/custom/pasteur/assets/img/pasteur-white.png" alt="Institut Pasteur" title="Institut Pasteur">
+ </div>
+ <div class="block block-block block-block-1">
+ <div class="content">
+ <root>
+ <div class="address_street">
+ <span>25-28 Rue du Dr Roux, 75015 Paris</span>
+ </div>
+ <div class="address_phone"><span>01 45 68 80 00</span>
+ </div>
+ </root>
+ </div>
+ </div>
+ </div>
+ <div class="footer__section footer__menu-1">
+ <div id="block-menu-menu-footer-menu-1" class="block block-menu">
+ <nav>
+ <ul>
+ <li>
+ <a href="https://www.pasteur.fr/en/home/institut-pasteur/institut-pasteur-throughout-world/institut-pasteur-international-network">The Institut Pasteur</a>
+ </li>
+ <li>
+ <a href="https://www.pasteur.fr/en/our-missions">Our Missions</a>
+ </li>
+ <li>
+ <a href="https://www.pasteur.fr/en/support-us">Support Us</a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ <div class="footer__section footer__menu-2">
+ <div class="block block-menu block-menu-menu-footer-menu-2">
+ <nav>
+ <ul>
+ <li>
+ <a class="donate" href="https://don.pasteur.fr/">Donate</a>
+ </li>
+ <li>
+ <a class="leaf" href="https://www.pasteur.fr/en/press-area">Press Area</a>
+ </li>
+ <li>
+ <a class="last leaf" href="https://www.pasteur.fr/en">Legal Notice</a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ <div class="footer__section footer__menu-social">
+ <div class="block block-menu block-menu-menu-footer-menu-social">
+ <nav>
+ <ul>
+ <li>
+ <a class="suivre_pasteur_facebook" href="" target="_blank"></a>
+ </li>
+ <li>
+ <a class="suivre_pasteur_linkedin" href="" target="_blank"></a>
+ </li>
+ <li>
+ <a class="suivre_pasteur_twitter" href="" target="_blank"></a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
</html>