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

m
 
(67 intermediate revisions by one other user not shown)
Line 3: Line 3:
  
 
<head>
 
<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 href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 +
 +
    <!-- Fonts -->
 +
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
  
 
     <style>
 
     <style>
−
        .full-masthead {
 
−
            width: 100%;
 
−
        }
 
  
−
         .full-masthead img {
+
         /**********************************************************************************************************************/
−
            width: 100%;
+
/******************************************************* SLIDESHOW ***************************************************/
−
         }
+
/**********************************************************************************************************************/
 +
.slideshow {
 +
position: relative;
 +
width: 80%;
 +
height: 80%;
 +
         margin: 0 10%;
 +
        overflow-y: hidden;
 +
}
  
−
         #collabs {
+
.slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
−
            width: 100%;
+
position:absolute;
−
            height: auto;
+
right:0;
−
            background: white;
+
top:0;
−
            z-index: 1;
+
height:100%;
−
            display: block;
+
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;
 +
}
 +
 
 +
.slideshow .left-arrow-pane {
 +
left:0;
 +
width:82px;
 +
right:auto;
 +
}
 +
 
 +
.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;*/
 +
}
 +
 
 +
.slideshow .left-arrow-pane .arrow {
 +
right:30%;
 +
left:auto;
 +
transform: translate(50%, -50%);
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
.slideshow .left-arrow-pane .arrow div{
 +
transform:rotate(-135deg);
 +
}
 +
 
 +
.slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
 +
background:rgba(0,0,0,.25);
 +
}
 +
 
 +
.slideshow .right-arrow-pane:hover .arrow {
 +
left:35%;
 +
}
 +
 
 +
.slideshow .left-arrow-pane:hover .arrow {
 +
right:35%;
 +
}
 +
 
 +
.slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
 +
border-color:rgb(255,255,255);
 +
}
 +
 
 +
.slideshow .bubbles {
 +
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;
 +
}
 +
 
 +
.slideshow .bubbles div {
 +
height:30px;
 +
width:30px;
 +
border-radius:5px;
 +
border:solid white 3px;
 +
margin:0 20px 0 0;
 +
cursor:pointer;
 +
}
 +
 
 +
.slideshow .bubbles div:last-child {
 +
margin-right: 0;
 +
}
 +
 
 +
.slideshow .bubbles div:hover {
 +
background-color: white;
 +
}
 +
 
 +
.slideshow .bubbles div.active {
 +
background-color:white;
 +
}
 +
 
 +
.slideshow .pauseBtn {
 +
position:absolute;
 +
height:60px;
 +
width:60px;
 +
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;
 +
}
 +
 
 +
.slideshow .pauseBtn .bars > div{
 +
float:right;
 +
width:10px;
 +
height:100%;
 +
background:rgba(255,255,255,.75);
 +
}
 +
 
 +
.slideshow .pauseBtn .bars > div:first-child {
 +
float:left;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover {
 +
background: rgba(34,34,34,1);
 +
cursor: pointer;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover .bars > div {
 +
background: rgba(255,255,255,1);
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
.slideshow .pauseBtn:hover .tri > div{
 +
border-left-color:rgba(255,255,255,1);
 +
}
 +
 
 +
.slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
 +
visibility: visible;
 +
}
 +
 
 +
.slideshow .content {
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
         overflow: hidden;
 +
}
 +
 
 +
.slideshow .content .slide {
 +
visibility:hidden;
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
height:100%;
 +
width:100%;
 +
overflow-y: hidden;
 +
-webkit-transition: left 1s;
 +
    -moz-transition: left 1s;
 +
    -ms-transition: left 1s;
 +
    -o-transition: left 1s;
 +
    transition: left 1s;
 +
}
 +
.slideshow .content .slide video, .slideshow .content .slide img {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 
 +
.slideshow .content .slide:first-child {
 +
visibility:visible;
 +
left:0;
 +
z-index: 1;
 +
        width: 100%;
 +
}
 +
 
 +
.slideshow .content .slide > img:first-child {
 +
height:auto;
 +
        width: 100%;
 +
        overflow: hidden;
 +
}
 +
 
 +
.slideshow .content .slide.active {
 +
left:0 !important;
 +
}
 +
 
 +
.slideshow .content .slide.left {
 +
left:-100vw !important;
 +
}
 +
 
 +
.slideshow .content .slide.right {
 +
left:100vw !important;
 +
}
 +
 
 +
.splash .slideshow .title {
 +
top:65%;
 +
left:200px;
 +
}
 +
 
 +
#HQ_page .slideshow .title p {
 +
font-size:7em;
 +
}
 +
 
 +
.notransition {
 +
-webkit-transition: none !important;
 +
    -moz-transition: none !important;
 +
    -ms-transition: none !important;
 +
    -o-transition: none !important;
 +
    transition: none !important;
 +
}
 +
/**********************************************************************************************************************/
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW *****************************************************/
 +
 
 +
 
 +
#scroll-section {
 +
  display: contents;
 +
}
 +
.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;
 +
}
 +
 
 +
#hiding-block {
 +
  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-family: "DosisRegular", sans-serif;
 +
  line-height: 1.2em;
 +
  text-align: center;
 +
  position: absolute;
 +
  left: 25%;
 +
  top: 25%;
 +
  z-index: 2;
 +
  color: rgba(246,246,246,0.9);
 +
}
 +
 
 +
#fixed-subtitle {
 +
  width: 100%;
 +
  font-size: 6vw;
 +
  font-weight: 500;
 +
  font-family: "Norwester", monospace;
 +
  line-height: 1.2em;
 +
  text-align: center;
 +
  z-index: 2;
 +
  color: rgba(47,99,97,0.6);
 +
}
 +
 
 +
.topBarWrapper {
 +
  display: contents !important;
 +
}
 +
 
 +
#background-river {
 +
  height: auto;
 +
  background-image: url(https://static.igem.org/mediawiki/2018/d/d0/T--Tec-Monterrey--Background_Rio.png);
 +
  width: 100%;
 +
  background-position-x: center;
 +
  background-size: cover;
 +
  background-repeat-y: no-repeat;
 +
}
 +
 
 +
.main-info-container-left {
 +
  width: 30%;
 +
  height: auto;
 +
  margin-top: 30%;
 +
  margin-left: 2.5vw;
 +
  float: left;
 +
}
 +
 
 +
.main-info-container-right {
 +
  width: 30%;
 +
  height: auto;
 +
  margin-top: 50%;
 +
  margin-right: 2.5vw;
 +
  float: right;
 +
}
 +
 
 +
.main-info {
 +
  width: 100%;
 +
  height: 30vw;
 +
  background: white;
 +
  margin-top: 40vh;
 +
}
 +
 
 +
@media screen and (max-width: 900px) {
 +
  .main-info-container-left {
 +
    width: 40%;
 +
  }
 +
  .main-info-container-right {
 +
    width: 40%;
 +
  }
 +
  #bacteria-nadando {
 +
    display: none;
 +
  }
 +
  #hiding-block {
 +
    display: none;
 +
  }
 +
  #background-river {
 +
    height: 400vh;
 +
  }
 +
  #video-main-page {
 +
    display: none;
 +
  }
 +
  #skip-btn {
 +
    display: none;
 +
  }
 +
}
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
 
 +
    <div id="scroll-section">
 +
        <header id="page-top" class="header-main-page">
 +
        </header>
 +
 
 +
        <div id="background-river">
 +
            <div class="main-info-container-left">
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
            </div>
 +
            <div class="main-info-container-right">
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
                <div class="main-info">
 +
                </div>
 +
            </div>
 +
            <div id="hiding-block">
 +
            </div>
 +
 
 +
            <br class="clearBoth" />
 +
        </div> <!-- background-river ends -->
 +
 
 +
        <div id="fixed-title">
 +
            E. coding
 +
            <div id="fixed-subtitle">Tec-Monterrey</div>
 +
        </div>
 +
 
 +
        <div id="bacteria-nadando">
 +
        </div>
 +
    </div> <!-- scroll section ends -->
  
−
         #meetings {
+
    <section style="height: 90vw">
 +
         <style>
 +
            #dropzoneWrapper {
 
             width: 100%;
 
             width: 100%;
 
             height: auto;
 
             height: auto;
−
            background: #2a4081;
 
−
            z-index: 1;
 
−
            display: block;
 
 
         }
 
         }
−
 
+
         #outer-dropzone {
−
         .collab-container {
+
             height: 60vw;
−
             width: 90%;
+
             width: 60vw;
−
             height: auto;
+
             left: 30vw;
−
             left: 5%;
+
             touch-action: none;
−
             top: 5%;
+
−
            background: black;
+
−
            position: relative;
+
−
            display: flex;
+
 
         }
 
         }
−
 
+
   
−
         .collab-info {
+
         .dropzone {
 +
            background-color: black;
 +
            border: dashed 4px transparent;
 +
            border-radius: 4px;
 +
            padding: 10px;
 
             width: 80%;
 
             width: 80%;
−
             height;
+
             transition: background-color 0.3s;
−
            500px;
+
−
            left: 10%;
+
−
            margin: 10% 0;
+
−
            background: white;
+
−
            position: relative;
+
−
            display: inline-block;
+
−
            z-index: 2;
+
 
         }
 
         }
  
−
         #teamsTable {
+
         .drop-active {
−
             border: 0px white solid !important;
+
             border-color: #aaa;
−
            width: 80% !important;
+
−
            margin: auto !important;
+
 
         }
 
         }
  
−
         #teamsTable td {
+
         .drop-target {
−
             border: 0px white solid;
+
            background-color: #29e;
−
             width: 40vh;
+
             border-style: solid;
−
             text-align: center;
+
        }
−
             vertical-align: middle;
+
 
 +
        .drag-drop {
 +
            display: inline-block;
 +
            height: 10vh;
 +
             width: 10vh;
 +
             z-index: 50;
 +
 
 +
             -webkit-transform: translate(0px, 0px);
 +
            transform: translate(0px, 0px);
  
 +
            transition: background-color 0.3s;
 
         }
 
         }
  
−
         #teamsTable img {
+
         .drag-drop img {
 +
            position: absolute;
 +
            height: 100%;
 
             width: 100%;
 
             width: 100%;
−
             height: auto;
+
             border-radius: 50%;
−
             transition: 0.4s;
+
             z-index: 50;
 
         }
 
         }
  
−
         #teamsTable img:hover {
+
         .drag-drop.can-drop {
−
             transform: scale(1.3, 1.3);
+
            color: #000;
 +
            /*background-color: #4e4;*/
 +
             z-index: 50;
 
         }
 
         }
−
 
+
       
−
         .collapsedInfoTeam {
+
          
−
             top: calc(8vh + 18px);
+
        #backgroundHolder {
 +
             width: 60vw;
 +
            height: 60vw;
 +
            position: relative;
 
             z-index: 1;
 
             z-index: 1;
−
             width: 100%;
+
             background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png");
−
             background-color: white;
+
             background-repeat:no-repeat;
 +
            background-size: 100%;
 
         }
 
         }
−
 
+
       
−
         .containerCollapse {
+
         #interactive_Background {
−
             padding: 0 10px 30px 10px;
+
             height: 100%;
−
             width: 20%;
+
        }
−
             margin-left: auto;
+
       
−
             margin-right: auto;
+
        #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%;
 
         }
 
         }
−
 
+
       
−
         .height-support {
+
         #interactive_CutPlasmidFull {
−
             height: 20px;
+
             height: 100%;
−
            width: 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;
 +
        }
 +
 +
       
 
     </style>
 
     </style>
−
</head>
 
  
−
<body>
 
−
    <header class="full-masthead">
 
−
        <img src="https://static.igem.org/mediawiki/2018/b/b1/T--UCSC--MapOfConnections.png">
 
−
        <div style="font-size: 40px; color: white; top: 25%; left: 25%; position: absolute; background: rgba(0,0,0,0.7);">This is temporary, just a holder for the concept of the page, image of UCSC</div>
 
−
    </header>
 
  
−
    <section id="collabs">
 
−
        <table id="teamsTable">
 
−
            <tr>
 
−
                <td><img href="#ictmumbai" class="teamLink" src="https://static.igem.org/mediawiki/2018/1/17/T--ICT-Mumbai--logo_new.jpg"></td>
 
−
                <td><img href="#chihuahua" class="teamLink" src="https://static.igem.org/mediawiki/2018/1/11/T--Tec-Chihuahua--C21.png"></td>
 
−
                <td><img href="#duesseldorf" class="teamLink" src="https://static.igem.org/mediawiki/2018/b/b8/T--Duesseldorf--namesmall.png"></td>
 
−
                <td><img href="#iitmadras" class="teamLink" src="https://static.igem.org/mediawiki/2018/2/22/T--Tec-Monterrey--iitmadras.png"></td>
 
−
                <td><img href="#madrid" class="teamLink" src="https://static.igem.org/mediawiki/2018/3/36/T--Tec-Monterrey--madridolm.jpg"></td>
 
−
                <td><img href="#makerere" class="teamLink" src="https://static.igem.org/mediawiki/2018/a/ae/T--makerere_university--Igem_logo.jpg"></td>
 
−
                <td><img href="#aixmarseille" class="teamLink" src="https://static.igem.org/mediawiki/2018/5/5e/T--Tec-Monterrey--aix-Marseille.jpg"></td>
 
−
            </tr>
 
−
            <tr>
 
−
                <td><img href="#cem" class="teamLink" src="https://static.igem.org/mediawiki/2018/4/42/T--Tec-Monterrey--teccem.jpg"></td>
 
−
                <td colspan="5" rowspan="4"><img style="width:50%" src="https://static.igem.org/mediawiki/2018/d/de/T--Tec-Monterrey--logo.png"></td>
 
−
                <td><img href="#gdl" class="teamLink" src="https://static.igem.org/mediawiki/2018/7/76/T--TecMonterrey_GDL--Lactobachill01.png"></td>
 
−
            </tr>
 
−
            <tr>
 
−
                <td><img href="#stanford" class="teamLink" src="https://static.igem.org/mediawiki/2018/7/7b/T--Tec-Monterrey--stanford.jpg"></td>
 
−
                <td><img href="#munich" class="teamLink" src="https://static.igem.org/mediawiki/2018/8/8a/T--Tec-Monterrey--lmutumunich.png"></td>
 
−
            </tr>
 
−
            <tr>
 
−
                <td><img href="#harvard" class="teamLink" src="https://static.igem.org/mediawiki/2018/0/02/T--Harvard--OfficialLogo.jpg"></td>
 
−
                <td><img href="#mit" class="teamLink" src="https://static.igem.org/mediawiki/2018/3/3b/T--Tec-Monterrey--mit.png"></td>
 
−
            </tr>
 
−
            <tr>
 
−
                <td><img href="#boston" class="teamLink" src="https://static.igem.org/mediawiki/2018/2/2c/T--BostonU--LOGO.png"></td>
 
−
                <td><img href="#estonia" class="teamLink" src="https://static.igem.org/mediawiki/2017/d/d4/Tuit-logo.svg"></td>
 
−
            </tr>
 
−
            <tr>
 
−
                <td><img href="#oxford" class="teamLink" src="https://static.igem.org/mediawiki/2018/b/bb/T--Tec-Monterrey--oxford.png"></td>
 
−
                <td><img href="#macquarie" class="teamLink" src="https://static.igem.org/mediawiki/2018/f/f6/T--Macquarie_Australia--New_Logo_transperant.png"></td>
 
−
                <td><img href="#unsw" class="teamLink" src="https://static.igem.org/mediawiki/2018/6/66/T--Tec-Monterrey--unsw.jpg"></td>
 
−
                <td></td>
 
−
                <td><img href="#nyuabudhabi" class="teamLink" src="https://static.igem.org/mediawiki/2018/5/51/T--NYU_Abu_Dhabi--teamlogo.png"></td>
 
−
                <td><img href="#nckutainan" class="teamLink" class="teamLink" src="https://static.igem.org/mediawiki/2018/a/a4/T--Tec-Monterrey--ncku.png"></td>
 
−
                <td><img href="#bgu" class="teamLink" src="https://static.igem.org/mediawiki/2018/3/32/T--BGU_Israel--logo_colored.png"></td>
 
−
            </tr>
 
−
        </table>
 
  
−
         <div class="collapse collapsedInfoTeam" id="ictmumbai">
+
         <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>
−
            <section class="seccion-responsiva">
+
        <div id="dropzoneWrapper" style="background-color: black">
−
                <div class="contenido-con-imagen-izquierda">
+
            <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;">
−
                    <div class="body-subtitle">ICT Mumbai</div>
+
                <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
−
                    <div class="texto-derecha">
+
            </div>
−
                        Skype meetings were often a little too early for us and a little too late for them, but collaborations with ICT-Mumbai ended up being very successful! We helped the mathematical modelling team with their oscillating circuit, especially concerning the correctness and scope of the equations they had used in their system, since it was their first time working with MATLAB. From their code, we were able to find a small correction in their model, called a “basal transcription level” that is commonly referred to as leakage, that could help turn their code from a purely qualitative description of the biological system into a quantitative one that could further allow them to make predictions and test experimental data. This additional consideration comes from the fact that RNA transcription actually never reaches zero, which could have lead to potential discrepancies between the modeling and experimental results.
+
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
−
                     </div>
+
                <div style="background-color: black; height: 50%; text-align: center;">
−
                     <div class="imagen-izquierda">
+
                     <br>
−
                        <img class="teamLink" src="https://static.igem.org/mediawiki/2018/1/17/T--ICT-Mumbai--logo_new.jpg">
+
                    <br>
−
                        <br class="clearBoth" />
+
                     <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>
−
                     <br class="clearBoth" />
+
 
                 </div>
 
                 </div>
−
            </section>
+
                 <div style="background-color: black; height: 50%; text-align: center;">
−
        </div>
+
                     <div id="esteban" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
−
        <div class="collapse collapsedInfoTeam" id="chihuahua">
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
−
            <section class="seccion-responsiva">
+
−
                 <div class="contenido-con-imagen-izquierda">
+
−
                     <div class="body-subtitle">Tec Chihuahua</div>
+
−
                    <div class="texto-derecha">
+
−
                        Collaborations with iGEM Tec-Chihuahua Team were full of difficult challenges, but hard work and effort from both parts gave great results. Our team helped Chihuahua conducting a synthesis of nanoparticles with the ability to encapsulate Apidaecin IB. We incorporated a multiple emulsion protocol and chemical transformation in order to send them the nanoparticles that they will use in their project. A single HPLC reading was made after the synthesis to verify the quantity and quality of the encapsulated peptides.They sent us their protocols, and we conducted additional research by contacting experts on the field. This lead to us proposing a new protocol to Chihuahua Team, which they accepted, involving the transformation and chemical encapsulation with chitosan to improve the efficiency output of the reaction, as well as the preservation of the nanocapsules.
+
−
                    </div>
+
−
                    <div class="imagen-izquierda">
+
−
                        <img class="teamLink" src="https://static.igem.org/mediawiki/2018/1/11/T--Tec-Chihuahua--C21.png">
+
−
                        <br class="clearBoth" />
+
−
                    </div>
+
−
                     <br class="clearBoth" />
+
 
                 </div>
 
                 </div>
−
             </section>
+
 
−
        </div>
+
             </div>
−
        <div class="collapse collapsedInfoTeam" id="duesseldorf">
+
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;">
−
            <section class="seccion-responsiva">
+
                 <div style="background-color: black; height: 50%; text-align: center;">
−
                 <div class="contenido-con-imagen-izquierda">
+
                     <br>
−
                     <div class="body-subtitle">Düsseldorf</div>
+
                    <br>
−
                     <div class="texto-derecha">
+
                     <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>
−
                        For our collaboration with iGEM Düsseldorf Team, our mathematical model members had to arduously work for weeks. We had to come up with an appropriate set of differential equations and MATLAB/Python code that could accurately describe their complex Trinity system, which involves three codependent entities growing in the same medium. Although we got stuck a few times with some technical aspects of the coding simulation, our results and ideas proved to be very useful to their team, leading to the determination of the correct ratio of nutrients needed in order for their organisms to grow into a stable system.
+
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PO4</p>
−
                    </div>
+
−
                    <div class="imagen-izquierda">
+
−
                        <img class="teamLink" src="https://static.igem.org/mediawiki/2018/b/b8/T--Duesseldorf--namesmall.png">
+
−
                        <br class="clearBoth" />
+
−
                    </div>
+
−
                     <br class="clearBoth" />
+
 
                 </div>
 
                 </div>
−
            </section>
+
                <div style="background-color: black; height: 50%; text-align: center;">
−
        </div>
+
                    <div id="sofi" class="drag-drop" style="margin:auto"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
−
        <div class="collapse collapsedInfoTeam" id="iitmadras">
+
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
−
            <section class="seccion-responsiva">
+
                </div>
−
                <div class="contenido-con-imagen-izquierda">
+
            </div>
−
                    <div class="body-subtitle">IIT Madras</div>
+
            <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
−
                    <div class="texto-derecha">
+
                <div id="outer-dropzone" class="dropzone">
−
                         One of our team members helped iGEM team IIT Madras with their Language Project, which involved making educational Synthetic Biology videos in our native language. As part of the collaboration, we received a script in English from IIT Madras and proceeded to translate it completely into Spanish. After that, an audio file was recorded and thus concluded our brief collaboration!
+
                    <div id="backgroundHolder">
 +
                        <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>
−
                    <div class="imagen-izquierda">
 
−
                        <img class="teamLink" src="https://static.igem.org/mediawiki/2018/2/22/T--Tec-Monterrey--iitmadras.png">
 
−
                        <br class="clearBoth" />
 
−
                    </div>
 
−
                    <br class="clearBoth" />
 
 
                 </div>
 
                 </div>
−
             </section>
+
             </div>
 
         </div>
 
         </div>
−
         <div class="collapse collapsedInfoTeam" id="madrid">
+
         <script>
−
            <section class="seccion-responsiva">
+
           
−
                 <div class="contenido-con-imagen-izquierda">
+
            $(document).on('scroll', function() {
−
                    <div class="body-subtitle">ICT Mumbai</div>
+
                if($(this).scrollTop()>=$('#gifDiv').position().top){
−
                     <div class="texto-derecha">
+
                    $("#gifDiv").css("background-color: green;");
−
                         We held a Q&A session with iGEM Madrid-OLM Team, concerning important Wiki aspects, where our main developers cleared some doubts about font usage, iGEM skins, and templates. Overall, it was a very productive session, and some general tips of web development that were shared between our teams greatly helped us improve each of our Wikis.
+
                    setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200);
−
                    </div>
+
                 }
−
                     <div class="imagen-izquierda">
+
            });
−
                        <img class="teamLink" src="https://static.igem.org/mediawiki/2018/3/36/T--Tec-Monterrey--madridolm.jpg">
+
               
−
                         <br class="clearBoth" />
+
                       
−
                    </div>
+
        document.addEventListener("DOMContentLoaded", function(event) {
−
                    <br class="clearBoth" />
+
            // 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,
 +
 
 +
                // call this function on every dragmove event
 +
                onmove: dragMoveListener,
 +
                // call this function on every dragend event
 +
                onend: function(event) {
 +
                    var textEl = event.target.querySelector('p');
 +
 
 +
                    (textEl.textContent =
 +
                         'moved a distance of ' +
 +
                        (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
 +
                            Math.pow(event.pageY - event.y0, 2) | 0))
 +
                        .toFixed(2) + 'px');
 +
                }
 +
            });
 +
 
 +
        function dragMoveListener(event) {
 +
            var target = event.target,
 +
                // keep the dragged position in the data-x/data-y attributes
 +
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
 +
                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 +
 
 +
            // translate the element
 +
            target.style.webkitTransform =
 +
                target.style.transform =
 +
                'translate(' + x + 'px, ' + y + 'px)';
 +
 
 +
            // update the posiion attributes
 +
            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>
−
             </section>
+
             </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>
 
         </div>
−
        <div class="collapse collapsedInfoTeam" id="makerere">
+
 
 +
    <div class="slideshow">
 +
        <div class='right-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 
         </div>
 
         </div>
−
         <div class="collapse collapsedInfoTeam" id="aixmarseille">
+
         <div class='left-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 
         </div>
 
         </div>
−
         <div class="collapse collapsedInfoTeam" id="cem">
+
         <div class='bubbles'>
 
         </div>
 
         </div>
−
         <div class="collapse collapsedInfoTeam" id="gdl">
+
         <div class='pauseBtn'>
 +
            <div class='bars'>
 +
                <div></div>
 +
                <div></div>
 +
            </div>
 +
            <div class='tri'>
 +
                <div></div>
 +
            </div>
 
         </div>
 
         </div>
−
         <div class="collapse collapsedInfoTeam" id="stanford">
+
         <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>
−
        <div class="collapse collapsedInfoTeam" id="munich">
+
    </div>
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="harvard">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="mit">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="boston">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="estonia">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="oxford">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="macquarie">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="unsw">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="nyuabudhabi">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="nckutainan">
+
−
        </div>
+
−
        <div class="collapse collapsedInfoTeam" id="bgu">
+
−
        </div>
+
−
    </section>
+
  
−
    <section id="meetings">
+
        <script>
−
        <div class="collab-container">
+
            var screen_900 = window.matchMedia("(max-width: 900px)");
−
        </div>
+
            var screen_1024 = window.matchMedia("(min-width: 1024px)");
−
        <div class="collab-info">
+
            var screen_1280 = window.matchMedia("(min-width: 1280px)");
−
        </div>
+
            var screen_1440 = window.matchMedia("(min-width: 1440px)");
−
    </section>
+
            var screen_1680 = window.matchMedia("(min-width: 1680px)");
−
    <!--<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->
+
            var screen_1920 = window.matchMedia("(min-width: 1920px)");
 +
            var position = 3000;
  
−
    <script>
+
            $(window).on('beforeunload', function() {
−
        var activeTeamDiv;
+
                $(window).scrollTop(0);
−
        $(".teamLink").click(function() {
+
            });
−
             try {
+
 
−
                 $(activeTeamDiv).stop().slideUp(400);
+
            if (screen_900.matches) {
−
             } catch (error) {
+
                var timeoutVar = 0;
−
                 console.error("No active team div");
+
            } 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);
 
             }
 
             }
  
−
             var divID = $(this).attr("href");
+
             function slideVideo() {
 +
                $("#video-main-page").css('transform', 'translateY(-100%)');
 +
                $("#skip-btn").css('transform', 'translateY(-100%)');
 +
                $("#skip-btn").css({
 +
                    'top': '-10%'
 +
                });
 +
            }
  
−
             if (activeTeamDiv != divID) {
+
             function map(value, in_min, in_max, out_min, out_max) {
−
                 activeTeamDiv = divID;
+
                 return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
−
                //console.log(divID);
+
−
                $(divID).stop().slideDown(400);
+
−
                $('html, body').animate({
+
−
                    scrollTop: $(divID).offset().top
+
−
                }, 400);
+
 
             }
 
             }
−
        });
+
 
−
    </script>
+
            //******************************************************* 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');
 +
                }
 +
            });
 +
 
 +
            //******************************************************* Video Controls *******************************************
 +
 
 +
            $("#video-main-page").bind("ended", function() {
 +
                slideVideo()
 +
            });
 +
 
 +
            $("#skip-btn").click(function() {
 +
                clearTimeout(timeoutVar);
 +
                $(window).scrollTop(0);
 +
                slideVideo();
 +
            });
 +
           
 +
           
 +
        </script>
 +
        <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
 +
action=raw&ctype=text/javascript"></script>
 +
    </section>
 
</body>
 
</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