Difference between revisions of "Team:MSU-Michigan/Test"

(Created page with "<html> <head> <!-- slick CSS --> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/sli...")
 
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{BostonU_we_tryin}}
 
<html>
 
<html>
−
    <head>
+
<style>
−
        <!-- slick CSS -->
+
−
        <meta charset="UTF-8">
+
−
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
+
−
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
+
−
    </head>
+
−
    <body>
+
−
        <style>
+
−
            body {
+
−
                background: #777;
+
−
            }
+
−
            div.slider {
+
−
                width: 1000px;
+
−
                height: 500px;
+
−
                background: #fff;
+
−
                margin: 100px auto;
+
−
            }
+
−
            img.slider {
+
−
                width: 100%;
+
−
                height: 100%;
+
−
            }
+
−
          .slick-arrow::before {
+
−
                color: #00274C;
+
−
            }
+
−
        </style>
+
−
        <div class="slider" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "dots": true}'>
+
−
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/7/75/AptapaperLogo.jpg"></div>
+
−
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/6/65/Proximity-Dependent_Ligation_Diagram.png"></div>
+
−
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/b/b7/MSBT_Expression_Diagram.png"></div>
+
−
          <div><img class="slider" src="https://static.igem.org/mediawiki/2016/7/75/AptapaperLogo.jpg"></div>
+
−
        </div>
+
−
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+
−
        <!--jQuery-->
+
−
        <!--<script src="/components/jquery-1.12.3.min.js"></script>-->
+
−
        <!--Slick-->
+
−
        <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
+
−
        <!-- Applying slick to our div -->
+
−
        <script>
+
−
            $('.slider').slick({
+
−
            autoplay: true,
+
−
            fade: false});
+
  
−
         </script>
+
#sideMenu, #top_title {display:none;}
−
     </body>
+
body {background-color:white; }
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
body {
 +
min-width:1200px;
 +
}
 +
 
 +
#one {
 +
position:absolute;
 +
left:10%;
 +
width:80%;
 +
}
 +
 
 +
#two {
 +
position:absolute;
 +
left:-110%;
 +
}
 +
 
 +
#three {
 +
position:absolute;
 +
left:-110%;
 +
}
 +
 
 +
#four {
 +
position:absolute;
 +
left:-110%;
 +
}
 +
 
 +
#five {
 +
position:absolute;
 +
left:-110%;
 +
}
 +
 
 +
#six {
 +
position:absolute;
 +
left:-110%;
 +
}
 +
 
 +
#container {
 +
width:100%;
 +
height:600px;
 +
position:absolute;
 +
overflow:hidden;
 +
}
 +
 
 +
#button {
 +
position:absolute;
 +
top:500px;
 +
left:90%;
 +
}
 +
 
 +
#button:hover, #buttontwo:hover, #buttontwotwo:hover, buttonthree:hover {
 +
transform:scale(1.2);
 +
}
 +
 
 +
#buttonname, #buttonnamewhat {
 +
width:12vw;
 +
height:5vw;
 +
color:#0071A7;
 +
text-align:center;
 +
font-size:175%;
 +
position:absolute;
 +
top:450px;
 +
left:85%;
 +
}
 +
 
 +
#buttontwo {
 +
position:absolute;
 +
top:438px;
 +
left:80%;
 +
 
 +
}
 +
 
 +
#buttonnametwo {
 +
width:12vw;
 +
height:5vw;
 +
color:#bd162a;
 +
text-align:center;
 +
font-size:175%;
 +
position:absolute;
 +
top:383px;
 +
left:75.5%;
 +
}
 +
 
 +
#buttontwotwo {
 +
position:absolute;
 +
top:290px;
 +
left:80%;
 +
 
 +
}
 +
 
 +
#buttonnametwotwo {
 +
width:12vw;
 +
height:5vw;
 +
color:#bd162a;
 +
text-align:center;
 +
font-size:175%;
 +
position:absolute;
 +
top:240px;
 +
left:75.5%;
 +
}
 +
 
 +
#buttonthree:hover {
 +
transform:scale(1.2)
 +
}
 +
 
 +
#media {
 +
background-color:white;
 +
}
 +
 
 +
#twit, #face, #snap, #email {
 +
width:100px;
 +
height:100px;
 +
padding: 30px;
 +
}
 +
 
 +
#twit:hover, #face:hover, #snap:hover, #email:hover {
 +
transform:scale(1.5)
 +
}
 +
 
 +
.secret {
 +
opacity:0;
 +
background-color:red;
 +
cursor:crosshair;
 +
}
 +
 
 +
#buttonnamewhat {
 +
color:#760E18;}
 +
 
 +
</style>
 +
 
 +
<body>
 +
<br><br>
 +
<div id = "media">
 +
<center style = "font-size:230%; padding:25px; color:#BD162A;">Contact us:</center>
 +
</div>
 +
<center>
 +
<a href = "https://twitter.com/buigemwl2016"> <img id = "twit" src = "https://static.igem.org/mediawiki/2016/e/ee/T--BostonU--twitterlogo.png"> </a>
 +
<a href = "https://mail.google.com/mail/?view=cm&fs=1&to=bu.igemwl2016@gmail.com&su=&body=&bcc="><img id = "email" src = "https://static.igem.org/mediawiki/2016/c/c3/T--BostonU--gmaillogo.png"></a>
 +
<a href = "https://www.facebook.com/buigemwl2016"> <img id = "face" src = "https://static.igem.org/mediawiki/2016/b/b7/T--BostonU--facebooklogo.jpg"></a>
 +
<br><br><br><br><br><br><br>
 +
</center>
 +
</body>
 +
 
 +
<script type="text/javascript">
 +
$(document).ready(
 +
    function(){
 +
var n = 2;
 +
var t = 40;
 +
var p = 0;
 +
setInterval(function () {t = t+1}, 1000);
 +
$("#two").click(function () {
 +
t = 0;
 +
});
 +
$("#three").click(function () {
 +
t = 0;
 +
});
 +
$("#four").click(function () {
 +
t = 0;
 +
});
 +
$("#five").click(function () {
 +
t = 0;
 +
});
 +
setInterval(function () {
 +
      if (t>39) {
 +
      n = n+.5;
 +
      if (n == 3) {
 +
      $("#two").css('left', '110%')
 +
      $('#two').animate({'left':'10%'}, 500);
 +
      $("#one").animate({'left':'-110%'}, 500);
 +
         n = 3;}
 +
      else if (n==4) {
 +
      $("#three").css('left', '110%');
 +
      $('#three').animate({'left':'10%'}, 500);
 +
      $("#two").animate({'left':'-110%'}, 500);}
 +
      else if (n==5) {
 +
      $("#four").css('left', '110%');
 +
      $('#four').animate({'left':'10%'}, 500);
 +
      $("#three").animate({'left':'-110%'}, 500);}
 +
      else if (n==6) {
 +
      $("#five").css('left', '110%');
 +
      $('#five').animate({'left':'10%'}, 500);
 +
      $("#four").animate({'left':'-110%'}, 500);}
 +
      else if (n == 7) {
 +
      $("#six").css('left', '110%');
 +
      $("#five").animate({'left':'-110%'}, 500);
 +
      $("#six").animate({'left':'10%'}, 500);}
 +
      else if (n == 8) {
 +
      $("#one").css('left', '110%');
 +
      $("#six").animate({'left':'-110%'}, 500);
 +
      $("#one").animate({'left':'10%'}, 500);
 +
      n = 2;}}
 +
    }, 3000);
 +
 
 +
  $("#forward").click(function () {
 +
      t = 0;
 +
      n = n+1; 
 +
      if (n==3 || n==3.5) {
 +
      $("#two").css('left', '110%')
 +
      $('#two').animate({'left':'10%'}, 500);
 +
      $("#one").animate({'left':'-110%'}, 500);}
 +
      else if (n==4 || n==4.5) {
 +
      $("#three").css('left', '110%');
 +
      $('#three').animate({'left':'10%'}, 500);
 +
      $("#two").animate({'left':'-110%'}, 500);}
 +
      else if (n==5 || n==5.5) {
 +
      $("#four").css('left', '110%');
 +
      $('#four').animate({'left':'10%'}, 500);
 +
      $("#three").animate({'left':'-110%'}, 500);}
 +
      else if (n==6 || n==6.5) {
 +
      $("#five").css('left', '110%');
 +
      $('#five').animate({'left':'10%'}, 500);
 +
      $("#four").animate({'left':'-110%'}, 500);
 +
      t = 30;}
 +
      else if (n == 7 || n==7.5) {
 +
      $("#six").css('left', '110%');
 +
      $("#five").animate({'left':'-110%'}, 500);
 +
      $("#six").animate({'left':'10%'}, 500);
 +
      t = 30;}
 +
      else if (n == 8 || n == 8.5) {
 +
      $("#one").css('left', '110%');
 +
      $("#six").animate({'left':'-110%'}, 500);
 +
      $("#one").animate({'left':'10%'}, 500);
 +
      n = 2;
 +
      t = 30;}
 +
    });
 +
 
 +
  $("#reverse").click(function () {
 +
      t = 0;
 +
      n = n-1;
 +
      if (n == 1 || n==1.5) {
 +
      $("#six").css('left', '-110%');
 +
      $("#six").animate({'left':'10%'}, 500);
 +
      $("#one").animate({'left':'110%'}, 500);
 +
      n = 7;
 +
      t = 30;}   
 +
      else if (n==2 || n==2.5) {
 +
      $("#one").css('left', '-110%');
 +
      $('#one').animate({'left':'10%'}, 500);
 +
      $("#two").animate({'left':'110%'}, 500);
 +
      t = 30;} 
 +
      else if (n==3 || n==3.5) {
 +
      $("#two").css('left', '-110%');
 +
      $('#two').animate({'left':'10%'}, 500);
 +
      $("#three").animate({'left':'110%'}, 500);
 +
      $("#four").css('left', '-110%');}
 +
      else if (n==4 || n==4.5) {
 +
      $("#three").css('left', '-110%');
 +
      $('#three').animate({'left':'10%'}, 500);
 +
      $("#four").animate({'left':'110%'}, 500);}
 +
      else if (n==5 || n==5.5) {
 +
      $("#four").css('left', '-110%');
 +
      $('#four').animate({'left':'10%'}, 500);
 +
      $("#five").animate({'left':'110%'}, 500);}
 +
      else if (n==6 || n==6.5) {
 +
      $("#five").css('left', '-110%');
 +
      $('#five').animate({'left':'10%'}, 500);
 +
      $("#six").animate({'left':'110%'}, 500);
 +
      t = 30;}
 +
    });
 +
 
 +
  });
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
$(document).ready(
 +
     function(){
 +
      var t = 1;
 +
      $("#secretone").click(function () {
 +
      t = 2;
 +
      });
 +
      $("#secrettwo").click(function () {
 +
      t = t + 2;
 +
      });
 +
      $("#secretthree").click(function () {
 +
      t = t +1;
 +
      if (t == 5) {
 +
            $("#appear").show(500);
 +
            $("#appear").css('z-index', '50');}
 +
      else {
 +
            t = 1;}
 +
      });
 +
  });
 +
</script>
 
</html>
 
</html>

Latest revision as of 00:54, 2 November 2017

Template:BostonU we tryin

Contact us: