Difference between revisions of "Team:UCL/Playingaround"

 
(417 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
{{CSS_UCL6}}
 +
 
 
<html>
 
<html>
 
<head>
 
<head>
−
<meta charset="utf-8">
 
  
−
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
<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>
  
−
<title>skrollr - parallax scrolling for the masses</title>
+
<style>
  
−
<style type="text/css">
+
h5 {
−
 
+
font-size:500%;
−
html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
+
−
margin: 0;
+
−
padding: 0;
+
−
border: 0;
+
−
font-size: 100%;
+
−
font: inherit;
+
−
vertical-align: baseline;
+
 
}
 
}
  
−
article, aside, details, figcaption, figure,
+
@media (max-width:696px){
−
footer, header, hgroup, menu, nav, section {
+
#twit {display:none;};
−
display: block;
+
 
}
 
}
  
−
html, body {
 
−
line-height: 1;
 
−
min-height:100%;
 
−
font-family: Verdana, sans-serif;
 
−
}
 
  
−
body {
 
−
background: #eeeeee;
 
−
background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background: linear-gradient(top, #eeeeee, #cccccc 100%);
 
−
background-attachment:fixed;
 
−
}
 
  
−
ol, ul {
+
#topline { width: 100%; height: auto; position: relative; padding: 0; top: 0px; display: block; 
−
list-style: none;
+
−
}
+
  
−
p {
+
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,1)));
−
margin: 0;
+
animation: topanimation 1s ease-in 1;
−
line-height:1.1em;
+
-webkit-animation: topanimation 1s ease-in 1;
 
}
 
}
  
−
q {
 
−
font-style:italic;
 
−
color:#333;
 
−
}
 
  
−
h1 {
+
@-webkit-keyframes topanimation {
−
font-size: 2.91em;
+
    0%  {padding-top: 100px;}
−
margin:0;
+
    100%  {padding-top: 0px;}}
 +
 
 +
#introo1 {width: 100%; height: 100%; position: relative;
 +
background: #FBFDFC; background-image: url('https://static.igem.org/mediawiki/2015/e/e1/UCL_block1_texture3.png');  background-repeat: no-repeat; background-position: 0% 0%; background-size: 100%;
 +
margin: 0;
 +
padding: 0;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px; top: 0px;
 +
z-index: 9995;
 
}
 
}
  
−
h1 > small {
+
#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;}
−
text-align:right;
+
 
−
display:inline-block;
+
#introo1arrow {width: 7%; height: 7%; float: right; display: inline; position: absolute; bottom: 20%; right: 10%; z-index: 10000; opacity: 0.8;}
−
font-size:.71em;
+
 
−
text-indent:15em;
+
 
−
color:#444;
+
#introo1:after {
 +
    content: "";
 +
  position: absolute;
 +
    right: 0px;
 +
    left: 0px;
 +
bottom: 0px;
 +
height: 100px;
 +
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;
 +
 
 
}
 
}
  
−
h2 {
+
#introo1:hover:after {
−
color:inherit;
+
    opacity: 1; z-index: 9996;
−
font-size:1.91em;
+
−
margin:2em 0 1em 0;
+
 
}
 
}
  
−
h2:first-child {margin-top:0;}
 
  
−
h3 {
 
−
font-size: 25px;
 
−
        font-family: verdana;
 
−
margin: 0;
 
  
−
}
 
  
−
h4 {
+
#introo2 {width: 100%; height: 110%; position: relative; top: -100px; margin-top: 100px;
−
font-size:1.11em;
+
background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg');
−
margin:1em 0;
+
-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;
 +
padding: 0;
 +
font-family: Raleway;
 +
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;
 
}
 
}
  
−
#progress {
+
#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;}
−
height:2%;
+
 
−
background:#444;
+
#introo2arrow {width: 7%; height: 17%; float: left; display: inline; position: absolute; bottom: 10%; left: 7%; z-index: 9999; opacity: 0.8;}
−
bottom:0;
+
 
−
z-index:200;
+
 
 +
#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;
 
}
 
}
  
−
#scrollbar {
+
#introo2:hover:after {
−
position:fixed;
+
    opacity: 1; z-index: 9998;
−
right:2px;
+
−
height:50px;
+
−
width:6px;
+
−
background:#444;
+
−
background:rgba(0,0,0,0.6);
+
−
border:1px solid rgba(255,255,255,0.6);
+
−
z-index:300;
+
−
border-radius:3px;
+
 
}
 
}
  
−
.skrollr-desktop #scrollbar {display:none;}
 
  
−
#bg1, #bg2, #bg3 {
+
 
−
z-index:50;
+
#introo3 {width: 100%; height: 110%; position: relative; top: -200px;
−
top:0;
+
 
−
left:0;
+
 
−
width:100%;
+
background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_block3_texture3.jpg');
−
height:100%;
+
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
−
background: #fff repeat 0 0;
+
 
 +
 
 +
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;
 +
 
 +
 
 
}
 
}
  
−
#bg2 {
+
#introo3text {position: absolute; top: 14%; right: 10%; width: 80%; font-size: 19px; letter-spacing: 2.2px; line-height: 1.5; float: right; display: inline; z-index: 10001;}
−
z-index:49;
+
 
−
background: #EFE2E5 ;
+
 
 +
#intro3dnawrap {position: absolute; bottom: 37%; width: 100%;}
 +
#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; margin: 0 auto; width: 8%; position: relative; left: -21%; opacity: 0.7;
 +
 
 +
-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;
 
}
 
}
  
−
#bg3 {
+
 
−
z-index:48;
+
#todescription {position: absolute; bottom: 10%; width: 100%;}
−
background: #EFE2E5;
+
#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){
 +
#introo1 {}
 +
#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.3; top: 22%;}
 +
#todescription {bottom: 3%;}
 +
#intro3dnawrap {bottom: 29%;}
 
}
 
}
  
−
#intro {
+
@media (max-width:768px){
−
width:80%;
+
#introo1 {background-position: 0 100px;}
−
top:1em;
+
#introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;}
−
padding:2em;
+
#introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;}
−
text-align:center;
+
#introo1arrow, #introo2arrow {width: 10%; height: 10%;}
−
border-radius:1em;
+
#todescription {bottom: 1%;}
−
padding-top: 100px;
+
#intro3dnawrap {bottom: 21%;}
  
  
−
-webkit-transform-origin:0 0;
 
−
-moz-transform-origin:0 0;
 
−
-ms-transform-origin:0 0;
 
−
-o-transform-origin:0 0;
 
−
transform-origin:0 0;
 
  
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;
 
 
}
 
}
  
−
#intro .arrows {
+
@media (max-width:480px){
−
font-size:2em;
+
#introo1 {background-position: 0 100px;}
−
color:#09f;
+
#introo1text {font-size: 15px; line-height: 1.3;}
 +
#introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;}
 +
#introo1arrow, #introo2arrow {width: 13%; height: 13%;}
 +
#introo2arrow {bottom: 20%;}
 +
#todescription {bottom: 5%;}
 +
#intro3dnawrap {bottom: 20%;}
 +
#introo1:after {background-image: none;}
 +
#centerbutton {width: 35%; bottom: -20px;}
 +
#introo3 {height: 110%; background-position: left 0px bottom 30px; background-color: #F2ECE4;}
 +
#introo3text {font-size: 14px; line-height: 1.4; top: 22%;}
 +
 
 +
 
 +
 
 
}
 
}
  
−
#properties {
+
 
−
width:100%;
+
@media (max-width:360px){
−
height:100%;
+
#introo1 {background-position: 0 50px; height: 110%;}
−
padding-top:5%;
+
#introo1:after {background-image: none;}
−
text-align: left;
+
#introo1text {font-size: 13px; line-height: 1.1; bottom: 16%;}
−
left: -30%;  
+
#introo2text {font-size: 15px; line-height: 1.3; bottom: 17%;}
−
-webkit-box-sizing: border-box;
+
#introo1arrow, #introo2arrow {width: 15%; height: 15%;}
−
-moz-box-sizing: border-box;
+
#introo3text {font-size: 13px; line-height: 1.3; top: 22%;}
−
box-sizing: border-box;
+
#centerbutton {width: 50%; bottom: -20px;}
 +
#introo3 {height: 110%; background-position: left 0px bottom 30px; background-color: #F2ECE4;}
 +
#intro3dnawrap {bottom: 20%;}
  
 
}
 
}
  
  
−
#easing {
+
@-webkit-keyframes spinnerRotate
−
top:35%;
+
{
−
width:50%;
+
    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);}
 
}
 
}
  
−
.drop {
+
 
−
background:#09f;
+
 
−
font-weight:bold;
+
#footer {background: #fff; background-size: 100%;  width: 100%; height: 120px; position: fixed; bottom: 0; left: 0; margin: 0 auto;  z-index: -1; }
−
padding:1em;
+
 
 +
 
 +
.intro-buttons2 {text-align: center; position: relative; margin: 0 auto; width: 100%; bottom: -30px; z-index: 9000; }
 +
 
 +
 
 +
 
 +
a.buttonblack2 {
 +
 
 +
text-transform: uppercase;
 +
  font-size: 30px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 10px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;
 +
  transition-timing-function: ease;
 +
  border: solid 5px #19a07c;
 +
    padding: 10px 15px 35px 15px;
 +
  text-decoration: none;
 +
background: none;
 +
font-family: Raleway;
 +
letter-spacing: 4px;
 +
font-weight: bold;
 +
color: #19a07c;
 +
background-image: url('https://static.igem.org/mediawiki/2015/f/fa/UCL_Learnmorearrows.png');
 +
background-size: 15%;
 +
background-position: center bottom 4px;
 +
background-repeat: no-repeat;
 +
animation: logophoto 4s ease-in 1;
 +
-webkit-animation: logophoto 4s ease-in 1;
 +
 
 
}
 
}
  
−
#download {
+
 
−
width:100%;
+
.buttonblack2:hover {  border: solid 5px #065641; color: #19a07c; background: none; }
−
height:100%;
+
 
−
padding:3em;
+
 
−
border:0 solid #222;
+
#header2 {background-image: url('https://static.igem.org/mediawiki/2015/e/e7/UCL_MG_6312_2.png');
−
background: #fff;
+
text-align: center;  
−
-webkit-box-sizing: border-box;
+
height: 66%;
 +
width:100%;
 +
position: relative;
 +
display: block !important;
 +
margin: 0;
 +
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
  background-repeat: no-repeat;
 +
 
 +
  background-size: 100%;
 +
background-position: center center;
 +
background-attachment: fixed;
 +
margin-top: 100px;
 +
-webkit-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;
 
box-sizing: border-box;
−
}
 
  
−
.twitter-share-button, .twitter-follow-button {
+
vertical-align: middle; }  
−
vertical-align:middle;
+
−
}
+
  
−
/*
 
−
* This file is NOT needed in order to use skrollr.
 
−
* The demo uses it and it may help you as well.
 
−
*/
 
  
  
−
html, body {
+
#logo2 {
−
width:100%;
+
padding: 0; position: absolute; height: 100%; left: 0; margin: 0; width: 100%; text-align: left;
−
height:100%;
+
−
padding:0;
+
−
margin:0;
+
−
overflow-x:hidden;
+
 
}
 
}
  
−
.skrollable {
+
#logo3 {position: absolute; bottom: 20px; right: 20px;}
−
/*
+
−
* First-level skrollables are positioned relative to window
+
−
*/
+
−
position:fixed;
+
  
−
/*
 
−
* Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
 
−
*/
 
−
z-index:100;
 
−
}
 
  
−
.skrollr-mobile .skrollable {
 
−
/*
 
−
May cause issues on Android default browser (see #331 on GitHub).
 
−
*/
 
−
position:absolute;
 
−
}
 
  
−
.skrollable .skrollable {
 
−
/*
 
−
* Second-level skrollables are positioned relative their parent skrollable
 
−
*/
 
−
position:absolute;
 
−
}
 
  
−
.skrollable .skrollable .skrollable {
+
#logophoto2 {
−
/*
+
margin: 0; padding: 0;
−
* Third-level (and below) skrollables are positioned static
+
  max-width: 500px;
−
*/
+
  width: 100%;
−
position:static;
+
  z-index: 99999;
 +
animation: logophoto 2s ease-in 1;
 +
-webkit-animation: logophoto 2s ease-in 1;
 
}
 
}
  
−
  .logophoto {width: 300px; height: 400px; }
+
@-webkit-keyframes logophoto  
−
  .liver {width: 200px; height: 200px;}
+
{ 0% {opacity: 0;}
−
#properties {line-height: 1.5; padding-left: 200px; padding-right: 20px; }
+
100% {opacity: 1;}
−
#easing {line-height: 1.5;}
+
−
#thing {line-height: 1.5; padding-right: 10px;}
+
−
.ref {width: 600px; float: left; margin-left: 280px;}
+
−
.ref a {text-decoration: none; color: #444444;}
+
 
}
 
}
 +
 +
 +
 
</style>
 
</style>
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
+
<div id="header2">
−
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
+
<script>
−
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
+
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 +
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 +
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 +
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
−
<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>
+
  ga('create', 'UA-66078098-1', 'auto');
 +
  ga('send', 'pageview');
  
−
<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
+
</script>
−
<img src="http://s8.postimg.org/vaknrdpid/mind_the_gut_logo.png" class="logophoto" />
+
−
<p class="arrows">▼</p>
+
−
</div>
+
  
 +
<div style="clear: both;"></div>
  
−
<div id="properties" data-300="top:100%;" data-500="top:0%;" data-1000="display:block;">
+
<div id="logo2"><img src="https://static.igem.org/mediawiki/2015/5/56/UCL_logooo_small.png" id="logophoto2" style="" alt="Mind the Gut">  
−
  <h3> The number of <span style="color: #FE6C68;">microorganisms</span> in human <img src="http://goo.gl/yGmJW9?gdriveurl" style="width: 32px; height: 25px"> is higher than the number of human cells in our body. Their <span style="color: #FE6C68;">metabolic activity</span> equals that of <img src="http://goo.gl/vCZULP?gdriveurl" style="width: 45px; height: 32px;"> and plays crucial role in many key processes such as  <span style="color: #FE6C68;">digestion</span>, <span style="color: #FE6C68;">drug metabolism</span>, or functioning of the <span style="color: #FE6C68;">immune system</span>...</h3>
+
−
</div>
+
−
+
−
<div id="easing" data-1500="left:100%" data-1700="left:25%;">
+
−
+
−
+
−
<h3>
+
−
Studies in <img src="http://goo.gl/98hlPF?gdriveurl" style="width: 60px; height: 32px;"> have shown that the <span style="color: #1E6073;">gut microbiome</span> is also capable of  influencing the chemistry of our <img src="http://goo.gl/NTu7hR?gdriveurl" style="width: 38px; height: 32px;">, 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;">cognition</span>  and <span style="color: #1E6073;">pain</span> ...  </h3>
+
−
</div>
+
  
 +
      <div class="intro-buttons2" id="box-links">
 +
        <a data-scroll data-options='{ "easing": "linear" }' href="#introo1" class="buttonblack2">Learn more</a>
 +
 +
<br/>
  
−
<div id="thing" data-2000="left:35%;bottom[swing]:100%;" data-2500="bottom: 5%;"> <h3> Being inspired by this emerging research area, <span style="color: #019966;">UCL <img src="http://goo.gl/Bt86ec?gdriveurl" style="width: 40px; height: 32px"> 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 harness <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>! </h3></div>
+
      </div>
  
 +
</div>
  
−
<div id="download" data-4000="top[cubic]:100%;border-radius[cubic]:0em;border-width:0px;" data-6000="top:5%;border-radius:2em;border-width:0px;">
+
<div id="logo3"><img src="https://static.igem.org/mediawiki/2015/e/ea/Ucllogo2.png" style="width: 100px;"></div>
−
<h3>why are we doing it?</h3>
+
−
<p style="text-align: center;"><img src="http://goo.gl/m7uiy1?gdriveurl"></p>
+
−
<div class="ref"> <h5>Source: <a href="http://whqlibdoc.who.int/publications/2010/9789241563949_eng.pdf">Mental health and development: targeting people with mental health conditions as a vulnerable
+
−
group. Michelle Funk et al. © World Health Organization 2010</a> </h5></div>
+
−
+
−
+
−
+
−
</div>
+
  
−
<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
 
  
−
<script type="text/javascript" src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
+
 
 +
</div>
 +
 
 +
 
 +
<div id="topline"><img src="https://static.igem.org/mediawiki/2015/d/d0/UCL_Topbar.png.png" style="width: 100%;">
 +
</div>
 +
 
 +
 
 +
<div id="introo1" class="bgswitch">
 +
 
 +
<div style="clear: both;"></div>
 +
 
 +
<div id="introo1text">
 +
 
 +
The number of <span style="color: #FE6C68;">microorganisms</span> in human gut is higher than the number of human cells in our body. Their <span style="color: #FE6C68;">metabolic activity</span>  equals that of liver and plays crucial role in many key processes such as <span style="color: #FE6C68;">digestion</span>, <span style="color: #FE6C68;">drug metabolism</span>, or 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">
 +
 
 +
Studies in mice 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;">cognition</span>  and <span style="color: #1E6073;">pain</span> ...
 +
 
 +
</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 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 id="intro3dnawrap">
 +
<div id="introo3dna"><img src="https://static.igem.org/mediawiki/2015/4/4a/UCL_Dnaicon.png" style="width: 100%;"></div>
 +
</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">
 +
 
 +
<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 style="clear: both;"></div>
 +
 
 +
</div>
 +
 
 +
 
 +
</div>
 +
 
 +
</div>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
</div>
 +
 
  
  
−
<script type="text/javascript">
 
−
var s = skrollr.init({
 
−
edgeStrategy: 'set',
 
−
easing: {
 
−
WTF: Math.random,
 
−
inverted: function(p) {
 
−
return 1-p;
 
−
}
 
−
}
 
−
});
 
−
</script>
 
−
 
−
 
−
 
 
</body>
 
</body>
 +
 +
<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>
 +
 +
 +
  
 
</html>
 
</html>

Latest revision as of 00:49, 26 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!