Difference between revisions of "Team:Tec-Monterrey"

m
m
 
(49 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
<style>
+
    <!-- Bootstrap required meta tags -->
−
#globalWrapper {
+
    <meta charset="utf-8">
−
  background: rgb(248,247,246);   
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
}
+
−
@media (max-width: 900px) {
+
−
  #memo {
+
−
    display: none;
+
−
  }
+
−
}
+
  
−
.screen-title {
+
    <!-- Bootstrap css-->
−
  position: absolute;
+
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
  top: 25%;
+
 
−
  left: 25%;
+
    <!-- Fonts -->
−
  font-size: 7vw;
+
    <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
  line-height: 1.5em;
+
 
−
  color: rgba(93,165,101,0.8);
+
    <style>
−
  text-align: center;
+
        #scroll-section {
−
   font-family: "Norwester", sans-serif;
+
   display: contents;
 
}
 
}
−
.screen-title h1{
+
.header-main-page {
−
   font-family: "DosisRegular", sans-serif !important;
+
   width: 100%;
−
   font-size: 5vw;
+
   height: 100%;
 +
  background: rgb(157,217,223);
 
}
 
}
  
−
#memo {
+
#video-main-page {
−
   width:100%;
+
   width: 100%;
−
}
+
   background: #9dd8dd;
−
 
+
   transition: all 0.6s;
−
#project {
+
   position: fixed;
−
    -webkit-transition: height 4s;
+
  z-index: 200;
−
   -moz-transition: height 4s;
+
−
   -ms-transition: height 4s;
+
−
   -o-transition: height 4s;
+
−
    transition: height 4s;
+
−
    height: auto;
+
−
    background-image: url('/img/logoOficialCirculos.png');
+
−
    background-repeat: no-repeat;
+
−
    background-position: center;
+
−
    background-size: contain;
+
−
    text-align: center;
+
 
}
 
}
−
#team {
+
#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;
 
   text-align: center;
 +
  position: fixed;
 +
  border-radius: 10px;
 +
  bottom: 1%;
 +
  right: 1%;
 +
  transition: all 0.2s;
 +
  -webkit-transition: all 0.2s;
 
}
 
}
−
#myTable{
+
 
−
    width: 95%;
+
#skip-btn:hover {
−
    margin: 0px auto !important;
+
  cursor: pointer;
−
    padding: 10px;
+
  background: rgba(0,0,0,0.5);
−
    border: 2px solid rgb(1,99,60) !important;
+
−
    border-collapse: collapse;
+
−
    vertical-align: middle !important;
+
−
    table-layout: fixed;
+
 
}
 
}
−
#myTable td{
+
#bacteria-nadando {
−
width: 33%;
+
  width: 30vw;
−
border: 2px solid rgb(1,99,60) !important;
+
  height: 30vw;
−
border-collapse: collapse;
+
  left: 35vw;
−
text-align: center;
+
  position: fixed;
−
padding: 5px;
+
  z-index: 1;
 +
  background: url(https://static.igem.org/mediawiki/2018/7/74/T--Tec-Monterrey--Frame_1_interactive_gif.png);
 +
  background-size: cover;
 
}
 
}
  
−
#myTable p {
+
#hiding-block {
−
text-align:center;
+
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%);
−
font-size: 14px;
+
  z-index: 3;
 +
  width: 100%;
 +
  height: 100vh;
 +
  float: left;
 +
  position: sticky;
 
}
 
}
  
−
#HP{
+
#fixed-title {
−
background: rgb(248,247,246);
+
  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);
 
}
 
}
  
−
.service-icon {
+
#fixed-subtitle {
−
   background-color: #fff;
+
   width: 100%;
−
   color: #1D809F;
+
   font-size: 6vw;
−
   height: 7rem;
+
   font-weight: 500;
−
   width: 7rem;
+
   font-family: "Norwester", monospace;
−
   display: block;
+
   line-height: 1.2em;
−
   line-height: 7.5rem;
+
   text-align: center;
−
   font-size: 2.25rem;
+
   z-index: 2;
−
   box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
+
   color: rgba(47,99,97,0.6);
 
}
 
}
  
−
.callout {
+
.topBarWrapper {
−
   padding: 15rem 0;
+
   display: contents !important;
−
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
+
}
−
   background-position: center center;
+
 
−
   background-repeat: no-repeat;
+
#background-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-size: cover;
 +
  background-repeat-y: no-repeat;
 
}
 
}
  
−
.callout h2 {
+
.main-info-container-left {
−
   font-size: 3.5rem;
+
   width: 35%;
−
   font-weight: 700;
+
   height: auto;
−
   display: block;
+
   margin-top: 30%;
−
   max-width: 30rem;
+
   margin-left: 2.5vw;
 +
  float: left;
 
}
 
}
  
−
.portfolio-item {
+
.main-info-container-right {
−
   display: block;
+
   width: 35%;
−
   position: relative;
+
   height: auto;
−
   overflow: hidden;
+
   margin-top: 30%;
−
   max-width: 530px;
+
   margin-right: 2.5vw;
−
   margin: auto auto 1rem;
+
   float: right;
 
}
 
}
  
−
.portfolio-item .caption {
+
.main-info {
−
  display: flex;
+
−
  height: 100%;
+
 
   width: 100%;
 
   width: 100%;
−
   background-color: rgba(33, 37, 41, 0.2);
+
   height: auto;
−
   position: absolute;
+
   margin-top: 20vh;
−
  top: 0;
+
text-align: justify;
−
  bottom: 0;
+
    font-size: 2.5vw;
−
  z-index: 1;
+
    font-weight: bold;
 +
color: white;
 +
line-height: 3vw;
 
}
 
}
  
−
.portfolio-item .caption .caption-content {
+
.main-info img {
−
   color: #fff;
+
   width: 80%;
−
   margin: auto 2rem 2rem;
+
   margin: 10%;
 
}
 
}
  
−
.portfolio-item .caption .caption-content h2 {
+
.main-info .gif {
−
   font-size: 0.8rem;
+
  width: 100%;
−
   text-transform: uppercase;
+
margin: 0;
 +
}
 +
 
 +
@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>
+
    </style>
 
</head>
 
</head>
−
  <body id="page-top">
 
−
    <!-- Header -->
 
−
  <header class="full-masthead" style="margin-bottom: -8px; text-align: center;">
 
−
    <video autoplay muted loop class="video-header" type="video/mp4">
 
−
      <source src="https://static.igem.org/mediawiki/2018/d/d7/T--Tec-Monterrey--videoTec.mp4">
 
−
    </video>
 
−
    <div class="screen-title">
 
−
      Tec-Monterrey
 
−
      <h1>E. coding</h1>
 
−
    </div>
 
−
  </header>
 
  
−
    <!-- Project -->
+
<body>
−
    <section id="project" style="background: #d3edf2;">
+
−
    <div style="width: 80%; margin: auto; text-align: justify; background: #f2fafc;">
+
−
    <div style="width: 96%; margin: auto; text-align: justify; background: #fdfdfd; padding-top: 10px;">
+
−
<div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;">
+
−
      <div class="header-title" style="color: #3582d2;">
+
−
          E-Coding
+
−
      </div>
+
−
      <div class="header-subtitle" style="color: #5da565;">
+
−
          Storing the world one base at a time
+
−
      </div>
+
−
    </div>
+
−
    <div style="border-top: 5px solid #397471; border-right: 5px solid #2a8481; padding: 20px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
+
−
      The research for storing vast amounts of information in smaller devices has been an attention seeking topic in multidisciplinary areas of knowledge all around the world.
+
−
    <br>
+
−
    <br>
+
−
    <q>DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer</q> <br> Baum, 1995
+
−
    </div>
+
−
    <div style="padding: 0px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
+
−
      Nevertheless, this potential has been limited due to the lack of efficient editing tools. CRISPR-Cas has become popular as an editing tool for its high specificity, low cost, and easy handling, compared to other editing techniques. In our work, we use Cas1-Cas2, proteins in charge of new protospacer adquisition in the CRISPR array. Predesigned sequences (-70pb aprox) in the form of ssDNA are produced in E.coli by induction of a promoter, and adquired by the complex Cas1-Cas2 to be integrated into the array. To produce this oligonucleotides, we use the retrotranscriptase EC86. A subsequent sequencing of the array will confirm the integration of the oligos in the CRISPR locus. We measure the integration rate in terms of stimuli intensity, and time. We hypothise that this system can store ordered data in vivo of many stimuli, just by changing the promoter.
+
−
    </div>
+
−
    </div>
+
−
    </div>
+
−
    </section>
+
  
−
     <!-- Team-->
+
     <div id="scroll-section">
−
    <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;">
+
        <header id="page-top" class="header-main-page">
−
    <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;">
+
            <video id="video-main-page" muted autoplay>
−
    <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;">
+
                <source src="https://static.igem.org/mediawiki/2018/f/fd/T--Tec-Monterrey--Intro_Nadando.mp4" type="video/mp4">
−
      <div>
+
            </video>
−
      <table align="center" id="myTable">
+
            <a id="skip-btn">Skip</a>
−
      <tr>
+
        </header>
−
        <th colspan="3" style="text-align:center;"><h5>Team Members</h5></th>
+
 
−
      </tr>
+
        <div id="background-river">
−
      <tr>
+
            <div class="main-info-container-left">
−
      <td>
+
                <div class="main-info">
−
<h6>Esteban de la Peña <a href="https://www.linkedin.com/in/esteban-de-la-pe%C3%B1a-th%C3%A9venet/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
                    <!-- Primero izq -->
−
<p>In charge of making the wiki</p>
+
 
−
      </td>
+
 
−
      <td>
+
                    <b style="font-size: 3.5vw; color: rgb(42, 132, 129);">DNA</b> has been called an excellent medium
−
<h6>Alan Ávila <a href="https://www.linkedin.com/in/alanavilarmz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>  
+
                    for <b  style="font-size: 3.5vw; color: rgb(42, 132, 129);">archiving data</b>, interpreting the four base
−
<p>Team Management/Wet Lab</p>
+
                    pairs as a new language.
−
      </td>
+
 
−
      <td>
+
 
−
<h6>Adrián Hernández <a href= "https://www.linkedin.com/in/adri%C3%A1n-hern%C3%A1ndez-mendoza-0184ba14b/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
 
−
<p>Interlab managment & Dry Lab</p>
+
                </div>
−
      </td>
+
                <div class="main-info">
−
      </tr>
+
                    <!-- Segundo izq -->
−
      <tr>
+
                    <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--Horse2.gif" style="-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
−
      <td>
+
-webkit-transform: rotate(0.000001deg);
−
<h6>Sofia Lara <a href= "https://www.linkedin.com/in/sof%C3%ADa-lara-507773123" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
-webkit-border-radius: 40px;
−
<p>In charge of Human Practices</p>
+
-moz-border-radius: 40px;
−
</td>
+
border-radius: 40px;
−
      <td>
+
overflow: hidden;" class="gif">
−
<h6>José Arnulfo Juárez Figueroa <a href= "https://www.linkedin.com/in/jos%C3%A9-arnulfo-ju%C3%A1rez-figueroa-1478a1159/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
<div style="height: 10vh; width: 100%; text-align: center;">  
−
<p>Team Management</p>
+
<table width="100%" style="background:rgba(0,0,0,0.0); border: 0px solid black; color: white;" cellspacing="0" cellpadding="0">
−
</td>
+
<tr style=" border: 0px solid black;">
−
      <td>
+
<td width="50%" style=" border: 0px solid black; font-size: 1.5vw; ">
−
<h6>Ana E. Lasso de la Vega <a href= "https://www.linkedin.com/in/ana-elizabeth-ldlv/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
Original image
−
<p>Team Management</p>
+
−
</td>
+
−
      </tr>
+
−
      <tr>
+
−
      <td>
+
−
<h6>Miranda Iriarte <a href= "https://www.linkedin.com/in/mirandairiarte/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Congress of Sciences iGEM</p>
+
−
</td>
+
−
      <td>
+
−
<h6>Valeria Fuentes</h6>
+
−
<p>Congress of Sciences iGEM</p>
+
 
</td>
 
</td>
−
      <td>
+
<td width="50%" style=" border: 0px solid black; font-size: 1.5vw;">
−
<h6>Juan Fernández <a href= "https://www.linkedin.com/in/juanfernandezdelagarza/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
Image reconstructed from bacteria
−
<p>Mathematical Model</p>
+
−
      </td>
+
−
      </tr>
+
−
      <tr>
+
−
      <td>
+
−
<h6>Norma Garza <a href= "https://www.linkedin.com/in/norma-garza-893065126/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Interlab managment/Drylab</p>
+
 
</td>
 
</td>
−
      <td>
+
</tr>
−
<h6>Miriam Salas Ramírez <a href= "https://www.linkedin.com/in/miriamsalas" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
</table>
−
<p>Congress of Sciences iGEM</p>
+
−
</td>
+
−
      <td>
+
−
<h6>Victor Robledo</h6>
+
−
<p>Wetlab/Drylab</p>
+
−
</td>
+
−
      </tr>
+
−
<tr>
+
−
      <td>
+
−
<h6>Carlos Javier Cordero <a href= "https://www.linkedin.com/in/carlos-javier-cordero-oropeza-386593a9/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Drylab</p>
+
−
</td>
+
−
      <td>
+
−
<h6>Nora Torres</h6>
+
−
<p>Team Management</p>
+
−
</td>
+
−
      <td>
+
−
<h6>Roberto Vásquez <a href= "https://www.linkedin.com/in/robertovzz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Mathematical Model</p>
+
−
</td>
+
−
      </tr>
+
−
<tr>
+
−
      <td>
+
−
<h6>Samantha Peña</h6>
+
−
<p>Human Practices, and design</p>
+
−
</td>
+
−
      <td>
+
−
<h6>Andrés Sánchez <a href= "http://linkedin.com/in/andresbsanchez" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Mathematical Model</p>
+
−
</td>
+
−
      <td>
+
−
<h6>Diego Valadez</h6>
+
−
<p>Wiki/Dry Lab</p>
+
−
</td>
+
−
      </tr>
+
−
<tr>
+
−
      <td>
+
−
<h6>Jesús Héctor López <a href= "https://www.linkedin.com/in/jesushectorlopezgrajeda" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Dry Lab</p>
+
−
</td>
+
−
      <td>
+
−
<h6>Adriana Lizeth Rubio <a href= "https://mx.linkedin.com/in/adriana-lizeth-rubio-aguirre-56b10a15a" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Mathematical Model</p>
+
−
</td>
+
−
      <td>
+
−
<h6>María Eugenia Reyna <a href= "https://www.linkedin.com/in/mar%C3%ADa-eugenia-reyna-fern%C3%A1ndez-775732167/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
+
−
<p>Wetlab</p>
+
−
</td>
+
−
      </tr>
+
−
      </table>
+
 
</div>
 
</div>
−
</div>
+
                </div>
−
</div>
+
                <div class="main-info">
−
    </section>
+
                    <!-- Tercero izq -->
 +
Through <b  style="font-size: 3.5vw; color: #2F6361;">gene induction</b>,
 +
bacteria could <b  style="font-size: 3.5vw; color: #2F6361;" >store</b>
 +
external information in their DNA.
 +
iGEM Tec-Monterrey 2018 attempts to create
 +
a new system, which <b  style="font-size: 3.5vw; color: #2F6361;">saves information</b> regarding
 +
its surroundings.
 +
                   
 +
                </div>
 +
            </div>
 +
            <div class="main-info-container-right">
 +
                <div class="main-info" style="margin-top: 10vh">
 +
                    <!-- Primero der-->
  
−
    <!-- Human Practices -->
+
                    <img style="height: 40vh "src="https://static.igem.org/mediawiki/2018/8/82/T--Tec-Monterrey--adn_Video2.gif">
−
    <section id="HP" style="text-align: center;">
+
 
−
      <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;">
+
 
−
      <div style="width: 40%; float: left; padding-right: 20px;">
+
                </div>
−
        <img id="memo" src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg">
+
                <div class="main-info" style="margin-top: 10vh">
−
      </div>
+
                    <!-- Segundo der -->
−
      <div style="width: 60%; float: right; padding-top: 60px">
+
                    Information storage in DNA has
−
        <div class="header-title" style="color: #3582d2;">
+
                    been demonstrated by recent efforts,
−
        Human Practices
+
                    <b style="font-size: 3.5vw; color: rgb(42, 132, 129);"> saving </b> anything
−
        </div>
+
                    from <b  style="font-size: 3.5vw; color: rgb(42, 132, 129);">messages</b> to animations.
−
        <div class="header-subtitle" style="color: #5da565;">
+
                </div>
−
        Pollutants in Chiapas and Mexico
+
                <div class="main-info">
−
        </div>
+
                    <!-- Tercero der-->
−
        <p style="font-size: 18px; color: #2f6361;">Our project has many applications, but we decided to face a critical environmental problem in one southern state of Mexico: Chiapas. Chiapas is a beautiful state with megadiverse ecosystems, but it also has a severe water pollution problem that affects many communities close to the natural and polluted water sources. With the help of Cecropia and CONANP we will obtain water samples from the polluted sources and analyze them with several techniques in order to make a valuable overview.</p>
+
 
−
      </div>
+
<video autoplay="" muted="" loop="" class="video-header" type="video/mp4" style="-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
−
      </div>
+
-webkit-transform: rotate(0.000001deg);
 +
-webkit-border-radius: 40px;
 +
-moz-border-radius: 40px;
 +
border-radius: 40px;
 +
overflow: hidden; ">
 +
                        <source src="https://static.igem.org/mediawiki/2018/8/8f/T--Tec-Monterrey--Aguacate.mp4">
 +
                    </video>
 +
                </div>
 +
            </div>
 +
            <div id="hiding-block">
 +
 
 +
<div style="margin-top: 30%; color: white; width: 100%; text-align: center; font-size: 6vh;">E. coding composes a new mechanism for information storage.</div>
 +
 
 +
            </div>
 +
 
 +
            <br class="clearBoth" />
 +
        </div> <!-- background-river ends -->
 +
 
 +
        <div id="fixed-title">
 +
            E. coding
 +
            <div id="fixed-subtitle" style="z-index: 0;">Tec-Monterrey</div>
 +
<div id="fixed-subtitle" style="font-family: DosisRegular; font-size: 30px; color: white; z-index: 0;">Storing the world one base at a time</div>
 +
<div id="fixed-subtitle" style="font-family: Montserrat; z-index: 0; font-size: 40px"><br><br>Scroll to know more
 +
<br>
 +
<i class="fa fa-chevron-circle-down"></i></div>
 +
        </div>
 +
 
 +
        <div id="bacteria-nadando" style="z-index: 2;">
 +
        </div>
 +
 
 +
    </div> <!-- scroll section ends -->
 +
 
 +
    <section style="height: 65vw">
 +
        <style>
 +
            #dropzoneWrapper {
 +
            width: 100%;
 +
            height: auto;
 +
        }
 +
        #outer-dropzone {
 +
            height: 60vw;
 +
            width: 60vw;
 +
            left: 30vw;
 +
            touch-action: none;
 +
        }
 +
   
 +
        .dropzone {
 +
            background-color: black;
 +
            border: dashed 4px transparent;
 +
            border-radius: 4px;
 +
            padding: 10px;
 +
            width: 80%;
 +
            transition: background-color 0.3s;
 +
        }
 +
 
 +
        .drop-active {
 +
            border-color: #aaa;
 +
        }
 +
 
 +
        .drop-target {
 +
            background-color: #29e;
 +
            border-style: solid;
 +
        }
 +
 
 +
        .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;
 +
        }
 +
 
 +
        .drag-drop img {
 +
            position: absolute;
 +
            height: 100%;
 +
            width: 100%;
 +
            border-radius: 50%;
 +
            z-index: 50;
 +
        }
 +
 
 +
        .drag-drop.can-drop {
 +
            color: #000;
 +
            /*background-color: #4e4;*/
 +
            z-index: 50;
 +
        }
 +
       
 +
       
 +
        #backgroundHolder {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: relative;
 +
            z-index: 1;
 +
            background-image: url("https://static.igem.org/mediawiki/2018/5/5d/T--Tec-Monterrey--cut_interactive.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
       
 +
        #interactive_Background {
 +
            height: 100%;
 +
        }
 +
       
 +
        #plasmidHolder {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: absolute;
 +
            z-index: 3;
 +
            background-image:url("https://static.igem.org/mediawiki/2018/9/91/T--Tec-Monterrey--cut_plasmid_full.png");
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
       
 +
        #interactive_CutPlasmidFull {
 +
            height: 100%;
 +
        }
 +
       
 +
        #colorsWrapper {
 +
            width: 60vw;
 +
            height: 60vw;
 +
            position: absolute;
 +
            z-index: 2;
 +
            background-repeat:no-repeat;
 +
            background-size: 100%;
 +
        }
 +
        #color1 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: grey;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color2 {
 +
            opacity: 0;
 +
            left: 56%;
 +
            top: 54.5%;
 +
            height: 8%;
 +
            width: 8%;
 +
            background-color: aqua;
 +
            position: absolute;
 +
            z-index:3;
 +
        }
 +
        #color3 {
 +
            opacity: 0;
 +
            left: 48%;
 +
            top: 63%;
 +
            height: 7%;
 +
            width: 7.5%;
 +
            background-color: yellow;
 +
            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>
 +
 
 +
 
 +
 
 +
        <div style="height: 10vh; width: 100%; background-color: black;">
 +
            <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">DRAG AND DROP!</p>
 +
        </div>
 +
        <div id="dropzoneWrapper" style="background-color: black">
 +
            <div id="gifDiv" style="height: 60vw; width: 60vw; background-color: black; position: absolute; z-index: 6; left: 20vw;">
 +
                <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
 +
            </div>
 +
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <br>
 +
                    <br>
 +
                    <div id="alan" class="drag-drop" style="margin: auto; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/9/9d/T--Tec-Monterrey--plomo.png"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pb</p>
 +
                </div>
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <div id="esteban" class="drag-drop" style="margin: auto; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/4/4b/T--Tec-Monterrey--nitrato.png"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
 +
                </div>
 +
 
 +
            </div>
 +
            <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;">
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <br>
 +
                    <br>
 +
                    <div id="acebae" class="drag-drop" style="margin: auto; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/4/49/T--Tec-Monterrey--fosfato.png"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PO4</p>
 +
                </div>
 +
                <div style="background-color: black; height: 50%; text-align: center;">
 +
                    <div id="sofi" class="drag-drop" style="margin: auto; z-index: 50;"> <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--arsenico.png"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
 +
                </div>
 +
            </div>
 +
            <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
 +
                <div id="outer-dropzone" class="dropzone">
 +
                    <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>
 +
        </div>
 +
<div style:"height: 20vw; width: 100%; background-color: black; position: relative; font-size: 3vw; color: white;"><br><br><br> <a href="https://2018.igem.org/Team:Tec-Monterrey/Description" style="color: white; font-size: 3vw;">LEARN MORE</a><br><br></div>
 +
        <script>
 +
 
 +
            $(document).on('scroll', function() {
 +
                if($(this).scrollTop()>=$('#gifDiv').position().top){
 +
                    $("#gifDiv").css("background-color: green;");
 +
                    setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200);
 +
                }
 +
            });
 +
               
 +
                       
 +
        document.addEventListener("DOMContentLoaded", function(event) {
 +
            // target elements with the "draggable" class
 +
        interact('.draggable')
 +
            .draggable({
 +
                // enable inertial throwing
 +
                inertia: true,
 +
                // keep the element within the area of it's parent
 +
                restrict: {
 +
                    restriction: "#dropzoneWrapper",
 +
                    endOnly: true,
 +
                    elementRect: {
 +
                        top: 0,
 +
                        left: 0,
 +
                        bottom: 1,
 +
                        right: 1
 +
                    }
 +
                },
 +
                // enable autoScroll
 +
                autoScroll: true,
 +
 
 +
                // 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>
 +
<section width="100%" height="20vh" style="background-color: black;">
 +
<div style="height: 20vh; width: 100%; text-align: center;"> <a href="https://2018.igem.org/Team:Tec-Monterrey/Description" style="color: white; font-size: 3vw" >LEARN MORE </a> </div>
 +
</section>
 +
    <script>
 +
        var screen_900 = window.matchMedia("(max-width: 900px)");
 +
        var screen_1024 = window.matchMedia("(min-width: 1024px)");
 +
        var screen_1280 = window.matchMedia("(min-width: 1280px)");
 +
        var screen_1440 = window.matchMedia("(min-width: 1440px)");
 +
        var screen_1680 = window.matchMedia("(min-width: 1680px)");
 +
        var screen_1920 = window.matchMedia("(min-width: 1920px)");
 +
        var position = 3000;
 +
 +
        $(window).on('beforeunload', function() {
 +
            $(window).scrollTop(0);
 +
        });
 +
 +
        if (screen_900.matches) {
 +
            var timeoutVar = 0;
 +
        } else if (screen_1024.matches) {
 +
            position = 3450;
 +
            var timeoutVar = setTimeout(function() {
 +
                $(window).scrollTop(0);
 +
            }, 8000);
 +
        } else if (screen_1280.matches) {
 +
            position = 4500;
 +
            var timeoutVar = setTimeout(function() {
 +
                $(window).scrollTop(0);
 +
            }, 8000);
 +
        } else if (screen_1440.matches) {
 +
            position = 6000;
 +
            var timeoutVar = setTimeout(function() {
 +
                $(window).scrollTop(0);
 +
            }, 8000);
 +
        } else if (screen_1680.matches) {
 +
            position = 6500;
 +
            var timeoutVar = setTimeout(function() {
 +
                $(window).scrollTop(0);
 +
            }, 8000);
 +
        } else if (screen_1920.matches) {
 +
            position = 7500;
 +
            var timeoutVar = setTimeout(function() {
 +
                $(window).scrollTop(0);
 +
            }, 8000);
 +
        } else {
 +
            var timeoutVar = setTimeout(function() {
 +
                $(window).scrollTop(0);
 +
            }, 8000);
 +
        }
 +
 +
        function slideVideo() {
 +
            $("#video-main-page").css('transform', 'translateY(-100%)');
 +
            $("#skip-btn").css('transform', 'translateY(-100%)');
 +
            $("#skip-btn").css({
 +
                'top': '-10%'
 +
            });
 +
        }
 +
 +
        function map(value, in_min, in_max, out_min, out_max) {
 +
            return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
 +
        }
 +
 +
        //******************************************************* 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>
 
</body>
 
</body>
 +
 
</html>
 
</html>
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Latest revision as of 01:35, 6 November 2018

Skip
DNA has been called an excellent medium for archiving data, interpreting the four base pairs as a new language.
Original image Image reconstructed from bacteria
Through gene induction, bacteria could store external information in their DNA. iGEM Tec-Monterrey 2018 attempts to create a new system, which saves information regarding its surroundings.
Information storage in DNA has been demonstrated by recent efforts, saving anything from messages to animations.
E. coding composes a new mechanism for information storage.

E. coding
Tec-Monterrey
Storing the world one base at a time


Scroll to know more

DRAG AND DROP!



     Pb

     NO3



     PO4

     As

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors