Difference between revisions of "Team:UCL/Description"
Superjack15 (Talk | contribs) |
Superjack15 (Talk | contribs) |
||
(60 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{CSS_UCL6}} |
<html> | <html> | ||
<head> | <head> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | $(function () { | ||
+ | $('.content').myTooltip({ | ||
+ | speed: 200, | ||
+ | closeOnClick: true | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | $.fn.myTooltip = function ( options ) { | ||
+ | |||
+ | |||
+ | var defaults = { | ||
+ | speed: 650, | ||
+ | closeOnClick: false, | ||
+ | tooltipClass: 'tooltip' | ||
+ | }; | ||
+ | |||
+ | var settings = $.extend( {}, defaults, options ); | ||
+ | |||
+ | var $this = $(this), | ||
+ | $tooltip = $this.find('.'+settings.tooltipClass); | ||
+ | |||
+ | |||
+ | setPosition(); | ||
+ | $(window).resize(function () { | ||
+ | setPosition(); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $this.mouseenter(function () { | ||
+ | $('.'+settings.tooltipClass, this).fadeIn(settings.speed); | ||
+ | }).mouseleave(function () { | ||
+ | $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed); | ||
+ | }); | ||
+ | |||
+ | if(settings.closeOnClick) { | ||
+ | $tooltip.click(function () { | ||
+ | $(this).stop(true, true).fadeOut(settings.speed); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | function setPosition() { | ||
+ | $tooltip.css({top: $this.height(), left: -150}); | ||
+ | } | ||
+ | |||
+ | }; | ||
+ | |||
+ | </script> | ||
+ | |||
<style> | <style> | ||
+ | |||
+ | .mainmenu {background-color: #fff !important;} | ||
+ | .menu-items a {color: #493C54;} | ||
+ | .buttonblack {background-color: #22343C; border-color: #22343C; } | ||
+ | a.buttonblack { color: #fff !important; font-size: 12px;} | ||
+ | .buttonblack:hover {border-color: #22343C; color: #22343C !important;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #header2 { | ||
+ | |||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | top: 0; | ||
+ | bottom: 0; | ||
+ | margin: 0 auto; | ||
+ | min-height: 100%; | ||
+ | height: auto; | ||
+ | vertical-align: middle; | ||
+ | font-family: Raleway; | ||
+ | letter-spacing: 1.1px; font-size: 13px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #header2:before | ||
+ | { | ||
+ | content: ""; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg'); | ||
+ | -webkit-filter: blur(2px); | ||
+ | -moz-filter: blur(2px); | ||
+ | -o-filter: blur(2px); | ||
+ | -ms-filter: blur(2px); | ||
+ | filter: blur(2px); | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: fixed !important; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2))); | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | pointer-events: none; | ||
+ | overflow: hidden; | ||
+ | display: block; | ||
+ | border: none;} | ||
+ | |||
+ | #mobilebackground { | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg'); | ||
+ | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2))); | ||
+ | |||
+ | top: 0; | ||
+ | right: 0; | ||
+ | left: 0; | ||
+ | background-position: 0 0 0 0; | ||
+ | position: fixed; | ||
+ | background-repeat: no-repeat; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | -webkit-box-sizing: border-box; | ||
+ | -moz-box-sizing: border-box; | ||
+ | box-sizing: border-box; | ||
+ | display: none; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | #text h2 { | ||
+ | font-size: 30px !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1;} | ||
+ | |||
+ | #submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;} | ||
+ | |||
+ | #text {margin-top: 50px; z-index: 9999;} | ||
+ | #text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; } | ||
+ | |||
+ | .blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity; | ||
+ | transition-duration: 1s; | ||
+ | transition-timing-function: ease; } | ||
+ | |||
+ | #text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b} | ||
+ | |||
+ | .citecryan {background: #fff; border-radius: 4px; opacity: 0.8; margin-left: 340px; padding: 10px;} | ||
+ | |||
+ | .citecryan:hover {opacity: 1; transition-property: opacity; | ||
+ | transition-duration: 1s; | ||
+ | transition-timing-function: ease;} | ||
+ | |||
+ | .constructs {border-radius: 4px; margin: 0 auto; text-align: justify; font-size: 15px; width: 60%; z-index: 3; opacity: 1; padding: 40px; line-height: 1.4; padding-top: 25px;} | ||
+ | #text a {color: #33726c; font-weight: bold; text-decoration: none;} | ||
+ | #text a:hover {color: #33726c; font-weight: bold; text-decoration: none;} | ||
+ | #text a:visited {color: #33726c; font-weight: bold; text-decoration: none;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .content .tooltip { | ||
+ | background-color: #fff; | ||
+ | border: 1px #22343C solid; | ||
+ | border-radius: 4px; | ||
+ | padding: 3px; | ||
+ | position: absolute; | ||
+ | width: 300px; | ||
+ | z-Index: 99999; | ||
+ | display: none; | ||
+ | letter-spacing: 1px; | ||
+ | line-height: 1; | ||
+ | font-size: 11px; | ||
+ | } | ||
+ | |||
+ | .tooltip a {color: #22343C;} | ||
+ | .tooltip {color: #22343C;} | ||
+ | |||
+ | .content { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .content {color: #d67166;} | ||
+ | |||
+ | .bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background:none; text-align: center; line-height: 2; | ||
+ | background-position: top center; background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;} | ||
+ | |||
+ | .bigtitle a {color: #22343C; text-decoration: none;} | ||
+ | |||
+ | .title2 {font-size: 380%;} | ||
+ | |||
+ | .titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;} | ||
+ | |||
+ | .arrow {font-size: 50px;} | ||
+ | |||
+ | |||
+ | .buttonblack { | ||
+ | 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; | ||
+ | padding: 10px 16px; | ||
+ | text-decoration: none; | ||
+ | font-family: Raleway; | ||
+ | letter-spacing: 2px; | ||
+ | font-weight: bold;} | ||
+ | |||
+ | |||
+ | @media(max-width:1280px){ | ||
+ | |||
+ | .bigtitle {font-size: 15px;} | ||
+ | .bigtitle {width: 50%;} | ||
+ | .buttonblack {padding: 5px 11px;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width:1152px){ | ||
+ | |||
+ | .bigtitle {font-size: 14px;} | ||
+ | .bigtitle {width: 52%;} | ||
+ | .titlecircle {width: 80%;} | ||
+ | a.buttonblack {font-size: 11px; letter-spacing: 1.8px;} | ||
+ | .buttonblack {padding: 5px 8px;} | ||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width:1024px){ | ||
+ | .bigtitle {width: 58%;} | ||
+ | .titlecircle {padding-top: 15%; width: 75%;} | ||
+ | #wrapper {top: 100px;} | ||
+ | a.buttonblack {font-size: 10px; letter-spacing: 1.7px;} | ||
+ | #header2:before {background-image: none;} | ||
+ | #mobilebackground {display: block;} | ||
+ | .constructs {font-size: 15px;} | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width:960px){ | ||
+ | |||
+ | .bigtitle {font-size: 13px; width: 65%;} | ||
+ | .arrow {font-size: 40px;} | ||
+ | .buttonblack {padding: 5px 5px;} | ||
+ | #submenu {width: 110%; margin-left: -5%;} | ||
+ | .constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;} | ||
+ | .constructs {text-align: center;} | ||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width:910px){ | ||
+ | } | ||
+ | |||
+ | @media(max-width:850px){ | ||
+ | a.buttonblack {font-size: 10px; letter-spacing: 1.3px;} | ||
+ | .buttonblack {padding: 4px 3px;} | ||
+ | #submenu {width: 112%; margin-left: -6%;} | ||
+ | .constructs img {min-width: 80% !important;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media(max-width: 768px){ | ||
+ | .bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;} | ||
+ | .bigtitle p { font-size: 13px; margin-top: -20px !important;} | ||
+ | .titlecircle {width: 70%; padding-top: 8%;} | ||
+ | a.buttonblack {font-size: 9px; letter-spacing: 1.3px;} | ||
+ | #submenu {width: 80%; margin: 0 auto;} | ||
+ | .buttonblack {line-height: 3.8;} | ||
+ | a.buttonblack {font-size: 11px; letter-spacing: 1.8px;} | ||
+ | .buttonblack {padding: 5px 8px;} | ||
+ | .citecryan {margin-left: 50px;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | @media(max-width:680px){ | ||
+ | #wrapper {width: 100%;} | ||
+ | #text {margin: 50px 25px 0 25px;} | ||
+ | #text h4 {font-size: 13px;} | ||
+ | .constructs {font-size: 13px;} | ||
+ | .bigtitle p { font-size: 13px; } | ||
+ | .titlecircle {width: 60%;} | ||
+ | #submenu {width: 70%; margin: 0 auto;} | ||
+ | .buttonblack {line-height: 3.8;} | ||
+ | a.buttonblack {font-size: 11px; letter-spacing: 1.8px;} | ||
+ | .buttonblack {padding: 5px 8px;} | ||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width:640px){ | ||
+ | .arrow {font-size: 30px;} | ||
+ | .titlecircle {width: 60%;} | ||
+ | #submenu {width: 80%; margin: 0 auto;} | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | @media(max-width:530px){ | ||
+ | a.buttonblack {font-size: 10px; letter-spacing: 1.8px;} | ||
+ | .bigtitle p {} | ||
+ | .titlecircle {width: 60%;} | ||
+ | .title2 {font-size: 320%;} | ||
+ | #text h4 {line-height: 1.7;} | ||
+ | .citecryan {margin-left: 10px;} | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width: 480px) { | ||
+ | .bigtitle p { font-size: 13px; text-align: center;} | ||
+ | .titlecircle {width: 70%;} | ||
+ | #submenu {width: 90%; margin: 0 auto;} | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | @media(max-width: 410px) { | ||
+ | .titlecircle {width: 75%;} | ||
+ | .title2 {font-size: 300%;} | ||
+ | .bigtitle p {line-height: 1.5 !important;} | ||
+ | } | ||
+ | |||
+ | @media(max-width: 380px) { | ||
+ | .titlecircle {width: 75%; padding-top: 10%;} | ||
+ | .bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;} | ||
+ | .title2 {font-size: 260%;} | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media(max-width: 360px) { | ||
+ | .titlecircle {width: 80%;} | ||
+ | .title2 {font-size: 240%;} | ||
+ | .buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;} | ||
+ | } | ||
+ | |||
+ | .idea:before {content: ""; background: url('https://static.igem.org/mediawiki/2015/d/d6/UCL_Screenshot_2015-09-03_at_00.png'); background-position: top right; opacity: 0.2; top: 0px; left: 0px; width: 100%; height: 300px; position: absolute; background-repeat: no-repeat; z-index: 1; pointer-events: none;} | ||
+ | |||
+ | |||
+ | |||
+ | .idea {line-height: 2; position: relative; z-index: 2; margin-top: 15px; padding-top: 20px; border-top: 0px dotted #FF9B8E; border-bottom: 0px dotted #FF9B8E; padding-bottom: 20px;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .constructsdiv {position: relative; z-index: 1; width: 140%; height: 100%; background-color: #fff; opacity: 1; margin-left: -20%; | ||
+ | border-radius: 15px; box-shadow: 0px 0px 20px #eaeaea;} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .constructsdiv:before {content: ""; background-image: url('https://static.igem.org/mediawiki/2015/4/40/UCLScreenshot_2015-09-03_at_13.png'); background-repeat: no-repeat; background-position: top 0% left 9%; opacity: 0.3; top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: 2; pointer-events: none; transition-duration: 1s; transition-property: opacity; | ||
+ | transition-timing-function: ease; } | ||
+ | |||
+ | |||
+ | .constructsdiv:hover:before {opacity: 1; transition-duration: 1s; transition-property: opacity; | ||
+ | transition-timing-function: ease;} | ||
+ | |||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
− | |||
− | <div id=" | + | <div id="mobilebackground"></div> |
+ | <div id="header2"> | ||
+ | <div id="wrapper"> | ||
− | < | + | <div class="bigtitle"> |
− | < | + | <div class="titlecircle"><span class="title2">Overview</span><hr style="height:1px; border:none; color:#22343; background-color:#22343C;"><p style="margin-top: 5%; line-height: 1.7;font-family:Raleway;">We bring to iGEM the concept of <strong>psychobiotics</strong> and how we can potentially use them to fight the rising issue of <strong>mental health disorders</strong> in the modern world |
− | < | + | <br><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >▼ </a></span> |
− | < | + | |
− | < | + | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | < | + | </div> </div> |
− | < | + | <div id="submenu" style="padding-top: 150px;"> |
− | </ | + | <a data-scroll data-options='{ "easing": "linear" }' href="#background" class="buttonblack">Motivation</a> |
+ | <a data-scroll data-options='{ "easing": "linear" }' href="#constructs" class="buttonblack">What we have done</a> | ||
+ | |||
− | < | + | </div> |
+ | |||
+ | <div id=text> | ||
+ | <!--<ul> | ||
+ | <h2><span id="background" style="padding-top: 100px;">Summary</span></h2> | ||
+ | <div><p></p> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<br> | <br> | ||
+ | |||
+ | <h2><span id="constructs" style="padding-top: 100px;">What we have done</span></h2>--> | ||
− | |||
− | |||
− | |||
+ | |||
+ | <!--<h1>Mind the gut</h1> | ||
+ | |||
+ | <p>fighting mental illness with probiotics--> | ||
+ | |||
+ | <div class="blockk"> | ||
+ | <h2><span id="background" style="padding-top:150px;">Why mental health?</span></h2> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <h4>Millions of people worldwide suffer from mental health disorders and the consequences are severe for the economy, society and individuals. The WHO estimates that depression will be the most second-most important disease burden in the world by 2020, even surpassing cancer. Today already, there are an estimated 450 million people suffering from mental illnesses.</h4> | ||
+ | <h4>However, there is still only limited knowledge about the causes of many mental health diseases which makes patients face problems such as stigma, misconceptions and side-effects from medication. In recent years research has offered some insight into the connection between mental health and the bacteria inhabiting our bodies, the microbiom. </h4> | ||
+ | <h4>We therefore decided to dedicate our summer to tackle mental health problems, especially depression and anxiety using synthetic biology tools and targeting this connection. Our project is not only a proof of concept that mental health can be addressed with synthetic biology, we also found our project to be effective to reduce the stigma around mental health problems.</h4> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="blockk"> | ||
+ | <h2><span id="background" style="padding-top:150px;">What we have done</span></h2> | ||
+ | <br/> | ||
+ | <h4 style="font-size: 20px"><b>Our Parts</b></h4> | ||
+ | <br/> | ||
+ | <h4>We have designed mechanisms in probiotic bacteria that allow them to respond to and take an effect on mental health. This means our probiotics can sense when a person is feeling depressed or anxious or has a panic attack and can then respond appropriately in order to reduce the symptoms.</h4> | ||
+ | |||
+ | <h4>We have made 6 new parts and have improved 2 parts.</h4> | ||
+ | |||
+ | <h4>See all our <a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></h4> | ||
+ | |||
+ | |||
+ | <h4>One of the basic parts that is central to our project is the TPH1 producing part which is the rate limiting enzyme for serotonin production, one of the human’s most important natural happy-makers <read more about TPH1> </h4> | ||
+ | <br/> | ||
+ | <h4 style="font-size: 20px"><b>How do our Devices Work?</b></h4> | ||
+ | <br/> | ||
+ | |||
+ | <h4>The devices we made consist of two main components. Detecting modules that sense the existence of a biomarker of depression or anxiety in the gut and responding modules that consist of genes that are involved in the pathways between the brain and the gut, for example TPH1 and Gad, which are important for Serotonin and GABA production.</h4> | ||
+ | |||
+ | <!--Good place for an explanatory picture of one of the pathways, or a video! --> | ||
+ | |||
+ | <h4>More about <a href="https://2015.igem.org/Team:UCL/Sensors">Detectors</a> and <a href="https://2015.igem.org/Team:UCL/Effectors">Responding Modules</a></h4> | ||
+ | |||
+ | |||
+ | <br/> | ||
+ | <h4 style="font-size: 20px"><b>Human Practices</b></h4> | ||
+ | <br/> | ||
+ | <h4>We organised several events to make people express their feelings about mental health and about GMOs. This includes late night events at the science museum, art exhibitions, interview with stake-holders and more. One of our events, an “open-mind night” was so successful that one of the charities we worked with is making it a monthly event.</h4> | ||
+ | |||
+ | <h4>More about our <a href="https://2015.igem.org/Team:UCL/Practices">Human Practices</a></h4> | ||
+ | <br/> | ||
+ | <h4 style="font-size: 20px"><b>Entrepreneurship</b></h4> | ||
+ | <br/> | ||
+ | <h4>Researchers found out that chocolate was a more efficient delivery method for probiotics than yogurt or milk, so we developed a product that could deliver our bacteria and taste good at the same time. We worked out a complete business model and are about to have our product “Prokao” patented.</h4> | ||
+ | |||
+ | <h4>More about <a href="https://2015.igem.org/Team:UCL/Entrepreneurship">Entrepreneurship</a></h4> | ||
+ | <br/> | ||
+ | <h4 style="font-size: 20px"><b>The Gut-on-a-Chip</b></h4> | ||
+ | <br/> | ||
+ | <h4>We developed a model that can be used to imitate conditions in the human gut, even recreating the motion of segmentation and peristalsis, something which has never been done before. This can allow us and future researchers to conduct experiments in controlled conditions without human subjects.</h4> | ||
+ | |||
+ | <h4>More about the <a href="https://2015.igem.org/Team:UCL/Design">Gut-on-a-Chip</a></h4> | ||
+ | <br/> | ||
+ | <h4 style="font-size: 20px"><b>References</b></h4> | ||
+ | <br/> | ||
+ | <h4>You can find our references on this page and also by hovering over the references in the texts in our wiki.</h4> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!-- | ||
+ | <h2></h2> | ||
+ | <br> | ||
+ | <h2></h2> | ||
+ | --> | ||
<div style="height:50px"></div> | <div style="height:50px"></div> | ||
Line 89: | Line 545: | ||
</ul> | </ul> | ||
--> | --> | ||
− | |||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 19:41, 16 November 2015
'
Overview
We bring to iGEM the concept of psychobiotics and how we can potentially use them to fight the rising issue of mental health disorders in the modern world
▼