Difference between revisions of "Template:Manchester/Footer"

 
(89 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<html>
 
<html>
  
−
<footer style= "background-color:#ffffff">
+
<head>
 +
<!--visualisation-->
 +
<script type="text/javascript" src="https://2017.igem.org/Team:Manchester/Resources/JS:fontawesome?action=raw&ctype=text/javascript"></script>
 +
</head>
  
−
<!--imgs -->
+
<style>
  
−
<div id="logosrow1">
+
html {
 +
  background-color: #ffffff!important;
 +
  margin: 0px!important
 +
}
  
−
<a href="https://www.idtdna.com/pages"><img src="https://2018.igem.org/wiki/image/T--Manchester--IDTsponsorlogo.png" width="180" height="auto"></a>
+
body {
−
<a href="https://uk.mathworks.com"><img src="https://2018.igem.org/wiki/image/T--Manchester--Mathworkssponsorlogo.png" width="180" height="auto"></a>
+
  background-color: #ffffff!important;
−
<a href="http://www.mib.ac.uk"><img src="https://2018.igem.org/wiki/image/T--Manchester--MIBsponsorlogo.png" width="180" height="auto"></a>
+
  margin: 0px!important;
−
<a href="https://www.promega.co.uk"><img src="https://2018.igem.org/wiki/image/T--Manchester--Promegasponsorlogo.png" width="180" height="auto"></a>
+
}
  
−
</div>
 
  
−
<br><div id="logorow2">
+
.footer-distributed {
 +
        clear: both;
 +
box-sizing: border-box;
 +
width: 100%;
 +
text-align: left;
 +
        padding-left: 2%!important;
 +
        padding-right: 5%!important;
 +
margin-top: 20px;
 +
        margin-bottom: 20px;
 +
}
  
−
<a href="https://international.neb.com/"><img src="https://2018.igem.org/wiki/image/T--Manchester--NEBsponsorlogo.PNG" width="180" height="auto"></a>
+
.footer-distributed .footer-left p {
−
<a href="http://synbiochem.co.uk/"><img src="https://2018.igem.org/wiki/image/T--Manchester--SynBiochemsponsorlogo.png" width="180" height="auto"></a>
+
        color: black;
−
<a href="http://www.snapgene.com/"><img src="https://2018.igem.org/wiki/image/T--Manchester--SnapgeneSponsorlogo.PNG" width="180" height="auto"></a>
+
font-size: 14px;
−
<a href="https://www.manchester.ac.uk/"><img src="https://2018.igem.org/wiki/image/T--Manchester--UoMsponsorlogo.PNG" width="180" height="auto"></a>
+
margin: 0;
 +
}
 +
.footer-distributed .footer-right p{
 +
        color: black;
 +
font-size: 14px;
 +
margin: 0;
 +
}
  
−
</div>
+
/* Footer links */
  
−
<!-- Add icon library -->
+
.footer-distributed p.footer-links{
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
font-size: 18px;
−
<div id="socialmedia">
+
font-weight: bold;
−
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
color:  black;
 +
margin: 0 0 10px;
 +
padding: 0;
 +
}
  
−
<a href="https://www.facebook.com/igem.mancheester.3" class="fa fa-facebook"></a>
 
−
<a href="https://twitter.com/UoM_iGem_2018" class="fa fa-twitter"></a>
 
−
<a href="https://www.instagram.com/man_cheester/" class="fa fa-instagram"></a>
 
−
</id>
 
  
−
<style>
+
.footer-distributed p.footer-links a{
−
/* Style all font awesome icons */
+
display:inline-block;
−
.fa {
+
line-height: 1.8;
−
  padding: 20px;
+
text-decoration: none;
−
  font-size: 30px;
+
color: inherit;
−
  width: 30px;
+
−
  text-align: center;
+
−
  text-decoration: none;
+
−
  margin: 5px 2px;
+
−
  border-radius: 50%;
+
 
}
 
}
  
−
/* Add a hover effect if you want */
+
.footer-distributed .footer-right{
−
.fa:hover {
+
float: right;
−
    opacity: 0.7;
+
margin-top: 6px;
 +
margin-left: 15px;
 +
padding-left: 15px;
 +
max-width: 450px;
 
}
 
}
  
−
/* Set a specific color for each brand */
 
  
−
.fa-facebook {
+
 
−
  background: #282e34;
+
.footer-distributed .footer-right a{
−
  color: white;
+
display: inline-block;
 +
width: 50px;
 +
height: 35px;
 +
background-color: transparent;
 +
border-radius: 2px;
 +
font-size: 20px;
 +
color: purple;
 +
text-align: center;
 +
line-height: 35px;
 +
margin-left: 3px;
 
}
 
}
  
−
.fa-twitter {
+
.sponsors {
−
  background: #55ACEE;
+
            margin: 10px;
−
  color: white;
+
            width: 200px;
 
}
 
}
  
−
.fa-instagram {
+
.sponsors:hover {
−
  background: #125688;
+
    opacity:0.9;
−
  color: white;
+
    box-shadow:2px 2px 2px #888888;
 +
    transition: all 0.4 ease;
 
}
 
}
  
−
#logosrow1 {
+
.sociallogo {
−
float: left;
+
        width: 30px;
−
padding: 3% 0.5% 1%
+
        margin: 8px;
 +
        padding-bottom: 20px;
 +
        padding-top: 80px;
 +
          }
 +
 
 +
.fa:hover {
 +
    opacity: 0.7;
 
}
 
}
  
−
#socialmedia {
+
 
−
float: right;
+
/* If you don't want the footer to be responsive, remove these media queries */
−
+
 
−
}
+
@media (max-width: 600px) {
−
#logosrow2{
+
 
−
float: left;
+
.footer-distributed .footer-left,
−
3% 0.5% 1%
+
.footer-distributed .footer-right{
 +
text-align: center;
 +
}
 +
 
 +
.footer-distributed .footer-right{
 +
float: none;
 +
margin: 0 auto 20px;
 +
                border-left: none!important
 +
}
 +
 
 +
.footer-distributed .footer-left p.footer-links{
 +
line-height: 1.8;
 +
        }
 +
 
 
}
 
}
 
</style>
 
</style>
 +
 +
 +
<body>
 +
<footer class="footer-distributed">
 +
 +
  <div class="footer-right">
 +
  <p style="text-align:left;padding-bottom:2px;font-size:150%;font-style: bold;padding-top:5px;"><b>FIND US:</b></p>
 +
    <p style="text-align:left;padding:2px 0;font-size:150%;font-style: bold;">Manchester Institute of Biotechnology</p>
 +
    <p style="text-align:left;padding:2px 0;font-size:150%;font-style: bold;">The University of Manchester</p>
 +
    <p style="text-align:left;padding:2px 0;font-size:150%;font-style: bold;">131 Princess Street</p>
 +
    <p style="text-align:left;padding:2px 0;font-size:150%;font-style: bold;">Manchester, M1 7DN, UK</p>
 +
    <p style="text-align:left;padding:2px 0;font-size:150%;font-style: bold;"><a href="#" target="_blank">manchesterigemteam2018@gmail.com</a></p>
 +
                  <a target="_blank" href="mailto:manchesterigemteam2018@gmail.com"><i class="fa fa-envelope fa-2x"></i></a> 
 +
        <a target="_blank" href="https://www.facebook.com/igem.mancheester.3"><i class="fa fa-facebook fa-2x"></i></a>
 +
  <a target="_blank" href="https://twitter.com/UoM_iGem_2018"><i class="fa fa-twitter fa-2x"></i></a>
 +
  <a target="_blank" href="https://www.instagram.com/man_cheester/"><i class="fa fa-instagram fa-2x"></i></a>
 +
               
 +
 +
</div>
 +
 +
<div class="footer-left">
 +
<p class="footer-links">
 +
        <a target="_blank" href="http://www.manchester.ac.uk/">
 +
<img class="sponsors" src="https://2018.igem.org/wiki/image/T--Manchester--UoMsponsorlogo.PNG"></a>
 +
 +
        <a target="_blank" href="https://www.idtdna.com/pages">
 +
<img class="sponsors" src="https://2018.igem.org/wiki/image/T--Manchester--IDTsponsorlogo.png"></a>
 +
 +
        <a target="_blank" href="https://uk.mathworks.com">
 +
<img class="sponsors" src="https://2018.igem.org/wiki/image/T--Manchester--Mathworkssponsorlogo.png"></a>
 +
             
 +
  <a target="_blank" href="http://www.mib.ac.uk">
 +
<img class="sponsors" src="https://2018.igem.org/wiki/image/T--Manchester--MIBsponsorlogo.png"></a>
 +
 +
<a target="_blank" href="https://www.promega.co.uk">
 +
<img class="sponsors" src="https://static.igem.org/mediawiki/2018/6/6c/T--Manchester--promeg.PNG"></a>
 +
 +
<a target="_blank" href="https://international.neb.com/">
 +
<img class="sponsors" src="https://2018.igem.org/wiki/image/T--Manchester--NEBsponsorlogo.PNG"></a>
 +
 +
<a target="_blank" href="http://synbiochem.co.uk/">
 +
<img class="sponsors" src="https://2018.igem.org/wiki/image/T--Manchester--SynBiochemsponsorlogo.png"></a>
 +
 +
<a target="_blank" href="http://www.snapgene.com/">
 +
<img class="sponsors" src="https://2018.igem.org/wiki/image/T--Manchester--SnapgeneSponsorlogo.PNG"></a>
 +
 +
</p>
 +
 +
    </div>
 +
 
</footer>
 
</footer>
 +
</body>
 
</html>
 
</html>

Latest revision as of 02:44, 17 September 2018