Team:St Andrews/template
From 2011.igem.org
(Difference between revisions)
Max.nicosia (Talk | contribs) |
|||
(193 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | ||
<html> | <html> | ||
<head> | <head> | ||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | + | .a4 A:link {text-decoration: none; color: white;} | |
- | + | .a4 A:visited {text-decoration: none; color: black;} | |
- | + | .a4 A:active {text-decoration: none; color: white;} | |
+ | .a4 A:hover {text-decoration: underline; color: white;} | ||
- | + | body | |
+ | { | ||
+ | background-image:url('https://static.igem.org/mediawiki/2011/a/a0/Vladstudio_oxygen_2_1920x1200.jpg'); | ||
+ | background-repeat:no-repeat; | ||
+ | background-attachment:fixed; | ||
+ | border=none; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .firstHeading | |
- | + | { | |
- | + | display: none; | |
- | + | } | |
- | + | .right-menu li a | |
- | + | { | |
+ | background-color: #000000; | ||
+ | } | ||
+ | .left-menu:hover | ||
+ | { | ||
+ | background-color: #000000; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | # | + | #catlinks { |
- | + | border: none; | |
+ | background-color:transparent; | ||
+ | } | ||
- | |||
- | |||
+ | #footer-box {display: none; border=none;} | ||
+ | |||
+ | #p-logo { | ||
+ | position: relative; | ||
+ | display: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | #search-controls { | ||
+ | display: none;} | ||
+ | |||
+ | #top-section { | ||
+ | background-color: #0; | ||
+ | border: none; | ||
+ | width:900px; | ||
+ | height:5px;} | ||
+ | |||
+ | #content { | ||
+ | width: 900px; | ||
+ | border: none; | ||
+ | font-family: 'Volkhov', serif; | ||
+ | padding:0px; | ||
+ | background-color:transparent; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #projlogo | ||
+ | { | ||
+ | position:relative; | ||
+ | width:718px; | ||
+ | height:154px; | ||
+ | background-color:#0; | ||
+ | } | ||
+ | |||
+ | #igemlogo { | ||
+ | position:absolute; | ||
+ | width:65px; | ||
+ | height:50px; | ||
+ | left:60px; | ||
+ | top:0px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .container0 { | ||
+ | position: relative; | ||
+ | width:900px; | ||
+ | height:320px; | ||
+ | margin: 0px auto -1px auto; | ||
+ | border="0"; | ||
+ | } | ||
+ | |||
+ | .leftpart { | ||
+ | position:absolute; | ||
+ | width:718px; | ||
+ | height:260px; | ||
+ | border="0"; | ||
+ | left:0px; | ||
+ | } | ||
+ | |||
+ | .rightpart { | ||
+ | position: absolute; | ||
+ | right:0px; | ||
+ | width:182px; | ||
+ | height:260px; | ||
+ | border="0"; | ||
+ | } | ||
+ | |||
+ | |||
+ | .pierimg { | ||
+ | position: relative; | ||
+ | top:0px; | ||
+ | left:0px; | ||
+ | width:718px; | ||
+ | height:106px; | ||
+ | } | ||
+ | |||
+ | .title { | ||
+ | width:182px; | ||
+ | height:195px; | ||
+ | position: absolute; | ||
+ | bottom: 0px; | ||
+ | right: 0px; | ||
+ | |||
+ | } | ||
+ | img.ourlogo { | ||
+ | width:182px; | ||
+ | height: 171px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .unilogo { | ||
+ | width:182px; | ||
+ | height:190px; | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right:0px; | ||
+ | } | ||
+ | |||
+ | .links | ||
+ | { | ||
+ | position:absolute; | ||
+ | padding:18px; | ||
+ | text-align:center; | ||
+ | top:75px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .top-slider-main { | ||
+ | width:900px; | ||
+ | height:60px; | ||
+ | overflow:hidden; | ||
+ | position:absolute; | ||
+ | border:0px; | ||
+ | solid #000; | ||
+ | z-index:10; | ||
+ | bottom:0px;} | ||
+ | |||
+ | .top-slider-main div{width:280px; height:60px; position:absolute; } | ||
+ | |||
+ | .top-slider-main .slider-box1{z-index:94;} | ||
+ | |||
+ | .top-slider-main .slider-box2{margin-left:280px; z-index:95;} | ||
+ | |||
+ | .top-slider-main .slider-box3{margin-left:435px; z-index:96;} | ||
+ | |||
+ | .top-slider-main .slider-box4{margin-left:590px; z-index:97;} | ||
+ | |||
+ | .top-slider-main .slider-box5{margin-left:745px; z-index:98;} | ||
+ | |||
+ | .top-slider-main div .left{position:relative; height:100%; float:left; cursor:pointer; color:#FFF;} | ||
+ | |||
+ | .top-slider-main div .content{position:relative; width:119px; height:54px; color:#000; float:left; font-family: Arial, Helvetica, sans-serif; font-size:1em; background-color:#transparent; padding:3px;} | ||
+ | |||
+ | .top-slider-main .slider-box1 .left{} | ||
+ | |||
+ | .top-slider-main .slider-box2 .left{background-color:#b0c4de;} | ||
+ | |||
+ | .top-slider-main .slider-box3 .left{background-color:#b0c4de;} | ||
+ | |||
+ | .top-slider-main .slider-box4 .left{background-color:#b0c4de;} | ||
+ | |||
+ | .top-slider-main .slider-box5 .left{background-color:#b0c4de;} | ||
</style> | </style> | ||
</head> | </head> | ||
- | |||
<body> | <body> | ||
+ | <link href='http://fonts.googleapis.com/css?family=Volkhov' rel='stylesheet' type='text/css'/> | ||
- | <div id = | + | |
- | <div id = | + | <span class="a4"> |
- | + | <div class="container0"> | |
- | + | <div class="leftpart"> | |
- | + | <div id="projlogo"> | |
+ | <img src="https://static.igem.org/mediawiki/2011/0/01/Kill.png"/> | ||
+ | </div> | ||
+ | <div class="pierimg"> | ||
+ | <img border="0" src="https://static.igem.org/mediawiki/2011/b/b0/Pier.jpg"/> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="rightpart"> | ||
+ | <div id="igemlogo"> | ||
+ | <a href="https://2011.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2010/7/7d/ICLlogo2.png"/></a> | ||
+ | </div> | ||
+ | <div class ="title"> | ||
+ | <div class ="unilogo"> | ||
+ | <a href="http://www.st-andrews.ac.uk/"><img class="ourlogo" src="https://static.igem.org/mediawiki/2011/0/09/Standrewsteamlogo.png" border="0"/></a> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
- | <div | + | <div class="top-slider-main"> |
+ | <script type="text/javascript"> | ||
- | + | var $slider_started = false; | |
- | + | ||
- | + | $(document).ready(function(){ | |
- | + | ||
+ | var $total_slider = $('.top-slider-main > div').length; | ||
+ | |||
+ | var $label_width = $('.top-slider-main div .left').width(); | ||
+ | |||
+ | var $max_slider_width = ($total_slider -1)*$label_width; | ||
+ | |||
+ | var $extra_margin = $(' .top-slider-main div').width() - $label_width; | ||
+ | |||
+ | |||
+ | |||
+ | $('.top-slider-main div:not(.slider-box1) .left').mouseover(function(){ | ||
+ | |||
+ | var $slider_index = $('.top-slider-main > div').index($(this).parent()) + 1; | ||
+ | |||
+ | if($(this).parent().hasClass('on')) | ||
+ | |||
+ | { | ||
+ | |||
+ | if($slider_started != 1) | ||
+ | |||
+ | { | ||
+ | |||
+ | $slider_started = 2; | ||
+ | |||
+ | for(i=$total_slider; i>=$slider_index; i--) | ||
+ | |||
+ | { | ||
+ | |||
+ | var $elm = $('.top-slider-main .slider-box'+i); | ||
+ | |||
+ | if($elm.hasClass('on')) | ||
+ | |||
+ | { | ||
+ | |||
+ | $elm.removeClass('on'); | ||
+ | |||
+ | var $left_margin = ($label_width*(i-1)) + $extra_margin; | ||
+ | |||
+ | $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;}); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | else | ||
+ | |||
+ | { | ||
+ | |||
+ | if($slider_started != 2) | ||
+ | |||
+ | { | ||
+ | |||
+ | $slider_started = 1; | ||
+ | |||
+ | for(i=2; i<=$slider_index; i++) | ||
+ | |||
+ | { | ||
+ | |||
+ | var $elm = $('.top-slider-main .slider-box'+i); | ||
+ | |||
+ | if(!$elm.hasClass('on')) | ||
+ | |||
+ | { | ||
+ | |||
+ | $elm.addClass('on'); | ||
+ | |||
+ | var $left_margin = ($label_width*(i-1)); | ||
+ | |||
+ | $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;}); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="slider-box1"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/1/18/Proj2.png'); | ||
+ | |||
+ | background-color:black; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:155px; | ||
+ | |||
+ | height:60px;"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews' class="listmain">Description</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/diary' class='listmain' id='diary'>Project Diary</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/safety' class='listmain' id='safety'>Safety Form</a><br /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box2"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/2/2a/Res2.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:155px; | ||
+ | |||
+ | height:60px;"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/switch' class='listmain' id='kill'>The Kill Switch</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/modelling' class='listmain' id='model'>Modelling</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/parts' class='listmain' id='parts'>Parts Submitted</a><br /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box3"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/2/28/App.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:155px; | ||
+ | |||
+ | height:60px;"></div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/drugdel' class='listmain'>Drug Delivery</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/biosafe' class='listmain'>Biosafety</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/conj' class='listmain' >Conjugation</a><br /></div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box4"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/0/00/Hprac.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:155px; | ||
+ | |||
+ | height:60px;"></div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/review' class='listmain' >"Is iGEM Fair?"</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/debate' class='listmain' >Panel Debate</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/essays' class='listmain' >Reflective Essays</a><br /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="slider-box5"> | ||
+ | |||
+ | <div class="left" style="background-image:url('https://static.igem.org/mediawiki/2011/e/e4/Team2.png'); | ||
+ | |||
+ | background-color:#000000; | ||
+ | |||
+ | background-repeat:no-repeat; | ||
+ | |||
+ | background-position:center; | ||
+ | |||
+ | width:155px; | ||
+ | |||
+ | height:60px;"></div> | ||
+ | |||
+ | <div class="content"> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/team' class='listmain' >The Team</a><br /> | ||
+ | |||
+ | <a href='https://2011.igem.org/Team:St_Andrews/sponsors' class='listmain' >Sponsors</a><br /> | ||
+ | <a href='https://2011.igem.org/Team:St_Andrews/collaboration' class='listmain' >Collaboration</a><br /> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | </span> | ||
+ | |||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 10:16, 20 September 2011