Difference between revisions of "Team:UCL/Playingaround"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
<script language="JavaScript" type="text/javascript">
 +
$(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>
 +
 
<style>
 
<style>
  
Line 19: Line 51:
 
   width: 100%;
 
   width: 100%;
 
   z-index: 99999;
 
   z-index: 99999;
 +
transition-property: opacity;
 +
  transition-duration: 2s;transition-timing-function: ease;
 
}
 
}
 
#logophoto:hover {opacity: 0.7; transition-property: opacity;  
 
#logophoto:hover {opacity: 0.7; transition-property: opacity;  
−
   transition-duration: 3s;transition-timing-function: ease;}
+
   transition-duration: 2s;transition-timing-function: ease;}
  
 
#hidden-menu {
 
#hidden-menu {
Line 30: Line 64:
  
 
#introo1 {width: 100%; height: 100%; position: relative;  
 
#introo1 {width: 100%; height: 100%; position: relative;  
−
background: #F7F7F7; background-image: url('https://static.igem.org/mediawiki/2015/d/dc/UCL_block1.png');  background-repeat: no-repeat; background-position: 0% -5%; background-size: 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%;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
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;
 
}
 
}
  
−
#introo1text {position: absolute; bottom: 7%; padding-left: 10%; width: 65%; font-size: 20px; letter-spacing: 2px; line-height: 1.8; float: left; display: inline;}
+
#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;}
  
−
#introo1arrow {width: 7%; height: 7%; float: right; display: inline; position: absolute; bottom: 10%; right: 10%; }
+
#introo1arrow {width: 7%; height: 7%; float: right; display: inline; position: absolute; bottom: 20%; right: 10%; z-index: 10000; opacity: 0.8;}
  
  
−
#introo2 {width: 100%; height: 100%; position: relative;  
+
#introo1:after {
−
background: #F7F7F7; background-image: url('https://static.igem.org/mediawiki/2015/5/50/UCL_block2.png');  background-repeat: no-repeat; background-position: 0% 0%; background-size: 100%;
+
    content: "";
 +
  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;
 
font-family: Raleway;
−
letter-spacing: 1.1px; font-size: 13px; top: 0px;
+
letter-spacing: 1.1px; font-size: 13px;  
 +
 
 +
 
 +
transition-property: background-image, color, border-color;
 +
  transition-duration: 0.2s;
 +
  transition-timing-function: ease-in;
 +
z-index: 9997;
 
}
 
}
  
−
#introo2text {position: absolute; bottom: 10%; right: 10%; width: 65%; font-size: 25px; letter-spacing: 2px; line-height: 1.8; float: right; display: inline;}
+
#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;}
  
−
#introo2arrow {width: 7%; height: 7%; float: left; display: inline; position: absolute; bottom: 10%; left: 7%; }
+
#introo2arrow {width: 7%; height: 17%; float: left; display: inline; position: absolute; bottom: 10%; left: 7%; z-index: 9999; opacity: 0.8;}
  
  
 +
#introo2:after {
 +
    content: "";
 +
    position: absolute;
 +
    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;
 +
padding: 0;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px; z-index: 9999; margin-bottom: 118px; border-bottom: 10px solid #014c4b;
 +
 +
 +
}
 +
 +
#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: relative; 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){
−
#introo1 {background-position: 0% -20%;}
+
#introo1 {}
−
#introo1text {font-size: 17px; line-height: 1.5;}
+
#introo2 { height: 100%;}
 +
#introo3 {height: 100%; background-position: left 0px bottom -35px;}
 +
#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%;}
 
}
 
}
  
 
@media (max-width:768px){
 
@media (max-width:768px){
−
#introo1 {background-position: 0% -20%;}
+
#introo1 {background-position: 0 100px;}
−
#introo1text {font-size: 17px; line-height: 1.5;}
+
#introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;}
−
#introo1arrow {width: 10%; height: 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%;}
  
 
}
 
}
Line 74: Line 225:
 
#introo1 {background-position: 0 100px;}
 
#introo1 {background-position: 0 100px;}
 
#introo1text {font-size: 15px; line-height: 1.5;}
 
#introo1text {font-size: 15px; line-height: 1.5;}
−
#introo1arrow {width: 13%; height: 13%;}
+
#introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;}
 +
#introo1arrow, #introo2arrow {width: 13%; height: 13%;}
  
 
}
 
}
Line 81: Line 233:
 
@media (max-width:360px){
 
@media (max-width:360px){
 
#introo1 {background-position: 0 60px;}
 
#introo1 {background-position: 0 60px;}
−
#introo1text {font-size: 14px; line-height: 1.2;}
+
#introo1text, #introo2text {font-size: 14px; line-height: 1.2;}
−
#introo1arrow {width: 20%; height: 20%;}
+
#introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;}
 +
#introo1arrow, #introo2arrow {width: 15%; height: 15%;}
 
}
 
}
 +
 +
 +
@-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: #493C54; background-image: url('https://static.igem.org/mediawiki/2015/b/b0/UCL_University_College_London2.jpg'); background-position: center 70%; background-size: 100%;  width: 100%; height: 120px; position: fixed; bottom: 0; left: 0; margin: 0 auto;  z-index: -1; }
 +
 +
  
 
</style>
 
</style>
Line 118: Line 294:
 
</div>
 
</div>
  
−
<div id="introo1">
+
<div id="introo1" class="bgswitch">
  
 
<div style="clear: both;"></div>
 
<div style="clear: both;"></div>
Line 148: Line 324:
 
<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 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">
 +
 +
Being inspired by this emerging research area, <span style="color: #019966;">UCL iGEM 2015</span> team wants to explore the modulation of the 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 <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>! </span>
 +
 +
 
</div>
 
</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/9/93/UCL_mtg_green.png" style="width: 100%; position: relative;"></a></div> </div>
 +
 +
 +
</div>
 +
 +
<div style="clear: both;"></div>
 +
 +
<div id="footer">
 
<div class="back">
 
<div class="back">
−
<a data-scroll data-options='{ "easing": "linear" }' href="#header">Back to top</a>
+
 
 +
<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="#header">Back to top</a>
 
</div>
 
</div>
 +
</div>
 +
 +
 +
 +
</div>
 +
 +
 +
  
 
</div>
 
</div>

Revision as of 18:45, 25 August 2015

The number of microorganisms in human gut is higher than the number of human cells in our body. Their metabolic activity equals that of liver and plays crucial role in many key processes such as digestion, drug metabolism, or functioning of the immune system...
Studies in mice have shown that the gut microbiome is also capable of influencing the chemistry of our brain, thus regulating our behaviour , anxiety , mood , cognition and pain ...
Being inspired by this emerging research area, UCL iGEM 2015 team wants to explore the modulation of the gut bacteria as a strategy for developing novel treatments for mental health disorders. Ultimately, our goal is to harness synthetic biology to make people happy!