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

(TestMenu)
m
 
(157 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!-- GENERAL TEMPLATE BEGINS -->
+
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
−
<!doctype html>
+
 
<html>
 
<html>
−
    <head>
 
−
       
 
−
        <!-- Bootstrap required meta tags -->
 
−
        <meta charset="utf-8">
 
−
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
−
       
 
−
        <!-- Bootstrap css-->
 
−
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 
−
        <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
−
       
 
−
        <!-- Custom scripts for this template
 
−
        <script src="js/stylish-portfolio.js" type="text/javascript"></script>
 
−
        -->
 
−
       
 
−
        <!-- Fonts -->
 
−
        <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
−
        <style>
 
−
            /****************************************
 
−
            Clear the default wiki settings *********************************/
 
−
           
 
−
           
 
−
           
 
−
            /*** Custom scrollbar ***/   
 
−
            html {
 
−
                overflow: auto;
 
−
                overflow-x: hidden;
 
−
            }
 
−
            ::-webkit-scrollbar {
 
−
                background: #cccccc;
 
−
            }
 
−
            ::-webkit-scrollbar-thumb {
 
−
                background: #103010;
 
−
            }
 
−
            ::-webkit-scrollbar-thumb:hover{
 
−
                background: #155015;
 
−
            }
 
−
                #home_logo, #sideMenu {
 
−
                display:none;
 
−
                }
 
−
                #sideMenu, #top_title, .patrollink  {
 
−
                display:none;
 
−
                }
 
−
                #content, #HQ_page {
 
−
                    width: 100%;
 
−
                    padding: 0;
 
−
                    margin: 0;
 
−
                    background-color: white;
 
−
                }
 
−
            /*Bootstrap.min altered the way the top menu looks by changing box-sizing: from border-box to initial, the damage is undone*/
 
−
                #top_menu_14 {
 
−
                    box-sizing: initial;
 
−
                }
 
−
           
 
−
            /**** Footer ****/
 
  
−
            footer.footer {
+
<head>
−
              padding-top: 5rem;
+
    <!-- Bootstrap required meta tags -->
−
              padding-bottom: 5rem;
+
    <meta charset="utf-8">
−
            }
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
−
            footer.footer .social-link {
+
    <!-- Bootstrap css-->
−
              display: block;
+
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
              height: 4rem;
+
−
              width: 4rem;
+
−
              line-height: 4.3rem;
+
−
              font-size: 1.5rem;
+
−
              background-color: #1D809F;
+
−
              transition: background-color 0.15s ease-in-out;
+
−
              box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
−
            }
+
  
−
            footer.footer .social-link:hover {
+
     <!-- Fonts -->
−
              background-color: #155d74;
+
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
              text-decoration: none;
+
−
            }
+
−
           
+
−
        </style>
+
−
    </head>
+
−
    <body id="page-top">
+
−
   
+
−
     <!--Scroll to top button-->
+
−
     <a class="scroll-to-top rounded" href="#page-top">
+
−
      <i class="fa fa-angle-up"></i>
+
−
    </a>
+
  
−
     </body>
+
     <style>
−
</html>
+
−
<!-- GENERAL TEMPLATE ENDS -->
+
  
−
<html lang="en">
+
         /**********************************************************************************************************************/
−
    <head>
+
/******************************************************* SLIDESHOW ***************************************************/
−
         <style>
+
/**********************************************************************************************************************/
−
              /*Override iGem default wiki settings */
+
.slideshow {
−
#home_logo, #sideMenu {
+
position: relative;
−
    display:none;
+
width: 80%;
−
    }
+
height: 80%;
−
    #sideMenu, #top_title, .patrollink  {
+
         margin: 0 10%;
−
    display:none;
+
         overflow-y: hidden;
−
    }
+
}
−
    #content, #HQ_page {
+
−
        width: 100%;
+
−
        padding: 0;
+
−
         margin: 0;
+
−
         background-color: white;
+
−
    }
+
  
 +
.slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
 +
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;
 +
}
  
−
/****  custom css    ****/
+
.slideshow .left-arrow-pane {
−
body, html {
+
left:0;
−
    width: 100%;
+
width:82px;
−
    height: 100%;
+
right:auto;
 
}
 
}
−
body {
+
 
−
     font-family:sans-serif;
+
.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;*/
 
}
 
}
  
−
ul{
+
.slideshow .left-arrow-pane .arrow {
−
    margin: 0 !important;
+
right:30%;
 +
left:auto;
 +
transform: translate(50%, -50%);
 
}
 
}
−
.btn-xl {
+
 
−
     padding: 1.25rem 2.5rem;
+
.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;
 
}
 
}
  
−
h1, h2, h3, h4, h5, h6 {
+
.slideshow .left-arrow-pane .arrow div{
−
    font-weight: 700;
+
transform:rotate(-135deg);
 
}
 
}
−
.text-faded {
+
 
−
    color: rgba(255, 255, 255, 0.7);
+
.slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
 +
background:rgba(0,0,0,.25);
 
}
 
}
  
−
ul {
+
.slideshow .right-arrow-pane:hover .arrow {
−
    margin:0;
+
left:35%;
 
}
 
}
−
.scroll-to-top {
+
 
−
    position: fixed;
+
.slideshow .left-arrow-pane:hover .arrow {
−
    right: 10px;
+
right:35%;
−
    bottom: 10px;
+
−
    display: none;
+
−
    width: 50px;
+
−
    height: 50px;
+
−
    text-align: center;
+
−
    color: white;
+
−
    background: rgba(52, 58, 64, 0.5);
+
−
    line-height: 45px;
+
 
}
 
}
  
−
.scroll-to-top:focus, .scroll-to-top:hover {
+
.slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
−
    color: white;
+
border-color:rgb(255,255,255);
 
}
 
}
  
−
.scroll-to-top:hover {
+
.slideshow .bubbles {
−
    background: #343a40;
+
position:absolute;
 +
width:100%;
 +
height:10%;
 +
bottom:0;
 +
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
 +
display:flex;
 +
justify-content: center;
 +
z-index:50;
 
}
 
}
  
−
.scroll-to-top i {
+
.slideshow .bubbles div {
−
    font-weight: 800;
+
height:30px;
−
}          
+
width:30px;
 +
border-radius:5px;
 +
border:solid white 3px;
 +
margin:0 20px 0 0;
 +
cursor:pointer;
 +
}
  
−
/**** NAVBAR ****/
+
.slideshow .bubbles div:last-child {
−
.masthead {
+
margin-right: 0;
−
    position: fixed;
+
−
    top: 20px;
+
−
    z-index: 2;
+
−
    height: 60px;
+
−
    width: 100%;
+
 
}
 
}
  
−
#navBar {
+
.slideshow .bubbles div:hover {
−
    position: fixed;
+
background-color: white;
−
    z-index: 2;
+
−
    height: 60px;
+
−
    width: 100%;
+
−
    background: rgb(0,0,0);
+
−
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%);
+
 
}
 
}
  
−
#navContainer {
+
.slideshow .bubbles div.active {
−
    z-index: 2;
+
background-color:white;
−
    top:20px;
+
−
    height: 60px;
+
−
    width: 80%;
+
−
    left: 10%;
+
−
    position: fixed;
+
−
    background-color: rgba(0,0,0,0);
+
 
}
 
}
  
−
.nav-link {
+
.slideshow .pauseBtn {
−
    height: 100%;
+
position:absolute;
−
    width: 150px;
+
height:60px;
−
    position: relative;
+
width:60px;
−
    float: left;
+
bottom:20px;
 +
right:150px;
 +
background:rgba(34,34,34,.75);
 +
border-radius:10px;
 +
z-index:60;
 
}
 
}
  
 +
.slideshow .pauseBtn .bars {
 +
visibility: hidden;
 +
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
width:30px;
 +
height:35px;
 +
}
  
−
.navbar-linkContainer {
+
.slideshow .pauseBtn .bars > div{
−
    height: 100%;
+
float:right;
−
    width: 150px;
+
width:10px;
−
    background-color: rgba(0,0,0,0); /* transparent */
+
height:100%;
−
    position: relative;
+
background:rgba(255,255,255,.75);
−
    float: left;
+
−
    text-align: center;
+
−
    vertical-align: middle;
+
 
}
 
}
  
−
.navbar-linkContainer:hover {
+
.slideshow .pauseBtn .bars > div:first-child {
−
    background-color: aquamarine;
+
float:left;
 
}
 
}
  
−
.collapsedMenu {
+
.slideshow .pauseBtn:hover {
−
    top: 20px;
+
background: rgba(34,34,34,1);
−
    position: fixed;
+
cursor: pointer;
−
    z-index: 1;
+
−
    background-color: aquamarine;
+
−
    width: 100%;
+
 
}
 
}
  
−
.height-support {
+
.slideshow .pauseBtn:hover .bars > div {
−
    height: 60px;
+
background: rgba(255,255,255,1);
−
    width: 100%;
+
 
}
 
}
−
/*** NAVBAR ENDS ***/
 
  
−
/*** HEADER ENDS ***/
+
.slideshow .pauseBtn .tri {
 +
visibility: hidden;
 +
position: absolute;
 +
top:50%;
 +
left:50%;
 +
transform: translate(-50%, -50%);
 +
}
  
 +
.slideshow .pauseBtn .tri > div {
 +
width: 0;
 +
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;
 +
}
  
−
/*** INTRO ***/
+
.slideshow .pauseBtn:hover .tri > div{
 +
border-left-color:rgba(255,255,255,1);
 +
}
  
−
#intro {
+
.slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
−
    top: 20;
+
visibility: visible;
−
    position: relative;
+
−
    width: 100%;
+
−
    padding-top: 8rem;
+
−
    padding-bottom: 8rem;
+
−
    color: rgba(57,187,104,0.7);
+
 
}
 
}
  
−
#intro h1 {
+
.slideshow .content {
−
  font-size: 4rem;
+
position:absolute;
−
  margin: 0;
+
top:0;
−
  padding: 0;
+
left:0;
 +
width:100%;
 +
height:100%;
 +
        overflow: hidden;
 
}
 
}
  
−
#intro video {
+
.slideshow .content .slide {
−
    position: absolute;
+
visibility:hidden;
−
    top: 0;
+
position:absolute;
−
     margin: auto;
+
top:0;
−
     height: 100%;
+
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%;
 
}
 
}
  
−
@media (min-width: 992px) {
+
.slideshow .content .slide:first-child {
−
    #intro {
+
visibility:visible;
−
        height: 55.5vw;
+
left:0;
−
    }
+
z-index: 1;
−
    #intro h1 {
+
−
        font-size: 5.5rem;
+
−
    }
+
−
   
+
−
    #intro video {
+
−
        height: auto;
+
 
         width: 100%;
 
         width: 100%;
−
    }
 
 
}
 
}
  
−
/*** INTRO ENDS ***/
+
.slideshow .content .slide > img:first-child {
 +
height:auto;
 +
        width: 100%;
 +
        overflow: hidden;
 +
}
  
−
#project {
+
.slideshow .content .slide.active {
−
    -webkit-transition: height 4s;
+
left:0 !important;
−
  -moz-transition: height 4s;
+
−
  -ms-transition: height 4s;
+
−
  -o-transition: height 4s;
+
−
    transition: height 4s;
+
−
    height: auto;
+
−
    background-image: url('/img/logoOficialCirculos.png');
+
−
    background-repeat: no-repeat;
+
−
    background-position: center;
+
−
    background-size: contain;
+
 
}
 
}
  
−
#project.active {
+
.slideshow .content .slide.left {
−
    -webkit-transition: height 4s;
+
left:-100vw !important;
−
  -moz-transition: height 4s;
+
−
  -ms-transition: height 4s;
+
−
  -o-transition: height 4s;
+
−
    transition: height 4s;
+
−
    height: 100%;
+
−
    background-image: url('/img/logoOficialCirculos.png');
+
−
    background-repeat: no-repeat;
+
−
    background-position: center;
+
−
    background-size: contain;
+
 
}
 
}
  
−
.container-multiple-items {
+
.slideshow .content .slide.right {
−
  display: flex;
+
left:100vw !important;
−
  flex-wrap: wrap;
+
−
  width: 90%;
+
−
  justify-content: space-evenly;
+
−
  margin: 0 auto;
+
 
}
 
}
  
−
.profile-picture {
+
.splash .slideshow .title {
−
  height: 300px;
+
top:65%;
−
  width: 300px;
+
left:200px;
−
  border-radius: 50%
+
−
  background-size: 100%;
+
 
}
 
}
  
 +
#HQ_page .slideshow .title p {
 +
font-size:7em;
 +
}
  
−
.service-icon {
+
.notransition {
−
  background-color: #fff;
+
-webkit-transition: none !important;
−
  color: #1D809F;
+
    -moz-transition: none !important;
−
  height: 7rem;
+
    -ms-transition: none !important;
−
  width: 7rem;
+
    -o-transition: none !important;
−
  display: block;
+
    transition: none !important;
−
  line-height: 7.5rem;
+
−
  font-size: 2.25rem;
+
−
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
 
}
 
}
 +
/**********************************************************************************************************************/
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW *****************************************************/
  
−
.callout {
+
 
−
   padding: 15rem 0;
+
#scroll-section {
−
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
+
  display: contents;
−
   background-position: center center;
+
}
−
   background-repeat: no-repeat;
+
.header-main-page {
 +
   width: 100%;
 +
  height: 100%;
 +
   background: rgb(157,217,223);
 +
}
 +
 
 +
#video-main-page {
 +
  width: 100%;
 +
  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;
 +
}
 +
 
 +
#skip-btn:hover {
 +
  cursor: pointer;
 +
  background: rgba(0,0,0,0.5);
 +
}
 +
#bacteria-nadando {
 +
  width: 30vw;
 +
  height: 30vw;
 +
  left: 35vw;
 +
   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;
 
   background-size: cover;
 
}
 
}
  
−
.callout h2 {
+
#hiding-block {
−
   font-size: 3.5rem;
+
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%);
 +
  z-index: 3;
 +
  width: 100%;
 +
  height: 100vh;
 +
  float: left;
 +
  position: sticky;
 +
}
 +
 
 +
#fixed-title {
 +
  width: 50%;
 +
  height: 35vh;
 +
   font-size: 13vw;
 
   font-weight: 700;
 
   font-weight: 700;
−
   display: block;
+
   font-family: "DosisRegular", sans-serif;
−
   max-width: 30rem;
+
   line-height: 1.2em;
 +
  text-align: center;
 +
  position: absolute;
 +
  left: 25%;
 +
  top: 25%;
 +
  z-index: 2;
 +
  color: rgba(246,246,246,0.9);
 
}
 
}
  
−
.portfolio-item {
+
#fixed-subtitle {
−
   display: block;
+
   width: 100%;
−
   position: relative;
+
   font-size: 6vw;
−
   overflow: hidden;
+
   font-weight: 500;
−
   max-width: 530px;
+
   font-family: "Norwester", monospace;
−
   margin: auto auto 1rem;
+
   line-height: 1.2em;
 +
  text-align: center;
 +
  z-index: 2;
 +
  color: rgba(47,99,97,0.6);
 
}
 
}
  
−
.portfolio-item .caption {
+
.topBarWrapper {
−
   display: flex;
+
   display: contents !important;
−
   height: 100%;
+
}
 +
 
 +
#background-river {
 +
   height: auto;
 +
  background-image: url(https://static.igem.org/mediawiki/2018/d/d0/T--Tec-Monterrey--Background_Rio.png);
 
   width: 100%;
 
   width: 100%;
−
   background-color: rgba(33, 37, 41, 0.2);
+
   background-position-x: center;
−
  position: absolute;
+
   background-size: cover;
−
   top: 0;
+
   background-repeat-y: no-repeat;
−
   bottom: 0;
+
−
  z-index: 1;
+
 
}
 
}
  
−
.portfolio-item .caption .caption-content {
+
.main-info-container-left {
−
   color: #fff;
+
   width: 30%;
−
   margin: auto 2rem 2rem;
+
   height: auto;
 +
  margin-top: 30%;
 +
  margin-left: 2.5vw;
 +
  float: left;
 
}
 
}
  
−
.portfolio-item .caption .caption-content h2 {
+
.main-info-container-right {
−
   font-size: 0.8rem;
+
   width: 30%;
−
   text-transform: uppercase;
+
  height: auto;
 +
  margin-top: 50%;
 +
   margin-right: 2.5vw;
 +
  float: right;
 
}
 
}
  
−
.portfolio-item .caption .caption-content p {
+
.main-info {
−
   font-weight: 300;
+
   width: 100%;
−
   font-size: 1.2rem;
+
  height: 30vw;
 +
  background: white;
 +
   margin-top: 40vh;
 
}
 
}
  
−
@media (min-width: 992px) {
+
@media screen and (max-width: 900px) {
−
   .portfolio-item {
+
   .main-info-container-left {
−
     max-width: none;
+
     width: 40%;
−
    margin: 0;
+
 
   }
 
   }
−
   .portfolio-item .caption {
+
   .main-info-container-right {
−
    -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
+
     width: 40%;
−
     -webkit-clip-path: inset(0px);
+
−
    clip-path: inset(0px);
+
 
   }
 
   }
−
   .portfolio-item .caption .caption-content {
+
   #bacteria-nadando {
−
     transition: opacity 0.25s;
+
     display: none;
−
    margin-left: 5rem;
+
−
    margin-right: 5rem;
+
−
    margin-bottom: 5rem;
+
 
   }
 
   }
−
   .portfolio-item img {
+
   #hiding-block {
−
     -webkit-transition: -webkit-clip-path 0.25s ease-out;
+
     display: none;
−
    -webkit-clip-path: inset(-1px);
+
−
    clip-path: inset(-1px);
+
 
   }
 
   }
−
   .portfolio-item:hover img {
+
   #background-river {
−
     -webkit-clip-path: inset(2rem);
+
     height: 400vh;
−
    clip-path: inset(2rem);
+
 
   }
 
   }
−
   .portfolio-item:hover .caption {
+
   #video-main-page {
−
     background-color: rgba(29, 128, 159, 0.9);
+
     display: none;
−
    -webkit-clip-path: inset(2rem);
+
  }
−
     clip-path: inset(2rem);
+
  #skip-btn {
 +
     display: none;
 
   }
 
   }
 
}
 
}
 +
    </style>
 +
</head>
  
−
footer.footer {
+
<body>
−
  padding-top: 5rem;
+
−
  padding-bottom: 5rem;
+
−
}
+
  
−
footer.footer .social-link {
+
    <div id="scroll-section">
−
  display: block;
+
        <header id="page-top" class="header-main-page">
−
  height: 4rem;
+
        </header>
−
  width: 4rem;
+
−
  line-height: 4.3rem;
+
−
  font-size: 1.5rem;
+
−
  background-color: #1D809F;
+
−
  transition: background-color 0.15s ease-in-out;
+
−
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
−
}
+
  
−
footer.footer .social-link:hover {
+
        <div id="background-river">
−
  background-color: #155d74;
+
            <div class="main-info-container-left">
−
  text-decoration: none;
+
                <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>
  
 +
            <br class="clearBoth" />
 +
        </div> <!-- background-river ends -->
  
−
/**** CSS ? ****/
+
        <div id="fixed-title">
−
a {
+
            E. coding
−
  color: #1D809F;
+
            <div id="fixed-subtitle">Tec-Monterrey</div>
−
}
+
        </div>
  
−
a:hover, a:focus, a:active {
+
        <div id="bacteria-nadando">
−
  color: #155d74;
+
        </div>
−
}
+
    </div> <!-- scroll section ends -->
  
−
.btn-primary {
+
    <section style="height: 90vw">
−
  background-color: #1D809F !important;
+
        <style>
−
  border-color: #1D809F !important;
+
            #dropzoneWrapper {
−
  color: #fff !important;
+
            width: 100%;
−
}
+
            height: auto;
 +
        }
 +
        #outer-dropzone {
 +
            height: 60vw;
 +
            width: 60vw;
 +
            left: 30vw;
 +
            touch-action: none;
 +
        }
 +
   
 +
        .dropzone {
 +
            background-color: black;
 +
            border: dashed 4px transparent;
 +
            border-radius: 4px;
 +
            padding: 10px;
 +
            width: 80%;
 +
            transition: background-color 0.3s;
 +
        }
  
−
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+
        .drop-active {
−
  background-color: #155d74 !important;
+
            border-color: #aaa;
−
  border-color: #155d74 !important;
+
        }
−
}
+
  
−
.btn-secondary {
+
        .drop-target {
−
  background-color: #ecb807 !important;
+
            background-color: #29e;
−
  border-color: #ecb807 !important;
+
            border-style: solid;
−
  color: #fff !important;
+
        }
−
}
+
  
−
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
+
        .drag-drop {
−
  background-color: #ba9106 !important;
+
            display: inline-block;
−
  border-color: #ba9106 !important;
+
            height: 10vh;
−
}
+
            width: 10vh;
 +
            z-index: 50;
  
−
.btn-dark {
+
            -webkit-transform: translate(0px, 0px);
−
  color: #fff !important;
+
            transform: translate(0px, 0px);
−
}
+
  
−
.btn {
+
            transition: background-color 0.3s;
−
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+
        }
−
  font-weight: 700;
+
−
}
+
  
 +
        .drag-drop img {
 +
            position: absolute;
 +
            height: 100%;
 +
            width: 100%;
 +
            border-radius: 50%;
 +
            z-index: 50;
 +
        }
  
−
.bg-primary {
+
        .drag-drop.can-drop {
−
  background-color: #1D809F !important;
+
            color: #000;
−
}
+
            /*background-color: #4e4;*/
 +
            z-index: 50;
 +
        }
 +
       
 +
       
 +
        #backgroundHolder {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: relative;
 +
            z-index: 1;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
       
 +
        #interactive_Background {
 +
            height: 100%;
 +
        }
 +
       
 +
        #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%;
 +
        }
 +
       
 +
        #interactive_CutPlasmidFull {
 +
            height: 100%;
 +
        }
 +
       
 +
        #colorsWrapper {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: absolute;
 +
            z-index: 2;
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
        #color1 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: yellow;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color2 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: red;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color3 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: aqua;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color4 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: pink;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
  
−
.text-primary {
+
       
−
  color: #1D809F !important;
+
    </style>
−
}
+
  
−
.text-secondary {
 
−
  color: #ecb807 !important;
 
−
}
 
  
−
.hide {
 
−
    display: none;
 
−
}
 
  
−
/************Loader**************/
+
        <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>
−
#loader-wrapper {
+
         <div id="dropzoneWrapper" style="background-color: black">
−
    position: fixed;
+
            <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;">
−
    top: 0;
+
                <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
−
    left: 0;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    z-index: 1000;
+
−
}
+
−
 
+
−
#loader {
+
−
    position: relative;
+
−
    left: 50%;
+
−
    top: 50%;
+
−
    width: 250px;
+
−
    height: 250px;
+
−
    margin: -125px 0 0 -125px;
+
−
    z-index: 1001;
+
−
}
+
−
 
+
−
#videoLoader {
+
−
    position:absolute;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    max-width: 100%;
+
−
}
+
−
 
+
−
#loader-wrapper .loader-section {
+
−
    position: fixed;
+
−
    width: 100%;
+
−
    height: 51%;
+
−
    background: rgb(216,228,222);
+
−
    z-index: 1000;
+
−
    -webkit-transform: translateY(0);
+
−
    -ms-transform: translateY(0);
+
−
    transform: translateY(0);
+
−
}
+
−
#loader-wrapper .loader-section.section-top {
+
−
    top: 0;
+
−
}
+
−
#loader-wrapper .loader-section.section-bottom {
+
−
    bottom: 0;
+
−
}
+
−
/* Loaded */
+
−
.loaded #loader-wrapper .loader-section.section-top {
+
−
    -webkit-transform: translateY(-100%);
+
−
    -ms-transform: translateY(-100%);
+
−
    transform: translateY(-100%);
+
−
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
}
+
−
.loaded #loader-wrapper .loader-section.section-bottom {
+
−
    -webkit-transform: translateY(100%);
+
−
    -ms-transform: translateY(100%);
+
−
    transform: translateY(100%);
+
−
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    -o-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
}
+
−
.loaded #loader {
+
−
    opacity: 0;
+
−
    -webkit-transition: all 0.3s ease-out;
+
−
            -o-transition: all 0.3s ease-out;
+
−
            transition: all 0.3s ease-out;
+
−
}
+
−
.loaded #loader-wrapper {
+
−
    visibility: hidden;
+
−
}
+
−
/* JavaScript Turned Off */
+
−
.no-js #loader-wrapper {
+
−
    display: none;
+
−
}
+
−
        </style>
+
−
       
+
−
    </head>
+
−
    <body id="page-top">
+
−
     
+
−
        <!-- Header/NavBar-->
+
−
         <header class="masthead d-flex">
+
−
            <div id="navBar">
+
−
                <div id="navContainer">
+
−
                    <a href="#collapseProject">
+
−
                        <div class="container navbar-linkContainer" id="linkContainer_Project">
+
−
                            <span>Project</span>
+
−
                            <a href="#collapseProject"></a>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapseParts" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseParts">
+
−
                        <div class="container navbar-linkContainer">
+
−
                            <span>Parts</span>
+
−
                            <a href="#collapseParts"></a>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapsePeople" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapsePeople">
+
−
                        <div class="container navbar-linkContainer">
+
−
                            <span>People</span>
+
−
                            <a href="#collapsePeople"></a>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapseHP" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseHP">
+
−
                        <div class="container navbar-linkContainer">
+
−
                            <span>Human Practices</span>
+
−
                            <a href="#collapseHP"></a>
+
−
                        </div>
+
−
                    </a>
+
−
                    <a href="#collapseModeling" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseModeling">
+
−
                        <div class="container navbar-linkContainer">
+
−
                            <span>Modeling</span>
+
−
                            <a href="#collapseModeling"></a>
+
−
                        </div>
+
−
                    </a>
+
−
                </div>
+
 
             </div>
 
             </div>
−
           
+
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
−
            <!-- Project collapsed -->
+
                 <div style="background-color: black; height: 50%; text-align: center;">
−
             <div class="collapse collapsedMenu" id="collapseProject">
+
                     <br>
−
                 <div class="container">
+
                     <br>
−
                     <div class="height-support">
+
                     <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
−
                     </div>
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pb</p>
−
                     <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            <a href="#page-top">Overview</a>
+
−
                            <a href="#page-top">Description</a>
+
−
                            <a href="#page-top">Background</a>
+
−
                            <a href="#page-top">Design</a>
+
−
                            <a href="#page-top">Results</a>
+
−
                            <a href="#page-top">Safety</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                     </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PROJECT
+
−
                        </li>
+
−
                    </ul>
+
 
                 </div>
 
                 </div>
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <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>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
 +
                </div>
 +
 
             </div>
 
             </div>
−
            <!-- Parts collapsed -->
+
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;">
−
             <div class="collapse collapsedMenu" id="collapseParts">
+
                 <div style="background-color: black; height: 50%; text-align: center;">
−
                 <div class="container">
+
                     <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">
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PO4</p>
−
                        <li class="nav-item">
+
                </div>
−
                            <a href="#page-top">Overview</a>
+
                <div style="background-color: black; height: 50%; text-align: center;">
−
                            <a href="#page-top">Basic parts</a>
+
                    <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>
−
                            <a href="#page-top">Composite Parts</a>
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
−
                            <a href="#page-top">Parts Collection</a>
+
−
                            <a href="#page-top">Improved parts</a>
+
−
                            <a href="#page-top">Parts list</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                     </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                     </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            PARTS
+
−
                        </li>
+
−
                    </ul>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
             <!-- People collapsed -->
+
             <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
−
            <div class="collapse collapsedMenu" id="collapsePeople">
+
                <div id="outer-dropzone" class="dropzone">
−
                <div class="container" id="collapsedMenu">
+
                    <div id="backgroundHolder">
−
                    <div class="height-support">
+
                        <div id="colorsWrapper">
 +
                            <div id="color1"></div>
 +
                            <div id="color2"></div>
 +
                            <div id="color3"></div>
 +
                            <div id="color4"></div>
 +
                        </div>
 +
                        <div id="plasmidHolder" style="background-image:url('https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png')">
 +
                        </div>
 
                     </div>
 
                     </div>
−
                    <ul class="navbar-nav mr-auto">
 
−
                        <li class="nav-item">
 
−
                            <a href="#page-top">Overview</a>
 
−
                            <a href="#page-top">Team</a>
 
−
                            <a href="#page-top">Attributions</a>
 
−
                            <a href="#page-top">Collaborations</a>
 
−
                            <a href="#page-top">Sponsors</a>
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto">
 
−
                        <li class="nav-item">
 
−
                            PEOPLE
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto">
 
−
                        <li class="nav-item">
 
−
                            PEOPLE
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto">
 
−
                        <li class="nav-item">
 
−
                            PEOPLE
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto">
 
−
                        <li class="nav-item">
 
−
                            PEOPLE
 
−
                        </li>
 
−
                    </ul>
 
−
                    <ul class="navbar-nav mr-auto">
 
−
                        <li class="nav-item">
 
−
                            PEOPLE
 
−
                        </li>
 
−
                    </ul>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
            <!-- HP collapsed -->
+
        </div>
−
            <div class="collapse collapsedMenu" id="collapseHP">
+
        <script>
−
                 <div class="container">
+
           
−
                    <div class="height-support">
+
            $(document).on('scroll', function() {
−
                     </div>
+
                 if($(this).scrollTop()>=$('#gifDiv').position().top){
−
                    <ul class="navbar-nav mr-auto">
+
                    $("#gifDiv").css("background-color: green;");
−
                         <li class="nav-item">
+
                     setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200);
−
                            <a href="#page-top">Overview</a>
+
                }
−
                            <a href="#page-top">Silver HP</a>
+
            });
−
                            <a href="#page-top">Integrated HP</a>
+
               
−
                            <a href="#page-top">Education</a>
+
                          
−
                            <a href="#page-top">Public Engagement</a>
+
        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,
  
−
                        </li>
+
                // call this function on every dragmove event
−
                    </ul>
+
                onmove: dragMoveListener,
−
                     <ul class="navbar-nav mr-auto">
+
                // call this function on every dragend event
−
                         <li class="nav-item">
+
                onend: function(event) {
−
                            HUMAN PRACTICES
+
                     var textEl = event.target.querySelector('p');
−
                        </li>
+
 
−
                     </ul>
+
                    (textEl.textContent =
−
                    <ul class="navbar-nav mr-auto">
+
                        'moved a distance of ' +
−
                        <li class="nav-item">
+
                        (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
−
                            HUMAN PRACTICES
+
                            Math.pow(event.pageY - event.y0, 2) | 0))
−
                        </li>
+
                         .toFixed(2) + 'px');
−
                    </ul>
+
                }
−
                     <ul class="navbar-nav mr-auto">
+
            });
−
                        <li class="nav-item">
+
 
−
                            HUMAN PRACTICES
+
        function dragMoveListener(event) {
−
                        </li>
+
            var target = event.target,
−
                     </ul>
+
                // keep the dragged position in the data-x/data-y attributes
−
                     <ul class="navbar-nav mr-auto">
+
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
−
                        <li class="nav-item">
+
                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
−
                            HUMAN PRACTICES
+
 
−
                         </li>
+
            // translate the element
−
                    </ul>
+
            target.style.webkitTransform =
−
                    <ul class="navbar-nav mr-auto">
+
                target.style.transform =
−
                        <li class="nav-item">
+
                'translate(' + x + 'px, ' + y + 'px)';
−
                            HUMAN PRACTICES
+
 
−
                        </li>
+
            // update the posiion attributes
−
                     </ul>
+
            target.setAttribute('data-x', x);
 +
            target.setAttribute('data-y', y);
 +
        }
 +
 
 +
 
 +
        /* The dragging code for '.draggable' from the demo above
 +
        * applies to this demo as well so it doesn't have to be repeated. */
 +
 
 +
        // enable draggables to be dropped into this
 +
        interact('.dropzone').dropzone({
 +
            // only accept elements matching this CSS selector
 +
            // accept: '#yes-drop',
 +
            // Require a 75% element overlap for a drop to be possible
 +
            overlap: 0.75,
 +
 
 +
            // listen for drop related events:
 +
 
 +
            ondropactivate: function(event) {
 +
                // activates when you grab an object
 +
                // add active dropzone feedback
 +
                event.target.classList.add('drop-active');
 +
                //console.log("a");
 +
            },
 +
            ondragenter: function(event) {
 +
                // activates when object enters dropzone
 +
                var draggableElement = event.relatedTarget,
 +
                     dropzoneElement = event.target;
 +
 
 +
                // feedback the possibility of a drop
 +
                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");
 +
            }
 +
        });
 +
 
 +
        interact('.drag-drop')
 +
            .draggable({
 +
                inertia: true,
 +
                restrict: {
 +
                    restriction: "#dropzoneWrapper",
 +
                    endOnly: true,
 +
                    elementRect: {
 +
 
 +
                         top: 0,
 +
                        left: 0,
 +
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                autoScroll: true,
 +
                // dragMoveListener from the dragging demo above
 +
                onmove: dragMoveListener,
 +
            });
 +
        });
 +
    </script>
 +
    </section>
 +
    <section>
 +
        <div class="slideshow">
 +
            <div class='right-arrow-pane'>
 +
                <div class='arrow'>
 +
                     <div></div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
            <!-- Modeling collapsed -->
+
             <div class='left-arrow-pane'>
−
             <div class="collapse collapsedMenu" id="collapseModeling">
+
                 <div class='arrow'>
−
                 <div class="container">
+
                     <div></div>
−
                     <div class="height-support">
+
−
                    </div>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            <a href="#page-top">Overview</a>
+
−
                            <a href="#page-top">Interlab</a>
+
−
                            <a href="#page-top">Software Tool</a>
+
−
                            <a href="#page-top">Lac Operon</a>
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
−
                    <ul class="navbar-nav mr-auto">
+
−
                        <li class="nav-item">
+
−
                            MODELING
+
−
                        </li>
+
−
                    </ul>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
              
+
             <div class='bubbles'>
−
           
+
             </div>
−
        </header>
+
             <div class='pauseBtn'>
−
        <div id="mask"></div>
+
                 <div class='bars'>
−
       
+
                    <div></div>
−
        <!-- Main -->
+
                     <div></div>
−
        <main>
+
−
             <!-- Intro -->
+
−
            <section id="intro">
+
−
                <video autoplay muted loop>
+
−
                    <source src="/Videos/videoTec.mp4">
+
−
                </video>
+
−
                <div class="container text-center my-auto" style="position: relative;">
+
−
                <h1 class="mb-1">iGEM: Tec de Monterrey</h1>
+
−
                <h3 class="mb-5">
+
−
                <em>Project: E-Coding</em>
+
−
                </h3>
+
−
                <a class="btn btn-primary btn-xl" href="#project">Learn about the project</a>
+
−
                  </div>
+
−
                <div class="overlay"></div>
+
−
             </section>
+
−
 
+
−
            <!-- Project -->
+
−
            <section id="project" style="background: #eeeeee;">
+
−
              <div class="container text-center">
+
−
                 <div class="row" id="projectDescription">
+
−
                  <div class="col-lg-10 mx-auto">
+
−
                    <h2>E-Coding</h2>
+
−
                     <p class="lead mb-5">Description of the project</p>
+
−
                  </div>
+
 
                 </div>
 
                 </div>
−
                    <a class="btn btn-dark btn-xl" href="#team" id="btnKnowTeam">Know the team</a>
+
                <div class='tri'>
−
              </div>
+
                    <div></div>
−
            </section>
+
−
 
+
−
            <!-- Team-->
+
−
            <section class="bg-primary text-white text-center" id="team">
+
−
              <div class="container-multiple-items">
+
−
                <div>
+
−
                  <h3 class="text-secondary mb-0">Learn about us</h3>
+
−
                  <h2 class="mb-5">TEAM</h2>
+
 
                 </div>
 
                 </div>
−
                <div class="row">
+
            </div>
−
                  <div class="profile-picture">
+
            <div class='content'>
−
                     <span class="service-icon rounded-circle mx-auto mb-3">
+
                <div class='slide'>
−
                         <img class="img-fluid" src="img/portfolio-4.jpg" style="border-radius: 50px;">
+
                     <video autoplay loop muted>
−
                    </span>
+
                         <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
−
                    <h4>
+
                     </video>
−
                      <strong>Leader 1</strong>
+
−
                    </h4>
+
−
                    <p class="text-faded mb-0">Name 1</p>
+
−
                  </div>
+
−
                  <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
+
−
                    <span class="service-icon rounded-circle mx-auto mb-3">
+
−
                      <i class="icon-pencil"></i>
+
−
                    </span>
+
−
                    <h4>
+
−
                      <strong>Redesigned</strong>
+
−
                    </h4>
+
−
                    <p class="text-faded mb-0">Freshly redesigned for Bootstrap 4.</p>
+
−
                  </div>
+
−
                  <div class="col-lg-3 col-md-6 mb-5 mb-md-0">
+
−
                    <span class="service-icon rounded-circle mx-auto mb-3">
+
−
                      <i class="icon-like"></i>
+
−
                    </span>
+
−
                    <h4>
+
−
                      <strong>Favorited</strong>
+
−
                    </h4>
+
−
                    <p class="text-faded mb-0">Millions of users
+
−
                      <i class="fa fa-heart"></i>
+
−
                      Start Bootstrap!</p>
+
−
                  </div>
+
−
                  <div class="col-lg-3 col-md-6">
+
−
                     <span class="service-icon rounded-circle mx-auto mb-3">
+
−
                      <i class="icon-mustache"></i>
+
−
                    </span>
+
−
                    <h4>
+
−
                      <strong>Question</strong>
+
−
                    </h4>
+
−
                    <p class="text-faded mb-0">I mustache you a question...</p>
+
−
                  </div>
+
 
                 </div>
 
                 </div>
−
              </div>
+
                <div class='slide'>
−
            </section>
+
                    <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
−
 
+
−
            <!-- Callout -->
+
−
            <section class="callout">
+
−
              <div class="container text-center">
+
−
                <h2 class="mx-auto mb-5">Welcome to
+
−
                  <em>your</em>
+
−
                  next website!</h2>
+
−
                <a class="btn btn-primary btn-xl" href="">Download Now!</a>
+
−
              </div>
+
−
            </section>
+
−
 
+
−
            <!-- Portfolio
+
−
            <section id="portfolio">
+
−
              <div class="container">
+
−
                <div class="text-center">
+
−
                  <h3 class="text-secondary mb-0">Portfolio</h3>
+
−
                  <h2 class="mb-5">Recent Projects</h2>
+
 
                 </div>
 
                 </div>
−
                 <div class="row no-gutters">
+
                 <div class='slide'>
−
                  <div class="col-lg-6">
+
                     <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
−
                     <a class="portfolio-item" href="#">
+
−
                      <span class="caption">
+
−
                        <span class="caption-content">
+
−
                          <h2>Stationary</h2>
+
−
                          <p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
+
−
                        </span>
+
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-1.jpg" alt="">
+
−
                    </a>
+
−
                  </div>
+
−
                  <div class="col-lg-6">
+
−
                    <a class="portfolio-item" href="#">
+
−
                      <span class="caption">
+
−
                        <span class="caption-content">
+
−
                          <h2>Ice Cream</h2>
+
−
                          <p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
+
−
                        </span>
+
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-2.jpg" alt="">
+
−
                    </a>
+
−
                  </div>
+
−
                  <div class="col-lg-6">
+
−
                    <a class="portfolio-item" href="#">
+
−
                      <span class="caption">
+
−
                        <span class="caption-content">
+
−
                          <h2>Strawberries</h2>
+
−
                          <p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
+
−
                        </span>
+
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-3.jpg" alt="">
+
−
                    </a>
+
−
                  </div>
+
−
                  <div class="col-lg-6">
+
−
                    <a class="portfolio-item" href="#">
+
−
                      <span class="caption">
+
−
                        <span class="caption-content">
+
−
                          <h2>Workspace</h2>
+
−
                          <p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
+
−
                        </span>
+
−
                      </span>
+
−
                      <img class="img-fluid" src="img/portfolio-4.jpg" alt="">
+
−
                    </a>
+
−
                  </div>
+
 
                 </div>
 
                 </div>
−
              </div>
+
                <div class='slide'>
−
             </section>
+
                    <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
−
            -->
+
                </div>
 +
             </div>
 +
        </div>
 +
 
 +
    <div class="slideshow">
 +
        <div class='right-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='left-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='bubbles'>
 +
        </div>
 +
        <div class='pauseBtn'>
 +
            <div class='bars'>
 +
                <div></div>
 +
                <div></div>
 +
            </div>
 +
            <div class='tri'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='content'>
 +
            <div class='slide'>
 +
                <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>
  
−
            <!-- Call to Action -->
 
−
            <section class="bg-primary text-white">
 
−
              <div class="container text-center">
 
−
                <h2 class="mb-4">The buttons below are impossible to resist...</h2>
 
−
                <a href="#" class="btn btn-xl btn-light mr-4">Click Me!</a>
 
−
                <a href="#" class="btn btn-xl btn-dark">Look at Me!</a>
 
−
              </div>
 
−
            </section>
 
−
        </main>
 
−
       
 
−
       
 
−
       
 
−
        <!-- Optional JavaScript -->
 
−
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 
−
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
−
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 
−
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
 
−
       
 
−
        <!-- Script controls collapsedMenus -->
 
 
         <script>
 
         <script>
−
           
+
             var screen_900 = window.matchMedia("(max-width: 900px)");
−
       
+
            var screen_1024 = window.matchMedia("(min-width: 1024px)");
−
             var href;
+
            var screen_1280 = window.matchMedia("(min-width: 1280px)");
−
            /*
+
            var screen_1440 = window.matchMedia("(min-width: 1440px)");
−
            $(".navbar-linkContainer").mouseenter(function(){
+
            var screen_1680 = window.matchMedia("(min-width: 1680px)");
−
                //$(href).collapse('hide');
+
            var screen_1920 = window.matchMedia("(min-width: 1920px)");
−
                href = $(this).find("a").attr('href');
+
            var position = 3000;
−
                $(href).collapse('show');
+
 
−
               
+
            $(window).on('beforeunload', function() {
−
               
+
                $(window).scrollTop(0);
−
                $(href).mouseleave(function(){
+
−
                    $(href).collapse('hide');
+
−
                });
+
 
             });
 
             });
−
              
+
 
−
             $(".navbar-linkContainer").mouseleave(function(){
+
             if (screen_900.matches) {
−
                 $(href).not($ mouseenter(function(){
+
                var timeoutVar = 0;
−
                     $(href).collapse('hide');
+
             } else if (screen_1024.matches) {
 +
                position = 3450;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else if (screen_1280.matches) {
 +
                position = 4500;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                 }, 8000);
 +
            } else if (screen_1440.matches) {
 +
                position = 6000;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else if (screen_1680.matches) {
 +
                position = 6500;
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else if (screen_1920.matches) {
 +
                position = 7500;
 +
                var timeoutVar = setTimeout(function() {
 +
                     $(window).scrollTop(0);
 +
                }, 8000);
 +
            } else {
 +
                var timeoutVar = setTimeout(function() {
 +
                    $(window).scrollTop(0);
 +
                }, 8000);
 +
            }
 +
 
 +
            function slideVideo() {
 +
                $("#video-main-page").css('transform', 'translateY(-100%)');
 +
                $("#skip-btn").css('transform', 'translateY(-100%)');
 +
                $("#skip-btn").css({
 +
                    'top': '-10%'
 
                 });
 
                 });
−
             }));
+
             }
−
              
+
 
−
             */
+
            function map(value, in_min, in_max, out_min, out_max) {
−
           
+
                return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
−
             $(".navbar-linkContainer").mouseenter(function(){
+
             }
−
                 $('#navBar').css('background','#eef');
+
 
 +
             //******************************************************* SCROLL OPACITY ***********************************************
 +
 
 +
             var hiding = document.getElementById("hiding-block");
 +
            var bacteria = document.getElementById("bacteria-nadando");
 +
 
 +
            $(window).scroll(function(event) {
 +
 
 +
                var hidingPos = hiding.offsetTop;
 +
                var bacteriaPos = bacteria.offsetTop;
 +
 
 +
                 var scroll = $(window).scrollTop();
 +
                var scrollOpacity = map(scroll, 0, 350, 1, 0);
 +
                //var scrollFade = map(scroll, 350, 0, 0, 1);
 +
                var bacteriaOpacity = map(scroll, 0, 500, 0, 1);
 +
                var bacteriaTop = map(scroll, 900, 2000, -100, 100);
 +
                var bacteriaRotate = map(scroll, 0, 700, 50, 0);
 +
                if (scroll > hidingPos) {
 +
                    $('#bacteria-nadando ').css('opacity', '0');
 +
                } else {
 +
                    $('#bacteria-nadando ').css('opacity', bacteriaOpacity);
 +
                    $('#bacteria-nadando ').css('top', bacteriaTop + 'px');
 +
                }
 
             });
 
             });
−
           
+
 
−
             $(".navbar-linkContainer").mouseleave(function(){
+
             //******************************************************* Video Controls *******************************************
−
                $('#navBar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
+
 
−
            });
+
             $("#video-main-page").bind("ended", function() {
−
           
+
                slideVideo()
−
             $(".navbar-linkContainer").mouseenter(function(){
+
−
                $(href).collapse('hide');
+
−
                href = $(this).find("a").attr('href');
+
−
                $(href).collapse('show');
+
−
               
+
−
               
+
−
                $(href).mouseleave(function(){
+
−
                    $(href).collapse('hide');
+
−
                });
+
 
             });
 
             });
−
           
+
 
−
             $(".navbar-linkContainer").mouseleave(function(){
+
             $("#skip-btn").click(function() {
−
                 $(href).collapse('hide');
+
                clearTimeout(timeoutVar);
 +
                 $(window).scrollTop(0);
 +
                slideVideo();
 
             });
 
             });
 +
           
 
              
 
              
 
         </script>
 
         </script>
−
     </body>
+
        <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
 +
action=raw&ctype=text/javascript"></script>
 +
     </section>
 +
</body>
 +
 
 
</html>
 
</html>
−
 
+
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
−
 
+
−
<!--{{: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