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

m
 
(147 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
+
  
−
-->
+
    <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 {
+
−
            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,
+
         .drag-drop {
−
        #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 *********************************************/
+
          
−
 
+
−
        /********************************** 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) {
+
−
            #navContainer {
+
−
                display: none;
+
−
            }
+
−
        }
+
 
     </style>
 
     </style>
−
</head>
 
  
−
<body>
 
  
−
    <!-- 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 id="navContainer">
 
−
                    <a href="#collapseProject">
 
−
                        <div class="navbar-linkContainer" id="linkContainer_Project">
 
−
                            <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">PROJECT</div>
 
−
                        </div>
 
−
                    </a>
 
−
                    <a href="#collapseParts">
 
−
                        <div class="navbar-linkContainer" id="linkContainer_Parts">
 
−
                            <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">PARTS</div>
 
−
                        </div>
 
−
                    </a>
 
−
                    <a href="#collapsePeople">
 
−
                        <div class="navbar-linkContainer" id="linkContainer_People">
 
−
                            <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">PEOPLE</div>
 
−
                        </div>
 
−
                    </a>
 
−
                    <a href="#collapseHP">
 
−
                        <div class="navbar-linkContainer" id="linkContainer_HP">
 
−
                            <div class="navbar-linkContainerChild" id="linkContainer_HPChild">HUMAN PRACTICES</div>
 
−
                        </div>
 
−
                    </a>
 
−
                    <a href="#collapseModeling">
 
−
                        <div class="navbar-linkContainer" id="linkContainer_Modeling">
 
−
                            <div class="navbar-linkContainerChild" id="linkContainer_ModelingChild">MODELING</div>
 
−
                        </div>
 
−
                    </a>
 
−
                </div>
 
−
            </div>
 
  
−
            <!-- Project collapsed -->
+
        <div 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>
−
            <div class="collapse collapsedMenu" id="collapseProject">
+
        <div id="dropzoneWrapper" style="background-color: black">
−
                <div class="containerCollapse">
+
            <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;">
−
                    <div class="height-support">
+
                <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
−
                    </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; left: 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="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.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;Pb</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="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="collapse collapsedMenu" id="collapsePeople">
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</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: 20vw; background-color: black; position: absolute; right: 0;">
−
             <div class="collapse collapsedMenu" id="collapseHP">
+
                 <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">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 style="background-color: black; height: 50%; text-align: center;">
−
            <!-- Modeling 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="collapseModeling">
+
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
−
                 <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>
 
             </div>
 
             </div>
−
 
+
             <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
−
             <!-- Squeezed collapsed -->
+
                <div id="outer-dropzone" class="dropzone">
−
            <div class="collapse collapsedMenu" id="sqCollapse">
+
                    <div id="backgroundHolder">
−
                <div class="containerCollapse" id="sqContainer">
+
                        <div id="colorsWrapper">
−
                    <div class="height-support">
+
                            <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">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>
 
             </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);
+
−
 
+
−
 
+
−
 
+
−
        /*--- Squeezed Menu ---*/
+
−
        $("#squeezedNavBtn").hover(
+
−
            function() {
+
−
                $('#navbar').css('background', '#2A8481');
+
−
                openMenu('#sqCollapse', '#2cA555');
+
−
            },
+
−
            function() {
+
−
                colorNavbar();
+
−
                closeMenu('#sqCollapse');
+
−
            }
+
−
        );
+
−
 
+
−
        $(document).on("vclick", "#squeezedNavBtn", function() {
+
−
            $("#sqContainer").css('background-color', 'blue');
+
−
        });
+
−
 
+
−
        /*------------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