Difference between revisions of "Team:UCL/Playingaround"

Line 1: Line 1:
−
<!DOCTYPE html>
+
{{CSS_UCL5}}
 
<html>
 
<html>
 
<head>
 
<head>
−
<meta charset="utf-8">
+
<style>
−
 
+
−
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
−
 
+
−
<title>skrollr - parallax scrolling for the masses</title>
+
−
 
+
−
<style type="text/css">
+
−
 
+
−
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;
+
  
 +
h5 {
 +
font-size:500%;
 
}
 
}
  
−
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 {
+
/*#logophoto {width: 500px; height: 433px; height: 100%; opacity: 1; z-index: 99999;}*/
−
background: #eeeeee;
+
#logophoto {
−
background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
+
  max-width: 500px;
−
background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
+
  opacity: 1;
−
background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
+
  width: 100%;
−
background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
+
  z-index: 99999;
−
background: linear-gradient(top, #eeeeee, #cccccc 100%);
+
−
background-attachment:fixed;
+
 
}
 
}
 +
#logophoto:hover {opacity: 0.7; transition-property: opacity;
 +
  transition-duration: 3s;transition-timing-function: ease;}
  
−
ol, ul {
+
#hidden-menu {
−
list-style: none;
+
z-index:999;
 
}
 
}
  
−
p {
 
−
margin: 0;
 
−
line-height:1.1em;
 
−
}
 
  
−
q {
+
</style>
−
font-style:italic;
+
</head>
−
color:#333;
+
<body>
−
}
+
<div id="header">
 +
<script>
 +
  (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');
  
−
h1 {
+
  ga('create', 'UA-66078098-1', 'auto');
−
font-size: 2.91em;
+
  ga('send', 'pageview');
−
margin:0;
+
−
}
+
  
−
h1 > small {
+
</script>
−
text-align:right;
+
−
display:inline-block;
+
−
font-size:.71em;
+
−
text-indent:15em;
+
−
color:#444;
+
−
}
+
  
−
h2 {
+
<div id="logo"> 
−
color:inherit;
+
−
font-size:1.91em;
+
−
margin:2em 0 1em 0;
+
−
}
+
  
−
h2:first-child {margin-top:0;}
+
<img src="https://static.igem.org/mediawiki/2015/5/56/UCL_logooo_small.png" id="logophoto" style="" alt="Mind the Gut">
  
−
h3 {
+
      <div class="intro-buttons" id="box-links">
−
font-size: 20px;
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Learn more</a>
−
         font-family: Impact, Charcoal, sans-serif;
+
−
margin: 0;
+
<br/>
−
font-weight: lighter;
+
  
−
}
+
      </div>
  
−
h4 {
+
</div>
−
font-size:1.11em;
+
−
margin:1em 0;
+
−
}
+
  
−
#progress {
+
<div style="clear: both;"></div>
−
height:2%;
+
−
background:#444;
+
−
bottom:0;
+
−
z-index:200;
+
−
}
+
  
−
#scrollbar {
 
−
position:fixed;
 
−
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 {
+
</div>
−
z-index:50;
+
−
top:0;
+
−
left:0;
+
−
width:100%;
+
−
height:100%;
+
−
background: #fff repeat 0 0;
+
−
}
+
  
−
#bg2 {
+
<div id="intro1">
−
z-index:49;
+
−
background: #EFE2E5 ;
+
−
}
+
  
−
#bg3 {
+
<div id="intro1text">
−
z-index:48;
+
−
background: #EFE2E5;
+
−
}
+
  
−
#intro {
+
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>...
−
width:100%;
+
−
top:1em;
+
−
padding:2em;
+
−
text-align:center;
+
−
border-radius:1em;
+
−
padding-top: 100px;
+
  
 +
</div></div>
  
−
-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 {
 
−
font-size:2em;
 
−
color:#09f;
 
−
}
 
  
−
#properties {
 
−
width:100%;
 
−
height:100%;
 
−
padding-top:5%;
 
−
text-align: left;
 
−
-webkit-box-sizing: border-box;
 
−
-moz-box-sizing: border-box;
 
−
box-sizing: border-box;
 
  
−
}
 
  
 +
<div class="just_text">
 +
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>
  
−
#easing {
 
−
top:35%;
 
−
width:60%;
 
−
padding-top: 10px;
 
−
}
 
  
−
.drop {
+
<div class="just_text">Being inspired by this emerging research area, <span style="color: #019966;">UCL <img src="http://goo.gl/Bt86ec?gdriveurl" style="width: 40px; height: 32px; display: inline;"> 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>! </div>
−
background:#09f;
+
−
font-weight:bold;
+
−
padding:1em;
+
−
}
+
  
−
#download {
+
</div>
−
width:100%;
+
</div>
−
height:100%;
+
<div style="clear: both;"></div>
−
padding:3em;
+
−
border:0 solid #222;
+
−
text-align: center;
+
−
background: #fff;
+
−
-webkit-box-sizing: border-box;
+
−
-moz-box-sizing: border-box;
+
−
box-sizing: border-box;
+
−
}
+
  
−
.twitter-share-button, .twitter-follow-button {
 
−
vertical-align:middle;
 
−
}
 
  
−
/*
+
<div class="button-abstract" id="box-links">
−
* This file is NOT needed in order to use skrollr.
+
            <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" class="buttongreen">read abstract</a>
−
* The demo uses it and it may help you as well.
+
</div>
−
*/
+
  
 +
</div>
  
−
html, body {
 
−
width:100%;
 
−
height:100%;
 
−
padding:0;
 
−
margin:0;
 
−
overflow-x:hidden;
 
−
}
 
  
−
.skrollable {
 
−
/*
 
−
* 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 {
+
<div style="clear: both;"></div>
−
/*
+
−
May cause issues on Android default browser (see #331 on GitHub).
+
−
*/
+
−
position:absolute;
+
−
}
+
  
−
.skrollable .skrollable {
+
<div id="abstract">
−
/*
+
<div id="abstracttext">
−
* Second-level skrollables are positioned relative their parent skrollable
+
           
−
*/
+
        <p>        <h2> Mind the Gut: Abstract</h2></p>
−
position:absolute;
+
<p>
−
}
+
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. The UCL iGEM team has developed novel synthetic psychobiotics that mimic these neuromodulatory strategies identified in endogenous intestinal strains.
  
−
.skrollable .skrollable .skrollable {
 
−
/*
 
−
* Third-level (and below) skrollables are positioned static
 
−
*/
 
−
position:static;
 
−
}
 
  
−
  .logophoto {width: 300px; height: 400px; }
 
−
  .liver {width: 200px; height: 200px;}
 
−
#properties {line-height: 1.5; padding-left: 200px; padding-right: 20px; }
 
−
#easing {line-height: 1.5;}
 
−
#thing {line-height: 1.5; padding-right: 10px;}
 
−
.ref {width: 600px; float: left; margin-left: 280px; font-size: 13px; line-height: 1; text-align: left;}
 
−
.ref a {text-decoration: none; color: #444444;}
 
  
−
#main {position: absolute;
 
−
left: -20%;}
 
  
  
  
−
}
+
</p>
 +
<p>
 +
We have designed safe therapeutic devices that target metabolic pathways for neurochemical biosynthesis. Additionally, we have assessed biocontainment and integrated a sensor detecting mood-related physiological changes in the gut environment.</p>
  
 +
<p>
 +
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.</p>
  
−
/* menu style */
 
  
−
.menuBar{
+
<div style="clear: both;"></div>
−
    width:100%;
+
−
    height:50px;
+
−
    display:block;
+
−
    position:fixed;
+
−
    top:0px;
+
−
    line-height: 1.2px;
+
−
  left:0;
+
−
  right:0;
+
−
    border-bottom: 1px solid;
+
−
    border-color: #006C93;
+
−
    z-index: 10;
+
−
    background: #ffffff;
+
  
−
 
−
    }
 
−
.logo{
 
−
    float:left;
 
−
    margin-left:10px;
 
−
    margin-top: 10px;
 
−
    }
 
−
   
 
−
    .twitter {float: left;
 
−
    margin-left:10px;
 
−
    margin-top: 13px;}
 
−
   
 
−
.nav{
 
−
  float: left;
 
−
    margin-right:10px;
 
−
    color: #006C93;
 
−
    width: 80%;
 
  
−
}
 
  
−
.picleft {width: 20%;}
+
        </div>
  
−
.arrow {width: 32px; height: 32px;}
 
  
−
.nav a {color: #006C93; text-decoration: none;}
+
</div>
  
−
.nav a:hover {color: #00364A; text-decoration: none;}
+
  
−
.nav ul li{
 
−
    list-style:none;
 
−
    float:left;
 
−
    padding-left: 7px;
 
−
    padding-right: 7px;
 
−
   
 
−
    }
 
−
   
 
−
   
 
−
    .nav ul li ul {display: none; color: #80B6C9;}
 
−
   
 
−
    .nav ul li:hover ul{display: block; position: absolute; padding-top: 20px; text-transform: uppercase; left: 86px;}
 
−
   
 
−
    .nav ul li:hover ul a {color: #4D98B3;}
 
−
   
 
−
    .nav ul li:hover ul li {padding-right: 15px; padding-left: 15px;}
 
−
   
 
−
  .nav ul li:hover ul li:hover  {color: #B2D3DF;}
 
−
 
  
−
/* menu style end */
+
<div id="twit">
  
−
</style>
+
<div id="twitbox">
−
</head>
+
<a class="twitter-timeline" href="https://twitter.com/UCLiGEM" data-widget-id="615989246042742784">Tweets by @UCLiGEM</a>
 +
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 +
</div>
 +
<div id="sponsors">
 +
<img src="https://static.igem.org/mediawiki/2015/1/1a/UCL_Eng_logo_2.png" style="width: 180px; height: 62px; margin: 5px;">
 +
<img src="https://static.igem.org/mediawiki/2015/4/48/Bbsrclogo.png" style="width: 170px; height: 45px; margin: 5px;"> <img src="https://static.igem.org/mediawiki/2015/f/f7/Wellcome_trust_logo.png" style="width: 220px; height: 27px; margin: 5px;">
 +
<img src="https://static.igem.org/mediawiki/2015/e/e0/IDT-Logo-2014-sm.png" style="width: 165px; height: 45px;">
  
−
<body>
 
  
 +
<img src="https://static.igem.org/mediawiki/2015/d/d9/Biochemsoc.png" style="width: 170px; height: 68px; margin: 5px;"> <img src="https://static.igem.org/mediawiki/2015/1/16/TU_Eindhoven_Neb_logo.png" style="width: 200px; height: 80px; margin: 5px;"> <img src="https://static.igem.org/mediawiki/2015/5/5a/York_Genscript_logo-1-.png" style="width: 200px; height: 51px; margin: 5px;"> <img src="https://static.igem.org/mediawiki/2015/7/76/Slack_Icon.png" style="width: 120px; height: 36px; margin: 5px;">
  
 +
<p class="mailus"><a href="mailto:ucligem2015@gmail.com">Want to become a sponsor? E-mail us!</a> </p>
  
  
−
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
 
−
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
 
−
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
 
  
 +
</div>
  
−
<div id="main">
+
<div class="back">
 +
<a data-scroll data-options='{ "easing": "linear" }' href="#header">Back to top</a>
 +
</div>
  
 +
</div>
  
−
<div class="menuBar">
 
−
      <div class="picleft"> <img class="logo" src="https://static.igem.org/mediawiki/2014/9/94/Igemlogo_officiallogo.png" width="40px" height="35px"/>
 
−
        <img class="twitter" src="https://g.twimg.com/Twitter_logo_blue.png" width="35px" height="30px"/>
 
−
        </div>
 
−
       
 
−
        <div class="nav">
 
−
            <ul>
 
−
              <a href="https://2015.igem.org/Team:UCL"><li>HOME</li></a>
 
  
 +
<div style="clear: both;"></div>
  
−
<a href="#"><li>PROJECT
+
</div>
−
<div class="navmenubottom">
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:UCL/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:UCL/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:UCL/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:UCL/Design"><li>Design</li></a>
+
−
<a href="https://2015.igem.org/Team:UCL/Notebook"><li>Notebook</li></a>
+
−
</ul></div>
+
−
</li></a>
+
  
−
<a href="#"><li>PARTS
 
−
            <div class="navmenubottom"> <ul>
 
−
<a href="https://2015.igem.org/Team:UCL/Parts"><li>Team Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:UCL/Basic_Part"><li>Basic Parts</li></a> 
 
−
<a href="https://2015.igem.org/Team:UCL/Composite_Part"><li>Composite Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:UCL/Part_Collection"><li>Part Collection</li></a> 
 
−
</ul></div>
 
−
</li></a>
 
−
 
−
 
−
<a href="https://2015.igem.org/Team:UCL/Team"><li>TEAM</li></a>
 
−
 
−
 
−
<a href="https://2015.igem.org/Team:UCL/Collaborations"><li>COLLABORATIONS</li></a>
 
  
−
<a href="https://2015.igem.org/Team:UCL/Practices"><li>HUMAN PRACTICES</li></a>
+
</div>
−
+
−
<a href="https://2015.igem.org/Team:UCL/Modeling"><li>MODELING</li></a>
+
  
−
<a href="https://2015.igem.org/Team:UCL/Measurement"><li>MEASUREMENT</li></a>
+
</div>
−
+
−
<a href="https://2015.igem.org/Team:UCL/Safety"><li>SAFETY</li></a>
+
−
+
−
            </ul>
+
−
        </div>
+
−
    </div>
+
  
 +
</div>
  
  
  
−
<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>
+
</div>
  
−
<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);">
 
−
<img src="http://s8.postimg.org/vaknrdpid/mind_the_gut_logo.png" class="logophoto" />
 
−
<p class="arrows">▼</p>
 
−
</div>
 
  
  
−
<div id="properties" data-300="top:100%;" data-500="top:0%;" data-1000="display:block;">
+
</body>
−
  <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>
+
  
 +
<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>
  
−
<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 id="download" data-4000="top[cubic]:100%;border-radius[cubic]:0em;border-width:0px;" data-6000="top:5%;border-radius:2em;border-width:0px;">
 
−
<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>
 
−
 
−
</div>
 
−
<script type="text/javascript" src="https://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
 
−
 
−
 
−
<script type="text/javascript">
 
−
var s = skrollr.init({
 
−
edgeStrategy: 'set',
 
−
easing: {
 
−
WTF: Math.random,
 
−
inverted: function(p) {
 
−
return 1-p;
 
−
}
 
−
}
 
−
});
 
−
</script>
 
−
 
−
 
−
 
−
</body>
 
  
 
</html>
 
</html>

Revision as of 06:51, 22 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 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!