Difference between revisions of "Team:IIT Kanpur"

Line 1: Line 1:
−
{{Template:IIT_Kanpur}}
+
//{{Template:IIT_Kanpur}}//
−
{{Template:IIT_Kanpur/Footer}}
+
<html>
 +
<style>
 +
 
 +
/******* FOOTER ******/
 +
 
 +
#footer {
 +
margin:0;
 +
padding:0;
 +
height: 20%;
 +
    position: sticky;
 +
    bottom: -20%;
 +
}
 +
 
 +
/***************************************** FOOTNOTES (Social Media Links) ******************************************/
 +
 
 +
.footnotes-menu {       
 +
position: relative;
 +
        float: right;
 +
right: 6em;
 +
        bottom: 6em;
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
.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;
 +
  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;
 +
}
 +
 
 +
.menu-item a {
 +
  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;
 +
}
 +
 
 +
.menu-icon {
 +
height: 50px;
 +
width: 50px;
 +
margin: auto;
 +
padding: 10 10 10 10;
 +
}
 +
 
 +
/******************** SPONSORS BAR ************************/
 +
#sponsors-bar {
 +
margin:0;
 +
padding:0;
 +
}
 +
 
 +
.sponsor-img {
 +
padding: 1%;
 +
max-width: 10%;
 +
height:auto;
 +
}
 +
 
 +
#img-squarish {
 +
padding: 1%;
 +
max-width: 6%;
 +
height:auto;
 +
}
 +
</style>
 +
 
 +
<div id = "footer">
 +
 
 +
<!-- FOOTNOTES (social media links) -->
 +
<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/2017/3/39/Icon-igem.png" alt="Home">
 +
  </a>
 +
    </li>
 +
   
 +
 
 +
<li class="menu-item">
 +
      <a href="http://www.rice.edu" target="_blank">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2017/6/6d/Icon-rice.png" alt="Rice" height="50" width ="50">
 +
  </a>
 +
    </li>
 +
<li class="menu-item">
 +
      <a href="mailto:riceuniversityigem@gmail.com" target="top">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2017/9/94/Icon-gmail.png" alt="Gmail" height="50" width ="50">
 +
  </a>
 +
    </li>
 +
<li class="menu-item">
 +
      <a href="https://instagram.com/riceuniversityigem" target="_blank">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2017/5/51/Icon-instagram.png" alt="Instagram" height="50" width ="50">
 +
  </a>
 +
    </li>
 +
  <li class="menu-item">
 +
      <a href="https://www.facebook.com/riceuniversityigem" target="_blank">
 +
<img class="menu-icon" src="https://static.igem.org/mediawiki/2017/0/0c/Icon-facebook.png" alt="Facebook" height="50" width ="50">
 +
      </a>
 +
    </li>
 +
 
 +
<li class="menu-item">
 +
      <a href="https://www.twitter.com/Rice_iGEM" target="_blank">
 +
        <img class="menu-icon" src="https://static.igem.org/mediawiki/2017/6/6f/Icon-twitter.png" alt="Twitter" height="50" width ="50">
 +
      </a>
 +
    </li>
 +
  </ul>
 +
</div>
 +
 
 +
<div id = "sponsors-bar" style="background-color: #606060">
 +
    <a href="http://natsci.rice.edu/"><img src="https://static.igem.org/mediawiki/2017/2/27/Logo_wiess.png" class = "sponsor-img" id="img-squarish"></a>
 +
    <a href="https://engineering.rice.edu/"><img src="https://static.igem.org/mediawiki/2017/7/7a/Logo_riceengineering.png"  class = "sponsor-img" id="img-squarish"></a>
 +
    <a href="http://biosciences.rice.edu/"><img src="https://static.igem.org/mediawiki/2017/d/de/Logo_biosciences.png" class = "sponsor-img"></a>
 +
    <a href="http://bioe.rice.edu/"><img src="https://static.igem.org/mediawiki/2017/b/b3/Logo_bioengineering.png"  class="sponsor-img"></a>
 +
    <a href="https://chbe.rice.edu/"><img src="https://static.igem.org/mediawiki/2017/5/5d/Logo_chbe.png" class= "sponsor-img"></a>
 +
    <a href="http://www.hhmi.org/"><img src="https://static.igem.org/mediawiki/2017/1/1b/Logo_hhmi.png" class= "sponsor-img"></a>
 +
    <a href="https://www.idtdna.com/site"><img src="https://static.igem.org/mediawiki/2017/7/72/Logo_idt.png" class= "sponsor-img"></a>       
 +
    <a href="https://www.mathworks.com/"><img src="https://static.igem.org/mediawiki/2017/7/7c/Logo_mathworks.png" class= "sponsor-img"></a>       
 +
</div>
 +
</div>
 +
</html>
 +
 
 +
//{{Template:IIT_Kanpur/Footer}}//

Revision as of 04:39, 14 October 2018

//

//

//

//