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

 
(30 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<style>
 
<style>
  
 +
<html>
 +
<style>
  
−
/* Code for removing iGEM loader content */
+
/******* FOOTER ******/
  
−
#sideMenu, #top_title, #top, #toc{
+
#footer {
−
  display: none;
+
margin:0;
 +
padding:0;
 +
height: 20%;
 +
margin-top:200px;
 +
    position: sticky;
 +
top: 20%;
 +
  bottom: -20%;
 
}
 
}
  
−
/* Content styling */
+
/***************************************** FOOTNOTES (Social Media Links) ******************************************/
  
−
#content {
+
.footnotes-menu {      
−
  width: 100%;
+
position: relative;
−
  height: 100%;
+
        float: right;
−
  box-sizing: border-box;
+
right: 6em;
−
  margin: -31px 0 0;
+
        bottom:6em;
−
  padding: 0;
+
 
}
 
}
  
−
body {
+
.menu-toggler {
−
    margin: 0;
+
  position: absolute;
−
    height: 100%;
+
  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;
 
}
 
}
  
 +
.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);
 +
}
  
 +
.menu-toggler:checked ~ ul .menu-item {
 +
  opacity: 1;
 +
}
 +
.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;
−
.clearfix::after {
+
  height: 5px;
−
    content: "";
+
  display: block;
−
    clear: both;
+
  z-index: 5;
−
    display: table;
+
  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;
 
}
 
}
  
−
.fch {
+
.menu-item {
−
    border-bottom: 2px solid !important;
+
  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;
 
}
 
}
  
−
.fch tr:nth-child(1) th:nth-child(1) {
+
.menu-item a {
−
    border-bottom: 2px solid !important;
+
  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;
 
}
 
}
  
−
.fch tr th:nth-child(1) {
+
.menu-icon {
−
    border: none !important;
+
height: 50px;
 +
width: 50px;
 +
margin: auto;
 +
padding: 10 10 10 10;
 
}
 
}
  
−
#contentMain li {
+
/******************** SPONSORS BAR ************************/
−
    font-size: 1.25em;
+
#sponsors-bar {
−
    line-height: 1.9;
+
margin:0;
 +
padding:0;
 
}
 
}
  
−
#contentMain table li {
+
.sponsor-img {
−
    font-size: 1em;
+
padding: 1%;
 +
max-width: 10%;
 +
height:auto;
 
}
 
}
  
−
 
+
#img-squarish {
−
 
+
padding: 1%;
−
 
+
max-width: 6%;
−
 
+
height:auto;
−
 
+
}
−
/* Footer styling */
+
−
 
+
−
        #pagefooter {
+
−
            width: 100%;
+
−
            position: fixed;
+
−
            bottom: -250px;
+
−
            left: 0;
+
−
            background-color: #23e082;
+
−
            transition: all 0.5s ease;
+
−
            padding-left: 10px;
+
−
            z-index: 2;
+
−
            font-family: "Poppins", sans-serif;
+
−
        }
+
−
        #smallfooter {
+
−
            transition: all 0.5s ease;
+
−
        }
+
−
        .expanded {
+
−
            bottom: 0 !important;
+
−
            transition: all 0.5s ease;
+
−
        }
+
−
        .expanded #smallfooter {
+
−
            opacity: 0;
+
−
            transition: all 0.5s ease;
+
−
        }
+
−
        .footerarrow {
+
−
            position: absolute;
+
−
            top: 4px;
+
−
            left: 50%;
+
−
            transform: translateX(-50%);
+
−
            transition: transform 0.5s ease-in;
+
−
            height: 12px;
+
−
        }
+
−
        .inverted {
+
−
            transform: rotate(180deg);
+
−
            transition: transform 0.5 ease-in;
+
−
        }
+
−
        #bigfooter table {
+
−
            border: none;
+
−
            background: none;
+
−
        }
+
−
        #bigfooter table tr td {
+
−
            border: none;
+
−
            background: none;
+
−
        }
+
−
        #bigfooter table tr th {
+
−
            border: none;
+
−
            background: none;
+
−
            font-family: "Raleway-ExtraBold", sans-serif;
+
−
            font-size: 2em;
+
−
            letter-spacing: 1px;
+
−
            text-transform: uppercase;
+
−
        }
+
−
        #footericons {
+
−
            float: right;
+
−
            margin-right: 20px;
+
−
        }
+
−
        #footericons img{
+
−
            height: 18px;
+
−
            margin-right: 10px;
+
−
            margin-bottom: 2px;
+
−
        }
+
−
        #bigfooter {
+
−
            width: 100%;
+
−
            position: relative;
+
−
            display: block;
+
−
            height: 250px;
+
−
        }
+
−
        #footersponsors {
+
−
            width: 60%;
+
−
            float: left;
+
−
        }
+
−
        #footersponsors img {
+
−
            height: 100%;
+
−
        }
+
−
        #footercontact {
+
−
            width: 40%;
+
−
            float: right;
+
−
        }
+
−
        #footercontact img {
+
−
            height: 50px;
+
−
        }
+
−
        #footersponsors td {
+
−
            text-align: center;
+
−
            height: 70px;
+
−
        }
+
−
 
+
 
</style>
 
</style>
  
−
<div id="contentWrapper">
+
<div id = "footer">
−
<div style="position: fixed; width: 100%; top: 16px; left: 0; z-index: 1;">
+
−
 
+
  
−
<div id="pagefooter" class="clearfix">
+
<!-- FOOTNOTES (social media links) -->
−
        <div id="smallfooter" class="clearfix">
+
<div class="footnotes-menu">
−
            <div id="footericons">
+
  <input class="menu-toggler" id="menu-toggler" type="checkbox">
−
                <a href="https://www.facebook.com/bioluminatiigem/"><img src="https://static.igem.org/mediawiki/2018/a/a2/T--IIT_Kanpur--fb.svg" /></a><a href="https://twitter.com/igemiit?lang=en"><img src="https://static.igem.org/mediawiki/2018/f/f7/T--IIT_Kanpur--twitter.svg" /></a><a href="mailto:teamigemiitk2k18@gmail.com"><img src="https://static.igem.org/mediawiki/2018/5/5d/T--IIT_Kanpur--mail.svg" /></a><a href="https://www.instagram.com/igem_iitk/"><img src="https://static.igem.org/mediawiki/2018/2/22/T--IIT_Kanpur--insta.svg" /></a>
+
  <label for="menu-toggler"></label>
−
            </div>
+
  <ul>
−
        </div>
+
      <li class="menu-item">
−
        <img class="footerarrow" src="https://static.igem.org/mediawiki/2018/a/a8/T--IIT_Kanpur--arrow.png" width="20px" />
+
      <a href="https://igem.org/Main_Page" target="_blank">
−
        <div id="bigfooter" class="clearfix">
+
<img class="menu-icon" src="https://static.igem.org/mediawiki/2018/7/78/T--IIT_Kanpur--Icon-igem.png" alt="Home">
−
            <div id="footersponsors">
+
  </a>
−
<table style="margin: auto">
+
    </li>
−
<tr>
+
   
 +
 
 +
<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>
  
−
<th colspan="6" style="text-align: center;">Sponsors</th>
+
<li class="menu-item">
−
 
+
      <a href="https://twitter.com/IgemIit" target="_blank">
−
</tr>
+
        <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">
−
<tr>
+
      </a>
−
<td colspan="2"><a href="https://www.iitk.ac.in/"><img src="https://static.igem.org/mediawiki/2018/3/3d/T--IIT_Kanpur--IITKlogo.png"></a></td>
+
    </li>
−
<td colspan="2"><a href="https://in.mathworks.com/"><img src="https://static.igem.org/mediawiki/2018/b/ba/T--IIT_Kanpur--mw.png"></a></td>
+
  </ul>
−
<td colspan="2"><a href="https://eu.idtdna.com/pages"><img src="https://static.igem.org/mediawiki/2018/1/10/T--IIT_Kanpur--idt.png"></a></td>
+
−
</tr>
+
−
<tr>
+
−
<td colspan="2"><a href="https://www.geneious.com/"><img src="https://static.igem.org/mediawiki/2018/a/ae/T--IIT_Kanpur--geneious.png"></a></td>
+
−
<td colspan="2"><a href="http://www.snapgene.com/"><img src="https://static.igem.org/mediawiki/2018/8/84/T--IIT_Kanpur--snapgene.png"></a></td>
+
−
<td colspan="2"><a href="http://www.iitk.ac.in/siic/d/birac-bio-incubator"><img src="https://static.igem.org/mediawiki/2018/5/57/T--IIT_Kanpur--birac.png"></a></td>
+
−
</tr>
+
−
 
+
−
                </table>
+
−
            </div><div id="footercontact">
+
−
                <table style="margin: auto">
+
−
                    <tr><th colspan="6" style="text-align: center; font-family: "Poppins", sans-serif;">Contact</th></tr>
+
−
                    <tr><td>&nbsp;</td></tr>
+
−
                    <tr>
+
−
                        <td><a href="https://www.facebook.com/bioluminatiigem/"><img src="https://static.igem.org/mediawiki/2018/a/a2/T--IIT_Kanpur--fb.svg" /></a></td>
+
−
                        <td><a href="https://twitter.com/igemiit?lang=en"><img src="https://static.igem.org/mediawiki/2018/f/f7/T--IIT_Kanpur--twitter.svg" /></a></td>
+
−
                        <td><a href="mailto:teamigemiitk2k18@gmail.com"><img src="https://static.igem.org/mediawiki/2018/5/5d/T--IIT_Kanpur--mail.svg" /></a></td>
+
−
                        <td><a href="https://www.instagram.com/igem_iitk/"><img src="https://static.igem.org/mediawiki/2018/2/22/T--IIT_Kanpur--insta.svg" /></a></td>
+
−
                    </tr>
+
−
                    <tr><td>&nbsp;</td></tr>
+
−
                </table>
+
−
            </div>
+
−
        </div>
+
−
    </div>
+
 
</div>
 
</div>
  
−
<script>
+
<div id = "sponsors-bar" style="background-color: #222">
−
     $("#pagefooter").click(function() {
+
     <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>
−
        $("#pagefooter").toggleClass("expanded");
+
  <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>
−
        $(".footerarrow").toggleClass("inverted");
+
−
    });
+
  
−
</script>
+
    <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>       
 +
    <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>       
 +
</div>
 +
</div>
 
</html>
 
</html>

Latest revision as of 23:25, 17 October 2018