(36 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | {{CSU_CHINA}} | + | {{ CSU_CHINA }} |
− | <html> | + | <html lang="en"> |
− | <head> | + | <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> | ||
+ | <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"); | ||
− | </ | + | $("#homeimg").click(function () { |
− | < | + | myedge.removeClass("d-flex"); |
− | < | + | 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……
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