Difference between revisions of "Team:UCL/Playingaround3"

 
(497 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<head>
 
<head>
  
−
<!-- Load jQuery -->
 
−
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
 
  
−
<script src="http://www.w3schools.com/bs/js/bootstrap.min.js"></script>
+
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway"/>
−
<link rel="stylesheet" href="http://www.w3schools.com/bs/css/bootstrap_w3schools.css">
+
 
 +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  
 
<style type="text/css">
 
<style type="text/css">
Line 27: Line 26:
 
height: 100%;
 
height: 100%;
 
border: 0px;
 
border: 0px;
−
background-color: transparent;
+
background-color: #fff;
 
margin: 0px;
 
margin: 0px;
 
padding: 0px;
 
padding: 0px;
 
}
 
}
  
−
html, body, #bodyContent {
+
html, #bodyContent, body, #container {
 
width:100%;
 
width:100%;
 
height:100%;
 
height:100%;
−
 
−
overflow-x:hidden;
 
 
box-sizing: border-box;
 
box-sizing: border-box;
−
 
 
}
 
}
 +
  
  
 
/* blocks */
 
/* blocks */
  
−
#header {background: #F0F0F5; margin: -5px; text-align: center; width: 100%;
+
#header {background-image: url('https://static.igem.org/mediawiki/2015/b/b0/UCL_University_College_London2.jpg'); margin: -5px;  
−
height: 105%;
+
text-align: center; width: 100%;
 +
height: 100%;
 
position: relative;
 
position: relative;
 
display: block;
 
display: block;
Line 53: Line 51:
 
top: 0;
 
top: 0;
 
bottom: 0;
 
bottom: 0;
−
   box-sizing: border-box;
+
   background-repeat: no-repeat;
 +
  background-attachment: fixed;
  
 
   -webkit-background-size: cover;
 
   -webkit-background-size: cover;
Line 64: 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 70: 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 99: 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 117: 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 136: 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 154: 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;
 +
}
 +
#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: 60%;}
 +
 
 +
iframe.twitter-timeline {
 +
    height: 220px !important;
 +
width: 500px !important;
 +
}
 +
 
  
  
 
/* logo and buttons */
 
/* logo and buttons */
  
 +
h5 {
 +
font-size:900%;
 +
font-family: times, serif;
 +
}
 +
 +
h6 {
 +
font-size:200%;
 +
margin-top:-50px;
 +
margin-bottom:-50px;
 +
font-family:"lucida calligraphy", sans serif;
 +
font-style:italic;
 +
}
 +
 +
  .logophoto {width: 500px; height: 433px; height: 100%; opacity: 0.7;}
 +
.logophoto:hover {opacity: 1; transition-property: opacity;
 +
  transition-duration: 3s;
 +
  transition-timing-function: ease; 
 +
}
 +
#logo {padding-top: 10%; padding-bottom: 10%;}
  
−
  .logophoto {width: 300px; height: 400px; height: 100%; }
 
−
#logo {padding-top: 10%; padding-bottom: 100px;}
 
  
 
.intro-buttons {
 
.intro-buttons {
Line 170: Line 189:
 
padding-top: 20px;  color: #FFFFFF;
 
padding-top: 20px;  color: #FFFFFF;
 
text-align: center;
 
text-align: center;
 +
position: relative; top: 20px;
 
}
 
}
  
Line 188: Line 208:
 
   border: 1px solid transparent;
 
   border: 1px solid transparent;
 
   border-radius: 4px;
 
   border-radius: 4px;
−
  -webkit-user-select: none;
+
transition-property: background-color, color;  
−
    -moz-user-select: none;
+
  transition-duration: 1s;  
−
      -ms-user-select: none;
+
  transition-timing-function: ease;  
−
      -o-user-select: none;
+
−
          user-select: none;
+
 
             color: #FFFFFF;
 
             color: #FFFFFF;
 
   border: none;
 
   border: none;
Line 200: Line 218:
 
   width:140px; background-color: #F49794;
 
   width:140px; background-color: #F49794;
 
  font-family: Raleway;
 
  font-family: Raleway;
−
letter-spacing: 1.5px;}
+
letter-spacing: 1.5px;
 +
 
 +
}
  
  
Line 215: Line 235:
 
   border: 1px solid transparent;
 
   border: 1px solid transparent;
 
   border-radius: 4px;
 
   border-radius: 4px;
−
  -webkit-user-select: none;
+
transition-property: background-color, color;  
−
    -moz-user-select: none;
+
  transition-duration: 1s;  
−
      -ms-user-select: none;
+
  transition-timing-function: ease;  
−
      -o-user-select: none;
+
−
          user-select: none;
+
 
             color: #FFFFFF;
 
             color: #FFFFFF;
 
   border: none;
 
   border: none;
Line 227: Line 245:
 
   width: 140px; background-color: #61D9D2;
 
   width: 140px; background-color: #61D9D2;
 
  font-family: Raleway;
 
  font-family: Raleway;
−
letter-spacing: 1.5px;}
+
letter-spacing: 1.5px;
 +
}
 
.buttonc3
 
.buttonc3
 
  {
 
  {
Line 242: Line 261:
 
   border: 1px solid transparent;
 
   border: 1px solid transparent;
 
   border-radius: 4px;
 
   border-radius: 4px;
−
  -webkit-user-select: none;
+
transition-property: background-color, color;  
−
    -moz-user-select: none;
+
  transition-duration: 1s;  
−
      -ms-user-select: none;
+
  transition-timing-function: ease;  
−
      -o-user-select: none;
+
−
          user-select: none;
+
 
             color: #FFFFFF;
 
             color: #FFFFFF;
 
   border: none;
 
   border: none;
Line 271: Line 288:
 
   border: 1px solid transparent;
 
   border: 1px solid transparent;
 
   border-radius: 4px;
 
   border-radius: 4px;
−
  -webkit-user-select: none;
+
transition-property: background-color, color;  
−
    -moz-user-select: none;
+
  transition-duration: 1s;  
−
      -ms-user-select: none;
+
  transition-timing-function: ease;  
−
      -o-user-select: none;
+
−
          user-select: none;
+
 
             color: #FFFFFF;
 
             color: #FFFFFF;
 
   border: none;
 
   border: none;
Line 285: Line 300:
 
letter-spacing: 1.5px;
 
letter-spacing: 1.5px;
 
}
 
}
 +
 +
.back {text-align: center; padding-bottom: 20px;}
 +
.back a {color: #746c7c; font-size: 12px;}
 +
.back a:hover {color: #2e2438;  -webkit-transition: color ease-in-out 400ms;}
  
 
  .buttonc1:hover {text-decoration: none; background-color: #FE6C68;}
 
  .buttonc1:hover {text-decoration: none; background-color: #FE6C68;}
Line 292: Line 311:
  
  
−
#why2 {padding-top: 20px; text-align: center; color: #fff;}  
+
#why2 {padding-top: 10px; text-align: center; color: #fff;}  
 
#why2 a {color: #fff;}  
 
#why2 a {color: #fff;}  
 +
 +
#why3 {padding-top: 15px; text-align: center; color: #fff;}
 +
#why3 a {color: #fff;}
 +
 
/*intro styles*/
 
/*intro styles*/
 
.first {width: 70%;
 
.first {width: 70%;
 
padding-top: 10%;
 
padding-top: 10%;
−
padding-right: 15%;
+
padding-right: 10%;
 
     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: 10%;
+
padding-left: 5%;
−
font-size: 20px;
+
font-size: 24px;
 
}
 
}
  
−
.second {width: 60%;
+
.second {width: 70%;
−
padding-top: 14%;
+
padding-top: 11%;
−
padding-left: 18%;
+
padding-left: 9%;
 
     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: 24%;
+
padding-top: 18%;
−
padding-left: 6%;
+
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 336: Line 358:
 
#abstracttext {height: 80%;  
 
#abstracttext {height: 80%;  
 
     width: 80%;  
 
     width: 80%;  
−
    float: left;  
+
margin: 0 auto;
−
    padding: 10px;
+
 
−
    padding-left: 100px;
+
position: relative;
−
    padding-top: 100px;
+
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;
 +
background: #fff;
 +
border: #fff 1px solid;
 +
border-radius: 15px;
 +
padding-top: 75px;
 +
 
}
 
}
 
    
 
    
−
#abstracttext p {    line-height: 2; text-align: justify;
+
 
 +
#abstracttext p {    line-height: 2; padding-left: 30px; padding-right: 30px; font-size: 15px;
 
}
 
}
  
  
−
/*why stats */
+
@media screen and (max-width: 960px) {
 +
#abstracttext p {    line-height: 2; font-size: 13px; text-indent: 50px;
 +
}
  
−
.why {height: 80%;  
+
 
−
    width: 100%;  
+
}
−
    padding: 10px;  
+
 
−
    padding-top: 100px;
+
#abstract h2 {font-size: 20px;}
−
font-family: Raleway;
+
 
−
letter-spacing: 1.2px;     line-height: 1.2;
+
 
 +
 
 +
 
 +
 
 +
.mailus {background: #F0F0F5; padding: 5px;}
 +
 
 +
/*menu*/
 +
 
 +
.fixed-nav-bar {
 +
  position: fixed;
 +
  top: 15px;
 +
  left: 0;
 +
  z-index: 9999;
 +
  width: 100%;
 +
  height: 60px;
 +
border-bottom: 0px solid #787172;
 +
border-top: 0px solid #787172;
 +
font-size: 16px;
 +
background-color: #fff;
 +
}
 +
 
 +
@media(max-width:855px){
 +
.fixed-nav-bar {height:90px;}
 +
}
 +
 
 +
@media(max-width:463px){
 +
 
 +
.fixed-nav-bar {height:120px;}
 +
}
 +
 
 +
@media(max-width:400px){
 +
.fixed-nav-bar {height:150px;}
 +
}
 +
 
 +
 
 +
 
 +
.menu-items {display: inline-block; width: 100%; text-align: center;  margin-left: -25px;  z-index: 99999;
 +
 
 +
}
 +
@media(max-width: 463px){
 +
.menu-items {margin-top: 10px; }
 +
}
 +
 
 +
.menu-items li {
 +
  display: inline-block;
 +
  margin-right: 10px;
 +
  margin-left: 10px;
 +
margin-top: 3px;
 +
letter-spacing: 1.1px;
 +
 
 +
  }
 +
 
 +
.menu-items ul li:hover ul{
 +
display:block;
 +
 
 +
height:auto; width:auto;
 +
 
 +
list-style-position: inside;
 +
list-style-type: none !important;
 +
padding-left: 0 !important;
 +
margin-left: -19px;
 +
float: left;
 +
}
 +
 
 +
.menu-items li ul {
 +
display:none;
 +
position:absolute;
 +
}
 +
 
 +
.menu-items li ul li{
 +
    clear:both;
 +
background: none;
 
text-align: center;
 
text-align: center;
−
color: #fff;
+
display: block;
−
font-size: 20px;
+
    background: #493C54;
 +
padding: 2px;
 +
border: solid 1px #493C54;  border-radius: 4px;
 +
 
 +
 
 
}
 
}
  
−
#whitebox1 {width: 15%; height: 30%; background-color: #fff; margin-right: 20px; margin-left: 24%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 2; border: 1px solid transparent;
+
.menu-items li ul li a {color: #fff; font-size: 14px;}
−
  border-radius: 4px;
+
.menu-items li ul li a:hover {color: #726082;}
−
          }
+
.menu-items a {color: #473E4F; text-decoration: none; font-family: Raleway;   
−
#whitebox2 {width: 15%; height: 30%; 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: 2;border: 1px solid transparent;
+
}
−
  border-radius: 4px; }
+
−
#whitebox3 {width: 15%; height: 30%; background-color: #fff; margin-right: 22%; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 2; border: 1px solid transparent;
+
−
  border-radius: 4px;}
+
−
#whitebox4 {width: 15%; height: 30%; background-color: #fff; margin-right: 20px; margin-left: 24%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 2;border: 1px solid transparent;
+
−
  border-radius: 4px; }
+
−
#whitebox5 {width: 15%; height: 30%; 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: 2;border: 1px solid transparent;
+
−
   border-radius: 4px; }
+
−
#whitebox6 {width: 15%; height: 30%; background-color: #fff; margin-right: 22%; margin-left: 20px; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 2;border: 1px solid transparent;
+
−
  border-radius: 4px; }
+
  
 +
.menu-items a:hover {color: #FE6C68;
 +
    -webkit-transition: color ease-in-out 400ms;
 +
}
  
  
  
−
.glyphicon {
+
@media (max-width:600px){
−
   font-family: 'Glyphicons Halflings';
+
h2 {font-size:18px;}
−
   font-style: normal;
+
h3 {font-size:17px;}
 +
p {font-size:12px;}
 +
}
 +
 
 +
.buttonblack {
 +
   margin-bottom: 10px;
 +
margin-top: 10px;
 +
text-transform: uppercase;
 +
   font-size: 14px;
 
   font-weight: normal;
 
   font-weight: normal;
−
   line-height: 1;
+
   line-height: 1.428571429;
−
font-size: 50px;  
+
  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 #493C54;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
  width:180px; background-color: #493C54;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
  
−
color: #F0F0F5;
+
 
 +
.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;
 
}
 
}
  
−
.icon {text-align: center; width: 100%; padding-top: 20px; padding-bottom: 20px;>
+
.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>
  
 
<body>
 
<body>
 +
 +
<div style="clear: both;"></div>
 +
<div id="container">
 +
<nav class="fixed-nav-bar">
 +
<div id="menu" class="menu">
 +
<div class="menu-items">
 +
<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;"></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/Experiments">Experiments &amp; Protocols</a></li> 
 +
<li><a href="https://2015.igem.org/Team:UCL/Collaborations">Collaborations</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Notebook">Notebook</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/People">People</a>
 +
<ul>
 +
<li><a href="https://2015.igem.org/Team:UCL/Team">Team</li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Advisors">Advisors</li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Sponsors">Sponsors</li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:UCL/PolicyandPractice"=">Policy & Practice</a>
 +
<ul>
 +
<li><a href="https://2015.igem.org/Team:UCL/HumanPractice">Human Practice</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/PublicEngagement">Public Engagement</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</nav>
 +
 +
 
<div id="header">
 
<div id="header">
−
<div id="logo">  <img src="http://s8.postimg.org/vaknrdpid/mind_the_gut_logo.png" class="logophoto" />
 
  
 +
<!--<div id="title">
 +
<h5>MIND</h5><br><h6>the</h6><br><h5>GUT</h5>
 +
</div>-->
 +
<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" 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="buttonc1">Intro</a>
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Learn more</a>
−
            <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" class="buttonc2">Abstract</a>
+
−
              <a data-scroll data-options='{ "easing": "linear" }' href="#motivation" class="buttonc3">Why to do it?</a>
+
<br/>
 +
 
 
       </div>
 
       </div>
  
 
</div>
 
</div>
  
−
</div>
+
<div style="clear: both;"></div>
  
−
<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>
 
</div>
−
</div>
 
  
 +
<div id="intro1">
 +
 +
<div id="slideWrap">
  
 +
<div class="slider">
 +
<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="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 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>
 +
 +
 +
<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 id="abstract">
 
<div id="abstract">
 
  <div id="abstracttext">
 
  <div id="abstracttext">
 
              
 
              
−
         <p>
+
         <p>       <h2> Mind the Gut: Abstract</h2></p>
−
        <h2> Mind the Gut: Abstract</h2><br/>
+
<p>
−
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker
+
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>
 +
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. </p>
  
−
<p> W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum”, czyli „O granicy dobra i zła”, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...” pochodzi właśnie z sekcji 1.10.32.
+
<p>
 +
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. </p>
  
−
</p>
+
 
 +
<div style="clear: both;"></div>
  
  
−
<div id="why2">
 
−
<a data-scroll data-options='{ "easing": "linear" }' href="#motivation" class="buttonc2">Why to do it?</a>
 
−
</div>
 
  
 
         </div>
 
         </div>
 +
  
 
</div>
 
</div>
  
−
<div id="motivation">
 
 
   
 
   
−
<div class="why">
 
−
Why are we doing it?  <br/>
 
  
−
 
 
  
−
<div id="whitebox1">  <div class="icon"> <span class="glyphicon glyphicon-globe"></span> </div>
+
<div id="twit">
−
An estimated 450 million people world-wide suffer from mental health problem</div>
+
  
 +
<div id="twitbox">
 +
<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;"> 
  
  
−
<div id="whitebox2">  
+
<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;">
−
By 2030, depression alone is likely to be highest contributon to global burden of disease</div>
+
−
<div id="whitebox3">According to WHO, in low income countries, depression represents almost as large problem
+
−
as does malaria</div> <br/>
+
  
−
<div style="clear: both;"></div>
+
<p class="mailus"><a href="mailto:ucligem2015@gmail.com">Want to become a sponsor? E-mail us!</a> </p>
  
−
<div id="whitebox4">of people with severe mental health con-dition do not have
 
−
access to needed treatment</div>
 
−
<div id="whitebox5">1 in 5 children suffers from mental health problems. Due to the lack of support, these problems lead to poorer school performance</div>
 
−
<div id="whitebox6">Fewer than 20% of countries have mental health service organizations that provide community and
 
−
individual assistance</div>
 
  
  
 +
</div>
 +
 +
<div class="back">
 +
<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>
Line 496: Line 781:
 
</div>
 
</div>
  
 +
</div>
 +
 +
 +
 +
</div>
  
  
  
 
</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>
 +
 +
<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