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

(Prototype team page)
 
Line 1: Line 1:
−
{{NCTU_Formosa}}
+
{{Team:NCTU_Formosa}}
 
<html>
 
<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://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
  
−
<div class="column full_size">
+
<style>
 +
* {
 +
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 +
    font-style: normal;
 +
}
 +
body{
 +
    margin:0;
 +
    background:rgb(51,51,51);
 +
}
 +
/*大圖*/
 +
.main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    max-width: 100%;
 +
    max-height: 100%;
 +
    margin: auto;
 +
    overflow: auto;
 +
    z-index:999;
 +
}
  
−
<p>iGEM teams are leading in the area of Human Practices because they conduct their projects within a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
/*box*/
−
<p>Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. </p>
+
.container{
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
    width:210px;
−
</div>
+
    height:210px;
 +
    opacity:0.5;
 +
}
 +
.img-box1{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:10vw;
 +
    margin-top:10vh;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    }
 +
   
 +
.img-box2{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:23vw;
 +
    margin-top:8vh;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-bottom:30px;
 +
    }
 +
.img-box3{
 +
    width:210px;
 +
    height:210px;
 +
    border:2px solid #F3F7F7;
 +
    border-radius:10px;
 +
    overflow:hidden;
 +
    margin-left:10vw;
 +
    margin-top:8vh;
 +
    float:left;
 +
    color:white;
 +
    font-size:18pt;
 +
    font-weight:bold;
 +
    margin-bottom:30px;
 +
    }
  
 +
.container:hover{
 +
    opacity:4;
  
−
<div class="column half_size">
+
}
−
<div class="highlight">
+
−
<h5>Note</h5>
+
−
<p>You must fill out this page in order to be considered for all <a href="https://2016.igem.org/Judging/Awards">awards</a> for Human Practices:</p>
+
−
<ul>
+
−
<li>Human Practices silver medal criterion</li>
+
−
<li>Human Practices gold medal criterion</li>
+
−
<li>Best Integrated Human Practices award</li>
+
−
<li>Best Education and Public Engagement award</li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
  
−
<div class="column half_size">
+
.text{
−
<h5>Some Human Practices topic areas </h5>
+
    position:absolute;
−
<ul>
+
    margin-top:8%;
−
<li>Philosophy</li>
+
    margin-left:7%;
−
<li>Public Engagement / Dialogue</li>
+
    font-family: 'Open Sans', sans-serif;
−
<li>Education</li>
+
    opacity:none !important;
−
<li>Product Design</li>
+
    text-shadow:2px 2px black;
−
<li>Scale-Up and Deployment Issues</li>
+
    z-index:500;
−
<li>Environmental Impact</li>
+
}
−
<li>Ethics</li>
+
.text1{
−
<li>Safety</li>
+
    position:absolute;
−
<li>Security</li>
+
    margin-top:8%;
−
<li>Public Policy</li>
+
    margin-left:3%;
−
<li>Law and Regulation</li>
+
    font-family: 'Open Sans', sans-serif;
−
<li>Risk Assessment</li>
+
    text-shadow:2px 2px black;
−
</ul>
+
    z-index:500;
−
</div>
+
}
−
 
+
.text2{
−
 
+
    position:absolute;
−
<div class="column half_size">
+
    margin-top:8%;
−
<h5>What should we write about on this page?</h5>
+
    margin-left:4%;
−
<p>On this page, you should write about the Human Practices topics you considered in your project, and document any special activities you did (such as visiting experts, talking to lawmakers, or doing public engagement).</p>
+
    font-family: 'Open Sans', sans-serif;
−
</div>
+
    text-shadow:2px 2px black;
−
 
+
    z-index:500;
−
 
+
}
−
<div class="column half_size">
+
.text3{
−
<h5>Inspiration</h5>
+
    position:absolute;
−
<p>Read what other teams have done:</p>
+
    margin-top:8%;
−
<ul>
+
    margin-left:5%;
−
<li><a href="https://2014.igem.org/Team:Dundee/policypractice/experts">2014 Dundee </a></li>
+
    font-family: 'Open Sans', sans-serif;
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Policy_Practices_Overview">2014 UC Davis </a></li>
+
    text-shadow:2px 2px black;
−
<li><a href="https://2013.igem.org/Team:Manchester/HumanPractices">2013 Manchester </a></li>
+
    z-index:500;
−
<li><a href="https://2013.igem.org/Team:Cornell/outreach">2013 Cornell </a></li>
+
}
−
</ul>
+
.text4{
−
</div>
+
    position:absolute;
 +
    margin-top:7%;
 +
    margin-left:6%;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
.text4-1{
 +
    position:absolute;
 +
    margin-top:9%;
 +
    margin-left:2%;
 +
    font-family: 'Open Sans', sans-serif;
 +
    text-shadow:2px 2px black;
 +
    z-index:500;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
    <div>
 +
        <img src="human.png" class="main-img" width="100%">
 +
    </div>
 +
    <a href="#">
  
 +
        <div class="img-box1">
 +
            <div class="text">Study</div>
 +
            <div class="container">
 +
                <img src="study2.jpg" width="100%" height="100%">
 +
            </div>
 +
        </div>
  
 +
    </a>
 +
   
 +
    <a href="##">
 +
        <div class="img-box1">
 +
       
 +
            <div class="text1">Collaboration</div>
 +
            <div class="container">
 +
                <img src="colloboration1.jpg" width="100%" height="100%">
 +
            </div>
 +
        </div>
 +
    </a>
 +
   
 +
    <a href="###">
 +
        <div class="img-box1">
 +
            <div class="text2">Education</div>
 +
            <div class="container">
 +
                <img src="Education1.jpg" width="100%" height="100%">
 +
            </div>
 +
        </div>
 +
    </a>
 +
   
 +
    <a href="####">
 +
        <div class="img-box2">
 +
            <div class="text3">Meetups</div>
 +
            <div class="container">
 +
                <img src="colloboration5.jpg" width="100%" height="100%">
 +
            </div>
 +
        </div>
 +
    </a>
 +
   
 +
    <a href="#####">
 +
        <div class="img-box3">
 +
            <div class="text4">Futher </div>
 +
            <div class="text4-1">Considerations</div>
 +
            <div class="container">
 +
                <img src="further.jpg" width="100%" height="100%">
 +
            </div>
 +
        </div>
 +
    </a>
 +
   
 +
<script>
 +
$(".main-img").height( window.innerHeight );
 +
$(document).ready(function(
  
 +
){})
 +
</script>
 +
</body>
 
</html>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Revision as of 11:39, 19 September 2016

Study
Collaboration
Education
Meetups
Futher
Considerations