Difference between revisions of "Team:Tec-Monterrey/sandboxDavid"

Line 18: Line 18:
 
         <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
         <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
         <style>
 
         <style>
−
             /****************************************  
+
             /**************************************** Clear the default wiki settings *********************************/
−
            Clear the default wiki settings *********************************/
+
    #home_logo, #sideMenu {
−
           
+
        display:none;
−
           
+
    }
−
           
+
    #sideMenu, #top_title, .patrollink  {
−
            /*** Custom scrollbar ***/  
+
        display:none;
−
            html {
+
    }
−
                overflow: auto;
+
    #content, #HQ_page {
−
                overflow-x: hidden;
+
        width: 100%;
−
            }
+
        padding: 0;
−
            ::-webkit-scrollbar {
+
        margin: 0;
−
                background: #cccccc;
+
        background-color: white;
−
            }
+
        font-size: 100% !important;
−
            ::-webkit-scrollbar-thumb {
+
    }
−
                background: #103010;
+
    #content {
−
            }
+
        margin-top: -16px;
−
            ::-webkit-scrollbar-thumb:hover{
+
    }
−
                background: #155015;
+
    #globalWrapper, #content, #HQ_page, #bodyContent, #mw-content-text{
−
            }
+
    height: 100%;
−
                #home_logo, #sideMenu {
+
    }
−
                display:none;
+
/*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/
−
                }
+
    #top_menu_14 {
−
                #sideMenu, #top_title, .patrollink  {
+
        box-sizing: initial;
−
                display:none;
+
    }
−
                }
+
    td a{
−
                #content, #HQ_page {
+
        padding-right: 0px !important;
−
                    width: 100%;
+
    }
−
                    padding: 0;
+
    #globalWrapper{
−
                    margin: 0;
+
        padding-bottom: 0;
−
                    background-color: white;
+
    }
−
                }
+
/*****************************************************custom css*****************************************************/
−
            /*Bootstrap.min altered the way the top menu looks by changing box-sizing: from border-box to initial, the damage is undone*/
+
   
−
                #top_menu_14 {
+
    @font-face{
−
                    box-sizing: initial;
+
        font-family: "Norwester";
−
                }  
+
        src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype');
 +
    }
 +
    @font-face{
 +
        font-family: "Montserrat";
 +
        src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
 +
    }
 +
    @font-face{
 +
        font-family: "DosisRegular";
 +
        src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype');
 +
    }
 +
    body, html {
 +
        width: 100%;
 +
        height: 100%;
 +
    }
 +
    body {
 +
        font-family: "DosisRegular", sans-serif !important;
 +
    }
 +
    ul{
 +
        margin: 0 !important;
 +
    }
 +
    h1, h2, h3, h4, h5, h6 {
 +
        font-weight: 700;
 +
        padding: 0 0 0 0;
 +
        margin: 0 0 0 0;
 +
    }
 +
    .text-faded {
 +
        color: rgba(255, 255, 255, 0.7);
 +
    }
 +
    .header-top {
 +
        height: 70%;
 +
        width: 100%;
 +
        position: relative;
 +
        background: rgb(248,247,246);
 +
    }
 +
    .header-bottom {
 +
        height: 30%;
 +
        position: relative;
 +
        background: white;
 +
        padding: 10px 0px 10px 10px;
 +
        margin: 0px 0px 0px 0px;"
 +
    }
 +
    .div-header-bottom {
 +
        padding:5px 0px 10px 10px;
 +
        border-left: 20px solid #2f6361;
 +
    }
 +
    .header-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        text-align: left !important;
 +
        font-size: 520% !important;
 +
        font-weight: 700 !important;
 +
        line-height: 1em !important;
 +
        padding-bottom: 0;
 +
        margin-bottom: -5px;
 +
        color: #3582d2;
 +
    }
 +
    .header-subtitle {
 +
        font-family: "Montserrat", monospace;
 +
        text-align: left !important;
 +
        font-size: 210% !important;
 +
        font-weight: 600 !important;
 +
        line-height: 1em !important;
 +
        padding-bottom: 5px;
 +
        color: #5da565;
 +
    }
 +
    .body-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        font-size: 65px !important;
 +
        font-weight: 600 !important;
 +
        line-height: 65px !important;
 +
        padding: 10px 0 10px 0;
 +
        text-align: center;
 +
    }
 +
    .body-title h1 {
 +
        margin: 0 !important;
 +
    }
 +
    .body-subtitle {
 +
        font-family: "Montserrat", monospace !important;
 +
        font-size: 25px !important;
 +
        font-weight: 400 !important;
 +
        line-height: 25px !important;
 +
    }
 +
    .scroll-to-top {
 +
        position: fixed;
 +
        right: 10px;
 +
        bottom: 10px;
 +
        display: none;
 +
        width: 50px;
 +
        height: 50px;
 +
        text-align: center;
 +
        color: white !important;
 +
        background: rgba(52, 58, 64, 0.5);
 +
        line-height: 45px;
 +
    }
 +
    .scroll-to-top:focus, .scroll-to-top:hover {
 +
        color: white !important;
 +
    }
 +
    .scroll-to-top:hover {
 +
        background: #343a40;
 +
    }
 +
    .scroll-to-top i {
 +
        font-weight: 800;
 +
    }
 +
    .hide {
 +
        display: none;
 +
    }
 +
    .footer {
 +
        padding-top: 1rem;
 +
        padding-bottom: 1rem;
 +
        background: #404040;
 +
    }
 +
    #footerCopyright{
 +
        text-align: center !important;
 +
    }
 +
    .social-link {
 +
        color: #6c757d;
 +
    }
 +
    .social-link:hover {
 +
        color: #eeeeee;
 +
    }
 
              
 
              
 
             /**** Footer ****/
 
             /**** Footer ****/
Line 92: Line 213:
 
<html lang="en">
 
<html lang="en">
 
     <head>
 
     <head>
 +
        <link rel="stylesheet" type="text/css" href="main.css">
 +
       
 +
 
         <style>
 
         <style>
−
              /*Override iGem default wiki settings */
+
 
 +
 
 +
/*Override iGem default wiki settings */
 
#home_logo, #sideMenu {
 
#home_logo, #sideMenu {
 
     display:none;
 
     display:none;
Line 108: Line 234:
  
  
−
/**** custom css   ****/
+
/*****************************************************custom css*****************************************************/
−
body, html {
+
   
−
     width: 100%;
+
    @font-face{
−
     height: 100%;
+
        font-family: "Norwester";
−
}
+
        src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'),
−
body {
+
            url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype');
−
     font-family:sans-serif;
+
    }
−
}
+
    @font-face{
 +
        font-family: "Montserrat";
 +
        src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
 +
    }
 +
    @font-face{
 +
        font-family: "DosisRegular";
 +
        src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype');
 +
    }
 +
    body, html {
 +
        width: 100%;
 +
        height: 100%;
 +
     }
 +
    body {
 +
        font-family: "DosisRegular", sans-serif !important;
 +
    }
 +
    ul{
 +
        margin: 0 !important;
 +
    }
 +
    h1, h2, h3, h4, h5, h6 {
 +
        font-weight: 700;
 +
        padding: 0 0 0 0;
 +
        margin: 0 0 0 0;
 +
    }
 +
    .text-faded {
 +
        color: rgba(255, 255, 255, 0.7);
 +
    }
 +
    .masthead {
 +
        height: 100%;
 +
        width: 100%;
 +
     }
 +
    .header-top {
 +
        height: 70%;
 +
        width: 100%;
 +
        position: relative;
 +
        background: rgb(248,247,246);
 +
    }
 +
    .header-bottom {
 +
        height: 30%;
 +
        position: relative;
 +
        background: white;
 +
        padding: 10px 0px 10px 10px;
 +
        margin: 0px 0px 0px 0px;"
 +
     }
 +
    .div-header-bottom {
 +
        padding:5px 0px 10px 10px;
 +
        border-left: 20px solid #2f6361;
 +
    }
 +
    .header-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        text-align: left !important;
 +
        font-size: 5em !important;
 +
        font-weight: 700 !important;
 +
        line-height: 1em !important;
 +
        padding-bottom: 0;
 +
        margin-bottom: -5px;
 +
        color: #3582d2;
 +
    }
 +
    .header-subtitle {
 +
        font-family: "Montserrat", monospace;
 +
        text-align: left !important;
 +
        font-size: 2em !important;
 +
        font-weight: 600 !important;
 +
        line-height: 1em !important;
 +
        padding-bottom: 5px;
 +
        color: #5da565;
 +
    }
 +
    .body-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        font-size: 65px !important;
 +
        font-weight: 600 !important;
 +
        line-height: 65px !important;
 +
        padding: 5px 0 0 5px;
 +
        text-align: center;
 +
    }
 +
    .body-title h1 {
 +
        margin: 0 !important;
 +
    }
 +
    .body-subtitle {
 +
        font-family: "Montserrat", monospace !important;
 +
        font-size: 25px !important;
 +
        font-weight: 400 !important;
 +
        line-height: 25px !important;
 +
    }
 +
    .scroll-to-top {
 +
        position: fixed;
 +
        right: 10px;
 +
        bottom: 10px;
 +
        display: none;
 +
        width: 50px;
 +
        height: 50px;
 +
        text-align: center;
 +
        color: white !important;
 +
        background: rgba(52, 58, 64, 0.5);
 +
        line-height: 45px;
 +
    }
 +
    .scroll-to-top:focus, .scroll-to-top:hover {
 +
        color: white !important;
 +
    }
 +
    .scroll-to-top:hover {
 +
        background: #343a40;
 +
    }
 +
    .scroll-to-top i {
 +
        font-weight: 800;
 +
    }
 +
    .hide {
 +
        display: none;
 +
    }
 +
    .footer {
 +
        padding-top: 1rem;
 +
        padding-bottom: 1rem;
 +
        background: #404040;
 +
    }
 +
    #footerCopyright{
 +
        text-align: center !important;
 +
    }
 +
    .social-link {
 +
        color: #6c757d;
 +
    }
 +
    .social-link:hover {
 +
        color: #eeeeee;
 +
    }
  
−
ul{
 
−
    margin: 0 !important;
 
−
}
 
−
.btn-xl {
 
−
    padding: 1.25rem 2.5rem;
 
−
}
 
  
−
h1, h2, h3, h4, h5, h6 {
 
−
    font-weight: 700;
 
−
}
 
−
.text-faded {
 
−
    color: rgba(255, 255, 255, 0.7);
 
−
}
 
−
 
−
ul {
 
−
    margin:0;
 
−
}
 
−
.scroll-to-top {
 
−
    position: fixed;
 
−
    right: 10px;
 
−
    bottom: 10px;
 
−
    display: none;
 
−
    width: 50px;
 
−
    height: 50px;
 
−
    text-align: center;
 
−
    color: white;
 
−
    background: rgba(52, 58, 64, 0.5);
 
−
    line-height: 45px;
 
−
}
 
−
 
−
.scroll-to-top:focus, .scroll-to-top:hover {
 
−
    color: white;
 
−
}
 
−
 
−
.scroll-to-top:hover {
 
−
    background: #343a40;
 
−
}
 
  
−
.scroll-to-top i {
 
−
    font-weight: 800;
 
−
}           
 
  
 
/**** NAVBAR ****/
 
/**** NAVBAR ****/
 
.masthead {
 
.masthead {
 
     position: fixed;
 
     position: fixed;
−
     top: 20px;
+
     top: 18px;
 
     z-index: 2;
 
     z-index: 2;
 
     height: 60px;
 
     height: 60px;
Line 179: Line 388:
 
#navContainer {
 
#navContainer {
 
     z-index: 2;
 
     z-index: 2;
−
     top:20px;
+
     top: 18px;
 
     height: 60px;
 
     height: 60px;
 
     width: 80%;
 
     width: 80%;
Line 185: Line 394:
 
     position: fixed;
 
     position: fixed;
 
     background-color: rgba(0,0,0,0);
 
     background-color: rgba(0,0,0,0);
 +
    color: #fff;
 
}
 
}
  
−
.nav-link {
+
#navContainer:a {
−
     height: 100%;
+
     color: #fff;
−
    width: 150px;
+
−
    position: relative;
+
−
    float: left;
+
 
}
 
}
  
Line 203: Line 410:
 
     text-align: center;
 
     text-align: center;
 
     vertical-align: middle;
 
     vertical-align: middle;
−
}
 
−
 
−
.navbar-linkContainer:hover {
 
−
    background-color: aquamarine;
 
 
}
 
}
  
 
.collapsedMenu {
 
.collapsedMenu {
−
     top: 20px;
+
     top: 18px;
 
     position: fixed;
 
     position: fixed;
 
     z-index: 1;
 
     z-index: 1;
Line 229: Line 432:
  
 
#intro {
 
#intro {
−
    top: 20;
 
 
     position: relative;
 
     position: relative;
 
     width: 100%;
 
     width: 100%;
Line 265: Line 467:
  
 
/*** INTRO ENDS ***/
 
/*** INTRO ENDS ***/
 +
 +
 +
 +
#globalWrapper {
 +
  background: rgb(248,247,246);   
 +
}
 +
#myImage {
 +
    position:absolute;
 +
    top: 0;
 +
    right: 0;
 +
    max-width: 100%;
 +
}
 +
.masthead h1 {
 +
  font-size: 4rem;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
@media (min-width: 992px) {
 +
  .masthead {
 +
    height: 100vh;
 +
  }
 +
  .masthead h1 {
 +
    font-size: 5.5rem;
 +
  }
 +
}
 +
#project {
 +
    -webkit-transition: height 4s;
 +
  -moz-transition: height 4s;
 +
  -ms-transition: height 4s;
 +
  -o-transition: height 4s;
 +
    transition: height 4s;
 +
    height: auto;
 +
    background-image: url('/img/logoOficialCirculos.png');
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: contain;
 +
    text-align: center;
 +
}
 +
#team {
 +
  text-align: center;
 +
}
 +
#myTable{
 +
    width: 95%;
 +
    margin: 0px auto !important;
 +
    padding: 10px;
 +
    border: 2px solid rgb(1,99,60) !important;
 +
    border-collapse: collapse;
 +
    vertical-align: middle !important;
 +
    table-layout: fixed;
 +
}
 +
#myTable td{
 +
width: 33%;
 +
border: 2px solid rgb(1,99,60) !important;
 +
border-collapse: collapse;
 +
text-align: center;
 +
padding: 5px;
 +
}
 +
 +
#myTable p {
 +
text-align:center;
 +
font-size: 14px;
 +
}
 +
 +
#HP{
 +
background: rgb(248,247,246);
 +
}
 +
 +
.service-icon {
 +
  background-color: #fff;
 +
  color: #1D809F;
 +
  height: 7rem;
 +
  width: 7rem;
 +
  display: block;
 +
  line-height: 7.5rem;
 +
  font-size: 2.25rem;
 +
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
 +
}
 +
 +
.callout {
 +
  padding: 15rem 0;
 +
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
 +
  background-position: center center;
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
}
 +
 +
.callout h2 {
 +
  font-size: 3.5rem;
 +
  font-weight: 700;
 +
  display: block;
 +
  max-width: 30rem;
 +
}
 +
 +
.portfolio-item {
 +
  display: block;
 +
  position: relative;
 +
  overflow: hidden;
 +
  max-width: 530px;
 +
  margin: auto auto 1rem;
 +
}
 +
 +
.portfolio-item .caption {
 +
  display: flex;
 +
  height: 100%;
 +
  width: 100%;
 +
  background-color: rgba(33, 37, 41, 0.2);
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  z-index: 1;
 +
}
 +
 +
.portfolio-item .caption .caption-content {
 +
  color: #fff;
 +
  margin: auto 2rem 2rem;
 +
}
 +
 +
.portfolio-item .caption .caption-content h2 {
 +
  font-size: 0.8rem;
 +
  text-transform: uppercase;
 +
}
  
 
#project {
 
#project {
Line 423: Line 746:
  
 
/**** CSS ? ****/
 
/**** CSS ? ****/
−
a {
 
−
  color: #1D809F;
 
−
}
 
−
 
−
a:hover, a:focus, a:active {
 
−
  color: #155d74;
 
−
}
 
  
 
.btn-primary {
 
.btn-primary {
Line 552: Line 868:
 
     display: none;
 
     display: none;
 
}
 
}
−
        </style>
+
      </style>
 +
    </head>
 +
    <body id="page-top">   
 
          
 
          
−
    </head>
 
−
    <body id="page-top">
 
−
     
 
 
         <!-- Header/NavBar-->
 
         <!-- Header/NavBar-->
 
         <header class="masthead d-flex">
 
         <header class="masthead d-flex">
Line 564: Line 879:
 
                         <div class="container navbar-linkContainer" id="linkContainer_Project">
 
                         <div class="container navbar-linkContainer" id="linkContainer_Project">
 
                             <span>Project</span>
 
                             <span>Project</span>
−
                            <a href="#collapseProject"></a>
 
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
−
                     <a href="#collapseParts" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseParts">
+
                     <a href="#collapseParts">  
−
                         <div class="container navbar-linkContainer">  
+
                         <div class="container navbar-linkContainer" id="linkContainer_Parts">  
 
                             <span>Parts</span>
 
                             <span>Parts</span>
−
                            <a href="#collapseParts"></a>
 
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
−
                     <a href="#collapsePeople" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapsePeople">
+
                     <a href="#collapsePeople">  
−
                         <div class="container navbar-linkContainer">
+
                         <div class="container navbar-linkContainer" id="linkContainer_People">
 
                             <span>People</span>
 
                             <span>People</span>
−
                            <a href="#collapsePeople"></a>
 
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
−
                     <a href="#collapseHP" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseHP">
+
                     <a href="#collapseHP">  
−
                         <div class="container navbar-linkContainer">
+
                         <div class="container navbar-linkContainer" id="linkContainer_HP">
 
                             <span>Human Practices</span>
 
                             <span>Human Practices</span>
−
                            <a href="#collapseHP"></a>
 
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
−
                     <a href="#collapseModeling" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseModeling">
+
                     <a href="#collapseModeling">  
−
                         <div class="container navbar-linkContainer">
+
                         <div class="container navbar-linkContainer" id="linkContainer_Modeling">
 
                             <span>Modeling</span>
 
                             <span>Modeling</span>
−
                            <a href="#collapseModeling"></a>
 
 
                         </div>
 
                         </div>
 
                     </a>
 
                     </a>
Line 801: Line 1,111:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
           
 
 
              
 
              
 
         </header>
 
         </header>
Line 824: Line 1,133:
  
 
             <!-- Project -->
 
             <!-- Project -->
−
             <section id="project" style="background: #eeeeee;">
+
             <section id="project" style="background: #d3edf2; text-align: center;">
−
              <div class="container text-center">
+
                <div style="width: 80%; margin: auto; text-align: justify; background: #f2fafc;">
−
                <div class="row" id="projectDescription">
+
                    <div style="width: 96%; margin: auto; text-align: justify; background: #fdfdfd; padding-top: 10px;">
−
                  <div class="col-lg-10 mx-auto">
+
                        <div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;">
−
                    <h2>E-Coding</h2>
+
                            <div class="header-title" style="color: #3582d2;">
−
                    <p class="lead mb-5">Description of the project</p>
+
                                E-Coding
−
                  </div>
+
                            </div>
 +
                            <div class="header-subtitle" style="color: #5da565;">
 +
                                Storing the world one base at a time
 +
                            </div>
 +
                        </div>
 +
                        <div style="border-top: 5px solid #397471; border-right: 5px solid #2a8481; padding: 20px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
 +
                            The research for storing vast amounts of information in smaller devices has been an attention seeking topic in multidisciplinary areas of knowledge all around the world.
 +
                            <br>
 +
                            <br>
 +
                            <q>DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer</q> <br> Baum, 1995
 +
                        </div>
 +
                        <div style="padding: 0px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
 +
                            Nevertheless, this potential has been limited due to the lack of efficient editing tools. CRISPR-Cas has become popular as an editing tool for its high specificity, low cost, and easy handling, compared to other editing techniques. In our work, we use Cas1-Cas2, proteins in charge of new protospacer adquisition in the CRISPR array. Predesigned sequences (-70pb aprox) in the form of ssDNA are produced in E.coli by induction of a promoter, and adquired by the complex Cas1-Cas2 to be integrated into the array. To produce this oligonucleotides, we use the retrotranscriptase EC86. A subsequent sequencing of the array will confirm the integration of the oligos in the CRISPR locus. We measure the integration rate in terms of stimuli intensity, and time. We hypothise that this system can store ordered data in vivo of many stimuli, just by changing the promoter.
 +
                        </div>
 +
                    </div>
 
                 </div>
 
                 </div>
−
                    <a class="btn btn-dark btn-xl" href="#team" id="btnKnowTeam">Know the team</a>
 
−
              </div>
 
 
             </section>
 
             </section>
  
 
             <!-- Team-->
 
             <!-- Team-->
−
             <section class="bg-primary text-white text-center" id="team">
+
             <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;">
−
              <div class="container-multiple-items">
+
            <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;">
−
                <div>
+
            <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;">
−
                  <h3 class="text-secondary mb-0">Learn about us</h3>
+
            <div>
−
                  <h2 class="mb-5">TEAM</h2>
+
            <table align="center" id="myTable">
−
                </div>
+
            <tr>
−
                <div class="row">
+
            <th colspan="3" style="text-align:center;"><h5>Team Members</h5></th>
−
                  <div class="profile-picture">
+
            </tr>
−
                    <span class="service-icon rounded-circle mx-auto mb-3">
+
            <tr>
−
                        <img class="img-fluid" src="img/portfolio-4.jpg" style="border-radius: 50px;">
+
            <td>
−
                    </span>
+
            <h6>Esteban de la Peña <a href="https://www.linkedin.com/in/esteban-de-la-pe%C3%B1a-th%C3%A9venet/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
                    <h4>
+
            <p>In charge of making the wiki</p>
−
                      <strong>Leader 1</strong>
+
            </td>
−
                    </h4>
+
            <td>
−
                    <p class="text-faded mb-0">Name 1</p>
+
            <h6>Alan Ávila <a href="https://www.linkedin.com/in/alanavilarmz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>  
−
                  </div>
+
            <p>Team Management/Wet Lab</p>
−
                  <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
+
            </td>
−
                    <span class="service-icon rounded-circle mx-auto mb-3">
+
            <td>
−
                      <i class="icon-pencil"></i>
+
            <h6>Adrián Hernández <a href= "https://www.linkedin.com/in/adri%C3%A1n-hern%C3%A1ndez-mendoza-0184ba14b/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
                    </span>
+
            <p>Interlab managment & Dry Lab</p>
−
                    <h4>
+
            </td>
−
                      <strong>Redesigned</strong>
+
            </tr>
−
                    </h4>
+
            <tr>
−
                    <p class="text-faded mb-0">Freshly redesigned for Bootstrap 4.</p>
+
            <td>
−
                  </div>
+
            <h6>Sofia Lara <a href= "https://www.linkedin.com/in/sof%C3%ADa-lara-507773123" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
                  <div class="col-lg-3 col-md-6 mb-5 mb-md-0">
+
            <p>In charge of Human Practices</p>
−
                    <span class="service-icon rounded-circle mx-auto mb-3">
+
            </td>
−
                      <i class="icon-like"></i>
+
            <td>
−
                    </span>
+
            <h6>José Arnulfo Juárez Figueroa <a href= "https://www.linkedin.com/in/jos%C3%A9-arnulfo-ju%C3%A1rez-figueroa-1478a1159/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
                    <h4>
+
            <p>Team Management</p>
−
                      <strong>Favorited</strong>
+
            </td>
−
                    </h4>
+
            <td>
−
                    <p class="text-faded mb-0">Millions of users
+
            <h6>Ana E. Lasso de la Vega <a href= "https://www.linkedin.com/in/ana-elizabeth-ldlv/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
                      <i class="fa fa-heart"></i>
+
            <p>Team Management</p>
−
                      Start Bootstrap!</p>
+
            </td>
−
                  </div>
+
            </tr>
−
                  <div class="col-lg-3 col-md-6">
+
            <tr>
−
                    <span class="service-icon rounded-circle mx-auto mb-3">
+
            <td>
−
                      <i class="icon-mustache"></i>
+
            <h6>Miranda Iriarte <a href= "https://www.linkedin.com/in/mirandairiarte/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
                    </span>
+
            <p>Congress of Sciences iGEM</p>
−
                    <h4>
+
            </td>
−
                      <strong>Question</strong>
+
            <td>
−
                    </h4>
+
            <h6>Valeria Fuentes</h6>
−
                    <p class="text-faded mb-0">I mustache you a question...</p>
+
            <p>Congress of Sciences iGEM</p>
−
                  </div>
+
            </td>
−
                </div>
+
            <td>
−
              </div>
+
            <h6>Juan Fernández <a href= "https://www.linkedin.com/in/juanfernandezdelagarza/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
             </section>
+
            <p>Mathematical Model</p>
−
 
+
            </td>
−
             <!-- Callout -->
+
            </tr>
−
             <section class="callout">
+
            <tr>
−
              <div class="container text-center">
+
            <td>
−
                <h2 class="mx-auto mb-5">Welcome to
+
            <h6>Norma Garza <a href= "https://www.linkedin.com/in/norma-garza-893065126/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
−
                  <em>your</em>
+
            <p>Interlab managment/Drylab</p>
−
                  next website!</h2>
+
            </td>
−
                <a class="btn btn-primary btn-xl" href="">Download Now!</a>
+
            <td>
−
              </div>
+
            <h6>Miriam Salas Ramírez <a href= "https://www.linkedin.com/in/miriamsalas" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
            <p>Congress of Sciences iGEM</p>
 +
            </td>
 +
            <td>
 +
            <h6>Victor Robledo</h6>
 +
            <p>Wetlab/Drylab</p>
 +
            </td>
 +
            </tr>
 +
            <tr>
 +
            <td>
 +
            <h6>Carlos Javier Cordero <a href= "https://www.linkedin.com/in/carlos-javier-cordero-oropeza-386593a9/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
            <p>Drylab</p>
 +
            </td>
 +
            <td>
 +
            <h6>Nora Torres</h6>
 +
            <p>Team Management</p>
 +
            </td>
 +
            <td>
 +
            <h6>Roberto Vásquez <a href= "https://www.linkedin.com/in/robertovzz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
            <p>Mathematical Model</p>
 +
            </td>
 +
            </tr>
 +
            <tr>
 +
            <td>
 +
            <h6>Samantha Peña</h6>
 +
            <p>Human Practices, and design</p>
 +
            </td>
 +
            <td>
 +
            <h6>Andrés Sánchez <a href= "http://linkedin.com/in/andresbsanchez" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
            <p>Mathematical Model</p>
 +
            </td>
 +
            <td>
 +
            <h6>Diego Valadez</h6>
 +
            <p>Wiki/Dry Lab</p>
 +
             </td>
 +
            </tr>
 +
             <tr>
 +
             <td>
 +
            <h6>Jesús Héctor López <a href= "https://www.linkedin.com/in/jesushectorlopezgrajeda" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
            <p>Dry Lab</p>
 +
            </td>
 +
            <td>
 +
            <h6>Adriana Lizeth Rubio <a href= "https://mx.linkedin.com/in/adriana-lizeth-rubio-aguirre-56b10a15a" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
            <p>Mathematical Model</p>
 +
            </td>
 +
            <td>
 +
            <h6>María Eugenia Reyna <a href= "https://www.linkedin.com/in/mar%C3%ADa-eugenia-reyna-fern%C3%A1ndez-775732167/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
            <p>Wetlab</p>
 +
            </td>
 +
            </tr>
 +
            </table>
 +
            </div>
 +
            </div>
 +
            </div>
 
             </section>
 
             </section>
  
−
             <!-- Portfolio
+
             <!-- Human Practices -->
−
             <section id="portfolio">
+
             <section id="HP" style="text-align: center;">
−
              <div class="container">
+
                 <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;">
−
                <div class="text-center">
+
                    <div style="width: 40%; float: left; padding-right: 20px;">
−
                  <h3 class="text-secondary mb-0">Portfolio</h3>
+
                         <img src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg">
−
                  <h2 class="mb-5">Recent Projects</h2>
+
                     </div>
−
                 </div>
+
                    <div style="width: 60%; float: right; padding-top: 60px">
−
                <div class="row no-gutters">
+
                        <div class="header-title" style="color: #3582d2;">
−
                  <div class="col-lg-6">
+
                            Human Practices
−
                    <a class="portfolio-item" href="#">
+
                         </div>
−
                      <span class="caption">
+
                         <div class="header-subtitle" style="color: #5da565;">
−
                         <span class="caption-content">
+
                            Pollutants in Chiapas and Mexico
−
                          <h2>Stationary</h2>
+
                         </div>
−
                          <p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
+
                        <p style="font-size: 18px; color: #2f6361;">Our project has many applications, but we decided to face a critical environmental problem in one southern state of Mexico: Chiapas. Chiapas is a beautiful state with megadiverse ecosystems, but it also has a severe water pollution problem that affects many communities close to the natural and polluted water sources.  With the help of Cecropia and CONANP we will obtain water samples from the polluted sources and analyze them with several techniques in order to make a valuable overview.</p>
−
                        </span>
+
                     </div>
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-1.jpg" alt="">
+
−
                    </a>
+
−
                  </div>
+
−
                  <div class="col-lg-6">
+
−
                    <a class="portfolio-item" href="#">
+
−
                      <span class="caption">
+
−
                        <span class="caption-content">
+
−
                          <h2>Ice Cream</h2>
+
−
                          <p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
+
−
                        </span>
+
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-2.jpg" alt="">
+
−
                     </a>
+
−
                  </div>
+
−
                  <div class="col-lg-6">
+
−
                    <a class="portfolio-item" href="#">
+
−
                      <span class="caption">
+
−
                         <span class="caption-content">
+
−
                          <h2>Strawberries</h2>
+
−
                          <p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
+
−
                         </span>
+
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-3.jpg" alt="">
+
−
                    </a>
+
−
                  </div>
+
−
                  <div class="col-lg-6">
+
−
                    <a class="portfolio-item" href="#">
+
−
                      <span class="caption">
+
−
                         <span class="caption-content">
+
−
                          <h2>Workspace</h2>
+
−
                          <p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
+
−
                        </span>
+
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-4.jpg" alt="">
+
−
                     </a>
+
−
                  </div>
+
 
                 </div>
 
                 </div>
−
              </div>
 
 
             </section>
 
             </section>
−
            -->
 
  
−
            <!-- Call to Action -->
 
−
            <section class="bg-primary text-white">
 
−
              <div class="container text-center">
 
−
                <h2 class="mb-4">The buttons below are impossible to resist...</h2>
 
−
                <a href="#" class="btn btn-xl btn-light mr-4">Click Me!</a>
 
−
                <a href="#" class="btn btn-xl btn-dark">Look at Me!</a>
 
−
              </div>
 
−
            </section>
 
 
         </main>
 
         </main>
 
          
 
          
Line 974: Line 1,301:
 
         <script>
 
         <script>
 
              
 
              
−
       
 
−
            var href;
 
−
            /*
 
−
            $(".navbar-linkContainer").mouseenter(function(){
 
−
                //$(href).collapse('hide');
 
−
                href = $(this).find("a").attr('href');
 
−
                $(href).collapse('show');
 
−
               
 
−
               
 
−
                $(href).mouseleave(function(){
 
−
                    $(href).collapse('hide');
 
−
                });
 
−
            });
 
 
              
 
              
−
            $(".navbar-linkContainer").mouseleave(function(){
 
−
                $(href).not($ mouseenter(function(){
 
−
                    $(href).collapse('hide');
 
−
                });
 
−
            }));
 
 
              
 
              
−
             */
+
             /*------------MENU STARTS-----------*/
 
              
 
              
−
             $(".navbar-linkContainer").mouseenter(function(){
+
             //Menu collapsing
−
                $('#navBar').css('background','#eef');
+
−
            });
+
 
              
 
              
−
             $(".navbar-linkContainer").mouseleave(function(){
+
             $("#linkContainer_Project").hover(
−
                $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                function () {
−
            });  
+
                    $('#navBar').css('background','#eef');
 +
                    $("#linkContainer_Project").css('background','aquamarine');
 +
                    $('#collapseProject').stop().slideDown(200);
 +
                }, function () {
 +
                    $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                    $("#linkContainer_Project").css('background','rgba(0,0,0,0)');
 +
                    $('#collapseProject').stop().slideUp(200);
 +
                   
 +
                    $('#collapseProject').mouseenter(function(){
 +
                        $('#navBar').css('background','#eef');
 +
                        $("#linkContainer_Project").css('background','aquamarine');
 +
                        $('#collapseProject').stop().slideDown(200);
 +
                    });
 +
                    $('#collapseProject').mouseleave(function(){
 +
                        $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                        $("#linkContainer_Project").css('background','rgba(0,0,0,0)');
 +
                        $('#collapseProject').stop().slideUp(200);
 +
                    });
 +
                }
 +
            );
 
              
 
              
−
             $(".navbar-linkContainer").mouseenter(function(){
+
             $("#linkContainer_Parts").hover(
−
                $(href).collapse('hide');
+
                function () {
−
                 href = $(this).find("a").attr('href');
+
                    $('#navBar').css('background','#eef');
−
                $(href).collapse('show');
+
                    $("#linkContainer_Parts").css('background','aquamarine');
−
               
+
                    $('#collapseParts').stop().slideDown(200);
−
               
+
                 }, function () {
−
                $(href).mouseleave(function(){
+
                    $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
−
                    $(href).collapse('hide');
+
                    $("#linkContainer_Parts").css('background','rgba(0,0,0,0)');
−
                });
+
                    $('#collapseParts').stop().slideUp(200);
−
            });
+
                   
 +
                    $('#collapseParts').mouseenter(function(){
 +
                        $('#navBar').css('background','#eef');
 +
                        $("#linkContainer_Parts").css('background','aquamarine');
 +
                        $('#collapseParts').stop().slideDown(200);
 +
                    });
 +
                    $('#collapseParts').mouseleave(function(){
 +
                        $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                        $("#linkContainer_Parts").css('background','rgba(0,0,0,0)');
 +
                        $('#collapseParts').stop().slideUp(200);
 +
                    });
 +
                }
 +
            );
 
              
 
              
−
             $(".navbar-linkContainer").mouseleave(function(){
+
             $("#linkContainer_People").hover(
−
                 $(href).collapse('hide');
+
                function () {
 +
                    $('#navBar').css('background','#eef');
 +
                    $("#linkContainer_People").css('background','aquamarine');
 +
                    $('#collapsePeople').stop().slideDown(200);
 +
                }, function () {
 +
                    $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                    $("#linkContainer_People").css('background','rgba(0,0,0,0)');
 +
                    $('#collapsePeople').stop().slideUp(200);
 +
                   
 +
                    $('#collapsePeople').mouseenter(function(){
 +
                        $('#navBar').css('background','#eef');
 +
                        $("#linkContainer_People").css('background','aquamarine');
 +
                        $('#collapsePeople').stop().slideDown(200);
 +
                    });
 +
                    $('#collapsePeople').mouseleave(function(){
 +
                        $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                        $("#linkContainer_People").css('background','rgba(0,0,0,0)');
 +
                        $('#collapsePeople').stop().slideUp(200);
 +
                    });
 +
                 }
 +
            );
 +
           
 +
            $("#linkContainer_HP").hover(
 +
                function () {
 +
                    $('#navBar').css('background','#eef');
 +
                    $("#linkContainer_HP").css('background','aquamarine');
 +
                    $('#collapseHP').stop().slideDown(200);
 +
                }, function () {
 +
                    $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                    $("#linkContainer_HP").css('background','rgba(0,0,0,0)');
 +
                    $('#collapseHP').stop().slideUp(200);
 +
                   
 +
                    $('#collapseHP').mouseenter(function(){
 +
                        $('#navBar').css('background','#eef');
 +
                        $("#linkContainer_HP").css('background','aquamarine');
 +
                        $('#collapseHP').stop().slideDown(200);
 +
                    });
 +
                    $('#collapseHP').mouseleave(function(){
 +
                        $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                        $("#linkContainer_HP").css('background','rgba(0,0,0,0)');
 +
                        $('#collapseHP').stop().slideUp(200);
 +
                    });
 +
                }
 +
            );
 +
           
 +
            $("#linkContainer_Modeling").hover(
 +
                function () {
 +
                    $('#navBar').css('background','#eef');
 +
                    $("#linkContainer_Modeling").css('background','aquamarine');
 +
                    $('#collapseModeling').stop().slideDown(200);
 +
                }, function () {
 +
                    $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                    $("#linkContainer_Modeling").css('background','rgba(0,0,0,0)');
 +
                    $('#collapseModeling').stop().slideUp(200);
 +
                   
 +
                    $('#collapseModeling').mouseenter(function(){
 +
                        $('#navBar').css('background','#eef');
 +
                        $("#linkContainer_Modeling").css('background','aquamarine');
 +
                        $('#collapseModeling').stop().slideDown(200);
 +
                    });
 +
                    $('#collapseModeling').mouseleave(function(){
 +
                        $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                        $("#linkContainer_Modeling").css('background','rgba(0,0,0,0)');
 +
                        $('#collapseModeling').stop().slideUp(200);
 +
                    });
 +
                }
 +
            );
 +
           
 +
           
 +
            // Change color after scroll
 +
           
 +
            $(window).bind('scroll', function() {
 +
                if ($(window).scrollTop() > 300) {
 +
                    $('#navBar').css('background','#eef');
 +
                } else {
 +
                    $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                }
 
             });
 
             });
 +
       
 +
           
 +
            /*------------MENU ENDS-----------*/
 +
           
 
              
 
              
 
         </script>
 
         </script>

Revision as of 09:12, 20 July 2018

  • PROJECT
  • PROJECT
  • PROJECT
  • PROJECT
  • PROJECT
  • PEOPLE
  • PEOPLE
  • PEOPLE
  • PEOPLE
  • PEOPLE
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • HUMAN PRACTICES
  • MODELING
  • MODELING
  • MODELING
  • MODELING
  • MODELING

iGEM: Tec de Monterrey

Project: E-Coding

Learn about the project
E-Coding
Storing the world one base at a time
The research for storing vast amounts of information in smaller devices has been an attention seeking topic in multidisciplinary areas of knowledge all around the world.

DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer
Baum, 1995
Nevertheless, this potential has been limited due to the lack of efficient editing tools. CRISPR-Cas has become popular as an editing tool for its high specificity, low cost, and easy handling, compared to other editing techniques. In our work, we use Cas1-Cas2, proteins in charge of new protospacer adquisition in the CRISPR array. Predesigned sequences (-70pb aprox) in the form of ssDNA are produced in E.coli by induction of a promoter, and adquired by the complex Cas1-Cas2 to be integrated into the array. To produce this oligonucleotides, we use the retrotranscriptase EC86. A subsequent sequencing of the array will confirm the integration of the oligos in the CRISPR locus. We measure the integration rate in terms of stimuli intensity, and time. We hypothise that this system can store ordered data in vivo of many stimuli, just by changing the promoter.
Team Members
Esteban de la Peña

In charge of making the wiki
Alan Ávila

Team Management/Wet Lab
Adrián Hernández

Interlab managment & Dry Lab
Sofia Lara

In charge of Human Practices
José Arnulfo Juárez Figueroa

Team Management
Ana E. Lasso de la Vega

Team Management
Miranda Iriarte

Congress of Sciences iGEM
Valeria Fuentes

Congress of Sciences iGEM
Juan Fernández

Mathematical Model
Norma Garza

Interlab managment/Drylab
Miriam Salas Ramírez

Congress of Sciences iGEM
Victor Robledo

Wetlab/Drylab
Carlos Javier Cordero

Drylab
Nora Torres

Team Management
Roberto Vásquez

Mathematical Model
Samantha Peña

Human Practices, and design
Andrés Sánchez

Mathematical Model
Diego Valadez

Wiki/Dry Lab
Jesús Héctor López

Dry Lab
Adriana Lizeth Rubio

Mathematical Model
María Eugenia Reyna

Wetlab
Human Practices
Pollutants in Chiapas and Mexico

Our project has many applications, but we decided to face a critical environmental problem in one southern state of Mexico: Chiapas. Chiapas is a beautiful state with megadiverse ecosystems, but it also has a severe water pollution problem that affects many communities close to the natural and polluted water sources. With the help of Cecropia and CONANP we will obtain water samples from the polluted sources and analyze them with several techniques in order to make a valuable overview.