Team:Oxford/team
From 2014.igem.org
(Difference between revisions)
(Prototype team page) |
|||
Line 1: | Line 1: | ||
- | |||
<html> | <html> | ||
+ | <meta charset="UTF-8"> | ||
+ | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | ||
+ | <script type="text/javascript" src="http://www.aemcreative.co.uk/js/script.js"></script> | ||
+ | |||
+ | <script type="text/javascript">try{Typekit.load();}catch(e){}</script> | ||
+ | <!--[if lt IE 9]> | ||
+ | <script src="http://www.aemcreative.co.uk/shiv/dist/html5shiv.js"></script> | ||
+ | <![endif]--> | ||
+ | <!--[if lt IE 9]> | ||
+ | <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> | ||
+ | <![endif]--> | ||
+ | <!--[if (gte IE 6)&(lte IE 8)]> | ||
+ | <script type="text/javascript" src="http://www.aemcreative.co.uk/js/selectivizr.js"></script> | ||
+ | <![endif]--> | ||
+ | <link rel="stylesheet" type="text/css" href="/css/reset.css"> | ||
+ | <link rel="stylesheet" type="text/css" href="/css/main.css"> | ||
+ | <meta name="viewport" content="initial-scale=1, user-scalable=yes,maximum-scale=1.5,width=device-width"> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | /* | ||
+ | html5doctor.com Reset Stylesheet | ||
+ | v1.6.1 | ||
+ | Last Updated: 2010-09-17 | ||
+ | Author: Richard Clark - http://richclarkdesign.com | ||
+ | Twitter: @rich_clark | ||
+ | */ | ||
- | + | html, body, div, span, object, iframe, | |
- | + | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
+ | abbr, address, cite, code, | ||
+ | del, dfn, em, img, ins, kbd, q, samp, | ||
+ | small, strong, sub, sup, var, | ||
+ | b, i, | ||
+ | dl, dt, dd, ol, ul, li, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td, | ||
+ | article, aside, canvas, details, figcaption, figure, | ||
+ | footer, header, hgroup, menu, nav, section, summary, | ||
+ | time, mark, audio, video { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | border:0; | ||
+ | outline:0; | ||
+ | font-size:100%; | ||
+ | vertical-align:baseline; | ||
+ | background:transparent; | ||
+ | } | ||
+ | body { | ||
+ | line-height:1; | ||
+ | } | ||
- | + | article,aside,details,figcaption,figure, | |
- | + | footer,header,hgroup,menu,nav,section { | |
- | + | display:block; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | blockquote, q { | |
- | + | quotes:none; | |
- | + | } | |
- | + | blockquote:before, blockquote:after, | |
- | + | q:before, q:after { | |
+ | content:''; | ||
+ | content:none; | ||
+ | } | ||
- | + | a { | |
- | + | margin:0; | |
- | + | padding:0; | |
+ | font-size:100%; | ||
+ | vertical-align:baseline; | ||
+ | background:transparent; | ||
+ | } | ||
+ | ins { | ||
+ | background-color:#ff9; | ||
+ | color:#000; | ||
+ | text-decoration:none; | ||
+ | } | ||
- | + | mark { | |
- | + | background-color:#ff9; | |
+ | color:#000; | ||
+ | font-style:italic; | ||
+ | font-weight:bold; | ||
+ | } | ||
- | + | del { | |
- | + | text-decoration: line-through; | |
+ | } | ||
- | + | abbr[title], dfn[title] { | |
- | + | border-bottom:1px dotted; | |
+ | cursor:help; | ||
+ | } | ||
- | + | table { | |
- | + | border-collapse:collapse; | |
+ | border-spacing:0; | ||
+ | } | ||
- | + | hr { | |
- | + | display:block; | |
+ | height:1px; | ||
+ | border:0; | ||
+ | border-top:1px solid #cccccc; | ||
+ | margin:1em 0; | ||
+ | padding:0; | ||
+ | } | ||
- | + | input, select { | |
- | + | vertical-align:middle; | |
+ | } | ||
- | + | .clearfix:after { | |
- | + | content: "."; | |
+ | display: block; | ||
+ | clear: both; | ||
+ | visibility: hidden; | ||
+ | line-height: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | .clearfix { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | html[xmlns] .clearfix { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | * html .clearfix { | ||
+ | height: 1%; | ||
+ | } | ||
- | < | + | </style> |
- | < | + | |
+ | |||
+ | <style> | ||
+ | /* page setup */ | ||
+ | body { | ||
+ | font-size: 14px; | ||
+ | color: #000; | ||
+ | font-weight: 300; | ||
+ | background-color: whitesmoke; | ||
+ | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
+ | -webkit-font-smoothing: antialiased; } | ||
- | + | ::selection, ::-moz-selection { | |
- | + | background: whitesmoke; | |
+ | color: #CCC; | ||
+ | /* Safari */ } | ||
+ | ::-moz-selection { | ||
+ | background: whitesmoke; | ||
+ | color: #666666; | ||
+ | /* Firefox */ } | ||
- | + | p { | |
- | + | line-height: 2; } | |
- | + | ||
- | + | h1 { | |
- | + | text-align: center; | |
- | + | font-size: 1.8em; | |
- | + | color: #002147; | |
+ | margin-bottom: .5em; } | ||
- | + | h1.alt { | |
- | + | color: #fab313; } | |
- | + | ||
- | + | h2 { | |
- | + | font-weight: bold; | |
- | + | text-transform: uppercase; } | |
- | + | ||
- | + | h3 { | |
- | + | color: #333333; | |
- | + | font-size: 1.1em; | |
- | + | margin-bottom: .5em; | |
- | + | font-weight: 500; } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | a { | |
+ | color: black; | ||
+ | text-decoration: underline; } | ||
+ | .content { | ||
+ | max-width: 960px; | ||
+ | margin: 0 auto; | ||
+ | display: block !important; | ||
+ | position: relative; | ||
+ | -webkit-backface-visibility: hidden; } | ||
+ | .column { | ||
+ | float: left; | ||
+ | max-width: none; | ||
+ | display: block; } | ||
- | + | .block { | |
- | + | width: 100%; | |
- | + | margin: 3.5em 0 3.5em 0; } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | .verse { | ||
+ | text-align: center; | ||
+ | display: block; | ||
+ | width: 50%; | ||
+ | margin: 0 auto; | ||
+ | min-width: 280px; } | ||
- | + | .full { | |
+ | width: 100%; } | ||
- | + | .half { | |
- | + | width: 50%; } | |
- | + | ||
- | + | ||
+ | .quarter { | ||
+ | width: 25%; } | ||
- | + | .fourty { | |
- | + | width: 40%; } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .sixty { | |
+ | width: 60%; } | ||
- | + | .third { | |
- | + | width: 33.333334%; } | |
- | + | .two-third { | |
+ | width: 66.666667%; } | ||
+ | @media all and (max-width: 1000px) { | ||
+ | .content { | ||
+ | padding-left: 2%; | ||
+ | padding-right: 2%; | ||
+ | width: 96%; | ||
+ | position: relative; } } | ||
+ | @media all and (max-width: 768px) { | ||
+ | .column { | ||
+ | margin-bottom: .75em; } | ||
- | </ | + | .half { |
+ | width: 100%; } | ||
+ | |||
+ | .quarter { | ||
+ | width: 50%; } } | ||
+ | @media all and (max-width: 480px) { | ||
+ | .column { | ||
+ | width: 100%; } | ||
+ | |||
+ | .column p, .column h2 { | ||
+ | display: block; } } | ||
+ | /* page setup END */ | ||
+ | /* header */ | ||
+ | header { | ||
+ | width: 100%; | ||
+ | margin: 1.5em 0 1.5em 0; | ||
+ | display: block !important; } | ||
+ | |||
+ | #logo { | ||
+ | float: left; | ||
+ | width: 15em; | ||
+ | height: 5em; | ||
+ | margin-right: 2em; | ||
+ | display: block; | ||
+ | height: 4em; | ||
+ | margin-top: -.2em; } | ||
+ | |||
+ | #logo img { | ||
+ | height: 5em; | ||
+ | } | ||
+ | |||
+ | |||
+ | nav ul { | ||
+ | font-size: 1.2em; | ||
+ | padding-top: .2em; | ||
+ | list-style: none; | ||
+ | display: block; | ||
+ | font-weight: bold; | ||
+ | text-transform: uppercase; | ||
+ | line-height: 2; | ||
+ | margin-top: -.5em; | ||
+ | float: right; | ||
+ | text-align: right; } | ||
+ | |||
+ | nav { | ||
+ | overflow: hidden; } | ||
+ | |||
+ | nav a { | ||
+ | text-decoration: none; } | ||
+ | |||
+ | nav li { | ||
+ | display: inline-block; | ||
+ | *display: inline; | ||
+ | *zoom: 1; | ||
+ | margin-right: 1em; } | ||
+ | |||
+ | nav a { | ||
+ | color: #002147; | ||
+ | } | ||
+ | |||
+ | nav a:hover { | ||
+ | color: #002147; | ||
+ | color: #fab313; | ||
+ | } | ||
+ | |||
+ | .current a { | ||
+ | color: black; } | ||
+ | |||
+ | @media all and (max-width: 480px) { | ||
+ | header { | ||
+ | margin: 1.5em 0 1em 0; } | ||
+ | |||
+ | #logo { | ||
+ | top: 0 !important; | ||
+ | width: 12em; | ||
+ | margin: 0 auto; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | float: none; | ||
+ | height: 5em; | ||
+ | } | ||
+ | |||
+ | |||
+ | nav { | ||
+ | width: 100%; | ||
+ | overflow: auto; } | ||
+ | |||
+ | nav ul { | ||
+ | top: 0; | ||
+ | text-align: center; | ||
+ | float: none; | ||
+ | margin: 0 auto; | ||
+ | margin-top: .5em; } | ||
+ | |||
+ | nav li { | ||
+ | margin-right: .5em; | ||
+ | margin-left: .5em; } } | ||
+ | /* header end */ | ||
+ | /* footer */ | ||
+ | footer { | ||
+ | clear: both; | ||
+ | padding: 1em 0 2em 0; | ||
+ | line-height: 2; | ||
+ | color: #666666; | ||
+ | border-top: 1px solid #eee; } | ||
+ | |||
+ | footer a { | ||
+ | text-decoration: none; | ||
+ | font-weight: 500; | ||
+ | color: inherit; } | ||
+ | |||
+ | footer p { | ||
+ | color: #333333; | ||
+ | text-decoration: none; } | ||
+ | |||
+ | footer ul { | ||
+ | list-style: none; } | ||
+ | |||
+ | #companies { | ||
+ | opacity: 0.9; | ||
+ | margin-top: .25em; } | ||
+ | |||
+ | #companies li { | ||
+ | float: left; | ||
+ | margin-right: 2em; } | ||
+ | |||
+ | #companies img { | ||
+ | height: 30px; } | ||
+ | |||
+ | @media all and (max-width: 768px) { | ||
+ | footer .column { | ||
+ | text-align: center; | ||
+ | margin-bottom: 2em; } } | ||
+ | /* footer end */ | ||
+ | /* homepage */ | ||
+ | #clients_home { | ||
+ | width: 100%; } | ||
+ | |||
+ | #clients_home .column { | ||
+ | height: 240px; | ||
+ | background-size: 95%; | ||
+ | opacity: 0.75; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center center; | ||
+ | -webkit-transition: all .1s ease-in-out; | ||
+ | -moz-transition: all .1s ease-in-out; } | ||
+ | |||
+ | #clients_home .column:hover { | ||
+ | -webkit-transform: scale(1.05); | ||
+ | -moz-transform: scale(1.05); | ||
+ | opacity: 1; } | ||
+ | |||
+ | #clients_home #ssc_home { | ||
+ | background-image: url("/assets/portfolio/ssc/thumb.png"); } | ||
+ | |||
+ | #clients_home #torro_home { | ||
+ | background-image: url("/assets/portfolio/torro/thumb.png"); } | ||
+ | |||
+ | #clients_home #greygoose_home { | ||
+ | background-image: url("/assets/portfolio/goose/thumb.png"); } | ||
+ | |||
+ | #clients_home #lutterworthsc_home { | ||
+ | background-image: url("/assets/portfolio/lutterworthsc/thumb.png"); } | ||
+ | |||
+ | #services_home { | ||
+ | margin-bottom: 3em; } | ||
+ | |||
+ | #services_home .column p { | ||
+ | width: 94%; | ||
+ | margin-left: 3%; | ||
+ | color: #666; } | ||
+ | |||
+ | #services_home .column h3 { | ||
+ | text-align: center; | ||
+ | margin: .75em 0 .75em 0; } | ||
+ | |||
+ | #services_home .image { | ||
+ | height: 100px; | ||
+ | background: #fff; | ||
+ | width: 94%; | ||
+ | margin: 0 0 3% 0; } | ||
+ | |||
+ | #services_home #services_branding { | ||
+ | background: url("/assets/services/ccc.png"); | ||
+ | background-size: cover; } | ||
+ | |||
+ | #services_home #services_webapp { | ||
+ | background: url("/assets/services/webapp.png"); | ||
+ | background-size: cover; } | ||
+ | |||
+ | #services_home #services_responsive { | ||
+ | background: url("/assets/services/responsive.png"); | ||
+ | background-size: cover; } | ||
+ | |||
+ | #slider_container { | ||
+ | background: white; } | ||
+ | |||
+ | .slider { | ||
+ | width: 100%; | ||
+ | height: 300px; } | ||
+ | |||
+ | @media all and (max-width: 768px) { | ||
+ | #clients_home .column { | ||
+ | margin-bottom: 0; | ||
+ | background-size: 80%; } } | ||
+ | @media all and (max-width: 480px) { | ||
+ | #clients_home .column { | ||
+ | margin-bottom: 0; | ||
+ | background-size: 90%; | ||
+ | width: 50%; } | ||
+ | |||
+ | #services_home .column { | ||
+ | margin-bottom: 2em; } | ||
+ | |||
+ | #services_home .column p { | ||
+ | width: 80%; | ||
+ | margin: 0 auto; } | ||
+ | |||
+ | #services_home .image { | ||
+ | width: 80%; | ||
+ | display: block; | ||
+ | margin: 0 auto; } } | ||
+ | /* homepage ENDS */ | ||
+ | /* services */ | ||
+ | #services_list { | ||
+ | margin-bottom: 3em; } | ||
+ | |||
+ | #services_list .column p { | ||
+ | width: 94%; | ||
+ | margin-left: 3%; | ||
+ | color: #666; } | ||
+ | |||
+ | #services_list .column h3 { | ||
+ | text-align: center; | ||
+ | margin: .75em 0 .75em 0; } | ||
+ | |||
+ | #services_list .image { | ||
+ | height: 100px; | ||
+ | background: #fff; | ||
+ | width: 94%; | ||
+ | margin: 0 0 3% 0; } | ||
+ | |||
+ | #services_list > .clearfix { | ||
+ | margin-bottom: 1.5em; } | ||
+ | |||
+ | @media all and (max-width: 480px) { | ||
+ | #services_list .column { | ||
+ | margin-bottom: 2em; } | ||
+ | |||
+ | #services_list .column p { | ||
+ | width: 80%; | ||
+ | margin: 0 auto; } | ||
+ | |||
+ | #services_list .image { | ||
+ | width: 80%; | ||
+ | display: block; | ||
+ | margin: 0 auto; } } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | <div class="content"> | ||
+ | <header class="clearfix"> | ||
+ | <div id="logo" class="clearfix"> | ||
+ | <img src="http://www.aemcreative.co.uk/oxford/logo.png" /> | ||
+ | </div> | ||
+ | <nav> | ||
+ | <ul> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Home">Home</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Team">Team</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Project">Project</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Parts">Parts</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Modelling">Modelling</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Notebook">Notebook</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Safety">Safety</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Oxford/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | </header> | ||
+ | </div> | ||
+ | <div class="content"> | ||
+ | |||
+ | </div> | ||
+ | <footer class="background"> | ||
+ | <div class="content clearfix"> | ||
+ | </div> | ||
+ | </footer> | ||
</html> | </html> |
Revision as of 20:18, 23 June 2014