Difference between revisions of "Template:Team:ETH Zurich/ETHZ footer"

Line 1: Line 1:
−
<html>
+
 
−
<style>
+
 
−
.igem_2017_footer_wrapper {
+
<html lang="en"><head><meta charset="utf-8">
−
    background-color: black;  
+
<title>SP xojaynee: Four Footer Columns</title>
−
     width: 100%;
+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
−
     height: 20vh;
+
<meta name="generator" content="PSPad editor, www.pspad.com">
−
     position: fixed;
+
<style media="screen">
−
     bottom: 0;
+
.centered{background-color:tan}
 +
.social{background-color:red}
 +
 
 +
/* mended css */
 +
#footer {
 +
    position: relative;
 +
     overflow: hidden;
 +
     text-align: left;
 +
}
 +
.wrap {
 +
     position: relative;
 +
     margin: 0 auto;
 +
    padding: 20px;
 +
    overflow: hidden;
 +
    background: #3E3E3E;
 +
  color: #fff;
 +
    font:900 14px/26px 'Open Sans', sans-serif;
 +
  text-transform: uppercase;
 +
}
 +
#footer h3 a,
 +
#footer h3 p {
 +
    margin: 0;
 +
  color: #fff;
 
     text-decoration: none;
 
     text-decoration: none;
−
    font-size: 9px;
 
−
    font-weight: bold;
 
−
    color: white;
 
 
}
 
}
−
 
+
.left {
−
img {height: 35px}
+
    float: left;
 +
    width: 25%;
 +
}
 +
.right {
 +
    float: right;
 +
    width: 25%;
 +
}
 +
.centered {
 +
    overflow: hidden; /* claim the left over width between these 25% floats */
 +
}
 +
.social {
 +
    float: right;
 +
    width: 50%; /* of the squished parent width */
 +
}
 +
input {
 +
    font-size: 100%;
 +
}
 +
.subscribe_button {
 +
    margin: 0;
 +
    padding: 14px 0;
 +
    min-width: 200px;
 +
    color: #fff;
 +
    background-color: #2f2e2a;
 +
    font:900 14px/19px 'Open Sans', sans-serif;
 +
    text-align: center;
 +
    text-transform: uppercase;
 +
    cursor: pointer;
 +
    -webkit-transition: background-color 0.2s ease-in-out;
 +
    -moz-transition: background-color 0.2s ease-in-out;
 +
    -ms-transition: background-color 0.2s ease-in-out;
 +
    -o-transition: background-color 0.2s ease-in-out;
 +
    transition: background-color 0.2s ease-in-out;
 +
}
 
</style>
 
</style>
−
 
+
</head>
 
<body>
 
<body>
−
<div class="igem_2017_footer_wrapper">
 
−
<!--<h2>Our sponsors:</h2>
 
−
<a class="sponsor" href="https://www.ethz.ch">
 
−
    <img
 
−
    alt="ETH Zurich"
 
−
    src="https://2017.igem.org/wiki/images/5/5d/T--ETH_Zurich--ETHZ_logo.png"
 
−
    >
 
−
</a>
 
−
<a class="sponsor" href="https://www.bsse.ethz.ch/">
 
−
    <img
 
−
    alt="Department of Biosystems Science and Engineering"
 
−
    src="https://2017.igem.org/wiki/images/e/e2/T--ETH_Zurich--DBSSE_logo.png"
 
−
    >
 
−
</a>
 
−
<a class="sponsor" href="https://www.geneious.com/">
 
−
    <img
 
−
    alt="Geneious"
 
−
    src="https://2017.igem.org/wiki/images/b/b0/T--ETH_Zurich--Geneious_logo.png"
 
−
    >
 
−
</a>
 
−
<a class="sponsor" href="https://www.genscript.com">
 
−
    <img
 
−
    alt="Geneious"
 
−
    src="https://2017.igem.org/wiki/images/6/67/T--ETH_Zurich--Genscript_logo.png"
 
−
    >
 
−
</a>
 
−
<a class="sponsor" href="http://www.sisf.info/">
 
−
    <img
 
−
    alt="Swiss Industry Science Fund"
 
−
    src="https://2017.igem.org/wiki/images/6/6c/T--ETH_Zurich--SISF_wide.png"
 
−
    >
 
−
</a>
 
−
<a class="sponsor" href="https://www.kispi.uzh.ch">
 
−
    <img
 
−
    alt="University Children's hospital Zurich"
 
−
    src="https://2017.igem.org/wiki/images/9/93/T--ETH_Zurich--Childrens_Hospital_Zurich_logo.jpg"
 
−
    >
 
−
</a>
 
−
<a class="sponsor" href="https://srvweb.microsynth.ch/">
 
−
    <img
 
−
    alt="Microsynth AG"
 
−
    src="https://2017.igem.org/wiki/images/c/c9/T--ETH_Zurich--Microsynth_logo.png"
 
−
    >
 
−
</a>-->
 
−
 
−
<h2>Follow us:</h2>
 
−
<!-- We should add some thumbnail images and remove the text -->
 
−
<a id="adress" href="https://www.bsse.ethz.ch/">Official site</a>
 
−
<a id="mail" href="mailto:igem@ethz.ch">E-mail</a>
 
−
<a id="facebook" href="https://www.facebook.com/iGEM.ETH.Zurich">Facebook</a>
 
−
<a id="twitter" href="https://twitter.com/eth_igem">Twitter</a>
 
  
−
<h2>Meet us:</h2>
+
<footer id="footer">
−
<address>  
+
    <div class="wrap">
−
iGEM Team (lab 2.28)<br/>
+
        <div class="left">
−
Department of Biosystems Science and Engineering (D-BSSE)<br/>
+
            <h3><a href="http://xojaynee.tictail.com/about-us">About Us</a></h3>
−
Mattenstrasse 26<br/>  
+
            <h3><a href="http://xojaynee.tictail.com/faq">FAQ</a></h3>
−
4058 Basel<br/>
+
            <h3><a href="http://xojaynee.tictail.com/contact-us">Contact Us</a></h3>
−
Switzerland
+
            <h3><a href="http://xojaynee.tictail.com/about-us">Terms & Conditions</a></h3>
−
</address>
+
        </div>
−
</div>
+
<!--<div class="clear"></div> REMOVED-->
 +
        <div class="right">
 +
            <h3>Be the first to get access to our new arrivals and exclusive promo codes.</h3>
 +
            <form action="//tictail.us13.list-manage.com/subscribe/post?u=a39ec65a4cc079bc2af73cd52&amp;id=d3b88dcefc"
 +
                method="post" id="right" name="right" class="validate" target="_blank" novalidate>
 +
                <div>
 +
                    <input type="text" name="b_a39ec65a4cc079bc2af73cd52_d3b88dcefc" tabindex="-1" value="">
 +
                </div>
 +
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscribe_button">
 +
            </form>
 +
        </div>
 +
<!--<div class="clear"></div> REMOVED-->
 +
        <div class="centered">
 +
            <h3 class="social"><p>Get Social</p><!--ADDED--></h3>
 +
            <h3><a href="http://xojaynee.tictail.com/track-order">Track Order</a></h3>
 +
            <h3><a href="http://xojaynee.tictail.com/how-to-shop">How To Shop</a></h3>
 +
            <h3><a href="http://xojaynee.tictail.com/size-guide">Size Guide</a></h3>
 +
            <h3><a href="http://xojaynee.tictail.com/delivery-information">Delivery Information</a></h3>
 +
            <h3><a href="http://xojaynee.tictail.com/return-exchange">Return & Exchange</a></h3>
 +
        </div>
 +
    </div>
 +
</footer>
  
 
</body>
 
</body>
−
</html>
+
</html>`

Revision as of 10:23, 17 August 2017


SP xojaynee: Four Footer Columns

`