|
|
| Line 1: |
Line 1: |
| | {{TecMonterrey_GDL}} | | {{TecMonterrey_GDL}} |
| | + | |
| | <html> | | <html> |
| | + | <style> |
| | + | .smart-headers{ |
| | + | font-family: 'Code Caption', sans-serif; |
| | + | } |
| | | | |
| − | <!-- Uncomment these next lines if you want to work with this page -->
| + | .smart-headers h1{ |
| − | <!-- Comment them if you want to upload the code to the wiki-->
| + | padding-top: 3rem; |
| − | <!-- <head>
| + | padding-bottom: 3rem; |
| − | <script
| + | color: #a36996; |
| − | src="https://code.jquery.com/jquery-3.3.1.min.js"
| + | text-shadow: 5px 0px 0px #723f66; |
| − | integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
| + | font-size: 5vw; |
| − | crossorigin="anonymous"></script>
| + | font-weight: 900; |
| − | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
| + | letter-spacing: -5px; |
| − | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
| + | } |
| − | <meta charset="utf-8">
| + | |
| − | </head> -->
| + | |
| | | | |
| − | <style>
| + | .smart-headers h3{ |
| | + | font-weight: 100; |
| | + | color: #0c605c; |
| | + | font-size: 130%; |
| | + | |
| | + | } |
| | | | |
| − | /*----------------------------------*/
| + | .smart-headers h3 span{ |
| − | /*-------- COLOR PALETTE -----------*/
| + | font-weight: 900; |
| − | /*----------------------------------*/
| + | font-size: 140%; |
| | + | letter-spacing: -3px; |
| | + | } |
| | | | |
| − | .purple-color{
| + | .cool-container{ |
| − | color: rgb(105, 67, 100); | + | height: 40em; |
| − | }
| + | |
| − | .violet-color{
| + | |
| − | color: rgb(151, 97, 144);
| + | |
| − | }
| + | |
| − | .blue-color{
| + | |
| − | color: rgb(70, 102, 142);
| + | |
| − | }
| + | |
| − | .aqua-color{
| + | |
| − | color: rgb(0, 151, 167);
| + | |
| − | }
| + | |
| − | | + | |
| − | .lightblue-color{
| + | |
| − | color: rgb(64, 105, 134);
| + | |
| − | }
| + | |
| − | | + | |
| − | /*----------------------------------*/
| + | |
| − | /*--------- PAGE STYLING -----------*/
| + | |
| − | /*----------------------------------*/
| + | |
| − | | + | |
| − | .container{
| + | |
| − | min-height: 100vh;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dots-container{
| + | |
| − | height: 300px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* First section */
| + | |
| − | | + | |
| − | .microbes-img{
| + | |
| − | width: 7rem;
| + | |
| − | margin-bottom: 1rem;
| + | |
| − | }
| + | |
| − | .title{
| + | |
| − | font-size: 25px;
| + | |
| − | font-weight: bold;
| + | |
| − | margin-bottom: 3rem;
| + | |
| − | margin-top: 2rem;
| + | |
| − | }
| + | |
| − | .subtitle{
| + | |
| − | font-size: 22px;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | .symbol{
| + | |
| − | font-size: 25px;
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | .text{
| + | |
| − | font-size: 18px !important;
| + | |
| − | text-align: center !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Description section */
| + | |
| − |
| + | |
| − | .desc-title{
| + | |
| − | font-size: 40px;
| + | |
| − | margin: 3rem 0 3rem 0 !important;
| + | |
| − | }
| + | |
| − | .paragraphs p{
| + | |
| − | font-size: 20px !important;
| + | |
| − | text-align: justify !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes bounce {
| + | |
| − | 0%, 20%, 50%, 80%, 100% {
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | 40% {
| + | |
| − | transform: translateY(-30px);
| + | |
| | } | | } |
| − | 60% { | + | .internal-wrapper{ |
| − | transform: translateY(-15px);
| + | padding: 0 4rem 0 4rem; |
| | } | | } |
| − | }
| |
| | | | |
| − | .arrow {
| + | .proyect-container{ |
| − | margin-top: 2rem;
| + | margin-top: 2rem; |
| − | width: 50px;
| + | padding: 2rem; |
| − | height: 50px;
| + | background-color: #d1d1d1a9; |
| − | margin-left: auto;
| + | } |
| − | margin-right: auto;
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2018/6/69/T--TecMonterrey_GDL--Description--downarrow.png');
| + | |
| − | background-repeat: no-repeat; | + | |
| − | background-size: contain;
| + | |
| − | }
| + | |
| | | | |
| − | .arrow:hover{
| + | .proyect-subtitle{ |
| − | cursor: pointer; | + | font-family: 'Code Caption', sans-serif; |
| − | }
| + | font-weight: 900; |
| − | | + | margin-top: 1rem; |
| − | .bounce {
| + | margin-bottom: 1rem; |
| − | -webkit-animation: bounce 2s infinite;
| + | letter-spacing: -2px; |
| − | -moz-animation: bounce 2s infinite;
| + | |
| − | animation: bounce 2s infinite;
| + | |
| − | }
| + | |
| − | | + | |
| − | .third-page{
| + | |
| − | padding-top: 5rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − | <script>
| + | |
| − | $(document).ready(function(){
| + | |
| − | $('.arrow').click(function(event){
| + | |
| − | var nextSection;
| + | |
| − | switch(event.target.id){
| + | |
| − | case 'arrow1':
| + | |
| − | nextSection = $("#page2");
| + | |
| − | break;
| + | |
| − | case 'arrow2':
| + | |
| − | nextSection = $("#page3");
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | | + | |
| − | $('html, body').animate({
| + | |
| − | scrollTop: nextSection.first().offset().top
| + | |
| − | }, 800);
| + | |
| − | });
| + | |
| − | | + | |
| − | // Canvas with bouncing dots
| + | |
| − | var canvas = document.getElementById("lactobachill-bg");
| + | |
| − | var ctx = canvas.getContext("2d");
| + | |
| − | ctx.canvas.width = $('.dots-container').width();
| + | |
| − | ctx.canvas.height = $('.dots-container').height();
| + | |
| − | | + | |
| − | $( window ).resize(function() {
| + | |
| − | ctx.canvas.width = $('.dots-container').width(); | + | |
| − | ctx.canvas.height = $('.dots-container').height(); | + | |
| − | });
| + | |
| − |
| + | |
| − | class Circle {
| + | |
| − | constructor (x, y, radius, color) { | + | |
| − | this.offsetX = (Math.floor(Math.random() * 2) == 0)? .4:-.4;
| + | |
| − | this.offsetY = (Math.floor(Math.random() * 2) == 0)? .4:-.4;
| + | |
| − | | + | |
| − | // Avoid initial collition with the walls
| + | |
| − | if(x - radius < 0){
| + | |
| − | x += radius;
| + | |
| − | }else if (x + radius >= canvas.clientWidth){
| + | |
| − | x-= radius;
| + | |
| − | }
| + | |
| − | | + | |
| − | if(y - radius < 0){
| + | |
| − | y += radius;
| + | |
| − | }else if (y + radius >= canvas.clientHeight){
| + | |
| − | y -= radius;
| + | |
| − | }
| + | |
| − | this.x = x;
| + | |
| − | this.y = y;
| + | |
| − | this.radius = radius;
| + | |
| − | this.color = color;
| + | |
| − | | + | |
| − | this.update();
| + | |
| − | } | + | |
| − |
| + | |
| − | draw() {
| + | |
| − | ctx.fillStyle = this.color;
| + | |
| − | ctx.beginPath();
| + | |
| − | ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
| + | |
| − | ctx.fill();
| + | |
| − | }
| + | |
| − | | + | |
| − | update() {
| + | |
| − | if((this.x - this.radius) <= 0 || (this.x + this.radius) >= canvas.clientWidth){
| + | |
| − | this.offsetX *= -1;
| + | |
| − | }
| + | |
| − | if((this.y + this.radius) >= canvas.clientHeight || (this.y - this.radius) <= 0){
| + | |
| − | this.offsetY *= -1;
| + | |
| − | }
| + | |
| − | this.x += this.offsetX;
| + | |
| − | this.y += this.offsetY;
| + | |
| − | this.draw();
| + | |
| − | }
| + | |
| | } | | } |
| − |
| + | .symbol{ |
| − |
| + | font-size: 80px; |
| − | var circles = [];
| + | font-weight: 700; |
| − |
| + | color: rgb(224, 143, 143); |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 40, '#a3689be9')); | + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 100, '#5a93bbff'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 48, '#c8ecf3e8'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 50, '#d9b4f3ee'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 55, '#75bff4ff'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 45, '#eabad3ec'));
| + | |
| − | | + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 70, '#68abdae4'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 60, '#406986ff'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 104, '#eac5d6e8'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 68, '#c8ecf3e8'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 65, '#cfa5f3e4'));
| + | |
| − | circles.push(new Circle(Math.floor(Math.random() * canvas.clientWidth), Math.floor(Math.random() * canvas.clientHeight), 63, '#e9d2e8ff'));
| + | |
| − |
| + | |
| − | | + | |
| − | function animate() {
| + | |
| − | ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight); | + | |
| − | circles.forEach(function (circle) { | + | |
| − | circle.update();
| + | |
| − | }); | + | |
| − | requestAnimationFrame(animate);
| + | |
| − | console.log('animate');
| + | |
| | } | | } |
| − | animate(); | + | .microbes-img{ |
| − | | + | width: 6rem; |
| − | }); | + | } |
| − | </script> | + | </style> |
| | | | |
| − | <div class="container" id="page1"> | + | <div class="container"> |
| − | <div class="row"> | + | <div class="smart-headers text-center"> |
| − | <div class="col-12 text-center dots-container">
| + | <h1>LACTOBACHILL</h1> |
| − | <canvas id="lactobachill-bg"></canvas>
| + | |
| − | </div> | + | |
| − | <div class="col-12 text-center">
| + | |
| − | <h2 class="purple-color title">A smart psychobiotic with anxiolytic and antidepressant properties</h2>
| + | |
| − | </div>
| + | |
| | </div> | | </div> |
| − | <div class="row"> | + | |
| − | <div class="col-md-5"> | + | <div class="cool-container"> |
| − | <div class="row"> | + | <div class="cool-wrapper"> |
| − | <div class="col-8 text-center"> | + | <div class="internal-wrapper"> |
| − | <img class="microbes-img" src="./psychotropic.png" alt="probiotics picture"> | + | <div class="row"> |
| − | <h3 class="subtitle blue-color">Psychotropic</h3>
| + | <div class="col smart-headers"> |
| − | <p class="text blue-color">Substance that has an effect on people’s state of mind.</p>
| + | <h3>A <span>SMART PSYCHOBIOTIC</span> |
| | + | with </h3> |
| | + | <h3 class="text-right"> <span>ANTIDEPRESSANT</span> and |
| | + | <span>ANXIOLYTIC</span> properties</h3> |
| | + | </div> |
| | </div> | | </div> |
| − | <div class="col-4 text-center"> | + | <div class="row proyect-container"> |
| − | <span class="symbol blue-color">+</span>
| + | |
| | + | <div class="row"> |
| | + | <div class="col-8 text-center"> |
| | + | <img class="microbes-img" src="https://static.igem.org/mediawiki/2018/3/34/T--TecMonterrey_GDL--Description--psychotropic.png" alt="probiotics picture"> |
| | + | <h3 class="proyect-subtitle">Psychotropic</h3> |
| | + | <p class="text">Substance that has an effect on people’s state of mind.</p> |
| | + | </div> |
| | + | <div class="col-4 text-center"> |
| | + | <span class="symbol">+</span> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | <div class="col-md-5"> |
| | + | <div class="row"> |
| | + | <div class="col-8 text-center"> |
| | + | <img class="microbes-img" src="https://static.igem.org/mediawiki/2018/1/12/T--TecMonterrey_GDL--Description--probiotics.png" alt="probiotics picture"> |
| | + | <h3 class="proyect-subtitle violet-color">Probiotics</h3> |
| | + | <p class="text violet-color text">A microorganism that when consumed maintains or restores beneficial bacteria to the digestive tract.</p> |
| | + | </div> |
| | + | <div class="col-4 text-center"> |
| | + | <span class="symbol">=</span> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | <div class="col-md-3 text-center"> |
| | + | <img class="microbes-img" src="https://static.igem.org/mediawiki/2018/d/d3/T--TecMonterrey_GDL--Description--psychobiotic.png" alt="probiotics picture"> |
| | + | <h3 class="proyect-subtitle aqua-color">Psychobiotics</h3> |
| | + | <p class="text aqua-color">Gut microbiomes may have a significant impact on mood and cognition</p> |
| | + | </div> |
| | </div> | | </div> |
| | </div> | | </div> |
| − | </div>
| |
| − | <div class="col-md-4">
| |
| − | <div class="row">
| |
| − | <div class="col-8 text-center">
| |
| − | <img class="microbes-img" src="./probiotics.png" alt="probiotics picture">
| |
| − | <h3 class="subtitle violet-color">Probiotics</h3>
| |
| − | <p class="text violet-color">A microorganism that when consumed maintains or restores beneficial bacteria to the digestive tract.</p>
| |
| − | </div>
| |
| − | <div class="col-4 text-center">
| |
| − | <span class="symbol blue-color">=</span>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="col-md-3 text-center">
| |
| − | <img class="microbes-img" src="./psychobiotics.png" alt="probiotics picture">
| |
| − | <h3 class="subtitle aqua-color">Psychobiotics</h3>
| |
| − | <p class="text aqua-color">Gut microbiomes may have a significant impact on mood and cognition</p>
| |
| | </div> | | </div> |
| − | </div>
| |
| − | <div class="text-center">
| |
| − | <div class="arrow bounce" id="arrow1"></div>
| |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <div class="container" id="page2">
| |
| − | <div class="row">
| |
| − | <div class="col-12 text-center">
| |
| − | <h2 class="desc-title lightblue-color">Description</h2>
| |
| − | </div>
| |
| − | <div class="col-12 paragraphs">
| |
| − | <p>The microbiota has been consistently linked to human well-being. Studies show that microbiota not only can impact nutrition and metabolism, but also the mood.</p>
| |
| − | <p>Psychobiotics is the field where probiotics and psychotropics (molecules that can alter mood) converge, opening the possibility of therapies where good bacteria can help lighten or reduce the impact of certain psychiatric conditions, such as depression. </p>
| |
| − | <p>Depression affects more than 300 million people in the world, shockingly, an increase of more than 18% between 2005 and 2015 was observed according to World Health Organization (2018). There are many barriers towards dealing with depression, from availability of help to non-recognition of the problem. </p>
| |
| − | <p>Depression is the leading cause of ill health and disability worldwide. Our Human Practices are centered towards conscientization and against stigmatization of depression; as well as performing a campaign to incentive people to seek aid when they need to.</p>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="text-center">
| |
| − | <div class="arrow bounce" id="arrow2"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="container" id="page3">
| |
| − | <div class="row third-page">
| |
| − | <div class="col-md-6 paragraphs">
| |
| − | <p>On the other hand, there is a strong relationship between systemic inflammation and psychiatric disorders.</p>
| |
| − | <p>Our strategy consists of genetically engineering Lactobacillus rhamnosus GG, a natural gut probiotic, into producing and possible secreting soluble IL-6 receptors gp80 (mutated for increased affinity) and gp130 in order to aid reducing trans-signalization of the inflammatory pathway of cytokine interleukin 6.</p>
| |
| − | <p>Our system will be triggered by nitrosative stress, which is a known pathway of inflammatory, depressive and stress afflictions.</p>
| |
| − | <p>Blocking the trans-signaling of IL-6 system also prevents tryptophan catabolism to serotonin to deviate into other catabolites.</p>
| |
| − | <p>This is how Lactobachill, can be used as an alternative treatment for depression as well as other inflammatory disorders.</p>
| |
| − | </div>
| |
| − | <div class="col-md-6 text-center d-flex align-items-center">
| |
| − | <img class="process-img" src="" alt="process image">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| | + | <br> |
| | + | <br> |
| | </html> | | </html> |
| | | | |
| | {{TecMonterrey_GDL/Footer}} | | {{TecMonterrey_GDL/Footer}} |
