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

Line 1: Line 1:
−
<!-- GENERAL TEMPLATE BEGINS -->
+
<!------------------------- GENERAL FORMAT STARTS --------------------------------->
 +
 
 
<html>
 
<html>
−
    <head>
+
<head>
−
       
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
−
        <!-- Bootstrap required meta tags -->
+
<!--bootstrap core css-->
−
        <meta charset="utf-8">
+
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
−
       
+
    <style>
−
        <!-- Bootstrap css-->
+
/**************************************** Clear the default wiki settings *********************************/
−
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+
−
        <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
+
−
       
+
−
        <!-- Custom scripts for this template
+
−
        <script src="js/stylish-portfolio.js" type="text/javascript"></script>
+
−
        -->
+
−
       
+
−
        <!-- Fonts -->
+
−
        <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
+
−
        <style>
+
−
            /**************************************** Clear the default wiki settings *********************************/
+
 
     #home_logo, #sideMenu {
 
     #home_logo, #sideMenu {
 
         display:none;
 
         display:none;
Line 30: Line 20:
 
         margin: 0;
 
         margin: 0;
 
         background-color: white;
 
         background-color: white;
−
         font-size: 100% !important;
+
         //font-size: 100% !important;
 
     }
 
     }
 
     #content {
 
     #content {
Line 37: Line 27:
 
     #globalWrapper, #content, #HQ_page, #bodyContent, #mw-content-text{
 
     #globalWrapper, #content, #HQ_page, #bodyContent, #mw-content-text{
 
     height: 100%;
 
     height: 100%;
 +
    width: 100%;
 
     }
 
     }
 
/*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/
 
/*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/
Line 48: Line 39:
 
         padding-bottom: 0;
 
         padding-bottom: 0;
 
     }
 
     }
−
/*****************************************************custom css*****************************************************/
+
/*************************************************** Bootstrap Stuff ************************************************/
−
      
+
     .portfolio-item .caption .caption-content p {
−
    @font-face{
+
         font-weight: 300;
−
         font-family: "Norwester";
+
         font-size: 1.2rem;
−
         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{
+
     @media (min-width: 992px) {
−
         font-family: "Montserrat";
+
         .portfolio-item {
−
         src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
+
            max-width: none;
−
            url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
+
            margin: 0;
 +
         }
 +
        .portfolio-item .caption {
 +
            -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
 +
            -webkit-clip-path: inset(0px);
 +
            clip-path: inset(0px);
 +
        }
 +
        .portfolio-item .caption .caption-content {
 +
            transition: opacity 0.25s;
 +
            margin-left: 5rem;
 +
            margin-right: 5rem;
 +
            margin-bottom: 5rem;
 +
        }
 +
        .portfolio-item img {
 +
            -webkit-transition: -webkit-clip-path 0.25s ease-out;
 +
            -webkit-clip-path: inset(-1px);
 +
            clip-path: inset(-1px);
 +
        }
 +
        .portfolio-item:hover img {
 +
            -webkit-clip-path: inset(2rem);
 +
            clip-path: inset(2rem);
 +
        }
 +
        .portfolio-item:hover .caption {
 +
            background-color: rgba(29, 128, 159, 0.9);
 +
            -webkit-clip-path: inset(2rem);
 +
            clip-path: inset(2rem);
 +
        }
 
     }
 
     }
−
     @font-face{
+
     a {
−
         font-family: "DosisRegular";
+
         color: #1D809F;
−
        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 {
+
     a:hover, a:focus, a:active {
−
        width: 100%;
+
         color: #155d74;
−
         height: 100%;
+
 
     }
 
     }
−
     body {
+
     .btn-primary {
−
         font-family: "DosisRegular", sans-serif !important;
+
         background-color: #1D809F !important;
 +
        border-color: #1D809F !important;
 +
        color: #fff !important;
 
     }
 
     }
−
     ul{
+
     .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
−
         margin: 0 !important;
+
         background-color: #155d74 !important;
 +
        border-color: #155d74 !important;
 
     }
 
     }
−
     h1, h2, h3, h4, h5, h6 {
+
     .btn {
 +
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
 
         font-weight: 700;
 
         font-weight: 700;
−
        padding: 0 0 0 0;
 
−
        margin: 0 0 0 0;
 
 
     }
 
     }
−
     .text-faded {
+
     .btn-xl {
−
         color: rgba(255, 255, 255, 0.7);
+
         padding: 1.25rem 2.5rem;
 
     }
 
     }
−
    .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.footer {
 
−
              padding-top: 5rem;
 
−
              padding-bottom: 5rem;
 
−
            }
 
−
 
−
            footer.footer .social-link {
 
−
              display: block;
 
−
              height: 4rem;
 
−
              width: 4rem;
 
−
              line-height: 4.3rem;
 
−
              font-size: 1.5rem;
 
−
              background-color: #1D809F;
 
−
              transition: background-color 0.15s ease-in-out;
 
−
              box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
 
−
            }
 
−
 
−
            footer.footer .social-link:hover {
 
−
              background-color: #155d74;
 
−
              text-decoration: none;
 
−
            }
 
−
           
 
−
        </style>
 
−
    </head>
 
−
    <body id="page-top">
 
−
   
 
−
    <!--Scroll to top button-->
 
−
    <a class="scroll-to-top rounded" href="#page-top">
 
−
      <i class="fa fa-angle-up"></i>
 
−
    </a>
 
−
 
−
    </body>
 
−
</html>
 
−
<!-- GENERAL TEMPLATE ENDS -->
 
−
 
−
<html lang="en">
 
−
    <head>
 
−
        <link rel="stylesheet" type="text/css" href="main.css">
 
−
<style>
 
−
/*Override iGem default wiki settings */
 
−
#home_logo, #sideMenu {
 
−
    display:none;
 
−
    }
 
−
    #sideMenu, #top_title, .patrollink  {
 
−
    display:none;
 
−
    }
 
−
    #content, #HQ_page {
 
−
        width: 100%;
 
−
        padding: 0;
 
−
        margin: 0;
 
−
        background-color: white;
 
−
    }
 
−
 
−
 
 
/*****************************************************custom css*****************************************************/
 
/*****************************************************custom css*****************************************************/
 
      
 
      
Line 283: Line 150:
 
     }
 
     }
 
     .div-header-bottom {
 
     .div-header-bottom {
−
         padding:5px 0px 10px 10px;
+
         padding:5px 0px 0px 10px;
−
         border-left: 20px solid #2f6361;  
+
         border-left: 10px solid #2f6361;  
 
     }
 
     }
 
     .header-title {
 
     .header-title {
 
         font-family: "Norwester", sans-serif !important;
 
         font-family: "Norwester", sans-serif !important;
 
         text-align: left !important;
 
         text-align: left !important;
−
         font-size: 5em !important;
+
         font-size: 9vw !important;
 
         font-weight: 700 !important;
 
         font-weight: 700 !important;
 
         line-height: 1em !important;
 
         line-height: 1em !important;
Line 299: Line 166:
 
         font-family: "Montserrat", monospace;
 
         font-family: "Montserrat", monospace;
 
         text-align: left !important;
 
         text-align: left !important;
−
         font-size: 2em !important;
+
         font-size: 3.5vw !important;
 
         font-weight: 600 !important;
 
         font-weight: 600 !important;
 
         line-height: 1em !important;
 
         line-height: 1em !important;
−
         padding-bottom: 5px;
+
         padding-bottom: 4px;
 
         color: #5da565;
 
         color: #5da565;
 
     }
 
     }
 
     .body-title {
 
     .body-title {
 
         font-family: "Norwester", sans-serif !important;
 
         font-family: "Norwester", sans-serif !important;
−
         font-size: 65px !important;
+
         font-size: 4vw !important;
 
         font-weight: 600 !important;
 
         font-weight: 600 !important;
−
         line-height: 65px !important;
+
         line-height: 1em !important;
−
         padding: 5px 0 0 5px;
+
         padding: 10px 0 10px 0;
 
         text-align: center;
 
         text-align: center;
 
     }
 
     }
Line 318: Line 185:
 
     .body-subtitle {
 
     .body-subtitle {
 
         font-family: "Montserrat", monospace !important;
 
         font-family: "Montserrat", monospace !important;
−
         font-size: 25px !important;
+
         font-size: 2.5vw !important;
 
         font-weight: 400 !important;
 
         font-weight: 400 !important;
−
         line-height: 25px !important;
+
         line-height: 1.2em !important;
 
     }
 
     }
 
     .scroll-to-top {
 
     .scroll-to-top {
Line 360: Line 227:
 
         color: #eeeeee;
 
         color: #eeeeee;
 
     }
 
     }
 +
/******************************************************* TOPBAR MENU *********************************************/
 +
#topBarWrapper {
 +
  /*display: none;*/
 +
}
  
−
 
+
.topBar {
−
 
+
−
 
+
−
/**** NAVBAR ****/
+
−
.masthead {
+
 
     position: fixed;
 
     position: fixed;
 
     top: 18px;
 
     top: 18px;
 
     z-index: 2;
 
     z-index: 2;
−
     height: 60px;
+
     height: 8vh;
 
     width: 100%;
 
     width: 100%;
 
}
 
}
  
−
#navBar {
+
#navbar {
 
     position: fixed;
 
     position: fixed;
 
     z-index: 2;
 
     z-index: 2;
−
     height: 60px;
+
     height: 8vh;
 
     width: 100%;
 
     width: 100%;
−
    background: rgb(0,0,0);
 
 
     background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%);
 
     background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%);
 +
    transition: all 0.3s;
 +
    -webkit-transition: all 0.3s;
 +
}
 +
 +
#navbarLogoWrapper {
 +
  position: absolute;
 +
  display: inline-block;
 +
  height: 100%;
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
}
 +
 +
#navbarLogoText {
 +
  display: inline-block;
 +
  font-size: 1vw;
 +
  color: white;
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.3s;
 +
  transition: opacity 0.3s;
 +
}
 +
 +
#navbarLogo {
 +
  height: 80%;
 +
  margin-top: 5%;
 +
  margin-bottom: 15%;
 +
  margin-left: 20px;
 +
  padding-left: 20px;
 +
  border-left: 1px solid white;
 +
  display: inline-block;
 +
}
 +
 +
#navbarGif {
 +
  height: 80%;
 +
  margin-top: 5%;
 +
  margin-bottom: 15%;
 +
  margin-left: 20px;
 +
  padding-left: 20px;
 +
  display: none;
 +
}
 +
 +
#navbarGif, #navbarLogoWrapper:hover #navbarLogo {
 +
  display: none;
 +
  border: 0;
 +
}
 +
 +
#navbarLogo, #navbarLogoWrapper:hover #navbarGif {
 +
  display: inline-block;
 +
}
 +
 +
#navbarLogoWrapper:hover {
 +
  transform: scale(1.4,1.4);
 +
  cursor: pointer;
 +
}
 +
 +
#navbarLogoWrapper:hover > #navbarLogoText {
 +
  opacity: 1;
 
}
 
}
  
 
#navContainer {
 
#navContainer {
 +
    display: none;
 
     z-index: 2;
 
     z-index: 2;
−
     height: 60px;
+
     height: 8vh;
 
     width: 80%;
 
     width: 80%;
 
     left: 10%;
 
     left: 10%;
Line 392: Line 315:
 
}
 
}
  
−
#navContainer:a {
+
.navbar-linkContainer {
−
    color: #fff;
+
  height: 100%;
 +
  width: 20%;
 +
  color: white;
 +
  background-color: rgba(0,0,0,0);
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
  position: relative;
 +
  float: left;
 +
  text-align: center;
 +
}
 +
.navbar-linkContainerChild {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: 80%;
 +
  height: 1em;
 +
  margin: auto;
 +
  font-family: "Norwester", sans-serif;
 +
  font-weight: 700;
 +
  font-size: 1.5vw;
 +
  line-height: 1em;
 +
  border-left: 1px solid white;
 +
  border-right: 1px solid white;
 
}
 
}
  
 +
.navbar-linkContainer.active {
 +
  transform: scale(1.05,1.05);
 +
  border-radius: 5%;
 +
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 +
  background-color: #B0E0E4;
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
}
  
−
.navbar-linkContainer {
+
.activeChild {
−
    height: 100%;
+
  border: 0;
−
    width: 150px;
+
−
    background-color: rgba(0,0,0,0); /* transparent */
+
−
    position: relative;
+
−
    float: left;
+
−
    text-align: center;
+
−
    vertical-align: middle;
+
 
}
 
}
  
 
.collapsedMenu {
 
.collapsedMenu {
−
     top: 18px;
+
     top: calc(8vh + 18px);
 
     position: fixed;
 
     position: fixed;
 
     z-index: 1;
 
     z-index: 1;
−
    background-color: aquamarine;
 
 
     width: 100%;
 
     width: 100%;
 +
  background-color: aquamarine;
 +
}
 +
 +
.containerCollapse {
 +
  padding: 0 10px 30px 10px;
 +
  width: 80%;
 +
  margin-left: 10%;
 
}
 
}
  
 
.height-support {
 
.height-support {
−
     height: 60px;
+
     height: 20px;
 
     width: 100%;
 
     width: 100%;
 
}
 
}
  
 
.mask {
 
.mask {
−
     height:100%;
+
     height: 8vh;
 
     width:100%;
 
     width:100%;
 
     background-color: rgba(0,0,0,0);
 
     background-color: rgba(0,0,0,0);
 
     z-index: 0;
 
     z-index: 0;
 
}
 
}
−
/*** NAVBAR ENDS ***/
 
  
−
/*** HEADER ENDS ***/
+
.navbarList {
 +
  float: left;
 +
  height: 100%;
 +
  width: 16%;
 +
}
  
 +
.navbarItem {
 +
  height: 100%;
 +
}
  
−
/*** INTRO ***/
+
.navbarItemHeader {
 +
  display: inline-block;
 +
  position: relative;
 +
  font-family: "Norwester", sans-serif;
 +
  font-weight: 500;
 +
  font-size: 1.8vw;
 +
  color: black;
 +
  text-decoration: none;
 +
  padding-top: 10px;
 +
  width: auto;
 +
}
  
−
#intro {
+
.navbarItemContent {
−
    position: relative;
+
  display: inline-block;
−
    width: 100%;
+
  position: relative;
−
    color: rgba(57,187,104,0.7);
+
  color: black;
 +
  font-size: 1.5vw;
 +
  line-height: 1.5em;
 +
  text-decoration: none;
 +
  width: auto;
 +
  padding-top: 10px;
 
}
 
}
  
−
#intro h1 {
+
a.navbarItemHeader::after, a.navbarItemContent::after {
−
   font-size: 4rem;
+
   content: "";
−
   margin: 0;
+
  position: absolute;
 +
  width: 0;
 +
  height: 2px;
 +
  display:block;
 +
   margin-top: 5px;
 +
  right: 0;
 +
  background-color: #000;
 +
  -webkit-transition: width 0.3s ease-in-out 0s;
 +
  transition: width 0.3s ease-in-out 0s;
 
   padding: 0;
 
   padding: 0;
 +
  margin: 0;
 
}
 
}
  
−
#intro video {
+
a.navbarItemHeader:link, a.navbarItemContent:link  {
−
    position: absolute;
+
  color: black;
−
    top: 0;
+
  text-decoration: none;
−
    margin: auto;
+
}
−
    height: 100%;
+
a.navbarItemHeader:visited, a.navbarItemContent:visited  {
 +
  color: black;
 +
  text-decoration: none;
 +
}
 +
a.navbarItemHeader:active, a.navbarItemContent:active  {
 +
  color: black;
 +
  text-decoration: none;
 +
}
 +
a.navbarItemHeader:hover, a.navbarItemContent:hover  {
 +
  color: black;
 +
  text-decoration: none;
 
}
 
}
  
−
@media (min-width: 992px) {
+
a.navbarItemHeader:hover::after, a.navbarItemContent:hover::after  {
−
    #intro {
+
  width: 100%;
−
        height: 55.5vw;
+
  left: 0;
−
    }
+
  background: #000;
−
    #intro h1 {
+
−
        font-size: 5.5rem;
+
−
    }
+
−
   
+
−
    #intro video {
+
−
        height: auto;
+
−
        width: 100%;
+
−
    }
+
 
}
 
}
  
−
/*** INTRO ENDS ***/
+
.clearBoth {
 +
  clear: both;
 +
}
 +
       
 +
#squeezedBtnWrapper {
 +
}
 +
       
 +
#squeezedNavBtn {
 +
    position: fixed;
 +
    top: 18px;
 +
    z-index: 3;
 +
    height: 8vh;
 +
    width: 80px;
 +
    background-color: aquamarine;
 +
    right: 10%;
 +
    text-align: center;
 +
    font-size: 6vh;
 +
}
 +
/********************************************************* TOPBAR MENU ENDS *********************************************/
 +
/********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/
 +
@media screen and (min-width: 900px) {
 +
  #navContainer {
 +
    display: contents;
 +
  }
 +
  #squeezedNavBtn {
 +
    display: none;
 +
  }
 +
}
 +
    </style>
 +
</head>
 +
<body>
  
 +
<!-- Navigation Bar-->
  
 +
<!--------------------------------------------------------- TOPBAR MENU STARTS ------------------------------------------->
 +
<div id="squeezedBtnWrapper">
 +
    <div id="squeezedNavBtn">
 +
        <a href="#squeezedMenuDrop"><i class="fas fa-bars" id="squeezedBtn"></i></a>
 +
    </div>
 +
</div>
 +
<div id="topBarWrapper">
 +
      <div class="topBar d-flex">
 +
          <div id="navbar">
 +
            <div id="navbarLogoWrapper">
 +
              <img id="navbarLogo" src="https://static.igem.org/mediawiki/2018/7/76/T--Tec-Monterrey--ECoding_Menu_Logo_Still_200.png"/><img id="navbarGif" src="https://static.igem.org/mediawiki/2018/c/c3/T--Tec-Monterrey--ECoding_Menu_Gif.gif"/>
 +
              <h5 id="navbarLogoText">Home</h5>
 +
            </div>
 +
              <div id="navContainer">
 +
                  <a href="#collapseProject">
 +
                      <div class="navbar-linkContainer" id="linkContainer_Project">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">Project</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#collapseParts">
 +
                      <div class="navbar-linkContainer" id="linkContainer_Parts">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">Parts</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#collapsePeople">
 +
                      <div class="navbar-linkContainer" id="linkContainer_People">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">People</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#collapseHP">
 +
                      <div class="navbar-linkContainer" id="linkContainer_HP">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_HPChild">Human Practices</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#collapseModeling">
 +
                      <div class="navbar-linkContainer" id="linkContainer_Modeling">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_ModelingChild">Modeling</div>
 +
                      </div>
 +
                  </a>
 +
              </div>
 +
          </div>
 +
           
 +
            <!-- Project collapsed -->
 +
            <div class="collapse collapsedMenu" id="collapseProject">
 +
                <div class="containerCollapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a href="www.google.com" class="navbarItemHeader">Overview</a>
 +
                          <a class="navbarItemContent">The project</a>
 +
                          <a class="navbarItemContent">Applications</a>
 +
                          <a class="navbarItemContent">Human Practices</a>
 +
                          <a class="navbarItemContent">What we want</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a class="navbarItemHeader">Overview</a>
 +
                          <a class="navbarItemContent">The project</a>
 +
                          <a class="navbarItemContent">Applications</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a class="navbarItemHeader">Overview</a>
 +
                          <a class="navbarItemContent">The project</a>
 +
                          <a class="navbarItemContent">Applications</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a class="navbarItemHeader">Overview</a>
 +
                          <a class="navbarItemContent">The project</a>
 +
                          <a class="navbarItemContent">Applications</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a class="navbarItemHeader">Overview</a>
 +
                          <a class="navbarItemContent">The project</a>
 +
                          <a class="navbarItemContent">Applications</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a class="navbarItemHeader">Overview</a>
 +
                          <a class="navbarItemContent">The project</a>
 +
                          <a class="navbarItemContent">Applications</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- Parts collapsed -->
 +
            <div class="collapse collapsedMenu" id="collapseParts">
 +
                <div class="containerCollapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Basic parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Composite Parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts Collection</a>
 +
                            <a href="#page-top" class="navbarItemContent">Improved parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Basic parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Composite Parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts Collection</a>
 +
                            <a href="#page-top" class="navbarItemContent">Improved parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Basic parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Composite Parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts Collection</a>
 +
                            <a href="#page-top" class="navbarItemContent">Improved parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Basic parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Composite Parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts Collection</a>
 +
                            <a href="#page-top" class="navbarItemContent">Improved parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Basic parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Composite Parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts Collection</a>
 +
                            <a href="#page-top" class="navbarItemContent">Improved parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Basic parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Composite Parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts Collection</a>
 +
                            <a href="#page-top" class="navbarItemContent">Improved parts</a>
 +
                            <a href="#page-top" class="navbarItemContent">Parts list</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- People collapsed -->
 +
            <div class="collapse collapsedMenu" id="collapsePeople">
 +
                <div class="containerCollapse" id="collapsedMenu">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Team</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Attributions</a>
 +
                            <a href="#page-top" class="navbarItemContent">Collaborations</a>
 +
                            <a href="#page-top" class="navbarItemContent">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Team</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Attributions</a>
 +
                            <a href="#page-top" class="navbarItemContent">Collaborations</a>
 +
                            <a href="#page-top" class="navbarItemContent">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Team</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Attributions</a>
 +
                            <a href="#page-top" class="navbarItemContent">Collaborations</a>
 +
                            <a href="#page-top" class="navbarItemContent">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Team</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Attributions</a>
 +
                            <a href="#page-top" class="navbarItemContent">Collaborations</a>
 +
                            <a href="#page-top" class="navbarItemContent">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Team</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Attributions</a>
 +
                            <a href="#page-top" class="navbarItemContent">Collaborations</a>
 +
                            <a href="#page-top" class="navbarItemContent">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Team</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Attributions</a>
 +
                            <a href="#page-top" class="navbarItemContent">Collaborations</a>
 +
                            <a href="#page-top" class="navbarItemContent">Sponsors</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- HP collapsed -->
 +
            <div class="collapse collapsedMenu" id="collapseHP">
 +
                <div class="containerCollapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Silver HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Integrated HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Education</a>
 +
                            <a href="#page-top" class="navbarItemContent">Public Engagement</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Silver HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Integrated HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Education</a>
 +
                            <a href="#page-top" class="navbarItemContent">Public Engagement</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Silver HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Integrated HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Education</a>
 +
                            <a href="#page-top" class="navbarItemContent">Public Engagement</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Silver HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Integrated HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Education</a>
 +
                            <a href="#page-top" class="navbarItemContent">Public Engagement</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Silver HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Integrated HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Education</a>
 +
                            <a href="#page-top" class="navbarItemContent">Public Engagement</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <a href="#page-top" class="navbarItemContent">Silver HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Integrated HP</a>
 +
                            <a href="#page-top" class="navbarItemContent">Education</a>
 +
                            <a href="#page-top" class="navbarItemContent">Public Engagement</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- Modeling collapsed -->
 +
            <div class="collapse collapsedMenu" id="collapseModeling">
 +
                <div class="containerCollapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Interlab</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                            <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Interlab</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                            <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Interlab</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                            <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Interlab</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                            <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Interlab</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                            <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#page-top" class="navbarItemHeader">Overview</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Interlab</a>
 +
                            <br>
 +
                            <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                            <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
                            <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                            <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
         
 +
              <!-- Squeezed collapsed -->
 +
            <div class="collapse collapsedMenu" id="collapseSqueezed">
 +
    <div class="containerCollapse">
 +
        <div class="height-support">
 +
        </div>
 +
        <ul class="navbar-nav mr-auto navbarList">
 +
            <li class="nav-item navbarItem">
 +
                <a href="#page-top" class="navbarItemHeader">Project</a>
 +
                <a href="#page-top" class="navbarItemContent">Overview</a>
 +
                <a href="#page-top" class="navbarItemContent">The Project</a>
 +
                <a href="#page-top" class="navbarItemContent">Applications</a>
 +
                <a href="#page-top" class="navbarItemContent">Human Practices</a>
 +
                <a href="#page-top" class="navbarItemContent">What we want</a>
 +
            </li>
 +
        </ul>
 +
        <ul class="navbar-nav mr-auto navbarList">
 +
            <li class="nav-item navbarItem">
 +
                <a href="#page-top" class="navbarItemHeader">Parts</a>
 +
                <a href="#page-top" class="navbarItemContent">Overview</a>
 +
                <a href="#page-top" class="navbarItemContent">Basic Parts</a>
 +
                <a href="#page-top" class="navbarItemContent">Composite Parts</a>
 +
                <a href="#page-top" class="navbarItemContent">Parts Collection</a>
 +
                <a href="#page-top" class="navbarItemContent">Improved Parts</a>
 +
                <a href="#page-top" class="navbarItemContent">Parts list</a>
 +
            </li>
 +
        </ul>
 +
        <ul class="navbar-nav mr-auto navbarList">
 +
            <li class="nav-item navbarItem">
 +
                <a href="#page-top" class="navbarItemHeader">People</a>
 +
                <a href="#page-top" class="navbarItemContent">Overview</a>
 +
                <a href="#page-top" class="navbarItemContent">Team</a>
 +
                <a href="#page-top" class="navbarItemContent">Attributions</a>
 +
                <a href="#page-top" class="navbarItemContent">Collaborations</a>
 +
                <a href="#page-top" class="navbarItemContent">Sponsors</a>
 +
            </li>
 +
        </ul>
 +
        <ul class="navbar-nav mr-auto navbarList">
 +
            <li class="nav-item navbarItem">
 +
                <a href="#page-top" class="navbarItemHeader">Human Practices</a>
 +
                <a href="#page-top" class="navbarItemContent">Overview</a>
 +
                <a href="#page-top" class="navbarItemContent">Silver HP</a>
 +
                <a href="#page-top" class="navbarItemContent">Integrated HP</a>
 +
                <a href="#page-top" class="navbarItemContent">Education</a>
 +
                <a href="#page-top" class="navbarItemContent">Public Engagement</a>
 +
            </li>
 +
        </ul>
 +
        <ul class="navbar-nav mr-auto navbarList">
 +
            <li class="nav-item navbarItem">
 +
                <a href="#page-top" class="navbarItemHeader">Modeling</a>
 +
                <a href="#page-top" class="navbarItemContent">Overview</a>
 +
                <a href="#page-top" class="navbarItemContent">Interlab</a>
 +
                <a href="#page-top" class="navbarItemContent">Software Tool</a>
 +
                <a href="#page-top" class="navbarItemContent">Lac Operon</a>
 +
            </li>
 +
        </ul>
 +
        <br class="clearBoth"/>
 +
    </div>
 +
</div>
 +
 +
            <div class="mask"></div>
 +
        </div>
 +
</div>
 +
<!--------------------------------------------------------- TOPBAR MENU ENDS --------------------------------------------->
 +
   
 +
    <!--Scroll to top button-->
 +
    <a class="scroll-to-top rounded" href="#page-top">
 +
      <i class="fa fa-angle-up"></i>
 +
    </a>
  
 +
</body>
 +
</html>
 +
 +
<!------------------------- GENERAL FORMAT ENDS ----------------------------------->
 +
 +
 +
<!------------------------- INDEX.HTML STARTS ------------------------------------->
 +
 +
<html>
 +
<head>
 +
<style>
 
#globalWrapper {
 
#globalWrapper {
 
   background: rgb(248,247,246);     
 
   background: rgb(248,247,246);     
Line 478: Line 944:
 
     right: 0;
 
     right: 0;
 
     max-width: 100%;
 
     max-width: 100%;
 +
}
 +
.masthead {
 +
  min-height: 30rem;
 +
  position: relative;
 +
  width: 100%;
 +
  padding-top: 8rem;
 +
  padding-bottom: 8rem;
 +
  background: rgb(248,247,246);
 
}
 
}
 
.masthead h1 {
 
.masthead h1 {
Line 588: Line 1,062:
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
}
 
}
 +
</style>
 +
</head>
 +
  <body id="page-top">
 +
    <!-- Header -->
 +
      <header class="masthead" style="border-bottom: 20px solid #2f6361;">
 +
        <img id="myImage" src="https://static.igem.org/mediawiki/2018/8/82/T--Tec-Monterrey--Tec_ECoding_background.jpeg">
 +
        <div class="container text-center my-auto" style="position: relative; top: 60%; left: 9%; max-width: 50%;">
 +
        <a class="btn btn-primary btn-xl" href="#project">Learn about the project</a>
 +
          </div>
 +
      <div class="overlay"></div>
 +
    </header>
  
−
#project {
+
     <!-- Project -->
−
     -webkit-transition: height 4s;
+
    <section id="project" style="background: #d3edf2; text-align: center;">
−
  -moz-transition: height 4s;
+
    <div style="width: 80%; margin: auto; text-align: justify; background: #f2fafc;">
−
  -ms-transition: height 4s;
+
    <div style="width: 96%; margin: auto; text-align: justify; background: #fdfdfd; padding-top: 10px;">
−
  -o-transition: height 4s;
+
<div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;">
−
    transition: height 4s;
+
      <div class="header-title" style="color: #3582d2;">
−
    height: auto;
+
          E-Coding
−
    background-image: url('/img/logoOficialCirculos.png');
+
      </div>
−
     background-repeat: no-repeat;
+
      <div class="header-subtitle" style="color: #5da565;">
−
    background-position: center;
+
          Storing the world one base at a time
−
     background-size: contain;
+
      </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>
 +
    </section>
  
−
#project.active {
+
    <!-- Team-->
−
     -webkit-transition: height 4s;
+
     <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;">
−
  -moz-transition: height 4s;
+
    <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;">
−
  -ms-transition: height 4s;
+
    <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;">
−
  -o-transition: height 4s;
+
      <div>
−
    transition: height 4s;
+
      <table align="center" id="myTable">
−
    height: 100%;
+
      <tr>
−
    background-image: url('/img/logoOficialCirculos.png');
+
        <th colspan="3" style="text-align:center;"><h5>Team Members</h5></th>
−
    background-repeat: no-repeat;
+
      </tr>
−
    background-position: center;
+
      <tr>
−
    background-size: contain;
+
      <td>
−
}
+
<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>
 +
<p>In charge of making the wiki</p>
 +
      </td>
 +
      <td>
 +
<h6>Alan Ávila <a href="https://www.linkedin.com/in/alanavilarmz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
<p>Team Management/Wet Lab</p>
 +
      </td>
 +
      <td>
 +
<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>
 +
<p>Interlab managment & Dry Lab</p>
 +
      </td>
 +
      </tr>
 +
      <tr>
 +
      <td>
 +
<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>
 +
<p>In charge of Human Practices</p>
 +
</td>
 +
      <td>
 +
<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>
 +
<p>Team Management</p>
 +
</td>
 +
      <td>
 +
<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>
 +
<p>Team Management</p>
 +
</td>
 +
      </tr>
 +
      <tr>
 +
      <td>
 +
<h6>Miranda Iriarte <a href= "https://www.linkedin.com/in/mirandairiarte/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
<p>Congress of Sciences iGEM</p>
 +
</td>
 +
      <td>
 +
<h6>Valeria Fuentes</h6>
 +
<p>Congress of Sciences iGEM</p>
 +
</td>
 +
      <td>
 +
<h6>Juan Fernández <a href= "https://www.linkedin.com/in/juanfernandezdelagarza/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
<p>Mathematical Model</p>
 +
      </td>
 +
      </tr>
 +
      <tr>
 +
      <td>
 +
<h6>Norma Garza <a href= "https://www.linkedin.com/in/norma-garza-893065126/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
 +
<p>Interlab managment/Drylab</p>
 +
</td>
 +
      <td>
 +
<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>
  
−
.container-multiple-items {
+
    <!-- Human Practices -->
−
  display: flex;
+
    <section id="HP" style="text-align: center;">
−
  flex-wrap: wrap;
+
      <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;">
−
  width: 90%;
+
      <div style="width: 40%; float: left; padding-right: 20px;">
−
  justify-content: space-evenly;
+
        <img src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg">
−
  margin: 0 auto;
+
      </div>
−
}
+
      <div style="width: 60%; float: right; padding-top: 60px">
 +
        <div class="header-title" style="color: #3582d2;">
 +
        Human Practices
 +
        </div>
 +
        <div class="header-subtitle" style="color: #5da565;">
 +
        Pollutants in Chiapas and Mexico
 +
        </div>
 +
        <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>
 +
      </div>
 +
      </div>
 +
    </section>
 +
</body>
 +
</html>
  
−
.profile-picture {
+
<!------------------------- INDEX.HTML ENDS --------------------------------------->
−
  height: 300px;
+
−
  width: 300px;
+
−
  border-radius: 50%
+
−
  background-size: 100%;
+
−
}
+
  
  
−
.service-icon {
+
<!------------------------- FOOTER STARTS ----------------------------------------->
−
  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 {
+
<html>
−
  padding: 15rem 0;
+
<body>
−
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
+
    <!-- Footer -->
−
  background-position: center center;
+
    <footer class="footer text-center">
−
  background-repeat: no-repeat;
+
      <div class="container row" style="margin: 0px auto;">
−
  background-size: cover;
+
        <div class="col-md-3">
−
}
+
            <h4 class="text-muted">Follow Us</h4>
 +
          <ul class="list-inline mb-5">
 +
          <li class="list-inline-item">
 +
            <a href="https://www.facebook.com/IgemTecMty" target="_blank"><i class="fa fa-facebook-square social-link" style="font-size: 100px;"></i></a>
 +
          </li>
 +
          <li class="list-inline-item">
 +
            <a href="https://twitter.com/igemtecmty" target="_blank"><i class="fa fa-twitter-square social-link" style="font-size: 100px;"></i></a>
 +
          </li>
 +
          <li class="list-inline-item">
 +
            <a href="mailto:igemtecmonterrey@gmail.com"><i class="fa fa-envelope-square social-link" style="font-size: 100px;"></i></a>
 +
          </li>
 +
          <li class="list-inline-item">
 +
            <a href="https://www.instagram.com/igemtecmty/" target="_blank"><i class="fa fa-instagram social-link" style="font-size: 100px;"></i></a>
 +
          </li>
 +
          <li style="padding-left:20px;">
 +
            <p class="text-muted" style="margin-bottom: 0;"><i class="fa fa-map-pin"></i> Av. Eugenio Garza Sada 2501</p><p class="text-muted">64849 Monterrey, Mexico</p>   
 +
          </li>
 +
          </ul>
 +
        </div>
 +
          <div class="col-md-6">
 +
            <h4 class="text-muted">Sponsors</h4>
 +
              <ul class="list-inline">
 +
                <li class="list-inline-item">
 +
                    <p class="text-muted">Waiting for a Miracle</p>
 +
                </li>
 +
              </ul>
 +
          </div>
 +
          <div class="col-md-3">
 +
            <h4 class="text-muted">Quote</h4>
 +
              <p class="text-muted">“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.”</p>
 +
              <p class="text-muted">Baum, 1995</p>
 +
          </div>
 +
      </div>
 +
        <div>
 +
            <p id="footerCopyright" class="text-muted small mb-0">Copyright &copy; 2018</p>
 +
          </div>
 +
    </footer>
  
−
.callout h2 {
+
     <!-- Optional JavaScript -->
−
  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;
+
−
}
+
−
 
+
−
.portfolio-item .caption .caption-content p {
+
−
  font-weight: 300;
+
−
  font-size: 1.2rem;
+
−
}
+
−
 
+
−
@media (min-width: 992px) {
+
−
  .portfolio-item {
+
−
     max-width: none;
+
−
    margin: 0;
+
−
  }
+
−
  .portfolio-item .caption {
+
−
    -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
+
−
    -webkit-clip-path: inset(0px);
+
−
    clip-path: inset(0px);
+
−
  }
+
−
  .portfolio-item .caption .caption-content {
+
−
    transition: opacity 0.25s;
+
−
    margin-left: 5rem;
+
−
    margin-right: 5rem;
+
−
    margin-bottom: 5rem;
+
−
  }
+
−
  .portfolio-item img {
+
−
    -webkit-transition: -webkit-clip-path 0.25s ease-out;
+
−
    -webkit-clip-path: inset(-1px);
+
−
    clip-path: inset(-1px);
+
−
  }
+
−
  .portfolio-item:hover img {
+
−
    -webkit-clip-path: inset(2rem);
+
−
    clip-path: inset(2rem);
+
−
  }
+
−
  .portfolio-item:hover .caption {
+
−
    background-color: rgba(29, 128, 159, 0.9);
+
−
    -webkit-clip-path: inset(2rem);
+
−
    clip-path: inset(2rem);
+
−
  }
+
−
}
+
−
 
+
−
footer.footer {
+
−
  padding-top: 5rem;
+
−
  padding-bottom: 5rem;
+
−
}
+
−
 
+
−
footer.footer .social-link {
+
−
  display: block;
+
−
  height: 4rem;
+
−
  width: 4rem;
+
−
  line-height: 4.3rem;
+
−
  font-size: 1.5rem;
+
−
  background-color: #1D809F;
+
−
  transition: background-color 0.15s ease-in-out;
+
−
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
−
}
+
−
 
+
−
footer.footer .social-link:hover {
+
−
  background-color: #155d74;
+
−
  text-decoration: none;
+
−
}
+
−
 
+
−
 
+
−
/**** CSS ? ****/
+
−
 
+
−
.btn-primary {
+
−
  background-color: #1D809F !important;
+
−
  border-color: #1D809F !important;
+
−
  color: #fff !important;
+
−
}
+
−
 
+
−
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+
−
  background-color: #155d74 !important;
+
−
  border-color: #155d74 !important;
+
−
}
+
−
 
+
−
.btn-secondary {
+
−
  background-color: #ecb807 !important;
+
−
  border-color: #ecb807 !important;
+
−
  color: #fff !important;
+
−
}
+
−
 
+
−
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
+
−
  background-color: #ba9106 !important;
+
−
  border-color: #ba9106 !important;
+
−
}
+
−
 
+
−
.btn-dark {
+
−
  color: #fff !important;
+
−
}
+
−
 
+
−
.btn {
+
−
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+
−
  font-weight: 700;
+
−
}
+
−
 
+
−
 
+
−
.bg-primary {
+
−
  background-color: #1D809F !important;
+
−
}
+
−
 
+
−
.text-primary {
+
−
  color: #1D809F !important;
+
−
}
+
−
 
+
−
.text-secondary {
+
−
  color: #ecb807 !important;
+
−
}
+
−
 
+
−
.hide {
+
−
    display: none;
+
−
}
+
−
 
+
−
/************Loader**************/
+
−
#loader-wrapper {
+
−
    position: fixed;
+
−
    top: 0;
+
−
    left: 0;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    z-index: 1000;
+
−
}
+
−
 
+
−
#loader {
+
−
    position: relative;
+
−
    left: 50%;
+
−
    top: 50%;
+
−
    width: 250px;
+
−
    height: 250px;
+
−
    margin: -125px 0 0 -125px;
+
−
    z-index: 1001;
+
−
}
+
−
 
+
−
#videoLoader {
+
−
    position:absolute;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    max-width: 100%;
+
−
}
+
−
 
+
−
#loader-wrapper .loader-section {
+
−
    position: fixed;
+
−
    width: 100%;
+
−
    height: 51%;
+
−
    background: rgb(216,228,222);
+
−
    z-index: 1000;
+
−
    -webkit-transform: translateY(0);
+
−
    -ms-transform: translateY(0);
+
−
    transform: translateY(0);
+
−
}
+
−
#loader-wrapper .loader-section.section-top {
+
−
    top: 0;
+
−
}
+
−
#loader-wrapper .loader-section.section-bottom {
+
−
    bottom: 0;
+
−
}
+
−
/* Loaded */
+
−
.loaded #loader-wrapper .loader-section.section-top {
+
−
    -webkit-transform: translateY(-100%);
+
−
    -ms-transform: translateY(-100%);
+
−
    transform: translateY(-100%);
+
−
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
}
+
−
.loaded #loader-wrapper .loader-section.section-bottom {
+
−
    -webkit-transform: translateY(100%);
+
−
    -ms-transform: translateY(100%);
+
−
    transform: translateY(100%);
+
−
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
}
+
−
.loaded #loader {
+
−
    opacity: 0;
+
−
    -webkit-transition: all 0.3s ease-out;
+
−
            -o-transition: all 0.3s ease-out;
+
−
            transition: all 0.3s ease-out;
+
−
}
+
−
.loaded #loader-wrapper {
+
−
    visibility: hidden;
+
−
}
+
−
/* JavaScript Turned Off */
+
−
.no-js #loader-wrapper {
+
−
    display: none;
+
−
}
+
−
</style>
+
−
       
+
−
    </head>
+
−
    <body id="page-top">   
+
−
       
+
−
        <!-- Header/NavBar-->
+
−
        <header class="masthead d-flex">
+
−
            <div id="navBar">
+
−
                <div id="navContainer">
+
−
                    <a href="#collapseProject">
+
−
                        <div class="container navbar-linkContainer" id="linkContainer_Project">
+
−
                            <span>Project</span>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapseParts">
+
−
                        <div class="container navbar-linkContainer" id="linkContainer_Parts">
+
−
                            <span>Parts</span>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapsePeople">
+
−
                        <div class="container navbar-linkContainer" id="linkContainer_People">
+
−
                            <span>People</span>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapseHP">
+
−
                        <div class="container navbar-linkContainer" id="linkContainer_HP">
+
−
                            <span>Human Practices</span>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapseModeling">
+
−
                        <div class="container navbar-linkContainer" id="linkContainer_Modeling">
+
−
                            <span>Modeling</span>
+
−
                        </div>
+
−
                    </a>
+
−
                </div>
+
−
            </div>
+
−
           
+
−
            <!-- Project collapsed -->
+
−
            <div class="collapse collapsedMenu" id="collapseProject">
+
−
                <div class="container">
+
−
                    <div class="height-support">
+
−
                    </div>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            <a href="#page-top">Overview</a>
+
−
                            <a href="#page-top">Description</a>
+
−
                            <a href="#page-top">Background</a>
+
−
                            <a href="#page-top">Design</a>
+
−
                            <a href="#page-top">Results</a>
+
−
                            <a href="#page-top">Safety</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
            <!-- Parts collapsed -->
+
−
            <div class="collapse collapsedMenu" id="collapseParts">
+
−
                <div class="container">
+
−
                    <div class="height-support">
+
−
                    </div>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            <a href="#page-top">Overview</a>
+
−
                            <a href="#page-top">Basic parts</a>
+
−
                            <a href="#page-top">Composite Parts</a>
+
−
                            <a href="#page-top">Parts Collection</a>
+
−
                            <a href="#page-top">Improved parts</a>
+
−
                            <a href="#page-top">Parts list</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
            <!-- People collapsed -->
+
−
            <div class="collapse collapsedMenu" id="collapsePeople">
+
−
                <div class="container" id="collapsedMenu">
+
−
                    <div class="height-support">
+
−
                    </div>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            <a href="#page-top">Overview</a>
+
−
                            <a href="#page-top">Team</a>
+
−
                            <a href="#page-top">Attributions</a>
+
−
                            <a href="#page-top">Collaborations</a>
+
−
                            <a href="#page-top">Sponsors</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PEOPLE
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PEOPLE
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PEOPLE
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PEOPLE
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PEOPLE
+
−
                        </li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
            <!-- HP collapsed -->
+
−
            <div class="collapse collapsedMenu" id="collapseHP">
+
−
                <div class="container">
+
−
                    <div class="height-support">
+
−
                    </div>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            <a href="#page-top">Overview</a>
+
−
                            <a href="#page-top">Silver HP</a>
+
−
                            <a href="#page-top">Integrated HP</a>
+
−
                            <a href="#page-top">Education</a>
+
−
                            <a href="#page-top">Public Engagement</a>
+
−
 
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            HUMAN PRACTICES
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            HUMAN PRACTICES
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            HUMAN PRACTICES
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            HUMAN PRACTICES
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            HUMAN PRACTICES
+
−
                        </li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
            <!-- Modeling collapsed -->
+
−
            <div class="collapse collapsedMenu" id="collapseModeling">
+
−
                <div class="container">
+
−
                    <div class="height-support">
+
−
                    </div>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            <a href="#page-top">Overview</a>
+
−
                            <a href="#page-top">Interlab</a>
+
−
                            <a href="#page-top">Software Tool</a>
+
−
                            <a href="#page-top">Lac Operon</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
           
+
−
           
+
−
            <div class="mask"></div>
+
−
        </header>
+
−
       
+
−
        <!-- Main -->
+
−
        <main>
+
−
            <!-- Intro -->
+
−
            <section id="intro">
+
−
                <video autoplay muted loop>
+
−
                    <source src="https://static.igem.org/mediawiki/2018/d/d7/T--Tec-Monterrey--videoTec.mp4">
+
−
                </video>
+
−
                <div class="container text-center my-auto" style="position: relative;">
+
−
                <h1 class="mb-1">iGEM: Tec de Monterrey</h1>
+
−
                <h3 class="mb-5">
+
−
                <em>Project: E-Coding</em>
+
−
                </h3>
+
−
                <a class="btn btn-primary btn-xl" href="#project">Learn about the project</a>
+
−
                  </div>
+
−
                <div class="overlay"></div>
+
−
            </section>
+
−
 
+
−
            <!-- Project -->
+
−
            <section id="project" style="background: #d3edf2; text-align: center;">
+
−
                <div style="width: 80%; margin: auto; text-align: justify; background: #f2fafc;">
+
−
                    <div style="width: 96%; margin: auto; text-align: justify; background: #fdfdfd; padding-top: 10px;">
+
−
                        <div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;">
+
−
                            <div class="header-title" style="color: #3582d2;">
+
−
                                E-Coding
+
−
                            </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>
+
−
            </section>
+
−
 
+
−
            <!-- Team-->
+
−
            <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;">
+
−
            <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;">
+
−
            <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;">
+
−
            <div>
+
−
            <table align="center" id="myTable">
+
−
            <tr>
+
−
            <th colspan="3" style="text-align:center;"><h5>Team Members</h5></th>
+
−
            </tr>
+
−
            <tr>
+
−
            <td>
+
−
            <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>
+
−
            <p>In charge of making the wiki</p>
+
−
            </td>
+
−
            <td>
+
−
            <h6>Alan Ávila <a href="https://www.linkedin.com/in/alanavilarmz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
            <p>Team Management/Wet Lab</p>
+
−
            </td>
+
−
            <td>
+
−
            <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>
+
−
            <p>Interlab managment & Dry Lab</p>
+
−
            </td>
+
−
            </tr>
+
−
            <tr>
+
−
            <td>
+
−
            <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>
+
−
            <p>In charge of Human Practices</p>
+
−
            </td>
+
−
            <td>
+
−
            <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>
+
−
            <p>Team Management</p>
+
−
            </td>
+
−
            <td>
+
−
            <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>
+
−
            <p>Team Management</p>
+
−
            </td>
+
−
            </tr>
+
−
            <tr>
+
−
            <td>
+
−
            <h6>Miranda Iriarte <a href= "https://www.linkedin.com/in/mirandairiarte/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
            <p>Congress of Sciences iGEM</p>
+
−
            </td>
+
−
            <td>
+
−
            <h6>Valeria Fuentes</h6>
+
−
            <p>Congress of Sciences iGEM</p>
+
−
            </td>
+
−
            <td>
+
−
            <h6>Juan Fernández <a href= "https://www.linkedin.com/in/juanfernandezdelagarza/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
            <p>Mathematical Model</p>
+
−
            </td>
+
−
            </tr>
+
−
            <tr>
+
−
            <td>
+
−
            <h6>Norma Garza <a href= "https://www.linkedin.com/in/norma-garza-893065126/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
            <p>Interlab managment/Drylab</p>
+
−
            </td>
+
−
            <td>
+
−
            <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>
+
−
 
+
−
            <!-- Human Practices -->
+
−
            <section id="HP" style="text-align: center;">
+
−
                <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;">
+
−
                    <div style="width: 40%; float: left; padding-right: 20px;">
+
−
                        <img src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg">
+
−
                    </div>
+
−
                    <div style="width: 60%; float: right; padding-top: 60px">
+
−
                        <div class="header-title" style="color: #3582d2;">
+
−
                            Human Practices
+
−
                        </div>
+
−
                        <div class="header-subtitle" style="color: #5da565;">
+
−
                            Pollutants in Chiapas and Mexico
+
−
                        </div>
+
−
                        <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>
+
−
                    </div>
+
−
                </div>
+
−
            </section>
+
−
 
+
−
        </main>
+
−
       
+
−
       
+
−
       
+
−
        <!-- Optional JavaScript -->
+
 
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
         <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>
 
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
−
       
 
 
         <!-- Script controls collapsedMenus -->
 
         <!-- Script controls collapsedMenus -->
 
         <script>
 
         <script>
−
           
+
 
−
           
+
−
           
+
 
             /*------------MENU STARTS-----------*/
 
             /*------------MENU STARTS-----------*/
 
              
 
              
Line 1,311: Line 1,295:
 
             $("#linkContainer_Project").hover(
 
             $("#linkContainer_Project").hover(
 
                 function () {
 
                 function () {
−
                     $('#navBar').css('background','#eef');
+
                     $('#navbar').css('background','#2A8481');
−
                     $("#linkContainer_Project").css('background','aquamarine');
+
                     $("#linkContainer_Project").addClass("active");
−
                     $('#collapseProject').stop().slideDown(200);
+
                     $("#linkContainer_ProjectChild").addClass("activeChild");
−
                     $(".mask").css('background','rgba(0,123,255,0.5)');
+
                     openMenu('#collapseProject', '#5DA565');
 +
                   
 
                 }, function () {
 
                 }, function () {
−
                     $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                     $("#linkContainer_Project").removeClass("active");
−
                     $("#linkContainer_Project").css('background','rgba(0,0,0,0)');
+
                     $("#linkContainer_ProjectChild").removeClass("activeChild");
−
                     $('#collapseProject').stop().slideUp(200);
+
                     closeMenu('#collapseProject');
−
                     $(".mask").css('background','rgba(0,0,0,0)');
+
                     colorNavbar();
 
                      
 
                      
 
                     $('#collapseProject').mouseenter(function(){
 
                     $('#collapseProject').mouseenter(function(){
−
                         $('#navBar').css('background','#eef');
+
                         $('#navbar').css('background','#2A8481');
−
                         $("#linkContainer_Project").css('background','aquamarine');
+
                         $("#linkContainer_Project").addClass("active");
−
                         $('#collapseProject').stop().slideDown(200);
+
                         $("#linkContainer_ProjectChild").addClass("activeChild");
−
                         $(".mask").css('background','rgba(0,123,255,0.5)');
+
                         openMenu('#collapseProject', '#5DA565');
 
                     });
 
                     });
 
                     $('#collapseProject').mouseleave(function(){
 
                     $('#collapseProject').mouseleave(function(){
−
                         $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                         colorNavbar();
−
                         $("#linkContainer_Project").css('background','rgba(0,0,0,0)');
+
                         $("#linkContainer_Project").removeClass("active");
−
                         $('#collapseProject').stop().slideUp(200);
+
                         $("#linkContainer_ProjectChild").removeClass("activeChild");
−
                         $(".mask").css('background','rgba(0,0,0,0)');
+
                         closeMenu('#collapseProject');
 
                     });
 
                     });
 
                 }
 
                 }
Line 1,338: Line 1,323:
 
             $("#linkContainer_Parts").hover(
 
             $("#linkContainer_Parts").hover(
 
                 function () {
 
                 function () {
−
                     $('#navBar').css('background','#eef');
+
                     $('#navbar').css('background','#2A8481');
−
                     $("#linkContainer_Parts").css('background','aquamarine');
+
                     $("#linkContainer_Parts").addClass("active");
−
                     $('#collapseParts').stop().slideDown(200);
+
                     $("#linkContainer_PartsChild").addClass("activeChild");
−
                     $(".mask").css('background','rgba(0,123,255,0.5)');
+
                     openMenu('#collapseParts', '#2cA555');
 
                 }, function () {
 
                 }, function () {
−
                     $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                     colorNavbar();
−
                     $("#linkContainer_Parts").css('background','rgba(0,0,0,0)');
+
                     $("#linkContainer_Parts").removeClass("active");
−
                     $('#collapseParts').stop().slideUp(200);
+
                     $("#linkContainer_PartsChild").removeClass("activeChild");
−
                     $(".mask").css('background','rgba(0,0,0,0)');
+
                     closeMenu('#collapseParts');
 
                      
 
                      
 
                     $('#collapseParts').mouseenter(function(){
 
                     $('#collapseParts').mouseenter(function(){
−
                         $('#navBar').css('background','#eef');
+
                         $('#navbar').css('background','#2A8481');
−
                         $("#linkContainer_Parts").css('background','aquamarine');
+
                         $("#linkContainer_Parts").addClass("active");
−
                         $('#collapseParts').stop().slideDown(200);
+
                         $("#linkContainer_PartsChild").addClass("activeChild");
−
                         $(".mask").css('background','rgba(0,123,255,0.5)');
+
                         openMenu('#collapseParts', '#2cA555');
 
                     });
 
                     });
 
                     $('#collapseParts').mouseleave(function(){
 
                     $('#collapseParts').mouseleave(function(){
−
                         $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                         colorNavbar();
−
                         $("#linkContainer_Parts").css('background','rgba(0,0,0,0)');
+
                         $("#linkContainer_Parts").removeClass("active");
−
                         $('#collapseParts').stop().slideUp(200);
+
                         $("#linkContainer_PartsChild").removeClass("activeChild");
−
                         $(".mask").css('background','rgba(0,0,0,0)');
+
                         closeMenu('#collapseParts');
 
                     });
 
                     });
 
                 }
 
                 }
Line 1,365: Line 1,350:
 
             $("#linkContainer_People").hover(
 
             $("#linkContainer_People").hover(
 
                 function () {
 
                 function () {
−
                     $('#navBar').css('background','#eef');
+
                     $('#navbar').css('background','#2A8481');
−
                     $("#linkContainer_People").css('background','aquamarine');
+
                     $("#linkContainer_People").addClass("active");
−
                     $('#collapsePeople').stop().slideDown(200);
+
                     $("#linkContainer_PeopleChild").addClass("activeChild");
−
                     $(".mask").css('background','rgba(0,123,255,0.5)');
+
                     openMenu('#collapsePeople', '#9bA545');
 
                 }, function () {
 
                 }, function () {
−
                     $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                     colorNavbar();
−
                     $("#linkContainer_People").css('background','rgba(0,0,0,0)');
+
                     $("#linkContainer_People").removeClass("active");
−
                     $('#collapsePeople').stop().slideUp(200);
+
                     $("#linkContainer_PeopleChild").removeClass("activeChild");
−
                     $(".mask").css('background','rgba(0,0,0,0)');
+
                     closeMenu('#collapsePeople');
 
                      
 
                      
 
                     $('#collapsePeople').mouseenter(function(){
 
                     $('#collapsePeople').mouseenter(function(){
−
                         $('#navBar').css('background','#eef');
+
                         $('#navbar').css('background','#2A8481');
−
                         $("#linkContainer_People").css('background','aquamarine');
+
                         $("#linkContainer_People").addClass("active");
−
                         $('#collapsePeople').stop().slideDown(200);
+
                         $("#linkContainer_PeopleChild").addClass("activeChild");
−
                         $(".mask").css('background','rgba(0,123,255,0.5)');
+
                         openMenu('#collapsePeople', '#9bA545');
 
                     });
 
                     });
 
                     $('#collapsePeople').mouseleave(function(){
 
                     $('#collapsePeople').mouseleave(function(){
−
                         $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                         colorNavbar();
−
                         $("#linkContainer_People").css('background','rgba(0,0,0,0)');
+
                         $("#linkContainer_People").removeClass("active");
−
                         $('#collapsePeople').stop().slideUp(200);
+
                         $("#linkContainer_PeopleChild").removeClass("activeChild");
−
                         $(".mask").css('background','rgba(0,0,0,0)');
+
                         closeMenu('#collapsePeople');
 
                     });
 
                     });
 
                 }
 
                 }
Line 1,392: Line 1,377:
 
             $("#linkContainer_HP").hover(
 
             $("#linkContainer_HP").hover(
 
                 function () {
 
                 function () {
−
                     $('#navBar').css('background','#eef');
+
                     $('#navbar').css('background','#2A8481');
−
                     $("#linkContainer_HP").css('background','aquamarine');
+
                     $("#linkContainer_HP").addClass("active");
−
                     $('#collapseHP').stop().slideDown(200);
+
                     $("#linkContainer_HPChild").addClass("activeChild");
−
                     $(".mask").css('background','rgba(0,123,255,0.5)');
+
                     openMenu('#collapseHP', '#7aA535');
 
                 }, function () {
 
                 }, function () {
−
                     $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                     colorNavbar();
−
                     $("#linkContainer_HP").css('background','rgba(0,0,0,0)');
+
                     $("#linkContainer_HP").removeClass("active");
−
                     $('#collapseHP').stop().slideUp(200);
+
                     $("#linkContainer_HPChild").removeClass("activeChild");
−
                     $(".mask").css('background','rgba(0,0,0,0)');
+
                     closeMenu('#collapseHP');
 
                      
 
                      
 
                     $('#collapseHP').mouseenter(function(){
 
                     $('#collapseHP').mouseenter(function(){
−
                         $('#navBar').css('background','#eef');
+
                         $('#navbar').css('background','#2A8481');
−
                         $("#linkContainer_HP").css('background','aquamarine');
+
                         $("#linkContainer_HP").addClass("active");
−
                         $('#collapseHP').stop().slideDown(200);
+
                         $("#linkContainer_HPChild").addClass("activeChild");
−
                         $(".mask").css('background','rgba(0,123,255,0.5)');
+
                         openMenu('#collapseHP', '#7aA535');
 
                     });
 
                     });
 
                     $('#collapseHP').mouseleave(function(){
 
                     $('#collapseHP').mouseleave(function(){
−
                         $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                         colorNavbar();
−
                         $("#linkContainer_HP").css('background','rgba(0,0,0,0)');
+
                         $("#linkContainer_HP").removeClass("active");
−
                         $('#collapseHP').stop().slideUp(200);
+
                         $("#linkContainer_HPChild").removeClass("activeChild");
−
                         $(".mask").css('background','rgba(0,0,0,0)');
+
                         closeMenu('#collapseHP');
 
                     });
 
                     });
 
                 }
 
                 }
Line 1,419: Line 1,404:
 
             $("#linkContainer_Modeling").hover(
 
             $("#linkContainer_Modeling").hover(
 
                 function () {
 
                 function () {
−
                     $('#navBar').css('background','#eef');
+
                     $('#navbar').css('background','#2A8481');
−
                     $("#linkContainer_Modeling").css('background','aquamarine');
+
                     $("#linkContainer_Modeling").addClass("active");
−
                     $('#collapseModeling').stop().slideDown(200);
+
                     $("#linkContainer_ModelingChild").addClass("activeChild");
−
                     $(".mask").css('background','rgba(0,123,255,0.5)');
+
                     openMenu('#collapseModeling', '#59A525');
 
                 }, function () {
 
                 }, function () {
−
                     $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                     colorNavbar();
−
                     $("#linkContainer_Modeling").css('background','rgba(0,0,0,0)');
+
                     $("#linkContainer_Modeling").removeClass("active");
−
                     $('#collapseModeling').stop().slideUp(200);
+
                     $("#linkContainer_ModelingChild").removeClass("activeChild");
−
                     $(".mask").css('background','rgba(0,0,0,0)');
+
                     closeMenu('#collapseModeling');
 
                      
 
                      
 
                     $('#collapseModeling').mouseenter(function(){
 
                     $('#collapseModeling').mouseenter(function(){
−
                         $('#navBar').css('background','#eef');
+
                         $('#navbar').css('background','#2A8481');
−
                         $("#linkContainer_Modeling").css('background','aquamarine');
+
                         $("#linkContainer_Modeling").addClass("active");
−
                         $('#collapseModeling').stop().slideDown(200);
+
                         $("#linkContainer_ModelingChild").addClass("activeChild");
−
                         $(".mask").css('background','rgba(0,123,255,0.5)');
+
                         openMenu('#collapseModeling', '#59A525');
 
                     });
 
                     });
 
                     $('#collapseModeling').mouseleave(function(){
 
                     $('#collapseModeling').mouseleave(function(){
−
                         $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
                         colorNavbar();
−
                         $("#linkContainer_Modeling").css('background','rgba(0,0,0,0)');
+
                         $("#linkContainer_Modeling").removeClass("active");
−
                         $('#collapseModeling').stop().slideUp(200);
+
                         $("#linkContainer_ModelingChild").removeClass("activeChild");
−
                         $(".mask").css('background','rgba(0,0,0,0)');
+
                         closeMenu('#collapseModeling');
 
                     });
 
                     });
 
                 }
 
                 }
 
             );
 
             );
 +
 +
            $("#navbarLogoWrapper").click(function() {
 +
              window.location.href = "https://2018.igem.org/Team:Tec-Monterrey";
 +
            });
 
              
 
              
 +
            function openMenu(collapseName, collapseColor) {
 +
              $(".topBar").css({'height':'100%'});
 +
              $(".mask").css({'background':'rgba(0,123,255,0.5)','height':'100%'});
 +
              $(collapseName).css({'background-color': collapseColor});
 +
              if($(".topBar").offset().top < 300){
 +
                $(collapseName).stop().fadeIn(300);
 +
              }else{
 +
                $(collapseName).stop().slideDown(400);
 +
              }
 +
            }
 
              
 
              
−
             // Change color after scroll
+
             function colorNavbar(){
 +
              if($(".topBar").offset().top > 300){
 +
                    $('#navbar').css('background','#2A8481');
 +
              }else{
 +
                    $('#navbar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
              }
 +
            }
 +
 
 +
            function closeMenu(collapseName){
 +
              $(".topBar").css({'height':'8vh'});
 +
              $(".mask").css({'background':'rgba(0,0,0,0)','height':'8vh'});
 +
              if($(".topBar").offset().top < 300){
 +
                $(collapseName).stop().fadeOut(200);
 +
              }else{
 +
                $(collapseName).stop().slideUp(300);
 +
              }
 +
            }
 +
       
 +
            $(window).scroll(colorNavbar);
 +
            $(document).ready(colorNavbar);
 
              
 
              
−
             $(window).bind('scroll', function() {
+
             $("#navbarLogoWrapper").click(function() {
−
                if ($(window).scrollTop() > 300) {
+
              window.location.href = "https://2018.igem.org/Team:Tec-Monterrey";
−
                    $('#navBar').css('background','#eef');
+
−
                } else {
+
−
                    $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
−
                }
+
 
             });
 
             });
−
       
 
 
              
 
              
 +
            $("#squeezedBtn").hover(
 +
                function () {
 +
                    $('#navbar').css('background','#2A8481');
 +
                    openMenu('#squeezedCollapse', '#2cA555');
 +
                }, function () {
 +
                    colorNavbar();
 +
                    $("#linkContainer_Parts").removeClass("active");
 +
                    $("#linkContainer_PartsChild").removeClass("activeChild");
 +
                    closeMenu('#squeezedCollapse');
 +
                   
 +
                    $('#squeezedCollapse').mouseenter(function(){
 +
                        $('#navbar').css('background','#2A8481');
 +
                        openMenu('#collapseParts', '#2cA555');
 +
                    });
 +
                    $('#squeezedCollapse').mouseleave(function(){
 +
                        colorNavbar();
 +
                        closeMenu('#squeezedCollapse');
 +
                    });
 +
                }
 +
            );
 +
 
             /*------------MENU ENDS-----------*/
 
             /*------------MENU ENDS-----------*/
−
           
 
−
           
 
 
         </script>
 
         </script>
−
    </body>
 
−
</html>
 
  
 +
<!-- Custom JavaScript
 +
    <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/StylishPortfolio?action=raw&ctype=text/javascript" type="text/javascript"></script>
 +
        <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/jqueryeasingmin?action=raw&ctype=text/javascript" type="text/javascript"></script> -->
 +
  </body>
 +
</html>
  
−
<!--{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} -->
+
<!------------------------- FOOTER ENDS ------------------------------------------->

Revision as of 16:44, 8 August 2018




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.



Follow Us

  • Av. Eugenio Garza Sada 2501

    64849 Monterrey, Mexico

Sponsors

  • Waiting for a Miracle

Quote

“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

Copyright © 2018