Difference between revisions of "Team:NKU CHINA/Model"

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;
+
        margin-right:2px!important;
−
  padding:0px !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>
+
<div id="loading"></div>
−
      <img class="myBackground" src="https://static.igem.org/mediawiki/2018/6/64/T--NKU_CHINA--background.jpg">
+
<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>
−
<!-- back to top -->
+
 
 
<a href="#0" class="cd-top">Top</a>
 
<a href="#0" class="cd-top">Top</a>
−
<!-- /back to top -->
 
 
</body>
 
</body>
 
</html>
 
</html>
−
{{Template:NKU_CHINA/footer}}
 

Revision as of 03:29, 17 October 2018

Loading...

Contacts

Address

Nankai University
No.94 Weijin Road, Nankai District
Tianjin, P.R.China 300071

Copyright © Team NKU_CHINA 2018

Top