Difference between revisions of "Team:CSU CHINA"

 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ CSU_CHINA }}
 
{{ CSU_CHINA }}
−
<!DOCTYPE html>
+
 
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
Line 7: Line 7:
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 
     <title>Home</title>
 
     <title>Home</title>
−
   
+
<body>
 
     <style>
 
     <style>
−
      body,
+
         #homeimg{
−
      div,
+
            display: -webkit-flex ! important; /* Safari */
−
      ol,
+
            display: flex ! important;
−
      ul,
+
            background-image: url('https://static.igem.org/mediawiki/2019/e/e1/T--CSU_CHINA--bbighome.jpg') ! important;
−
      li,
+
            background-size: cover ! important;
−
      dl,
+
            background-repeat: no-repeat ! important;
−
      dt,
+
            background-position: center ! important;
−
      dd,
+
            justify-content: center ! important;
−
      h1,
+
            align-items: center ! important;
−
      h2,
+
         }
−
      h3,
+
        p{
−
      h4,
+
            margin-bottom: 0px; !important;
−
      h5,
+
            font-size: 1rem !important;
−
      h6,
+
         }
−
      p,
+
        .edgeword{
−
      form,
+
            animation:edgeword 5s;
−
      fieldset,
+
        -webkit-animation:edgeword 5s; /* Safari and Chrome */
−
      legend,
+
            animation-iteration-count:infinite;
−
      input {
+
            -webkit-animation-iteration-count:infinite;
−
         margin: 0;
+
         }
−
        padding: 0;
+
        #myVideo{
−
      }
+
            z-index: 1000;
−
      h1,
+
         }
−
      h2,
+
        @keyframes edgeword{
−
      h3,
+
            0% {color:rgba(255,255,255,0.6);}
−
      h4,
+
            50% {color:rgba(255,255,255,0);}
−
      h5,
+
            100% {color:rgba(255,255,255,0.6);}
−
      h6 {
+
         }
−
        font-size: 100%;
+
        @-webkit-keyframes edgeword/* Safari and Chrome */{
−
        font-weight: normal;
+
                     
−
      }
+
            0% {color:rgba(255,255,255,0.6);}
−
      ol,
+
            50% {color:rgba(255,255,255,0);}
−
      ul {
+
            100% {color:rgba(255,255,255,0.6);}
−
        list-style: none;
+
        }
−
      }
+
−
      img,
+
−
      fieldset {
+
−
        border: 0 none;
+
−
        display: block;
+
−
      }
+
−
 
+
−
      img {
+
−
        top: 15%;
+
−
      }
+
−
      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;
+
−
      }
+
−
 
+
−
      .button {
+
−
        position: absolute;
+
−
        background-color: rgb(183, 130, 233);
+
−
         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>
 
     </style>
−
     <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
+
     <script>
−
    <script type="text/javascript">
+
        $(function(){
−
      $(function() {
+
            var video = $("#myVideo");
−
        var video = $("#videoShow");
+
            var myedge = $(".edgeword");
−
        var logo = $(".logo");
+
  
−
        $("#btn").click(function() {
+
            $("#homeimg").click(function () {
−
          video.css("display", "block");
+
                myedge.removeClass("d-flex");
−
          $(this).css("left", "111%");
+
                myedge.css("display","none");
−
          logo.css("left", "100%");
+
                video.css("display","block");
−
          sourceDom = $("<source src=\""+ "https://static.igem.org/mediawiki/2019/1/1b/T--CSU_CHINA--film1.mp4" +"\">");
+
                video[0].play();
−
          video.append(sourceDom)
+
            });
−
          video[0].play();
+
−
        });
+
  
−
        video.bind("ended", function() {
+
            video.bind("ended",function () {              
−
          video.css("display", "none");
+
                video.css("display","none");
−
          $("#btn").css("left", "46%");
+
                myedge.addClass("d-flex");
−
          logo.css("left", "0");
+
                myedge.css("display","block");
 +
            });
 
         });
 
         });
−
      });
 
−
 
−
   
 
 
     </script>
 
     </script>
−
  </head>
+
     <div class="container-fluid m-0 p-0">
−
 
+
        <div class="row p-0 m-0" style="height: 100vh; width: 100%; margin-top: 76px;" id="homeimg">
−
  <body>
+
            <div class="col-12 p-0 m-0">
−
     <div id="videoBox">
+
                <div class="d-flex justify-content-center align-items-center edgeword" style="height: 100%; width: 8%; color: rgba(255,255,255,0.6); line-height: 100%; font-size: 1.5rem; float: left;">
−
      <img class="logo" src="https://static.igem.org/mediawiki/2019/c/ca/T--CSU_CHINA--LOGOWITHWORDS.png" alt="LOGO" />
+
                    <p>C<br>L<br>I<br>C<br>K<br><br>T<br>O<br><br>W<br>A<br>T<br>C<br>H<br><br>V<br>I<br>D<br>E<br>O</p>
−
      <button id="btn" class="button ">
+
                </div>
−
        PLAY
+
                <video
−
      </button>
+
                    muted
−
      <video
+
                    autoplay
−
        id="videoShow"
+
                    id="myVideo"
−
        muted
+
                    style="height: 98vh; width:100%;display: none;">        
−
        autoplay
+
                    <source src ='https://static.igem.org/mediawiki/2019/1/1b/T--CSU_CHINA--film1.mp4'>
−
        id="myVideo"
+
                    Your browser does not support HTML5 video.
−
        style="min-height:100vh; width:100%;display: none;"
+
                </video>
−
       >
+
                <div class="d-flex justify-content-center align-items-center edgeword" style="height: 100%; width: 8%; color: rgba(255,255,255,0.6); line-height: 100%; font-size: 1.5rem; float: right;">
−
 
+
                    <p>C<br>L<br>I<br>C<br>K<br><br>T<br>O<br><br>W<br>A<br>T<br>C<br>H<br><br>V<br>I<br>D<br>E<br>O</p>
−
        <source src ='https://static.igem.org/mediawiki/2019/1/1b/T--CSU_CHINA--film1.mp4'>
+
                </div>
−
        Your browser does not support HTML5 video.
+
            </div>
−
      </video>
+
        </div>
 
     </div>
 
     </div>
−
  </body>
+
</body>
 
</html>
 
</html>
 +
 +
{{CSU_CHINA/footer}}

Latest revision as of 03:23, 22 October 2019

loading……

Home

C
L
I
C
K

T
O

W
A
T
C
H

V
I
D
E
O

C
L
I
C
K

T
O

W
A
T
C
H

V
I
D
E
O

footer