Difference between revisions of "Team:CSU CHINA"

Line 1: Line 1:
−
{{CSU_CHINA}}
+
{{ CSU_CHINA }}
 +
<!DOCTYPE html>
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="UTF-8" />
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 +
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 +
    <title>Home</title>
 +
   
 +
    <style>
 +
      body,
 +
      div,
 +
      ol,
 +
      ul,
 +
      li,
 +
      dl,
 +
      dt,
 +
      dd,
 +
      h1,
 +
      h2,
 +
      h3,
 +
      h4,
 +
      h5,
 +
      h6,
 +
      p,
 +
      form,
 +
      fieldset,
 +
      legend,
 +
      input {
 +
        margin: 0;
 +
        padding: 0;
 +
      }
 +
      h1,
 +
      h2,
 +
      h3,
 +
      h4,
 +
      h5,
 +
      h6 {
 +
        font-size: 100%;
 +
        font-weight: normal;
 +
      }
 +
      ol,
 +
      ul {
 +
        list-style: none;
 +
      }
 +
      img,
 +
      fieldset {
 +
        border: 0 none;
 +
        display: block;
 +
      }
  
−
<html>
+
      img {
−
<head>
+
        top: 15%;
−
<title>CSU_CHINA</title>
+
      }
 +
      img:hover {
 +
        transition-duration: 1.8s;
 +
      }
 +
      .logo {
 +
        margin: 0;
 +
        left: 0px;
 +
        width: 100%;
 +
        position: absolute;
 +
        transition-duration: 1s;
 +
        z-index: 2;
 +
      }
 +
      #videoBox {
 +
        position: relative;
 +
        height: 100vh;
 +
        overflow: hidden;
 +
        background-image: url("https://static.igem.org/mediawiki/2019/f/fc/T--CSU_CHINA--testpage.jpg");
 +
        width: 100%;
 +
        margin: 0;
 +
        padding: 0;
 +
      }
  
−
</head>
+
      .button {
−
<body style="background-color:black">
+
        position: absolute;
−
<img style="width:100%; background-color:black; padding-top:150px" src="https://static.igem.org/mediawiki/2019/c/ca/T--CSU_CHINA--LOGOWITHWORDS.png" alt="LOGO"/>
+
        background-color: rgb(183, 130, 233);
−
</body>
+
        border-radius: 20px;
 +
        border: 0px solid;
 +
        height: 50px;
 +
        width: 130px;
 +
        left: 46%;
 +
        top: 75%;
 +
        z-index: 3;
 +
        font-size: 1.5rem;
 +
        color:white;
 +
        transition-duration:  0.8s;
 +
       
 +
      }
 +
      .button:hover{
 +
        background-color: rgb(186, 147, 201);
 +
      }
 +
    </style>
 +
    <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
 +
    <script type="text/javascript">
 +
      $(function() {
 +
        var video = $("#videoShow");
 +
        var logo = $(".logo");
 +
 
 +
        $("#btn").click(function() {
 +
          video.css("display", "block");
 +
          $(this).css("left", "111%");
 +
          logo.css("left", "100%");
 +
          sourceDom = $("<source src=\""+ "https://static.igem.org/mediawiki/2019/1/1b/T--CSU_CHINA--film1.mp4" +"\">");
 +
          video.append(sourceDom)
 +
          video[0].play();
 +
        });
 +
 
 +
        video.bind("ended", function() {
 +
          video.css("display", "none");
 +
          $("#btn").css("left", "46%");
 +
          logo.css("left", "0");
 +
        });
 +
      });
 +
 
 +
   
 +
    </script>
 +
  </head>
 +
 
 +
  <body>
 +
    <div id="videoBox">
 +
      <img class="logo" src="https://static.igem.org/mediawiki/2019/c/ca/T--CSU_CHINA--LOGOWITHWORDS.png" alt="LOGO" />
 +
      <button id="btn" class="button ">
 +
        PLAY
 +
      </button>
 +
      <video
 +
        id="videoShow"
 +
        muted
 +
        autoplay
 +
        id="myVideo"
 +
        style="min-height:100vh; width:100%;display: none;"
 +
      >
 +
 
 +
        <source src ='https://static.igem.org/mediawiki/2019/1/1b/T--CSU_CHINA--film1.mp4'>
 +
        Your browser does not support HTML5 video.
 +
      </video>
 +
    </div>
 +
  </body>
 
</html>
 
</html>

Revision as of 16:47, 11 October 2019

loading……

<!DOCTYPE html> Home