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

m
 
(146 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!--
+
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
−
V3
+
<html>
  
−
Changes
+
<head>
−
* Menu shrinking
+
    <!-- Bootstrap required meta tags -->
−
* Side circles for navigation
+
    <meta charset="utf-8">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
 +
    <!-- Bootstrap css-->
 +
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
  
−
Detailed Changes
+
    <!-- Fonts -->
−
* Changed bootstrap reference at the end of footer (custom js for optional js part), not working on my computer
+
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
* Deleted sidebar for navigation when media is small, replaced it with some divs in the topbar
+
−
* New dot sidebar goes directly into main, because it's size depends on the page, it's not general.
+
−
* Changed media screen min max width in general format style
+
−
* SqueezedMenu SlideDown for mobile
+
−
     * Open/Close script goes on top of General_Format body, otherwise it won't work (why? idk) (only for this mobile functionality)
+
  
−
-->
+
    <style>
  
 +
        /**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW ***************************************************/
 +
/**********************************************************************************************************************/
 +
.slideshow {
 +
position: relative;
 +
width: 80%;
 +
height: 80%;
 +
        margin: 0 10%;
 +
        overflow-y: hidden;
 +
}
  
−
<!---{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}} ------>
+
.slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
−
<html>
+
position:absolute;
 +
right:0;
 +
top:0;
 +
height:100%;
 +
width:100px;
 +
background: rgba(0,0,0,0.3);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    z-index:75;
 +
    cursor:pointer;
 +
}
  
−
<head>
+
.slideshow .left-arrow-pane {
−
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
left:0;
−
    <!--bootstrap core css-->
+
width:82px;
−
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
+
right:auto;
−
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
+
}
  
 +
.slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow {
 +
position:absolute;
 +
top:50%;
 +
left:30%;
 +
transform:translate(-50%, -50%);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    /*z-index:50;*/
 +
}
  
−
    <!------- sidebar dots navigation ---->
+
.slideshow .left-arrow-pane .arrow {
−
    <link href="https://2016.igem.org/Team:Cornell_NY/sidebarstyle?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
+
right:30%;
−
    <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarmain?action=raw&ctype=text/javascript"></script>
+
left:auto;
−
    <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarmodernizr?action=raw&ctype=text/javascript"></script>
+
transform: translate(50%, -50%);
−
    <script type="text/javascript" src="https://2016.igem.org/Team:Cornell_NY/sidebarjquery?action=raw&ctype=text/javascript"></script>
+
}
  
 +
.slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{
 +
height:50px;
 +
width:50px;
 +
transform:rotate(45deg);
 +
border-style: solid;
 +
border-color: rgba(255, 255, 255, .5);
 +
border-width:5px 5px 0 0;
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
}
  
−
    <style>
+
.slideshow .left-arrow-pane .arrow div{
−
        /**************************************** Clear the default wiki settings *********************************/
+
transform:rotate(-135deg);
 +
}
  
−
        #home_logo,
+
.slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
−
        #sideMenu {
+
background:rgba(0,0,0,.25);
−
            display: none;
+
}
−
        }
+
  
−
        #sideMenu,
+
.slideshow .right-arrow-pane:hover .arrow {
−
        #top_title,
+
left:35%;
−
        .patrollink {
+
}
−
            display: none;
+
−
        }
+
  
−
        #content,
+
.slideshow .left-arrow-pane:hover .arrow {
−
        #HQ_page {
+
right:35%;
−
            width: 100%;
+
}
−
            padding: 0;
+
−
            margin: 0;
+
−
            background-color: white; //font-size: 100% !important;
+
−
        }
+
  
−
        #content {
+
.slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
−
            margin-top: -16px;
+
border-color:rgb(255,255,255);
−
        }
+
}
  
−
        #globalWrapper,
+
.slideshow .bubbles {
−
        #content,
+
position:absolute;
−
        #HQ_page,
+
width:100%;
−
        #bodyContent,
+
height:10%;
−
        #mw-content-text {
+
bottom:0;
−
            height: 100%;
+
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
−
            width: 100%;
+
display:flex;
−
        }
+
justify-content: center;
 +
z-index:50;
 +
}
  
−
        /*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/
+
.slideshow .bubbles div {
 +
height:30px;
 +
width:30px;
 +
border-radius:5px;
 +
border:solid white 3px;
 +
margin:0 20px 0 0;
 +
cursor:pointer;
 +
}
  
−
        #top_menu_14 {
+
.slideshow .bubbles div:last-child {
−
            box-sizing: initial;
+
margin-right: 0;
−
        }
+
}
  
−
        td a {
+
.slideshow .bubbles div:hover {
−
            padding-right: 0px !important;
+
background-color: white;
−
        }
+
}
  
−
        #globalWrapper {
+
.slideshow .bubbles div.active {
−
            padding-bottom: 0;
+
background-color:white;
−
        }
+
}
  
−
        /*************************************************** Bootstrap Stuff ************************************************/
+
.slideshow .pauseBtn {
 +
position:absolute;
 +
height:60px;
 +
width:60px;
 +
bottom:20px;
 +
right:150px;
 +
background:rgba(34,34,34,.75);
 +
border-radius:10px;
 +
z-index:60;
 +
}
  
−
        .portfolio-item .caption .caption-content p {
+
.slideshow .pauseBtn .bars {
−
            font-weight: 300;
+
visibility: hidden;
−
            font-size: 1.2rem;
+
position:absolute;
−
        }
+
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
width:30px;
 +
height:35px;
 +
}
  
−
        @media (min-width: 992px) {
+
.slideshow .pauseBtn .bars > div{
−
            .portfolio-item {
+
float:right;
−
                max-width: none;
+
width:10px;
−
                margin: 0;
+
height:100%;
−
            }
+
background:rgba(255,255,255,.75);
−
            .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);
+
−
            }
+
−
        }
+
  
−
        a {
+
.slideshow .pauseBtn .bars > div:first-child {
−
            color: #1D809F;
+
float:left;
−
        }
+
}
  
−
        a:hover,
+
.slideshow .pauseBtn:hover {
−
        a:focus,
+
background: rgba(34,34,34,1);
−
        a:active {
+
cursor: pointer;
−
            color: #155d74;
+
}
−
        }
+
  
−
        .btn-primary {
+
.slideshow .pauseBtn:hover .bars > div {
−
            background-color: #1D809F !important;
+
background: rgba(255,255,255,1);
−
            border-color: #1D809F !important;
+
}
−
            color: #fff !important;
+
−
        }
+
  
−
        .btn-primary:hover,
+
.slideshow .pauseBtn .tri {
−
        .btn-primary:focus,
+
visibility: hidden;
−
        .btn-primary:active {
+
position: absolute;
−
            background-color: #155d74 !important;
+
top:50%;
−
            border-color: #155d74 !important;
+
left:50%;
−
        }
+
transform: translate(-50%, -50%);
 +
}
  
−
        .btn {
+
.slideshow .pauseBtn .tri > div {
−
            box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+
width: 0;
−
            font-weight: 700;
+
height: 0;
−
        }
+
border-top: 18px solid transparent;
 +
border-left-style: solid;
 +
border-left-width: 30px;
 +
border-left-color:rgba(255,255,255,.75);
 +
border-bottom: 18px solid transparent;
 +
}
  
−
        .btn-xl {
+
.slideshow .pauseBtn:hover .tri > div{
−
            padding: 1.25rem 2.5rem;
+
border-left-color:rgba(255,255,255,1);
−
        }
+
}
  
−
        /*****************************************************custom css*****************************************************/
+
.slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
 +
visibility: visible;
 +
}
  
−
        @font-face {
+
.slideshow .content {
−
            font-family: "Norwester";
+
position:absolute;
−
            src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'),
+
top:0;
−
            url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype');
+
left:0;
−
         }
+
width:100%;
 +
height:100%;
 +
         overflow: hidden;
 +
}
  
−
        @font-face {
+
.slideshow .content .slide {
−
            font-family: "Montserrat";
+
visibility:hidden;
−
            src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
+
position:absolute;
−
            url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
+
top:0;
−
        }
+
left:0;
 +
height:100%;
 +
width:100%;
 +
overflow-y: hidden;
 +
-webkit-transition: left 1s;
 +
    -moz-transition: left 1s;
 +
    -ms-transition: left 1s;
 +
    -o-transition: left 1s;
 +
    transition: left 1s;
 +
}
 +
.slideshow .content .slide video, .slideshow .content .slide img {
 +
  width: 100%;
 +
  height: 100%;
 +
}
  
−
        @font-face {
+
.slideshow .content .slide:first-child {
−
            font-family: "DosisRegular";
+
visibility:visible;
−
            src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'),
+
left:0;
−
            url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype');
+
z-index: 1;
−
        }
+
        width: 100%;
 +
}
  
−
        body,
+
.slideshow .content .slide > img:first-child {
−
        html {
+
height:auto;
−
            width: 100%;
+
        width: 100%;
−
            height: 100%;
+
         overflow: hidden;
−
         }
+
}
  
−
        body {
+
.slideshow .content .slide.active {
−
            font-family: "DosisRegular", sans-serif !important;
+
left:0 !important;
−
        }
+
}
  
−
        ul {
+
.slideshow .content .slide.left {
−
            margin: 0 !important;
+
left:-100vw !important;
−
        }
+
}
  
−
        h1,
+
.slideshow .content .slide.right {
−
        h2,
+
left:100vw !important;
−
        h3,
+
}
−
        h4,
+
−
        h5,
+
−
        h6 {
+
−
            font-weight: 700;
+
−
            padding: 0 0 0 0;
+
−
            margin: 0 0 0 0;
+
−
        }
+
  
−
        .text-faded {
+
.splash .slideshow .title {
−
            color: rgba(255, 255, 255, 0.7);
+
top:65%;
−
        }
+
left:200px;
 +
}
  
−
        .masthead {
+
#HQ_page .slideshow .title p {
−
            height: 100%;
+
font-size:7em;
−
            width: 100%;
+
}
−
        }
+
  
−
        .header-top {
+
.notransition {
−
            height: 70%;
+
-webkit-transition: none !important;
−
            width: 100%;
+
    -moz-transition: none !important;
−
            position: relative;
+
    -ms-transition: none !important;
−
            background: rgb(248, 247, 246);
+
    -o-transition: none !important;
−
        }
+
    transition: none !important;
 +
}
 +
/**********************************************************************************************************************/
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW *****************************************************/
  
−
        .header-bottom {
 
−
            height: 30%;
 
−
            position: relative;
 
−
            background: white;
 
−
            padding: 10px 0px 10px 10px;
 
−
            margin: 0px 0px 0px 0px;
 
−
            "
 
  
−
        }
+
#scroll-section {
 +
  display: contents;
 +
}
 +
.header-main-page {
 +
  width: 100%;
 +
  height: 100%;
 +
  background: rgb(157,217,223);
 +
}
  
−
        .div-header-bottom {
+
#video-main-page {
−
            padding: 5px 0px 0px 10px;
+
  width: 100%;
−
            border-left: 10px solid #2f6361;
+
  background: #9dd8dd;
−
        }
+
  transition: all 0.6s;
 +
  position: fixed;
 +
  z-index: 200;
 +
}
 +
#skip-btn {
 +
  z-index: 201;
 +
  background: rgba(0,0,0,0.3);
 +
  color: whitesmoke;
 +
  font-size: 8vh;
 +
  width: 15vw;
 +
  height: 9vh;
 +
  line-height: 1em;
 +
  text-align: center;
 +
  position: fixed;
 +
  border-radius: 10px;
 +
  bottom: 1%;
 +
  right: 1%;
 +
  transition: all 0.2s;
 +
  -webkit-transition: all 0.2s;
 +
}
  
−
        .header-title {
+
#skip-btn:hover {
−
            font-family: "Norwester", sans-serif !important;
+
  cursor: pointer;
−
            text-align: left !important;
+
  background: rgba(0,0,0,0.5);
−
            font-size: 9vw;
+
}
−
            font-weight: 700 !important;
+
#bacteria-nadando {
−
            line-height: 1em;
+
  width: 30vw;
−
            padding-bottom: 0;
+
  height: 30vw;
−
            margin-bottom: -5px;
+
  left: 35vw;
−
            color: #3582d2;
+
  position: fixed;
−
        }
+
  z-index: 1;
 +
  background: url(https://static.igem.org/mediawiki/2018/7/74/T--Tec-Monterrey--Frame_1_interactive_gif.png);
 +
  background-size: cover;
 +
}
  
−
        .header-subtitle {
+
#hiding-block {
−
            font-family: "Montserrat", monospace;
+
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%);
−
            text-align: left !important;
+
  z-index: 3;
−
            font-size: 3.5vw;
+
  width: 100%;
−
            font-weight: 600 !important;
+
  height: 100vh;
−
            line-height: 1em;
+
  float: left;
−
            padding-bottom: 4px;
+
  position: sticky;
−
            color: #5da565;
+
}
−
        }
+
  
−
        .body-title {
+
#fixed-title {
−
            font-family: "Norwester", sans-serif !important;
+
  width: 50%;
−
            font-size: 4vw;
+
  height: 35vh;
−
            font-weight: 600 !important;
+
  font-size: 13vw;
−
            line-height: 1em;
+
  font-weight: 700;
−
            padding: 10px 0 10px 0;
+
  font-family: "DosisRegular", sans-serif;
−
            text-align: center;
+
  line-height: 1.2em;
−
        }
+
  text-align: center;
 +
  position: absolute;
 +
  left: 25%;
 +
  top: 25%;
 +
  z-index: 2;
 +
  color: rgba(246,246,246,0.9);
 +
}
  
−
        .body-title h1 {
+
#fixed-subtitle {
−
            margin: 0 !important;
+
  width: 100%;
−
        }
+
  font-size: 6vw;
 +
  font-weight: 500;
 +
  font-family: "Norwester", monospace;
 +
  line-height: 1.2em;
 +
  text-align: center;
 +
  z-index: 2;
 +
  color: rgba(47,99,97,0.6);
 +
}
  
−
        .body-subtitle {
+
.topBarWrapper {
−
            font-family: "Montserrat", monospace !important;
+
  display: contents !important;
−
            font-size: 2.5vw;
+
}
−
            font-weight: 400 !important;
+
−
            line-height: 1.2em;
+
−
            padding: 3% 0;
+
−
        }
+
  
−
        .scroll-to-top {
+
#background-river {
−
            position: fixed;
+
  height: auto;
−
            right: 10px;
+
  background-image: url(https://static.igem.org/mediawiki/2018/d/d0/T--Tec-Monterrey--Background_Rio.png);
−
            bottom: 10px;
+
  width: 100%;
−
            display: none;
+
  background-position-x: center;
−
            width: 50px;
+
  background-size: cover;
−
            height: 50px;
+
  background-repeat-y: no-repeat;
−
            text-align: center;
+
}
−
            color: white !important;
+
−
            background: rgba(52, 58, 64, 0.5);
+
−
            line-height: 45px;
+
−
        }
+
  
−
        .scroll-to-top:focus,
+
.main-info-container-left {
−
        .scroll-to-top:hover {
+
  width: 30%;
−
            color: white !important;
+
  height: auto;
−
        }
+
  margin-top: 30%;
 +
  margin-left: 2.5vw;
 +
  float: left;
 +
}
  
−
        .scroll-to-top:hover {
+
.main-info-container-right {
−
            background: #343a40;
+
  width: 30%;
−
        }
+
  height: auto;
 +
  margin-top: 50%;
 +
  margin-right: 2.5vw;
 +
  float: right;
 +
}
  
−
        .scroll-to-top i {
+
.main-info {
−
            font-weight: 800;
+
  width: 100%;
−
        }
+
  height: 30vw;
 +
  background: white;
 +
  margin-top: 40vh;
 +
}
  
−
        .hide {
+
@media screen and (max-width: 900px) {
−
            display: none;
+
  .main-info-container-left {
−
        }
+
    width: 40%;
 +
  }
 +
  .main-info-container-right {
 +
    width: 40%;
 +
  }
 +
  #bacteria-nadando {
 +
    display: none;
 +
  }
 +
  #hiding-block {
 +
    display: none;
 +
  }
 +
  #background-river {
 +
    height: 400vh;
 +
  }
 +
  #video-main-page {
 +
    display: none;
 +
  }
 +
  #skip-btn {
 +
    display: none;
 +
  }
 +
}
 +
    </style>
 +
</head>
  
−
        .footer {
+
<body>
−
            padding-top: 1rem;
+
−
            padding-bottom: 1rem;
+
−
            background: #404040;
+
−
        }
+
  
−
        #footerCopyright {
+
    <div id="scroll-section">
−
            text-align: center !important;
+
        <header id="page-top" class="header-main-page">
−
         }
+
         </header>
  
−
         .social-link {
+
         <div id="background-river">
−
             color: #6c757d;
+
             <div class="main-info-container-left">
−
        }
+
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
            </div>
 +
            <div class="main-info-container-right">
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
            </div>
 +
            <div id="hiding-block">
 +
            </div>
  
−
        .social-link:hover {
+
             <br class="clearBoth" />
−
             color: #eeeeee;
+
         </div> <!-- background-river ends -->
−
         }
+
  
−
         /******************************************************* TOPBAR MENU *********************************************/
+
         <div id="fixed-title">
 +
            E. coding
 +
            <div id="fixed-subtitle">Tec-Monterrey</div>
 +
        </div>
  
−
         #topBarWrapper {}
+
         <div id="bacteria-nadando">
 +
        </div>
 +
    </div> <!-- scroll section ends -->
  
−
        .topBar {
+
    <section style="height: 90vw">
−
            position: fixed;
+
        <style>
−
            top: 18px;
+
             #dropzoneWrapper {
−
             z-index: 2;
+
−
            height: 8vh;
+
 
             width: 100%;
 
             width: 100%;
 +
            height: auto;
 
         }
 
         }
−
 
+
         #outer-dropzone {
−
         #navbar {
+
             height: 60vw;
−
            position: fixed;
+
             width: 60vw;
−
            z-index: 2;
+
             left: 30vw;
−
             height: 8vh;
+
             touch-action: none;
−
             width: 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 {
+
         .dropzone {
−
             position: absolute;
+
             background-color: black;
−
             display: inline-block;
+
             border: dashed 4px transparent;
−
             height: 100%;
+
            border-radius: 4px;
−
             -webkit-transition: all 0.3s;
+
             padding: 10px;
−
             transition: all 0.3s;
+
             width: 80%;
 +
             transition: background-color 0.3s;
 
         }
 
         }
  
−
         #navbarLogoText {
+
         .drop-active {
−
             display: inline-block;
+
             border-color: #aaa;
−
            font-size: 1vw;
+
−
            color: white;
+
−
            opacity: 0;
+
−
            -webkit-transition: opacity 0.3s;
+
−
            transition: opacity 0.3s;
+
 
         }
 
         }
  
−
         #navbarLogo {
+
         .drop-target {
−
             height: 80%;
+
             background-color: #29e;
−
            margin-top: 5%;
+
             border-style: solid;
−
            margin-bottom: 15%;
+
−
            margin-left: 20px;
+
−
            padding-left: 20px;
+
−
             border-left: 1px solid white;
+
−
            display: inline-block;
+
 
         }
 
         }
  
−
         #navbarGif {
+
         .drag-drop {
−
            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;
 
             display: inline-block;
−
        }
+
            height: 10vh;
 +
            width: 10vh;
 +
            z-index: 50;
  
−
        #navbarLogoWrapper:hover {
+
             -webkit-transform: translate(0px, 0px);
−
             transform: scale(1.4, 1.4);
+
             transform: translate(0px, 0px);
−
             cursor: pointer;
+
−
        }
+
  
−
        #navbarLogoWrapper:hover>#navbarLogoText {
+
             transition: background-color 0.3s;
−
             opacity: 1;
+
 
         }
 
         }
  
−
         #navContainer {
+
         .drag-drop img {
−
            z-index: 2;
+
             position: absolute;
−
            height: 8vh;
+
−
            width: 80%;
+
−
            left: 10%;
+
−
             position: fixed;
+
−
            background-color: rgba(0, 0, 0, 0);
+
−
            color: #fff;
+
−
        }
+
−
 
+
−
        .navbar-linkContainer {
+
 
             height: 100%;
 
             height: 100%;
−
             width: 20%;
+
             width: 100%;
−
             color: white;
+
             border-radius: 50%;
−
            background-color: rgba(0, 0, 0, 0);
+
             z-index: 50;
−
            -webkit-transition: all 0.3s;
+
−
            transition: all 0.3s;
+
−
            position: relative;
+
−
            float: left;
+
−
             text-align: center;
+
 
         }
 
         }
  
−
         .navbar-linkContainerChild {
+
         .drag-drop.can-drop {
−
             position: absolute;
+
             color: #000;
−
            top: 0;
+
             /*background-color: #4e4;*/
−
            bottom: 0;
+
             z-index: 50;
−
            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);
+
         #backgroundHolder {
−
            border-radius: 5%;
+
             width: 60vw;
−
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+
             height: 60vw;
−
            background-color: #5da565;
+
             position: relative;
−
            -webkit-transition: all 0.3s;
+
−
            transition: all 0.3s;
+
−
         }
+
−
 
+
−
         .activeChild {
+
−
             border: 0;
+
−
        }
+
−
 
+
−
        .collapsedMenu {
+
−
             top: calc(8vh + 18px);
+
−
             position: fixed;
+
 
             z-index: 1;
 
             z-index: 1;
−
             width: 100%;
+
             background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png");
−
             background-color: aquamarine;
+
             background-repeat:no-repeat;
 +
            background-size: 100%;
 
         }
 
         }
−
 
+
          
−
         .containerCollapse {
+
         #interactive_Background {
−
            padding: 0 10px 30px 10px;
+
−
            width: 80%;
+
−
            margin-left: 10%;
+
−
         }
+
−
 
+
−
        .height-support {
+
−
            height: 20px;
+
−
            width: 100%;
+
−
        }
+
−
 
+
−
        .mask {
+
−
            height: 8vh;
+
−
            width: 100%;
+
−
            background-color: rgba(0, 0, 0, 0);
+
−
            z-index: 0;
+
−
        }
+
−
 
+
−
        .navbarList {
+
−
            float: left;
+
 
             height: 100%;
 
             height: 100%;
−
             width: 20%;
+
        }
 +
       
 +
        #plasmidHolder {
 +
             width: 60vw;
 +
            height: 60vw;
 +
            position: absolute;
 +
            z-index: 3;
 +
            background-image:url("https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 
         }
 
         }
−
 
+
       
−
         .navbarItem {
+
         #interactive_CutPlasmidFull {
 
             height: 100%;
 
             height: 100%;
 
         }
 
         }
−
 
+
       
−
         .navbarItemHeader {
+
         #colorsWrapper {
−
             display: inline-block;
+
             width: 60vw;
−
             position: relative;
+
             height: 60vw;
−
             font-family: "Norwester", sans-serif;
+
             position: absolute;
−
             font-weight: 500;
+
             z-index: 2;
−
             font-size: 1.8vw;
+
             background-repeat:no-repeat;
−
            color: black;
+
             background-size: 100%;
−
            text-decoration: none;
+
−
             padding-top: 10px;
+
−
            width: auto;
+
 
         }
 
         }
−
 
+
         #color1 {
−
         .navbarItemContent {
+
             opacity: 0;
−
             display: inline-block;
+
             left: 48%;
−
             position: relative;
+
             top: 54.5%;
−
             color: black;
+
             height: 8%;
−
            font-size: 1.5vw;
+
             width: 8%;
−
             line-height: 1.5em;
+
             background-color: yellow;
−
            text-decoration: none;
+
−
             width: auto;
+
−
             padding-top: 10px;
+
−
        }
+
−
 
+
−
        a.navbarItemHeader::after,
+
−
        a.navbarItemContent::after {
+
−
            content: "";
+
 
             position: absolute;
 
             position: absolute;
−
             width: 0;
+
             z-index:3;
−
            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;
+
−
            margin: 0;
+
 
         }
 
         }
−
 
+
         #color2 {
−
         a.navbarItemHeader:link,
+
             opacity: 0;
−
        a.navbarItemContent:link {
+
             left: 56%;
−
             color: black;
+
             top: 54.5%;
−
             text-decoration: none;
+
             height: 8%;
−
        }
+
             width: 8%;
−
 
+
−
        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;
+
−
        }
+
−
 
+
−
        a.navbarItemHeader:hover::after,
+
−
        a.navbarItemContent:hover::after {
+
−
            width: 100%;
+
−
            left: 0;
+
−
            background: #000;
+
−
        }
+
−
 
+
−
        .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;
+
−
        }
+
−
 
+
−
        #sqCollapse {
+
 
             background-color: red;
 
             background-color: red;
−
             height: 100%;
+
             position: absolute;
 +
            z-index:3;
 
         }
 
         }
−
 
+
         #color3 {
−
         #sqContainer {
+
            opacity: 0;
−
             background-color: red;
+
            left: 48%;
−
             height: 100%;
+
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
             background-color: aqua;
 +
             position: absolute;
 +
            z-index:3;
 
         }
 
         }
−
 
+
         #color4 {
−
         #sqContainer a:link {
+
             opacity: 0;
−
             font-size: 40px;
+
            left: 56%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: pink;
 +
            position: absolute;
 +
            z-index:3;
 
         }
 
         }
  
−
         /********************************************************* TOPBAR MENU ENDS *********************************************/
+
          
 +
    </style>
  
−
        /********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/
 
  
−
        @media screen and (min-width: 906px) {
 
−
            #squeezedNavBtn {
 
−
                display: none;
 
−
            }
 
−
        }
 
  
−
         @media screen and (max-width: 906px) {
+
         <div style="height: 10vh; width: 100%; background-color: black;"><p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">DRAG AND DROP!</p></div>
−
            #navContainer {
+
         <div id="dropzoneWrapper" style="background-color: black">
−
                display: none;
+
             <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;">
−
            }
+
                <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
−
        }
+
             </div>
−
    </style>
+
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
−
</head>
+
                <div style="background-color: black; height: 50%; text-align: center;">
−
 
+
                    <br>
−
<body>
+
                    <br>
−
   
+
                     <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
−
    <!--Mobile Jquery-->
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pb</p>
−
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
+
−
    <script type="text/javascript">
+
−
         /*--- Squeezed Menu ---*/
+
−
        var openSq = false;
+
−
        $(document).on( "vclick", "#squeezedNavBtn", function() {  // event vclick
+
−
             if (openSq) {
+
−
                $("#sqCollapse").stop().slideUp(400);
+
−
                openSq = false;
+
−
            } else {
+
−
                $("#sqCollapse").stop().slideDown(400);
+
−
                openSq = true;
+
−
            }
+
−
           
+
−
        });
+
−
    </script>
+
−
    <!-- Navigation Bar-->
+
−
    <!--------------------------------------------------------- TOPBAR MENU STARTS ------------------------------------------->
+
−
    <div id="squeezedBtnWrapper">
+
−
        <div id="squeezedNavBtn">
+
−
             <a href="#squeezedMenuDrop"><i class="fas fa-bars"></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>
−
                 <div id="navContainer">
+
                 <div style="background-color: black; height: 50%; text-align: center;">
−
                     <a href="#collapseProject">
+
                     <div id="esteban" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
−
                        <div class="navbar-linkContainer" id="linkContainer_Project">
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
−
                            <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>
−
            </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="" class="navbarItemHeader">Description</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Overview</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Introduction</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">The System</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Applications</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Prototype</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a class="navbarItemHeader">Design</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Background</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Module I</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Module II</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Module III</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Module IV</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a class="navbarItemHeader">Experiments</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Protocols</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Safety</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a class="navbarItemHeader">Notebook</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Calendar</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Meetings</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a class="navbarItemHeader">Results</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Overview</a>
 
−
                            <br>
 
−
                            <a class="navbarItemContent">Introduction</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <br class="clearBoth" />
 
−
                </div>
 
 
             </div>
 
             </div>
−
            <!-- Parts collapsed -->
+
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;">
−
             <div class="collapse collapsedMenu" id="collapseParts">
+
                 <div style="background-color: black; height: 50%; text-align: center;">
−
                 <div class="containerCollapse">
+
                     <br>
−
                    <div class="height-support">
+
                     <br>
−
                     </div>
+
                    <div id="acebae" class="drag-drop" style="margin: auto"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
−
                     <ul class="navbar-nav mr-auto navbarList">
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PO4</p>
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Basic Parts</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Overview</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Best Basic Part</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto navbarList">
+
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Composite Parts</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Overview</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Best Composite Part</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto navbarList">
+
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Parts Collection</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Best Parts</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto navbarList">
+
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Improved Parts</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Overview</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Part I</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Part II</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Part III</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Part IV</a>
+
−
                        </li>
+
−
                     </ul>
+
−
                    <ul class="navbar-nav mr-auto navbarList">
+
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Parts List</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <br class="clearBoth" />
+
 
                 </div>
 
                 </div>
−
            </div>
+
                 <div style="background-color: black; height: 50%; text-align: center;">
−
            <!-- People collapsed -->
+
                     <div id="sofi" class="drag-drop" style="margin:auto"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
−
            <div class="collapse collapsedMenu" id="collapsePeople">
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
−
                 <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">Team</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Header</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Team Members</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Advisors</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Instructors</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto navbarList">
+
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Collaborations</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Collab 1</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Collab 2</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Collab 3</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Collab 4</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto navbarList">
+
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Attributions</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Design Team</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Programmers</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Investigators</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Ex-iGEMers</a>
+
−
                        </li>
+
−
                     </ul>
+
−
                    <ul class="navbar-nav mr-auto navbarList">
+
−
                        <li class="nav-item navbarItem">
+
−
                            <a href="#page-top" class="navbarItemHeader">Sponsors</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Principal</a>
+
−
                            <br>
+
−
                            <a href="#page-top" class="navbarItemContent">Secondary</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <br class="clearBoth" />
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
             <!-- HP collapsed -->
+
             <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
−
            <div class="collapse collapsedMenu" id="collapseHP">
+
                <div id="outer-dropzone" class="dropzone">
−
                <div class="containerCollapse">
+
                    <div id="backgroundHolder">
−
                    <div class="height-support">
+
                        <div id="colorsWrapper">
 +
                            <div id="color1"></div>
 +
                            <div id="color2"></div>
 +
                            <div id="color3"></div>
 +
                            <div id="color4"></div>
 +
                        </div>
 +
                        <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')">
 +
                        </div>
 
                     </div>
 
                     </div>
−
                    <ul class="navbar-nav mr-auto navbarList">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a href="#page-top" class="navbarItemHeader">Chiapas</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Overview</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Sampling</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Analysis</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Reuslts</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">References</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a href="#page-top" class="navbarItemHeader">Integrated HP</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Gold HP</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">System Usage</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">References</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a href="#page-top" class="navbarItemHeader">Public Engagement</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Milenio News</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Conexion Tec</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Genobiotec</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Curiosamente</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Tec Review</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a href="#page-top" class="navbarItemHeader">Educational Engagement</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Seminar</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Congress</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Talks</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <br class="clearBoth" />
 
 
                 </div>
 
                 </div>
 
             </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" style="width: 25%;">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a href="#page-top" class="navbarItemHeader">Mathematical Model</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Overview</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Growth</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Enzimes</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto navbarList">
 
−
                        <li class="nav-item navbarItem">
 
−
                            <a href="#page-top" class="navbarItemHeader">InterLab</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Overview</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Protocols</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Absorbance</a>
 
−
                            <br>
 
−
                            <a href="#page-top" class="navbarItemContent">Fluorescence</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <br class="clearBoth" />
 
−
                </div>
 
−
            </div>
 
−
 
−
            <!-- Squeezed collapsed -->
 
−
            <div class="collapse collapsedMenu" id="sqCollapse">
 
−
                <div class="containerCollapse" id="sqContainer">
 
−
                    <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">Parts</a>
 
−
                            <a href="#page-top" class="navbarItemContent">People</a>
 
−
                            <a href="#page-top" class="navbarItemContent">Human Practices</a>
 
−
                            <a href="#page-top" class="navbarItemContent">Modeling</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <br class="clearBoth" />
 
−
                </div>
 
−
            </div>
 
−
 
−
            <div class="mask"></div>
 
 
         </div>
 
         </div>
−
    </div>
+
        <script>
−
    <!--------------------------------------------------------- TOPBAR MENU ENDS --------------------------------------------->
+
           
 +
            $(document).on('scroll', function() {
 +
                if($(this).scrollTop()>=$('#gifDiv').position().top){
 +
                    $("#gifDiv").css("background-color: green;");
 +
                    setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200);
 +
                }
 +
            });
 +
               
 +
                       
 +
        document.addEventListener("DOMContentLoaded", function(event) {
 +
            // target elements with the "draggable" class
 +
        interact('.draggable')
 +
            .draggable({
 +
                // enable inertial throwing
 +
                inertia: true,
 +
                // keep the element within the area of it's parent
 +
                restrict: {
 +
                    restriction: "#dropzoneWrapper",
 +
                    endOnly: true,
 +
                    elementRect: {
 +
                        top: 0,
 +
                        left: 0,
 +
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                // enable autoScroll
 +
                autoScroll: true,
  
−
    <!--Scroll to top button-->
+
                // call this function on every dragmove event
−
    <a class="scroll-to-top rounded" href="#page-top">
+
                onmove: dragMoveListener,
−
      <i class="fa fa-angle-up"></i>
+
                // call this function on every dragend event
−
    </a>
+
                onend: function(event) {
 +
                    var textEl = event.target.querySelector('p');
  
−
</body>
+
                    (textEl.textContent =
 +
                        'moved a distance of ' +
 +
                        (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
 +
                            Math.pow(event.pageY - event.y0, 2) | 0))
 +
                        .toFixed(2) + 'px');
 +
                }
 +
            });
  
−
</html>
+
        function dragMoveListener(event) {
 +
            var target = event.target,
 +
                // keep the dragged position in the data-x/data-y attributes
 +
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
 +
                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  
 +
            // translate the element
 +
            target.style.webkitTransform =
 +
                target.style.transform =
 +
                'translate(' + x + 'px, ' + y + 'px)';
  
−
<!---MAIN--->
+
            // update the posiion attributes
−
<html>
+
            target.setAttribute('data-x', x);
−
 
+
             target.setAttribute('data-y', y);
−
<head>
+
−
    <style>
+
−
        #globalWrapper {
+
−
             background: rgb(248, 247, 246);
+
 
         }
 
         }
  
−
        #myImage {
 
−
            position: absolute;
 
−
            top: 0;
 
−
            right: 0;
 
−
            max-width: 100%;
 
−
        }
 
  
−
         .masthead {
+
         /* The dragging code for '.draggable' from the demo above
−
            min-height: 30rem;
+
        * applies to this demo as well so it doesn't have to be repeated. */
−
            position: relative;
+
−
            width: 100%;
+
−
            padding-top: 8rem;
+
−
            padding-bottom: 8rem;
+
−
            background: rgb(248, 247, 246);
+
−
        }
+
  
−
         .masthead h1 {
+
         // enable draggables to be dropped into this
−
             font-size: 4rem;
+
        interact('.dropzone').dropzone({
−
             margin: 0;
+
             // only accept elements matching this CSS selector
−
             padding: 0;
+
             // accept: '#yes-drop',
−
        }
+
             // Require a 75% element overlap for a drop to be possible
 +
            overlap: 0.75,
  
−
        @media (min-width: 992px) {
+
             // listen for drop related events:
−
             .masthead {
+
−
                height: 100vh;
+
−
            }
+
−
            .masthead h1 {
+
−
                font-size: 5.5rem;
+
−
            }
+
−
        }
+
  
−
        #project {
+
             ondropactivate: function(event) {
−
             -webkit-transition: height 4s;
+
                // activates when you grab an object
−
            -moz-transition: height 4s;
+
                // add active dropzone feedback
−
            -ms-transition: height 4s;
+
                event.target.classList.add('drop-active');
−
            -o-transition: height 4s;
+
                //console.log("a");
−
            transition: height 4s;
+
             },
−
            height: auto;
+
             ondragenter: function(event) {
−
            background-image: url('/img/logoOficialCirculos.png');
+
                // activates when object enters dropzone
−
             background-repeat: no-repeat;
+
                var draggableElement = event.relatedTarget,
−
             background-position: center;
+
                    dropzoneElement = event.target;
−
            background-size: contain;
+
−
            text-align: center;
+
−
        }
+
  
−
        #team {
+
                // feedback the possibility of a drop
−
             text-align: center;
+
                dropzoneElement.classList.add('drop-target');
−
         }
+
                draggableElement.classList.add('can-drop');
 +
                // draggableElement.textContent = 'Dragged in';
 +
                //console.log("b");
 +
             },
 +
            ondragleave: function(event) {
 +
                // activates when object leaves dropzone
 +
                // remove the drop feedback style
 +
                event.target.classList.remove('drop-target');
 +
                event.relatedTarget.classList.remove('can-drop');
 +
                //event.relatedTarget.textContent = 'Dragged out';
 +
                //console.log("c");
 +
            },
 +
            ondrop: function(event) {
 +
                // activates when object is dropped in dropzone
 +
                // event.relatedTarget.textContent = 'Dropped';
 +
                var draggableElementID = event.relatedTarget.id;
 +
                if (event.relatedTarget.id == "alan") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color1").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "esteban") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                document.getElementById("color2").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "acebae") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color3").style.opacity = "1";
 +
                } else if (event.relatedTarget.id == "sofi") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("color4").style.opacity = "1";
 +
                }
 +
                //console.log("d");
 +
            },
 +
            ondropdeactivate: function(event) {
 +
                // activates when you drop an object anywhere
 +
                // remove active dropzone feedback
 +
                event.target.classList.remove('drop-active');
 +
                event.target.classList.remove('drop-target');
 +
                //console.log("e");
 +
            }
 +
         });
  
−
         #myTable {
+
         interact('.drag-drop')
−
             width: 95%;
+
             .draggable({
−
            margin: 0px auto !important;
+
                inertia: true,
−
            padding: 10px;
+
                restrict: {
−
            border: 2px solid rgb(1, 99, 60) !important;
+
                    restriction: "#dropzoneWrapper",
−
            border-collapse: collapse;
+
                    endOnly: true,
−
            vertical-align: middle !important;
+
                    elementRect: {
−
            table-layout: fixed;
+
−
        }
+
  
−
        #myTable td {
+
                        top: 0,
−
            width: 33%;
+
                        left: 0,
−
            border: 2px solid rgb(1, 99, 60) !important;
+
                        bottom: 1,
−
            border-collapse: collapse;
+
                        right: 1
−
            text-align: center;
+
                    }
−
            padding: 5px;
+
                },
−
        }
+
                autoScroll: true,
−
 
+
                // dragMoveListener from the dragging demo above
−
        #myTable p {
+
                onmove: dragMoveListener,
−
            text-align: center;
+
             });
−
            font-size: 14px;
+
         });
−
        }
+
     </script>
−
 
+
     </section>
−
        #HP {
+
     <section>
−
            background: rgb(248, 247, 246);
+
         <div class="slideshow">
−
        }
+
             <div class='right-arrow-pane'>
−
 
+
                 <div class='arrow'>
−
        .service-icon {
+
                     <div></div>
−
            background-color: #fff;
+
−
            color: #1D809F;
+
−
            height: 7rem;
+
−
            width: 7rem;
+
−
            display: block;
+
−
            line-height: 7.5rem;
+
−
            font-size: 2.25rem;
+
−
            box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
−
        }
+
−
 
+
−
        .callout {
+
−
            padding: 15rem 0;
+
−
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
+
−
            background-position: center center;
+
−
             background-repeat: no-repeat;
+
−
            background-size: cover;
+
−
        }
+
−
 
+
−
        .callout h2 {
+
−
            font-size: 3.5rem;
+
−
            font-weight: 700;
+
−
            display: block;
+
−
            max-width: 30rem;
+
−
         }
+
−
 
+
−
        .portfolio-item {
+
−
            display: block;
+
−
            position: relative;
+
−
            overflow: hidden;
+
−
            max-width: 530px;
+
−
            margin: auto auto 1rem;
+
−
        }
+
−
 
+
−
        .portfolio-item .caption {
+
−
            display: flex;
+
−
            height: 100%;
+
−
            width: 100%;
+
−
            background-color: rgba(33, 37, 41, 0.2);
+
−
            position: absolute;
+
−
            top: 0;
+
−
            bottom: 0;
+
−
            z-index: 1;
+
−
        }
+
−
 
+
−
        .portfolio-item .caption .caption-content {
+
−
            color: #fff;
+
−
            margin: auto 2rem 2rem;
+
−
        }
+
−
 
+
−
        .portfolio-item .caption .caption-content h2 {
+
−
            font-size: 0.8rem;
+
−
            text-transform: uppercase;
+
−
        }
+
−
     </style>
+
−
</head>
+
−
 
+
−
<body id="page-top">
+
−
     <!------------SideBar dots navigation -------->
+
−
 
+
−
    <a class="cd-nav-trigger cd-img-replace">Open navigation</a>
+
−
     <nav id="cd-vertical-nav">
+
−
        <ul class="list-unstyled">
+
−
            <li>
+
−
                <a href="#page-top" data-number="1">
+
−
            <span class="cd-dot"></span>
+
−
            <span class="cd-label">Item 1</span>
+
−
        </a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#project" data-number="2">
+
−
            <span class="cd-dot"></span>
+
−
            <span class="cd-label">Item 2</span>
+
−
        </a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#team" data-number="3">
+
−
            <span class="cd-dot"></span>
+
−
            <span class="cd-label">Item 3</span>
+
−
        </a>
+
−
            </li>
+
−
            <li>
+
−
                <a href="#HP" data-number="4">
+
−
            <span class="cd-dot"></span>
+
−
            <span class="cd-label">Item 4</span>
+
−
        </a>
+
−
            </li>
+
−
        </ul>
+
−
    </nav>
+
−
    <!-- 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 -->
+
−
    <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>
−
                <div style="border-top: 5px solid #397471; border-right: 5px solid #2a8481; padding: 20px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
+
            </div>
−
                    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.
+
            <div class='left-arrow-pane'>
−
                    <br>
+
                <div class='arrow'>
−
                     <br>
+
                     <div></div>
−
                    <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>
−
                 <div style="padding: 0px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
+
            </div>
−
                     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 class='bubbles'>
 +
            </div>
 +
            <div class='pauseBtn'>
 +
                 <div class='bars'>
 +
                     <div></div>
 +
                    <div></div>
 +
                </div>
 +
                <div class='tri'>
 +
                    <div></div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
             <div class='content'>
−
    </section>
+
                 <div class='slide'>
−
 
+
                     <video autoplay loop muted>
−
    <!-- Team-->
+
                         <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
−
    <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;">
+
                    </video>
−
        <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;">
+
                </div>
−
             <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;">
+
                <div class='slide'>
−
                 <div>
+
                    <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
−
                     <table align="center" id="myTable">
+
                </div>
−
                         <tr>
+
                <div class='slide'>
−
                            <th colspan="3" style="text-align:center;">
+
                    <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
−
                                <h5>Team Members</h5>
+
                </div>
−
                            </th>
+
                <div class='slide'>
−
                        </tr>
+
                    <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
−
                        <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>
 
             </div>
 
         </div>
 
         </div>
−
    </section>
 
  
−
     <!-- Human Practices -->
+
     <div class="slideshow">
−
    <section id="HP" style="text-align: center;">
+
         <div class='right-arrow-pane'>
−
         <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;">
+
             <div class='arrow'>
−
             <div style="width: 40%; float: left; padding-right: 20px;">
+
                 <div></div>
−
                 <img src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg">
+
 
             </div>
 
             </div>
−
            <div style="width: 60%; float: right; padding-top: 60px">
+
        </div>
−
                <div class="header-title" style="color: #3582d2;">
+
        <div class='left-arrow-pane'>
−
                    Human Practices
+
            <div class='arrow'>
−
                </div>
+
                 <div></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>
 
         </div>
 
         </div>
−
    </section>
+
        <div class='bubbles'>
−
</body>
+
        </div>
−
 
+
         <div class='pauseBtn'>
−
</html>
+
             <div class='bars'>
−
 
+
                 <div></div>
−
 
+
                 <div></div>
−
 
+
−
<!--{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} -->
+
−
<html>
+
−
 
+
−
<body>
+
−
    <!-- Footer -->
+
−
    <footer class="footer text-center">
+
−
         <div class="container row" style="margin: 0px auto;">
+
−
             <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>
−
             <div class="col-md-6">
+
             <div class='tri'>
−
                 <h4 class="text-muted">Sponsors</h4>
+
                 <div></div>
−
                <ul class="list-inline">
+
−
                    <li class="list-inline-item">
+
−
                        <p class="text-muted">Waiting for a Miracle</p>
+
−
                    </li>
+
−
                </ul>
+
 
             </div>
 
             </div>
−
             <div class="col-md-3">
+
        </div>
−
                 <h4 class="text-muted">Quote</h4>
+
        <div class='content'>
−
                <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>
+
             <div class='slide'>
−
                <p class="text-muted">Baum, 1995</p>
+
                <video autoplay loop muted>
 +
                    <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
 +
                 </video>
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
        <div>
+
    </div>
−
            <p id="footerCopyright" class="text-muted small mb-0">Copyright &copy; 2018</p>
+
−
        </div>
+
−
    </footer>
+
  
−
    <!-- Optional JavaScript -->
+
        <script>
−
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+
            var screen_900 = window.matchMedia("(max-width: 900px)");
−
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
            var screen_1024 = window.matchMedia("(min-width: 1024px)");
−
    <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>
+
            var screen_1280 = window.matchMedia("(min-width: 1280px)");
−
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
+
            var screen_1440 = window.matchMedia("(min-width: 1440px)");
 +
            var screen_1680 = window.matchMedia("(min-width: 1680px)");
 +
            var screen_1920 = window.matchMedia("(min-width: 1920px)");
 +
            var position = 3000;
  
−
    <!-- Script controls collapsedMenus -->
+
            $(window).on('beforeunload', function() {
−
    <script>
+
                $(window).scrollTop(0);
−
        /*------------MENU STARTS-----------*/
+
            });
  
−
        //Menu collapsing
+
            if (screen_900.matches) {
−
 
+
                var timeoutVar = 0;
−
        $("#linkContainer_Project").hover(
+
             } else if (screen_1024.matches) {
−
             function() {
+
                 position = 3450;
−
                 $('#navbar').css('background', '#2A8481');
+
                 var timeoutVar = setTimeout(function() {
−
                 $("#linkContainer_Project").addClass("active");
+
                    $(window).scrollTop(0);
−
                $("#linkContainer_ProjectChild").addClass("activeChild");
+
                 }, 8000);
−
                 openMenu('#collapseProject', '#b0e0e4');
+
             } else if (screen_1280.matches) {
−
 
+
                 position = 4500;
−
             },
+
                var timeoutVar = setTimeout(function() {
−
            function() {
+
                    $(window).scrollTop(0);
−
                 $("#linkContainer_Project").removeClass("active");
+
                 }, 8000);
−
                $("#linkContainer_ProjectChild").removeClass("activeChild");
+
            } else if (screen_1440.matches) {
−
                 closeMenu('#collapseProject');
+
                position = 6000;
−
                colorNavbar();
+
                 var timeoutVar = setTimeout(function() {
−
 
+
                     $(window).scrollTop(0);
−
                 $('#collapseProject').mouseenter(function() {
+
                }, 8000);
−
                     $('#navbar').css('background', '#2A8481');
+
            } else if (screen_1680.matches) {
−
                    $("#linkContainer_Project").addClass("active");
+
                position = 6500;
−
                     $("#linkContainer_ProjectChild").addClass("activeChild");
+
                var timeoutVar = setTimeout(function() {
−
                    openMenu('#collapseProject', '#b0e0e4');
+
                     $(window).scrollTop(0);
−
                });
+
                }, 8000);
−
                 $('#collapseProject').mouseleave(function() {
+
            } else if (screen_1920.matches) {
−
                    colorNavbar();
+
                position = 7500;
−
                     $("#linkContainer_Project").removeClass("active");
+
                 var timeoutVar = setTimeout(function() {
−
                     $("#linkContainer_ProjectChild").removeClass("activeChild");
+
                     $(window).scrollTop(0);
−
                    closeMenu('#collapseProject');
+
                }, 8000);
−
                 });
+
            } else {
 +
                var timeoutVar = setTimeout(function() {
 +
                     $(window).scrollTop(0);
 +
                 }, 8000);
 
             }
 
             }
−
        );
 
  
−
        $("#linkContainer_Parts").hover(
+
             function slideVideo() {
−
             function() {
+
                 $("#video-main-page").css('transform', 'translateY(-100%)');
−
                 $('#navbar').css('background', '#2A8481');
+
                 $("#skip-btn").css('transform', 'translateY(-100%)');
−
                $("#linkContainer_Parts").addClass("active");
+
                 $("#skip-btn").css({
−
                 $("#linkContainer_PartsChild").addClass("activeChild");
+
                     'top': '-10%'
−
                openMenu('#collapseParts', '#bae4e8');
+
−
            },
+
−
            function() {
+
−
                colorNavbar();
+
−
                 $("#linkContainer_Parts").removeClass("active");
+
−
                $("#linkContainer_PartsChild").removeClass("activeChild");
+
−
                closeMenu('#collapseParts');
+
−
 
+
−
                $('#collapseParts').mouseenter(function() {
+
−
                     $('#navbar').css('background', '#2A8481');
+
−
                    $("#linkContainer_Parts").addClass("active");
+
−
                    $("#linkContainer_PartsChild").addClass("activeChild");
+
−
                    openMenu('#collapseParts', '#bae4e8');
+
−
                });
+
−
                $('#collapseParts').mouseleave(function() {
+
−
                    colorNavbar();
+
−
                    $("#linkContainer_Parts").removeClass("active");
+
−
                    $("#linkContainer_PartsChild").removeClass("activeChild");
+
−
                    closeMenu('#collapseParts');
+
 
                 });
 
                 });
 
             }
 
             }
−
        );
 
  
−
        $("#linkContainer_People").hover(
+
             function map(value, in_min, in_max, out_min, out_max) {
−
             function() {
+
                 return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
−
                $('#navbar').css('background', '#2A8481');
+
−
                $("#linkContainer_People").addClass("active");
+
−
                $("#linkContainer_PeopleChild").addClass("activeChild");
+
−
                openMenu('#collapsePeople', '#caeaed');
+
−
            },
+
−
            function() {
+
−
                 colorNavbar();
+
−
                $("#linkContainer_People").removeClass("active");
+
−
                $("#linkContainer_PeopleChild").removeClass("activeChild");
+
−
                closeMenu('#collapsePeople');
+
−
 
+
−
                $('#collapsePeople').mouseenter(function() {
+
−
                    $('#navbar').css('background', '#2A8481');
+
−
                    $("#linkContainer_People").addClass("active");
+
−
                    $("#linkContainer_PeopleChild").addClass("activeChild");
+
−
                    openMenu('#collapsePeople', '#caeaed');
+
−
                });
+
−
                $('#collapsePeople').mouseleave(function() {
+
−
                    colorNavbar();
+
−
                    $("#linkContainer_People").removeClass("active");
+
−
                    $("#linkContainer_PeopleChild").removeClass("activeChild");
+
−
                    closeMenu('#collapsePeople');
+
−
                });
+
 
             }
 
             }
−
        );
 
  
−
        $("#linkContainer_HP").hover(
+
             //******************************************************* SCROLL OPACITY ***********************************************
−
             function() {
+
−
                $('#navbar').css('background', '#2A8481');
+
−
                $("#linkContainer_HP").addClass("active");
+
−
                $("#linkContainer_HPChild").addClass("activeChild");
+
−
                openMenu('#collapseHP', '#d8f0f2');
+
−
            },
+
−
            function() {
+
−
                colorNavbar();
+
−
                $("#linkContainer_HP").removeClass("active");
+
−
                $("#linkContainer_HPChild").removeClass("activeChild");
+
−
                closeMenu('#collapseHP');
+
  
−
                $('#collapseHP').mouseenter(function() {
+
            var hiding = document.getElementById("hiding-block");
−
                    $('#navbar').css('background', '#2A8481');
+
            var bacteria = document.getElementById("bacteria-nadando");
−
                    $("#linkContainer_HP").addClass("active");
+
−
                    $("#linkContainer_HPChild").addClass("activeChild");
+
−
                    openMenu('#collapseHP', '#d8f0f2');
+
−
                });
+
−
                $('#collapseHP').mouseleave(function() {
+
−
                    colorNavbar();
+
−
                    $("#linkContainer_HP").removeClass("active");
+
−
                    $("#linkContainer_HPChild").removeClass("activeChild");
+
−
                    closeMenu('#collapseHP');
+
−
                });
+
−
            }
+
−
        );
+
  
−
        $("#linkContainer_Modeling").hover(
+
             $(window).scroll(function(event) {
−
             function() {
+
−
                $('#navbar').css('background', '#2A8481');
+
−
                $("#linkContainer_Modeling").addClass("active");
+
−
                $("#linkContainer_ModelingChild").addClass("activeChild");
+
−
                openMenu('#collapseModeling', '#e7f6f7');
+
−
            },
+
−
            function() {
+
−
                colorNavbar();
+
−
                $("#linkContainer_Modeling").removeClass("active");
+
−
                $("#linkContainer_ModelingChild").removeClass("activeChild");
+
−
                closeMenu('#collapseModeling');
+
  
−
                 $('#collapseModeling').mouseenter(function() {
+
                 var hidingPos = hiding.offsetTop;
−
                    $('#navbar').css('background', '#2A8481');
+
                 var bacteriaPos = bacteria.offsetTop;
−
                    $("#linkContainer_Modeling").addClass("active");
+
−
                    $("#linkContainer_ModelingChild").addClass("activeChild");
+
−
                    openMenu('#collapseModeling', '#e7f6f7');
+
−
                 });
+
−
                $('#collapseModeling').mouseleave(function() {
+
−
                    colorNavbar();
+
−
                    $("#linkContainer_Modeling").removeClass("active");
+
−
                    $("#linkContainer_ModelingChild").removeClass("activeChild");
+
−
                    closeMenu('#collapseModeling');
+
−
                });
+
−
            }
+
−
        );
+
  
−
        $("#navbarLogoWrapper").click(function() {
+
                var scroll = $(window).scrollTop();
−
            window.location.href = "https://2018.igem.org/Team:Tec-Monterrey";
+
                var scrollOpacity = map(scroll, 0, 350, 1, 0);
−
        });
+
                //var scrollFade = map(scroll, 350, 0, 0, 1);
−
 
+
                var bacteriaOpacity = map(scroll, 0, 500, 0, 1);
−
        function openMenu(collapseName, collapseColor) {
+
                var bacteriaTop = map(scroll, 900, 2000, -100, 100);
−
            $(".topBar").css({
+
                var bacteriaRotate = map(scroll, 0, 700, 50, 0);
−
                 'height': '100%'
+
                if (scroll > hidingPos) {
 +
                    $('#bacteria-nadando ').css('opacity', '0');
 +
                 } else {
 +
                    $('#bacteria-nadando ').css('opacity', bacteriaOpacity);
 +
                    $('#bacteria-nadando ').css('top', bacteriaTop + 'px');
 +
                }
 
             });
 
             });
−
            $(".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);
 
−
            }
 
−
        }
 
  
−
        function colorNavbar() {
+
             //******************************************************* Video Controls *******************************************
−
             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) {
+
             $("#video-main-page").bind("ended", function() {
−
             $(".topBar").css({
+
                 slideVideo()
−
                 'height': '8vh'
+
 
             });
 
             });
−
             $(".mask").css({
+
 
−
                 'background': 'rgba(0,0,0,0)',
+
             $("#skip-btn").click(function() {
−
                 'height': '8vh'
+
                 clearTimeout(timeoutVar);
 +
                $(window).scrollTop(0);
 +
                 slideVideo();
 
             });
 
             });
−
             if ($(".topBar").offset().top < 300) {
+
              
−
                $(collapseName).stop().fadeOut(200);
+
              
−
             } else {
+
         </script>
−
                $(collapseName).stop().slideUp(300);
+
        <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
−
            }
+
action=raw&ctype=text/javascript"></script>
−
         }
+
    </section>
−
 
+
−
        $(window).scroll(colorNavbar);
+
−
        $(document).ready(colorNavbar);
+
−
       
+
−
        /*------------MENU ENDS-----------*/
+
−
    </script>
+
−
 
+
−
 
+
−
    <!-- 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>
 
</body>
  
 
</html>
 
</html>
 +
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Latest revision as of 01:29, 18 October 2018


E. coding
Tec-Monterrey

DRAG AND DROP!



     Pb

     NO3



     PO4

     As

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors