Difference between revisions of "Team:Imperial College/Templates/Footer"

 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<html>
+
<html>
 +
        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
 +
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 +
<head>
 
<style>
 
<style>
 +
 
.footer{  
 
.footer{  
−
     width:100%;  
+
     width:80%;  
 
     height:300px;  
 
     height:300px;  
 
     border-top: 3px solid #24305E  ;
 
     border-top: 3px solid #24305E  ;
Line 10: Line 14:
  
 
.footer ul{
 
.footer ul{
−
     margin:60px 0 0 43%;
+
     margin:4%  39%;
 
     text-align:right;
 
     text-align:right;
 
     display:flex;
 
     display:flex;
 
     position:absolute;
 
     position:absolute;
 
     transform: translate(-50%, -50%);
 
     transform: translate(-50%, -50%);
−
    background-color:none;
 
 
}
 
}
 
.footer ul li{
 
.footer ul li{
 
     list-style: none;
 
     list-style: none;
 +
    margin-right: 10%;
 
}
 
}
 
.footer h4{
 
.footer h4{
Line 25: Line 29:
 
     position: absolute;
 
     position: absolute;
 
     margin: 120px 0 0 36%;
 
     margin: 120px 0 0 36%;
−
     font-size: 15px;
+
     font-size: 12px;
 
   
 
   
 
}
 
}
  
 
.footer ul li a{
 
.footer ul li a{
−
    width: 62px;
 
−
    height:62px;
 
 
     text-align: center;
 
     text-align: center;
 
     line-height: 70px;
 
     line-height: 70px;
−
     font-size:25px;
+
     font-size:30px;
 
     margin:0 10px;
 
     margin:0 10px;
 
     display:block;
 
     display:block;
−
    border-radius: 50%;
 
 
     position: relative;
 
     position: relative;
−
    overflow: hidden;
 
−
    border: 3px solid white;
 
−
    background-color: white;
 
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}
Line 62: Line 60:
 
     top:100%;
 
     top:100%;
 
     left:0;
 
     left:0;
−
    width:100%;
 
−
    height:100%;
 
 
     background: #3b5998;
 
     background: #3b5998;
 
     transition:0.5s;
 
     transition:0.5s;
 
     z-index: 2;
 
     z-index: 2;
 
}
 
}
−
.f1 a:hover .fa{
+
 
−
    color: #3b5998;
+
−
    transform: rotateY(360deg);
+
−
}
+
  
 
.f1 a:before{
 
.f1 a:before{
Line 78: Line 71:
 
     top:100%;
 
     top:100%;
 
     left:0;
 
     left:0;
−
    width:100%;
 
−
    height:100%;
 
 
     background: #3b5998;
 
     background: #3b5998;
 
     transition:0.5s;
 
     transition:0.5s;
Line 94: Line 85:
 
     top:100%;
 
     top:100%;
 
     left:0;
 
     left:0;
−
    width:100%;
 
−
    height:100%;
 
 
     background:  #55acee;
 
     background:  #55acee;
 
     transition:0.5s;
 
     transition:0.5s;
Line 110: Line 99:
 
     top:100%;
 
     top:100%;
 
     left:0;
 
     left:0;
−
    width:100%;
 
−
    height:100%;
 
 
     background: #C32AA3;
 
     background: #C32AA3;
 
     transition:0.5s;
 
     transition:0.5s;
Line 126: Line 113:
 
     top:100%;
 
     top:100%;
 
     left:0;
 
     left:0;
−
    width:100%;
 
−
    height:100%;
 
 
     background: #dd4b39;
 
     background: #dd4b39;
 
     transition:0.5s;
 
     transition:0.5s;
Line 134: Line 119:
  
 
.x5 a:hover .fa{
 
.x5 a:hover .fa{
−
     color: lightgoldenrodyellow;
+
     color: RGB(50,49,49);
 
     transform: rotateY(360deg);
 
     transform: rotateY(360deg);
 
}
 
}
Line 143: Line 128:
 
     top:100%;
 
     top:100%;
 
     left:0;
 
     left:0;
−
    width:100%;
 
−
    height:100%;
 
 
     background: lightgoldenrodyellow;
 
     background: lightgoldenrodyellow;
 
     transition:0.5s;
 
     transition:0.5s;
 
     z-index: 2;
 
     z-index: 2;
−
}
 
−
 
−
.footer ul li a:hover:before{
 
−
    top:0;
 
−
   
 
 
}
 
}
  
  
 
.sponsBox{
 
.sponsBox{
−
     margin:auto;
+
     margin:auto; 
 +
    float:left;
 +
    margin-top:15%;  
 
}
 
}
 
.sponsBox img{  
 
.sponsBox img{  
−
     float:left;
+
     margin-left:2%;
−
    width:13%;
+
     margin-bottom: 1%;
−
    height:auto;
+
−
     margin-top:200px;
+
−
    margin-left:5%;
+
 
     padding-right:30px;  
 
     padding-right:30px;  
 
     padding-left:5px;  
 
     padding-left:5px;  
−
    border:none ;
 
 
     box-sizing:border-box;  
 
     box-sizing:border-box;  
−
    background-color: none;
 
 
}
 
}
 +
 
</style>
 
</style>
 +
</head>
 +
 
<div class="footer">
 
<div class="footer">
 
         <div class="socialicons">
 
         <div class="socialicons">
Line 179: Line 157:
 
                     <li class="i3"><a href="https://www.instagram.com/igem_imperial_2018/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
 
                     <li class="i3"><a href="https://www.instagram.com/igem_imperial_2018/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
 
                     <li class="g4"><a href="mailto:official.imperial.igem@gmail.com" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
 
                     <li class="g4"><a href="mailto:official.imperial.igem@gmail.com" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
−
                     <li class="x5"><a href="#" target="_blank"><i class="fa fa-question" aria-hidden="true"></i></a></li>
+
                     <li class="x5"><a href="https://github.com/icigem/ICiGEM2018" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></li>
 
                 </ul>
 
                 </ul>
−
                     <h4><i class="fa fa-envelope-o" aria-hidden="true"></i>official.imperial.igem@gmail.com</h4>
+
                     <h4><i class="fa fa-envelope-o" aria-hidden="true"></i> official.imperial.igem@gmail.com</h4>
 
                 </div>
 
                 </div>
 
                 <div class="sponsBox">
 
                 <div class="sponsBox">
−
                     <img src="eppendorf.png" style="margin-left:100px">
+
 
−
                     <img src="BMG.jpg" >
+
        <a target="_blank" href="http://www.imperial.ac.uk/synthetic-biology/centre/">
−
                     <img src="biolabs.png">
+
                     <img src="https://static.igem.org/mediawiki/2018/7/75/T--Imperial_College--CSynB.jpg"  width="20%" >
−
                     <img src="arbor.png">
+
        </a>
−
                     <img src="IDT.png">
+
        <a target="_blank" href="https://arborbiosci.com/">
 +
                    <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Imperial_College--arbor.png"width="14%" >
 +
        </a>
 +
        <a target="_blank" href="https://benchling.com/enterprise/our-mission">
 +
                    <img src="https://static.igem.org/mediawiki/2018/5/56/T--Imperial_College--benchling.svg" width="13%">
 +
        </a>
 +
        <a target="_blank" href="https://www.neb.uk.com/">
 +
                     <img src="https://static.igem.org/mediawiki/2018/c/c0/T--Imperial_College--biolabs.png"width="12%" >
 +
        </a>
 +
        <a target="_blank" href="https://www.biolegio.com/">
 +
                    <img src="https://static.igem.org/mediawiki/2018/8/81/T--Imperial_College--biolegiologo.png" width="14%">
 +
        </a>
 +
<a target="_blank" href="http://www.bmglabtech.com/">
 +
                    <img src="https://static.igem.org/mediawiki/2018/e/ee/T--Imperial_College--BMG.png"width="14%"  >
 +
        </a>
 +
<a target="_blank" href="https://clarafi.com/">
 +
                     <img src="https://static.igem.org/mediawiki/2018/1/1a/T--Imperial_College--clarafi.png" width="11%">
 +
        </a>
 +
<a target="_blank" href="https://www.eppendorf.com/UK-en/">
 +
                     <img src="https://static.igem.org/mediawiki/2018/d/d7/T--Imperial_College--eppendorf.png"  width="14%" >
 +
        </a>
 +
        <a target="_blank" href="https://www.idtdna.com/pages">
 +
                     <img src="https://static.igem.org/mediawiki/2018/2/20/T--Imperial_College--IDT.png"width="13%" >
 +
        </a>
 +
        <a target="_blank" href="https://www.autodesk.co.uk/products/maya/overview">
 +
                    <img src="https://static.igem.org/mediawiki/2018/b/ba/T--Imperial_College--maya.png" width="14%">
 +
        </a>
 +
        <a target="_blank" href="http://www.snapgene.com/">
 +
                    <img src="https://static.igem.org/mediawiki/2018/2/26/T--Imperial_College--SnapGene_Logo_%28White%29_576.png" width="14%">
 +
        </a>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
</html>
+
    </html>

Latest revision as of 01:04, 18 October 2018