Difference between revisions of "Team:Exeter/Team"

(Prototype team page)
 
 
(196 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{Exeter}}
 
 
<html>
 
<html>
 +
</div></div></div></div></div>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 +
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 +
  <script type="text/javascript" async
 +
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
 +
  MathJax.Hub.Config({
 +
  tex2jax: {
 +
    inlineMath: [['$','$'], ['\\(','\\)']],
 +
    processEscapes: true
 +
  }
 +
});
 +
</script>
 +
 
 +
 +
</head>
 +
 +
<body>
 +
<style type="text/css">
 +
  @media (max-width: 920px) {
 +
  .navbar-header {
 +
      float: none;
 +
  }
 +
  .navbar-left,.navbar-right {
 +
      float: none !important;
 +
  }
 +
  .navbar-toggle {
 +
      display: block;
 +
  }
 +
  .navbar-collapse {
 +
      box-shadow: inset 0 0 0 rgba(255,255,255,0.1);
 +
  }
 +
  .navbar-fixed-top {
 +
      top: 0;
 +
      border-width: 0 0 1px;
 +
  }
 +
  .navbar-collapse.collapse {
 +
      display: none!important;
 +
  }
 +
 
 +
  .navbar-nav {
 +
      float: none!important;
 +
      margin-top: 7.5px;
 +
  }
 +
  .navbar-nav>li {
 +
      float: none;
 +
  }
 +
  .navbar-nav>li>a {
 +
      padding-top: 10px;
 +
      padding-bottom: 10px;
 +
  }
 +
  .collapse.in{
 +
      display:block !important;
 +
  }
 +
  #soc{
 +
display:none;
 +
  }
 +
}
 +
#links{
 +
color:#47BCC2;
 +
/*font-size:20px;*/
 +
font-size:1.2vw;
 +
margin:0 0.9vw 0.5vh 0.9vw;
 +
padding:0;
 +
line-height:0px;
 +
padding-top:28px;
 +
}
 +
/*Fixes font size when nav-bar is collapsed*/
 +
@media (max-width: 920px) {
 +
#links{
 +
font-size:20px;
 +
}
 +
}
 +
#links:hover{
 +
color:#339499;
 +
}
 +
#links:active{
 +
color:#339499;
 +
}
 +
.navbar{
 +
background-color:#e8e8e8;
 +
border-bottom:none;
 +
min-height:54px;
 +
    margin:4px 0 0 0;
 +
}
 +
.navbar-inverse .navbar-toggle .icon-bar {/*teal toggle */
 +
    background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/
 +
border:none;
 +
background-color:#e8e8e8;
 +
}
 +
.navbar-inverse .navbar-toggle:hover {
 +
background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
 +
    background-color:#47BCC2;
 +
}
 +
.navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar{
 +
background-color:#eeeeee;
 +
}
 +
/*soc classes controll css for media icons*/
 +
#soc{
 +
margin-top:-12px;
 +
margin-left:-15px;
 +
}
 +
.soc_1{
 +
margin-right:3px;
 +
}
 +
.soc_2{
 +
margin-right:3px;
 +
}
 +
.soc_3{
 +
margin-right:3px;
 +
}
  
 +
/*Navbar exgem logo styling*/
 +
#logo, #logo_inverse{
 +
margin-top:-12px;
 +
vertical-align:middle;
 +
width:48px;
 +
height:48px;
 +
/*Alligns logo with toggled list on thin screens*/
 +
margin-left:13px;
 +
margin-right:-12px;
 +
}
 +
/*Logo is visable on page load by default*/
 +
#logo{
 +
display:block;
 +
}
 +
/*The inverse logo is not visable by default, but becomes visable*/
 +
/*when #logo_button is hovered over (found in jquery)*/
 +
#logo_inverse{
 +
display:none;
 +
}
  
 +
/*Displays brand inline with ExGem*/
 +
.navbar-brand > img {
 +
    display: inline;
 +
}
 +
.navbar-right a{
 +
height:50px;
 +
width:48px;
 +
}
 +
#Top_link.navbar-brand{/*Top link styling*/
 +
color:#47BCC2;
 +
font-size:25px;
 +
margin-bottom:5px;
 +
opacity:0.6
 +
}
 +
#topnav{
 +
padding-bottom:0px;
 +
position:fixed;
 +
}
 +
#topnav (max-width: 767px) {
 +
display:none;
 +
}
 +
#text{/*Top link text*/
 +
color:#47BCC2;
 +
}
 +
#myNavbar{
 +
border: none;
 +
}
 +
/*sticky footer*/
 +
.wrap {
 +
  min-height: 100%;
 +
  margin-bottom: -65px;  /* equal to footer height */
 +
}
 +
.wrap:after {
 +
  content: "";
 +
  display: block;
 +
}
 +
.footer, .wrap:after {
 +
  height: 60px;
 +
  padding-top:5px;
 +
}
 +
.flare .wrap:after{
 +
height:5px;
 +
}
 +
.flare{
 +
background-color:#8cd5d9; 
 +
padding-top:3px;
 +
position:relative;
 +
bottom:0px;
 +
width:100%;
 +
}
 +
.footer{
 +
background-color:#e8e8e8;
 +
}
 +
/*Hides igm logo and team name*/
 +
#sideMenu, #top_title {display:none;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;}
 +
#top_title{visibility: hidden; background:#eeeeee;}
 +
#bodyContent{background:#eeeeee;}
 +
#mw-content-text{background:#eeeeee;}
 +
#HQ_page{background:none; height:0px; width:0px;}
 +
#content{background:none;}
 +
#globalWrapper{height:0px;background:#eeeeee;}
 +
/*end of hacky css :) */
 +
/*There is a <p></p> at bottom of iGEM page. In order to keep footer*/
 +
/*On bottom of page we have styled <p> tags to have no margin or border*/
 +
/*Therefore on all of our paragraphs need to id "pp" to work properly*/
 +
p{
 +
        margin:0;
 +
        padding:0;
 +
        border-style:none;
 +
}
 +
#pp{
 +
padding-top:20px;
 +
padding-right:40px;
 +
padding-left:40px;
 +
font-size:100%;
 +
}
 +
.container ul, .container ol{
 +
font-size:140%;
 +
padding-right:40px;
 +
padding-left:60px;
 +
padding-top:10px;
 +
}
 +
/*Heading styles*/
 +
h1, h2, h3, h4, h5{
 +
text-align:center;
 +
color:#339499;
 +
font-weight:500;
 +
    padding-left: 40px;
 +
    padding-right: 40px;
 +
padding-top: 40px;
 +
padding-bottom:0;
 +
}
 +
h1{font-size:340%;}
 +
h2{font-size:280%;}
 +
h3{font-size:290%;}
 +
h4{font-size:260%;}
 +
h5{font-size:220%;}
 +
h6{
 +
color:#339499;
 +
font-weight:500;
 +
font-size:200%;
 +
padding-left:40px;
 +
padding-top: 20px;
 +
padding-bottom:-10px;
 +
}
 +
/*Italics for Quotes using i tag*/
 +
q{
 +
text-align:center;
 +
color:#339499;
 +
padding-left:10%;
 +
padding-right:10%;
 +
font-size:120%;
 +
font-style: italic;
 +
}
 +
/*Styling for links*/
 +
a{
 +
color:#339499;
 +
font-weight:550;
 +
}
 +
/**page content styling starts**/
 +
body{
 +
background-color:#eeeeee;
 +
}
 +
h1{
 +
text-align:center;
 +
        border-style:none;
 +
}
 +
#Section_Link, #Section_Link:visited{
 +
display:block;
 +
margin:0 auto 10px auto;
 +
width:14px;
 +
}
 +
#Section_Link:hover{
  
−
<div class="column full_size" >
+
}
 +
#sectionGap, #sectionGap:focus, #contentTitle{
 +
min-width:100%;
 +
min-height:10vh;
 +
background:#e8e8e8;
 +
display:block;
 +
font-size:400%;
 +
text-align:center;
 +
color:#47BCC2;
 +
text-decoration:none;
 +
border-style:none none solid none;
 +
border-width:3px;
 +
border-color:#8cd5d9;
 +
}
 +
#sectionGap:hover, #sectionGap:active{
 +
color:#339499;
 +
}
 +
.container{
 +
min-width:100%;
 +
padding:0;
 +
}
 +
.div_vl{
 +
padding-top:2%;
 +
height:35vw;
 +
width:95vw;
 +
display:block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('https://static.igem.org/mediawiki/2016/9/93/T--Exeter--Home_Background1.png');
 +
background-repeat:no-repeat;
 +
background-size: 100% auto;
 +
width:100%;
 +
height:88vh;
 +
}
 +
#title{
 +
style="font-family: 'Arial';
 +
color:#4e4e4e;
 +
text-align:center;
 +
margin-bottom:20px;
 +
font-size:400%;
 +
}
 +
.div_content{
 +
padding:0;
 +
min-height:100vh;
 +
width:100%;
 +
background:#eeeeee;
 +
}
  
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
/*div_banner contains to links at the top of each page to link to*/
 +
/*each section of the page*/
 +
.div_banner{
 +
max-width:90vw;
 +
margin:12vh auto 5vh auto;
 +
display:block;
 +
height:8vh;
 +
}
  
 +
/*Contains styling for the left and right pictures of the banner*/
 +
.subdiv_banner{
 +
height:8vh;
 +
padding:0;
 +
margin:auto;
 +
position:relative;
 +
bottom:0;
 +
right:0;
 +
}
 +
.subdiv_banner.left{
 +
float:left;
 +
display:block;
 +
}
 +
.subdiv_banner.right{
 +
float:right;
 +
display:block;
 +
}
 +
.subdiv_banner.middle{
 +
height:100%;
 +
}
 +
/*Positions the images in correct place in the divs*/
 +
.subdiv_banner.left img, .subdiv_banner.right img{
 +
width:100%;
 +
position: relative;
 +
top: 38%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link,.banner_link:visited{
 +
position: relative;
 +
height:100%;
 +
padding:0, 2px!important;
 +
color:#47BCC2;
 +
text-align:center;
 +
font-size:1.5vw;
 +
/*Max font size where "section" and "1" don't appear on*/
 +
}
 +
.banner_link span.oneline{
 +
position: relative;
 +
top: 34.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link span.twoline{
 +
position: relative;
 +
top: 7.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link:hover{
 +
text-decoration:none;
 +
color:#339499;
 +
}
 +
.link_fix{
 +
display:block;
 +
position:relative;
 +
height:1px;
 +
top:-15px;
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.link_fix{
 +
display:none;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('#');
 +
background:#ddd;
 +
}
 +
#title{
 +
font-size:260%;
 +
}
 +
.banner_link{
 +
font-size:22px;
 +
}
 +
.div_banner{
 +
margin-top:20px;
 +
}
 +
/*Makes side pictures on banner invisible on small screens*/
 +
/*as it clutters screen*/
 +
.subdiv_banner.left, .subdiv_banner.right{
 +
display:none;
 +
}
 +
}
  
−
</div>
+
/*Team page css*/
 +
.role{
 +
text-align:center;
 +
color:6fff00;
 +
font-size:80%;
 +
}
 +
ul.img-list {
 +
 +
  margin: 0;
 +
  padding: 3% 0;
 +
  text-align: center;
 +
}
 +
ul.img-list{
 +
list-style-type: none;!important
 +
list-style-image: url(#);
 +
 
 +
}
 +
.affix {
 +
      bottom: 0;
 +
      width: 100%;
 +
}
 +
#moda{
 +
color:#23527c;
 +
}
 +
span.name{
 +
  color: black;
 +
  cursor: pointer;
 +
  display: table;
 +
  left: 10%;
 +
  position: absolute;
 +
  top: 75%;
 +
  opacity: 0;
 +
  font-size:30px;
 +
  -webkit-transition: opacity 500ms;
 +
  -moz-transition: opacity 500ms;
 +
  -o-transition: opacity 500ms;
 +
  transition: opacity 500ms;
 +
}
 +
ul.img-list li:hover span.name {
 +
transition: opacity 0ms;
 +
  opacity: 1;
 +
}
 +
.hover:hover{
 +
opacity:0.4;
 +
}
 +
#dropdownMenu1{
 +
margin-top:-0.15vw;
 +
background:#e8e8e8;
 +
border-style:none;
 +
}
 +
@media (min-width: 767px){
 +
.dropdown-menu{
 +
margin-top:24px;
 +
left:-19px;
 +
border-radius:0px;
 +
padding:4px;
 +
}
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.div_vl.backgroundimage{
 +
height:37vh;
 +
background-size: auto 200%;
 +
}
 +
.div_l{
 +
display:none;
 +
}
 +
#logo_Banner_Desktop{
 +
display:none;
 +
}
 +
#logo_Banner_Mobile{
 +
display:block;
 +
width:100%;
 +
max-width:200px;
 +
margin:auto;
 +
}
 +
#dropdownMenu1{
 +
padding:2.5% 0 2% 0;
 +
margin:-1.6% auto -1.4% 0.9%;
 +
}
 +
#links{
 +
padding:10px 0;
 +
margin-left:0.85vw;
 +
}
 +
}
 +
#links_drop{
 +
color:#47BCC2;
 +
/*font-size:20px;*/
 +
font-size:1.2vw;
 +
margin:8px 0.9vw 0.5vh 0.9vw;
 +
padding:0.06vw 0 0 0;
 +
line-height:0px;
 +
}
 +
@media (max-width: 920px){
 +
#links_drop{
 +
margin-left:0;
 +
padding-top:9px;
 +
margin-top:-4px;
 +
font-size:20px;
 +
}
 +
}
 +
button.dropdown-toggle{
 +
padding-top:21px; !important
 +
}
 +
@media (max-width: 767px){
 +
button.dropdown-toggle{
 +
padding-top:5px;
 +
}
 +
}
 +
#links_drop:hover span{
 +
color:#339499;
 +
}
 +
</style>
  
−
<div class="column half_size" >
+
<div id="top_page" class="link_fix"></div>
−
<h5>Inspiration</h5>
+
<nav id="Top" class="navbar navbar-inverse navbar-static-top">
−
<p>You can look at what other teams did to get some inspiration! <br />
+
  <div class="container-fluid">
−
Here are a few examples:</p>
+
    <div class="navbar-header">
−
<ul>
+
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
          <span class="icon-bar"></span>
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
          <span class="icon-bar"></span>
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
          <span class="icon-bar"></span>                       
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
</button>
−
</ul>
+
      <a id="logo_button" class="navbar-brand" href="https://2016.igem.org/Team:Exeter">
 +
<img id="logo" src="https://static.igem.org/mediawiki/2016/7/75/T--Exeter--Template--Logo2.png"/>
 +
<img id="logo_inverse" src="https://static.igem.org/mediawiki/2016/2/23/T--Exeter--Template_Logo2_inverse.png"/>
 +
  </a>
 +
 
 +
    </div>
 +
    <div>
 +
        <div class="collapse navbar-collapse" id="myNavbar">
 +
<ul class="nav navbar-nav">
 +
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Lab</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Project">Lab Project</a></li>
 +
    <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Labbook">Lab Book</a></li>
  
−
</div>
+
  </ul>
 +
</div></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
 +
<li><a id="links" href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</a></li>
 +
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Human Practices</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1"> 
 +
    <li><a id="links" style="margin:10px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Integrated_Practices">Integrated</a></li>
 +
<li><a id="links" style="background:none;line-height:0.7vh;margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Engagement">Public Engagement<br /><br /><br /> & Education</a></li><li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
  
−
<div class="column half_size" >
+
  </ul>
−
<h5>What should this page contain?</h5>
+
</div></li>
−
<ul>
+
 
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
 
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
<li><div id="links_drop" class="dropdown">
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
−
</ul>
+
    <span style="margin-bottom:4px;">Awards</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
 
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
 +
<li><span style="margin:10px 0 30px 2px;padding:0;">Special pages</span></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Silver">HP Silver</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Gold">HP Gold</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Model">Models</a></li>
 +
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
 +
 
 +
 
 +
 
 +
</ul>
 +
<ul class="nav navbar-nav navbar-right">
 +
<li style="height:50px;width:48px;"class="soc_1">
 +
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/></a>
 +
</li>
 +
<li style="height:50px;width:48px;"class="soc_2">
 +
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/></a>
 +
</li>
 +
<li style="height:50px;width:48px;"class="soc_3">
 +
<a href="https://twitter.com/exeter_igem">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/></a>
 +
</li>
 +
</ul>
 +
    </div>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<div style="height:3px; background-color:#8cd5d9; margin-top:0px;" ></div>
 +
<!--div below contains a rolling counter for scrolling position-->
 +
<div id="scrollPosition" style="display:none;">0</div>
 +
<script>
 +
$(document).ready(function(){
 +
//topnav script
 +
var width = document.documentElement.clientWidth;
 +
console.log(width, "Hello, world!");
 +
if (width > 539){
 +
$( window ).scroll(function(){
 +
//id scrollPosition links to a hidden div at top of html that
 +
//constantly counts the pixels you have scrolled down.
 +
//Any other solution only worked when page is refreshed.
 +
$('#scrollPosition').html($( window ).scrollTop());
 +
//Handles #topnav at bottom of page
 +
var distHeight = $( document ).height() - $('#scrollPosition').html() - window.innerHeight;
 +
var boxHeight = $("#topnav").height();
 +
var manualPaddingbot = 5;
 +
var padding = boxHeight - distHeight + manualPaddingbot;
 +
//Causes #topnav to be a variable height from bottom when
 +
//footer is in view, and a fixed position on screen when
 +
//footer is out of view
 +
if (distHeight <= boxHeight){
 +
$("#topnav").css("bottom",(padding + manualPaddingbot));
 +
}
 +
if (distHeight > boxHeight){
 +
$("#topnav").css("bottom",manualPaddingbot);
 +
}
 +
})
 +
}
 +
//Causes the navbar logo to switch between the default and
 +
//inverse versions when the <a> with #logo_button is hovered over
 +
$('#logo_button').hover(function(){
 +
$('#logo').toggle();
 +
$('#logo_inverse').toggle();
 +
});
 +
});
 +
//Smooth scrolling//
 +
$('a[href^="#"]').on('click',function (e) {
 +
    e.preventDefault();
 +
 
 +
    var target = this.hash;
 +
    var $target = $(target);
 +
 
 +
    $('html, body').stop().animate({
 +
        'scrollTop': $target.offset().top
 +
    }, 900, 'swing', function () {
 +
        window.location.hash = target;
 +
    });
 +
});
 +
</script>
 +
<!--Counter and topnav ends-->
 +
<!--Content begins-->
 +
<div class="container">
 +
<div class="div_vl backgroundimage">
 +
<h1 id="title">Meet the Team </h1>
 +
<!--Contains links to sections on page-->
 +
<div class="div_banner">
 +
<!--Right picture (the teal line on right)-->
 +
<div class="col-sm-2 subdiv_banner left">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8a/T--Exeter--Template_Banner_left.png">
 +
</div>
 +
<!--Contains all information of banner in the middle-->
 +
<!--of the two outer images-->
 +
<div class="col-xs-12 col-sm-8 subdiv_banner middle">
 +
<!--Use bootstrap to add links using all 12 columns-->
 +
<!--For each link please give double the coloumns for when-->
 +
<!--the screen is xs compared to when it is sm-->
 +
 +
<!--Give span class "oneline" or "twoline" depending on how llong the section text is-->
 +
<a href="#section_1" class="banner_link col-xs-6"><span class="oneline">Student Team</span></a>
 +
<a href="#section_2" class="banner_link col-xs-6"><span class="oneline">Advisory Team</span></a>
 +
 +
</div>
 +
<!--Left picture (the teal line on left)-->
 +
<div class="col-sm-2 subdiv_banner right">
 +
<img src="https://static.igem.org/mediawiki/2016/5/56/T--Exeter--Template_Banner_right.png">
 +
</div>
 +
</div>
 +
<div>
 +
<a id="Section_link" href="#section_1" style="display:block;margin:34vh auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
 +
</div>
 +
<div class="col-xs-12 div_content">
 +
<div id="section_1" class="link_fix"></div>
 +
<div id="contentTitle">
 +
Student Team
 +
</div>
 +
<div class="wrap">
 +
<!--Content Begins-->
 +
<!--div below contains a rolling counter for scrolling position-->
 +
<div id="scrollPosition" style="display:none;">0</div>
 +
<!--Counter finished-->
 +
 
 +
<div id="Team" class="container" style="padding:0px 30px 0px 30px;">
 +
 
 +
<div class="col-xs-12" style="padding:2% 0;">
 +
<div class="col-xs-0 col-sm-0 col-me-2"></div>
 +
<div class="col-xs-12 col-sm-6 col-me-4">
 +
<div class="row" style="padding-top:20px">
 +
<video style="height:356px;width:632px;margin:auto;display:block;width:90%;" controls>
 +
<source src="https://static.igem.org/mediawiki/2016/c/c9/T--Exeter--Team_1.Webm" type="video/webm">
 +
<source src="https://static.igem.org/mediawiki/2016/1/13/T--Exeter--Team_videomp4.mp4" type="video/mp4">
 +
<source src="https://static.igem.org/mediawiki/2016/7/73/T--Exeter--Team_video.ogg" type="video/ogg">
 +
 +
Your browser does not support the video tag.
 +
</video>
 +
</div>
 +
</div>
 +
<div class="col-xs-12 col-sm-6 col-me-4">
 +
<div class="row" style="padding-top:20px">
 +
<video style="height:356px;width:632px;margin:auto;display:block;width:90%;" controls>
 +
<source src="https://static.igem.org/mediawiki/2016/8/81/T--Exeter--Team_Teamvideo2mp4.mp4" type="video/mp4">
 +
<source src="https://static.igem.org/mediawiki/2016/7/7c/T--Exeter--Team_Teamvideo2ogg.ogg" type="video/ogg">
 +
 +
Your browser does not support the video tag.
 +
</video>
 +
</div>
 +
</div>
 +
<div class="col-xs-0 col-sm-0 col-me-2"></div>
 +
<div class="col-xs-12"><h1>Click on a member of the team to find out more:</h1></div>
 +
<hr style="border-color:#777777; margin:0;"/>
 +
<div class="row">
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal1" id="moda"><span class="name"><span>Leanne Stanfield</span></span><img img class="hover" src="https://static.igem.org/mediawiki/2016/5/51/T--Exeter--Team_Leanne.jpg" style="width:100%;">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal1" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal1">&times;</button>
 +
<h2 class="modal-title">Leanne Stanfield<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Physics Mphys<span style="float:right"><span style="color:#15B5C5;">Age: </span>19</span></p>
 +
<p id="pp">
 +
Hi! My name's Leanne, and I'm a first year Physics student from Birmingham.
 +
I'm super excited (and grateful) to be involved with iGEM,
 +
and it's definitely making me rather interested in Biophysics!
 +
I really really really love coffee and lemon cheesecakes,
 +
and quite enjoy going for runs.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>lds211@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important" class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal2" id="moda"><span class="name"><span>Jack Fleet</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/2/2d/T--Exeter--Team_Jack.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal2" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal2">&times;</button>
 +
<h2 class="modal-title">Jack Fleet<br />
 +
<span class="role"></span></h2>
 +
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;">
 +
<span style="color:#15B5C5;";>Course:</span> 
 +
BSc Biological and Medicinal Chemistry </p>
 +
<p id="pp"><span style="text-align:center;"><span style="color:#15B5C5;">Age: </span>20</span></p>
 +
<p id="pp">Hallo! My name’s is Jack. I live in Cornwall, though I am originally from Kent.
 +
I enjoy doing impressions, playing football and listening to an eclectic mix of music.
 +
I would love to live and study abroad, however this may be a little bit difficult considering England’s current situation.
 +
I am excited to be a member of the Exeter iGEM team as it is a fantastic opportunity for me to meet a wide variety of people from different countries and industries across the globe.
 +
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>jehf201@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important" class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal3" id="moda"><span class="name"><span>Eloise Lloyd</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/c/cc/T--Exeter--Team_Ellie.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal3" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal3">&times;</button>
 +
<h2 class="modal-title">Eloise Lloyd<br />
 +
<span class="role"></span></h2>
 +
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span>Biochemistry Bsc<span style="float:right"><span style="color:#15B5C5;">Age: </span>19</span></p>
 +
<p id="pp"> Hello, my name is Eloise!
 +
I am a first year Biochemist on Team Science for Exeter’s iGEM 2016 team.
 +
Science is a big part of my life considering the dream is to one day help cure cancer.
 +
The iGEM competition is proving to be an amazing platform for widening my view of science and exposing me to how different scientific fields can be integrated. I am originally from Essex so exploring Exeter’s beautiful countryside and endless hills on my bicycle is an excellent way to spend my summer when outside of the lab.
 +
My other interests include yoga,
 +
elephants and Formula 1, Team Lewis all the way!
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>egl202@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important" class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal4" id="moda"><span class="name"><span>Alan Williams</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/f/f6/T--Exeter--Team_Alan.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal4" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal4">&times;</button>
 +
<h2 class="modal-title">Alan Williams<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;">Course:</span> Physics Mphys<span style="float:right"><span style="color:#15B5C5;">Age: </span>20</span></p>
 +
<p id="pp">Hey, I'm Alan. I'm really into science. I joined the iGEM team so I could put the skills I have learnt in my degree into practice.
 +
It's been great so far and I'm really enjoying the experience. I enjoy programming thus I'm one of the wiki guys.
 +
  I'm a massive sports fan. Rugby and skateboarding are my favourites, although I do love to surf when I get the chance.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>aw505@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
     
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal5" id="moda"><span class="name"><span>The Team</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/4/45/T--Exeter--Team_Team.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal5" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal5">&times;</button>
 +
<h2 class="modal-title">The Team<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
 +
<p id="pp">Hi! We are Exeter University’s 2016 iGEM team made up of first, second and third year students of a wide variety of disciplines. We aspire to further the iGEM legacy, but we will settle for just getting something to work! We also aim to change the public’s perception of the field, distinguishing synthetic biology as a positive tool that can be used to combat key problems from multiple disciplines. </p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>ExeteriGEM2016@gmail.com</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
 
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal6" id="moda"><span class="name"><span>Dan Barber</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/9/90/T--Exeter--Team_Dan.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal6" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal6">&times;</button>
 +
<h2 class="modal-title">Dan Barber<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Biological Sciences BsSc<span style="float:right"><span style="color:#15B5C5;">Age: </span>25</span></p>
 +
<p id="pp">
 +
I’m a first year biological sciences student,
 +
my background is in art and illustration but I decided to come back to university to try something I’m not terrible at!
 +
iGEM is a really exciting opportunity for me because there's lots of scope for creativity.
 +
I love fungi, climbing, painting and playing music.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>db436@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal7" id="moda"><span class="name"><span>Emily Reeves</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/f/f0/T--Exeter--Team_Emily.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal7" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal7">&times;</button>
 +
<h2 class="modal-title">Emily Reeves<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Biochemistry BSc<span style="float:right"><span style="color:#15B5C5;">Age: </span>19</span></p>
 +
<p id="pp">
 +
Hello! My name is Emily.
 +
I am excited to be a part of the Exeter iGEM team of 2016 as it is a great opportunity to get a taster of the various disciplines that make up synthetic biology,  
 +
as well as the chance to meet people from around the world who share a similar interest in science.
 +
Outside of my studies I like running, cycling and bad science puns.
 +
I am also interested in learning about health and nutrition.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>er373@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12"><a href="#">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal8" id="moda"><span class="name"><span>Alice Redgate</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/6/63/T--Exeter--Team_Alice.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal8" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal8">&times;</button>
 +
<h2 class="modal-title">Alice Redgate<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Bioscience Bsc<span style="float:right"><span style="color:#15B5C5;">Age: </span>20</span></p>
 +
<p id="pp">
 +
Hello! My name is Alice and over the summer I’ll be documenting the progress of our team. I love filming and it enables us to reach a wider audience with what we are doing. I have also been working on the human practices side, travelling to schools to introduce our synthetic biology board game. Besides iGEM, I like producing videos for XTV (our student television station) for which I am Head of Factual on committee next year. I also love scuba diving and spent my gap year working as an instructor on the Great Barrier Reef.
 +
If you've seen our YouTube channel, come and talk to me at the jamboree!
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>avr207@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal9" id="moda"><span class="name"><span>Hannah Osborne</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/thumb/0/0f/T--Exeter--Team_Hannah.jpg/800px-T--Exeter--Team_Hannah.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal9" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal9">&times;</button>
 +
<h2 class="modal-title">Hannah Osborne<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Physics with Astrophysics Mphys<span style="float:right"><span style="color:#15B5C5;">Age: </span>20</span></p>
 +
<p id="pp">Hi, I'm Hannah, a third year student passionate about space research,
 +
finding exoplanets and encouraging a new generation into science and space exploration.
 +
Last year I helped set up Exeter University Space Society and climbed Mt Kilimanjaro to raise money for the charity Hope for Children.
 +
I have had experience in science outreach with UKSEDS (UK Students for the Exploration and Development of Space) and presenting at the National Student Space Conference but I hope iGEM will give me a whole new set of skills,
 +
starting with how to light a Bunsen burner!
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>hlmo201@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div> </div>
 +
<div class="row">
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal10" id="moda"><span class="name"><span>Andy Wild</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/d/d7/T--Exeter--Team_Andy.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal10" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal10">&times;</button>
 +
<h2 class="modal-title">Andy Wild<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Physics Mphys<span style="float:right"><span style="color:#15B5C5;">Age: </span>20</span></p>
 +
<p id="pp">Hi, my name is Andy. I have a passion for learning new things,
 +
it’s one of the aspects that attracted me to iGEM. Being a physicist,
 +
an opportunity to experience a whole new field of science doesn’t occur too often,
 +
so I jumped at the opportunity. Outside of science I have a great interest in fitness and general well-being, whilst still appreciating an evening in with mates.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>aw553@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal11" id="moda"><span class="name"><span>Pablo Sharrock</span></span><img class="hover" src="https://static.igem.org/mediawiki/2016/4/4b/T--Exeter--Team_Pablo.jpg" style="width:100%; ">
 +
<!-- Modal -->
 +
<div class="modal" id="myModal11" role="dialog">
 +
<div class="modal-dialog">
 +
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal11">&times;</button>
 +
<h2 class="modal-title">Pablo Sharrock<br />
 +
<span class="role"></span></h2>
 +
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Biological Sciences BSc<span style="float:right"><span style="color:#15B5C5;">Age: </span>20</span></p>
 +
<p id="pp">HI! My name is Pablo. I speak three languages: English, Spanish and French.
 +
I also love travelling and meeting people with different backgrounds, as I believe that it gives a better understanding of how the world works.
 +
Similarly iGEM has given me a better understanding of how all the different sciences are related and how collaboration between them is now more important than ever in order to progress in all scientific fields.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>pcs213@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModal" id="moda">
 +
<span class="name"><span>Joel Burton-Lowe</span></span>
 +
<img class="hover" src="https://static.igem.org/mediawiki/2016/f/f2/T--Exeter--Team_joel_2.jpg" style="width:100%;">
 +
 +
<!-- Modal -->
 +
<div class="modal" id="myModal" role="dialog">
 +
<div class="modal-dialog">
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModal">&times;</button>
 +
<h2 class="modal-title">Joel Burton-Lowe<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp" style="text-align:left;"><span style="color:#15B5C5;";>Course:</span> Physics Mphys<span style="float:right"><span style="color:#15B5C5;">Age: </span>20</span></p>
 +
<p id="pp">Hi I’m Joel, my main area of interest within my studies is biophysics. This led me to join the iGEM team to expand my knowledge and develop my research skills.
 +
Other than science I listen to a lot of music, mainly rock/metal and I attend as many concerts and festivals as possible.  
 +
As well as this i enjoy snowboarding, rugby, gaming the list goes on.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>jb702@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<hr style="border-color:#777777; margin:0;">
 +
 
</div>
 
</div>
 +
<div class="col-xs-12 div_content">
 +
<div id="section_2" class="link_fix"></div>
 +
<div id="contentTitle">
 +
Advisory Team
 +
</div>
 +
<div style="padding:0 2%;">
 +
  
 +
<div class="row">
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModalF" id="moda">
 +
<span class="name"><span>Jamie Gilman</span></span>
 +
<img class="hover" src="https://static.igem.org/mediawiki/2016/5/5d/T--Exeter--Team_jamie.jpg" style="width:100%;"/>
 +
 +
<!-- Modal -->
 +
<div class="modal" id="myModalF" role="dialog">
 +
<div class="modal-dialog">
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModalF">&times;</button>
 +
<h2 class="modal-title">Jamie Gilman<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
 +
 +
<p id="pp">I am a third year PhD student, working in the Exeter Microbial Biofuels Group.
 +
I am attempting to develop a set of thoroughly characterised, robust synthetic
 +
promoters in a non-model organism using statistical models that link promoter
 +
sequence and structure to function. This is my first year being involved with
 +
iGEM, but I have enjoyed working with the team and am looking forward to being
 +
a judge in Boston.</p>
 +
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>jg371@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModalE" id="moda">
 +
<span class="name"><span>Dr Chloe Singleton</span></span>
 +
<img class="hover" src="https://static.igem.org/mediawiki/2016/7/70/T--Exeter--Team_chloe.jpg" style="width:100%;"/>
 +
 +
<!-- Modal -->
 +
<div class="modal" id="myModalE" role="dialog">
 +
<div class="modal-dialog">
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModalE">&times;</button>
 +
<h2 class="modal-title">Dr Chloe Singleton<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp">
 +
I am a Research Fellow in the Exeter Microbial Biofuels group under the direction of John Love. Within the group, my research uses a synthetic biology approach to develop a molecular toolkit that will allow us to engineer and control both synthetic and natural biological pathways within a non-model organism. Although this is my first year as an official member of the Exeter iGEM team, I have watched previous teams develop and test their ideas in our lab. Their enjoyment and enthusiasm for their projects has been an inspiration to all of us and I am proud to be an active adviser this year. Good luck Exeter iGEM 2016.
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>c.singleton@exeter.ac.uk</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModalD" id="moda">
 +
<span class="name"><span>Dr John Love</span></span>
 +
<img class="hover" src="https://static.igem.org/mediawiki/2016/6/60/T--Exeter--Team_john.jpg" style="width:100%;"/>
 +
 +
<!-- Modal -->
 +
<div class="modal" id="myModalD" role="dialog">
 +
<div class="modal-dialog">
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModalD">&times;</button>
 +
<h2 class="modal-title">Dr John Love<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>j.love@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModalB" id="moda">
 +
<span class="name"><span>Dr Paul James</span></span>
 +
<img class="hover" src="https://static.igem.org/mediawiki/2016/3/34/T--Exeter--Team_james.jpg" style="width:100%;"/>
 +
 +
<!-- Modal -->
 +
<div class="modal" id="myModalB" role="dialog">
 +
<div class="modal-dialog">
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModalB">&times;</button>
 +
<h2 class="modal-title">Dr Paul James<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
                <p id="pp">I am a Research Fellow working under Professor Love in the Exeter Microbial Biofuels group with our research focusing on using a synthetic biology approach to producing customisable petroleum replica fuel molecules. I have been involved with iGEM since 2013 and i continue to be amazed by the range and depth of projects that our brilliant students produce year in year out and i am looking forward to another fantastic year.</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>P.B.C.James@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModalC" id="moda">
 +
<span class="name"><span>Advisory Team</span></span>
 +
<img class="hover" src="https://static.igem.org/mediawiki/2016/f/fb/T--Exeter--Team_staff.jpg" style="width:100%;"/>
 +
 +
<!-- Modal -->
 +
<div class="modal" id="myModalC" role="dialog">
 +
<div class="modal-dialog">
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModalC">&times;</button>
 +
<h2 class="modal-title">Advisers<br />
 +
<span class="role"></span></h2>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp">
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;"> </span></p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="col-md-4 col-sm-6 col-xs-12">
 +
<ul style="list-style-image: none;!important"  class="img-list">
 +
<li>
 +
<a data-toggle="modal" data-target="#myModalA" id="moda">
 +
<span class="name"><span>Ryan Edginton</span></span>
 +
<img class="hover" src="
 +
https://static.igem.org/mediawiki/2016/d/dc/T--Exeter--Team_ryan.jpg" style="width:100%;"/>
 +
 +
<!-- Modal -->
 +
<div class="modal" id="myModalA" role="dialog">
 +
<div class="modal-dialog">
 +
<!-- Modal content-->
 +
<div class="modal-content">
 +
<div class="modal-header">
 +
<button type="button" class="close" data-dismiss="#myModalA">&times;</button>
 +
</a><h3 class="modal-title">Ryan Edginton<br /></h3>
 +
</div>
 +
<div class="modal-body">
 +
<p id="pp">
 +
Hey there, I’m Ryan, a third year PhD candidate in Biomedical Physics studying under Dr. Francesca Palombo. I’m developing an understanding of the fundamental biomechanics and structure-function relationships that govern the physics and chemistry of the extracellular matrix. The iGEM experience persuaded me to crack on and do a PhD at the Physics-Biology interface; I was a student member of our very first iGEM team here at Exeter back in 2012, and am proud to have been an instructor to our guys ever since. I can’t wait to see what Exeter have in store for us this year! Exciting times!
 +
</p>
 +
</div>
 +
<div class="modal-footer">
 +
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
 +
<p id ="pp" style="text-align:center;"><a href="http://emps.exeter.ac.uk/physics-astronomy/staff/rse204"
 +
style="text-align:center;">Research Profile</a></p>
 +
<p id="pp" style="text-align:center;"><span style="color:#15B5C5;text-align:center;">Email: </span>rse204@exeter.co.uk</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
  
 +
</div>
 +
</div>
 +
</div>
  
 +
<div>
 +
 +
</div>
 +
 +
 +
</div>
 +
</div>
 +
<!--Content Ends-->
 +
<nav id="topnav" class="nav-navbar" style="right:2px;">
 +
  <div class="container-fluid">
 +
    <div class="navbar-header">
 +
      <a class="navbar-brand" id="Top_link" href="#top_page">
 +
<span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
 +
  </a>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<div class="flare"></div>
 +
<footer class="footer">
 +
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
 +
<img style="padding-left:3%" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
 +
</a>
 +
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 +
<img src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/>
 +
</a>
 +
<a href="https://twitter.com/exeter_igem">
 +
<img src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/>
 +
</a>
 +
</footer>
 +
<!--numbr 1:  i cant get your toplink to show number 2: weird grey bar on toggle menue-->
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 21:46, 18 October 2016