|
|
| (45 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:3vw;
| |
| − | background-color:rgba(243,247,247,0.7);
| |
| − | border-radius:10px;
| |
| − | display:block;
| |
| − | }
| |
| − | .item{
| |
| − | display:none;
| |
| − | }
| |
| − | .item-active{
| |
| − | display:block;
| |
| − | }
| |
| − | </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>
| |
| − | </article>
| |
| − |
| |
| − | <article id="iot" class="item">
| |
| − | <p style="text-align:center;font-size:24pt;">IoT</p>
| |
| − | </article>
| |
| − |
| |
| − | <article id="device" class="item">
| |
| − | <p style="text-align:center;font-size:24pt;">Device</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}}
| |
