View source for Team:Imperial College/Templates/Footer

<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>

.footer{ 
    width:80%; 
    height:300px; 
    border-top: 3px solid #24305E  ;
    margin:auto;
    margin-top: 5%;
} 

.footer ul{
    margin:4%  39%;
    text-align:right;
    display:flex;
    position:absolute;
    transform: translate(-50%, -50%);
}
.footer ul li{
    list-style: none;
    margin-right: 10%;
}
.footer h4{
    text-align: center;
    background-color:none;
    position: absolute;
    margin: 120px 0 0 36%;
    font-size: 12px;
 
}

.footer ul li a{
    text-align: center;
    line-height: 70px;
    font-size:30px;
    margin:0 10px;
    display:block;
    position: relative;
    z-index: 1;
}

.footer ul li a .fa{
    position: relative;
    color: black;
    transition: 0.5s;
    background-color: none;
}

.f1 a:hover .fa{
    color: #3b5998;
    transform: rotateY(360deg);
}

.f1 a:before{
    content:'';
    position: absolute;
    top:100%;
    left:0;
    background: #3b5998;
    transition:0.5s;
    z-index: 2;
}


.f1 a:before{
    content:'';
    position: absolute;
    top:100%;
    left:0;
    background: #3b5998;
    transition:0.5s;
    z-index: 2;
}
.t2 a:hover .fa{
    color:  #55acee;
    transform: rotateY(360deg);
}

.t2 a:before{
    content:'';
    position: absolute;
    top:100%;
    left:0;
    background:  #55acee;
    transition:0.5s;
    z-index: 2;
}
.i3 a:hover .fa{
    color: #C32AA3;
    transform: rotateY(360deg);
}

.i3 a:before{
    content:'';
    position: absolute;
    top:100%;
    left:0;
    background: #C32AA3;
    transition:0.5s;
    z-index: 2;
}
.g4 a:hover .fa{
    color: #dd4b39;
    transform: rotateY(360deg);
}

.g4 a:before{
    content:'';
    position: absolute;
    top:100%;
    left:0;
    background: #dd4b39;
    transition:0.5s;
    z-index: 2;
}

.x5 a:hover .fa{
    color: RGB(50,49,49);
    transform: rotateY(360deg);
}

.x5 a:before{
    content:'';
    position: absolute;
    top:100%;
    left:0;
    background: lightgoldenrodyellow;
    transition:0.5s;
    z-index: 2;
}


.sponsBox{
    margin:auto;   
    float:left;
    margin-top:15%; 
}
.sponsBox img{ 
    margin-left:2%;
    margin-bottom: 1%;
    padding-right:30px; 
    padding-left:5px; 
    box-sizing:border-box; 
}

</style>
</head>

<div class="footer">
        <div class="socialicons">
                <ul>
                    <li class="f1"><a href="https://www.facebook.com/imperialigem/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                    <li class="t2"><a href="https://twitter.com/imperialigem?lang=en" target="_blank"><i class="fa fa-twitter" 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="x5"><a href="#" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></li>
                </ul>
                    <h4><i class="fa fa-envelope-o" aria-hidden="true"></i>official.imperial.igem@gmail.com</h4>
                </div>
                <div class="sponsBox">

        <a target="_blank" href="http://www.imperial.ac.uk/synthetic-biology/centre/">
                    <img src="https://static.igem.org/mediawiki/2018/7/75/T--Imperial_College--CSynB.jpg"  width="20%" >
        </a>
        <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="12%">
         </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>
    </html>