Difference between revisions of "Team:NCTU Formosa/Human Practices"

 
(70 intermediate revisions by 2 users not shown)
Line 6: Line 6:
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
  
−
<style>
+
<style type="text/css">
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 +
 
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
 
 +
}
 +
 
 
* {
 
* {
 
   font-family: 'Open Sans', sans-serif;
 
   font-family: 'Open Sans', sans-serif;
Line 15: Line 37:
 
     margin:0;
 
     margin:0;
 
     background:rgb(51,51,51);
 
     background:rgb(51,51,51);
 +
    line-height:1;
 
}
 
}
 
/*大圖*/
 
/*大圖*/
−
.main-img{
+
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:100vh ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
  .main-img{
 
     top: 0;
 
     top: 0;
 
     bottom: 0;
 
     bottom: 0;
 
     left: 0;
 
     left: 0;
 
     right: 0;
 
     right: 0;
−
     max-width: 100%;
+
     width: 100%;
−
    max-height: 100%;
+
 
     margin: auto;
 
     margin: auto;
−
     z-index:1;
+
     z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 
}
 
}
  
 
/*box*/
 
/*box*/
−
.container{
+
.HP_image{
−
    width:210px;
+
−
    height:210px;
+
 
     opacity:0.5;
 
     opacity:0.5;
 +
}
 +
.HP_image:hover{
 +
    opacity:4;
 
}
 
}
 
.img-box1{
 
.img-box1{
Line 40: Line 86:
 
     border-radius:10px;
 
     border-radius:10px;
 
     overflow:hidden;
 
     overflow:hidden;
−
     margin-left:10vw;
+
     margin-left:17%;
−
    margin-top:10vh;
+
 
     float:left;
 
     float:left;
 
     color:white;
 
     color:white;
Line 47: Line 92:
 
     font-weight:bold;
 
     font-weight:bold;
 
     }
 
     }
 +
.img-box1-1{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:8%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    }
 +
.img-box1-2{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:8%;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    } 
 
      
 
      
 
.img-box2{
 
.img-box2{
Line 54: Line 123:
 
     border-radius:10px;
 
     border-radius:10px;
 
     overflow:hidden;
 
     overflow:hidden;
−
     margin-left:23vw;
+
     margin-left:29%;
−
     margin-top:8vh;
+
     margin-top:7vh;
 
     float:left;
 
     float:left;
 
     color:white;
 
     color:white;
Line 68: Line 137:
 
     border-radius:10px;
 
     border-radius:10px;
 
     overflow:hidden;
 
     overflow:hidden;
−
     margin-left:10vw;
+
     margin-left:9%;
−
     margin-top:8vh;
+
     margin-top:7vh;
 
     float:left;
 
     float:left;
 
     color:white;
 
     color:white;
Line 77: Line 146:
 
     }
 
     }
  
−
.container:hover{
 
−
    opacity:4;
 
−
 
−
}
 
  
 
.text{
 
.text{
 
     position:absolute;
 
     position:absolute;
−
     margin-top:8%;
+
     margin-top:80px;
−
     margin-left:7%;
+
     margin-left:70px;
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
     opacity:none !important;
 
     opacity:none !important;
Line 93: Line 158:
 
.text1{
 
.text1{
 
     position:absolute;
 
     position:absolute;
−
     margin-top:8%;
+
     margin-top:80px;
−
     margin-left:3%;
+
     margin-left:25px;
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
     text-shadow:2px 2px black;
 
     text-shadow:2px 2px black;
Line 101: Line 166:
 
.text2{
 
.text2{
 
     position:absolute;
 
     position:absolute;
−
     margin-top:8%;
+
     margin-top:80px;
−
     margin-left:4%;
+
     margin-left:50px;
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
     text-shadow:2px 2px black;
 
     text-shadow:2px 2px black;
Line 109: Line 174:
 
.text3{
 
.text3{
 
     position:absolute;
 
     position:absolute;
−
     margin-top:8%;
+
     margin-top:80px;
−
     margin-left:5%;
+
     margin-left:53px;
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
     text-shadow:2px 2px black;
 
     text-shadow:2px 2px black;
Line 117: Line 182:
 
.text4{
 
.text4{
 
     position:absolute;
 
     position:absolute;
−
     margin-top:7%;
+
     margin-top:80px;
−
     margin-left:6%;
+
     margin-left:65px;
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
     text-shadow:2px 2px black;
 
     text-shadow:2px 2px black;
Line 125: Line 190:
 
.text4-1{
 
.text4-1{
 
     position:absolute;
 
     position:absolute;
−
     margin-top:9%;
+
     margin-top:103px;
−
     margin-left:2%;
+
     margin-left:23px;
 
     font-family: 'Open Sans', sans-serif;
 
     font-family: 'Open Sans', sans-serif;
 
     text-shadow:2px 2px black;
 
     text-shadow:2px 2px black;
 
     z-index:500;
 
     z-index:500;
 +
}
 +
 +
/*overview*/
 +
h1{
 +
    text-align:center;
 +
    color:#F3F7F7;
 +
    font-size:25pt !important;
 +
}
 +
.overviewHP{
 +
    color:#F3F7F7;
 +
    text-align:justify;
 +
    text-indent:2em;
 +
    padding:10px;
 +
    font-size:15pt !important;
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
     <div>
+
     <div class="img-container">
−
         <img src="https://static.igem.org/mediawiki/2016/6/6e/Human.png" class="main-img" width="100%">
+
         <img src="https://static.igem.org/mediawiki/2016/6/6f/QqqqqqqHPBIG.png" class="main-img" width="100%">
 
     </div>
 
     </div>
−
    <a href="#">
 
  
 +
<div style="width:80%;margin:auto;margin-bottom:3%;">
 +
<h1>Overview</h1>
 +
<p class="overviewHP">
 +
The ultimate goal of our project is to implement the whole system including PANTIDE and the device into the agricultural industry and solve the problem caused by the excessive use of the chemical pesticide. Therefore, we design directed human practices that facilitate the project multidimensionally. The human practices consist of five aspects—Study, collaborations, education, meetups, and further considerations.(see <a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Gold"  style="color:#44E287;">HP/Gold</a> and <a href="https://2016.igem.org/Team:NCTU_Formosa/HP/Silver"  style="color:#44E287;">HP/Silver</a>.)
 +
</p>
 +
</div>
 +
 +
    <a href="https://2016.igem.org/Team:NCTU_Formosa/Integrated_Practices">
 
         <div class="img-box1">
 
         <div class="img-box1">
−
 
 
             <div class="text">Study</div>
 
             <div class="text">Study</div>
−
             <div class="container">
+
             <img src="https://static.igem.org/mediawiki/2016/thumb/a/aa/Study5.jpg/800px-Study5.jpg" width="100%" height="100%" class="HP_image">
−
                <img src="https://static.igem.org/mediawiki/2016/7/7a/Study2.jpg" width="100%" height="100%">
+
−
            </div>
+
 
         </div>
 
         </div>
−
 
 
     </a>
 
     </a>
 
      
 
      
−
     <a href="##">
+
     <a href="https://2016.igem.org/Team:NCTU_Formosa/Collaborations">
−
         <div class="img-box1">
+
         <div class="img-box1-1">      
−
       
+
 
             <div class="text1">Collaboration</div>
 
             <div class="text1">Collaboration</div>
−
             <div class="container">
+
             <img src="https://static.igem.org/mediawiki/2016/f/fc/Colloboration_HP.jpg" width="100%" height="100%" class="HP_image">
−
                <img src="https://static.igem.org/mediawiki/2016/f/fc/Colloboration_HP.jpg" width="100%" height="100%">
+
−
            </div>
+
 
         </div>
 
         </div>
 
     </a>
 
     </a>
 
      
 
      
−
     <a href="###">
+
     <a href="https://2016.igem.org/Team:NCTU_Formosa/Engagement">
−
         <div class="img-box1">
+
         <div class="img-box1-2">
 
             <div class="text2">Education</div>
 
             <div class="text2">Education</div>
−
             <div class="container">
+
             <img src="https://static.igem.org/mediawiki/2016/7/72/Education1.jpg" width="100%" height="100%" class="HP_image">
−
                <img src="https://static.igem.org/mediawiki/2016/7/72/Education1.jpg" width="100%" height="100%">
+
−
            </div>
+
 
         </div>
 
         </div>
 
     </a>
 
     </a>
 
      
 
      
−
     <a href="####">
+
     <a href="https://2016.igem.org/Team:NCTU_Formosa/Meetups">
 
         <div class="img-box2">
 
         <div class="img-box2">
 
             <div class="text3">Meetups</div>
 
             <div class="text3">Meetups</div>
−
             <div class="container">
+
             <img src="https://static.igem.org/mediawiki/2016/3/3b/Meetup_HP.JPG" width="100%" height="100%" class="HP_image">
−
                <img src="https://static.igem.org/mediawiki/2016/3/3b/Meetup_HP.JPG" width="100%" height="100%">
+
−
            </div>
+
 
         </div>
 
         </div>
 
     </a>
 
     </a>
 
      
 
      
−
     <a href="#####">
+
     <a href="https://2016.igem.org/Team:NCTU_Formosa/Further_Considerations">
 
         <div class="img-box3">
 
         <div class="img-box3">
 
             <div class="text4">Futher </div>
 
             <div class="text4">Futher </div>
 
             <div class="text4-1">Considerations</div>
 
             <div class="text4-1">Considerations</div>
−
             <div class="container">
+
             <img src="https://static.igem.org/mediawiki/2016/c/c6/NCTU_FURTHER_MAIN_PIC.jpg" width="100%" height="100%" class="HP_image">
−
                <img src="https://static.igem.org/mediawiki/2016/d/d3/Further.jpg" width="100%" height="100%">
+
−
            </div>
+
 
         </div>
 
         </div>
 
     </a>
 
     </a>
 
      
 
      
−
<script>
 
−
$(".main-img").height( window.innerHeight );
 
−
$(document).ready(function(
 
  
−
){})
 
−
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>
 
{{Team:NCTU_Formosa/footer}}
 
{{Team:NCTU_Formosa/footer}}

Latest revision as of 22:19, 19 October 2016

Overview

The ultimate goal of our project is to implement the whole system including PANTIDE and the device into the agricultural industry and solve the problem caused by the excessive use of the chemical pesticide. Therefore, we design directed human practices that facilitate the project multidimensionally. The human practices consist of five aspects—Study, collaborations, education, meetups, and further considerations.(see HP/Gold and HP/Silver.)

Study
Collaboration
Education
Meetups
Futher
Considerations