Team:UCLondon/Templates/bottom-content

From 2012e.igem.org

(Difference between revisions)
 
(75 intermediate revisions not shown)
Line 2: Line 2:
  <style type="text/css">
  <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 18: 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 25: 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 35: 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 {
-
Load CSS before JavaScript
+
width:400px;
-
*/
+
                        margin:auto;
-
+
-
/*
+
-
Slides container
+
-
Important:
+
-
Set the width of your slides container
+
-
Set to display none, prevents content flash
+
-
*/
+
-
.slides_container {
+
-
width:470px;
+
display:none;
display:none;
-
}
+
                      // overflow: none;
 +
    }
-
/*
+
    #sponsor-slides .slides_container div {
-
Each slide
+
width:400px;
-
Important:
+
-
Set the width of your slides
+
-
If height not specified height will be set by the slide content
+
-
Set to display block
+
-
*/
+
-
.slides_container div {
+
-
width:470px;
+
height:170px;
height:170px;
display:block;
display:block;
-
}
+
    }
-
+
-
/*
+
-
Optional:
+
-
Reset list default style
+
-
*/
+
-
.pagination {
+
-
list-style:none;
+
-
margin:0;
+
-
padding:0;
+
-
}
+
-
/*
+
    #sponsor-slides .pagination { with: 10%; margin-top: 5px;  }
-
Optional:
+
 
-
Show the current slide in the pagination
+
 
-
*/
+
    /* sponsor grid */
-
.pagination .current a {
+
  #sponsor-slides { width: 100%; margin: auto; }
-
color:red;
+
   
-
}
+
    .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 id="footer-boxes" class="shadowbox">
Line 97: Line 125:
  </ul>
  </ul>
</div><!-- .footer-box left -->
</div><!-- .footer-box left -->
 +
<div class="footer-box right">
<div class="footer-box right">
<h3>Sponsors</h3>
<h3>Sponsors</h3>
-
<div id="slides">
+
<div id="sponsor-slides">
<div class="slides_container">
<div class="slides_container">
<div>
<div>
-
<h1>Slide 1</h1>
+
<ul class="sponsor-list">
-
<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>
+
<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>
<div>
<div>
-
<h1>Slide 2</h1>
+
<ul class="sponsor-list">
-
<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>
+
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
</div>
+
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<div>
+
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<h1>Slide 3</h1>
+
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<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>
+
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
</div>
+
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<div>
+
</ul>
-
<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><!-- .slides_container -->
</div><!-- .slides_container -->
</div><!-- #slides -->
</div><!-- #slides -->
</div><!-- .footer-box right -->
</div><!-- .footer-box right -->
-
<div class="clear"></div>
+
 
 +
<div class="clear" style="width:100%; height:2px;"></div>
 +
</div>
 +
 
 +
 
   
   
<script type="text/javascript">
<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);
 +
});
 +
 +
function sponsoring(){  }
 +
     
</script>
</script>
   
   
</html>
</html>

Latest revision as of 21:37, 18 September 2012

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/bottom-content"