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

 
(44 intermediate revisions by the same user not shown)
Line 128: Line 128:
 
   width: 100%;
 
   width: 100%;
 
   height: auto;
 
   height: auto;
−
   margin-top: 40vh;
+
   margin-top: 20vh;
−
     font-size: 40px;
+
text-align: justify;
 +
     font-size: 2.5vw;
 
     font-weight: bold;
 
     font-weight: bold;
−
    line-height: 40px;
 
 
color: white;
 
color: white;
 +
line-height: 3vw;
 
}
 
}
  
Line 187: Line 188:
  
  
−
                     DNA has been called an excellent medium
+
                     <b style="font-size: 3.5vw; color: rgb(42, 132, 129);">DNA</b> has been called an excellent medium
−
                     for archiving data, interpreting the four base
+
                     for <b  style="font-size: 3.5vw; color: rgb(42, 132, 129);">archiving data</b>, interpreting the four base
 
                     pairs as a new language.
 
                     pairs as a new language.
  
Line 202: Line 203:
 
border-radius: 40px;  
 
border-radius: 40px;  
 
overflow: hidden;" class="gif">
 
overflow: hidden;" class="gif">
 +
<div style="height: 10vh; width: 100%; text-align: center;">
 +
<table width="100%" style="background:rgba(0,0,0,0.0); border: 0px solid black; color: white;" cellspacing="0" cellpadding="0">
 +
<tr style=" border: 0px solid black;">
 +
<td width="50%" style=" border: 0px solid black; font-size: 1.5vw; ">
 +
Original image
 +
</td>
 +
<td width="50%" style=" border: 0px solid black; font-size: 1.5vw;">
 +
Image reconstructed from bacteria
 +
</td>
 +
</tr>
 +
</table>
 +
</div>
 
                 </div>
 
                 </div>
 
                 <div class="main-info">
 
                 <div class="main-info">
 
                     <!-- Tercero izq -->
 
                     <!-- Tercero izq -->
−
Through gene induction,  
+
Through <b  style="font-size: 3.5vw; color: #2F6361;">gene induction</b>,  
−
bacteria could store  
+
bacteria could <b  style="font-size: 3.5vw; color: #2F6361;" >store</b>
 
external information in their DNA.
 
external information in their DNA.
 
iGEM Tec-Monterrey 2018 attempts to create
 
iGEM Tec-Monterrey 2018 attempts to create
−
a new system, which saves information regarding
+
a new system, which <b  style="font-size: 3.5vw; color: #2F6361;">saves information</b> regarding
 
its surroundings.  
 
its surroundings.  
 
                      
 
                      
Line 215: Line 228:
 
             </div>
 
             </div>
 
             <div class="main-info-container-right">
 
             <div class="main-info-container-right">
−
                 <div class="main-info">
+
                 <div class="main-info" style="margin-top: 10vh">
 
                     <!-- Primero der-->
 
                     <!-- Primero der-->
  
−
                     <img src="https://static.igem.org/mediawiki/2018/3/3c/T--Tec-Monterrey--ADN_Intro.png">
+
                     <img style="height: 40vh "src="https://static.igem.org/mediawiki/2018/8/82/T--Tec-Monterrey--adn_Video2.gif">
  
  
 
                 </div>
 
                 </div>
−
                 <div class="main-info">
+
                 <div class="main-info" style="margin-top: 10vh">
 
                     <!-- Segundo der -->
 
                     <!-- Segundo der -->
 
                     Information storage in DNA has
 
                     Information storage in DNA has
 
                     been demonstrated by recent efforts,
 
                     been demonstrated by recent efforts,
−
                     saving anything
+
                     <b style="font-size: 3.5vw; color: rgb(42, 132, 129);"> saving </b> anything
−
                     from messages to animations.
+
                     from <b  style="font-size: 3.5vw; color: rgb(42, 132, 129);">messages</b> to animations.
 
                 </div>
 
                 </div>
 
                 <div class="main-info">
 
                 <div class="main-info">
Line 243: Line 256:
 
             </div>
 
             </div>
 
             <div id="hiding-block">
 
             <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>
 
             </div>
  
Line 250: Line 266:
 
         <div id="fixed-title">
 
         <div id="fixed-title">
 
             E. coding
 
             E. coding
−
             <div id="fixed-subtitle">Tec-Monterrey</div>
+
             <div id="fixed-subtitle" style="z-index: 0;">Tec-Monterrey</div>
−
<div id="fixed-subtitle" style="font-family: DosisRegular; font-size: 30px; color: white;">Storing the world one base at a time</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: 1; font-size: 40px">Scroll to know more
+
<div id="fixed-subtitle" style="font-family: Montserrat; z-index: 0; font-size: 40px"><br><br>Scroll to know more
 
<br>
 
<br>
 
<i class="fa fa-chevron-circle-down"></i></div>
 
<i class="fa fa-chevron-circle-down"></i></div>
 
         </div>
 
         </div>
  
−
         <div id="bacteria-nadando">
+
         <div id="bacteria-nadando" style="z-index: 2;">
 
         </div>
 
         </div>
  
 
     </div> <!-- scroll section ends -->
 
     </div> <!-- scroll section ends -->
  
−
     <section style="height: 90vw">
+
     <section style="height: 65vw">
 
         <style>
 
         <style>
 
             #dropzoneWrapper {
 
             #dropzoneWrapper {
Line 413: Line 429:
 
                     <br>
 
                     <br>
 
                     <br>
 
                     <br>
−
                     <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
+
                     <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>
 
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pb</p>
 
                 </div>
 
                 </div>
 
                 <div style="background-color: black; height: 50%; text-align: center;">
 
                 <div style="background-color: black; height: 50%; text-align: center;">
−
                     <div id="esteban" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
+
                     <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>
 
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
 
                 </div>
 
                 </div>
Line 426: Line 442:
 
                     <br>
 
                     <br>
 
                     <br>
 
                     <br>
−
                     <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>
+
                     <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>
 
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PO4</p>
 
                 </div>
 
                 </div>
 
                 <div style="background-color: black; height: 50%; text-align: center;">
 
                 <div style="background-color: black; height: 50%; text-align: center;">
−
                     <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 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>
 
                     <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
 
                 </div>
 
                 </div>
Line 449: Line 465:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
<div style:"height: 10vw; width: 100%; background-color: black; position: relative;"> <a src="https://2018.igem.org/Team:Tec-Monterrey/Description">LEARN MORE</a></div>
 
         <script>
 
         <script>
  
Line 596: Line 613:
 
     </script>
 
     </script>
 
     </section>
 
     </section>
−
 
−
    <div class="slideshow">
 
−
        <div class='right-arrow-pane'>
 
−
            <div class='arrow'>
 
−
                <div></div>
 
−
            </div>
 
−
        </div>
 
−
        <div class='left-arrow-pane'>
 
−
            <div class='arrow'>
 
−
                <div></div>
 
−
            </div>
 
−
        </div>
 
−
        <div class='bubbles'>
 
−
        </div>
 
−
        <div class='pauseBtn'>
 
−
            <div class='bars'>
 
−
                <div></div>
 
−
                <div></div>
 
−
            </div>
 
−
            <div class='tri'>
 
−
                <div></div>
 
−
            </div>
 
−
        </div>
 
−
        <div class='content'>
 
−
            <div class='slide'>
 
−
                <video autoplay loop muted>
 
−
                    <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
 
−
                </video>
 
−
            </div>
 
−
            <div class='slide'>
 
−
                <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
 
−
            </div>
 
−
            <div class='slide'>
 
−
                <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
 
−
            </div>
 
−
            <div class='slide'>
 
−
                <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
 
−
            </div>
 
−
        </div>
 
−
    </div>
 
−
 
−
    <section id="references-interLab" class="seccion-responsiva">
 
−
        <div class="referencias">
 
−
            <div class="body-title">References</div>
 
−
 
−
            [1] Díez-Villaseñor, C., Guzmán, N. M., Almendros, C., García-Martínez, J. & Mojica, F. J. M. CRISPR-spacer integration reporter plasmids reveal distinct genuine acquisition specificities among CRISPR-Cas I-E variants of Escherichia coli. RNA Biol. (2013). doi:10.4161/rna.24023
 
−
            <br>
 
−
            [2] Farzadfard, F., & Lu, T. K. Genomically encoded analog memory with precise in vivo DNA writing in living cell populations. Science. (2014). doi: 10.1126/science.1256272
 
−
            <br>
 
−
            [3] Levy, A., Goren, M. G., Yosef, I., Auster, O., Manor, M., Amitai, G., Edgar, R., Qimron, U. & Sorek, R. CRISPR adaptation biases explain preference for acquisition of foreign DNA. Nature. (2015). doi:10.1038/nature14302
 
−
            <br>
 
−
            [4] Nuñez, J. K. Mechanism of CRISPR–Cas Immunological Memory. (2016). Doctoral dissertation, UC Berkeley.
 
−
            <br>
 
−
            [5] Nuñez, J. K., Kranzusch P, Noeske J, Wright A, Davies C, Doudna J. Cas1-Cas2 complex formation mediates spacer acquisition during CRISPR-Cas adaptive immunity. Nat. Struct. Mol. Biol. (2014). doi:10.1038/nsmb.2820
 
−
            <br>
 
−
            [6] Shipman, S. L., Nivala, J., Macklis, J. D., & Church, G. M. Molecular recordings by directed CRISPR spacer acquisition. Science.(2016). doi: 10.1126/science.aaf1175
 
−
            <br>
 
−
        </div>
 
−
    </section>
 
−
 
−
 
 
     <script>
 
     <script>
 
         var screen_900 = window.matchMedia("(max-width: 900px)");
 
         var screen_900 = window.matchMedia("(max-width: 900px)");

Latest revision as of 03:43, 18 October 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