Difference between revisions of "Team:TecMonterrey GDL"

Line 1: Line 1:
 
{{TecMonterrey_GDL}}
 
{{TecMonterrey_GDL}}
 
<html>
 
<html>
    <style>
 
        .home-headers{
 
            font-family: 'Code Caption', sans-serif;
 
        }
 
  
        .home-headers h1{
+
<head>
            color: #a36996;
+
  <meta charset="utf-8">
            text-shadow: 5px 0px 0px #723f66;
+
  <title>TecMonterrey_GDL</title>
            font-size:4vw;
+
            font-weight: 900;
+
            letter-spacing: -5px;
+
            padding-left: 10vw;
+
        }
+
        .home-headers h2{
+
            color:pink;
+
            letter-spacing: -2px;
+
            padding-left: 1rem;
+
            text-shadow: -3px 0px 0px #bb7dab;
+
            font-size: 54px;
+
            font-weight: 900;
+
            padding-top: 3rem;
+
        }
+
  
        .home-headers h3, .home-headers h4, .home-headers h5{
 
            color: rgb(52, 88, 109);
 
            text-align: center;
 
        }
 
  
        .home-headers h3{
+
  <!-- mobile responsive meta -->
            font-weight: 900;
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
            font-size: 70px;
+
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
            letter-spacing: -5px; 
+
        }
+
  
        .home-headers h4{
+
</head>
            font-weight: 100;
+
            font-size: 70px;
+
            letter-spacing: -5px;     
+
        }
+
  
        .home-headers h5{
 
            font-weight: 300;
 
            font-size: 50px;
 
            letter-spacing: -5px;   
 
        }
 
  
        .carousel-inner-text{
+
<body>
            font-family: 'Roboto', sans-serif !important;
+
  <div class="page-wrapper">
            font-size: 22px !important;
+
    <!-- Preloader -->
            text-align: center !important;
+
    <!-- <div class="preloader"></div> -->
            font-weight: 300 !important;
+
    <!-- Preloader -->
            font-style: normal !important;
+
        }
+
  
        .carousel-inner-text.slide2-text1{
 
            position: absolute;
 
            top: 15%;
 
            display: block;
 
            width: 300px;
 
            left: 10%;
 
        }
 
  
        .carousel-inner-text.slide2-text2{
 
            position: absolute;
 
            top: 50%;
 
            left: 30%;
 
            width: 400px;
 
        }
 
  
        .carousel-inner-text.slide3-text1 {
 
            position: relative;
 
            top: 5%;
 
            width: 600px;
 
            left: 1%;
 
        }
 
  
        .carousel-inner-text.slide3-text2 {
 
            position: absolute;
 
            top: 45%;
 
            width: 500px;
 
        }
 
       
 
        .carousel-inner-text.slide4-text1{
 
            position: absolute;
 
            top: 10%;
 
            left: 5%;
 
        }
 
  
        .carousel-inner-text.slide4-text2{
+
<!--Header Upper-->
            position: absolute;
+
            width: 300px;
+
            top: 60%;
+
        }
+
  
        .carousel-inner-text.slide4-text3 {
 
            position: absolute;
 
            width: 250px;
 
            left: 220%;
 
            top: 15%;
 
        }
 
  
        .container-carousel{
+
<!--Main Header-->
             height:100%;
+
<nav class="navbar navbar-default">
        }
+
    <a class="navbar-brand">
+
      <img src="images/logo.png" width="80">
        .vert .carousel-item-next.carousel-item-left,
+
    </a>
        .vert .carousel-item-prev.carousel-item-right {
+
      <div class="container">
            -webkit-transform: translate3d(0, 0, 0);
+
            <!-- Brand and toggle get grouped for better mobile display -->
             transform: translate3d(0, 0, 0);
+
             <div class="navbar-header">
        }
+
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
 +
                        aria-expanded="false">
 +
                        <span class="sr-only">Toggle navigation</span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                        <span class="icon-bar"></span>
 +
                  </button>
 +
            </div>
 +
            <!-- Collect the nav links, forms, and other content for toggling -->
 +
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
              <ul class="nav navbar-nav">
 +
                <li class="active"><a href="index.html">Home<span class="sr-only">(current)</span></a></li>
 +
                <li class="dropdown ">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="projectDescription.html">Description</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="projectAbstract.html">Abstract</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="teamProject.html">Our team</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="attributionsProject.html">Partners</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="checklist.html">Checklist</a></li>
 +
                  </ul>
 +
                </li>
 +
                <li class="dropdown ">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dry labs<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="partsDrylabs.html">Parts</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="constructsDrylabs.html">Constructs</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="mathematicalDrylabs.html">Mathematical model</a></li>
 +
                  </ul>
 +
                </li>
 +
                <li class="dropdown ">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Wet lab<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="interlabWetlab.html">Interlab</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="collaborationsWetlab.html">Collaborations</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="improvementWetlab.html">Improvement</a></li>
 +
                  </ul>
 +
                </li>
 +
                <li class="dropdown ">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human practices<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="timelineHP.html">Timeline</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="publicHP.html">Public engagement</a></li>
 +
                  </ul>
 +
                </li>
 +
                <li class="dropdown ">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Results<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="genericResults.html">Generic engineering</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="bioResults.html">Biomimetric Tri-cultures</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="gutResults.html">Gut on a chip</a></li>
 +
                  </ul>
 +
                </li>
 +
                <li class="dropdown ">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notebook<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="protocolsNotebook.html">Protocols</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="labNotebook.html">Lab agenda</a></li>
 +
                  </ul>
 +
                </li>
 +
                <li class="dropdown ">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">What's next?<span class="caret"></span></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a href="businessWN.html">Business model</a></li>
 +
                    <li role="separator" class="divider"></li>
 +
                    <li><a href="legalWN.html">Legal aspect</a></li>
 +
                  </ul>
 +
                </li>
 +
              </ul>
 +
             </div>
 +
            <!-- /.navbar-collapse -->
 +
      </div>
 +
      <!-- /.container-fluid -->
 +
</nav>
 +
<!--End Main Header -->
  
        .vert .carousel-item-next,
+
<!--=================================
        .vert .active.carousel-item-right {
+
=            Page Slider            =
            -webkit-transform: translate3d(0, 100%, 0);
+
==================================-->
            transform: translate3d(0, 100% 0);
+
<!--====  End of Page Slider  ====-->
        }
+
  
        .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{
+
<!--about section-->
            bottom: 40%!important;
+
<section class="feature-section ">
            flex-direction: column!important;
+
  <center>
            align-items: center;
+
  <img class="img-responsive" src="images/recorridocerebroaintestino.png" alt="service-image">
        }
+
</center>
 +
</section>
 +
<!--End about section-->
  
        .image{
 
            height:100%;
 
            max-width: 100%;
 
        }
 
  
        .conector{
+
<!--footer-main-->
            position:absolute;
+
<footer class="footer-main">
        }
+
  <div class="footer-top">
 +
  <!--PATROCINADORES-->
 +
  <center>
 +
    <img class="sponsor-box"  src="images/sponsors/1.png" alt="service-image">
 +
    <img class="sponsor-box"  src="images/sponsors/2.png" alt="service-image">
 +
    <img class="sponsor-box"  src="images/sponsors/3.png" alt="service-image">
 +
    <img class="sponsor-box"  src="images/sponsors/4.png" alt="service-image">
 +
    <img class="sponsor-box"  src="images/sponsors/5.png" alt="service-image">
 +
    <img class="sponsor-box"  src="images/sponsors/6.png" alt="service-image">
 +
    <img class="sponsor-box"  src="images/sponsors/7.png" alt="service-image">
 +
    <img class="sponsor-box"  src="images/sponsors/8.png" alt="service-image">
 +
  </center>
 +
  </div>
 +
  <div class="footer-bottom">
 +
  <center>
 +
  <p style="color: #ffffff">TecMonterrey_GDL</p>
 +
  <a href="https://www.facebook.com/pg/IGem-2018-Tec-GDL-1844545129181886/about/?ref=page_internal">
 +
    <img width="25px"
 +
    src="data:image/svg+xml;base64,
 +
  PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDkwIDkwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5MCA5MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPgoJPHBhdGggaWQ9IkZhY2Vib29rX194MjhfYWx0X3gyOV8iIGQ9Ik05MCwxNS4wMDFDOTAsNy4xMTksODIuODg0LDAsNzUsMEgxNUM3LjExNiwwLDAsNy4xMTksMCwxNS4wMDF2NTkuOTk4ICAgQzAsODIuODgxLDcuMTE2LDkwLDE1LjAwMSw5MEg0NVY1NkgzNFY0MWgxMXYtNS44NDRDNDUsMjUuMDc3LDUyLjU2OCwxNiw2MS44NzUsMTZINzR2MTVINjEuODc1QzYwLjU0OCwzMSw1OSwzMi42MTEsNTksMzUuMDI0VjQxICAgaDE1djE1SDU5djM0aDE2YzcuODg0LDAsMTUtNy4xMTksMTUtMTUuMDAxVjE1LjAwMXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiNmZmZmZmYiPjwvcGF0aD4KPC9nPjwvZz4gPC9zdmc+" />
 +
  </a>
  
        .conector.slide2-conector1 {
+
<a href="https://www.instagram.com/igem2018_tecgdl/">
            left: 60%;
+
  <img width="25px" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48Zz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zNjMuMjczLDBIMTQ4LjcyOEM2Ni43MTksMCwwLDY2LjcxOSwwLDE0OC43Mjh2MjE0LjU0NEMwLDQ0NS4yODEsNjYuNzE5LDUxMiwxNDguNzI4LDUxMmgyMTQuNTQ0ICAgIEM0NDUuMjgxLDUxMiw1MTIsNDQ1LjI4MSw1MTIsMzYzLjI3M1YxNDguNzI4QzUxMiw2Ni43MTksNDQ1LjI4MSwwLDM2My4yNzMsMHogTTQ3MiwzNjMuMjcyQzQ3Miw0MjMuMjI1LDQyMy4yMjUsNDcyLDM2My4yNzMsNDcyICAgIEgxNDguNzI4Qzg4Ljc3NSw0NzIsNDAsNDIzLjIyNSw0MCwzNjMuMjczVjE0OC43MjhDNDAsODguNzc1LDg4Ljc3NSw0MCwxNDguNzI4LDQwaDIxNC41NDRDNDIzLjIyNSw0MCw0NzIsODguNzc1LDQ3MiwxNDguNzI4ICAgIFYzNjMuMjcyeiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iI2ZmZmZmZiI+PC9wYXRoPgoJPC9nPgo8L2c+PGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMjU2LDExOGMtNzYuMDk0LDAtMTM4LDYxLjkwNi0xMzgsMTM4czYxLjkwNiwxMzgsMTM4LDEzOHMxMzgtNjEuOTA2LDEzOC0xMzhTMzMyLjA5NCwxMTgsMjU2LDExOHogTTI1NiwzNTQgICAgYy01NC4wMzcsMC05OC00My45NjMtOTgtOThzNDMuOTYzLTk4LDk4LTk4czk4LDQzLjk2Myw5OCw5OFMzMTAuMDM3LDM1NCwyNTYsMzU0eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iI2ZmZmZmZiI+PC9wYXRoPgoJPC9nPgo8L2c+PGc+Cgk8Zz4KCQk8Y2lyY2xlIGN4PSIzOTYiIGN5PSIxMTYiIHI9IjIwIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiNGRkZGRkYiIGRhdGEtb2xkX2NvbG9yPSIjZmZmZmZmIj48L2NpcmNsZT4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+" />
            top: 22%;
+
</a>
            width: 23em;
+
        }
+
  
        .conector.slide2-conector2 {
+
<a href="https://twitter.com/teamtecgdl?lang=es">
            top: 65%;
+
  <img width="25px"
            left: 95%;
+
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDQzOC41MzYgNDM4LjUzNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUzNiA0MzguNTM2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+Cgk8cGF0aCBkPSJNNDE0LjQxLDI0LjEyM0MzOTguMzMzLDguMDQyLDM3OC45NjMsMCwzNTYuMzE1LDBIODIuMjI4QzU5LjU4LDAsNDAuMjEsOC4wNDIsMjQuMTI2LDI0LjEyMyAgIEM4LjA0NSw0MC4yMDcsMC4wMDMsNTkuNTc2LDAuMDAzLDgyLjIyNXYyNzQuMDg0YzAsMjIuNjQ3LDguMDQyLDQyLjAxOCwyNC4xMjMsNTguMTAyYzE2LjA4NCwxNi4wODQsMzUuNDU0LDI0LjEyNiw1OC4xMDIsMjQuMTI2ICAgaDI3NC4wODRjMjIuNjQ4LDAsNDIuMDE4LTguMDQyLDU4LjA5NS0yNC4xMjZjMTYuMDg0LTE2LjA4NCwyNC4xMjYtMzUuNDU0LDI0LjEyNi01OC4xMDJWODIuMjI1ICAgQzQzOC41MzIsNTkuNTc2LDQzMC40OSw0MC4yMDQsNDE0LjQxLDI0LjEyM3ogTTMzNS40NzEsMTY4LjczNWMwLjE5MSwxLjcxMywwLjI4OCw0LjI3OCwwLjI4OCw3LjcxICAgYzAsMTUuOTg5LTIuMzM0LDMyLjAyNS02Ljk5NSw0OC4xMDRjLTQuNjYxLDE2LjA4Ny0xMS44LDMxLjUwNC0yMS40MTYsNDYuMjU0Yy05LjYwNiwxNC43NDktMjEuMDc0LDI3Ljc5MS0zNC4zOTYsMzkuMTE1ICAgYy0xMy4zMjUsMTEuMzItMjkuMzExLDIwLjM2NS00Ny45NjgsMjcuMTE3Yy0xOC42NDgsNi43NjItMzguNjM3LDEwLjE0My01OS45NTMsMTAuMTQzYy0zMy4xMTYsMC02My43Ni04Ljk1Mi05MS45MzEtMjYuODM2ICAgYzQuNTY4LDAuNTY4LDkuMzI5LDAuODU1LDE0LjI3NSwwLjg1NWMyNy42LDAsNTIuNDM5LTguNTY1LDc0LjUxOS0yNS43Yy0xMi45NDEtMC4xODUtMjQuNTA2LTQuMTc5LTM0LjY4OC0xMS45OTEgICBjLTEwLjE4NS03LjgwMy0xNy4yNzMtMTcuNjk5LTIxLjI3MS0yOS42OTFjNC45NDcsMC43Niw4LjY1OCwxLjEzNywxMS4xMzIsMS4xMzdjNC4xODcsMCw5LjA0Mi0wLjc2LDE0LjU2LTIuMjc5ICAgYy0xMy44OTQtMi42NjktMjUuNTk4LTkuNTYyLTM1LjExNS0yMC42OTdjLTkuNTE5LTExLjEzNi0xNC4yNzctMjMuODQtMTQuMjc3LTM4LjExNHYtMC41NzEgICBjMTAuMDg1LDQuNzU1LDE5LjYwMiw3LjIyOSwyOC41NDksNy40MjJjLTE3LjMyMS0xMS42MTMtMjUuOTgxLTI4LjI2NS0yNS45ODEtNDkuOTYzYzAtMTAuNjYsMi43NTgtMjAuNzQ3LDguMjc4LTMwLjI2NCAgIGMxNS4wMzUsMTguNDY0LDMzLjMxMSwzMy4yMTMsNTQuODE2LDQ0LjI1MmMyMS41MDcsMTEuMDM4LDQ0LjU0LDE3LjIyNyw2OS4wOTIsMTguNTU4Yy0wLjk1LTMuNjE2LTEuNDI3LTguMTg2LTEuNDI3LTEzLjcwNCAgIGMwLTE2LjU2Miw1Ljg1My0zMC42OTIsMTcuNTYtNDIuMzk5YzExLjcwMy0xMS43MDYsMjUuODM3LTE3LjU2MSw0Mi4zOTQtMTcuNTYxYzE3LjUxNSwwLDMyLjA3OSw2LjI4Myw0My42ODgsMTguODQ2ICAgYzEzLjEzNC0yLjQ3NCwyNS44OTItNy4zMywzOC4yNi0xNC41NmMtNC43NTcsMTQuNjUyLTEzLjYxMywyNS43ODgtMjYuNTUsMzMuNDAyYzEyLjM2OC0xLjcxNiwyMy44OC00Ljk1LDM0LjUzNy05LjcwOCAgIEMzNTcuNDU4LDE0OS43OTMsMzQ3LjQ2MiwxNjAuMTY2LDMzNS40NzEsMTY4LjczNXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiNmZmZmZmYiPjwvcGF0aD4KPC9nPjwvZz4gPC9zdmc+" />
            width: 9.5em;
+
        }
+
  
        .conector.slide3-conector1 {
+
</a>
            width: 9em;
+
</center>
            left: 110%;
+
</div>
            top: 12%;
+
        }
+
  
        .conector.slide3-conector2{
+
</footer>
            top:70%;
+
<!--End footer-main-->
            left: 85%;
+
            width: 11em;
+
        }
+
  
        .conector.slide4-conector1{
+
</div>
            top:25%;
+
<!--End pagewrapper-->
            left:105%;
+
</body>
            width:7em;
+
        }
+
  
        .conector.slide4-conector2{
 
            top:70%;
 
            left:90%;
 
            width:7em;
 
        }
 
 
        .row{
 
            height: 27.7em;
 
        }
 
 
        .cool-container{
 
            border-style: solid;
 
            border-width: 2px;
 
            border-color: rgb(129, 165, 151);
 
            background-color:white;
 
            margin-top: 2em;
 
            height: 28em;
 
            padding: 0;
 
            width: 100%;
 
            overflow-x: hidden;
 
            overflow-y: auto;
 
            position: relative;
 
        }
 
        .cool-wrapper{
 
            padding-top: 3em;
 
            min-height: 100%;
 
            width: 100%;
 
        }
 
 
 
    </style>
 
 
<!-- Uncomment these next lines if you want to work with this page -->
 
<!-- Comment them if you want to upload the code to the wiki-->
 
<!-- <head>
 
        <script
 
        src="https://code.jquery.com/jquery-3.3.1.min.js"
 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 
        crossorigin="anonymous"></script>
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 
    <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">
 
    <link href="https://fonts.googleapis.com/css?family=Coda+Caption:800|Roboto:100" rel="stylesheet">
 
</head>  -->
 
 
<div class="container">
 
    <div class="home-headers smart-headers">
 
        <h2>A GIFT FROM YOUR GUT</h2>
 
        <h1>TO YOUR WELL BEING</h1>
 
    </div>
 
    <div class="cool-container">
 
            <div class="cool-wrapper" style="padding:0!important;">
 
            <div class="container-carousel">
 
                <div id="carouselControls" class="carousel vert slide" data-ride="carousel" data-interval="9000">
 
                    <div class="row" style="margin:0px;">
 
                            <div class="col-11">
 
                                <div class="carousel-inner">
 
                                    <div class="carousel-item active">
 
                                        <div class="row">
 
                                            <div class="col-3" style="display:flex;justify-content:center;align-items:center;">
 
                                                <div class="home-headers">
 
                                                        <h5>it all starts</h5>
 
                                                        <h4>in your</h4>
 
                                                        <h3>BRAIN</h3>
 
                                                </div>
 
                                            </div>
 
                                            <div class="col-5" style="display:flex;justify-content:center;align-items:center;">
 
                                                <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" style="display:flex;justify-content:center;align-items:flex-end;">
 
                                                <img class="image" src="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>
 
                                               
 
                                                <img class="conector slide2-conector1" src="https://static.igem.org/mediawiki/2018/6/6f/T--TecMonterrey_GDL--Conector1.png" alt="conector">
 
                                               
 
                                                <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>
 
 
                                                <img class="conector slide2-conector2" src="https://static.igem.org/mediawiki/2018/e/eb/T--TecMonterrey_GDL--conector2.png" alt="conector">
 
 
                                            </div>
 
                                            <div class="col-4" style="display:flex;justify-content:center;align-items:flex-start;">
 
                                                <img class="image" src="https://static.igem.org/mediawiki/2018/0/09/T--TecMonterrey_GDL--intestino1.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>
 
                                                    <img class="conector slide3-conector1" src="https://static.igem.org/mediawiki/2018/9/9a/T--TecMonterrey_GDL--conector5.png" alt="conector">
 
                                                <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>
 
 
                                                <img class="conector slide3-conector2" src="https://static.igem.org/mediawiki/2018/e/eb/T--TecMonterrey_GDL--conector2.png" alt="conector">
 
 
                                            </div>
 
                                           
 
                                            <div class="col-5">
 
                                                <img class="image" src="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-4" style="overflow:visible;">
 
                                                <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>
 
 
                                                <img class="conector slide4-conector1" src="https://static.igem.org/mediawiki/2018/e/eb/T--TecMonterrey_GDL--conector2.png" alt="conector">
 
 
                                                <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>
 
 
                                                <img class="conector slide4-conector2" src="https://static.igem.org/mediawiki/2018/e/eb/T--TecMonterrey_GDL--conector2.png" alt="conector">
 
 
                                                <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 class="col-5 image">
 
                                                <img class="image"  src="https://static.igem.org/mediawiki/2018/2/22/T--TecMonterrey_GDL--intestino2.png">
 
                                            </div>
 
                                           
 
                                            </div>
 
 
                                            <div class="col-2" style="overflow:visible;">
 
                                            </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 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>
 
        </div>
 
    </div>
 
</div>
 
<br>
 
<br>
 
 
</html>
 
</html>
 
{{TecMonterrey_GDL/Footer}}
 

Revision as of 06:36, 17 October 2018