Difference between revisions of "Team:UCL"

 
(71 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
<head>
 
<head>
  
−
<script language="JavaScript" type="text/javascript">
+
<style>
−
$(document).ready(function(){
+
−
+
−
var imgArr = new Array( // relative paths of images
+
−
'https://static.igem.org/mediawiki/2015/7/7f/UCL_block2_2_texture.jpg',
+
−
'https://static.igem.org/mediawiki/2015/c/ca/UCL_block2_3_texture.jpg',
+
−
'https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg'
+
−
);
+
−
+
−
var preloadArr = new Array();
+
−
var i;
+
−
+
−
/* preload images */
+
−
for(i=0; i < imgArr.length; i++){
+
−
preloadArr[i] = new Image();
+
−
preloadArr[i].src = imgArr[i];
+
−
}
+
−
+
−
var currImg = 1;
+
−
var intID = setInterval(changeImg, 2000);
+
−
+
−
/* image rotator */
+
−
function changeImg(){
+
−
$('#introo2').animate({opacity: 1}, 1000, function(){
+
−
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') no-repeat 1px 40px/100%');
+
−
}).animate({opacity: 1}, 1000);
+
−
}
+
−
+
−
});
+
−
</script>
+
  
 +
 
 +
   
 +
.buttonblack2 {
 +
text-transform: uppercase;
 +
  font-size: 14px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 4px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;
 +
  transition-timing-function: ease;
 +
            color: #FFFFFF;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
 +
  .buttonblack2 {background-color: #336666; border-color: #336666; }
  
−
 
+
  a.buttonblack2 { color: #fff !important; font-size: 12px;}
−
 
+
.buttonblack2:hover {border-color: #336666; color: #336666 !important; background-color: #fff !important;}
−
 
+
 
−
<style>
+
 
−
 
+
 
.interesting1 {
 
.interesting1 {
 
height:50px;
 
height:50px;
Line 104: Line 95:
 
}
 
}
  
−
 
−
 
−
h5 {
 
−
font-size:500%;
 
−
}
 
−
 
−
@media (max-width:696px){
 
−
#twit {display:none;};
 
−
}
 
  
  
Line 140: Line 122:
  
  
−
#introo1 {width: 100%; height: 100%; position: relative;  
+
#introo1 {width: 100%; height: 100%;
−
background: #FBFDFC;/* background-image: url('https://static.igem.org/mediawiki/2015/9/98/UCL_block1_texture.jpg');*/  background-repeat: no-repeat; background-position: 0% 0%; background-size: 100%;
+
    background-image: url('https://static.igem.org/mediawiki/2015/a/a5/UCLFRONTBLOCK_1_2015.png');
 +
position: relative;
 +
    -webkit-background-size: cover;
 +
  background-size: cover;
 +
background-position: 0 -100px;
 +
 
 +
display: block !important;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
  background-repeat: no-repeat;
 +
 +
color:none;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
 +
vertical-align: middle;
 
font-family: Raleway;
 
font-family: Raleway;
 
letter-spacing: 1.1px; font-size: 13px; top: 0px;
 
letter-spacing: 1.1px; font-size: 13px; top: 0px;
−
z-index: 9995;
+
  padding-top: 50px;
 +
  padding-bottom: 50px;
 +
 
 
}
 
}
−
 
+
  #introo3 {width: 100%;
−
#introo1text {position: absolute; bottom: 13%; padding-left: 10%; width: 65%; font-size: 20px; letter-spacing: 2px; line-height: 1.8; float: left; display: inline; z-index: 10000;}
+
    background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCLFRONTBLOCK_2_2015.png');
−
 
+
position: relative;
−
#introo1arrow {width: 7%; height: 7%; float: right; display: inline; position: absolute; bottom: 20%; right: 10%; z-index: 10000; opacity: 0.8;}
+
    -webkit-background-size: cover;
−
 
+
  background-size: cover;
−
 
+
background-position: 0 -100px;
−
#introo1:after {
+
 
−
    content: "";
+
display: block !important;
−
  position: absolute;
+
−
    right: 0px;
+
−
    left: 0px;
+
−
bottom: 0px;
+
−
height: 100px !important;
+
−
/*background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg'); */
+
−
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
+
−
 
+
−
 
+
−
background-size: 100%;
+
−
background-position: 1px 0%;
+
−
background-repeat: no-repeat;
+
−
    -webkit-transition: opacity 1s;
+
−
    -moz-transition: opacity 1s;
+
−
    transition: opacity 1s;
+
−
    opacity: 0.3;
+
−
z-index: 9996;
+
−
 
+
−
display: block;
+
−
 
+
−
}
+
−
 
+
−
#introo1:hover:after {
+
−
    opacity: 1; z-index: 9996;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
#introo2 {width: 100%; height: 110%; position: relative; top: -100px; /*margin-top: 100px;*/
+
−
/* background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg');*/
+
−
-webkit-mask-image: -webkit-gradient(linear, 0 40, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
+
−
 
+
−
 
+
−
  background-repeat: no-repeat; background-position: 1px 40px; background-size: 100% ; background-color: no-color;  
+
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
−
font-family: Raleway;
+
top: 0;
−
letter-spacing: 1.1px; font-size: 13px;  
+
bottom: 0;
 +
  background-repeat: no-repeat;
  
 +
color:none;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
  
−
transition-property: background-image, color, border-color;  
+
vertical-align: middle;
−
  transition-duration: 0.2s;  
+
font-family: Raleway;
−
  transition-timing-function: ease-in;  
+
letter-spacing: 1.1px; font-size: 13px; top: 0px;
−
z-index: 9997;
+
  padding-top: 50px;
 +
  padding-bottom: 50px;
 +
 
 
}
 
}
  
−
#introo2text {position: absolute; bottom: 20%; right: 10%; width: 65%; font-size: 23px; letter-spacing: 2.5px; line-height: 2.1; float: right; display: inline; z-index: 9999;}
+
  #introo1text {background: #fff;
 +
    border-radius: 20px;
 +
    font-size: 17px; width: 70%; margin: 0 auto; line-height: 1.7; padding: 30px; text-align: justify;}
  
−
#introo2arrow {width: 7%; height: 17%; float: left; display: inline; position: absolute; bottom: 10%; left: 7%; z-index: 9999; opacity: 0.8;}
+
  #introo2text {width: 60%; margin: 0 auto; padding-top: 50px;}
−
 
+
 
−
 
+
  #introo2 {width: 100%; height: 100%;
−
#introo2:after {
+
background: #EBF2F8;  
−
    content: "";
+
position: relative;
−
    position: absolute;
+
display: block !important;
−
    right: 0px;
+
−
    left: 0px;
+
−
bottom: 0px;
+
−
height: 100px !important;
+
−
/* background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_block3_texture3.jpg'); */
+
−
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
+
−
display: block;
+
−
background-size: 100%;
+
−
background-position: 1px 55%;
+
−
background-repeat: no-repeat;
+
−
    -webkit-transition: opacity 1s;
+
−
    -moz-transition: opacity 1s;
+
−
    transition: opacity 1s;
+
−
    opacity: 0.3;
+
−
z-index: 9998;
+
−
}
+
−
 
+
−
#introo2:hover:after {
+
−
    opacity: 1; z-index: 9998;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
#introo3 {width: 100%; height: 110%; position: relative; top: -200px;
+
−
 
+
−
 
+
−
/*background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_block3_texture3.jpg');*/
+
−
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
+
−
 
+
−
 
+
−
background-repeat: no-repeat; background-position: left 0px bottom 0px; background-size: 100%;  
+
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
−
font-family: Raleway;
+
top: 0;
−
letter-spacing: 1.1px; font-size: 13px; z-index: 9999; margin-bottom: 118px; border-bottom: 10px solid #014c4b;
+
bottom: 0;
 +
  background-repeat: no-repeat;
  
 +
  background-size: cover;
 +
background-position: top left;
 +
color:none;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
  
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px; top: 0px;
 +
  padding-top: 100px;
 +
  padding-bottom: 50px;
 +
 
 
}
 
}
  
−
#introo3text {position: absolute; top: 13%; right: 10%; width: 80%; font-size: 19px; letter-spacing: 2.2px; line-height: 1.8; float: right; display: inline; z-index: 10001;}
 
  
−
#introo3dna {background-image: url('https://static.igem.org/mediawiki/2015/a/ab/UCL_Gearicon.png'); background-size: 100%; background-repeat: no-repeat; background-position: center center; width: 8%; height: 15%; position: absolute; bottom: 35%; left: 24.5%; opacity: 0.5;
 
  
−
-webkit-animation-name: spinnerRotate;
 
−
    -webkit-animation-duration: 10s;
 
−
    -webkit-animation-iteration-count: infinite;
 
−
    -webkit-animation-timing-function: linear;
 
−
    -moz-animation-name: spinnerRotate;
 
−
    -moz-animation-duration: 10s;
 
−
    -moz-animation-iteration-count: infinite;
 
−
    -moz-animation-timing-function: linear;
 
−
    -ms-animation-name: spinnerRotate;
 
−
    -ms-animation-duration: 10s;
 
−
    -ms-animation-iteration-count: infinite;
 
−
    -ms-animation-timing-function: linear;
 
−
z-index: 10001;
 
−
}
 
−
 
−
#introo3dna-img {width: 8%; height: 15%; line-height: 50%; position: absolute; bottom: 35%; left: 24.5%; opacity: 0.8;
 
−
z-index: 10001;}
 
−
 
−
#todescription {position: absolute; bottom: 10%; width: 100%;}
 
−
#centerbutton {position: relative; margin: 0 auto; width: 17%; left: 10px; transition-property: opacity;
 
−
  transition-duration: 2s;transition-timing-function: ease;}
 
−
#centerbutton:hover {opacity: 0.5; transition-property: opacity;
 
−
  transition-duration: 2s;transition-timing-function: ease; }
 
  
 
@media (max-width:1024px){
 
@media (max-width:1024px){
Line 283: Line 214:
 
#introo3 {height: 100%; background-position: left 0px bottom -35px;}
 
#introo3 {height: 100%; background-position: left 0px bottom -35px;}
 
#introo1text, #introo1arrow {font-size: 18px; line-height: 1.5;}
 
#introo1text, #introo1arrow {font-size: 18px; line-height: 1.5;}
−
#introo2text {font-size: 20px; line-height: 1.5; bottom: 15%;}
 
−
#introo3text {font-size: 17px; line-height: 1.5; top: 20%;}
 
−
#todescription {bottom: 3%;}
 
 
}
 
}
  
Line 292: Line 220:
 
#introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;}
 
#introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;}
 
#introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;}
 
#introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;}
−
#introo1arrow, #introo2arrow {width: 10%; height: 10%;}
 
−
#introo3dna {bottom: 100px;}
 
−
#introo3dna-img {bottom: 80px;}
 
−
#todescription {bottom: 1%;}
 
−
#introo1:hover:after, #introo2:hover:after, #introo3:hover:after {visibility: hidden;}
 
−
 
 
}
 
}
  
Line 304: Line 226:
 
#introo1text {font-size: 15px; line-height: 1.5;}
 
#introo1text {font-size: 15px; line-height: 1.5;}
 
#introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;}
 
#introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;}
−
#introo3text {font-size: 15px; line-height: 1.5; }
 
−
 
−
#introo1arrow, #introo2arrow {width: 13%; height: 13%;}
 
  
 
}
 
}
Line 315: Line 234:
 
#introo1text, #introo2text {font-size: 14px; line-height: 1.2;}
 
#introo1text, #introo2text {font-size: 14px; line-height: 1.2;}
 
#introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;}
 
#introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;}
−
#introo1arrow, #introo2arrow {width: 15%; height: 15%;}
 
−
#introo3text {font-size: 14px; line-height: 1.3;}
 
  
 
}
 
}
  
−
 
−
@-webkit-keyframes spinnerRotate
 
−
{
 
−
    from{-webkit-transform:rotate(0deg);}
 
−
    to{-webkit-transform:rotate(360deg);}
 
−
}
 
−
@-moz-keyframes spinnerRotate
 
−
{
 
−
    from{-moz-transform:rotate(0deg);}
 
−
    to{-moz-transform:rotate(360deg);}
 
−
}
 
−
@-ms-keyframes spinnerRotate
 
−
{
 
−
    from{-ms-transform:rotate(0deg);}
 
−
    to{-ms-transform:rotate(360deg);}
 
−
}
 
−
 
−
 
−
 
−
#footer {background-image: url('https://static.igem.org/mediawiki/2015/d/d4/UCL_London_Quad_Frontpage.jpeg'); background-position: center 70%; background-size: cover;  width: 100%; height: 120px; position: fixed; bottom: 0; left: 0; margin: 0 auto;  z-index: -1; }
 
  
  
Line 363: Line 260:
  
 
<div id="logo">   
 
<div id="logo">   
−
<a href="https://2015.igem.org/Team:UCL/Software#mark"><img src="https://static.igem.org/mediawiki/2015/f/f1/Mind_the_Mark_icon_black_and_white.png" class="interesting1"/></a>
+
<!--<a href="https://2015.igem.org/Team:UCL/Software#mark"><img src="https://static.igem.org/mediawiki/2015/f/f1/Mind_the_Mark_icon_black_and_white.png" class="interesting1"/></a>
−
<a href="https://2015.igem.org/Team:UCL/Entrepreneurship"><img src="https://static.igem.org/mediawiki/2015/e/e6/Prokao_logo_black_and_white.png" class="interesting2"/></a>
+
<a href="https://2015.igem.org/Team:UCL/Entrepreneurship"><img src="https://static.igem.org/mediawiki/2015/e/e6/Prokao_logo_black_and_white.png" class="interesting2"/></a> -->
 
<img src="https://static.igem.org/mediawiki/2015/5/56/Mind_the_gut_logo_small_frontpage.png" id="logophoto" style="" alt="Mind the Gut">  
 
<img src="https://static.igem.org/mediawiki/2015/5/56/Mind_the_gut_logo_small_frontpage.png" id="logophoto" style="" alt="Mind the Gut">  
  
−
       <div class="intro-buttons" id="box-links">
+
       <div class="intro-buttons" id="box-links" style="margin: 0 auto;">
−
         <a data-scroll data-options='{ "easing": "linear" }' href="#introo1" class="buttonblack">Learn more</a>
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#introo2" class="buttonblack">Learn more</a>
 
   
 
   
 
<br/>
 
<br/>
  
 
       </div>
 
       </div>
−
 
 
</div>
 
</div>
−
 
−
 
−
 
  
 
</div>
 
</div>
  
−
<div id="introo1" class="bgswitch">
 
  
−
<div style="clear: both;"></div>
 
  
−
<div id="introo1text">
+
<div id="introo2">
−
Mind the Gut: developing psychobiotics to target the brain-gut-microbiota axis for mental health treatment
+
−
 
+
−
Current research suggests that gut microbes secrete neuroactive compounds that act on the gut-brain axis and play an important role in healthy brain function. UCL iGEM have developed novel synthetic psychobiotics that mimic these neuromodulatory strategies identified in endogenous intestinal strains.
+
−
 
+
−
We have designed safe therapeutic devices that target the glutamate, acetylcholine and tryptophan pathways for neurochemical synthesis. Additionally, we have assessed biocontainment and integrated a sensor detecting mood-related physiological changes in the gut environment.
+
−
 
+
−
In any year, mental health conditions affect one in four of us and available small molecule treatments have associated stigma and side effects. We believe that, besides aiding in the better understanding of the communication between gut microbiota and brain, our work will also lay a foundation for novel user-friendly treatments for mental health conditions.
+
−
The number of <span style="color: #FE6C68;">microorganisms</span> in the human gut is higher than the number of human cells in our body. Their <span style="color: #FE6C68;">metabolic activity</span>  plays crucial role in many key processes such as <span style="color: #FE6C68;">digestion</span>, <span style="color: #FE6C68;">drug metabolism</span> and functioning of the <span style="color: #FE6C68;">immune system</span>...
+
−
 
+
−
</div>
+
−
 
+
−
<!--<div id="introo1arrow">  <a data-scroll data-options='{ "easing": "linear" }' href="#introo2"><img src="https://static.igem.org/mediawiki/2015/f/f7/UCL_Intro1arrow.jpg" style="width: 100%;"></a></div>-->
+
−
 
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<!--<div id="introo2">
+
−
 
+
−
<div style="clear: both;"></div>
+
  
 
<div id="introo2text">
 
<div id="introo2text">
 +
<video width="100%" controls>
 +
  <source src="https://static.igem.org/mediawiki/2015/b/b1/Mind_the_gut_UCL_iGEM_2015_Wiki.mp4">
 +
  </video>
 +
  </div></div>
  
−
Several studies have shown that the <span style="color: #1E6073;">gut microbiome</span> is also capable of  influencing the chemistry of our brain, thus regulating our <span style="color: #1E6073;">behaviour</span> , <span style="color: #1E6073;">anxiety</span> , <span style="color: #1E6073;">mood</span> , <span style="color: #1E6073;">pain</span> and <span style="color: #1E6073;">cognition</span> ...
+
 
−
 
+
<div id="introo1">
 +
<!--
 +
<center>
 +
          <a style="position:relative;bottom:100px;" href="https://2015.igem.org/Team:UCL/Description" class="buttonblack2">Project description</a></center>
 +
--> 
 
</div>
 
</div>
−
-->
+
 
−
<!--<div id="introo2arrow">  <a data-scroll data-options='{ "easing": "linear" }' href="#introo3"><img src="https://static.igem.org/mediawiki/2015/b/b5/Intro2arrow.jpg" style="width: 100%;"></a></div>
+
  </div>
−
</div>-->
+
  <div id="introo3">
−
 
+
    <div id="introo3text">
−
<!--<div id="introo3">
+
  </div>
−
 
+
  </div>
−
 
+
  </div>
−
<div id="introo3text">
+
 
−
 
+
−
Inspired by this emerging research area, <span style="color: #019966;">the 2015 UCL iGEM </span> team explores the modulation of gut bacteria as a strategy for developing <span style="color: #019966;">novel treatments</span> for <span style="color: #019966;">mental health</span> disorders. Ultimately, our goal is to <span style="font-size: 130%;">harness this knowledge and use <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>! </span>
+
−
 
+
−
 
+
−
</div>-->
+
−
 
+
−
 
+
−
<!--<div id="introo3dna"></div>
+
−
<div id="introo3dna-img"><img src="https://static.igem.org/mediawiki/2015/4/4a/UCL_Dnaicon.png" style="width: 100%;"></div>-->
+
−
 
+
−
<!--<div id="todescription"><div id="centerbutton"><a href="https://2015.igem.org/Team:UCL/Description" ><img src="https://static.igem.org/mediawiki/2015/a/aa/UCL_mtg_green_project_description.png" style="width: 70%; position: relative;"></a></div> </div>-->
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
<div style="clear: both;"></div>
+
−
 
+
−
<div id="footer">
+
−
<div class="back">
+
−
 
+
−
<a href="http://twitter.com/UCLiGEM"><img src="https://static.igem.org/mediawiki/2015/6/64/Twitter-512.png" style="width: 40px; height: 40px;"></a>
+
−
 
+
−
<a href="http://www.facebook.com/UCLiGEM?fref=ts"><img src="https://static.igem.org/mediawiki/2015/6/69/UCL_fbicon.png" style="width: 35px; height: 35px;"></a>
+
−
 
+
−
<a href="mailto: ucligem2015@gmail.com"><img src="https://static.igem.org/mediawiki/2015/2/21/UCLEmailicom.png" style="width: 40px; height: 40px;"></a><br/><a data-scroll data-options='{ "easing": "linear" }' href="#headerr">Back to top</a>
+
−
</div>
+
−
</div>
+
−
 
+
  
  
Line 467: Line 316:
 
</div>
 
</div>
  
−
</div>
 
  
−
</div>
 
−
 
−
 
−
 
−
</div>
 
  
  
Line 480: Line 323:
  
  
−
 
−
<script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
 
−
<script>
 
−
smoothScroll.init({
 
−
speed: 1000,
 
−
easing: 'easeInOutCubic',
 
−
offset: 0,
 
−
updateURL: true,
 
−
callbackBefore: function ( toggle, anchor ) {},
 
−
callbackAfter: function ( toggle, anchor ) {}
 
−
});
 
−
</script>
 
  
  

Latest revision as of 03:58, 19 September 2015

'