Difference between revisions of "Team:TecMonterrey GDL"

Line 1: Line 1:
 +
 
{{TecMonterrey_GDL}}
 
{{TecMonterrey_GDL}}
 
<html>
 
<html>
Line 46: Line 47:
 
             font-size: 50px;
 
             font-size: 50px;
 
             letter-spacing: -5px;     
 
             letter-spacing: -5px;     
 +
        }
 +
 +
        .carousel-inner-text{
 +
            font-family: 'Roboto', sans-serif;
 +
            font-size: 24px;
 +
            text-align: center;
 +
            font-weight: 100;
 +
            font-style: normal;
 +
        }
 +
 +
        .carousel-inner-text.slide2-text1{
 +
            position: relative;
 +
            top: 15%;
 +
            display: block;
 +
            width: 400px;
 +
            left: 10%;
 +
        }
 +
 +
        .carousel-inner-text.slide2-text2{
 +
            position: relative;
 +
            top: 40%;
 +
            left: 15%;
 +
            width: 500px;
 +
        }
 +
 +
        .carousel-inner-text.slide3-text1{
 +
            position: relative;
 +
            top: 10%;
 +
            width: 600px;
 +
            left: 18%;
 +
        }
 +
 +
        .carousel-inner-text.slide3-text2{
 +
            position: relative;
 +
            top: 10%;
 +
            width: 500px;
 +
            left: 5%;
 +
        }
 +
       
 +
        .carousel-inner-text.slide4-text1{
 +
            position: relative;
 +
            top: 5%;
 +
            left:5%;
 +
        }
 +
 +
        .carousel-inner-text.slide4-text2{
 +
            position: relative;
 +
            width: 400px;
 +
            top: 20%;
 +
        }
 +
 +
        .carousel-inner-text.slide4-text3{
 +
            position: relative;
 +
            width: 300px;
 +
            right: 100%;
 +
            top: 25%;
 +
        }
 +
 +
        .container-carousel{
 +
            height: 500px;
 +
            max-height: 500px;
 +
        }
 +
 +
        .vert .carousel-item-next.carousel-item-left,
 +
        .vert .carousel-item-prev.carousel-item-right {
 +
            -webkit-transform: translate3d(0, 0, 0);
 +
            transform: translate3d(0, 0, 0);
 +
        }
 +
 +
        .vert .carousel-item-next,
 +
        .vert .active.carousel-item-right {
 +
            -webkit-transform: translate3d(0, 100%, 0);
 +
            transform: translate3d(0, 100% 0);
 +
        }
 +
 +
        .vert .carousel-item-prev,
 +
        .vert .active.carousel-item-left {
 +
        -webkit-transform: translate3d(0,-100%, 0);
 +
        transform: translate3d(0,-100%, 0);
 +
        }
 +
        .carousel-indicators li::after {
 +
            position: absolute;
 +
            bottom: -10px;
 +
            left: 0;
 +
            display: inline-block;
 +
            width: 100%;
 +
            height: 10px;
 +
            content: "";
 +
        }
 +
        .carousel-indicators li::before {
 +
            position: absolute;
 +
            top: -10px;
 +
            left: 0;
 +
            display: inline-block;
 +
            width: 100%;
 +
            height: 10px;
 +
            content: "";
 +
        }
 +
        .carousel-indicators li.active {
 +
            width: 20px !important;
 +
            height: 20px !important;
 +
            background-color: #7c4e72 !important;
 +
        }
 +
 +
        .carousel-indicators li {
 +
            position: relative;
 +
            -ms-flex: 0 1 auto;
 +
            flex: 0 1 auto;
 +
            margin-right: 3px;
 +
            margin-left: 3px;
 +
            text-indent: -999px;
 +
            cursor: pointer;
 +
            width: 12px !important;
 +
            height: 12px !important;
 +
            margin-top: 8px;
 +
            border-radius: 100%;
 +
            background-color: #a36996 !important;
 +
        }
 +
 +
        .carousel-indicators{
 +
            bottom: 30%!important;
 +
            flex-direction: column!important;
 +
            align-items: center;
 +
        }
 +
 +
        .image{
 +
            background-size: 100% 100%;
 +
        }
 +
 +
        .row{
 +
            height: 500px;
 
         }
 
         }
  
Line 60: Line 192:
 
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 
     <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">
 
     <meta charset="utf-8">
−
     <link href="https://fonts.googleapis.com/css?family=Coda+Caption:800" rel="stylesheet">
+
     <link href="https://fonts.googleapis.com/css?family=Coda+Caption:800|Roboto:100" rel="stylesheet">
−
</head> -->  
+
</head> -->
  
 
<div class="container">
 
<div class="container">
Line 68: Line 200:
 
         <h1>TO YOUR WELL BEING</h1>
 
         <h1>TO YOUR WELL BEING</h1>
 
     </div>
 
     </div>
−
 
 
     <div class="cool-container">
 
     <div class="cool-container">
−
        <div class="cool-wrapper">
+
            <div class="cool-wrapper">
−
             <div class="row">  
+
             <div class="container-carousel">
−
                 <div class="col-3">
+
                 <div id="carouselControls" class="carousel vert slide" data-ride="carousel" data-interval="2000">
−
                    <div class="home-headers">
+
                    <div class="row" style="margin:0px;">
−
                            <h5>it all starts</h5>
+
                            <div class="col-11">
−
                            <h4>in your</h4>
+
                                <div class="carousel-inner">
−
                            <h3>BRAIN</h3>
+
                                    <div class="carousel-item active">
 +
                                        <div class="row">
 +
                                            <div class="col-3">
 +
                                                <div class="home-headers">
 +
                                                        <h5>it all starts</h5>
 +
                                                        <h4>in your</h4>
 +
                                                        <h3>BRAIN</h3>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="col-5">
 +
                                                <p class="carousel-inner-text">
 +
                                                    The brain is a complex organ that is part of the Central Nervous System (CNS). It could be defined as the one in charge of controlling and regulating most functions of the body and mind. From vital functions such as breathing or heartbeat, through sleep, hunger or thirst to higher functions.
 +
                                                </p>
 +
                                            </div>
 +
                                            <div class="col-4 image" style="background-image:url('https://static.igem.org/mediawiki/2018/5/52/T--TecMonterrey_GDL--cerebro.png')">
 +
                                            </div>
 +
                                        </div>   
 +
                                    </div>
 +
                                   
 +
                                    <div class="carousel-item">
 +
                                        <div class="row">
 +
                                            <div class="col-8">
 +
                                                <p class="carousel-inner-text slide2-text1">There is a strong connection between the brain and the intestinal microbiota.</p>
 +
 
 +
                                                <p class="carousel-inner-text slide2-text2">
 +
                                                    In the intestine live bacteria that play key roles for humans, such as protection against pathogens, help digestion, control the nervous system and even affect our mood.
 +
                                                </p>
 +
                                            </div>
 +
                                            <div class="col-4 image" style="background-image:url('https://static.igem.org/mediawiki/2018/e/eb/T--TecMonterrey_GDL--intestino.png')">
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                   
 +
                                    <div class="carousel-item">
 +
                                        <div class="row">
 +
                                            <div class="col-7">
 +
                                                <p class="carousel-inner-text slide3-text1">
 +
                                                    A microorganism that has been shown to be beneficial to humans is Lactobacillus rhamnosus, since it has probiotic effects that contribute to the well-being of people.
 +
                                                </p>
 +
 
 +
                                                <p class="carousel-inner-text slide3-text2">
 +
                                                    It is known that stress in an organism can generate inflammation, which leads to the development of a depressive or anxious disorder. This is because the stress in the body causes inflammation, which produces a molecule that instructs the brain to make the person feel depressed or anxious.
 +
                                                </p>
 +
                                            </div>
 +
                                           
 +
                                            <div class="col-4 image" style="background-image:url('https://static.igem.org/mediawiki/2018/d/d9/T--TecMonterrey_GDL--estomago.png')">
 +
                                            </div>
 +
                                        </div>                                       
 +
                                    </div>
 +
 
 +
                                    <div class="carousel-item">
 +
                                        <div class="row">
 +
                                            <div class="col-5">
 +
                                                <p class="carousel-inner-text slide4-text1">
 +
                                                    We aim to generate a microorganism that is capable of blocking the signaling produced by stress and inflammation in the body.
 +
                                                </p>
 +
                                                <p class="carousel-inner-text slide4-text2">
 +
                                                    To achieve this, we will first use E. coli as a model organism due to its simplicity and ease of manipulation.
 +
                                                </p>
 +
                                               
 +
                                            </div>
 +
                                            <div class="col-5 image" style="background-image:url('https://static.igem.org/mediawiki/2018/2/22/T--TecMonterrey_GDL--intestino2.png')">
 +
                                            </div>
 +
 
 +
                                            <div class="col-2">
 +
                                                <p class="carousel-inner-text slide4-text3">
 +
                                                    Our final product will be a psychobiotic, a microorganism capable of sensing stress and respond by producing a therapeutic molecule to minimize the adverse effects of inflammation, and the symptoms of depressive disorders.
 +
                                                </p>
 +
                                            </div>
 +
 
 +
                                        </div>
 +
                                    </div>   
 +
 
 +
                                </div>
 +
 
 +
                                <!-- <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
 +
                                    <span class="carousel-control-prev-icon bg-dark rounded-circle" aria-hidden="true"></span>
 +
                                    <span class="sr-only">Previous</span>
 +
                                </a>
 +
                                <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
 +
                                    <span class="carousel-control-next-icon bg-dark rounded-circle" aria-hidden="true"></span>
 +
                                    <span class="sr-only">Next</span>
 +
                                </a> -->
 +
                            </div>
 +
 
 +
                        <div class="col-1">
 +
                            <ol class="carousel-indicators">
 +
                                <li data-target="#carouselControls" data-slide-to="0" class="active"></li>
 +
                                <li data-target="#carouselControls" data-slide-to="1"></li>
 +
                                <li data-target="#carouselControls" data-slide-to="2"></li>
 +
                                <li data-target="#carouselControls" data-slide-to="3"></li>
 +
                            </ol>
 +
                        </div>
 +
                       
 
                     </div>
 
                     </div>
−
                </div>
 
−
                <div class="col-5">
 
−
                    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>

Revision as of 17:20, 4 October 2018

A GIFT FROM YOUR GUT

TO YOUR WELL BEING



sponsors

:P