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

m
 
(17 intermediate revisions by one other user not shown)
Line 458: Line 458:
 
         <div id="bacteria-nadando">
 
         <div id="bacteria-nadando">
 
         </div>
 
         </div>
 
 
     </div> <!-- scroll section ends -->
 
     </div> <!-- scroll section ends -->
  
Line 489: Line 488:
 
         .drop-target {
 
         .drop-target {
 
             background-color: #29e;
 
             background-color: #29e;
            border-color: #fff;
 
 
             border-style: solid;
 
             border-style: solid;
 
         }
 
         }
Line 497: Line 495:
 
             height: 10vh;
 
             height: 10vh;
 
             width: 10vh;
 
             width: 10vh;
             z-index: 10;
+
             z-index: 50;
 
+
            color: #fff;
+
            /*background-color: #29e;*/
+
            border: solid 2px #fff;
+
  
 
             -webkit-transform: translate(0px, 0px);
 
             -webkit-transform: translate(0px, 0px);
Line 514: Line 508:
 
             width: 100%;
 
             width: 100%;
 
             border-radius: 50%;
 
             border-radius: 50%;
 +
            z-index: 50;
 
         }
 
         }
  
Line 519: Line 514:
 
             color: #000;
 
             color: #000;
 
             /*background-color: #4e4;*/
 
             /*background-color: #4e4;*/
 +
            z-index: 50;
 
         }
 
         }
 
          
 
          
Line 604: Line 600:
  
  
 
+
        <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">
+
         <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;">
 
             <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%">
 
                 <img src="https://static.igem.org/mediawiki/2018/d/d3/T--Tec-Monterrey--giv_v3.gif" height="100%" width="100%">
 
             </div>
 
             </div>
 
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
 
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 0; ">
                 <div style="background-color: aqua; height: 50%; text-align: center;">
+
                 <div style="background-color: black; height: 50%; text-align: center;">
                     <div id="alan" class="drag-drop" style="margin: auto;"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
+
                    <br>
                     <p style="font-family: 'Norwester'";>HAHAHAHAHA</p>
+
                    <br>
 +
                     <div id="alan" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/8/8b/T--Tec-Monterrey--Foto_Alan.jpg"> </div>
 +
                     <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: red; 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;"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NO3</p>
 
                 </div>
 
                 </div>
  
 
             </div>
 
             </div>
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; left: 80vw;">
+
             <div style="height: 60vw; width: 20vw; background-color: black; position: absolute; right: 0;">
                 <div id="acebae" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
+
                 <div style="background-color: black; height: 50%; text-align: center;">
                 <div id="sofi" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
+
                    <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>
 +
                    <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"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
 +
                    <p style="font-family: 'Norwester'; text-align: center; font-size: 50px; color: white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;As</p>
 +
                </div>
 
             </div>
 
             </div>
 
             <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
 
             <div style="height: 60vw; width: 60vw; background-color: black; position: absolute; left: 20vw;">
Line 643: Line 650:
 
                 if($(this).scrollTop()>=$('#gifDiv').position().top){
 
                 if($(this).scrollTop()>=$('#gifDiv').position().top){
 
                     $("#gifDiv").css("background-color: green;");
 
                     $("#gifDiv").css("background-color: green;");
                     setTimeout(function(){ $("#gifDiv").fadeOut(); }, 1600);
+
                     setTimeout(function(){ $("#gifDiv").fadeOut(); }, 200);
 
                 }
 
                 }
 
             });
 
             });
Line 825: Line 832:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
 +
    <div class="slideshow">
 +
        <div class='right-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='left-arrow-pane'>
 +
            <div class='arrow'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='bubbles'>
 +
        </div>
 +
        <div class='pauseBtn'>
 +
            <div class='bars'>
 +
                <div></div>
 +
                <div></div>
 +
            </div>
 +
            <div class='tri'>
 +
                <div></div>
 +
            </div>
 +
        </div>
 +
        <div class='content'>
 +
            <div class='slide'>
 +
                <video autoplay loop muted>
 +
                    <source src="https://static.igem.org/mediawiki/2018/4/45/T--Tec-Monterrey--HP_3_pH.mp4" type="video/mp4">
 +
                </video>
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg" />
 +
            </div>
 +
            <div class='slide'>
 +
                <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg" />
 +
            </div>
 +
        </div>
 +
    </div>
  
 
         <script>
 
         <script>

Latest revision as of 01:29, 18 October 2018


E. coding
Tec-Monterrey

DRAG AND DROP!



     Pb

     NO3



     PO4

     As

Contact Us

Sponsors