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

Line 1: Line 1:
 
  <html>
 
  <html>
−
<body>
+
        <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:90%;  
 
     height:300px;  
 
     height:300px;  
 
     border-top: 3px solid #24305E  ;
 
     border-top: 3px solid #24305E  ;
Line 11: 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 31: Line 34:
  
 
.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:40px;
 
     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 63: 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 79: 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 95: 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 111: 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 127: 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 144: 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;  
−
     clear:both;
+
     float:left;
 +
    margin-top:15%;  
 
}
 
}
 
.sponsBox img{  
 
.sponsBox img{  
−
    float:left;
 
−
    width:13%;
 
−
    height:auto;
 
−
    margin-top:200px;
 
 
     margin-left:5%;
 
     margin-left:5%;
 +
    margin-bottom: 3%;
 
     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">
Line 187: Line 162:
 
                 </div>
 
                 </div>
 
                 <div class="sponsBox">
 
                 <div class="sponsBox">
−
                     <img src="eppendorf.png" style="margin-left:100px">
+
                     <img src="eppendorf.png" width="13%" >
−
                     <img src="BMG.jpg" >
+
                     <img src="BMG.jpg"width="15%"  >
−
                     <img src="biolabs.png">
+
                     <img src="biolabs.png"width="13%" >
−
                     <img src="arbor.png">
+
                     <img src="arbor.png"width="13%" >
−
                     <img src="IDT.png">
+
                     <img src="IDT.png"width="13%" >
−
<div class="clr"></div>
+
                    <img src="clarafi.png" width="11%">
 +
                    <img src="MM.png" width="16%">
 +
                    <img src="SnapGene Logo (White) 576.png" width="15%">
 +
                 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
</div>
+
    </html>
−
</body>
+
−
</html>
+

Revision as of 01:44, 14 September 2018