Difference between revisions of "Team:UCL/Playingaround3"

 
(369 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<head>
 
<head>
  
−
<!-- Load jQuery -->
 
−
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.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"/>
 +
 
 +
<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 26: 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: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;  
 +
text-align: center; width: 100%;
 
height: 100%;
 
height: 100%;
 
position: relative;
 
position: relative;
Line 52: 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 63: 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 69: 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 98: 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 116: 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 135: 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 153: 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;
 +
}
 +
 
  
−
/*twitter*/
 
−
#twit {width: 200px; height: 500px; position: fixed; float: right; margin-bottom: -20px; bottom: 0%; right: 5%;}
 
  
 
/* 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 171: Line 189:
 
padding-top: 20px;  color: #FFFFFF;
 
padding-top: 20px;  color: #FFFFFF;
 
text-align: center;
 
text-align: center;
 +
position: relative; top: 20px;
 
}
 
}
  
Line 189: 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 201: 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 216: 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 228: 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 243: 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 272: 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 286: 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 293: 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;}  
  
Line 305: 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;
 
}
 
}
  
 
.second {width: 70%;
 
.second {width: 70%;
−
padding-top: 7%;
+
padding-top: 11%;
 
padding-left: 9%;
 
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: 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 341: 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: 3%;
+
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-align: justify; font-size: 15px;
+
 
 +
#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: 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: 22%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 14%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 2; border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;
 
−
          }
 
−
#whitebox2 {width: 22%; 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: 2;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox3 {width: 22%; 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: 2; border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox4 {width: 22%; height: 38%; background-color: #fff; margin-right: 20px; margin-left: 14%; display: inline; float: left; font-size: 14px; color: #787172; margin-top: 20px; text-align: justify; padding: 10px; line-height: 2;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox5 {width: 22%; 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: 2;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px;}
 
−
#whitebox6 {width: 22%; 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: 2;border: 15px solid #F0F0F5;
 
−
  border-radius: 15px; }
 
  
 +
}
  
 +
#abstract h2 {font-size: 20px;}
  
−
/*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: 50px;
 
−
position: relative;
 
−
}
 
  
−
.icon {text-align: center; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #F0F0F5;}
 
  
−
.glyphicon-globe:hover {color: #006C93;}
 
  
  
 +
.mailus {background: #F0F0F5; padding: 5px;}
  
 
/*menu*/
 
/*menu*/
Line 407: Line 397:
 
.fixed-nav-bar {
 
.fixed-nav-bar {
 
   position: fixed;
 
   position: fixed;
−
   top: 18px;
+
   top: 15px;
 
   left: 0;
 
   left: 0;
 
   z-index: 9999;
 
   z-index: 9999;
 
   width: 100%;
 
   width: 100%;
 
   height: 60px;
 
   height: 60px;
−
  background: #fff;
+
border-bottom: 0px solid #787172;
−
border-bottom: 1px solid #787172;
+
border-top: 0px solid #787172;
−
border-top: 1px solid #787172;
+
font-size: 16px;
−
font-size: 14px;  
+
background-color: #fff;
 
}
 
}
  
−
.menu-items {display: inline-block; width: 100%; text-align: center; margin-top: -10px;
+
@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; }
 
}
 
}
  
Line 425: Line 434:
 
   margin-right: 10px;
 
   margin-right: 10px;
 
   margin-left: 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;
 
}
 
}
  
−
</style>
+
.menu-items li ul {
 +
display:none;
 +
position:absolute;
 +
}
  
−
</head>
+
.menu-items li ul li{
 +
    clear:both;
 +
background: none;
 +
text-align: center;
 +
display: block;
 +
    background: #493C54;
 +
padding: 2px;
 +
border: solid 1px #493C54;  border-radius: 4px;
  
−
<body>
 
  
−
<div style="clear: both;"></div>
+
}
  
 +
.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; 
 +
}
  
−
      <nav class="fixed-nav-bar">
+
.menu-items a:hover {color: #FE6C68;
−
  <div id="menu" class="menu">
+
    -webkit-transition: color ease-in-out 400ms;
 +
}
  
  
−
  <ul class="menu-items">
 
−
      <li><a href="//sixrevisions.com">Home</a></li>
 
−
      <li><a href="//sixrevisions.com/about/">About</a></li>
 
−
      <li><a href="//sixrevisions.com/contact/">Contact</a></li>
 
−
<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: 10px;">
 
−
      <li><a href="//twitter.com/sixrevisions">Twitter</a></li>
 
−
      <li><a href="//www.facebook.com/sixrevisions">Facebook</a></li>
 
−
<li><a href="//www.facebook.com/sixrevisions">Facebook</a></li>
 
−
  </ul>
 
  
−
</div>
+
@media (max-width:600px){
 +
h2 {font-size:18px;}
 +
h3 {font-size:17px;}
 +
p {font-size:12px;}
 +
}
  
−
</nav>
+
.buttonblack {
−
   
+
  margin-bottom: 10px;
 +
margin-top: 10px;
 +
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 #493C54;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
  width:180px; background-color: #493C54;
 +
  font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
  
  
 +
.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>
 +
 +
 +
 +
 +
 +
 +
</head>
 +
 +
<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>
  
Line 472: Line 685:
  
  
−
<div id="twit">
 
−
<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>
 
</div>
Line 481: 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 512: Line 723:
 
  <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>
 +
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> 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>
 
  
 
<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 to do it?</a>
+
−
</div>
+
  
 
         </div>
 
         </div>
Line 533: Line 742:
 
</div>
 
</div>
  
−
<div id="motivation">
 
 
   
 
   
−
<div class="why">
 
−
Why are we doing it?  <br/>
 
  
−
 
 
  
−
<div id="whitebox1">  <div class="icon"> <i class="glyphicon glyphicon-globe"></i> </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
+
<p class="mailus"><a href="mailto:ucligem2015@gmail.com">Want to become a sponsor? E-mail us!</a> </p>
−
as does malaria</div> <br/>
+
  
−
<div style="clear: both;"></div>
 
  
−
<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 style="clear: both;"></div>
 
  
 +
</div>
  
−
<div id="why3">
+
<div class="back">
−
  <a data-scroll data-options='{ "easing": "linear" }' href="#header" class="buttonc3">Back to top</a>
+
  <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 574: Line 783:
 
</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