Line 3: | Line 3: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | .footer-w3ls ul.social-icons1 li a { | + | .footer-w3ls ul.social-icons1 li a { |
− | + | margin-right:2px!important; | |
− | + | padding:0px !important; | |
+ | margin-left: 0px !important; | ||
+ | } | ||
+ | .fullscreenvideo { | ||
+ | position: absolute; | ||
+ | top: 70%; | ||
+ | left: 50%; | ||
+ | min-width: 100%; | ||
+ | min-height: 100%; | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | z-index: -100; | ||
+ | -webkit-transform: translateX(-50%) translateY(-50%); | ||
+ | transform: translateX(-50%) translateY(-50%); | ||
+ | -webkit-transition: 1s opacity; | ||
+ | transition: 1s opacity; | ||
+ | } | ||
+ | .videocontainer{ | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | height: 130%; | ||
+ | overflow: hidden; | ||
+ | z-index: -100; | ||
+ | top: -25%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .videocontainer:before{ | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | z-index: -10; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | } | ||
+ | #loading { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background: black; | ||
+ | position: fixed; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | #loading_p { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index:99999; | ||
+ | } | ||
+ | |||
+ | .loader-ring { | ||
+ | position: fixed; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | margin: -120px 0 0 -120px; | ||
+ | width: 240px; | ||
+ | height: 240px; | ||
+ | z-index:10000; | ||
+ | } | ||
+ | |||
+ | .loader-ring-light { | ||
+ | width: 240px; | ||
+ | height: 240px; | ||
+ | -moz-border-radius: 240px; | ||
+ | -webkit-border-radius: 240px; | ||
+ | border-radius: 240px; | ||
+ | -moz-box-shadow: 0 4px 0 #00abf2 inset; | ||
+ | -webkit-box-shadow: 0 4px 0 #00abf2 inset; | ||
+ | box-shadow: 0 4px 0 #00abf2 inset; | ||
+ | animation: rotate-360 2s linear infinite; | ||
+ | } | ||
+ | |||
+ | .loader-ring-track { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 240px; | ||
+ | height: 240px; | ||
+ | -moz-border-radius: 240px; | ||
+ | -webkit-border-radius: 240px; | ||
+ | border-radius: 240px; | ||
+ | -moz-box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3) inset; | ||
+ | -webkit-box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3) inset; | ||
+ | box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3) inset; | ||
+ | } | ||
+ | |||
+ | @keyframes rotate-360 { | ||
+ | from { | ||
+ | -moz-transform: rotate(0); | ||
+ | -ms-transform: rotate(0); | ||
+ | -webkit-transform: rotate(0); | ||
+ | -o-transform: rotate(0); | ||
+ | transform: rotate(0); | ||
+ | } | ||
+ | to { | ||
+ | -moz-transform: rotate(360deg); | ||
+ | -ms-transform: rotate(360deg); | ||
+ | -webkit-transform: rotate(360deg); | ||
+ | -o-transform: rotate(360deg); | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | .model_content { | ||
+ | font-size: 20px; | ||
+ | line-height: 30px; | ||
+ | color: white; | ||
+ | text-align: justify; | ||
+ | } | ||
+ | .content_header { | ||
+ | color: white; | ||
+ | font-size: 35px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .model_header { | ||
+ | color: white; | ||
+ | font-family: myTitle3; | ||
+ | font-size: 60px; | ||
+ | margin-bottom: 20px; | ||
} | } | ||
</style> | </style> | ||
+ | <script type="text/javascript"> | ||
+ | $(function(){ | ||
+ | var bgVideo=document.getElementById("modelbg"); | ||
+ | bgVideo.addEventListener('canplaythrough',function(){ | ||
+ | setTimeout(function(){ | ||
+ | $('#loading').remove(); | ||
+ | $('.loader-ring').remove(); | ||
+ | $('#loading_p').remove();},0); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
− | + | <div id="loading"></div> | |
− | + | <div id="loading_p"> | |
+ | <p style="color: white;font-family:myTitle3;font-size:30px;position:relative;top:47%;left:46%">Loading...</p> | ||
+ | </div> | ||
+ | |||
+ | <div class="loader-ring"> | ||
+ | <div class="loader-ring-light"></div> | ||
+ | <div class="loader-ring-track"></div> | ||
+ | </div> | ||
+ | <div class="videocontainer"> | ||
+ | <div class="fullscreenvideo" > | ||
+ | <video id="modelbg" autoplay muted loop> | ||
+ | <source src="https://static.igem.org/mediawiki/2018/f/fb/T--NKU_CHINA--BGofother.mp4" type="video/mp4"> | ||
+ | </video> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <footer> | ||
+ | <div class="container-fluid myFooter"> | ||
+ | <div class="row"> | ||
+ | <div class="col-xs-8 col-xs-push-1"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/0/0b/T--NKU_CHINA--duihui_final.png" style="height: 250px; width: auto;"> | ||
+ | </div> | ||
+ | <div class="col-xs-4 footer-w3ls"> | ||
+ | <h3 style="color: white; font-size: 30px;">Contacts</h3> | ||
+ | <ul class="social-icons1" style="margin:0 auto;padding-top:0;"> | ||
+ | <li><a href="https://www.facebook.com/iGEMNKU2018/"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> | ||
+ | <li><a href="https://twitter.com/iGEMNKU2018"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> | ||
+ | <li><a href="mailto:nkuigem2018@163.com"><i class="fa fa fa-envelope-o" aria-hidden="true"></i></a></li> | ||
+ | </ul> | ||
+ | <h3 style="color: white; font-size: 30px;">Address</h3> | ||
+ | <address style="color: white; font-size: 17px;"> | ||
+ | Nankai University</br> | ||
+ | No.94 Weijin Road, Nankai District</br> | ||
+ | Tianjin, P.R.China 300071</br> | ||
+ | </address> | ||
+ | </div> | ||
+ | <div class="col-xs-12"> | ||
+ | <p class="Copyright" style="text-align: center; color: white;">Copyright © Team NKU_CHINA 2018</p> | ||
+ | </div> | ||
</div> | </div> | ||
− | + | </footer> | |
− | < | + | |
<a href="#0" class="cd-top">Top</a> | <a href="#0" class="cd-top">Top</a> | ||
− | |||
</body> | </body> | ||
</html> | </html> | ||
− |
Revision as of 03:29, 17 October 2018
Loading...