Difference between revisions of "Template:CSU CHINA"

 
(10 intermediate revisions by 2 users not shown)
Line 22: Line 22:
 
         #navigator .navbar-brand img{ height: 45px; }
 
         #navigator .navbar-brand img{ height: 45px; }
 
         #navigator a{ font-size: 16px !important; color: rgb(151,155,158);}
 
         #navigator a{ font-size: 16px !important; color: rgb(151,155,158);}
 +
        #navigator #sp{color:#E17E84!important;}
 
         #navigator .nav-link:hover{ color: white;}
 
         #navigator .nav-link:hover{ color: white;}
 +
        #navigator #sp:hover{ color: #D4577E!important;}
 
         #navigator .dropdown-item{ color: #262626;}
 
         #navigator .dropdown-item{ color: #262626;}
 
         #navigator .dropdown-item:hover{ color: #999999;}
 
         #navigator .dropdown-item:hover{ color: #999999;}
Line 79: Line 81:
 
         <div class="collapse navbar-collapse" id="collapsibleNavId">
 
         <div class="collapse navbar-collapse" id="collapsibleNavId">
 
             <ul class="navbar-nav ml-md-auto ">
 
             <ul class="navbar-nav ml-md-auto ">
 +
                <li class="nav-item">
 +
                    <a id="sp" class="nav-link" href="/Team:CSU_CHINA/Special_Page">SPECIAL PAGE</a>
 +
                </li>
 
                 <li class="nav-item">
 
                 <li class="nav-item">
 
                     <a class="nav-link" href="/Team:CSU_CHINA">HOME</a>
 
                     <a class="nav-link" href="/Team:CSU_CHINA">HOME</a>
Line 134: Line 139:
 
     </nav>
 
     </nav>
  
 +
    <style>
 +
        #labLoad,
 +
        #labLoad img,
 +
        #labLoad div{
 +
            display: flex;
 +
            justify-content: center;
 +
            align-items: center;
 +
        }
 +
        #labLoad div{
 +
            width: 300px;
 +
            height: 300px;
 +
        }
 +
        #labload h1,
 +
        #labLoad img,
 +
        #labLoad .lodt,
 +
        #labLoad .lodo,
 +
        #labLoad .lodb{
 +
            position: absolute;
 +
        }
 +
        #labLoad .lodt{
 +
            border-top: 10px solid tomato;
 +
        }
 +
        #labLoad .lodo{
 +
            border-top: 10px solid orange;
 +
            transform: rotate(120deg);
 +
        }
 +
        #labLoad .lodb{
 +
            border-top: 10px solid dodgerblue;
 +
            transform: rotate(240deg);
 +
        }
 +
        #labLoad img{
 +
            width: 200px;
 +
            height: 200px;
 +
            overflow: hidden;
 +
        }
 +
        #labLoad .lodt,
 +
        #labLoad .lodo,
 +
        #labLoad .lodb{
 +
            animation: loading linear 0.5s infinite;
 +
        }
 +
        @keyframes loading { to{ transform: rotate(360deg); }}
 +
    </style>
 +
 +
    <div class="container-fluid bg-dark align-middle fixed-top h-100" id="labLoad">
 +
        <div>
 +
            <img class="rounded-circle" src="https://static.igem.org/mediawiki/2019/8/8a/T--CSU_CHINA--SGoldMedal.png" alt="">
 +
            <div class="rounded-circle lodt"></div>
 +
            <div class="rounded-circle lodo"></div>
 +
            <div class="rounded-circle lodb"></div>
 +
        </div>
 +
        <h1 class="text-center text-light display-3 font-weight-bold ml-5 display-3">loading……</h1>
 +
    </div>
 +
    <script> $(document).ready(()=>{ setTimeout(()=>{ $("#labLoad").hide(); }, 800) });</script>
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Latest revision as of 03:48, 9 December 2019

loading……