Difference between revisions of "Team:CCU Taiwan"

m
m
 
(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">&copy; 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}}

Latest revision as of 07:40, 26 October 2020