Team:Oxford/templates/header
From 2014.igem.org
(Difference between revisions)
Olivervince (Talk | contribs) |
|||
(124 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <script> | ||
+ | $(document).ready(function() { | ||
+ | $('.hasdropdown').hover(function() { | ||
+ | $(this).find('.dropdown').stop(true,true).slideToggle(200); | ||
+ | }) | ||
- | + | }) | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | </script> | |
- | + | <style> | |
- | + | ||
- | + | ||
- | + | @import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300); | |
- | + | ||
- | + | body { | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #content { | |
- | + | border:none; | |
- | + | width:100%; | |
+ | margin:0; | ||
+ | padding:0; | ||
+ | background:none; | ||
+ | } | ||
- | + | #catlinks { | |
- | + | display:none; | |
- | + | } | |
- | + | #contentSub { | |
- | + | display:none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #menubar { | |
- | + | position: absolute; | |
- | + | white-space: nowrap; | |
+ | top: 0px; | ||
+ | width: 400px; | ||
+ | z-index: 5; | ||
+ | font-family: sans-serif; | ||
+ | font-size: 95%; | ||
+ | line-height: 1em; | ||
+ | } | ||
- | + | #menubar ul { | |
- | + | padding:10px; | |
- | + | } | |
- | + | #menubar ul li:last-child { | |
- | + | display:none; | |
- | + | } | |
- | + | #search-controls { | |
- | + | display:none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | #top-section { | |
- | + | height:0px; | |
- | + | width:100%; | |
- | + | border:none; | |
- | + | } | |
+ | |||
+ | #footer-box { | ||
+ | border:none; | ||
+ | display:none; | ||
+ | width:100%; | ||
+ | } | ||
- | + | #p-logo { | |
- | + | display:none; | |
- | + | } | |
- | + | .firstHeading { | |
- | + | display:none; | |
- | + | } | |
- | + | #bodyContent p{ | |
- | + | display:none; | |
- | + | } | |
- | + | ||
- | + | .right-menu li a { | |
- | + | background:none; | |
- | + | padding:10px; | |
- | + | } | |
- | + | .right-menu li a:hover { | |
- | + | color:#fff; | |
- | + | } | |
- | + | a.new:visited, #p-personal a.new:visited { | |
- | + | color:#fff; | |
- | + | } | |
- | + | /* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | v2.0 | 20110126 | ||
License: none (public domain) | License: none (public domain) | ||
- | + | */ | |
- | + | html, body, div, span, applet, object, iframe, | |
- | + | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
- | + | a, abbr, acronym, address, big, cite, code, | |
- | + | del, dfn, em, img, ins, kbd, q, s, samp, | |
- | + | small, strike, strong, sub, sup, tt, var, | |
- | + | b, u, i, center, | |
- | + | dl, dt, dd, ol, ul, li, | |
- | + | fieldset, form, label, legend, | |
- | + | table, caption, tbody, tfoot, thead, tr, th, td, | |
- | + | article, aside, canvas, details, embed, | |
- | + | figure, figcaption, footer, header, hgroup, | |
- | + | menu, nav, output, ruby, section, summary, | |
- | + | time, mark, audio, video { | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | border: 0; | |
- | + | font-size: 100%; | |
- | + | font: inherit; | |
- | + | vertical-align: baseline; | |
- | + | } | |
- | + | /* HTML5 display-role reset for older browsers */ | |
- | + | article, aside, details, figcaption, figure, | |
- | + | footer, header, hgroup, menu, nav, section { | |
- | + | display: block; | |
- | + | } | |
- | + | body { | |
- | + | line-height: 1; | |
- | + | } | |
- | + | ol, ul { | |
- | + | list-style: none; | |
- | + | } | |
- | + | blockquote, q { | |
- | + | quotes: none; | |
- | + | } | |
- | + | blockquote:before, blockquote:after, | |
- | + | q:before, q:after { | |
- | + | content: ''; | |
- | + | content: none; | |
- | + | } | |
- | + | table { | |
- | + | border-collapse: collapse; | |
- | + | border-spacing: 0; | |
- | + | } | |
- | + | /** | |
- | + | * For modern browsers | |
- | + | * 1. The space content is one way to avoid an Opera bug when the | |
- | + | * contenteditable attribute is included anywhere else in the document. | |
- | + | * Otherwise it causes space to appear at the top and bottom of elements | |
- | + | * that are clearfixed. | |
- | + | * 2. The use of `table` rather than `block` is only necessary if using | |
- | + | * `:before` to contain the top-margins of child elements. | |
- | + | */ | |
- | + | .cf:before, | |
- | + | .cf:after { | |
content: " "; /* 1 */ | content: " "; /* 1 */ | ||
display: table; /* 2 */ | display: table; /* 2 */ | ||
- | + | } | |
- | + | .cf:after { | |
clear: both; | clear: both; | ||
- | + | } | |
- | + | /** | |
- | + | * For IE 6/7 only | |
- | + | * Include this rule to trigger hasLayout and contain floats. | |
- | + | */ | |
- | + | .cf { | |
*zoom: 1; | *zoom: 1; | ||
- | + | } | |
- | + | .container p { | |
- | + | display:block !important; | |
- | + | } | |
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | body { | |
- | + | font-family: 'Open Sans', 'helvetica', sans-serif; | |
- | + | font-size: 10px; | |
- | + | font-weight: 300; | |
- | + | background: #f5f5f5; | |
+ | } | ||
- | + | p { | |
- | + | font-size: 14px; | |
- | + | margin-bottom: 10px; | |
+ | line-height: 1.5; | ||
+ | } | ||
- | + | p:last-child { | |
- | + | margin-bottom: 0; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .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; | |
- | + | } | |
- | + | .row { | |
- | + | margin-top:1em; | |
- | + | margin-bottom: 2.5em; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | @media all and (max-width: 1000px) { | |
.container, #footer-box { | .container, #footer-box { | ||
margin-left: 4%; | margin-left: 4%; | ||
Line 235: | Line 212: | ||
position: relative; | position: relative; | ||
} | } | ||
- | + | } | |
- | + | .column { | |
float: left; | float: left; | ||
max-width: none; | max-width: none; | ||
display: block; } | display: block; } | ||
- | + | .full { | |
width: 100%; } | width: 100%; } | ||
- | + | .half { | |
width: 50%; } | width: 50%; } | ||
- | + | .quarter { | |
width: 25%; } | width: 25%; } | ||
- | + | .fourty { | |
- | + | ||
- | + | ||
- | + | ||
width: 40%; } | width: 40%; } | ||
- | + | .sixty { | |
width: 60%; } | width: 60%; } | ||
- | + | .third { | |
width: 33.333333%; } | width: 33.333333%; } | ||
- | + | .two-third { | |
width: 66.666666%; } | width: 66.666666%; } | ||
- | + | .sixth { | |
width: 16.6666666%; } | width: 16.6666666%; } | ||
- | + | .two-ninth { | |
width: 22.2222222%; } | width: 22.2222222%; } | ||
- | + | h1 { | |
- | + | font-size: 20px; | |
- | + | font-weight: 400; | |
- | + | font-family: 'PT Serif', serif; | |
- | + | margin-bottom: .5em; | |
- | + | } | |
- | + | h2 { | |
- | + | font-size: 14px; | |
- | + | font-weight: 400; | |
- | + | font-family: 'PT Serif', serif; | |
- | + | margin-bottom: 5px; | |
- | + | } | |
- | + | nav li { | |
- | + | font-size: 14px; | |
- | + | cursor:pointer; | |
- | + | } | |
- | + | header { | |
- | + | background: url('https://static.igem.org/mediawiki/2014/e/eb/Oxfordigem_radcam.jpg'); | |
- | + | background-size: cover; | |
- | + | background-position: 10% 16%; | |
- | + | height: 300px; | |
- | + | min-width:600px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | #logo { | |
- | + | background: url('https://static.igem.org/mediawiki/2014/8/8a/Lgoo.png'); | |
- | + | background-size: cover; | |
- | + | width: 260px; | |
- | + | height: 80px; | |
- | + | position: absolute; | |
- | + | top:35px; | |
- | + | } | |
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | #igem_logo { | |
- | + | background: url('https://static.igem.org/mediawiki/2014/6/6d/OxiGEMiGEM.png'); | |
- | + | background-size: cover; | |
- | + | width: 9em; | |
+ | height: 7em; | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | top:2.5em; | ||
+ | } | ||
- | + | #logo span, #igem_logo span { | |
- | + | position:absolute; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
width:100%; | width:100%; | ||
height:100%; | height:100%; | ||
Line 374: | 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'); | ||
- | + | } | |
- | + | #main_navigation { | |
- | + | width: 100%; | |
- | + | background: #012148; | |
- | + | margin-bottom: 30px; | |
- | + | min-width:600px; | |
- | + | } | |
- | + | #main_navigation ul { | |
- | + | } | |
- | + | #main_navigation > div > ul > li { | |
- | + | display: inline-block; | |
- | + | margin: 0 20px 0 0 ; | |
- | + | padding: 0; | |
+ | } | ||
- | + | #main_navigation > div > ul > li > a { | |
- | + | display: block; | |
+ | width: 100%; | ||
+ | height: 30px;; | ||
+ | margin-top: 10px; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
- | + | #main_navigation a { | |
- | + | display: block; | |
- | + | color: #fff; | |
- | + | text-decoration: none; | |
- | + | text-transform: uppercase; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | #main_content { | ||
+ | padding: 30px 0 30px 0; | ||
+ | } | ||
+ | .hasdropdown { | ||
+ | position: relative; | ||
+ | } | ||
- | + | .dropdown { | |
- | + | position: absolute; | |
- | + | display: none; | |
+ | background: #012148; | ||
+ | color: #fff; | ||
+ | width: 200px; | ||
+ | left: -10px; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | z-index: 10; | ||
+ | font-size:12px; | ||
+ | } | ||
- | + | .dropdown li { | |
- | + | padding:10px; | |
- | + | } | |
- | + | .dropdown li:hover { | |
- | + | background:#001d3f; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .dropdown li:last-child { | |
- | + | margin-bottom: 0; | |
- | + | } | |
- | + | footer { | |
- | + | margin-top: 20px; | |
- | + | padding: 30px 0 30px 0; | |
+ | border-top:1px solid #e5e5e5; | ||
+ | min-width:600px; | ||
+ | } | ||
- | + | #sponsors { | |
- | + | width: 50%; | |
- | + | float: left; | |
+ | text-align: center; | ||
+ | } | ||
- | + | #sponsors img { | |
- | + | width: 90px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | #sponsors ul li, #footer_links ul li { | ||
+ | display: inline-block; | ||
+ | margin: 10px; | ||
+ | } | ||
+ | #footer_links { | ||
+ | width: 50%; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | + | /* homepage */ | |
- | + | #team_picture img{ | |
- | + | display: block; | |
- | + | width: 85%; | |
- | + | margin: 0 auto; | |
+ | } | ||
+ | .news_block { | ||
+ | margin-bottom: 1em; | ||
+ | background: #fff; | ||
+ | padding: 1em; | ||
+ | width:90%; | ||
+ | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | .grow { | |
- | + | border-radius: 10px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
display: inline-block; | display: inline-block; | ||
+ | overflow: hidden; | ||
+ | height: 20px; | ||
+ | width: 100%; | ||
+ | margin: 0% 0px 0px 0%; | ||
+ | float: center; | ||
position: relative; | 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> | ||
+ | </header> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</html> | </html> | ||
+ | {{:Team:Oxford/templates/nav}} |
Latest revision as of 09:18, 9 September 2014