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

Line 1: Line 1:
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}}
 
<html>
 
<html>
−
  <head>      
+
 
 +
<head>
 
     <!-- Bootstrap required meta tags -->
 
     <!-- Bootstrap required meta tags -->
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
−
 
+
 
 
     <!-- Bootstrap css-->
 
     <!-- Bootstrap css-->
 
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&amp;ctype=text/css" rel="stylesheet">
−
         
+
 
 
     <!-- Fonts -->
 
     <!-- Fonts -->
 
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
 
     <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&amp;ctype=text/css" rel="stylesheet">
Line 14: Line 15:
 
     <style>
 
     <style>
  
−
/**********************************************************************************************************************/
+
        /**********************************************************************************************************************/
 
/******************************************************* SLIDESHOW ***************************************************/
 
/******************************************************* SLIDESHOW ***************************************************/
 
/**********************************************************************************************************************/
 
/**********************************************************************************************************************/
Line 415: Line 416:
 
}
 
}
 
     </style>
 
     </style>
−
    </head>
+
</head>
−
    <body>
+
  
−
<div id="scroll-section">
+
<body>
−
  <header id="page-top" class="header-main-page">
+
−
  </header>
+
  
−
     <div id="background-river">
+
     <div id="scroll-section">
−
      <div class="main-info-container-left">
+
         <header id="page-top" class="header-main-page">
−
         <div class="main-info">
+
         </header>
−
        </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 id="background-river">
−
    </div> <!-- background-river ends -->
+
            <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>
  
−
    <div id="fixed-title">
+
            <br class="clearBoth" />
−
      E. coding
+
        </div> <!-- background-river ends -->
−
      <div id="fixed-subtitle">Tec-Monterrey</div>
+
−
    </div>
+
  
−
    <div id="bacteria-nadando">
+
        <div id="fixed-title">
−
    </div>
+
            E. coding
 +
            <div id="fixed-subtitle">Tec-Monterrey</div>
 +
        </div>
  
−
</div> <!-- scroll section ends -->
+
        <div id="bacteria-nadando">
 +
        </div>
  
−
<section style="height: 90vw">
+
    </div> <!-- scroll section ends -->
−
    <style>
+
 
−
        #dropzoneWrapper {
+
    <section style="height: 90vw">
−
             position: absolute;
+
        <style>
 +
            #dropzoneWrapper {
 +
             width: 100%;
 
             height: auto;
 
             height: auto;
−
            width: 100%;
+
             background-color: navajowhite;
−
             background-color: black;
+
 
         }
 
         }
 
         #outer-dropzone {
 
         #outer-dropzone {
−
             height: 80vw;
+
             height: 70vw;
−
             width: 80vw;
+
             width: 70vw;
 +
            left: 30vw;
 
             touch-action: none;
 
             touch-action: none;
 +
            background-color: aqua;
 
         }
 
         }
 
      
 
      
Line 477: Line 480:
 
             border: dashed 4px transparent;
 
             border: dashed 4px transparent;
 
             border-radius: 4px;
 
             border-radius: 4px;
−
            margin: 10px auto 30px;
 
 
             padding: 10px;
 
             padding: 10px;
 
             width: 80%;
 
             width: 80%;
Line 492: Line 494:
 
             border-style: solid;
 
             border-style: solid;
 
         }
 
         }
−
       
 
−
        @keyframes float {
 
−
0% {
 
−
transform: translatey(0px);
 
−
}
 
−
50% {
 
−
transform: translatey(-20px);
 
−
}
 
−
100% {
 
−
transform: translatey(0px);
 
−
}
 
  
 
         .drag-drop {
 
         .drag-drop {
Line 508: Line 499:
 
             height: 10vh;
 
             height: 10vh;
 
             width: 10vh;
 
             width: 10vh;
−
            overflow: hidden;
 
  
 
             color: #fff;
 
             color: #fff;
Line 518: Line 508:
  
 
             transition: background-color 0.3s;
 
             transition: background-color 0.3s;
−
            transform: translatey(0px);
 
−
        animation: float 6s ease-in-out infinite;
 
 
         }
 
         }
  
Line 532: Line 520:
 
             color: #000;
 
             color: #000;
 
             /*background-color: #4e4;*/
 
             /*background-color: #4e4;*/
 +
        }
 +
       
 +
        #moleculeHolderLeft {
 +
            height: 70vw;
 +
            width: 10vw;
 +
            position: relative;
 +
            background-color: blue;
 +
        }
 +
       
 +
        #moleculeHolderRight {
 +
            height: 70vw;
 +
            width: 10vw;
 +
            position: relative;
 +
            background-color: pink;
 
         }
 
         }
 
          
 
          
 
         #backgroundHolder {
 
         #backgroundHolder {
−
             width: 80vw;
+
             width: 70vw;
−
             height: 80vw;
+
             height: 70vw;
 
             position: relative;
 
             position: relative;
 
             z-index: 1;
 
             z-index: 1;
Line 543: Line 545:
 
             background-size: 100%;
 
             background-size: 100%;
 
         }
 
         }
−
       
 
−
        #moleculeHolderLeft {
 
−
           
 
−
        }
 
−
       
 
−
        #moleculeHolderRight {
 
−
           
 
−
        }
 
−
       
 
 
          
 
          
 
         #interactive_Background {
 
         #interactive_Background {
Line 558: Line 551:
 
          
 
          
 
         #plasmidHolder {
 
         #plasmidHolder {
−
             width: 80vw;
+
             width: 70vw;
−
             height: 80vw;
+
             height: 70vw;
 
             position: absolute;
 
             position: absolute;
 
             z-index: 3;
 
             z-index: 3;
Line 622: Line 615:
 
          
 
          
 
     </style>
 
     </style>
−
   
+
 
−
   
+
 
−
      
+
 
−
      
+
 
−
     <div id="dropzoneWrapper">
+
<div id="dropzoneWrapper">
 +
     <div style="height: 70vw; width: 15vw; background-color: orange; position: absolute; left: 0;">
 +
        <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="esteban" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
 +
     </div>
 +
     <div style="height: 70vw; width: 70vw; background-color: aquamarine; position: absolute; left: 15vw;">
 
     <div id="outer-dropzone" class="dropzone">
 
     <div id="outer-dropzone" class="dropzone">
−
        <div id="moleculeHolderLeft">
 
−
        <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="esteban" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Foto_Esteban.jpg"> </div>
 
−
        </div>
 
 
         <div id="backgroundHolder">
 
         <div id="backgroundHolder">
 
             <div id="colorsWrapper">
 
             <div id="colorsWrapper">
Line 642: Line 636:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
        <div id="moleculeHolderRight">
+
    </div>
 +
    </div>
 +
    <div style="height: 70vw; width: 15vw; background-color: yellow; position: absolute; left: 85vw;">
 
         <div id="acebae" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
 
         <div id="acebae" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Tec-Monterrey--Foto_David.jpg"> </div>
−
    <div id="sofi" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
+
        <div id="sofi" class="drag-drop"> <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tec-Monterrey--Foto_Sofia.jpg"> </div>
−
        </div>
+
−
    </div>
+
 
     </div>
 
     </div>
−
    <script>
+
</div>
−
         // target elements with the "draggable" class
+
         <script>
 +
            // target elements with the "draggable" class
 
         interact('.draggable')
 
         interact('.draggable')
 
             .draggable({
 
             .draggable({
Line 783: Line 778:
 
             });
 
             });
 
     </script>
 
     </script>
−
</section>
+
    </section>
−
<section>
+
    <section>
−
    <div class="slideshow">
+
        <div class="slideshow">
−
        <div class='right-arrow-pane'>
+
            <div class='right-arrow-pane'>
−
            <div class='arrow'><div></div></div>
+
                <div class='arrow'>
−
        </div>
+
                    <div></div>
−
        <div class='left-arrow-pane'>
+
                 </div>
−
            <div class='arrow'><div></div></div>
+
−
        </div>
+
−
        <div class='bubbles'>
+
−
        </div>
+
−
        <div class='pauseBtn'>
+
−
            <div class='bars'>
+
−
                 <div></div>
+
−
                <div></div>
+
 
             </div>
 
             </div>
−
             <div class='tri'>
+
             <div class='left-arrow-pane'>
−
                 <div></div>
+
                 <div class='arrow'>
−
            </div>
+
                    <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>
−
             <div class='slide'>
+
             <div class='bubbles'>
−
                <img src="https://static.igem.org/mediawiki/2018/4/43/T--Tec-Monterrey--HP_3_ni%C3%B1ossolos.jpg"/>
+
 
             </div>
 
             </div>
−
             <div class='slide'>
+
             <div class='pauseBtn'>
−
                 <img src="https://static.igem.org/mediawiki/2018/f/f5/T--Tec-Monterrey--HP_3_trabajando.jpg"/>
+
                 <div class='bars'>
 +
                    <div></div>
 +
                    <div></div>
 +
                </div>
 +
                <div class='tri'>
 +
                    <div></div>
 +
                </div>
 
             </div>
 
             </div>
−
             <div class='slide'>
+
             <div class='content'>
−
                 <img src="https://static.igem.org/mediawiki/2018/b/be/T--Tec-Monterrey--HP_3_todos.jpg"/>
+
                <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>
−
    </div>
 
  
−
    <script>
+
        <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;
  
−
          var screen_900 = window.matchMedia("(max-width: 900px)");
+
            $(window).on('beforeunload', function() {
−
          var screen_1024 = window.matchMedia("(min-width: 1024px)");
+
                $(window).scrollTop(0);
−
          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(){
+
            if (screen_900.matches) {
−
             $(window).scrollTop(0);
+
                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);
 +
            }
  
−
          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() {
 
             function slideVideo() {
−
              $("#video-main-page").css('transform','translateY(-100%)');
+
                $("#video-main-page").css('transform', 'translateY(-100%)');
−
              $("#skip-btn").css('transform','translateY(-100%)');
+
                $("#skip-btn").css('transform', 'translateY(-100%)');
−
              $("#skip-btn").css({'top': '-10%'});
+
                $("#skip-btn").css({
 +
                    'top': '-10%'
 +
                });
 
             }
 
             }
  
Line 866: Line 878:
 
             }
 
             }
  
−
//******************************************************* SCROLL OPACITY ***********************************************
+
            //******************************************************* SCROLL OPACITY ***********************************************
  
−
  var hiding = document.getElementById("hiding-block");
+
            var hiding = document.getElementById("hiding-block");
−
  var bacteria = document.getElementById("bacteria-nadando");
+
            var bacteria = document.getElementById("bacteria-nadando");
  
 
             $(window).scroll(function(event) {
 
             $(window).scroll(function(event) {
  
−
              var hidingPos = hiding.offsetTop;
+
                var hidingPos = hiding.offsetTop;
−
              var bacteriaPos = bacteria.offsetTop;
+
                var bacteriaPos = bacteria.offsetTop;
  
 
                 var scroll = $(window).scrollTop();
 
                 var scroll = $(window).scrollTop();
Line 883: Line 895:
 
                 var bacteriaRotate = map(scroll, 0, 700, 50, 0);
 
                 var bacteriaRotate = map(scroll, 0, 700, 50, 0);
 
                 if (scroll > hidingPos) {
 
                 if (scroll > hidingPos) {
−
                  $('#bacteria-nadando ').css('opacity','0');
+
                    $('#bacteria-nadando ').css('opacity', '0');
 
                 } else {
 
                 } else {
−
                  $('#bacteria-nadando ').css('opacity', bacteriaOpacity);
+
                    $('#bacteria-nadando ').css('opacity', bacteriaOpacity);
−
                  $('#bacteria-nadando ').css('top', bacteriaTop + 'px');
+
                    $('#bacteria-nadando ').css('top', bacteriaTop + 'px');
 
                 }
 
                 }
 
             });
 
             });
  
−
//******************************************************* Video Controls *******************************************
+
            //******************************************************* Video Controls *******************************************
 +
 
 +
            $("#video-main-page").bind("ended", function() {
 +
                slideVideo()
 +
            });
  
−
            $("#video-main-page").bind("ended", function(){slideVideo()});
 
−
           
 
 
             $("#skip-btn").click(function() {
 
             $("#skip-btn").click(function() {
−
              clearTimeout(timeoutVar);
+
                clearTimeout(timeoutVar);
−
              $(window).scrollTop(0);
+
                $(window).scrollTop(0);
−
              slideVideo();
+
                slideVideo();
 
             });
 
             });
−
    </script>
+
        </script>
−
    <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
+
        <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
 
action=raw&ctype=text/javascript"></script>
 
action=raw&ctype=text/javascript"></script>
−
        </section>
+
    </section>
−
    </body>
+
</body>
 +
 
 
</html>
 
</html>
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Revision as of 15:30, 14 October 2018


E. coding
Tec-Monterrey

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors