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

Line 1: Line 1:
−
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
+
<!----------{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}--------->
−
<html lang="en">
+
<html>
 
<head>
 
<head>
−
    <meta charset="UTF-8">
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
−
    <title>Drag Drop Demo</title>
+
<!--bootstrap core css-->
−
    <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
+
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
<link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
     <style>
 
     <style>
−
         #outer-dropzone {
+
/**************************************** Clear the default wiki settings *********************************/
−
   height: 140px;
+
    #home_logo, #sideMenu {
 +
         display:none;
 +
    }
 +
    #sideMenu, #top_title, .patrollink  {
 +
        display:none;
 +
    }
 +
    #content, #HQ_page {
 +
        width: 100%;
 +
        padding: 0;
 +
        margin: 0;
 +
        background-color: white;
 +
        //font-size: 100% !important;
 +
    }
 +
    #content {
 +
        margin-top: -16px;
 +
    }
 +
    #globalWrapper, #content, #HQ_page, #bodyContent, #mw-content-text{
 +
    height: 100%;
 +
    width: 100%;
 +
    }
 +
/*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/
 +
    #top_menu_14 {
 +
        box-sizing: initial;
 +
    }
 +
    td a{
 +
        padding-right: 0px !important;
 +
    }
 +
    #globalWrapper{
 +
        padding-bottom: 0;
 +
    }
 +
    a {
 +
      color: #002bb8;
 +
    }
 +
/*************************************************** Bootstrap Stuff ************************************************/
 +
    .portfolio-item .caption .caption-content p {
 +
        font-weight: 300;
 +
        font-size: 1.2rem;
 +
    }
 +
    @media (min-width: 992px) {
 +
        .portfolio-item {
 +
            max-width: none;
 +
            margin: 0;
 +
        }
 +
        .portfolio-item .caption {
 +
            -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
 +
            -webkit-clip-path: inset(0px);
 +
            clip-path: inset(0px);
 +
        }
 +
        .portfolio-item .caption .caption-content {
 +
            transition: opacity 0.25s;
 +
            margin-left: 5rem;
 +
            margin-right: 5rem;
 +
            margin-bottom: 5rem;
 +
        }
 +
        .portfolio-item img {
 +
            -webkit-transition: -webkit-clip-path 0.25s ease-out;
 +
            -webkit-clip-path: inset(-1px);
 +
            clip-path: inset(-1px);
 +
        }
 +
        .portfolio-item:hover img {
 +
            -webkit-clip-path: inset(2rem);
 +
            clip-path: inset(2rem);
 +
        }
 +
        .portfolio-item:hover .caption {
 +
            background-color: rgba(29, 128, 159, 0.9);
 +
            -webkit-clip-path: inset(2rem);
 +
            clip-path: inset(2rem);
 +
        }
 +
    }
 +
    a {
 +
        color: #1D809F;
 +
    }
 +
    a:hover, a:focus, a:active {
 +
        color: #155d74;
 +
    }
 +
    .btn-primary {
 +
        background-color: #1D809F !important;
 +
        border-color: #1D809F !important;
 +
        color: #fff !important;
 +
    }
 +
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
 +
        background-color: #155d74 !important;
 +
        border-color: #155d74 !important;
 +
    }
 +
    .btn {
 +
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
 +
        font-weight: 700;
 +
    }
 +
    .btn-xl {
 +
        padding: 1.25rem 2.5rem;
 +
    }
 +
/*****************************************************custom css*****************************************************/
 +
   
 +
    @font-face{
 +
        font-family: "Norwester";
 +
        src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype');
 +
    }
 +
    @font-face{
 +
        font-family: "Montserrat";
 +
        src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
 +
    }
 +
    @font-face{
 +
        font-family: "DosisRegular";
 +
        src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'),
 +
            url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype');
 +
    }
 +
    html {
 +
    }
 +
    ::-webkit-scrollbar {
 +
      background: #cccccc;
 +
    }
 +
    ::-webkit-scrollbar-thumb {
 +
      background: #103010;
 +
    }
 +
    ::-webkit-scrollbar-thumb:hover{
 +
      background: #155015;
 +
    }
 +
    body, html {
 +
        width: 100%;
 +
        height: 100%;
 +
    }
 +
    body {
 +
        font-family: "DosisRegular", sans-serif !important;
 +
    }
 +
    ul{
 +
        margin: 0 !important;
 +
    }
 +
    h1, h2, h3, h4, h5, h6 {
 +
        font-weight: 700;
 +
        padding: 0 0 0 0;
 +
        margin: 0 0 0 0;
 +
    }
 +
    .text-faded {
 +
        color: rgba(255, 255, 255, 0.7);
 +
    }
 +
    .full-masthead {
 +
      width: 100%;
 +
    }
 +
    .masthead {
 +
        height: 100%;
 +
        width: 100%;
 +
    }
 +
    .header-top {
 +
        height: 70%;
 +
        width: 100%;
 +
        position: relative;
 +
        background: rgb(248,247,246);
 +
    }
 +
    .video-header {
 +
        right: 0;
 +
        left: 0;
 +
        width: 100%;
 +
    }
 +
    .header-bottom {
 +
        height: 30%;
 +
        position: relative;
 +
        background: white;
 +
        padding: 10px 0px 10px 10px;
 +
        margin: 0px 0px 0px 0px;"
 +
    }
 +
    .div-header-bottom {
 +
        padding:5px 0px 0px 10px;
 +
        border-left: 10px solid #2f6361;
 +
    }
 +
.header-background {
 +
  display: flex;
 +
  z-index: 1;
 +
   height: 83%;
 +
  width: 99%;
 +
  margin: 0;
 +
  padding: 0;
 +
  position: absolute;
 +
  direction: rtl;
 +
}
 +
.header-background-left, .header-background-center, .header-background-center-right, .header-background-right {
 +
  width: 18%;
 +
}
 +
.trail {
 +
  width: 100%;
 +
  height: auto;
 +
  top: 5%;
 +
}
 +
    .header-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        text-align: left !important;
 +
        font-size: 9vw;
 +
        font-weight: 700 !important;
 +
        line-height: 1em;
 +
        padding-bottom: 0;
 +
        margin-bottom: -5px;
 +
        color: #3582d2;
 +
    }
 +
    .header-subtitle {
 +
        font-family: "Montserrat", monospace;
 +
        text-align: left !important;
 +
        font-size: 3.5vw;
 +
        font-weight: 600 !important;
 +
        line-height: 1em;
 +
        padding-bottom: 4px;
 +
        color: #5da565;
 +
    }
 +
    .body-title {
 +
        font-family: "Norwester", sans-serif !important;
 +
        font-size: 4vw;
 +
        font-weight: 600 !important;
 +
        line-height: 1em;
 +
        padding: 10px 0 10px 0;
 +
        text-align: center;
 +
    }
 +
    .body-title h1 {
 +
        margin: 0 !important;
 +
    }
 +
    .body-subtitle {
 +
        font-family: "Montserrat", monospace !important;
 +
        font-size: 2.5vw;
 +
        font-weight: 400 !important;
 +
        line-height: 1.2em;
 +
        padding: 3% 0;
 +
    }
 +
    .scroll-to-top {
 +
        position: fixed;
 +
        right: 10px;
 +
        bottom: 10px;
 +
        display: none;
 +
        width: 50px;
 +
        height: 50px;
 +
        text-align: center;
 +
        color: white !important;
 +
        background: rgba(52, 58, 64, 0.5);
 +
        line-height: 45px;
 +
    }
 +
    .scroll-to-top:focus, .scroll-to-top:hover {
 +
        color: white !important;
 +
    }
 +
    .scroll-to-top:hover {
 +
        background: #343a40;
 +
    }
 +
    .scroll-to-top i {
 +
        font-weight: 800;
 +
    }
 +
    .hide {
 +
        display: none;
 +
    }
 +
 
 +
/**************************************************************** FOOTER ****************************************/
 +
    .footer {
 +
        padding-top: 1rem;
 +
        padding-bottom: 1rem;
 +
        background: #404040;
 +
    }
 +
    .footer p{
 +
        font-family: "DosisRegular", sans-serif !important;
 +
        font-size: 3vh;
 +
        text-align: center !important;
 +
    }
 +
    #footerCopyright{
 +
        text-align: center !important;
 +
    }
 +
    .no-padding {
 +
        padding-right: 0 !important;
 +
    }
 +
    .social-link.fa {
 +
        color: #eeeeee;
 +
        opacity: 0.5;
 +
        font-size: 6vw;
 +
        transition: all 0.4s;
 +
        -webkit-transition: all 0.4s;
 +
    }
 +
    .social-link:hover {
 +
        opacity: 0.9;
 +
    }
 +
    .sponsor {
 +
        height: 10vh;
 +
        display: inline-block;
 +
    }
 +
    .sponsor-img {
 +
        height: 100%;
 +
    }
 +
 
 +
/***********************************************************************************************************************/
 +
/************************************************* CONTENIDO GENERAL DE LA PAGINA **************************************/
 +
/***********************************************************************************************************************/
 +
 
 +
.articulo {
 +
  font-size: 1.7vw;
 +
}
 +
.seccion-responsiva {
 +
  width: 80%;
 +
  background: white;
 +
  margin: 0.5% auto;
 +
  padding: 2% 5%;
 +
  border-radius: 40px;
 +
  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
 +
}
 +
.resumen > .body-title {
 +
  text-align: center;
 +
}
 +
.introduccion > .body-title {
 +
  text-align: center;
 +
}
 +
.resumen::after, .introduccion::after {
 +
  content: "";
 +
  width: 80%;
 +
  height: 2px;
 +
  display:block;
 +
  right: 0;
 +
  background-color: #000;
 +
  padding: 0;
 +
  margin: 3% auto;
 +
}
 +
.contenido {
 +
}
 +
.leyenda {
 +
  font-size: 1.4vw;
 +
}
 +
.contenido-con-imagen-derecha, .contenido-con-imagen-izquierda {
 +
  height: auto;
 +
}
 +
.imagen-derecha > img, .imagen-izquierda > img {
 +
  width: 100%;
 +
}
 +
.contenido-con-imagen-derecha > .imagen-derecha {
 +
  float: right;
 +
  margin: 10px;
 +
  width: 40%;
 +
  display: inline-block;
 +
}
 +
.contenido-con-imagen-derecha > .texto-izquierda {
 +
  float: left;
 +
  width: 51%;
 +
  display: inline-block;
 +
}
 +
.contenido-con-imagen-izquierda > .imagen-izquierda {
 +
  float: left;
 +
  margin: 10px;
 +
  width: 40%;
 +
  display: inline-block;
 +
}
 +
.contenido-con-imagen-izquierda > .texto-derecha {
 +
  float: right;
 +
  width: 51%;
 +
  display: inline-block;
 +
}
 +
.imagen-centrada-reducida > img {
 +
  width: 50%;
 +
  margin-left: 25%;
 +
  margin-right: 25%;
 +
}
 +
.imagen-centrada-reducida > .leyenda {
 +
  text-align: center;
 +
}
 +
.imagen-centrada-completa > img {
 +
  width: 100%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
.imagen-centrada-completa > .leyenda {
 +
  text-align: center;
 +
}
 +
.conclusion {
 +
}
 +
.referencias {
 +
}
 +
/******************************************** RESIZING CONTENTS ON SCREEN SIZE *************************************/
 +
@media screen and (max-width: 900px) {
 +
  .articulo {
 +
    font-size: 3vh;
 +
    line-height: 1.2em;
 +
  }
 +
  .body-title {
 +
    font-size: 6vh;
 +
  }
 +
  .body-subtitle {
 +
    font-size: 4vh;
 +
  }
 +
  .seccion-responsiva {
 +
    border-radius: 10px;
 +
  }
 +
  .masthead {
 +
    height: auto;
 +
  }
 +
  .header-top {
 +
    display: none;
 +
  }
 +
  .header-bottom {
 +
    height: auto;
 +
  }
 +
  .header-title {
 +
    font-size: 16vw;
 +
  }
 +
  .header-subtitle {
 +
    font-size: 8vw;
 +
  }
 +
  .header-background {
 +
    display: none;
 +
  }
 +
  .imagen-centrada-reducida > img {
 +
    width: 100%;
 +
    margin: 0;
 +
  }
 +
  .leyenda {
 +
    font-size: 2vh;
 +
  }
 +
  .social-link.fa {
 +
    font-size: 10vw;
 +
  }
 +
  .sponsor {
 +
    height: 10vw;
 +
  }
 +
}
 +
 
 +
/******************************************************* TOPBAR MENU *********************************************/
 +
#topBarWrapper {
 +
  display: none;
 +
}
 +
 
 +
.topBar {
 +
    position: fixed;
 +
    top: 18px;
 +
    z-index: 99;
 +
    height: 8vh;
 +
    width: 100%;
 +
}
 +
 
 +
#navbar {
 +
    position: fixed;
 +
    z-index: 99;
 +
    height: 8vh;
 +
    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 {
 +
  position: absolute;
 +
  display: inline-block;
 +
  height: 100%;
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
}
 +
 
 +
#navbarLogoText {
 +
  display: inline-block;
 +
  font-size: 1vw;
 +
  color: white;
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.3s;
 +
  transition: opacity 0.3s;
 +
}
 +
 
 +
#navbarLogo {
 +
  height: 80%;
 +
  margin-top: 5%;
 +
  margin-bottom: 15%;
 +
  margin-left: 20px;
 +
  padding-left: 20px;
 +
  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;
 +
}
 +
 
 +
#navbarLogo, #navbarLogoWrapper:hover #navbarGif {
 +
  display: inline-block;
 +
}
 +
 
 +
#navbarLogoWrapper:hover {
 +
  transform: scale(1.4,1.4);
 +
  cursor: pointer;
 +
}
 +
 
 +
#navbarLogoWrapper:hover > #navbarLogoText {
 +
  opacity: 1;
 +
}
 +
 
 +
#navContainer {
 +
    z-index: 2;
 +
    height: 8vh;
 +
    width: 80%;
 +
    left: 10%;
 +
    position: fixed;
 +
    background-color: rgba(0,0,0,0);
 +
    color: #fff;
 +
}
 +
 
 +
.navbar-linkContainer {
 +
  height: 100%;
 +
  width: 20%;
 +
  color: white;
 +
  background-color: rgba(0,0,0,0);
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
  position: relative;
 +
  float: left;
 +
  text-align: center;
 +
}
 +
.navbar-linkContainerChild {
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  width: 100%;
 +
  height: 1em;
 +
  margin: auto;
 +
  font-family: "Norwester", sans-serif;
 +
  font-weight: 700;
 +
  font-size: 1.5vw;
 +
  line-height: 1em;
 +
  border-right: 1px solid white;
 +
}
 +
 
 +
#linkContainer_ModelingChild {
 +
  border: 0;
 +
}
 +
 
 +
.navbar-linkContainer.active {
 +
  transform: scale(1.05,1.05);
 +
  border-radius: 5%;
 +
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 +
  background-color: #5da565;
 +
  -webkit-transition: all 0.3s;
 +
  transition: all 0.3s;
 +
  z-index: 9;
 +
}
  
−
   touch-action: none;
+
.activeChild {
 +
   border: 0;
 +
  z-index: 10;
 
}
 
}
  
−
#inner-dropzone {
+
.collapsed-menu {
−
   height: 80px;
+
    top: calc(8vh + 18px);
 +
    position: fixed;
 +
    z-index: 1;
 +
    width: 100%;
 +
   background-color: aquamarine;
 
}
 
}
  
−
.dropzone {
+
.container-collapse {
−
   background-color: #ccc;
+
   padding: 0 10px 30px 10px;
−
  border: dashed 4px transparent;
+
−
  border-radius: 4px;
+
−
  margin: 10px auto 30px;
+
−
  padding: 10px;
+
 
   width: 80%;
 
   width: 80%;
−
   transition: background-color 0.3s;
+
   margin-left: 10%;
 
}
 
}
  
−
.drop-active {
+
.height-support {
−
  border-color: #aaa;
+
    height: 20px;
 +
    width: 100%;
 
}
 
}
  
−
.drop-target {
+
.mask {
−
  background-color: #29e;
+
    height: 8vh;
−
  border-color: #fff;
+
    width:100%;
−
  border-style: solid;
+
    background-color: rgba(0,0,0,0);
 +
    z-index: 0;
 
}
 
}
  
−
.drag-drop {
+
.navbarList {
 +
  float: left;
 +
  height: 100%;
 +
  width: 20%;
 +
}
 +
 
 +
.navbarItem {
 +
  height: 100%;
 +
}
 +
 
 +
.navbarItemHeader {
 
   display: inline-block;
 
   display: inline-block;
−
   min-width: 40px;
+
   position: relative;
−
   padding: 2em 0.5em;
+
  font-family: "Norwester", sans-serif;
 +
   font-weight: 500;
 +
  font-size: 1.8vw;
 +
  color: black;
 +
  text-decoration: none;
 +
  padding-top: 10px;
 +
  width: auto;
 +
}
  
−
   color: #fff;
+
.navbarItemContent {
−
   background-color: #29e;
+
  display: inline-block;
−
   border: solid 2px #fff;
+
  position: relative;
 +
   color: black;
 +
   font-size: 1.5vw;
 +
   line-height: 1.5em;
 +
  text-decoration: none;
 +
  width: auto;
 +
}
  
−
   -webkit-transform: translate(0px, 0px);
+
a.navbarItemHeader::after, a.navbarItemContent::after {
−
          transform: translate(0px, 0px);
+
  content: "";
 +
  position: absolute;
 +
  width: 0;
 +
  height: 2px;
 +
  display:block;
 +
  margin-top: 5px;
 +
  right: 0;
 +
  background-color: #000;
 +
   -webkit-transition: width 0.3s ease-in-out 0s;
 +
  transition: width 0.3s ease-in-out 0s;
 +
  padding: 0;
 +
  margin: 0;
 +
}
  
−
   transition: background-color 0.3s;
+
a.navbarItemHeader:link, a.navbarItemContent:link  {
 +
   color: black;
 +
  text-decoration: none;
 +
}
 +
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;
 
}
 
}
  
−
.drag-drop.can-drop {
+
a.navbarItemHeader:hover::after, a.navbarItemContent:hover::after  {
−
   color: #000;
+
   width: 100%;
−
   background-color: #4e4;
+
  left: 0;
 +
   background: #000;
 
}
 
}
−
  </style>
+
 
 +
.clearBoth {
 +
  clear: both;
 +
}
 +
/********************************************************* TOPBAR MENU ENDS *********************************************/
 +
/***************************************************** SIDEBAR MENU **************************************************/
 +
#sidebar {
 +
  display: block;
 +
}
 +
#sidebar-wrapper {
 +
        position: fixed;
 +
        top: 18px;
 +
        z-index: 2;
 +
        right: 0;
 +
        width: 283px;
 +
        height: 100%;
 +
        -webkit-transition: all 0.4s ease 0s;
 +
        -moz-transition: all 0.4s ease 0s;
 +
        -ms-transition: all 0.4s ease 0s;
 +
        -o-transition: all 0.4s ease 0s;
 +
        transition: all 0.4s ease 0s;
 +
        transform: translateX(300px);
 +
        background: #5da565;
 +
    }
 +
    .sidebar-nav {
 +
        position: absolute;
 +
        top: 0;
 +
        width: 300px;
 +
        margin: 0;
 +
        padding: 10px;
 +
        list-style: none;
 +
    }
 +
    .sub-sidebar-nav {
 +
        width:inherit;
 +
        list-style-type: none;
 +
        margin: 0;
 +
        padding: 10px;
 +
        position:static;
 +
    }
 +
    .sidebar-nav li.sidebar-nav-item a {
 +
        display: block;
 +
        text-decoration: none;
 +
        color: #fff;
 +
        padding: 10px;
 +
    }
 +
    .sidebar-nav-subitem {
 +
        list-style-type: none;
 +
        list-style: none;
 +
        text-decoration: none;
 +
        margin: 0;
 +
        padding: 10px;
 +
        color: #fff;
 +
        background: #2f6361;
 +
        padding: 0px;
 +
    }
 +
    .sidebar-nav li a:hover {
 +
        text-decoration: none;
 +
        color: #000;
 +
        background: #2a8481;
 +
    }
 +
    .sidebar-nav li a:active,
 +
    .sidebar-nav li a:focus {
 +
        text-decoration: none;
 +
    }
 +
    .sidebar-nav > .sidebar-brand {
 +
        font-size: 1.2rem;
 +
        background: rgba(52, 58, 64, 0.1);
 +
        height: 80px;
 +
        line-height: 50px;
 +
        padding-top: 15px;
 +
        padding-bottom: 15px;
 +
        padding-left: 15px;
 +
        position:relative;
 +
        left: -32;
 +
    }
 +
    .sidebar-nav > .sidebar-brand a {
 +
        color: #fff;
 +
    }
 +
    .sidebar-nav > .sidebar-brand a:hover {
 +
        color: #fff;
 +
        background: none;
 +
    }
 +
    .brand-hider {
 +
        width: 290px;
 +
        height: 78px;
 +
        margin: 0;
 +
        padding: 0;
 +
        background: #2f6361;
 +
        position: absolute;
 +
        left: 0;
 +
        top: 1px;
 +
        -webkit-transition: all 1s ease 0s;
 +
        -moz-transition: all 1s ease 0s;
 +
        -ms-transition: all 1s ease 0s;
 +
        -o-transition: all 1s ease 0s;
 +
        transition: all 1s ease 0s;
 +
    }
 +
    .brand-hider.active {
 +
        width: 10px;
 +
        right: 10px;
 +
        -webkit-transition: all 1s ease 0s;
 +
        -moz-transition: all 1s ease 0s;
 +
        -ms-transition: all 1s ease 0s;
 +
        -o-transition: all 1s ease 0s;
 +
        transition: all 1s ease 0s;
 +
    }
 +
    #sidebar-wrapper.active{
 +
        right: 300px;
 +
        -webkit-transition: all 0.4s ease 0s;
 +
        -moz-transition: all 0.4s ease 0s;
 +
        -ms-transition: all 0.4s ease 0s;
 +
        -o-transition: all 0.4s ease 0s;
 +
        transition: all 0.4s ease 0s;
 +
    }
 +
    .menu-toggle {
 +
        position: fixed;
 +
        right: 10px;
 +
        top: 30px;
 +
        width: 50px;
 +
        height: 50px;
 +
        text-align: center;
 +
        color: #fff !important;
 +
        background: rgba(52, 58, 64, 0.5);
 +
        line-height: 50px;
 +
        z-index: 999;
 +
        -webkit-transition: all 0.4s ease 0s;
 +
        -moz-transition: all 0.4s ease 0s;
 +
        -ms-transition: all 0.4s ease 0s;
 +
        -o-transition: all 0.4s ease 0s;
 +
        transition: all 0.4s ease 0s;
 +
    }
 +
    .menu-toggle:focus, .menu-toggle:hover {
 +
        color: #fff;
 +
    }
 +
    .menu-toggle:hover {
 +
        background: #343a40;
 +
    }
 +
/********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/
 +
@media screen and (min-width: 900px) {
 +
  #topBarWrapper {
 +
    display: block;
 +
  }
 +
  #sidebar {
 +
    display: none;
 +
  }
 +
  #scroll-to-top-btn {
 +
    display: none !important;
 +
  }
 +
}
 +
 
 +
/********************************************************Loader**************************************************/
 +
#loader-wrapper {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 1000;
 +
}
 +
 
 +
#loader {
 +
    position: relative;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 1001;
 +
}
 +
 
 +
#loaderMessage {
 +
    position: absolute;
 +
    width: 50%;
 +
    height: 10%;
 +
    margin: 85% 25% 5% 25%;
 +
    font-size: 10%;
 +
}
 +
 
 +
#videoLoader {
 +
    position:absolute;
 +
    width: 50%;
 +
    margin: 15% 25%;
 +
}
 +
 
 +
    #loader-wrapper .loader-section {
 +
        position: fixed;
 +
        width: 100%;
 +
        height: 51%;
 +
        background: rgb(214,230,223);
 +
        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;
 +
    }
 +
 
 +
 
 +
/**********************************************************************************************************************/
 +
/********************************************************* VERTICAL NAVBAR ********************************************/
 +
/**********************************************************************************************************************/
 +
  .vertical-nav {
 +
    list-style: none;
 +
  }
 +
 
 +
/* --------------------------------
 +
Primary style
 +
-------------------------------- */
 +
*, *::after, *::before {
 +
  box-sizing: border-box;
 +
}
 +
 
 +
a {
 +
  color: yellow;
 +
  text-decoration: none;
 +
}
 +
 
 +
.cd-image-replace {
 +
  /* replace text with image */
 +
  display: inline-block;
 +
  overflow: hidden;
 +
  text-indent: 100%;
 +
  white-space: nowrap;
 +
  color: transparent;
 +
}
 +
 
 +
/* --------------------------------
 +
Navigation trigger - visible on small devices only
 +
-------------------------------- */
 +
.cd-nav-trigger {
 +
  display: block;
 +
  position: fixed;
 +
  z-index: 102;
 +
  bottom: 30px;
 +
  right: 5%;
 +
  height: 44px;
 +
  width: 44px;
 +
  border-radius: 0.25em;
 +
  background: rgba(234, 242, 227, 0.9);
 +
  /* reset button style */
 +
  cursor: pointer;
 +
  -webkit-appearance: none;
 +
  -moz-appearance: none;
 +
  -ms-appearance: none;
 +
  -o-appearance: none;
 +
  appearance: none;
 +
  border: none;
 +
  outline: none;
 +
}
 +
.cd-nav-trigger span {
 +
  /* central dot */
 +
  position: absolute;
 +
  height: 4px;
 +
  width: 4px;
 +
  background-color: #3a2c41;
 +
  border-radius: 10%;
 +
  left: 50%;
 +
  top: 50%;
 +
  bottom: auto;
 +
  right: auto;
 +
  -webkit-transform: translateX(-50%) translateY(-50%);
 +
  -moz-transform: translateX(-50%) translateY(-50%);
 +
  -ms-transform: translateX(-50%) translateY(-50%);
 +
  -o-transform: translateX(-50%) translateY(-50%);
 +
  transform: translateX(-50%) translateY(-50%);
 +
}
 +
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
 +
  /* bottom and top dots */
 +
  content: '';
 +
  position: absolute;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  background-color: #3a2c41;
 +
  border-radius: inherit;
 +
}
 +
.cd-nav-trigger span::before {
 +
  top: -9px;
 +
}
 +
.cd-nav-trigger span::after {
 +
  bottom: -9px;
 +
}
 +
@media only screen and (min-width: 900px) {
 +
  .cd-nav-trigger {
 +
    display: none;
 +
  }
 +
}
 +
 
 +
/* --------------------------------
 +
Vertical navigation
 +
-------------------------------- */
 +
.cd-vertical-nav {
 +
  position: fixed;
 +
  z-index: 100;
 +
  right: 5%;
 +
  bottom: 30px;
 +
  width: 90%;
 +
  max-width: 400px;
 +
  max-height: 90%;
 +
  overflow-y: auto;
 +
  -webkit-transform: scale(0);
 +
  -moz-transform: scale(0);
 +
  -ms-transform: scale(0);
 +
  -o-transform: scale(0);
 +
  transform: scale(0);
 +
  -webkit-transform-origin: right bottom;
 +
  -moz-transform-origin: right bottom;
 +
  -ms-transform-origin: right bottom;
 +
  -o-transform-origin: right bottom;
 +
  transform-origin: right bottom;
 +
  -webkit-transition: all 0.2s;
 +
  -moz-transition: all 0.2s;
 +
  transition: all 0.2s;
 +
  border-radius: 0.25em;
 +
  background-color: rgba(234, 242, 227, 0.9);
 +
}
 +
.cd-vertical-nav a {
 +
  display: block;
 +
  padding: 1em;
 +
}
 +
.cd-vertical-nav a.active {
 +
  color: white;
 +
}
 +
.cd-vertical-nav.open {
 +
  -webkit-transform: scale(1);
 +
  -moz-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  -o-transform: scale(1);
 +
  transform: scale(1);
 +
  -webkit-overflow-scrolling: touch;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger {
 +
  background-color: transparent;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span {
 +
  background-color: rgba(58, 44, 65, 0);
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {
 +
  /* transform dots in 'X' icon */
 +
  height: 3px;
 +
  width: 20px;
 +
  border-radius: 0;
 +
  left: -8px;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span::before {
 +
  -webkit-transform: rotate(45deg);
 +
  -moz-transform: rotate(45deg);
 +
  -ms-transform: rotate(45deg);
 +
  -o-transform: rotate(45deg);
 +
  transform: rotate(45deg);
 +
  top: 1px;
 +
}
 +
.cd-vertical-nav.open + .cd-nav-trigger span::after {
 +
  -webkit-transform: rotate(135deg);
 +
  -moz-transform: rotate(135deg);
 +
  -ms-transform: rotate(135deg);
 +
  -o-transform: rotate(135deg);
 +
  transform: rotate(135deg);
 +
  bottom: 0;
 +
}
 +
@media only screen and (min-width: 900px) {
 +
  .cd-vertical-nav {
 +
    /* reset style */
 +
    right: 0;
 +
    top: 0;
 +
    bottom: auto;
 +
    height: 100vh;
 +
    width: 90px;
 +
    max-width: none;
 +
    max-height: none;
 +
    -webkit-transform: scale(1);
 +
    -moz-transform: scale(1);
 +
    -ms-transform: scale(1);
 +
    -o-transform: scale(1);
 +
    transform: scale(1);
 +
    background-color: transparent;
 +
    /* vertically align its content*/
 +
    display: table;
 +
  }
 +
   
 +
   
 +
   
 +
/* navbar background */
 +
  .cd-vertical-nav::before {
 +
    /* this is the navigation background */
 +
    content: '';
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    background: #397471;
 +
    -webkit-transform: translateX(100%);
 +
    -moz-transform: translateX(100%);
 +
    -ms-transform: translateX(100%);
 +
    -o-transform: translateX(100%);
 +
    transform: translateX(100%);
 +
    -webkit-transition: -webkit-transform 0.4s;
 +
    -moz-transition: -moz-transform 0.4s;
 +
    transition: transform 0.4s;
 +
  }
 +
  .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before {
 +
    -webkit-transform: translateX(0);
 +
    -moz-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    -o-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
  .cd-vertical-nav ul {
 +
    /* vertically align <ul> inside <nav>*/
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    text-align: center;
 +
  }
 +
  .cd-vertical-nav a {
 +
    position: relative;
 +
    padding: 2em 0 0;
 +
    margin: 0.5em auto;
 +
    border-bottom: none;
 +
    font-size: 1rem;
 +
    color: #FFF;
 +
    line-height: 1em;
 +
  }
 +
  .cd-vertical-nav a.active {
 +
    color: #FFF;
 +
  }
 +
  .cd-vertical-nav a::before, .cd-vertical-nav a::after {
 +
    /* used to create the filled circle and the background icon */
 +
    content: '';
 +
    position: absolute;
 +
    left: 50%;
 +
    /* Force Hardware Acceleration */
 +
    -webkit-backface-visibility: hidden;
 +
    backface-visibility: hidden;
 +
    -webkit-transform: translateZ(0);
 +
    -moz-transform: translateZ(0);
 +
    -ms-transform: translateZ(0);
 +
    -o-transform: translateZ(0);
 +
    transform: translateZ(0);
 +
  }
 +
  .cd-vertical-nav a::before {
 +
    /* filled circle */
 +
    top: 0;
 +
    height: 32px;
 +
    width: 32px;
 +
    border-radius: 50%;
 +
    background: #5DA565;
 +
    -webkit-transform: translateX(-50%) scale(0.1);
 +
    -moz-transform: translateX(-50%) scale(0.1);
 +
    -ms-transform: translateX(-50%) scale(0.1);
 +
    -o-transform: translateX(-50%) scale(0.1);
 +
    transform: translateX(-50%) scale(0.1);
 +
    -webkit-transition: -webkit-transform 0.4s, background-color 0.2s;
 +
    -moz-transition: -moz-transform 0.4s, background-color 0.2s;
 +
    transition: transform 0.4s, background-color 0.2s;
 +
  }
 +
  .cd-vertical-nav a::after {
 +
    /* icon */
 +
    opacity: 0;
 +
    top: 8px;
 +
    height: 16px;
 +
    width: 16px;
 +
    background: url(../img/cd-nav-icons.svg) no-repeat;
 +
    -webkit-transform: translateX(-50%) scale(0);
 +
    -moz-transform: translateX(-50%) scale(0);
 +
    -ms-transform: translateX(-50%) scale(0);
 +
    -o-transform: translateX(-50%) scale(0);
 +
    transform: translateX(-50%) scale(0);
 +
    -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s;
 +
    -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s;
 +
    transition: transform 0.4s 0s, opacity 0.1s 0.3s;
 +
  }
 +
  .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before {
 +
    background-color: #70C27C;
 +
  }
 +
  .cd-vertical-nav .label {
 +
    display: block;
 +
    /* Force Hardware Acceleration */
 +
    -webkit-backface-visibility: hidden;
 +
    backface-visibility: hidden;
 +
    -webkit-transform: translateZ(0);
 +
    -moz-transform: translateZ(0);
 +
    -ms-transform: translateZ(0);
 +
    -o-transform: translateZ(0);
 +
    transform: translateZ(0);
 +
    -webkit-transform: translateX(100%);
 +
    -moz-transform: translateX(100%);
 +
    -ms-transform: translateX(100%);
 +
    -o-transform: translateX(100%);
 +
    transform: translateX(100%);
 +
    -webkit-transition: all 0.4s;
 +
    -moz-transition: all 0.4s;
 +
    transition: all 0.4s;
 +
    line-height: 1em;
 +
  }
 +
  .no-touch .cd-vertical-nav:hover a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after {
 +
    -webkit-transform: translateX(-50%) scale(1);
 +
    -moz-transform: translateX(-50%) scale(1);
 +
    -ms-transform: translateX(-50%) scale(1);
 +
    -o-transform: translateX(-50%) scale(1);
 +
    transform: translateX(-50%) scale(1);
 +
    /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */
 +
    -moz-transform: translateX(-50%) scale(1) rotate(0.02deg);
 +
  }
 +
  .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav a::after {
 +
    opacity: 1;
 +
    -webkit-transition: -webkit-transform 0.4s, opacity 0s;
 +
    -moz-transition: -moz-transform 0.4s, opacity 0s;
 +
    transition: transform 0.4s, opacity 0s;
 +
  }
 +
  .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label {
 +
    -webkit-transform: translateX(0);
 +
    -moz-transform: translateX(0);
 +
    -ms-transform: translateX(0);
 +
    -o-transform: translateX(0);
 +
    transform: translateX(0);
 +
  }
 +
}
 +
 
 +
/* --------------------------------
 +
no-js
 +
-------------------------------- */
 +
.no-js .cd-nav-trigger {
 +
  display: none;
 +
}
 +
 
 +
.no-js .cd-vertical-nav {
 +
  position: static;
 +
  height: auto;
 +
  width: 100%;
 +
  max-width: none;
 +
  background-color: #2A8481;
 +
  border-radius: 0;
 +
  -webkit-transform: scale(1);
 +
  -moz-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  -o-transform: scale(1);
 +
  transform: scale(1);
 +
}
 +
.no-js .cd-vertical-nav::before {
 +
  display: none;
 +
}
 +
.no-js .cd-vertical-nav ul::after {
 +
  clear: both;
 +
  content: "";
 +
  display: table;
 +
}
 +
.no-js .cd-vertical-nav li {
 +
  display: inline-block;
 +
  float: left;
 +
}
 +
.no-js .cd-vertical-nav a {
 +
  padding: 0 1em;
 +
  margin: 1.5em 1em;
 +
  color: #eaf2e3;
 +
}
 +
.no-js .cd-vertical-nav a.active {
 +
  color: #c0a672;
 +
}
 +
.no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before {
 +
  display: none;
 +
}
 +
.no-js .cd-vertical-nav .label {
 +
  -webkit-transform: translateX(0);
 +
  -moz-transform: translateX(0);
 +
  -ms-transform: translateX(0);
 +
  -o-transform: translateX(0);
 +
  transform: translateX(0);
 +
}
 +
 
 +
/********************************************************* TERMINA VERTICAL NAVBAR ***********************************/
 +
 
 +
    </style>
 
</head>
 
</head>
 
<body>
 
<body>
−
     <div id="no-drop" class="drag-drop"> #no-drop </div>
+
<!------------------------------------------------------- LOADER ------------------------------------------------------->
 +
  <div id="loader-wrapper">
 +
     <div id="loader">
 +
      <img id="videoLoader" src="https://static.igem.org/mediawiki/2018/e/e3/T--Tec-Monterrey--Page_Loader.gif">
 +
      <div id="loaderMessage"></div>
 +
    </div>
 +
    <div class="loader-section section-top"></div>
 +
    <div class="loader-section section-bottom"></div>
 +
  </div>
  
−
<div id="yes-drop" class="drag-drop"> #yes-drop </div>
+
<!-- Navigation Bars-->
 +
<!------------------------------------------------------- SIDEBAR MENU STARTS ------------------------------------------>
 +
  <div id="sidebar">
 +
    <a class="menu-toggle rounded" id="menuToggle" href="#">
 +
      <i class="fa fa-bars" style="font-size: 20px;"></i>
 +
    </a>
 +
    <nav id="sidebar-wrapper">
 +
      <ul class="sidebar-nav">
 +
        <li class="sidebar-brand">
 +
          <div class="brand-hider"></div>
 +
          <a href="https://2018.igem.org/Team:Tec-Monterrey">Tec de Monterrey</a>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuProject">
 +
          <a>Project</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subProject">
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey">Overview</a>
 +
                    <a href="https://2018.igem.org/Team:Tec-Monterrey#description">Description</a>
 +
                    <a href="#">Background</a>
 +
                    <a href="#">Design</a>
 +
                    <a href="#">Results</a>
 +
                    <a href="#">Safety</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuParts">
 +
          <a>Parts</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subParts">
 +
                    <a href="">Overview</a>
 +
                    <a href="">Basic parts</a>
 +
                    <a href="">Composite Parts</a>
 +
                    <a href="">Parts Collection</a>
 +
                    <a href="">Improved parts</a>
 +
                    <a href="">Parts list</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuPeople">
 +
          <a>People</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subPeople">
 +
                    <a href="#team">Overview</a>
 +
                    <a href="#team">Team</a>
 +
                    <a href="#">Attributions</a>
 +
                    <a href="#">Collaborations</a>
 +
                    <a href="#">Sponsors</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuHP">
 +
          <a>Human Practices</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subHP">
 +
                    <a href="#HP">Overview</a>
 +
                    <a href="#">Silver HP</a>
 +
                    <a href="#">Integrated HP</a>
 +
                    <a href="#">Education</a>
 +
                    <a href="#">Public Engagement</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
        <li class="sidebar-nav-item" id="menuModeling">
 +
          <a>Modeling</a>
 +
            <ul class="sub-sidebar-nav">
 +
                <li class="sidebar-nav-subitem" id="subModeling">
 +
                    <a href="#">Overview</a>
 +
                    <a href="#">Interlab</a>
 +
                </li>
 +
            </ul>
 +
        </li>
 +
      </ul>
 +
    </nav>
 +
  </div>
 +
<!--------------------------------------------------------- SIDEBAR MENU ENDS -------------------------------------------->
 +
<!--------------------------------------------------------- TOPBAR MENU STARTS ------------------------------------------->
 +
<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="#">
 +
                      <div class="navbar-linkContainer" id="linkContainer_Project">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">PROJECT</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#">
 +
                      <div class="navbar-linkContainer" id="linkContainer_Parts">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">PARTS</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#">
 +
                      <div class="navbar-linkContainer" id="linkContainer_People">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">PEOPLE</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#">
 +
                      <div class="navbar-linkContainer" id="linkContainer_HP">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_HPChild">HUMAN PRACTICES</div>
 +
                      </div>
 +
                  </a>
 +
                  <a href="#">
 +
                      <div class="navbar-linkContainer" id="linkContainer_Modeling">
 +
                          <div class="navbar-linkContainerChild" id="linkContainer_ModelingChild">MODELING</div>
 +
                      </div>
 +
                  </a>
 +
              </div>
 +
          </div>
 +
           
 +
            <!-- Project collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseProject">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                          <a href="https://2018.igem.org/Team:Tec-Monterrey#description"
 +
                            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 href="https://2018.igem.org/Team:Tec-Monterrey/InterLab" class="navbarItemHeader">InterLab</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#procedure-interlab" class="navbarItemContent">Procedure</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#results-interlab" class="navbarItemContent">Results</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/InterLab#conclusion-interlab" class="navbarItemContent">Conclusion</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 href="https://2018.igem.org/Team:Tec-Monterrey/Demonstrate" class="navbarItemHeader">Demonstrate</a>
 +
                          <br>
 +
                          <a class="navbarItemContent">Overview</a>
 +
                          <br>
 +
                          <a class="navbarItemContent">Introduction</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- Parts collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseParts">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="" class="navbarItemHeader">Basic Parts</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Overview</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Best Basic Part</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="" class="navbarItemHeader">Composite Parts</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Overview</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Best Composite Part</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="" class="navbarItemHeader">Parts Collection</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Best Parts</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Improve" class="navbarItemHeader">Improved Parts</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Overview</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Part I</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Part II</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Part III</a>
 +
                            <br>
 +
                            <a href="" class="navbarItemContent">Part IV</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="" class="navbarItemHeader">Parts List</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- People collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapsePeople">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team" class="navbarItemHeader">Team</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#page-top" class="navbarItemContent">Header</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#teamMembers" class="navbarItemContent">Team Members</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi1" class="navbarItemContent">PI 1</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#pi2" class="navbarItemContent">PI 2</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#instructor" class="navbarItemContent">Instructor</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#advisors" class="navbarItemContent">Advisors</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Team#collaborators" class="navbarItemContent">Collaborators</a>
 +
                            <br>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Collaborations" 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="https://2018.igem.org/Team:Tec-Monterrey/Attributions" class="navbarItemHeader">Attributions</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#tec-monterrey-work" class="navbarItemContent">What we have done</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#general-support" class="navbarItemContent">General Support</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#HP-support" class="navbarItemContent">HP Support</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#design-wiki" class="navbarItemContent">Design/Wiki</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#fund-raising" class="navbarItemContent">Fund raising</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Attributions#thanks" class="navbarItemContent">Thanks</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>
 +
            <!-- HP collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseHP">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices" class="navbarItemHeader">Human Practices</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#page-top" class="navbarItemContent">Header</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#introduction-HP" class="navbarItemContent">Intro</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#monterrey-HP" class="navbarItemContent">Monterrey</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#chiapas-HP" class="navbarItemContent">Chiapas</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#integrated-HP" class="navbarItemContent">Integrated</a>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#world-HP" class="navbarItemContent">World</a>
 +
                            <br>
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Human_Practices#prototype-HP" class="navbarItemContent">Prototype</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="#" class="navbarItemHeader">The Journey</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Tabasco</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Chiapas</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Samples</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement" class="navbarItemHeader">Public Engagement</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Milenio News</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Conexion Tec</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Genobiotec</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Curiosamente</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Tec Review</a>
 +
                        </li>
 +
                    </ul>
 +
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Public_Engagement" class="navbarItemHeader">Educational Engagement</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Seminar</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Congress</a>
 +
                            <br>
 +
                            <a href="#" class="navbarItemContent">Talks</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
            <!-- Modeling collapsed -->
 +
            <div class="collapse collapsed-menu" id="collapseModeling">
 +
                <div class="container-collapse">
 +
                    <div class="height-support">
 +
                    </div>
 +
                    <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
 +
                        <li class="nav-item navbarItem">
 +
                            <a href="https://2018.igem.org/Team:Tec-Monterrey/Model" 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>
 +
                    <br class="clearBoth"/>
 +
                </div>
 +
            </div>
 +
 +
            <div class="mask"></div>
 +
        </div>
 +
</div>
 +
<!--------------------------------------------------------- TOPBAR MENU ENDS ---------------------------------------------> 
 +
    <!--Scroll to top button-->
 +
    <a class="scroll-to-top rounded" href="#page-top" id="scroll-to-top-btn">
 +
      <i class="fa fa-angle-up"></i>
 +
    </a>
 +
</body>
 +
</html>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!------- MAIN ------->
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
 
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>Drag Drop Demo</title>
 +
    <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
 +
    <style>
 +
        #outer-dropzone {
 +
            height: 400px;
 +
            touch-action: none;
 +
        }
 +
       
 +
        #imageHolder {
 +
            height: 200px;
 +
        }
 +
 
 +
        .dropzone {
 +
            background-color: #ccc;
 +
            border: dashed 4px transparent;
 +
            border-radius: 4px;
 +
            margin: 10px auto 30px;
 +
            padding: 10px;
 +
            width: 80%;
 +
            transition: background-color 0.3s;
 +
        }
 +
 
 +
        .drop-active {
 +
            border-color: #aaa;
 +
        }
 +
 
 +
        .drop-target {
 +
            background-color: #29e;
 +
            border-color: #fff;
 +
            border-style: solid;
 +
        }
 +
 
 +
        .drag-drop {
 +
            display: inline-block;
 +
            min-width: 40px;
 +
            height: 200px;
 +
            width: 200px;
 +
 
 +
            color: #fff;
 +
            /*background-color: #29e;*/
 +
            border: solid 2px #fff;
 +
 
 +
            -webkit-transform: translate(0px, 0px);
 +
            transform: translate(0px, 0px);
 +
 
 +
            transition: background-color 0.3s;
 +
        }
 +
 
 +
        .drag-drop img {
 +
            position: absolute;
 +
            height: 200px;
 +
            width: 200px;
 +
            border-radius: 50%;
 +
        }
 +
 
 +
        .drag-drop.can-drop {
 +
            color: #000;
 +
            background-color: #4e4;
 +
        }
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
    <div id="alan" class="drag-drop"> <img src="/imagesDemo/alan.jpg"> </div>
 +
    <div id="esteban" class="drag-drop"> <img src="/imagesDemo/esteban.jpg"> </div>
 +
    <div id="acebae" class="drag-drop"> <img src="/imagesDemo/aceperro.jpeg"> </div>
 +
    <div id="sofi" class="drag-drop"> <img src="/imagesDemo/sofi.jpg"> </div>
 +
    <div id="bobby" class="drag-drop"> <img src="/imagesDemo/bobby.jpg"> </div>
  
−
<div id="outer-dropzone" class="dropzone">
+
    <div id="outer-dropzone" class="dropzone">
−
  #outer-dropzone
+
        #outer-dropzone
−
  <div id="inner-dropzone" class="dropzone">#inner-dropzone</div>
+
        <div id="imageHolder"> <img id="dropzoneImage"height="100%" src=""> </div>
−
</div>
+
    </div>
  
  
 
     <script>
 
     <script>
 
         // target elements with the "draggable" class
 
         // target elements with the "draggable" class
−
interact('.draggable')
+
        interact('.draggable')
−
  .draggable({
+
            .draggable({
−
    // enable inertial throwing
+
                // enable inertial throwing
−
    inertia: true,
+
                inertia: true,
−
    // keep the element within the area of it's parent
+
                // keep the element within the area of it's parent
−
    restrict: {
+
                restrict: {
−
      restriction: "parent",
+
                    restriction: "parent",
−
      endOnly: true,
+
                    endOnly: true,
−
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+
                    elementRect: {
−
    },
+
                        top: 0,
−
    // enable autoScroll
+
                        left: 0,
−
    autoScroll: true,
+
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                // enable autoScroll
 +
                autoScroll: true,
  
−
    // call this function on every dragmove event
+
                // call this function on every dragmove event
−
    onmove: dragMoveListener,
+
                onmove: dragMoveListener,
−
    // call this function on every dragend event
+
                // call this function on every dragend event
−
    onend: function (event) {
+
                onend: function(event) {
−
      var textEl = event.target.querySelector('p');
+
                    var textEl = event.target.querySelector('p');
  
−
      textEl && (textEl.textContent =
+
                    textEl && (textEl.textContent =
−
        'moved a distance of '
+
                        'moved a distance of ' +
−
        + (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
+
                        (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
−
                    Math.pow(event.pageY - event.y0, 2) | 0))
+
                            Math.pow(event.pageY - event.y0, 2) | 0))
−
            .toFixed(2) + 'px');
+
                        .toFixed(2) + 'px');
−
    }
+
                }
−
  });
+
            });
  
−
  function dragMoveListener (event) {
+
        function dragMoveListener(event) {
−
    var target = event.target,
+
            var target = event.target,
−
        // keep the dragged position in the data-x/data-y attributes
+
                // keep the dragged position in the data-x/data-y attributes
−
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
−
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
  
−
    // translate the element
+
            // translate the element
−
    target.style.webkitTransform =
+
            target.style.webkitTransform =
−
    target.style.transform =
+
                target.style.transform =
−
      'translate(' + x + 'px, ' + y + 'px)';
+
                'translate(' + x + 'px, ' + y + 'px)';
  
−
    // update the posiion attributes
+
            // update the posiion attributes
−
    target.setAttribute('data-x', x);
+
            target.setAttribute('data-x', x);
−
    target.setAttribute('data-y', y);
+
            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:
+
        /* The dragging code for '.draggable' from the demo above
 +
        * applies to this demo as well so it doesn't have to be repeated. */
  
−
  ondropactivate: function (event) {
+
        // enable draggables to be dropped into this
−
    // add active dropzone feedback
+
        interact('.dropzone').dropzone({
−
    event.target.classList.add('drop-active');
+
            // only accept elements matching this CSS selector
−
  },
+
            // accept: '#yes-drop',
−
  ondragenter: function (event) {
+
            // Require a 75% element overlap for a drop to be possible
−
    var draggableElement = event.relatedTarget,
+
            overlap: 0.75,
−
        dropzoneElement = event.target;
+
  
−
    // feedback the possibility of a drop
+
            // listen for drop related events:
−
    dropzoneElement.classList.add('drop-target');
+
−
    draggableElement.classList.add('can-drop');
+
−
    draggableElement.textContent = 'Dragged in';
+
−
  },
+
−
  ondragleave: function (event) {
+
−
    // remove the drop feedback style
+
−
    event.target.classList.remove('drop-target');
+
−
    event.relatedTarget.classList.remove('can-drop');
+
−
    event.relatedTarget.textContent = 'Dragged out';
+
−
  },
+
−
  ondrop: function (event) {
+
−
    event.relatedTarget.textContent = 'Dropped';
+
−
  },
+
−
  ondropdeactivate: function (event) {
+
−
    // remove active dropzone feedback
+
−
    event.target.classList.remove('drop-active');
+
−
    event.target.classList.remove('drop-target');
+
−
  }
+
−
});
+
  
−
interact('.drag-drop')
+
            ondropactivate: function(event) {
−
  .draggable({
+
                // activates when you grab an object
−
    inertia: true,
+
                // add active dropzone feedback
−
    restrict: {
+
                event.target.classList.add('drop-active');
−
      restriction: "parent",
+
                //console.log("a");
−
      endOnly: true,
+
            },
−
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
+
            ondragenter: function(event) {
−
    },
+
                // activates when object enters dropzone
−
    autoScroll: true,
+
                var draggableElement = event.relatedTarget,
−
    // dragMoveListener from the dragging demo above
+
                    dropzoneElement = event.target;
−
    onmove: dragMoveListener,
+
 
−
  });
+
                // 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("dropzoneImage").src="https://media1.tenor.com/images/9efdeb655742370ffdedf960649d5150/tenor.gif?itemid=10898740";
 +
                } else if (event.relatedTarget.id == "esteban") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                document.getElementById("dropzoneImage").src="https://i.ytimg.com/vi/8r-9Ep9rarA/maxresdefault.jpg";
 +
                } else if (event.relatedTarget.id == "acebae") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("dropzoneImage").src="https://acedog.co/images/acedog-627x378.png";
 +
                } else if (event.relatedTarget.id == "sofi") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("dropzoneImage").src="https://i.ytimg.com/vi/mU_uE-d870U/maxresdefault.jpg";
 +
                } else if (event.relatedTarget.id == "bobby") {
 +
                    document.getElementById(draggableElementID).style.display = "none";
 +
                    document.getElementById("dropzoneImage").src="https://i.redd.it/wc8gkbw5kxv01.jpg";
 +
                }
 +
                //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: "parent",
 +
                    endOnly: true,
 +
                    elementRect: {
 +
 
 +
                        top: 0,
 +
                        left: 0,
 +
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                autoScroll: true,
 +
                // dragMoveListener from the dragging demo above
 +
                onmove: dragMoveListener,
 +
            });
 
     </script>
 
     </script>
 
</body>
 
</body>
 +
 
</html>
 
</html>
  
−
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!----{{: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">Contact Us</h4>
 +
        <a class="footer-link no-padding" href="https://www.facebook.com/IgemTecMty" target="_blank">
 +
          <i class="fa fa-facebook-square social-link"></i>
 +
        </a>
 +
        <a class="footer-link no-padding" href="https://twitter.com/igemtecmty" target="_blank">
 +
          <i class="fa fa-twitter-square social-link"></i>
 +
        </a>
 +
        <a class="footer-link no-padding" href="mailto:igemtecmonterrey@gmail.com">
 +
          <i class="fa fa-envelope-square social-link"></i>
 +
        </a>
 +
        <a class="footer-link no-padding" href="https://www.instagram.com/igemtecmty/" target="_blank">
 +
          <i class="fa fa-instagram social-link"></i>
 +
        </a>
 +
        <div class="footer-text">
 +
          <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>
 +
        </div>   
 +
      </div>
 +
      <div class="col-md-9">
 +
        <h4 class="text-muted">Sponsors</h4>
 +
        <ul class="list-inline">
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/5/56/T--Tec-Monterrey--CECROPIA.png" alt="CECROPIA">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/a/a2/T--Tec-Monterrey--CONANP.png" alt="CONANP">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--Concretos.png" alt="Concretos Modernos del Sur">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/8/89/T--Tec-Monterrey--GDX.png" alt="GDX Holdings">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/e/e9/T--Tec-Monterrey--GenScript.png" alt="GenScript">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/3/37/T--Tec-Monterrey--IDT.png" alt="IDT">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Ladesa.png" alt="Ladesa">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/5/5e/T--Tec-Monterrey--NEB.png" alt="NEB">
 +
          </li>
 +
          <li class="list-inline-item sponsor">
 +
            <img class="sponsor-img" src="https://static.igem.org/mediawiki/2018/2/24/T--Tec-Monterrey--Opentrons.png" alt="Opnetrons">
 +
          </li>
 +
        </ul>
 +
      </div>
 +
    </div>
 +
  </footer>
 +
 
 +
        <!-- Script controls collapsedMenus -->
 +
        <script>
 +
 
 +
            /*------------MENU STARTS-----------*/
 +
           
 +
            //Menu collapsing
 +
           
 +
            $("#linkContainer_Project").hover(
 +
                function () {
 +
                    $('#navbar').css('background','#2A8481');
 +
                    $("#linkContainer_Project").addClass("active");
 +
                    $("#linkContainer_ProjectChild").addClass("activeChild");
 +
                    openMenu('#collapseProject', '#b0e0e4');
 +
                   
 +
                }, function () {
 +
                    $("#linkContainer_Project").removeClass("active");
 +
                    $("#linkContainer_ProjectChild").removeClass("activeChild");
 +
                    closeMenu('#collapseProject');
 +
                    colorNavbar();
 +
                   
 +
                    $('#collapseProject').mouseenter(function(){
 +
                        $('#navbar').css('background','#2A8481');
 +
                        $("#linkContainer_Project").addClass("active");
 +
                        $("#linkContainer_ProjectChild").addClass("activeChild");
 +
                        openMenu('#collapseProject', '#b0e0e4');
 +
                    });
 +
                    $('#collapseProject').mouseleave(function(){
 +
                        colorNavbar();
 +
                        $("#linkContainer_Project").removeClass("active");
 +
                        $("#linkContainer_ProjectChild").removeClass("activeChild");
 +
                        closeMenu('#collapseProject');
 +
                    });
 +
                }
 +
            );
 +
           
 +
            $("#linkContainer_Parts").hover(
 +
                function () {
 +
                    $('#navbar').css('background','#2A8481');
 +
                    $("#linkContainer_Parts").addClass("active");
 +
                    $("#linkContainer_PartsChild").addClass("activeChild");
 +
                    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 () {
 +
                    $('#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(
 +
                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(){
 +
                        $('#navbar').css('background','#2A8481');
 +
                        $("#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(
 +
                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(){
 +
                        $('#navbar').css('background','#2A8481');
 +
                        $("#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() {
 +
              window.location.href = "https://2018.igem.org/Team:Tec-Monterrey";
 +
            });
 +
           
 +
            function openMenu(collapseName, collapseColor) {
 +
              $(".topBar").css({'height':'100%'});
 +
              $(".mask").css({'background':'rgba(0,123,255,0.5)','height':'100%'});
 +
              $(collapseName).css({'background-color': collapseColor});
 +
              if($(".topBar").offset().top < 300){
 +
                $(collapseName).stop().fadeIn(300);
 +
              }else{
 +
                $(collapseName).stop().slideDown(400);
 +
              }
 +
            }
 +
           
 +
            function colorNavbar(){
 +
              if($(".topBar").offset().top > 300){
 +
                    $('#navbar').css('background','#2A8481');
 +
                    $('.cd-vertical-nav').css('display','table');
 +
              }else{
 +
                    $('#navbar').css('background','linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
 +
                    $('.cd-vertical-nav').css('display','none');
 +
              }
 +
            }
 +
 
 +
            function closeMenu(collapseName){
 +
              $(".topBar").css({'height':'8vh'});
 +
              $(".mask").css({'background':'rgba(0,0,0,0)','height':'8vh'});
 +
              if($(".topBar").offset().top < 300){
 +
                $(collapseName).stop().fadeOut(200);
 +
              }else{
 +
                $(collapseName).stop().slideUp(300);
 +
              }
 +
            }
 +
       
 +
            $(window).scroll(colorNavbar);
 +
            $(document).ready(colorNavbar);
 +
 
 +
            /*------------MENU ENDS-----------*/
 +
 
 +
    $(window).on("load", function() {
 +
        $('body').addClass('loaded');
 +
    });
 +
 
 +
        </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>
 +
</html>

Revision as of 20:56, 13 October 2018









<!DOCTYPE html> Drag Drop Demo

#outer-dropzone





Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors