|
|
(185 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| {{Template:CCU_Taiwan/bootstrap_min_css}} | | {{Template:CCU_Taiwan/bootstrap_min_css}} |
− | {{Template:CCU_Taiwan/header_footer}} | + | {{Template:CCU_Taiwan/modify_css}} |
− | {{Template:CCU_Taiwan/jquery-3.5.1_slim_min_js}} | + | {{Template:CCU_Taiwan/header}} |
− | {{Template:CCU_Taiwan/jquery-3.4.1_min_js}} | + | {{Template:CCU_Taiwan/home_css}} |
− | {{Template:CCU_Taiwan/bootstrap_min_js}}
| + | |
| | | |
| <html> | | <html> |
− | <main> | + | <head> |
− | <style> | + | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:CCU_Taiwan/JS/bootstrap&action=raw&ctype=text/javascript"></script> |
− | html, body{
| + | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
− | height: 100%;
| + | </head> |
− | }
| + | |
| | | |
− | body{ | + | <!--home--> |
− | color: #ffffff; | + | <body> |
− | font-size: 1.25rem; | + | <div class="color_1"> |
− | }
| + | <video width="100%" height="auto" muted src="https://static.igem.org/mediawiki/2020/4/4a/T--CCU_Taiwan--home_1.mp4" autoplay="autoplay"></video> |
− | .fixed_bg {
| + | </div> |
− | height: 100%; | + | |
− | position: relative; | + | <div class="color"> |
− | }
| + | <video width="100%" height="auto" muted src="https://static.igem.org/mediawiki/2020/b/b6/T--CCU_Taiwan--home_2.mp4" loop autoplay="autoplay"></video> |
| + | </div> |
| + | |
| + | <div id="fullpage_3" class="fixed_bg color"> |
| + | <img id="home_img3" width="90%" src="https://static.igem.org/mediawiki/2020/f/f2/T--CCU_Taiwan--home_3.png"> |
| + | <img id="home_img3_1" width="80%" src="https://static.igem.org/mediawiki/2020/b/ba/T--CCU_Taiwan--home_3_1.png"> |
| + | <img id="home_img3_2" src="https://static.igem.org/mediawiki/2020/b/b9/T--CCU_Taiwan--home_3_2.png"> |
| + | </div> |
| | | |
− | .fixed_bg{
| + | <div class="color"> |
− | background-attachment: fixed; | + | <video width="100%" height="auto" muted src="https://static.igem.org/mediawiki/2020/7/78/T--CCU_Taiwan--home_4.mp4" loop autoplay="autoplay"></video> |
− | background-position: center;
| + | </div> |
− | background-repeat: no-repeat;
| + | |
− | background-size: cover;
| + | |
− | }
| + | |
| | | |
− | .jumbotron {
| + | <div id="fullpage_5" class="fixed_bg color"> |
− | padding: 2rem 1rem; | + | <video id="home_video5" width="70%" height="auto" muted="true" src="https://static.igem.org/mediawiki/2020/2/20/T--CCU_Taiwan--home_5.mp4" controls="controls"></video> |
− | margin-bottom: 0rem;
| + | </div> |
− | background-color: #e9ecef;
| + | |
− | border-radius: .3rem;
| + | |
− | }
| + | |
| | | |
− | .wordcenter{
| + | <!--gotop--> |
− | position: absolute;
| + | <div id="gotop"><a href="#"></a></div> |
− | left: 50%;
| + | <script> |
− | top: 50%;
| + | $(function(){ |
− | bottom: auto;
| + | $('#gotop').click(function(){ |
− | right: auto;
| + | $('html,body').animate({scrollTop:0}, 1000); |
− | -webkit-transform: translateX(-50%) translateY(-50%);
| + | }); |
− | transform: translateX(-50%) translateY(-50%);
| + | $(window).scroll(function() { |
− | text-align: center;
| + | if ( $(this).scrollTop() > 300 ){ |
− | }
| + | $('#gotop').fadeIn(100); |
− | | + | } else { |
− | .shadow{
| + | $('#gotop').stop().fadeOut(100); |
− | box-shadow: 0 0 0 rgba(0,0,0,0)!important; | + | } |
− | }
| + | }).scroll(); |
− | | + | }); |
− | .img-fluid { | + | </script> |
− | -webkit-filter: brightness(.9);
| + | |
− | filter: brightness(.9);
| + | |
− | }
| + | |
− | | + | |
− | .img-fluid:hover {
| + | |
− | -webkit-filter: none;
| + | |
− | filter: none;
| + | |
− | }
| + | |
− | | + | |
− | .footer {
| + | |
− | display: inline-flex;
| + | |
− | justify-content: space-between;
| + | |
− | }
| + | |
− | | + | |
− | .logoblock {
| + | |
− | padding: 0rem 1rem;
| + | |
− | }
| + | |
− | | + | |
− | .iconblock {
| + | |
− | display: inline;
| + | |
− | padding: 0rem .5rem;
| + | |
− | }
| + | |
− | | + | |
− | .jumbotron{
| + | |
− | text-align: center;
| + | |
− | background-color: rgba(155, 30, 30);
| + | |
− | padding-bottom: 2rem;
| + | |
− | }
| + | |
− | | + | |
− | .navbar-light .navbar-nav .nav-link { | + | |
− | color: #aaa;
| + | |
− | } | + | |
− | | + | |
− | .navbar-light .navbar-nav .nav-link:hover {
| + | |
− | color: rgba(155,30,30,.8);
| + | |
− | } | + | |
− | | + | |
− | .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
| + | |
− | color: rgba(155,30,30,.8);
| + | |
− | }
| + | |
− | | + | |
− | .navbar-light .navbar-nav .show>.nav-link {
| + | |
− | color: rgba(155,30,30); | + | |
− | }
| + | |
− | | + | |
− | .dropdown-item { | + | |
− | color: rgba(155,30,30,.8);
| + | |
− | }
| + | |
− | | + | |
− | .dropdown-item:focus, .dropdown-item:hover {
| + | |
− | color: rgba(155,30,30);
| + | |
− | text-decoration: none;
| + | |
− | background-color: #f8f9fa;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown-item.active, .dropdown-item:active { | + | |
− | color: #fff;
| + | |
− | text-decoration: none;
| + | |
− | background-color: rgba(155,30,30);
| + | |
− | }
| + | |
− | | + | |
− | .navbar {
| + | |
− | padding: .25rem 1rem;
| + | |
− | }
| + | |
− | | + | |
− | .bg-light {
| + | |
− | background-color: rgba(255, 255, 255, .95)!important;
| + | |
− | }
| + | |
− | | + | |
− | .trademark { | + | |
− | font-size: small;
| + | |
− | }
| + | |
− | | + | |
− | .icon_markblock {
| + | |
− | padding: .5rem;
| + | |
− | }
| + | |
− | | + | |
− | .trademarkblock {
| + | |
− | padding-top: 1rem;
| + | |
− | }
| + | |
− | | + | |
− | a:hover {
| + | |
− | text-decoration: none;
| + | |
− | }
| + | |
− | | + | |
− | #gotop a{
| + | |
− | display: block;
| + | |
− | position: fixed;
| + | |
− | height: 45px;
| + | |
− | width: 50px;
| + | |
− | right: 20px;
| + | |
− | bottom: 30px;
| + | |
− | font-size: 0;
| + | |
− | cursor: pointer;
| + | |
− | z-index: 1000;
| + | |
− | background: url(https://static.igem.org/mediawiki/2020/7/72/T--CCU_Taiwan--mosquito_1.png);
| + | |
− | } | + | |
− | | + | |
− | #gotop a:hover {
| + | |
− | background: url(../image/T--CCU_Taiwan--mosquito_2.png);
| + | |
− | }
| + | |
− | | + | |
− | #gotop a:active { | + | |
− | background: url(../image/T--CCU_Taiwan--mosquito_3.png);
| + | |
− | }
| + | |
− | | + | |
− | /*home page*/
| + | |
− | | + | |
− | .color_1{ | + | |
− | background-color: rgb(242, 242, 242);
| + | |
− | }
| + | |
− | | + | |
− | .color_2{ | + | |
− | background-color: rgba(227, 227, 227, 1);
| + | |
− | } | + | |
− | | + | |
− | .color_3{
| + | |
− | background-color: rgb(230, 230, 230, 0.8); | + | |
− | }
| + | |
− | | + | |
− | .color_4{ | + | |
− | background-color: rgb(230, 230, 230, 0.8);
| + | |
− | } | + | |
− | | + | |
− | .color_5{
| + | |
− | background-color: rgb(230, 230, 230, 0.8);
| + | |
− | }
| + | |
− | </style> | + | |
− | | + | |
− | <body>
| + | |
− | <div class="top">
| + | |
− | <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
| + | |
− | <a class="navbar-brand" href="https://2020.igem.org/Team:CCU_Taiwan"><img src="https://static.igem.org/mediawiki/2020/7/7e/T--CCU_Taiwan--logo.png"></a>
| + | |
− | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
| + | |
− | <span class="navbar-toggler-icon"></span>
| + | |
− | </button>
| + | |
− | <div class="collapse navbar-collapse" id="navbarSupportedContent">
| + | |
− | <ul class="navbar-nav mr-auto">
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdown">
| + | |
− | <a class="dropdown-item" href="#">Team Members</a>
| + | |
− | <a class="dropdown-item" href="#">Attribution</a>
| + | |
− | <a class="dropdown-item" href="sponsors.html" target="_blank">Sponsors</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | Project
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdown">
| + | |
− | <a class="dropdown-item" href="#">Description</a>
| + | |
− | <a class="dropdown-item" href="#" target="_blank">Design</a>
| + | |
− | <a class="dropdown-item" href="#">Model</a>
| + | |
− | <a class="dropdown-item" href="#">Hardware</a>
| + | |
− | <a class="dropdown-item" href="safety.html" target="_blank">Safety</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | Parts
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdown">
| + | |
− | <a class="dropdown-item" href="#">Part Collection</a>
| + | |
− | <a class="dropdown-item" href="parts.html" target="_blank">Parts</a>
| + | |
− | <a class="dropdown-item" href="#">Improve</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | Human Practices
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdown">
| + | |
− | <a class="dropdown-item" href="#">Education</a>
| + | |
− | <a class="dropdown-item" href="#">IHP</a>
| + | |
− | <a class="dropdown-item" href="#">Collaborations</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | Notebook
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdown">
| + | |
− | <a class="dropdown-item" href="#">Notebook</a>
| + | |
− | <a class="dropdown-item" href="#">Protocols</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item">
| + | |
− | <a class="nav-link" href="#">Awards</a>
| + | |
− | </li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | </nav>
| + | |
− | </div>
| + | |
− | | + | |
− | <div class="color_1">
| + | |
− | <video width="100%" height="auto" muted src="https://static.igem.org/mediawiki/2020/4/4a/T--CCU_Taiwan--home_1.mp4" autoplay="autoplay"></video>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="color_2">
| + | |
− | <video width="100%" height="auto" muted src="https://static.igem.org/mediawiki/2020/b/b6/T--CCU_Taiwan--home_2.mp4" loop autoplay="autoplay"></video>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="fixed_bg color_3">
| + | |
− | <h1 class="wordcenter shadow">However, there are no effective treatments and vaccines for dengue infections now.</h1>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="fixed_bg color_4">
| + | |
− | <h1 class="wordcenter shadow">Therefore, we design a detection kit to prevent the outbreak of dengue fever.</h1>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div class="fixed_bg color_5">
| + | |
− | </div>
| + | |
| | | |
− | <div class="jumbotron">
| + | </body> |
− | <div class="col s12 m6 l4">
| + | |
− | <div class="footer">
| + | |
− | <div class="logoblock">
| + | |
− | <a href="https://www.facebook.com/ccuigemteam/" target="_blank">
| + | |
− | <img class="responsive-img img-fluid" src="https://static.igem.org/mediawiki/2020/9/9e/T--CCU_Taiwan--logo_CCUiGEM.png">
| + | |
− | </a>
| + | |
− | </div>
| + | |
− | <div class="logoblock">
| + | |
− | <a href="https://www.ccu.edu.tw/index.php?m=false" target="_blank">
| + | |
− | <img class="responsive-img img-fluid" src="https://static.igem.org/mediawiki/2020/f/f3/T--CCU_Taiwan--logo_CCU.png">
| + | |
− | </a>
| + | |
− | </div>
| + | |
− | <div class="icon_markblock">
| + | |
− | <div class="iconblock">
| + | |
− | <a href="https://www.facebook.com/ccuigemteam/" target="_blank">
| + | |
− | <img class="responsive-img img-fluid" src="https://static.igem.org/mediawiki/2020/2/23/T--CCU_Taiwan--icon_FB.png">
| + | |
− | </a>
| + | |
− | </div>
| + | |
− | <div class="iconblock">
| + | |
− | <a href="https://www.instagram.com/ccuigem/" target="_blank">
| + | |
− | <img class="responsive-img img-fluid" src="https://static.igem.org/mediawiki/2020/f/fb/T--CCU_Taiwan--icon_IG.png">
| + | |
− | </a>
| + | |
− | </div>
| + | |
− | <div class="iconblock">
| + | |
− | <a href="mailto:ccuigemteam@gmail.com" target="_blank">
| + | |
− | <img class="responsive-img img-fluid" src="https://static.igem.org/mediawiki/2020/7/79/T--CCU_Taiwan--icon_Gmail.png">
| + | |
− | </a>
| + | |
− | </div>
| + | |
− | <br>
| + | |
− | <div class="trademarkblock">
| + | |
− | <p class="trademark">© iGEM Team, 2020 CCU Taiwan</p>
| + | |
− | </div>
| + | |
− |
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div id="gotop"><a href="#"></a></div>
| + | |
− | <script>
| + | |
− | $(function(){
| + | |
− | $('#gotop').click(function(){
| + | |
− | $('html,body').animate({scrollTop:0}, 1000);
| + | |
− | });
| + | |
− | $(window).scroll(function() {
| + | |
− | if ( $(this).scrollTop() > 300 ){
| + | |
− | $('#gotop').fadeIn(100);
| + | |
− | } else {
| + | |
− | $('#gotop').stop().fadeOut(100);
| + | |
− | }
| + | |
− | }).scroll();
| + | |
− | });
| + | |
− | </script>
| + | |
− | </body>
| + | |
− | </main>
| + | |
| </html> | | </html> |
| + | {{Template:CCU_Taiwan/footer}} |