Difference between revisions of "Template:IIT Kanpur/Footer"

 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<html><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+
<html>
−
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Varela+Round" rel="stylesheet">
+
<style>
−
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+
−
<link rel="stylesheet" type="text/css" href="/Team:Lund/styles/wrapper?action=raw&ctype=text/css&cache=43">
+
−
<script type="text/javascript" src="/Team:Lund/scripts/bootstrap?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="/Team:Lund/scripts/ScrollTrigger?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="/Team:Lund/scripts/jquery-scrollTo?action=raw&ctype=text/javascript"></script>
+
−
<script type="text/javascript" src="/Team:Lund/scripts/featherlight?action=raw&ctype=text/javascript"></script>
+
  
−
<script>
+
<html>
−
  $(document).ready(function() {
+
<style>
−
    // Setup ScrollTrigger
+
−
    var trigger = new ScrollTrigger({
+
−
      centerVertical: true,
+
−
      once: true
+
−
    });
+
  
−
    var pages = {
+
/******* FOOTER ******/
−
      'Team:Lund':                                    '#li_home',
+
−
      'Team:Lund/Team':                              '#li_team',
+
−
      'Team:Lund/Collaborations':                    '#li_team',
+
−
      'Team:Lund/Attributions':                      '#li_team',
+
−
      'Team:Lund/Description':                        '#li_team',
+
−
      'Team:Lund/Design':                            '#li_team',
+
−
      'Team:Lund/Description':                        '#li_team',
+
−
      'Team:Lund/Attributions':                      '#li_team',
+
−
      'Team:Lund/Attributions/LundUniversity':        '#li_team',
+
−
      'Team:Lund/Attributions/Team':                  '#li_team',
+
−
      'Team:Lund/Attributions/Sponsors':              '#li_team',
+
−
      'Team:Lund/Attributions/Inspiration':          '#li_team',
+
−
      'Team:Lund/Attributions/ProjectDesign':        '#li_team',
+
−
      'Team:Lund/Description':                        '#li_project',
+
−
      'Team:Lund/Design':                            '#li_project',
+
−
      'Team:Lund/Design/Animation':                  '#li_project',
+
−
      'Team:Lund/Design/Theory':                      '#li_project',
+
−
      'Team:Lund/Design/Design':                      '#li_project',
+
−
      'Team:Lund/Design/Circuit':                    '#li_project',
+
−
      'Team:Lund/Design/Experiments':                '#li_project',
+
−
      'Team:Lund/Design/References':                  '#li_project',
+
−
      'Team:Lund/Results':                            '#li_project',
+
−
      'Team:Lund/InterLab':                          '#li_project',
+
−
      'Team:Lund/Parts':                              '#li_project',
+
−
      'Team:Lund/Experiments':                        '#li_project',
+
−
      'Team:Lund/Notebook':                          '#li_project',
+
−
      'Team:Lund/Model':                              '#li_model',
+
−
      'Team:Lund/Modeling/ModelDerivation':          '#li_model',
+
−
      'Team:Lund/Modeling/ParameterEstimation':      '#li_model',
+
−
      'Team:Lund/Modeling/Implementation':            '#li_model',
+
−
      'Team:Lund/Safety':                            '#li_safety',
+
−
      'Team:Lund/HP/Silver':                          '#li_hp',
+
−
      'Team:Lund/HP/Gold_Integrated':                '#li_hp',
+
−
      'Team:Lund/Engagement':                        '#li_hp',
+
−
      'Team:Lund/HP/Media':                          '#li_hp',
+
−
      'Team:Lund/Communication':                      '#li_hp',
+
−
    };
+
  
−
    var listItem = $(pages[wgPageName]);
+
#footer {
−
     listItem.addClass('active');
+
margin:0;
−
  });
+
padding:0;
−
</script>
+
height: 20%;
 +
margin-top:200px;
 +
     position: sticky;
 +
top: 20%;
 +
  bottom: -20%;
 +
}
  
−
<script>
+
/***************************************** FOOTNOTES (Social Media Links) ******************************************/
  
−
  // This is the jquery part of your template.
+
.footnotes-menu {       
−
  // Try not modify any of this code too much since it makes your menu work.
+
position: relative;
 +
        float: right;
 +
right: 6em;
 +
        bottom:6em;
 +
}
  
−
   $(document).ready(function() {
+
.menu-toggler {
 +
   position: absolute;
 +
  display: block;
 +
  top: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
  left: 0;
 +
  margin: auto;
 +
  width: 40px;
 +
  height: 40px;
 +
  z-index: 10;
 +
  opacity: 0;
 +
  cursor: pointer;
 +
}
 +
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after {
 +
  background: white;
 +
}
  
−
    $("#HQ_page").attr('id','');
+
.menu-toggler:checked + label {
 +
  background: transparent;
 +
}
 +
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after {
 +
  top: 10px;
 +
  width: 40px;
 +
  -webkit-transform-origin: 50% 50%;
 +
          transform-origin: 50% 50%;
 +
}
 +
.menu-toggler:checked + label:before {
 +
  -webkit-transform: rotate(45deg);
 +
          transform: rotate(45deg);
 +
}
 +
.menu-toggler:checked + label:after {
 +
  -webkit-transform: rotate(-45deg);
 +
          transform: rotate(-45deg);
 +
}
  
−
    // call the functions that control the menu
+
.menu-toggler:checked ~ ul .menu-item {
−
    menu_functionality();
+
  opacity: 1;
−
    hide_show_menu();
+
}
 +
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
 +
  -webkit-transform: translateY(-90px);
 +
          transform: translateY(-90px);
 +
}
 +
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
 +
  -webkit-transform: translateY(-180px);
 +
          transform: translateY(-180px);
 +
}
 +
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
 +
  -webkit-transform: translateY(-270px);
 +
          transform: translateY(-270px);
 +
}
 +
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
 +
  -webkit-transform: translateY(-360px);
 +
          transform: translateY(-360px);
 +
}
 +
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
 +
  -webkit-transform: translateY(-450px);
 +
          transform: translateY(-450px);
 +
}
 +
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
 +
  -webkit-transform: translateY(-540px);
 +
          transform: translateY(-540px);
 +
}
 +
.menu-toggler:checked ~ ul .menu-item a {
 +
  pointer-events: auto;
 +
}
  
 +
.menu-toggler + label {
 +
  width: 40px;
 +
  height: 5px;
 +
  display: block;
 +
  z-index: 5;
 +
  border-radius: 2.5px;
 +
  background: rgba(255,255,255, 0.7);
 +
  -webkit-transition: top 0.5s, -webkit-transform 0.5s;
 +
  transition: top 0.5s, -webkit-transform 0.5s;
 +
  transition: transform 0.5s, top 0.5s;
 +
  transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
 +
  position: absolute;
 +
  display: block;
 +
  top: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
  left: 0;
 +
  margin: auto;
 +
}
 +
.menu-toggler + label:before, .menu-toggler + label:after {
 +
  width: 40px;
 +
  height: 5px;
 +
  display: block;
 +
  z-index: 5;
 +
  border-radius: 2.5px;
 +
  background: rgba(255,255,255, 0.7);
 +
  -webkit-transition: top 0.5s, -webkit-transform 0.5s;
 +
  transition: top 0.5s, -webkit-transform 0.5s;
 +
  transition: transform 0.5s, top 0.5s;
 +
  transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;
 +
  content: "";
 +
  position: absolute;
 +
  left: 0;
 +
}
 +
.menu-toggler + label:before {
 +
  top: 10px;
 +
}
 +
.menu-toggler + label:after {
 +
  top: -10px;
 +
}
  
 +
.menu-item {
 +
  position: absolute;
 +
  display: block;
 +
  top: 0;
 +
  bottom: 0;
 +
  right: 4em;
 +
  left: 0;
 +
  margin: auto;
 +
  width: 80px;
 +
  height: 80px;
 +
  display: block;
 +
  opacity: 0;
 +
  -webkit-transition: 0.5s;
 +
  transition: 0.5s;
 +
}
  
−
    //this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
.menu-item a {
−
    function menu_functionality() {
+
  display: block;
 +
  width: inherit;
 +
  height: inherit;
 +
  line-height: 80px;
 +
  color: rgba(255,255,255, 0.7);
 +
  background: rgba(255,255,255, 0);
 +
  border-radius: 50%;
 +
  text-align: center;
 +
  text-decoration: none;
 +
  font-size: 15px;
 +
  pointer-events: none;
 +
  -webkit-transition: .2s;
 +
  transition: .2s;
 +
}
 +
.menu-item a:hover {
 +
  box-shadow: 0 0 0 0px rgba(255,255,255, 0);
 +
  color: white;
 +
  background: rgba(255,255,255, 0.0);
 +
  font-size: 17px;
 +
}
  
−
      //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
.menu-icon {
−
      $(".menu_button").click(function(){
+
height: 50px;
 +
width: 50px;
 +
margin: auto;
 +
padding: 10 10 10 10;
 +
}
  
−
        // add or remove the class "open" , this class holds the "-"
+
/******************** SPONSORS BAR ************************/
−
        $(this).children().toggleClass("open");
+
#sponsors-bar {
−
        // show or hide the submenu
+
margin:0;
−
        $(this).next('.submenu_wrapper').fadeToggle(400);
+
padding:0;
−
      });
+
}
  
−
      // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
.sponsor-img {
−
      $("#display_menu_control").click(function(){
+
padding: 1%;
−
        $('#menu_content').fadeToggle(400);
+
max-width: 10%;
−
      });
+
height:auto;
 +
}
  
−
      // call the current page highlight function
+
#img-squarish {
−
      highlight_current_page();
+
padding: 1%;
−
    }
+
max-width: 6%;
 +
height:auto;
 +
}
 +
</style>
  
 +
<div id = "footer">
  
−
     // call the highlight current page function to show it on the menu with a different background color
+
<!-- FOOTNOTES (social media links) -->
−
     function highlight_current_page() {
+
<div class="footnotes-menu">
 +
  <input class="menu-toggler" id="menu-toggler" type="checkbox">
 +
  <label for="menu-toggler"></label>
 +
  <ul>
 +
      <li class="menu-item">
 +
      <a href="https://igem.org/Main_Page" target="_blank">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2018/7/78/T--IIT_Kanpur--Icon-igem.png" alt="Home">
 +
  </a>
 +
     </li>
 +
   
 +
 
 +
<li class="menu-item">
 +
      <a href="https://www.iitk.ac.in/" target="_blank">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2018/9/94/T--IIT_Kanpur--Logo_IITK.png" alt="" height="50" width ="50">
 +
  </a>
 +
     </li>
 +
<li class="menu-item">
 +
      <a href="mailto:teamigemiitk2k18@gmail.com" target="top">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2018/9/91/T--IIT_Kanpur--Icon-gmail.png" alt="Gmail" height="50" width ="50">
 +
  </a>
 +
    </li>
 +
<li class="menu-item">
 +
      <a href="https://www.instagram.com/igem_iitk/" target="_blank">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2018/4/4f/T--IIT_Kanpur--Icon-instagram.png" alt="Instagram" height="50" width ="50">
 +
  </a>
 +
    </li>
 +
  <li class="menu-item">
 +
      <a href="https://www.facebook.com/bioluminatiigem/" target="_blank">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2018/4/4f/T--IIT_Kanpur--Icon-facebook.png" alt="Facebook" height="50" width ="50">
 +
      </a>
 +
    </li>
  
−
       // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
+
<li class="menu-item">
−
      $("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
       <a href="https://twitter.com/IgemIit" target="_blank">
 +
        <img class="menu-icon" src="https://static.igem.org/mediawiki/2018/a/a3/T--IIT_Kanpur--Icon-twitter.png" alt="Twitter" height="50" width ="50">
 +
      </a>
 +
    </li>
 +
  </ul>
 +
</div>
  
−
      // now that the current_page class has been added to a menu item, make the submenu fade in
+
<div id = "sponsors-bar" style="background-color: #222">
−
      $(".current_page").parents(".submenu_wrapper").fadeIn(400);
+
    <a href="https://www.iitk.ac.in/"><img src="https://static.igem.org/mediawiki/2018/9/94/T--IIT_Kanpur--Logo_IITK.png" class = "sponsor-img"></a>
−
      // change the +/- symbol of the corresponding menu button
+
  <a href="http://www.iitk.ac.in/siic/d/birac-bio-incubator"><img src="https://static.igem.org/mediawiki/2018/f/fd/T--IIT_Kanpur--Logo_Bioincubator.png" class= "sponsor-img"></a>
−
      $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
+
  
−
     }
+
     <a href="http://www.snapgene.com/"><img src="https://static.igem.org/mediawiki/2018/a/a9/T--IIT_Kanpur--Logo_snapgene.png" class="sponsor-img"></a>
−
 
+
−
 
+
     <a href="https://www.geneious.com/"><img src="https://static.igem.org/mediawiki/2018/4/46/T--IIT_Kanpur--Logo_geneious.png" class= "sponsor-img"></a>
−
 
+
    <a href="https://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2018/7/7a/T--IIT_Kanpur--Logo_idt.png" class= "sponsor-img"></a>      
−
    // allow button on the black menu bar to show/hide the side menu
+
     <a href="https://www.mathworks.com/"><img src="https://static.igem.org/mediawiki/2018/2/29/T--IIT_Kanpur--Logo_mathworks.png" class= "sponsor-img"></a>      
−
    function hide_show_menu() {
+
</div>
−
 
+
</div>
−
      // in case you preview mode is selected, the menu is hidden for better visibility
+
−
      if (window.location.href.indexOf("submit") >= 0) {
+
−
        $(".igem_2017_menu_wrapper").hide();
+
−
      }
+
−
 
+
−
      // if the black menu bar has been loaded
+
−
        if (document.getElementById('bars_item')) {
+
−
 
+
−
        // when the "bars_item" has been clicked
+
−
        $("#bars_item").click(function() {
+
−
          $("#sideMenu").hide();
+
−
 
+
−
          // show/hide the menu wrapper
+
−
          $(".igem_2017_menu_wrapper").fadeToggle("100");
+
−
        });
+
−
        }
+
−
 
+
−
      // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
−
      else {
+
−
            setTimeout(hide_show_menu, 15);
+
−
      }
+
−
    }
+
−
 
+
−
 
+
−
  });
+
−
 
+
−
$(document).ready(function() {
+
−
  var visible = false;
+
−
  //Check to see if the window is top if not then display button
+
−
  $(window).scroll(function() {
+
−
    var scrollTop = $(this).scrollTop();
+
−
    if (!visible) {
+
−
      if (scrollTop > 400) {
+
−
        $("#scroll-to-top-btn").fadeIn();
+
−
        visible = true;
+
−
      }
+
−
    }
+
−
    else if (scrollTop <= 400) {
+
−
      $("#scroll-to-top-btn").fadeOut();
+
−
      visible = false;
+
−
    }
+
−
  });
+
−
 
+
−
  $("#scroll-to-top-btn").click(function() {
+
−
    $(window).scrollTo(0, 250);
+
−
  });
+
−
});
+
−
 
+
−
</script>
+
−
 
+
−
<div class="sponsors">
+
−
    <img src="https://static.igem.org/mediawiki/2018/7/76/T--Lund--sponsor_gant.png" alt="Gant Logo"
+
−
    style="height: 20px; width: auto">
+
−
    <img src="https://static.igem.org/mediawiki/2018/7/7c/T--Lund--sponsor_lmk.png" alt="LMK Logo"
+
−
    style="height: 100px; width: auto">
+
−
     <img src="https://static.igem.org/mediawiki/2018/8/8a/T--Lund--sponsor_lund.png" alt="Lund Logo"
+
−
    style="height: 125px; width: auto">
+
−
    <img src="https://static.igem.org/mediawiki/2018/1/14/T--Lund--sponsor_kunskap_partner.png" alt="Kunskap Partner Logo"
+
−
    style="height: 50px; width: auto">
+
−
  </div>
+
−
 
+
−
<footer class="footer">
+
−
 
+
−
  <section class="site-map container">
+
−
    <div class="row">
+
−
 
+
−
      <div class="col-sm-3">
+
−
        <h5>Home</h5>
+
−
        <ul>
+
−
          <li><a href="/Team:Lund">Home</a></li>
+
−
        </ul>
+
−
 
+
−
        <h5>Team</h5>
+
−
        <ul>
+
−
          <li><a href="/Team:Lund/Team">Team</a></li>
+
−
          <li><a href="/Team:Lund/Collaborations">Collaborations</a></li>
+
−
          <li><a href="/Team:Lund/Attributions">Attributions</a></li>
+
−
        </ul>
+
−
      </div>
+
−
 
+
−
      <div class="col-sm-3">
+
−
        <h5>Project</h5>
+
−
        <ul>
+
−
          <li><a href="/Team:Lund/Description">Description</a></li>
+
−
          <li><a href="/Team:Lund/Design">Design</a></li>
+
−
          <li><a href="/Team:Lund/Results">Results</a></li>
+
−
          <li><a href="/Team:Lund/InterLab">InterLab</a></li>
+
−
          <li><a href="/Team:Lund/Parts">Parts</a></li>
+
−
          <li><a href="/Team:Lund/Experiments">Protocol</a></li>
+
−
          <li><a href="/Team:Lund/Notebook">Notebook</a></li>
+
−
        </ul>
+
−
      </div>
+
−
 
+
−
      <div class="col-sm-3">
+
−
        <h5>Model</h5>
+
−
        <ul>
+
−
          <li><a href="/Team:Lund/Model">Results</a></li>
+
−
          <li><a href="/Team:Lund/Modeling/ModelDerivation">Model derivation</a></li>
+
−
          <li><a href="/Team:Lund/Modeling/ParameterEstimation">Parameter estimation</a></li>
+
−
          <li><a href="/Team:Lund/Modeling/Implementation">Implementation</a></li>
+
−
        </ul>
+
−
 
+
−
        <h5>Safety</h5>
+
−
        <ul>
+
−
          <li><a href="/Team:Lund/Safety">Safety</a></li>
+
−
        </ul>
+
−
      </div>
+
−
 
+
−
      <div class="col-sm-3">
+
−
        <h5>Practices</h5>
+
−
        <ul>
+
−
          <li><a href="/Team:Lund/HP/Silver">Overview</a>
+
−
          <li><a href="/Team:Lund/HP/Gold_Integrated">Integrated</a>
+
−
          <li><a href="/Team:Lund/Engagement">Engagement</a>
+
−
          <li><a href="/Team:Lund/HP/Media">Media</a>
+
−
          <li><a href="/Team:Lund/Communication">Communication</a>
+
−
        </ul>
+
−
      </div>
+
−
 
+
−
     </div>
+
−
  </section>
+
−
 
+
−
  <section class="container">
+
−
    <div class="row">
+
−
 
+
−
      <div class="contact col-sm-3">
+
−
        <h4>Contact</h4>
+
−
        <a>Sölvegatan 22 A</a><br>
+
−
        <a>223 62 Lund</a><br>
+
−
        <a> Sweden</a><br>
+
−
        <a href="mailto:igemlund@gmail.com">igemlund@gmail.com</a>
+
−
      </div>
+
−
 
+
−
      <div class="social-media col-sm-3 col-sm-offset-3">
+
−
        <h4>Stay connected</h4>
+
−
        <ul>
+
−
          <li>
+
−
            <a href="https://www.facebook.com/igemlund" target="_blank">
+
−
              <i class="fa fa-facebook-official" aria-hidden="true"></i>
+
−
              Facebook
+
−
            </a>
+
−
          </li>
+
−
          <li>
+
−
            <a href="https://www.instagram.com/igem_lund" target="_blank">
+
−
              <i class="fa fa-instagram" aria-hidden="true"></i>
+
−
              Instagram
+
−
            </a>
+
−
          </li>
+
−
          <li>
+
−
            <a href="https://twitter.com/iGEM_Lund" target="_blank">
+
−
              <i class="fa fa-twitter" aria-hidden="true"></i>
+
−
              Twitter
+
−
            </a>
+
−
          </li>
+
−
        </ul>
+
−
      </div>
+
−
 
+
−
    </div>
+
−
  </section>
+
−
 
+
−
  <section class="copyright container">
+
−
    &copy;2018 iGEM Lund
+
−
  </section>
+
−
 
+
−
</footer>
+
 
</html>
 
</html>

Latest revision as of 23:25, 17 October 2018