Team:Oxford/templates/header
From 2014.igem.org
(Difference between revisions)
Olivervince (Talk | contribs) |
|||
(231 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 65: | Line 9: | ||
}) | }) | ||
- | |||
- | |||
- | |||
- | |||
- | + | </script> | |
- | + | <style> | |
- | + | ||
- | + | @import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300); | |
body { | body { | ||
Line 84: | Line 24: | ||
padding:0; | padding:0; | ||
background:none; | background:none; | ||
- | |||
} | } | ||
Line 99: | Line 38: | ||
white-space: nowrap; | white-space: nowrap; | ||
top: 0px; | top: 0px; | ||
- | width: | + | width: 400px; |
z-index: 5; | z-index: 5; | ||
font-family: sans-serif; | font-family: sans-serif; | ||
Line 107: | Line 46: | ||
#menubar ul { | #menubar ul { | ||
- | padding: | + | padding:10px; |
} | } | ||
Line 140: | Line 79: | ||
#bodyContent p{ | #bodyContent p{ | ||
display:none; | display:none; | ||
- | |||
} | } | ||
Line 234: | Line 172: | ||
display:block !important; | display:block !important; | ||
} | } | ||
+ | |||
body { | body { | ||
Line 254: | Line 193: | ||
.container{ | .container{ | ||
max-width: 920px; | max-width: 920px; | ||
+ | min-width:600px; | ||
margin: 0 auto; | margin: 0 auto; | ||
display: block !important; | display: block !important; | ||
-webkit-backface-visibility: hidden; | -webkit-backface-visibility: hidden; | ||
- | position: relative; | + | position: relative; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Line 335: | Line 268: | ||
header { | header { | ||
- | background: | + | 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; | ||
} | } | ||
#logo { | #logo { | ||
- | background: url('https://static.igem.org/mediawiki/2014/ | + | background: url('https://static.igem.org/mediawiki/2014/8/8a/Lgoo.png'); |
background-size: cover; | background-size: cover; | ||
width: 260px; | width: 260px; | ||
height: 80px; | height: 80px; | ||
position: absolute; | position: absolute; | ||
- | top: | + | top:35px; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#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: | + | right: 0; |
- | top: | + | top:2.5em; |
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#logo span, #igem_logo span { | #logo span, #igem_logo span { | ||
Line 407: | 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 413: | Line 314: | ||
width: 100%; | width: 100%; | ||
background: #012148; | background: #012148; | ||
- | margin-bottom: | + | margin-bottom: 30px; |
min-width:600px; | min-width:600px; | ||
} | } | ||
Line 423: | Line 324: | ||
#main_navigation > div > ul > li { | #main_navigation > div > ul > li { | ||
display: inline-block; | display: inline-block; | ||
- | margin: 0; | + | margin: 0 20px 0 0 ; |
- | + | ||
- | + | ||
padding: 0; | padding: 0; | ||
} | } | ||
Line 445: | Line 344: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
} | } | ||
- | |||
Line 524: | 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; | position: relative; | ||
- | + | transition:height 0.5s; | |
+ | -webkit-transition:height 0.5s; | ||
} | } | ||
- | . | + | .growat:hover { |
+ | overflow: hidden; | ||
+ | height: 1000px; | ||
+ | } | ||
+ | |||
+ | .growbio { | ||
+ | border-radius: 10px; | ||
display: inline-block; | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 250px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
position: relative; | 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