Difference between revisions of "Team:SSTi-SZGD/test1"

Line 1: Line 1:
{{Team:SSTI_SZGD}}
 
 
<html>
 
<html>
 
<head>
 
<head>
 +
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2016/b/bf/NCTU_icon.png" type="image/x-icon">
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
<!-- IE -->
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2016/b/bf/NCTU_icon.png" />
+
<!-- other browsers -->
+
<link rel="icon" type="image/x-icon" href="https://static.igem.org/mediawiki/2016/b/bf/NCTU_icon.png" />
+
<META NAME="Author" CONTENT="Chris Lin">
+
  
  
<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,400" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  
<style type="text/css">
+
    <style type="text/css">
    #sideMenu, #top_title {display:none;}
+
#sideMenu, #top_title {display:none;}
    #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
+
#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-repeat: repeat-y;
+
        background-size:100%;
+
        }
+
@media screen and (min-width:768px){   
+
    .animate-box{
+
                position:relative;
+
                height:100vh;
+
                width:100%;
+
                backgroind:balck;
+
                overflow:hidden;
+
  
}
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
@media screen and (orientation: portrait){  
+
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
    .animate-box{
+
                position:relative;
+
                height:100%;
+
                backgroind:balck;
+
                overflow:hidden;
+
    }
+
 
+
}
+
    video {  
+
            position:relative;
+
            width: 78%;
+
            height:auto;
+
            margin-top:60px;
+
            margin-left:10vw;
+
            margin-right:10vw;
+
          }  
+
   
+
 
+
    .box-container{
+
        position:relative;
+
        display:block;
+
        width:auto;
+
        height:720px;
+
        margin-top:15vh !important;
+
        text-decoration:none;
+
  
 +
    *{
 +
      font-family:"Open Sans",serif,sans-serif
 
     }
 
     }
 
      
 
      
/*-----------image-------------------*/
+
     body{
     .img-box{
+
        margin:0;
        position:relative;
+
        margin-left:30vw;
+
        display:block;
+
        padding-top:70px;
+
        padding-left:10px;
+
 
     }
 
     }
  
        .connect{
 
            color:black !important;           
 
        }
 
        .text-active{
 
            color:red !important;
 
            text-decoration:none;
 
        }
 
        .connect:hover{
 
            color:red !important;
 
            text-decoration:none;
 
        }
 
/*---------------PANTIDE iot device--------------*/
 
  
.text-PANTIDE{
+
   
      text-decoration:none;
+
    .main-container{
      font-size:2em !important;
+
                    background:#E8E3E8;
      text-align:center;
+
                    position:fixed;
      padding-left:10px;
+
                    width:100vw;
}
+
                    height:auto;
 +
                    z-index:999;
 +
                    }
  
.text-iot{
 
      text-decoration:none;
 
      font-size:2em !important;
 
      text-align:center;
 
      padding-left:35px;
 
}
 
.text-device{
 
      text-decoration:none;
 
      font-size:2em !important;
 
      text-align:center;
 
      padding-left:15px;
 
}
 
        .text1{
 
            position:absolute;
 
            text-decoration:none;
 
            width:100px;
 
            top:31%;
 
            left:-14%;
 
            background:rgba(243,247,247,0.9);
 
            border:3px solid #FBB03B;
 
            text-align:center;         
 
            cursor:pointer;
 
        }
 
        .text1:hover{
 
            transform:scale(1.1);
 
        }
 
        .text2{
 
            position:absolute;
 
            text-decoration:none;
 
            width:100px;
 
            top:83%;
 
            left:-14%;
 
            background:rgba(243,247,247,0.9);
 
            border:3px solid #FBB03B;     
 
            text-align:center; 
 
            cursor:pointer;     
 
        }
 
        .text2:hover{
 
            transform:scale(1.1);
 
        }
 
        .text3{
 
            position:absolute;
 
            width:100px;
 
            top:34%;
 
            left:57%;
 
            background:rgba(243,247,247,0.9);
 
            border:3px solid #FBB03B;       
 
            text-align:center;
 
            cursor:pointer;
 
        }
 
        .text3:hover{
 
            transform:scale(1.1);
 
        }
 
 
@media screen and (min-width:768px){   
 
.text-container{
 
        position:relative;
 
        width:70vw;
 
        height:210px;
 
        margin-left:15%;
 
        margin-top:3vw;
 
        margin-bottom:1vw;
 
        background-color:rgba(243,247,247,0.7);
 
        border-radius:10px;
 
        display:block;
 
  
}
+
    .dropbtn{
 +
                  margin-top:5px;
 
}
 
}
  
@media screen and (orientation: portrait){
 
.text-container{
 
        position:relative;
 
        width:70vw;
 
        height:210px;
 
        margin-left:15%;
 
        margin-top:6vw;
 
        margin-bottom:1vw;
 
        background-color:rgba(243,247,247,0.7);
 
        border-radius:10px;
 
        display:block;
 
  
}
+
   
}
+
    .dropbtn span:after{
 +
width: 0;
 +
height: 0;
 +
border: 0.313em solid transparent;
 +
border-bottom: none;
 +
border-top-color:black;
 +
content: '';
 +
vertical-align: middle;
 +
display: inline-block;
 +
position: relative;
 +
right: -0.313em; /* 5 */
 +
                text-decoration:none !important;
 +
                list-style-type:none !important;           
 +
              }
  
 +
  .dropdown{
 +
      float:left;
 +
      text-decoration:none !important;
 +
      list-style-type:none !important;
 +
      }
 +
    ul>.dropdown>a{
 +
                color:black !important;
 +
                list-style-type:none !important;
 +
                text-decoration:none !important;
 +
                text-align:left;
 +
              }
 +
    li .dropdown{
 +
                display:inline-block;
 +
                }
 +
               
 +
    .dropdown > a, .dropbtn {
 +
                      display: inline-block;
 +
                      text-align: center;
 +
                      text-color:black;
 +
                      padding-right: 10px;
 +
                      margin-right:10px;
 +
                      text-decoration:none !important;   
 +
                    }
  
    .item{
+
.main-menu{
        display:none;
+
      position:relative;
    }
+
      list-style-type: none !important;
    .item-active{
+
      margin-right:1px;
        display:block;
+
      display:block;
    }
+
      float:right !important;
 +
      font-weight:400 !important;
 +
      font-size:15px;
 +
      font-family:"Open Sans",serif,sans-serif;
 +
      }
  
    .description{
+
                /*下拉式menu*/
        padding-left:20px;
+
        padding-right:20px;
+
        font-size:13.5pt !important;
+
        text-indent:2em;
+
        font-family: 'Open Sans' !important;
+
    }
+
  
/*-----------buttom----------------*/
+
    .dropdown > a:hover, .dropdown:hover .dropbtn{
.buttom{
+
                                            color:red !important;
        position:absolute;
+
                                            }
        bottom:8px;
+
        right:10px;
+
        background-color:#ACE0F5;
+
        font-size:14pt !important;
+
        font-family: 'Open Sans' !important;
+
        border-radius:10px;
+
        color:black;
+
        text-decoration:none;
+
        padding:3px;
+
        padding-bottom:8px;
+
}
+
.buttom:active{
+
        bottom:5px;
+
}
+
  
 +
    .dropdown-content{
 +
                      display:none;
 +
                      background:#E8E3E8;
 +
                      position:absolute;
 +
                      width:auto !important;
 +
                     
 +
                    }
 +
    .dropdown-content a{
 +
                        color: black;
 +
                        padding:15px;
 +
                        text-decoration: none;
 +
                        display: block;
 +
                        text-align:left !important;
 +
                        size:1em;
 +
                        }
 +
                       
 +
   
 +
    .dropdown-content a:hover{
 +
                              color:red;
 +
                              }
 +
   
 +
   
 +
  
  
/*-------------overview-------------------*/
 
  
 
+
/*manu*/
@media screen and (min-width:768px){  
+
@media screen and (min-width: 768px) {
  .over-container{
+
.main-container{
            width:75%;
+
                    background:white !important;
            height:60vh;
+
                    position:fixed;
            margin:auto;
+
                    width:100vw;
            margin-top:25vh;
+
                    height:10.5vh;
            margin-bottom:15%;
+
                    display:block important;  
            position:relative;
+
                    }
            }  
+
  .NCTU_Formosa{
h1{
+
                left:1.5vw;
    text-align:center;
+
                position:relative;
    color:rgb(0, 206, 255);
+
                top:25px;
    text-shadow:1px 1px 10px rgb(0, 206, 255);
+
    font-size:30pt !important;
+
 
}
 
}
.overview{
 
    color:#F3F7F7;
 
    text-align:justify;
 
    text-indent:2em;
 
    padding-left:20px;
 
    padding-left:20px;
 
    padding-top:10px;
 
    padding-bottom:10px;
 
    font-size:18pt !important;
 
 
}
 
}
.position{
+
@media screen and (orientation: portrait) {
    cursor:pointer;
+
  .main-container{
    position:absolute;
+
                    background:white !important;
    margin-left:46.5%;
+
                    position:fixed;
    margin-top:5%;
+
                    width:100vw;
 +
                    height:4vh;
 +
                    display:block important;
 +
                    }
 +
  .NCTU_Formosa{
 +
                left:1.5vw;
 +
                position:relative;
 +
                top:35px;
 
}
 
}
 
}
 
}
  
@media screen and (orientation: portrait){
+
.menu_sign:after
  .over-container{
+
{
            width:80%;
+
width: 0;
            height:100%;
+
height: 0;
            margin:auto;
+
border: 0.313em solid transparent;  
            margin-bottom:40%;
+
border-bottom: none;
            margin-top:18%;
+
border-top-color: black;
            position:relative;
+
content: '';
            display:block;
+
vertical-align: middle;
            }
+
display: inline-block;
h1{
+
position: relative;
    text-align:center;
+
right: -0.313em; /* 5 */
    color:rgb(0, 206, 255);
+
                               
    text-shadow:1px 1px 10px rgb(0, 206, 255);
+
}
    font-size:25pt !important;
+
 
}
+
.active_menu{display:none;}
.overview{
+
    color:#F3F7F7;
+
    text-align:justify;
+
    text-indent:2em;
+
    padding-left:20px;
+
    padding-right:20px;
+
    padding-top:10px;
+
    padding-bottom:10px;
+
    font-size:15pt !important;
+
}
+
.position{
+
    cursor:pointer;
+
    position:absolute;
+
    margin-left:32vw;
+
    margin-top:5%;
+
 
      
 
      
}
+
    ul>.dropdown>a{
}
+
                color:black !important;
 +
                text-align:center !important;
 +
                list-style-type: none !important;
 +
                text-decoration: none;
 +
              }
 +
    .dropdown{
 +
                background:white;
 +
                display:block !important;
 +
                text-align:center;
 +
                list-style-type: none !important;
 +
                text-decoration: none !important;
 +
                font-family:"Open Sans",serif,sans-serif;
 +
                }
 +
               
 +
    .dropdown > a, .dropbtn {
 +
                      display:block !important;
 +
                      text-align: center !important;
 +
                      text-color:black !important;
 +
                      padding: 12px 12px !important;
 +
                      text-decoration:none !important;   
 +
                    }
  
 +
                /*下拉式menu*/
  
.position:hover{
+
    .dropdown > a:hover, .dropdown:hover .dropbtn{
     transform:scale(1.1)
+
                                            color:red !important;
 +
                                            }
 +
 
 +
     .dropdown-content{
 +
                      background:white;
 +
                      position:absolute;
 +
                      width:100%;
 +
                      text-align:center;
 +
                      display: none;
 +
                      Z-index:100;
 +
                    }
 +
    .dropdown-content a{
 +
                        color: black;
 +
                        padding-top:5px;       
 +
                        text-decoration: none;
 +
                        text-align:center;
 +
                        size:1.3em;
 +
                       
 +
                        }
 +
 
 +
   
 +
    .dropdown-content a:hover{
 +
                              color:red;
 +
                              }
  
 
}
 
}
/*------------frame-------------*/
+
 
.leftup{
+
    </style>
      float:left;
+
   
      margin-top:4%;
+
      position:relative;
+
      margin-left:3%;
+
}
+
.rightup{
+
      float:right;
+
      margin-top:4%;
+
      position:relative;
+
      margin-right:3%;
+
}
+
</style>
+
 
</head>
 
</head>
  
 
<body>
 
<body>
  
    <div>
+
<div class="main-container";>
        <video playinline autoplay  controls="true">
+
            <source src="https://static.igem.org/mediawiki/2016/b/b3/NCTU_HOMEPAGE_FINAL.mp4" type="video/mp4" >
+
         <!--隊徽-->
         </video>
+
  <a href="https://2016.igem.org/Team:NCTU_Formosa">
    </div>
+
<img src="https://static.igem.org/mediawiki/2016/4/40/2016NCTU_FORMOSA_YA.png" class="NCTU_Formosa" width="10%">
 
+
 
+
<div class="leftup">
+
<img src="https://static.igem.org/mediawiki/2016/thumb/5/5f/Left-up.png/129px-Left-up.png">
+
</div>
+
<div class="rightup">
+
<img src="https://static.igem.org/mediawiki/2016/thumb/9/96/Rightup.png/129px-Rightup.png">
+
</div>
+
<div class="over-container">
+
  <div>
+
      <h1>Overview</h1>
+
      <p class="overview">Spiders have evolved genuinely sophisticated predatory skills whereas NCTU_Formosa has created a brand new system that will revolutionize conventional agriculture. It is high time for upgrading the working styles of farming with the combination of synthetic Biology, Informatics and Engineering corresponding to Pantide, device and Internet of things in our project.</p>
+
          <img src="https://static.igem.org/mediawiki/2016/e/e0/--.png" width="6%"class="position">
+
 
+
  </div>
+
</div>
+
 
+
                                  <!------part 2------>
+
 
+
<div class="box-container" id="home-spider">
+
 
+
                <!------------框------------->
+
 
+
    <div style="position:absolute;z-index:-500;left:30px;right:30px;">
+
          <img src="https://static.igem.org/mediawiki/2016/e/e4/%E6%A1%86.png" width="100%" height="650px">
+
    </div>
+
 
+
              <!--------------spider------------>
+
 
+
    <div class="img-box">   
+
        <img src="https://static.igem.org/mediawiki/2016/6/62/%E8%9C%98%E8%9B%9B_1.png" width="55%" >
+
 
+
<a href="#PANTIDE" class="connect text-active" style="text-decoration:none;" >
+
        <div class="text1">
+
            <p class="text-PANTIDE">Pantide</p>
+
        </div>
+
 
</a>
 
</a>
  
<a href="#iot" class="connect" style="text-decoration:none;" >
+
    <ul class="main-menu" id="menu" style="list-style-image: none;">
         <div class="text2">
+
         <li class="dropdown"><a href="https://2016.igem.org/Team:NCTU_Formosa"  class="dropbtn">Home</a></li>
             <p class="text-iot">IoT</p>
+
       
        </div>
+
        <li class="dropdown">
</a>
+
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Project" class="dropbtn"><span class="menu_sign">Project</span></a>
 
+
                  <div class="dropdown-content">
<a href="#device" class="connect" style="text-decoration:none;" >
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Description">Description</a></div>
        <div class="text3">
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Design">Design</a></div>
             <p class="text-device">Device</p>
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate">Device</a></div>
        </div>
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Proof">Results</a></div>
</a>
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Model">Modeling</a></div>
 
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Safety">Safety</a></div>
</div>
+
                  </div>
 
+
        </li>
    <div class="text-container">
+
       
 +
        <li class="dropdown">
 +
          <a href="https://2016.igem.org/Team:NCTU_Formosa/Human_Practices" class="dropbtn"><span class="menu_sign">Human Practice</span></a>
 +
                  <div class="dropdown-content">                     
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Integrated_Practices">Study</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations">Collaborations</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Engagement">Education</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Meetups">Meetups</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Further_Considerations">Further Considerations</a></div>
 +
                  </div>
 +
        </li>
 +
       
 +
        <li class="dropdown">
 +
             <a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship" class="dropbtn"><span class="menu_sign">Entrepreneurship</span></a>
 +
                  <div class="dropdown-content">                                          
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Businessmodel">Business Model</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#MarketingFuture">Marketing & Future</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#RegulationLaw">Law & Regulations</a></div>  
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#Business_competition">Business Competition</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Entrepreneurship#ourSponsor">Sponsor</a></div>
 +
                  </div>
 +
        </li>
 +
       
 +
        <li class="dropdown">
 +
            <a href="https://2016.igem.org/Team:NCTU_Formosa/Parts" class="dropbtn"><span class="menu_sign">Parts</span></a>
 +
                  <div class="dropdown-content">
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Basic_Part">Basic Parts</a></div>
 +
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Composite_Part">Composite Parts</a></div>
 +
                  </div>
 +
        </li>
  
        <article id="PANTIDE" class="item item-active">
 
        <p style="text-align:center;font-size:24pt;padding-top:10px;">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>
 
        <a href="https://2016.igem.org/Team:NCTU_Formosa/Design#pantide" style="text-decoration:none;color:black;">
 
        <div class="buttom">
 
              more
 
        </div>
 
        </a>
 
        </article>
 
 
          
 
          
         <article id="iot" class="item">
+
         <li class="dropdown">
        <p style="text-align:center;font-size:24pt;padding-top:10px;">IoT</p>
+
            <a href="#" class="dropbtn"><span class="menu_sign">Notebook</span></a>
        <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>
+
                  <div class="dropdown-content">
        <a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate#IoT" style="text-decoration:none;color:black;">
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Notebook">Lab Note</a></div>
        <div class="buttom">
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/Protocol">Protocol</a></div>
              more
+
                  </div>
        </div>
+
         </li>
        </a>
+
 
         </article>
+
 
          
 
          
         <article id="device" class="item">
+
       
        <p style="text-align:center;font-size:24pt;padding-top:10px;">Device</p>
+
         <li class="dropdown">
         <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>
+
            <a href="https://2016.igem.org/Team:NCTU_Formosa/Attributions" class="dropbtn">Team</a>
        <a href="https://2016.igem.org/Team:NCTU_Formosa/Demonstrate" style="text-decoration:none;color:black;">
+
         </li>
        <div class="buttom">
+
       
              more
+
        <li class="dropdown">
        </div>
+
            <a href="https://2016.igem.org/Team:NCTU_Formosa/Achievement" class="dropbtn">Achievement</a>
        </a>
+
                  <div class="dropdown-content">
         </article>
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Gold">HP Gold</a></div>
     </div>
+
                      <div><a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Silver">HP Silver</a></div>
 +
                  </div>
 +
         </li>
 +
     </ul>
 +
   
 +
 
 
</div>
 
</div>
  
 
<script>
 
<script>
$(function() {
+
function myFunction(x) {
 +
   
 +
    x.classList.toggle("change");
 +
   
 +
};
  
// Menu Tabular
+
$(document).ready(function(){
var $text = $('.connect');
+
    $("#icon_menu").click(
$text.on('click', function(e) {
+
    function(){$("#menu").toggle()}
e.preventDefault();
+
    );
$text.removeClass('text-active');
+
     
$(this).addClass('text-active');
+
});
 
+
$('.item').fadeOut(300);
+
$(this.hash).delay(300).fadeIn();
+
       
+
});
+
  
 +
$(document).ready(function() {
 +
   
 +
    $( '.dropdown' ).hover(
 +
        function(){
 +
            $(this).children('.dropdown-content').slideDown(500);
 +
        },
 +
        function(){
 +
            $('.dropdown').children('.dropdown-content').hide();
 +
        }
 +
    );
 
});
 
});
 
 
</script>
 
</script>
  
 +
</div>
  
<script>
 
var $imgs =  $( '.position' );
 
 
$imgs.each( function( index ) {
 
  var $img = $( this );
 
  $img.click( function() {
 
    $('html, body').animate({ scrollTop: $('.box-container').offset().top - 70}, 1000 );
 
  });
 
})
 
</script>
 
 
 
<script>
 
var $nodes =  $( '.connect' )
 
 
 
$nodes.each( function( index ) {
 
  var $node = $( this );
 
  $node.click( function() {
 
    $('html, body').animate({ scrollTop: $('.text-container').offset().top - 380}, 1000 );
 
  });
 
})
 
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>
{{Team:NCTU_Formosa/footer}}
 

Revision as of 12:15, 2 July 2017