Team:UCLondon/Templates/bottom-content

From 2012e.igem.org

(Difference between revisions)
 
(86 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><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">
+
<style type="text/css">
-
<h3>Sponsors</h3>
+
-
<ul class="pagination" id="sponsor-page-indicator">
+
-
  <li class=""><a href="#0">1</a></li>
+
-
  <li class=""><a href="#1">2</a></li>
+
-
  <li class=""><a href="#2">3</a></li>
+
-
  <li class="current"><a href="#3">4</a></li>
+
-
</ul>
+
-
                                  <div class="slides_container" style="overflow: hidden; position: relative; display: block; ">
+
-
<div class="slides_control" style="position: relative; width: 1410px; height: 170px; left: -470px; "><div style="position: absolute; top: 0px; left: 470px; z-index: 0; display: none; ">
+
-
<h1>Slide 1</h1>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
-
</div><div style="position: absolute; top: 0px; left: 470px; z-index: 0; display: none; ">
+
-
<h1>Slide 2</h1>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
-
</div><div style="position: absolute; top: 0px; left: 470px; z-index: 0; display: none; ">
+
-
<h1>Slide 3</h1>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
-
</div><div style="position: absolute; top: 0px; left: 470px; z-index: 5; display: block; ">
+
-
<h1>Slide 4</h1>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
-
</div></div>
+
-
</div>
+
-
<!-- .footer-box right -->
+
-
</div>
+
-
<div class="clear"></div>
+
-
   <style type="text/css">
+
   #bodyContent a[href^="mailto:"] { background: none; }
 +
  #bodyContent a * {background: none; padding: 0;  }
     #footer-boxes {  
     #footer-boxes {  
-
                 width: 60%; clear:both; margin: auto;
+
                 width: 815px; clear:both; margin: auto;
                 font-family: 'Gill Sans', Arial, sans-serif;
                 font-family: 'Gill Sans', Arial, sans-serif;
Line 54: Line 21:
                 border-style: solid;
                 border-style: solid;
                 border-width: 1px;
                 border-width: 1px;
-
                 padding: 0 100px 10px 10px;
+
                 padding: 0 10px 10px 10px;
               // height: 60px;
               // height: 60px;
 +
             
 +
              margin-top: 2px;
 +
              margin-bottom: 20px;
 +
              box-shadow: 2px 5px 5px #888;
 +
     }
     }
Line 61: Line 33:
     .left {
     .left {
           float:left;  
           float:left;  
-
          border-right-color: rgb(230, 230, 230);
+
           width: 45%;
-
          border-right-style: solid;
+
-
          border-right-width: 1px;
+
-
           width: 50%;
+
           clear: left;
           clear: left;
Line 71: Line 40:
       .right {
       .right {
             float: left;
             float: left;
-
             width: 45%;
+
             width: 400px;
-
             padding-left: 20px;  
+
             padding-left: 20px;
 +
            border-left-color: rgb(230, 230, 230);
 +
            border-left-style: solid;
 +
            border-left-width: 1px;  
       }
       }
      
      
-
     .clear { clear: both; }
+
     .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 type="text/javascript">
+
 
 +
 
 +
 
 +
 
 +
 
 +
<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();
         var nHeight = ($('.footer-box.left').height() > $('.footer-box.right').height()) ? $('.footer-box.left').height() : $('.footer-box.right').height();
         $('#footer-boxes').css('height', nHeight);
         $('#footer-boxes').css('height', nHeight);
-
  </script>
+
});
 +
 +
function sponsoring(){  }
 +
     
 +
</script>
 +
 
 +
</html>
</html>

Latest revision as of 21:37, 18 September 2012