Difference between revisions of "Template:Manchester/Footer"

Line 1: Line 1:
 
{{Manchester}}
 
{{Manchester}}
 
<html>
 
<html>
 +
 +
<head>
 +
<!--visualisation-->
 +
<script type="text/javascript" src="https://2017.igem.org/Team:Manchester/Resources/JS:fontawesome?action=raw&ctype=text/javascript"></script>
 +
</head>
 +
 +
<style>
 +
 +
html {
 +
  background-color: #ffffff!important;
 +
  margin: 0px!important
 +
}
 +
 +
body {
 +
  background-color: #ffffff!important;
 +
  margin: 0px!important;
 +
}
 +
 +
.footer-distributed {
 +
        clear: both;
 +
box-sizing: border-box;
 +
width: 100%;
 +
text-align: left;
 +
        padding-left: 5%!important;
 +
        padding-right: 5%!important;
 +
margin-top: 80px;
 +
}
 +
 +
.footer-distributed .footer-left p {
 +
        color:  blue;
 +
font-size: 14px;
 +
margin: 0;
 +
}
 +
.footer-distributed .footer-right p{
 +
        color:  blue;
 +
font-size: 14px;
 +
margin: 0;
 +
}
 +
 +
/* Footer links */
 +
 +
.footer-distributed p.footer-links{
 +
font-size: 18px;
 +
font-weight: bold;
 +
color:  blue;
 +
margin: 0 0 10px;
 +
padding: 0;
 +
}
 +
 +
 +
.footer-distributed p.footer-links a{
 +
display:inline-block;
 +
line-height: 1.8;
 +
text-decoration: none;
 +
color:  inherit;
 +
}
 +
 +
.footer-distributed .footer-right{
 +
float: right;
 +
margin-top: 6px;
 +
margin-left: 15px;
 +
padding-left: 15px;
 +
        border-left: thick double rgba(238, 238, 238, 0.7);
 +
        border-left-width: 20px;
 +
max-width: 450px;
 +
}
 +
 +
 +
 +
.footer-distributed .footer-right a{
 +
display: inline-block;
 +
width: 50px;
 +
height: 35px;
 +
background-color: transparent;
 +
border-radius: 2px;
 +
font-size: 20px;
 +
color: blue;
 +
text-align: center;
 +
line-height: 35px;
 +
margin-left: 3px;
 +
}
 +
 +
.sponsors {
 +
            margin: 5px;
 +
            width: 150px;
 +
}
 +
 +
.sponsors:hover {
 +
    opacity:0.9;
 +
    box-shadow:2px 2px 2px #888888;
 +
    transition: all 0.4 ease;
 +
}
 +
 +
.sociallogo {
 +
        width: 30px;
 +
        margin: 8px;
 +
          }
 +
 +
.fa:hover {
 +
    opacity: 0.8;
 +
}
 +
 +
 +
/* If you don't want the footer to be responsive, remove these media queries */
 +
 +
@media (max-width: 600px) {
 +
 +
.footer-distributed .footer-left,
 +
.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>
 +
<body>
 +
<footer class="footer-distributed">
 +
 +
  <div class="footer-right">
 +
    <img src="https://static.igem.org/mediawiki/2017/a/aa/T--Manchester--manchesterigem2017logo.jpg" width="100px">
 +
<a href="https://www.toptal.com/designers/colorfilter"><img title="Website optimised for colorblindness" alt="See your web site through colorblind eyes with the colorblind web page filter." src="https://www.toptal.com/designers/colorfilter/static/colorfilter_button.png" width="88" height="31"></a>
 +
    <p>Connect with us:</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/iGEMManchester/"><i class="fa fa-facebook fa-2x"></i></a>
 +
  <a target="_blank" href="https://twitter.com/Manchester_iGEM"><i class="fa fa-twitter fa-2x"></i></a>
 +
  <a target="_blank" href="https://www.instagram.com/manchesterigem17/"><i class="fa fa-instagram fa-2x"></i></a>
 +
                  <p> Email: manchesterigem17@gmail.com </p>
 +
  </div>
 +
 +
    <div class="footer-left">
 +
 +
<p class="footer-links">
 +
 +
                                        <a target="_blank" href="http://www.mib.ac.uk/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/2/22/T--Manchester--UOM.png">
 +
    </a>
 +
 +
                                        <a target="_blank" href="http://www.manchester.ac.uk/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/a/a7/T--Manchester--sponsor_uom.png">
 +
    </a>
 +
 +
                                        <a target="_blank" href="http://www2.mmu.ac.uk/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/e/ed/T--Manchester--sponsor_mmu.svg">
 +
    </a>
 +
 +
<a target="_blank" href="http://www.snapgene.com/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/3/37/T--Manchester--sponsor_snapgene.png">
 +
    </a>
 +
 +
<a target="_blank" href="https://www.mathworks.com/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/c/c2/T--Manchester--sponsor_mathworks.svg">
 +
    </a>
 +
 +
<a target="_blank" href="https://www.idtdna.com/site">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/f/f2/T--Manchester--IDTLOGO.png">
 +
    </a>
 +
 +
<a target="_blank" href="https://www.neb.com/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/f/fc/T--Manchester--NEBsponsorlogo.jpg">
 +
    </a>      
 +
 +
                                        <a target="_blank" href="http://www.agilent.com/home">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/0/00/T--Manchester--sponsor_agilent.png" style="background-color:rgba(0, 133, 213, 0.9)">
 +
    </a> 
 +
 +
<a target="_blank" href="https://www.promega.co.uk/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/3/3a/T--Manchester--sponsor_promega.svg">
 +
    </a>
 +
     
 +
<a target="_blank" href="http://biocatnet.com/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/0/0e/T--Manchester--sponsor_biocatnet.png">
 +
    </a>
 +
 +
<a target="_blank" href="http://ibcarb.com/">
 +
        <img class="sponsors" src="https://static.igem.org/mediawiki/2017/f/f9/T--Manchester--sponsor_ibcarb.png">
 +
    </a>
 +
 +
</p>
 +
 +
    </div>
 +
 +
</footer>
 +
</body>
 +
</html>
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
 
<footer style= "background-color:#e6e6e6">
 
<footer style= "background-color:#e6e6e6">

Revision as of 20:39, 7 September 2018






<footer style= "background-color:#e6e6e6">

<a href="https://www.idtdna.com/pages"><img src="T--Manchester--IDTsponsorlogo.png" width="160" height="auto"></a> <a href="https://uk.mathworks.com"><img src="T--Manchester--Mathworkssponsorlogo.png" width="160" height="auto"></a> <a href="http://www.mib.ac.uk"><img src="T--Manchester--MIBsponsorlogo.png" width="160" height="auto"></a> <a href="https://www.promega.co.uk"><img src="T--Manchester--Promegasponsorlogo.png" width="160" height="auto"></a>

<a href="https://international.neb.com/"><img src="T--Manchester--NEBsponsorlogo.PNG" width="160" height="auto"></a> <a href="http://synbiochem.co.uk/"><img src="T--Manchester--SynBiochemsponsorlogo.png" width="160" height="auto"></a> <a href="http://www.snapgene.com/"><img src="T--Manchester--SnapgeneSponsorlogo.PNG" width="160" height="auto"></a> <a href="https://www.manchester.ac.uk/"><img src="T--Manchester--UoMsponsorlogo.PNG" width="160" height="auto"></a>

Find us

Manchester Institute of Biotechnology

The University of Manchester

131 Princess Street

Manchester, M1 7DN, UK

<a href="#" target="_blank">manchesterigemteam2018@gmail.com</a>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

<style>

h1 { border-bottom: none; }

  1. contact{

padding-left:10%; padding-bottom:3%; }

/* Style all font awesome icons */ .fa { 

 font-size: 30px;
 width: 30px;
 text-align: center;
 text-decoration: none;
 margin: 5px 2px;
 border-radius: 50%;

}

/* Add a hover effect if you want */ .fa:hover { 

   opacity: 0.7;

}

/* Set a specific color for each brand */

.fa-facebook { 

 background: #282e34;
 color: black;

}

.fa-twitter { 

 background: #55ACEE;
 color: black;

}

.fa-instagram { 

 background: #125688;
 color: black;

}

  1. socialmedia {
float: right;

}

</style> </footer> </html>