Difference between revisions of "Team:UCL/Playingaround3"
(360 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
<head> | <head> | ||
− | |||
− | |||
− | <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: | + | background-color: #fff; |
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
} | } | ||
− | html, body, # | + | html, #bodyContent, body, #container { |
width:100%; | width:100%; | ||
height:100%; | height:100%; | ||
− | |||
− | |||
box-sizing: border-box; | box-sizing: border-box; | ||
− | |||
} | } | ||
+ | |||
/* blocks */ | /* blocks */ | ||
− | #header {background: | + | #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; | ||
− | + | 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: | + | |
+ | |||
+ | #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; | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #intro2 { background: #F7F7F7; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | #intro2 { background: # | + | |
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: # | + | |
+ | |||
+ | #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;} | ||
− | # | + | |
− | + | /*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: | + | |
− | + | ||
− | display: block; | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | 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; | ||
+ | } | ||
+ | |||
− | |||
− | |||
/* 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%;} | ||
− | |||
− | |||
.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; | ||
− | + | transition-property: background-color, color; | |
− | + | transition-duration: 1s; | |
− | + | transition-timing-function: ease; | |
− | + | ||
− | + | ||
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; | ||
− | + | transition-property: background-color, color; | |
− | + | transition-duration: 1s; | |
− | + | transition-timing-function: ease; | |
− | + | ||
− | + | ||
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; | ||
− | + | transition-property: background-color, color; | |
− | + | transition-duration: 1s; | |
− | + | transition-timing-function: ease; | |
− | + | ||
− | + | ||
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; | ||
− | + | transition-property: background-color, color; | |
− | + | transition-duration: 1s; | |
− | + | transition-timing-function: ease; | |
− | + | ||
− | + | ||
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: | + | #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: | + | letter-spacing: 3px; |
− | color: # | + | color: #5e5a5b; |
− | + | ||
line-height: 1.5; | line-height: 1.5; | ||
padding-left: 5%; | padding-left: 5%; | ||
− | font-size: | + | font-size: 24px; |
} | } | ||
.second {width: 70%; | .second {width: 70%; | ||
− | padding-top: | + | padding-top: 11%; |
padding-left: 9%; | padding-left: 9%; | ||
float: left; | float: left; | ||
font-family: Raleway; | font-family: Raleway; | ||
− | letter-spacing: | + | letter-spacing: 3px; |
− | color: # | + | color: #787172; |
line-height: 1.5; | line-height: 1.5; | ||
− | font-size: | + | font-size: 24px; |
} | } | ||
.third {width: 80%; | .third {width: 80%; | ||
padding-top: 18%; | padding-top: 18%; | ||
− | padding-left: | + | padding-left: 10%; |
float: left; | float: left; | ||
font-family: Raleway; | font-family: Raleway; | ||
− | letter-spacing: | + | letter-spacing: 3px; |
color: #787172; | color: #787172; | ||
line-height: 1.5; | line-height: 1.5; | ||
− | font-size: | + | font-size: 24px; |
} | } | ||
Line 341: | Line 358: | ||
#abstracttext {height: 80%; | #abstracttext {height: 80%; | ||
width: 80%; | width: 80%; | ||
− | + | margin: 0 auto; | |
− | margin: auto; | + | |
− | + | position: relative; | |
− | + | 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; | + | |
+ | #abstracttext p { line-height: 2; padding-left: 30px; padding-right: 30px; font-size: 15px; | ||
} | } | ||
− | |||
− | + | @media screen and (max-width: 960px) { | |
− | + | #abstracttext p { line-height: 2; font-size: 13px; text-indent: 50px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | } | ||
+ | #abstract h2 {font-size: 20px;} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .mailus {background: #F0F0F5; padding: 5px;} | ||
/*menu*/ | /*menu*/ | ||
Line 408: | Line 397: | ||
.fixed-nav-bar { | .fixed-nav-bar { | ||
position: fixed; | position: fixed; | ||
− | top: | + | top: 15px; |
left: 0; | left: 0; | ||
z-index: 9999; | z-index: 9999; | ||
width: 100%; | width: 100%; | ||
height: 60px; | height: 60px; | ||
− | + | border-bottom: 0px solid #787172; | |
− | border-bottom: | + | border-top: 0px solid #787172; |
− | border-top: | + | font-size: 16px; |
− | font-size: | + | background-color: #fff; |
} | } | ||
− | .menu-items {display: inline-block; width: 100%; text-align: center; margin- | + | @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 426: | 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; | ||
} | } | ||
− | |||
− | + | .menu-items li ul { | |
+ | display:none; | ||
+ | position:absolute; | ||
+ | } | ||
− | + | .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; | ||
− | |||
− | + | } | |
+ | .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:hover {color: #FE6C68; | |
− | + | -webkit-transition: color ease-in-out 400ms; | |
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | + | @media (max-width:600px){ | |
+ | h2 {font-size:18px;} | ||
+ | h3 {font-size:17px;} | ||
+ | p {font-size:12px;} | ||
+ | } | ||
− | + | .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 & 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="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=" | + | <a data-scroll data-options='{ "easing": "linear" }' href="#intro1" class="buttonblack">Learn more</a> |
− | + | ||
− | + | <br/> | |
+ | |||
</div> | </div> | ||
Line 476: | Line 685: | ||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
Line 485: | Line 690: | ||
<div id="intro1"> | <div id="intro1"> | ||
− | <div | + | <div id="slideWrap"> |
− | < | + | <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 | + | <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 class="button-abstract" id="box-links"> | <div class="button-abstract" id="box-links"> | ||
− | <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" | + | <a data-scroll data-options='{ "easing": "linear" }' href="#abstract" class="buttongreen">read abstract</a> |
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
<div style="clear: both;"></div> | <div style="clear: both;"></div> | ||
Line 516: | Line 723: | ||
<div id="abstracttext"> | <div id="abstracttext"> | ||
− | <p> | + | <p> <h2> Mind the Gut: Abstract</h2></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> | |
− | </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> | ||
− | |||
− | |||
− | |||
<div style="clear: both;"></div> | <div style="clear: both;"></div> | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
Line 537: | Line 742: | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | <div id=" | + | <div id="twit"> |
− | + | ||
+ | <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;"> | ||
− | < | + | <img src="https://static.igem.org/mediawiki/2015/d/d9/Biochemsoc.png" style="width: 170px; height: 68px; margin: 5px;"> <img src="https://static.igem.org/mediawiki/2015/1/16/TU_Eindhoven_Neb_logo.png" style="width: 200px; height: 80px; margin: 5px;"> <img src="https://static.igem.org/mediawiki/2015/5/5a/York_Genscript_logo-1-.png" style="width: 200px; height: 51px; margin: 5px;"> <img src="https://static.igem.org/mediawiki/2015/7/76/Slack_Icon.png" style="width: 120px; height: 36px; margin: 5px;"> |
− | + | ||
− | < | + | <p class="mailus"><a href="mailto:ucligem2015@gmail.com">Want to become a sponsor? E-mail us!</a> </p> |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | </div> | ||
− | <div | + | <div class="back"> |
− | <a data-scroll data-options='{ "easing": "linear" }' href="#header | + | <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 578: | 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
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.