Difference between revisions of "Team:KoreaSonyeodul/Human Practices"

(Prototype team page)
 
Line 1: Line 1:
 
{{KoreaSonyeodul}}
 
{{KoreaSonyeodul}}
−
<html>
 
  
−
<div class="column full_size">
+
<html lang="en">
 +
  <head>
 +
    <style>
 +
      #wrap {width: 60%; margin: auto;}
 +
      body{
 +
      margin: 0;
 +
      background: url('https://static.igem.org/mediawiki/2016/e/ee/T--KoreaSonyeodul--TitleBackground.png');
 +
      background-size: 100%;
 +
      background-repeat: no-repeat;
 +
      background-attachment: top;
 +
      }
 +
      <!--mainTitle-->
 +
      .site .mainBox .mainBox1 {width: 1000px; margin-left: auto; margin-right: auto;}
 +
      .site {width: 100%}
 +
      .site h1 {
 +
      margin-top: 250px;
 +
      color: #ffffff;
 +
      text-decoration: none;
 +
      font-size: 80px;
 +
      height: 35px;
 +
      background-color: rgba(255, 255, 255, 0.0);}
 +
      .site h2 {margin-top: 0; position: relative; margin-bottom: 300px; padding-bottom: 100px;
 +
      font-size: 50px;
 +
      color: #ffffff;
 +
      height: 30px;
 +
      }
 +
      table {text-align: center;}
 +
      .site .mainBox .mainBox1 {width: 1000px; margin-left: auto; margin-right: auto;}
  
−
<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>
+
      <!--FadeIn-->
−
<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>
+
      @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
−
</div>
+
  
 +
      body {padding: 0; margin: 0; background-color: #333;}
  
−
<div class="column half_size">
+
      .container {position: fixed; top: 25%; left: 25%;}
−
<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">
+
      @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
−
<h5>Some Human Practices topic areas </h5>
+
      @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
−
<ul>
+
      @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
−
<li>Philosophy</li>
+
−
<li>Public Engagement / Dialogue</li>
+
−
<li>Education</li>
+
−
<li>Product Design</li>
+
−
<li>Scale-Up and Deployment Issues</li>
+
−
<li>Environmental Impact</li>
+
−
<li>Ethics</li>
+
−
<li>Safety</li>
+
−
<li>Security</li>
+
−
<li>Public Policy</li>
+
−
<li>Law and Regulation</li>
+
−
<li>Risk Assessment</li>
+
−
</ul>
+
−
</div>
+
  
 +
      .fade-in {
 +
      opacity:0;  /* make things invisible upon start */
 +
      -webkit-animation:fadeIn ease-in 1;
 +
      -moz-animation:fadeIn ease-in 1;
 +
      animation:fadeIn ease-in 1;
  
−
<div class="column half_size">
+
      -webkit-animation-fill-mode:forwards;
−
<h5>What should we write about on this page?</h5>
+
      -moz-animation-fill-mode:forwards;
−
<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>
+
      animation-fill-mode:forwards;
−
</div>
+
  
 +
      -webkit-animation-duration:1s;
 +
      -moz-animation-duration:1s;
 +
      animation-duration:1s;
 +
      }
  
−
<div class="column half_size">
+
      .fade-in.one {
−
<h5>Inspiration</h5>
+
      -webkit-animation-delay: 0.7s;
−
<p>Read what other teams have done:</p>
+
      -moz-animation-delay: 0.7s;
−
<ul>
+
      animation-delay: 0.7s;
−
<li><a href="https://2014.igem.org/Team:Dundee/policypractice/experts">2014 Dundee </a></li>
+
      }
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Policy_Practices_Overview">2014 UC Davis </a></li>
+
−
<li><a href="https://2013.igem.org/Team:Manchester/HumanPractices">2013 Manchester </a></li>
+
−
<li><a href="https://2013.igem.org/Team:Cornell/outreach">2013 Cornell </a></li>
+
−
</ul>
+
−
</div>
+
  
 +
      .fade-in.two {
 +
      -webkit-animation-delay: 1.2s;
 +
      -moz-animation-delay:1.2s;
 +
      animation-delay: 1.2s;
 +
      }
  
 +
      .fade-in.three {
 +
      -webkit-animation-delay: 1.6s;
 +
      -moz-animation-delay: 1.6s;
 +
      animation-delay: 1.6s;
 +
      }
  
 +
    </style>
 +
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"></link>
 +
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
      <meta name= "viewport" content = "initial-scale=1.0, width= device-width" />
 +
    </link>
 +
  </head>
 +
 +
  <body>
 +
 +
    <!--Title-->
 +
 +
    <div class="box fade-in one">
 +
      <div id="" align="center">
 +
        <div id="fontlight" class="site">
 +
          <h1>
 +
            <font face="Roboto" weight="200">Human Practice</font>
 +
          </h1>
 +
          <h2>
 +
            <font face="Roboto">Main Subtitle</font>
 +
          </h2>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 +
 +
    <!--TitleBoxes-->
 +
    <div id="wrap">
 +
      <div class="box fade-in two">
 +
        <div class="firstPractice">
 +
          <font size="24px" weight="bold">
 +
            Campaign 1
 +
          </font>
 +
          <font size="15px" weight="normal">
 +
            The first thing that came to our team’s mind after pondering about how we should apply our project to the real world was campaign. The idea of our campaign was simple: to make people become aware of the situation. Our team designed two steps to further elaborate the plan. Regarding that we all lived in dormitory, the sphere of activity was confined to our school.<br/>
 +
            The first plan required participation of our school’s students. For three trash baskets in our school, we indicated a different basket only for plastic. After two weeks, our teammates gathered every plastic basket that we put and sorted the trash just in case there were wastes other than plastic. The image below is the how the waste baskets looked when we put it together.
 +
          </font>
 +
        </div>
 +
      </div>
 +
 +
 +
      <!--OtherTitleBoxes-->
 +
      <div class="box fade-in three">
 +
        <div class="secondPractice">
 +
         
 +
        </div>
 +
      </div>
 +
      <div class="box fade-in four">
 +
        <div class="thirdPractice">
 +
         
 +
        </div>
 +
      </div>
 +
 +
 +
      <!--EndOfWrap-->
 +
      <!--Footer-->
 +
 +
    </body>
 
</html>
 
</html>

Revision as of 07:27, 25 September 2016

Human Practice

Main Subtitle

Campaign 1 The first thing that came to our team’s mind after pondering about how we should apply our project to the real world was campaign. The idea of our campaign was simple: to make people become aware of the situation. Our team designed two steps to further elaborate the plan. Regarding that we all lived in dormitory, the sphere of activity was confined to our school.
The first plan required participation of our school’s students. For three trash baskets in our school, we indicated a different basket only for plastic. After two weeks, our teammates gathered every plastic basket that we put and sorted the trash just in case there were wastes other than plastic. The image below is the how the waste baskets looked when we put it together.