Team:Oxford/templates/header
From 2014.igem.org
(Difference between revisions)
Olivervince (Talk | contribs) |
|||
(377 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | <html> | |
- | + | ||
- | + | <script> | |
- | + | ||
- | + | $(document).ready(function() { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
$('.hasdropdown').hover(function() { | $('.hasdropdown').hover(function() { | ||
$(this).find('.dropdown').stop(true,true).slideToggle(200); | $(this).find('.dropdown').stop(true,true).slideToggle(200); | ||
Line 76: | Line 9: | ||
}) | }) | ||
- | + | ||
- | + | </script> | |
- | + | <style> | |
- | + | ||
@import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300); | @import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300); | ||
Line 114: | Line 46: | ||
#menubar ul { | #menubar ul { | ||
- | padding: | + | padding:10px; |
} | } | ||
Line 251: | Line 183: | ||
p { | p { | ||
font-size: 14px; | font-size: 14px; | ||
- | margin-bottom: | + | margin-bottom: 10px; |
line-height: 1.5; | line-height: 1.5; | ||
} | } | ||
Line 336: | Line 268: | ||
header { | header { | ||
- | background: url(''); | + | background: url('https://static.igem.org/mediawiki/2014/e/eb/Oxfordigem_radcam.jpg'); |
background-size: cover; | background-size: cover; | ||
- | background-position: | + | background-position: 10% 16%; |
- | height: | + | height: 300px; |
min-width:600px; | min-width:600px; | ||
} | } | ||
Line 354: | Line 286: | ||
#igem_logo { | #igem_logo { | ||
- | background: url('https://static.igem.org/mediawiki/ | + | background: url('https://static.igem.org/mediawiki/2014/6/6d/OxiGEMiGEM.png'); |
background-size: cover; | background-size: cover; | ||
- | width: | + | width: 9em; |
- | height: | + | height: 7em; |
position: absolute; | position: absolute; | ||
right: 0; | right: 0; | ||
Line 375: | Line 307: | ||
/* edit: fixes overlap error in IE7/8, | /* edit: fixes overlap error in IE7/8, | ||
make sure you have an empty gif */ | make sure you have an empty gif */ | ||
+ | |||
background-image: url('empty.gif'); | background-image: url('empty.gif'); | ||
} | } | ||
Line 381: | Line 314: | ||
width: 100%; | width: 100%; | ||
background: #012148; | background: #012148; | ||
- | margin-bottom: | + | margin-bottom: 30px; |
min-width:600px; | min-width:600px; | ||
} | } | ||
Line 391: | Line 324: | ||
#main_navigation > div > ul > li { | #main_navigation > div > ul > li { | ||
display: inline-block; | display: inline-block; | ||
- | margin: | + | margin: 0 20px 0 0 ; |
- | + | ||
- | + | ||
padding: 0; | padding: 0; | ||
} | } | ||
Line 450: | Line 381: | ||
footer { | footer { | ||
- | margin-top: | + | margin-top: 20px; |
padding: 30px 0 30px 0; | padding: 30px 0 30px 0; | ||
border-top:1px solid #e5e5e5; | border-top:1px solid #e5e5e5; | ||
Line 470: | Line 401: | ||
#sponsors ul li, #footer_links ul li { | #sponsors ul li, #footer_links ul li { | ||
display: inline-block; | display: inline-block; | ||
- | margin: | + | margin: 10px; |
} | } | ||
Line 491: | Line 422: | ||
background: #fff; | background: #fff; | ||
padding: 1em; | padding: 1em; | ||
+ | width:90%; | ||
} | } | ||
- | . | + | |
- | + | ||
- | + | .grow { | |
- | + | border-radius: 10px; | |
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 20px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
} | } | ||
+ | .grow:hover { | ||
+ | overflow: hidden; | ||
+ | height: 100px; | ||
+ | } | ||
- | |||
- | + | .growat { | |
- | + | border-radius: 10px; | |
- | + | display: inline-block; | |
- | + | overflow: hidden; | |
- | + | height: 400px; | |
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | .growat:hover { | ||
+ | overflow: hidden; | ||
+ | height: 1000px; | ||
+ | } | ||
- | + | .growbio { | |
- | + | border-radius: 10px; | |
- | + | display: inline-block; | |
- | + | overflow: hidden; | |
- | + | height: 250px; | |
- | + | width: 100%; | |
- | + | margin: 0% 0px 0px 0%; | |
- | + | float: center; | |
- | + | position: relative; | |
- | + | transition:height 0.5s; | |
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
- | + | .growbio:hover { | |
- | + | overflow: hidden; | |
- | + | height: 1000px; | |
- | + | } | |
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .growlabbookbweek1 { | |
- | + | border-radius: 10px; | |
- | + | display: inline-block; | |
- | + | overflow: hidden; | |
- | + | height: 100px; | |
- | + | width: 100%; | |
- | + | margin: 0% 0px 0px 0%; | |
- | + | float: center; | |
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | .growlabbookbweek1:hover { | ||
+ | overflow: hidden; | ||
+ | height: 2800px; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .growlabbookbweek2 { | |
- | + | border-radius: 10px; | |
- | + | display: inline-block; | |
+ | overflow: hidden; | ||
+ | height: 150px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
- | + | .growlabbookbweek2:hover { | |
- | + | overflow: hidden; | |
- | + | height: 6500px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | .growlabbookbweek3 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 130px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
- | + | .growlabbookbweek3:hover { | |
- | + | overflow: hidden; | |
- | + | height: 2800px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .growlabbookbweek4 { | |
- | + | border-radius: 10px; | |
- | + | display: inline-block; | |
+ | overflow: hidden; | ||
+ | height: 130px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
- | </ | + | .growlabbookbweek4:hover { |
+ | overflow: hidden; | ||
+ | height: 8000px; | ||
+ | } | ||
+ | |||
+ | .growlabbookbweek5 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 120px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .growlabbookbweek5:hover { | ||
+ | overflow: hidden; | ||
+ | height: 3000px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .growlabbookcweek1 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 130px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek1:hover { | ||
+ | overflow: hidden; | ||
+ | height: 1950px; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek3 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 130px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek3:hover { | ||
+ | overflow: hidden; | ||
+ | height: 1950px; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek4 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 130px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek4:hover { | ||
+ | overflow: hidden; | ||
+ | height: 1000px; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek5 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 250px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek5:hover { | ||
+ | overflow: hidden; | ||
+ | height: 2100px; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek6 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 200px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .growlabbookcweek6:hover { | ||
+ | overflow: hidden; | ||
+ | height: 2100px; | ||
+ | } | ||
+ | .growGW { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 200px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .growGW:hover { | ||
+ | overflow: hidden; | ||
+ | height: 1000px; | ||
+ | } | ||
+ | |||
+ | .grow3 { | ||
+ | border-radius: 10px; | ||
+ | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 300px; | ||
+ | width: 50%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
+ | position: relative; | ||
+ | transition:height 0.5s; | ||
+ | -webkit-transition:height 0.5s; | ||
+ | } | ||
+ | |||
+ | .grow3:hover { | ||
+ | overflow: hidden; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | <header> | ||
+ | <div class="container"> | ||
+ | <div id="logo"> | ||
+ | <a href="http://www.ox.ac.uk"><span></span></a> | ||
+ | </div> | ||
+ | <div href="https://igem.org/Main_Page" id="igem_logo"> | ||
+ | <a href="https://igem.org/Main_Page"><span></span></a> | ||
+ | </div> | ||
</div> | </div> | ||
- | </ | + | </header> |
- | + | ||
- | |||
- | |||
- | |||
</html> | </html> | ||
+ | {{:Team:Oxford/templates/nav}} |
Latest revision as of 09:18, 9 September 2014