Difference between revisions of "Team:CSU CHINA"

 
(24 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{CSU_CHINA}}
+
{{ CSU_CHINA }}
  
<html>
+
<html lang="en">
<head>
+
  <head>
<title>CSU_CHINA</title>
+
    <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>
 +
<body>
 +
    <style>
 +
        #homeimg{
 +
            display: -webkit-flex ! important; /* Safari */
 +
            display: flex ! important;
 +
            background-image: url('https://static.igem.org/mediawiki/2019/e/e1/T--CSU_CHINA--bbighome.jpg') ! important;
 +
            background-size: cover ! important;
 +
            background-repeat: no-repeat ! important;
 +
            background-position: center ! important;
 +
            justify-content: center ! important;
 +
            align-items: center ! important;
 +
        }
 +
        p{
 +
            margin-bottom: 0px; !important;
 +
            font-size: 1rem !important;
 +
        }
 +
        .edgeword{
 +
            animation:edgeword 5s;
 +
        -webkit-animation:edgeword 5s; /* Safari and Chrome */
 +
            animation-iteration-count:infinite;
 +
            -webkit-animation-iteration-count:infinite;
 +
        }
 +
        #myVideo{
 +
            z-index: 1000;
 +
        }
 +
        @keyframes edgeword{
 +
            0% {color:rgba(255,255,255,0.6);}
 +
            50% {color:rgba(255,255,255,0);}
 +
            100% {color:rgba(255,255,255,0.6);}
 +
        }
 +
        @-webkit-keyframes edgeword/* Safari and Chrome */{
 +
                     
 +
            0% {color:rgba(255,255,255,0.6);}
 +
            50% {color:rgba(255,255,255,0);}
 +
            100% {color:rgba(255,255,255,0.6);}
 +
        }
 +
    </style>
 +
    <script>
 +
        $(function(){
 +
            var video = $("#myVideo");
 +
            var myedge = $(".edgeword");
  
</head>
+
            $("#homeimg").click(function () {
<body style="background-color:black" height:100%">
+
                myedge.removeClass("d-flex");
<img src="https://static.igem.org/mediawiki/2019/e/eb/T--CSU_CHINA--LOGOWITHWORDS.jpg" alt="LOGO"/>
+
                myedge.css("display","none");
 +
                video.css("display","block");
 +
                video[0].play();
 +
            });
 +
 
 +
            video.bind("ended",function () {             
 +
                video.css("display","none");
 +
                myedge.addClass("d-flex");
 +
                myedge.css("display","block");
 +
            });
 +
        });
 +
    </script>
 +
    <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">
 +
            <div class="col-12 p-0 m-0">
 +
                <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;">
 +
                    <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>
 +
                </div>
 +
                <video
 +
                    muted
 +
                    autoplay
 +
                    id="myVideo"
 +
                    style="height: 98vh; 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 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>
 +
                </div>
 +
            </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