Difference between revisions of "Team:NCTU Formosa/test2"

(Blanked the page)
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Team:NCTU_Formosa}}
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
<link href="https://2016.igem.org/Team:NCTU_Formosa/wiki_reset?action=raw&ctype=text/css" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
 
  
<style type="text/css">
 
    #sideMenu, #top_title {display:none;}
 
    #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
    #top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 
   
 
    * {
 
        font-family: 'Open Sans', sans-serif;
 
        font-weight: 300;
 
      }
 
   
 
    body{
 
        margin:0;
 
        padding:0;
 
        background-color:rgb(51,51,51) !important;
 
        background-image:url("https://static.igem.org/mediawiki/2016/4/44/%E6%A0%BC%E5%AD%90.png");
 
        background-repeat: repeat-y;
 
        background-size:100%;
 
        }
 
   
 
    .animate-box{
 
                position:relative;
 
                height:100%;
 
                backgroind:balck;
 
                overflow:hidden;
 
    }
 
 
    video {
 
            position:relative;
 
            left: 0;
 
            width: 100%;
 
            height:auto;
 
            overflow:hidden;
 
          }
 
   
 
 
    .box-container{
 
        position:relative;
 
        display:block;
 
        width:auto;
 
        height:auto;
 
        text-decoration:none;
 
       
 
    }
 
   
 
/*image*/
 
    .img-box{
 
        position:relative;
 
        margin-left:20vw;
 
        margin-top:50px;
 
        display:block;
 
    }
 
 
        .connect{
 
            color:black !important;           
 
        }
 
        .text-active{
 
            color:red !important;
 
            text-decoration:none;
 
        }
 
        .connect:hover{
 
            color:red !important;
 
            text-decoration:none;
 
        }
 
/*pantide iot device*/
 
.text{
 
      text-decoration:none;
 
      font-size:2em !important;
 
}
 
        .text1{
 
            position:absolute;
 
            text-decoration:none;
 
            top:0.4%;
 
            left:1.4%;         
 
        }
 
        .text2{
 
            position:absolute;
 
            text-decoration:none;
 
            top:87.5%;
 
            left:16%;           
 
        }
 
        .text3{
 
            position:absolute;
 
            top:11%;
 
            left:62%;   
 
        }
 
 
 
    .text-container{
 
        position:relative;
 
        width:70vw;
 
        height:200px;
 
        margin-left:15%;
 
        margin-top:5vw;
 
        margin-bottom:2.1vw;
 
        background-color:rgba(243,247,247,0.7);
 
        border-radius:10px;
 
        display:block;
 
    }
 
    .item{
 
        display:none;
 
    }
 
    .item-active{
 
        display:block;
 
    }
 
 
    .description{
 
        padding-left:20px;
 
        padding-right:20px;
 
        font-size:14pt !important;
 
       
 
    }
 
</style>
 
</head>
 
<body>
 
<div class="animate-box">
 
    <div>
 
        <video poster="https://static.igem.org/mediawiki/2016/5/56/Picture.PNG" playsinline autoplay muted>
 
            <source src="https://static.igem.org/mediawiki/2016/a/ac/Wiki-animate.mp4" type="video/mp4">
 
        </video>
 
    </div>
 
</div>
 
 
<div class="box-container">
 
    <div class="img-box">   
 
        <img src="https://static.igem.org/mediawiki/2016/c/c8/Newse.png" width="70%" height="30%" >
 
        <div class="text1">
 
            <p class="text"><a href="#pantide" class="connect text-active" style="text-decoration:none;">Pantide</a></p>
 
        </div>
 
        <div class="text2">
 
            <p class="text"><a href="#iot" class="connect" style="text-decoration:none;">IoT</p>
 
        </div>
 
        <div class="text3">
 
            <p class="text"><a href="#device" class="connect" style="text-decoration:none;">Device</a></p>
 
        </div>
 
    </div>
 
   
 
    <div class="text-container">
 
 
        <article id="pantide" class="item item-active">
 
        <p style="text-align:center;font-size:24pt;">Pantide</p>
 
        <p class="description">Utilizing the powerful toxicity of spider venom for pest control, NCTU_Formosa designed “Pantide” out of the repertoire of toxin peptides. By expressing a collection of Pantide with <i>E. coli</i>, we provided farmers a new alternative for chemical pesticide with fascinating advantages.</p>
 
        </article>
 
       
 
        <article id="iot" class="item">
 
        <p style="text-align:center;font-size:24pt;">IoT</p>
 
        <p class="description">The laborious farm works always exhaust farmers. Here we provide farmers a device with multiple detectors and an automatic sprinkler. Real-time control of the status in the farmland is no longer a fantasy.</p>
 
        </article>
 
       
 
        <article id="device" class="item">
 
        <p style="text-align:center;font-size:24pt;">Device</p>
 
        <p class="description">Spiderweb is sensitive enough to be a medium for spiders reacting to the vibration transmitted. Effective pest control must be achieved with accurate information in the farmland and an effective operating system that link the device and users with mutual interactions when encountering changes.</p>
 
        </article>
 
    </div>
 
</div>
 
 
<script>
 
$(function() {
 
 
// Menu Tabular
 
var $text = $('div p a');
 
$text.on('click', function(e) {
 
e.preventDefault();
 
$text.removeClass('text-active');
 
$(this).addClass('text-active');
 
 
$('.item').fadeOut(300);
 
$(this.hash).delay(300).fadeIn();
 
       
 
});
 
 
});
 
 
</script>
 
<script>
 
var $nodes =  $( '.connect' )
 
 
 
$nodes.each( function( index ) {
 
  var $node = $( this );
 
  $node.click( function() {
 
    $('html, body').animate({ scrollTop: 810}, 1000 );
 
  });
 
})
 
</script>
 
 
</body>
 
</html>
 
{{Team:NCTU_Formosa/home_footer}}
 

Latest revision as of 13:43, 12 October 2016