Team:UCLondon/Templates/bottom-content

From 2012e.igem.org

(Difference between revisions)
 
(130 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<div id="footer-boxes" class="shadowbox">
 
-
  <div class="footer-box left">
 
-
<h3>Latest News</h3>
 
-
                                  <ul>
 
-
                                        <li>test</li>
 
-
                                  </ul>
 
-
  </div>
 
-
<!-- .footer-box left -->
 
-
<div class="footer-box right">
+
<style type="text/css">
-
<h3>Sponsors</h3>
+
-
                                  <ul>
+
-
                                        <li>test</li>
+
-
                                  </ul>
+
-
</div>
+
-
<!-- .footer-box right -->
+
-
</div>
+
   #bodyContent a[href^="mailto:"] { background: none; }
-
 
+
  #bodyContent a * {background: none; padding: 0;  }
-
   <style type="text/css">
+
     #footer-boxes {  
     #footer-boxes {  
-
                 width: 60%; clear:both; margin: auto;
+
                 width: 815px; clear:both; margin: auto;
 +
                font-family: 'Gill Sans', Arial, sans-serif;
 +
 
 +
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 0.7) ), to( rgb(249, 249, 249) ) );
 +
                background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
                background-image: -moz-linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
                background-image: -ms-linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
                background-image: -o-linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
                background-image: linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
 
 +
                border-radius: 10px;
 +
                border-color: rgb(216, 216, 216);
 +
                border-style: solid;
 +
                border-width: 1px;
 +
                padding: 0 10px 10px 10px;
 +
              // height: 60px;
 +
             
 +
              margin-top: 2px;
 +
              margin-bottom: 20px;
 +
              box-shadow: 2px 5px 5px #888;
-
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgb(255, 255, 255) ), to( rgb(249, 249, 249) ) );
 
-
                background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 
-
                background-image: -moz-linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 
-
                background-image: -ms-linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 
-
                background-image: -o-linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 
-
                background-image: linear-gradient(top,  rgba(255, 255, 255, 0.8), rgba(207, 207, 207, 0.8));
 
     }
     }
 +
 +
 +
    .left {
 +
          float:left;
 +
          width: 45%;
 +
          clear: left;
 +
 +
      }
 +
 +
      .right {
 +
            float: left;
 +
            width: 400px;
 +
            padding-left: 20px;
 +
            border-left-color: rgb(230, 230, 230);
 +
            border-left-style: solid;
 +
            border-left-width: 1px;
 +
      }
 +
   
 +
    .clear { clear: both; height:5px; width:100%;}
 +
 +
    #sponsor-slides .slides_container {
 +
width:400px;
 +
                        margin:auto;
 +
display:none;
 +
                      // overflow: none;
 +
    }
 +
 +
    #sponsor-slides .slides_container div {
 +
width:400px;
 +
height:170px;
 +
display:block;
 +
    }
 +
 +
    #sponsor-slides .pagination { with: 10%; margin-top: 5px;  }
 +
 +
 +
    /* sponsor grid */
 +
  #sponsor-slides { width: 100%; margin: auto; }
 +
   
 +
    .sponsor-list { padding-left:0;  width: 10cm; }
 +
    .sponsor-list li {
 +
    border: 1px solid silver;
 +
    border-radius: 4px;
 +
    list-style: none;
 +
margin: 2px;
 +
padding: 15px 5px 2px 5px;
 +
width: 2.5cm;
 +
float: left;
 +
height: 60px;
 +
}
 +
 +
.sponsor-logo {
 +
width: 90%;
 +
margin: auto;
 +
display:inline;
 +
vertical-align: middle;
 +
text-align: center;
 +
width:2.5cm;
 +
color:grey;
 +
text-decoration:none;
 +
                        background:none;
 +
                       
 +
}
 +
 +
.sponsor-logo img { display: block; margin-left: auto; margin-right:auto;  }
   </style>
   </style>
 +
 +
 +
 +
 +
 +
<script>
 +
$(function(){
 +
$('#sponsor-slides').slides({
 +
preload: true,
 +
play: 5000,
 +
pause: 2500,
 +
hoverPause: true,
 +
generateNextPrev: false
 +
});
 +
});
 +
</script>
 +
 +
 +
 +
<div id="footer-boxes" class="shadowbox">
 +
<div class="footer-box left">
 +
<h3>Latest News</h3>
 +
  <ul>
 +
<li><a href="http://www.ucl.ac.uk/news/news-articles/1209/10092012-QS">UCL in 4th place in world university rankings</a></li>
 +
<li><a href="http://codonusageoptimizer.org/download/">CUO 0.91 released</a></li>
 +
  </ul>
 +
</div><!-- .footer-box left -->
 +
 +
 +
<div class="footer-box right">
 +
<h3>Sponsors</h3>
 +
<div id="sponsor-slides">
 +
<div class="slides_container">
 +
<div>
 +
<ul class="sponsor-list">
 +
<a href="http://www.clcbio.com" class="sponsor-logo"><li><img src="http://www.clcbio.com/fileadmin/template/main/images/clcbio_logo_no_mirror.png"/></li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
</ul>
 +
</div>
 +
<div>
 +
<ul class="sponsor-list">
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
 +
</ul>
 +
</div>
 +
</div><!-- .slides_container -->
 +
</div><!-- #slides -->
 +
</div><!-- .footer-box right -->
 +
 +
<div class="clear" style="width:100%; height:2px;"></div>
 +
</div>
 +
 +
 +
 +
 +
<script type="text/javascript">
 +
 +
$(document).ready(function() {
 +
        var nHeight = ($('.footer-box.left').height() > $('.footer-box.right').height()) ? $('.footer-box.left').height() : $('.footer-box.right').height();
 +
        $('#footer-boxes').css('height', nHeight);
 +
});
 +
 +
function sponsoring(){  }
 +
     
 +
</script>
 +
 +
</html>
</html>

Latest revision as of 21:37, 18 September 2012