Difference between revisions of "Team:UCL/Playingaround3"

 
(229 intermediate revisions by 2 users not shown)
Line 3: Line 3:
  
  
−
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
−
<link href="//twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
 
−
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 
 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway"/>
 
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway"/>
  
Line 66: Line 63:
  
 
vertical-align: middle; }  
 
vertical-align: middle; }  
−
  #intro1 { background: #EFE2E5; width: 100%;
+
 
 +
 
 +
  #intro1 {background-image: url('https://static.igem.org/mediawiki/2015/d/d9/UCL_bgtest2.png'); width: 100%;
 
height: 100%;
 
height: 100%;
 
position: relative;
 
position: relative;
Line 72: Line 71:
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
−
top: 0;
+
   }
−
bottom: 0;
+
−
   box-sizing: border-box;
+
  
−
  -webkit-background-size: cover;
+
 
−
  -moz-background-size: cover;
+
 
−
  -o-background-size: cover;
+
  #intro2 { background: #F7F7F7;
−
  background-size: cover;
+
−
-webkit-box-sizing: border-box;
+
−
-moz-box-sizing: border-box;
+
−
box-sizing: border-box;}
+
−
  #intro2 { background: #70C4BB;
+
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
Line 101: Line 93:
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;}
 
box-sizing: border-box;}
−
#intro3 { background: #F0F0F5;
+
 
 +
 
 +
#intro3 { background: #F7F7F7;
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
Line 119: Line 113:
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
box-sizing: border-box;}
 
box-sizing: border-box;}
 +
 +
 
#abstract {background: #fff;
 
#abstract {background: #fff;
 
width: 100%;
 
width: 100%;
Line 138: Line 134:
 
box-sizing: border-box;}
 
box-sizing: border-box;}
  
−
#motivation {background-color: #FE6C68;
+
 
−
color: #fff;
+
/*twitter*/
−
width: 100%;
+
#twit {width: 100%; height: 340px; padding-left: 30px; padding-top: 40px;  display: inline-block; position: relative; background: #fff;  box-sizing: border-box;
−
height: 100%;
+
−
position: relative!important;
+
−
display: block;
+
−
margin: 0;
+
−
padding: 0;
+
−
top: 0;
+
−
bottom: 0;
+
−
   box-sizing: border-box;
+
  
 
   -webkit-background-size: cover;
 
   -webkit-background-size: cover;
Line 156: Line 144:
 
-webkit-box-sizing: border-box;
 
-webkit-box-sizing: border-box;
 
-moz-box-sizing: border-box;
 
-moz-box-sizing: border-box;
−
box-sizing: border-box;}
+
box-sizing: border-box;
−
 
+
display: block;
−
/*twitter*/
+
}
−
#twit {width: 100%; height: 240px; padding-left: 30px; padding-top: 40px;  display: inline-block; }
+
 
#twitbox {width: 30%; display: inline-block; padding-right: 30px; border-right: 1px solid #574B61;  
 
#twitbox {width: 30%; display: inline-block; padding-right: 30px; border-right: 1px solid #574B61;  
 
}
 
}
  
−
#sponsors {display: inline-block; position: relative; text-align: center; top: -10px; width: 68%;}
+
#sponsors {display: inline-block; position: relative; text-align: center; top: -10px; width: 60%;}
  
 
iframe.twitter-timeline {
 
iframe.twitter-timeline {
Line 202: Line 189:
 
padding-top: 20px;  color: #FFFFFF;
 
padding-top: 20px;  color: #FFFFFF;
 
text-align: center;
 
text-align: center;
 +
position: relative; top: 20px;
 
}
 
}
  
Line 335: Line 323:
 
     float: right;
 
     float: right;
 
   font-family: Raleway;
 
   font-family: Raleway;
−
letter-spacing: 2px;
+
letter-spacing: 3px;
−
color: #787172;
+
color: #5e5a5b;
−
 
+
 
line-height: 1.5;
 
line-height: 1.5;
 
padding-left: 5%;
 
padding-left: 5%;
−
font-size: 20px;
+
font-size: 24px;
 
}
 
}
  
Line 348: Line 335:
 
     float: left;
 
     float: left;
 
   font-family: Raleway;
 
   font-family: Raleway;
−
letter-spacing: 2px;
+
letter-spacing: 3px;
−
color: #fff;
+
color: #787172;
  
 
line-height: 1.5;
 
line-height: 1.5;
−
font-size: 20px;
+
font-size: 24px;
 
}
 
}
  
 
.third {width: 80%;
 
.third {width: 80%;
 
padding-top: 18%;
 
padding-top: 18%;
−
padding-left: 20%;
+
padding-left: 10%;
 
     float: left;
 
     float: left;
 
   font-family: Raleway;
 
   font-family: Raleway;
−
letter-spacing: 2px;
+
letter-spacing: 3px;
 
color: #787172;
 
color: #787172;
  
 
line-height: 1.5;
 
line-height: 1.5;
−
font-size: 22px;
+
font-size: 24px;
 
}
 
}
  
Line 371: Line 358:
 
#abstracttext {height: 80%;  
 
#abstracttext {height: 80%;  
 
     width: 80%;  
 
     width: 80%;  
−
    float: left;
+
margin: 0 auto;
−
margin: auto;
+
 
−
padding-left: 15%;
+
position: relative;
−
    padding-top: 6%;
+
vertical-align: middle;
 
font-family: Raleway;
 
font-family: Raleway;
 
letter-spacing: 1.2px;    line-height: 2;
 
letter-spacing: 1.2px;    line-height: 2;
 
text-align: justify;
 
text-align: justify;
 
font-size: 15px;
 
font-size: 15px;
 +
background: #fff;
 +
border: #fff 1px solid;
 +
border-radius: 15px;
 +
padding-top: 75px;
  
 
}
 
}
 
    
 
    
  
−
#abstracttext p {    line-height: 2; text-indent: 50px; font-size: 15px;
+
#abstracttext p {    line-height: 2; padding-left: 30px; padding-right: 30px; font-size: 15px;
 
}
 
}
  
Line 391: Line 382:
 
}
 
}
  
−
 
−
#whitebox1 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;
 
−
          }
 
−
#whitebox2 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox3 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox4 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox5 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox6 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 12px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px; }
 
  
 
}
 
}
Line 410: Line 387:
 
#abstract h2 {font-size: 20px;}
 
#abstract h2 {font-size: 20px;}
  
−
/*why stats */
 
  
−
.why {height: 100%;
 
−
    width: 100%;
 
−
    padding: 10px;
 
−
margin: 0;
 
−
    padding-top: 8%;
 
−
font-family: Raleway;
 
−
letter-spacing: 1.2px;    line-height: 1.2;
 
−
text-align: center;
 
−
color: #fff;
 
−
font-size: 20px;
 
−
}
 
  
−
#whitebox1 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;
 
−
          }
 
−
#whitebox2 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox3 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5; border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox4 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 10%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox5 {width: 24%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox6 {width: 24%; height: 38%; background-color: #fff; margin-right: 10%; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 1.5;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px; }
 
  
−
 
−
 
−
/*icons*/
 
−
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
 
−
.glyphicon {
 
−
  font-family: 'Glyphicons Halflings';
 
−
  font-style: normal;
 
−
  font-weight: normal;
 
−
  line-height: 1;
 
−
font-size: 40px;
 
−
position: relative;
 
−
}
 
−
 
−
.icon {
 
−
  font-family: 'FontAwesome';
 
−
  font-style: normal;
 
−
  font-weight: normal;
 
−
  line-height: 1;
 
−
font-size: 50px;
 
−
position: relative;
 
−
}
 
−
 
−
 
−
.icondiv {text-align: center; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #F0F0F5;}
 
−
 
−
.glyphicon-globe {color: #006C93;}
 
−
.glyphicon-stats {color: #61D9D2;}
 
−
.glyphicon-piggy-bank {color: #019966;}
 
−
.glyphicon-blackboard {color: #104A57;}
 
−
.icon-user-md {color: #FE6C68;}
 
−
.icon-group {color: #FFCD55;}
 
  
 
.mailus {background: #F0F0F5; padding: 5px;}
 
.mailus {background: #F0F0F5; padding: 5px;}
Line 481: Line 402:
 
   width: 100%;
 
   width: 100%;
 
   height: 60px;
 
   height: 60px;
−
  background: #fff;
 
 
border-bottom: 0px solid #787172;
 
border-bottom: 0px solid #787172;
 
border-top: 0px solid #787172;
 
border-top: 0px solid #787172;
 
font-size: 16px;  
 
font-size: 16px;  
 +
background-color: #fff;
 
}
 
}
  
Line 502: Line 423:
  
  
−
.menu-items {display: inline-block; width: 100%; text-align: center; margin-top: -10px; margin-left: -25px;
+
.menu-items {display: inline-block; width: 100%; text-align: center; margin-left: -25px;   z-index: 99999;
 +
 
 
}
 
}
−
@media(max-width:463px){
+
@media(max-width: 463px){
 
.menu-items {margin-top: 10px; }
 
.menu-items {margin-top: 10px; }
 
}
 
}
Line 512: Line 434:
 
   margin-right: 10px;
 
   margin-right: 10px;
 
   margin-left: 10px;
 
   margin-left: 10px;
−
margin-top: 6px;
+
margin-top: 3px;
−
letter-spacing: 1.2px;
+
letter-spacing: 1.1px;
 +
 
 
   }
 
   }
  
−
.menu-items li:hover ul{
+
.menu-items ul li:hover ul{
 
display:block;
 
display:block;
−
    background:#fff;
+
 
 
height:auto; width:auto;  
 
height:auto; width:auto;  
  
Line 531: Line 454:
 
display:none;
 
display:none;
 
position:absolute;
 
position:absolute;
−
border-right:solid;
 
−
border-left:solid;
 
−
border-width:1px;
 
 
}
 
}
  
Line 541: Line 461:
 
text-align: center;
 
text-align: center;
 
display: block;
 
display: block;
 +
    background: #493C54;
 +
padding: 2px;
 +
border: solid 1px #493C54;  border-radius: 4px;
 +
 +
 
}
 
}
  
 +
.menu-items li ul li a {color: #fff; font-size: 14px;}
 +
.menu-items li ul li a:hover {color: #726082;}
 
.menu-items a {color: #473E4F; text-decoration: none; font-family: Raleway;   
 
.menu-items a {color: #473E4F; text-decoration: none; font-family: Raleway;   
 
}
 
}
  
 
.menu-items a:hover {color: #FE6C68;
 
.menu-items a:hover {color: #FE6C68;
−
     -webkit-transition: color ease-in-out 150ms;
+
     -webkit-transition: color ease-in-out 400ms;
 
}
 
}
  
Line 583: Line 510:
  
 
.buttonblack:hover {border-color: #fff; color: #fff; background: none;}
 
.buttonblack:hover {border-color: #fff; color: #fff; background: none;}
 +
.buttongreen:hover {border-color: #019966; color: #019966; background: none;}
 +
 +
.buttongreen {  margin-bottom: 10px;
 +
margin-top: 20px;
 +
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;
 +
  border: solid 5px #019966;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
  width:180px; background-color: #019966;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
 +
 +
a.buttongreen  {text-decoration: none; color: #fff;}
 +
 +
.sss {
 +
height: 0;
 +
margin: 0;
 +
padding: 0;
 +
position: relative;
 +
display: block;
 +
overflow: hidden;
 +
}
 +
 +
.ssslide {
 +
width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: none;
 +
overflow: hidden;
 +
}
 +
 +
.ssslide img {
 +
max-width: 100%;
 +
height: auto;
 +
margin: 0;
 +
padding: 0;
 +
position: relative;
 +
display: block;
 +
}
 +
 +
.sssnext, .sssprev {
 +
width: 25px;
 +
height: 100%;
 +
margin: 0;
 +
position: absolute;
 +
top: 0;
 +
background: url('https://static.igem.org/mediawiki/2015/5/56/UCL_Arr.png') no-repeat;
 +
}
 +
 +
.sssprev {
 +
left: 3%;
 +
background-position: 0 50%;
 +
z-index:100;
 +
}
 +
 +
.sssnext {
 +
right: 3%;
 +
background-position: -26px 50%;
 +
}
 +
 +
.sssprev:hover, .sssnext:hover {
 +
cursor: pointer;
 +
 +
}
 +
 +
.slider {
 +
border: 15px solid #FFF;
 +
box-shadow: 1px 1px 5px #CCC;
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
background: #fff;
 +
height: 380px;
 +
 +
}
 +
 +
#slideWrap {
 +
width: 60%;
 +
margin: 0 auto;
 +
padding-top: 10%; height: 400px;
 +
 +
}
 +
 +
.just_text {display: inline; padding-top: 6%;
 +
padding-right: 10%;
 +
width: 600px;
 +
    float: right;
 +
  font-family: Raleway;
 +
letter-spacing: 3px;
 +
color: #5e5a5b;
 +
line-height: 1.5;
 +
padding-left: 10%;
 +
font-size: 22px;
 +
height: 330px;
 +
text-align: justify;
 +
}
  
 
</style>
 
</style>
 +
 +
 +
 +
 +
  
 
</head>
 
</head>
Line 596: Line 639:
 
<div class="menu-items">
 
<div class="menu-items">
 
<ul>
 
<ul>
−
<li><a href="https://2015.igem.org/Team:UCL"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/c3.0.160.160/p160x160/11012987_837961202954933_8011043740998938490_n.png?oh=a7923468802678158915746d51d9856f&oe=56338EDF&__gda__=1444695053_c0cc41228f96cc256abdf883df5eb1ca" style="width: 50px; height: 50px; margin-top: 13px;"></a></li>
+
<li><a href="https://2015.igem.org/Team:UCL"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/c3.0.160.160/p160x160/11012987_837961202954933_8011043740998938490_n.png?oh=a7923468802678158915746d51d9856f&oe=56338EDF&__gda__=1444695053_c0cc41228f96cc256abdf883df5eb1ca" style="width: 50px; height: 50px;"></a></li>
 
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>     
 
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>     
 
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></li>     
 
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></li>     
Line 629: Line 672:
 
<div id="logo">   
 
<div id="logo">   
  
−
<img src="https://static.igem.org/mediawiki/2015/d/d4/UCL_mtg2.png" class="logophoto" style="margin-bottom:40px; margin-top:-35px" />  
+
<img src="https://static.igem.org/mediawiki/2015/d/d4/UCL_mtg2.png" class="logophoto" style="margin-bottom:40px; margin-top:-35px" alt="Mind the Gut" />  
 
       <div class="intro-buttons" id="box-links">
 
       <div class="intro-buttons" id="box-links">
 
         <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Learn more</a>
 
         <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Learn more</a>
Line 647: Line 690:
 
<div id="intro1">
 
<div id="intro1">
  
−
<div class="first">   The number of <span style="color: #B66E74;">microorganisms</span> in human <img src="https://static.igem.org/mediawiki/2015/c/c2/UCL2015_gut.png" style="width: 32px; height: 25px"> is higher than the number of human cells in our body. Their <span style="color: #B66E74;">metabolic activity</span> equals that of <img src="https://static.igem.org/mediawiki/2015/d/df/UCL2015_liver.png" style="width: 45px; height: 32px;"> and plays crucial role in many key processes such as  <span style="color: #B66E74;">digestion</span>, <span style="color: #B66E74;">drug metabolism</span>, or functioning of the <span style="color: #B66E74;">immune system</span>...  <a data-scroll data-options='{ "easing": "linear" }' href="#intro2"><img src="http://icons.iconarchive.com/icons/graphicloads/100-flat-2/32/arrow-next-3-icon.png"/></a> 
+
<div id="slideWrap">
  
−
</div>
+
<div class="slider">
−
</div>
+
<div class="just_text">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="intro2">
+
<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>
  
−
<div class="second"> Studies in <img src="https://static.igem.org/mediawiki/2015/1/13/UCL2015_mice.png" 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="https://static.igem.org/mediawiki/2015/0/09/UCL2015_brain.png" 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> ...  <a data-scroll data-options='{ "easing": "linear" }' href="#intro3"><img src="http://cdn3.iconfinder.com/data/icons/arrows-25/137/Right-10-128.png" style="width: 32px; height: 32px;" /></a>
 
  
−
</div>
+
<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>
  
 
</div>
 
</div>
 +
</div>
 +
<div style="clear: both;"></div>
  
−
<div id="intro3">
 
−
<div class="third">
 
−
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>!
 
  
 
<div class="button-abstract" id="box-links">
 
<div class="button-abstract" id="box-links">
−
             <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" id="buttonc4">Abstract</a>
+
             <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" class="buttongreen">read abstract</a>
−
      </div>  
+
 
</div>
 
</div>
  
 
</div>
 
</div>
 +
 +
 +
  
 
<div style="clear: both;"></div>
 
<div style="clear: both;"></div>
Line 678: Line 723:
 
  <div id="abstracttext">
 
  <div id="abstracttext">
 
              
 
              
−
        <h2> Mind the Gut: Abstract</h2>
+
        <p>        <h2> Mind the Gut: Abstract</h2></p>
−
        <p>
+
<p>
 
The gut–brain axis refers to the biochemical signalling taking place between the gastrointestinal tract and the nervous system, often involving intestinal microbiota, which have been shown to play an important role in healthy brain function. The current research suggests that gut microbes secrete neuroactive compounds – including neurotransmitters – that interact with the brain via two main mechanisms: the vagus nerve, connecting brain and digestive tract, and the immune system, which maintains its own means of communication with the brain.</p>
 
The gut–brain axis refers to the biochemical signalling taking place between the gastrointestinal tract and the nervous system, often involving intestinal microbiota, which have been shown to play an important role in healthy brain function. The current research suggests that gut microbes secrete neuroactive compounds – including neurotransmitters – that interact with the brain via two main mechanisms: the vagus nerve, connecting brain and digestive tract, and the immune system, which maintains its own means of communication with the brain.</p>
 
<p>
 
<p>
Line 690: Line 735:
 
<div style="clear: both;"></div>
 
<div style="clear: both;"></div>
  
−
<div id="why2">
+
 
−
<a data-scroll data-options='{ "easing": "linear" }' href="#motivation" class="buttonc2">Why do it?</a>
+
−
</div>
+
  
 
         </div>
 
         </div>
Line 699: Line 742:
 
</div>
 
</div>
  
−
<div id="motivation">
 
 
   
 
   
−
<div class="why">
 
−
Why are we doing it?  <br/>
 
−
 
−
 
 
−
 
−
<div id="whitebox1">  <div class="icondiv"> <i class="glyphicon glyphicon-globe"></i> </div>
 
−
An estimated 450 million people world-wide suffer from mental health problems.</div>
 
  
−
 
−
 
−
<div id="whitebox2">    <div class="icondiv"> <i class="glyphicon glyphicon-stats"></i> </div>
 
−
By 2030, depression alone is likely to be the highest contributor to the global burden of disease.</div>
 
−
<div id="whitebox3"> <div class="icondiv"> <i class="glyphicon glyphicon-piggy-bank"></i> </div> According to WHO, in low income countries, depression represents almost as large a problem
 
−
as malaria.</div> <br/>
 
−
 
−
 
−
<div id="whitebox4"><div class="icondiv"> <i class="icon icon-user-md"></i></div> 80% of people with severe mental health conditions do not have
 
−
access to needed treatments.</div>
 
−
<div id="whitebox5"><div class="icondiv"> <i class="glyphicon glyphicon-blackboard"></i></div> 1 in 5 children suffers from mental health problems. Due to the lack of support, these problems lead to poorer performance at school.</div>
 
−
<div id="whitebox6"><div class="icondiv"> <i class="icon icon-group"></i></div> Less than 20% of countries have mental health service organizations that provide community and
 
−
individual assistance.
 
−
 
−
</div>
 
−
 
−
 
−
</div>
 
  
 
<div id="twit">
 
<div id="twit">
Line 785: Line 802:
 
});
 
});
 
</script>
 
</script>
 +
 +
<script>
 +
/** Super Simple Slider by @intllgnt **/
 +
 +
;(function($, window, document, undefined ) {
 +
 +
$.fn.sss = function(options) {
 +
 +
// Options
 +
 +
var settings = $.extend({
 +
slideShow : true,
 +
startOn : 0,
 +
speed : 7500,
 +
transition : 400,
 +
arrows : true
 +
}, options);
 +
 +
return this.each(function() {
 +
 +
// Variables
 +
 +
var
 +
wrapper = $(this),
 +
slides = wrapper.children().wrapAll('<div class="sss"/>').addClass('ssslide'),
 +
slider = wrapper.find('.sss'),
 +
slide_count = slides.length,
 +
transition = settings.transition,
 +
starting_slide = settings.startOn,
 +
target = starting_slide > slide_count - 1 ? 0 : starting_slide,
 +
animating = false,
 +
clicked,
 +
timer,
 +
key,
 +
prev,
 +
next,
 +
 +
// Reset Slideshow
 +
 +
reset_timer = settings.slideShow ? function() {
 +
clearTimeout(timer);
 +
timer = setTimeout(next_slide, settings.speed);
 +
} : $.noop;
 +
 +
// Animate Slider
 +
 +
function get_height(target) {
 +
return ((slides.eq(target).height() / slider.width()) * 100) + '%';
 +
}
 +
 +
function animate_slide(target) {
 +
if (!animating) {
 +
animating = true;
 +
var target_slide = slides.eq(target);
 +
 +
target_slide.fadeIn(transition);
 +
slides.not(target_slide).fadeOut(transition);
 +
 +
slider.animate({paddingBottom: get_height(target)}, transition,  function() {
 +
animating = false;
 +
});
 +
 +
reset_timer();
 +
 +
}};
 +
 +
// Next Slide
 +
 +
function next_slide() {
 +
target = target === slide_count - 1 ? 0 : target + 1;
 +
animate_slide(target);
 +
}
 +
 +
// Prev Slide
 +
 +
function prev_slide() {
 +
target = target === 0 ? slide_count - 1 : target - 1;
 +
animate_slide(target);
 +
}
 +
 +
if (settings.arrows) {
 +
slider.append('<div class="sssprev"/>', '<div class="sssnext"/>');
 +
}
 +
 +
next = slider.find('.sssnext'),
 +
prev = slider.find('.sssprev');
 +
 +
$(window).load(function() {
 +
 +
slider.css({paddingBottom: get_height(target)}).click(function(e) {
 +
clicked = $(e.target);
 +
if (clicked.is(next)) { next_slide() }
 +
else if (clicked.is(prev)) { prev_slide() }
 +
});
 +
 +
animate_slide(target);
 +
 +
$(document).keydown(function(e) {
 +
key = e.keyCode;
 +
if (key === 39) { next_slide() }
 +
else if (key === 37) { prev_slide() }
 +
});
 +
 +
});
 +
// End
 +
 +
});
 +
 +
};
 +
})(jQuery, window, document);</script>
 +
 +
<script>
 +
jQuery(function($) {
 +
$('.slider').sss();
 +
 +
$('.section').click(function(e) {
 +
e.preventDefault();
 +
 +
var loc = $(this).attr('href').substring(1);
 +
var lock = $('#' + loc).offset().top;
 +
$('body,html').animate({scrollTop:lock});
 +
});
 +
});
 +
</script>
 +
 +
 +
 +
  
 
</html>
 
</html>

Latest revision as of 15:52, 22 July 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!

Mind the Gut: Abstract

The gut–brain axis refers to the biochemical signalling taking place between the gastrointestinal tract and the nervous system, often involving intestinal microbiota, which have been shown to play an important role in healthy brain function. The current research suggests that gut microbes secrete neuroactive compounds – including neurotransmitters – that interact with the brain via two main mechanisms: the vagus nerve, connecting brain and digestive tract, and the immune system, which maintains its own means of communication with the brain.

In line with the ongoing research, UCL iGEM 2015 aims to develop synthetic probiotic strains that mimic the neuromodulatory strategies identified in gut microbes, with a focus on regulation of tryptophan pathway and signalling via serotonin. Additionally, in order to incorporate our neuromodulators into precise and safe therapeutic devices, we are developing a set of sensors capable of detecting mood-related physiological changes in the gut environment.

Available small molecule treatments are associated with both stigma and side effects. We believe that, besides aiding in better understanding of the communication between the gut microbiome and nervous system, our work will also lay a foundation for novel user-friendly treatments targeting a range of mental health disorders.

Back to top