Team:Oxford/team

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
{{CSS/Main}}
 
<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
 +
*/
-
<!--main content -->
+
html, body, div, span, object, iframe,
-
<table width="70%" align="center">
+
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;
 +
}
-
<!--welcome box -->
+
article,aside,details,figcaption,figure,
-
<tr>
+
footer,header,hgroup,menu,nav,section {
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
    display:block;
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
}
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
+
-
<br>
+
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:Oxford/Team&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
-
</td>
+
-
</tr>
+
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
blockquote, q {
-
<!-- end welcome box -->
+
    quotes:none;
-
<tr>
+
}
-
<!--navigation menu -->
+
blockquote:before, blockquote:after,
-
<td align="center" colspan="3">
+
q:before, q:after {
 +
    content:'';
 +
    content:none;
 +
}
-
<table  width="100%">
+
a {
-
<tr heigth="15px"></tr>
+
    margin:0;
-
<tr heigth="75px">
+
    padding:0;
 +
    font-size:100%;
 +
    vertical-align:baseline;
 +
    background:transparent;
 +
}
 +
ins {
 +
    background-color:#ff9;
 +
    color:#000;
 +
    text-decoration:none;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
mark {
-
<a href="https://2014.igem.org/Team:Oxford"style="color:#000000">Home </a> </td>
+
    background-color:#ff9;
 +
    color:#000;
 +
    font-style:italic;
 +
    font-weight:bold;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
del {
-
<a href="https://2014.igem.org/Team:Oxford/Team"style="color:#000000"> Team </a> </td>
+
    text-decoration: line-through;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
abbr[title], dfn[title] {
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=Oxford"style="color:#000000"> Official Team Profile </a></td>
+
    border-bottom:1px dotted;
 +
    cursor:help;
 +
}
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
table {
-
<a href="https://2014.igem.org/Team:Oxford/Project"style="color:#000000"> Project</a></td>
+
    border-collapse:collapse;
 +
    border-spacing:0;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
hr {
-
<a href="https://2014.igem.org/Team:Oxford/Parts"style="color:#000000"> Parts</a></td>
+
    display:block;
 +
    height:1px;
 +
    border:0; 
 +
    border-top:1px solid #cccccc;
 +
    margin:1em 0;
 +
    padding:0;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
input, select {
-
<a href="https://2014.igem.org/Team:Oxford/Modeling"style="color:#000000"> Modeling</a></td>
+
    vertical-align:middle;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
.clearfix:after {
-
<a href="https://2014.igem.org/Team:Oxford/Notebook"style="color:#000000"> Notebook</a></td>
+
        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%;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>  
+
                </style>
-
<a href="https://2014.igem.org/Team:Oxford/Safety"style=" color:#000000"> Safety </a></td>
+
               
 +
               
 +
                <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; }
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
::selection, ::-moz-selection {
-
<a href="https://2014.igem.org/Team:Oxford/Attributions"style="color:#000000"> Attributions </a></td>
+
  background: whitesmoke;
 +
  color: #CCC;
 +
  /* Safari */ }
 +
::-moz-selection {
 +
  background: whitesmoke;
 +
  color: #666666;
 +
  /* Firefox */ }
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
p {
-
</tr>
+
  line-height: 2; }
-
</table>
+
-
<!--end navigation menu -->
+
h1 {
-
</tr>
+
  text-align: center;
-
</tr>
+
  font-size: 1.8em;
-
</td>
+
  color: #002147;
 +
  margin-bottom: .5em; }
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
h1.alt {
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
  color: #fab313; }
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
-
<tr><td > <h3> Team Information</h3></td>
+
h2 {
-
<td ></td >
+
  font-weight: bold;
-
<td > <h3> Upload pictures of your team!</h3></td>
+
  text-transform: uppercase; }
-
</tr>
+
-
<tr>
+
h3 {
-
<td width="45%"  valign="top">
+
  color: #333333;
-
<p>
+
  font-size: 1.1em;
-
You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.</p>
+
  margin-bottom: .5em;
-
<p>
+
  font-weight: 500; }
-
You can look at what other teams did to get some inspiration! Here are a few examples:</p>
+
-
<ul>
+
-
<li><a href="https://2013.igem.org/Team:Evry/Team">2013 Evry</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Cornell/team">2013 Cornell</a></li>
+
-
<li><a href="https://2013.igem.org/Team:UANL_Mty-Mexico/Team">2013 UANL Mty-Mexico</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Korea_U_Seoul/Team/Korea_University">2013 Korea U Seoul</a></li>
+
-
</ul>
+
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; }
-
</td>
+
.block {
-
<td></td>
+
  width: 100%;
-
<td width="45%"  valign="top">
+
  margin: 3.5em 0 3.5em 0; }
-
<p> We provide a server where you can upload images for your wiki!</p>
+
-
<p> Add pictures of your team members, advisors, instructors, lab, institution and everything you wish to show! </p>
+
-
<a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a> <a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a>
+
-
</a> <a href="https://2014.igem.org/Special:Upload"><img src="" width="100px" height="100px">  </a>
+
-
<br>
+
-
<a href="https://2014.igem.org/Special:Upload">Click here to upload! </a>
+
-
</td>
+
 +
.verse {
 +
  text-align: center;
 +
  display: block;
 +
  width: 50%;
 +
  margin: 0 auto;
 +
  min-width: 280px; }
-
</tr>
+
.full {
 +
  width: 100%; }
-
<tr><td > <h3> Tips for the Team Page </h3></td>
+
.half {
-
<td ></td >
+
  width: 50%; }
-
<td > </td>
+
-
</tr>
+
 +
.quarter {
 +
  width: 25%; }
-
<tr>
+
.fourty {
-
<td width="45%"  valign="top">
+
  width: 40%; }
-
<p>What should this page contain?</p>
+
-
<ul>
+
-
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
-
<li> You can add a small biography or a few words from each team member, tell us what you like, and what motivates to participate in iGEM. </li>
+
-
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
-
<li>Remember that image galleries can help you showcase many pictures while saving space </li>
+
-
</ul>
+
-
</td>
+
.sixty {
 +
  width: 60%; }
-
<td></td>
+
.third {
-
<td width="45%"  valign="top"> </td>
+
  width: 33.333334%; }
-
</tr>
+
.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; }
-
</table>
+
  .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