Difference between revisions of "Team:LN-Shiyan-China/Human Practices"

(Prototype team page)
 
Line 1: Line 1:
−
{{LN-Shiyan-China}}
+
 
 
<html>
 
<html>
 +
<head>
 +
<title>LN-shiyan-China</title>
 +
<style type="text/css">
 +
#footer-box,#sponsor-box,.shadow3,#content,table,#catlinks {
 +
    background-color: transparent;
 +
}
 +
.mediawiki.ltr.ns-0.ns-subject.page-Team_HUST-China
 +
#globalWrapper #top-section #p-logo a img {
 +
    visibility:hidden;
 +
}
 +
#p-logo {
 +
    background:url(https://static.igem.org/mediawiki/2014/5/52/Wiki_Logo_Transparent.png);
 +
    background-repeat: no-repeat;
 +
}
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear{display: none;}
 +
#globalWrapper, #content,#bodyContent { /*-- changes default wiki settings --*/
 +
    width: 100%;
 +
    height: 100%;
 +
    border: 0px;
 +
    background-color: transparent;
 +
    margin-top: -3px;
 +
    padding: 0px;
 +
}
  
−
<div class="column full_size">
+
html, .wrapper { /*-- changes default wiki settings --*/
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: transparent; 
 +
}
 +
 +
/* CSS Document */
 +
*{
 +
margin:0px;
 +
padding:0px;
 +
}
 +
#content{
 +
    width:100%;
 +
    height:100%;
 +
font-family: Arial, Helvetica, Verdana;
 +
color:#000;
 +
font-size:12px;
 +
}
  
−
<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>
+
body{
−
<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>
+
    width:100%;
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
    height:100%;
−
</div>
+
font-family: Arial, Helvetica, Verdana;
 +
color:#000;
 +
font-size:12px;
 +
      background-color:#FFF;
 +
}
 +
img{
 +
border:none;
 +
}
 +
ul ,li{
 +
list-style:none;
 +
        margin: 0px 0px 0px 0px;
 +
       
 +
}
 +
a{
 +
text-decoration:none;
 +
}
 +
html ,body{
 +
height:100%;
 +
}
 +
.top{
 +
background:#d3cac7 url(https://static.igem.org/mediawiki/2015/a/a6/Home_bg.jpg) no-repeat top center;
 +
width:100%;
 +
padding-top:43px;
 +
height:630px;
 +
}
 +
.nav_bar{
 +
background:#000;
 +
opacity:0.9;
 +
height:80px;
 +
line-height:74px;
 +
position:relative;
 +
}
 +
.nav{
 +
width:1050px;
 +
margin:0px auto;
 +
position:relative;
 +
height:80px;
 +
        line-height:3.5;
 +
}
 +
.nav li{
 +
float:left;
 +
display:block;
 +
width:150px;
 +
text-align:center;
 +
position:relative;
 +
}
 +
.nav li a{
 +
color:#fff;
 +
font-size:16px;
 +
display:block;
 +
}
 +
.nav li a:hover{
 +
color:#C99091;
 +
}
  
 +
.sub{display:none;position:absolute;left:0px;top:80px;z-index:1;border:1px solid #666;border-top:0; background:#fff;}
 +
.sub li{text-align:center;margin-bottom:-1px; display:block;width:148px; }
 +
.sub li a{display:block; border-bottom:2px solid #666;padding:8px 0;height:28px;line-height:28px;color:#fff;}
 +
.sub li a:hover{color:#000000;}
 +
.logo{
 +
width:150px;
 +
margin:0px auto 0px;
 +
text-align:center;
 +
position:relative;
 +
top:-20px;
 +
height:122px;
 +
}
 +
.n1{
 +
border-bottom:6px solid #2980b9;
 +
}
 +
.n2{
 +
border-bottom:6px solid #27ae60;
 +
}
 +
.n3{
 +
border-bottom:6px solid #f39c12;
 +
 +
}
 +
.n4{
 +
border-bottom:6px solid #be382a;
  
−
<div class="column half_size">
+
}
−
<div class="highlight">
+
.n5{
−
<h5>Note</h5>
+
border-bottom:6px solid #8e44ad;
−
<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>
+
.n6{
−
<li>Human Practices silver medal criterion</li>
+
border-bottom:6px solid #0498f9;
−
<li>Human Practices gold medal criterion</li>
+
}
−
<li>Best Integrated Human Practices award</li>
+
.tc{
−
<li>Best Education and Public Engagement award</li>
+
width:900px;
−
</ul>
+
margin:0px auto;
−
</div>
+
margin-top:-40px;
−
</div>
+
}
 +
.wel{
 +
width:1000px;
 +
margin:0px auto;
 +
padding:75px 20px;
 +
}
 +
h1{
 +
font-size:70px;
 +
        line-height:1;
 +
text-align:center;
 +
margin-bottom:30px;
 +
        border-bottom:0px solid #AAA;
 +
}
 +
.wel p{
 +
font-size:16px;
 +
line-height:40px;
 +
}
 +
.wel img{
 +
float:right;}
 +
.team{
 +
background:#009b5b;
 +
padding:75px 20px;
 +
}
 +
.team h1{
 +
color:#fff;
 +
margin-bottom:50px;
 +
}
 +
.team ul{
 +
width:1040px;
 +
margin:0px auto;
 +
}
 +
.team ul li{
 +
float:left;
 +
background:#ffffff;
 +
width:235px;
 +
height:184px;
 +
font-size:14px;
 +
line-height:28px;
 +
}
 +
.team ul li.bar{
 +
}
 +
.caret {
 +
  display: inline-block;
 +
  float:left;
 +
  width: 0;
 +
  height: 0;
 +
  top:85px;
 +
  position:relative;
 +
  vertical-align: middle;
 +
  border-right: 10px solid transparent ;
 +
  border-left: 10px solid #009b5b ;
 +
  border-top: 10px solid transparent ;
 +
  border-bottom: 10px solid transparent ;
  
−
<div class="column half_size">
+
}
−
<h5>Some Human Practices topic areas </h5>
+
li.bar p{
−
<ul>
+
float:right;
−
<li>Philosophy</li>
+
margin:-10px 10px 0px;
−
<li>Public Engagement / Dialogue</li>
+
word-break:break-all;
−
<li>Education</li>
+
}
−
<li>Product Design</li>
+
.bar2 .caret {
−
<li>Scale-Up and Deployment Issues</li>
+
  display: inline-block;
−
<li>Environmental Impact</li>
+
  float:right;
−
<li>Ethics</li>
+
  width: 0;
−
<li>Safety</li>
+
  height: 0;
−
<li>Security</li>
+
  top:85px;
−
<li>Public Policy</li>
+
  position:relative;
−
<li>Law and Regulation</li>
+
  vertical-align: middle;
−
<li>Risk Assessment</li>
+
  border-left: 10px solid transparent ;
−
</ul>
+
  border-right: 10px solid #009b5b ;
−
</div>
+
  border-top: 10px solid transparent ;
 +
  border-bottom: 10px solid transparent ;
  
 +
}
 +
li.bar2 p{
 +
float:left;
 +
margin:-10px 10px 0px;
 +
word-break:break-all;
 +
}
 +
.content{
 +
width:980px;
 +
margin:0px auto;
 +
padding:20px 10px;
 +
}
 +
.content h1{
 +
font-size:24px;
 +
}
 +
.content img{
 +
float:left;
 +
margin:10px;
 +
}
 +
.t1{
 +
font-size:18px;
 +
word-break:break-all;
 +
}
 +
.footer{
 +
margin:40px auto ;
 +
text-align:center;
 +
}
  
−
<div class="column half_size">
 
−
<h5>What should we write about on this page?</h5>
 
−
<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>
 
−
</div>
 
  
−
 
+
</style>
−
<div class="column half_size">
+
<link href="http://www.dftvip.com/templa/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
−
<h5>Inspiration</h5>
+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
−
<p>Read what other teams have done:</p>
+
<script src="http://www.dftvip.com/templa/js/jquery-1.11.0.min.js"></script>
−
<ul>
+
<!-- Custom Theme files -->
−
<li><a href="https://2014.igem.org/Team:Dundee/policypractice/experts">2014 Dundee </a></li>
+
<link href="http://www.dftvip.com/templa/css/style.css" rel="stylesheet" type="text/css" media="all"/>
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Policy_Practices_Overview">2014 UC Davis </a></li>
+
<!-- Custom Theme files -->
−
<li><a href="https://2013.igem.org/Team:Manchester/HumanPractices">2013 Manchester </a></li>
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<li><a href="https://2013.igem.org/Team:Cornell/outreach">2013 Cornell </a></li>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
</ul>
+
<meta name="keywords" content="Donate Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
 +
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
 +
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
 +
<!--Google Fonts-->
 +
<link href='//fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
 +
<link href='//fonts.googleapis.com/css?family=Archivo+Narrow:400,700' rel='stylesheet' type='text/css'>
 +
<!--google fonts-->
 +
</head>
 +
<body>
 +
<!--banner start here-->
 +
<div class="banner1">
 +
<div class="header">
 +
  <div class="container">
 +
    <div class="header-main">
 +
  <div class="logo">
 +
    <h1><a href="index.html">LN-shiyan-China</a></h1>
 +
  </div>
 +
 
 +
    <div class="clearfix"> </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
<div class="top-nav">
 +
    <span class="menu"> <img src="http://www.dftvip.com/templa/images/icon.png" alt=""></span>
 +
<ul class="res">
 +
<li><a class="active" href="index.html"><i class="glyphicon glyphicon-home"> </i>Home</a></li>
 +
<li><a href="team.html"><i class="glyphicon glyphicon-user"> </i>Team</a></li>
 +
<li><a href="project.html"><i class="glyphicon glyphicon-list-alt"> </i>Project</a></li>
 +
<li><a href="Parts.html"><i class="glyphicon glyphicon-picture"> </i>Parts</a></li>
 +
<li><a href="Safety.html"><i class="glyphicon glyphicon-envelope"> </i>Safety</a></li>
 +
<li><a href="Attributions.html"><i class="glyphicon glyphicon-a"> </i>Attributions</a></li>
 +
<li><a href="HumanPractices.html"><i class="glyphicon glyphicon-b"> </i>HumanPractices</a></li>
 +
<li><a href="Notebook.html"><i class="glyphicon glyphicon-c"> </i>Notebook</a></li>
 +
</ul>
 +
<!-- script-for-menu -->
 +
<script>
 +
  $( "span.menu" ).click(function() {
 +
$( "ul.res" ).slideToggle( 300, function() {
 +
// Animation complete.
 +
  });
 +
});
 +
</script>
 +
<!-- /script-for-menu -->
 +
</div>
 +
</div>
 +
<!--banner end here-->
 +
<!--blog start here-->
 +
<div class="blog">
 +
<div class="container">
 +
<div class="blog-main">
 +
<div class="blog-top">
 +
<h3>Human Practice</h3>
 +
</div>
 +
<div class="col-md-8 blog-left">
 +
    <img src="http://www.dftvip.com/templa/images/u1.jpg" alt="" class="img-responsive">
 +
  <div class="blog-grid">
 +
  <div class="grid-left">    
 +
      <h3>18</h3>
 +
      <p>Aug</p>
 +
  </div>
 +
  <div class="grid-right">
 +
  <h3>名称</h3>
 +
    <p>简介</p>   
 +
  </div>
 +
<div class="clearfix"> </div>
 +
</div>
 +
<div class="blog-section">
 +
  <img src="http://www.dftvip.com/templa/images/u2.jpg" alt=""  class="img-responsive">
 +
<div class="grid">
 +
<div class="grid-left">  
 +
      <h3>19</h3>
 +
      <p>Aug</p>
 +
  </div>
 +
<div class="grid-right">
 +
  <h3>名称</h3>
 +
    <p>简介</p>   
 +
  </div>
 +
  <div class="clearfix"> </div>
 +
  </div>
 +
</div>
 +
  <div class="blog-section">
 +
<img src="http://www.dftvip.com/templa/images/u3.jpg" alt=""  class="img-responsive">
 +
<div class="grid">
 +
<div class="grid-left">  
 +
      <h3>19</h3>
 +
      <p>Aug</p>
 +
  </div>
 +
<div class="grid-right">
 +
  <h3>名称</h3>
 +
    <p>简介</p>   
 +
  </div>
 +
  <div class="clearfix"> </div>
 +
  </div>
 +
</div>
 +
<div class="blog-section">
 +
  <img src="http://www.dftvip.com/templa/images/u4.jpg" alt=""  class="img-responsive">
 +
<div class="grid">
 +
<div class="grid-left">  
 +
      <h3>19</h3>
 +
      <p>Aug</p>
 +
  </div>
 +
<div class="grid-right">
 +
  <h3>名称</h3>
 +
    <p>简介</p>   
 +
  </div>
 +
  <div class="clearfix"> </div>
 +
  </div>
 +
</div>
 +
<div class="blog-section">
 +
  <img src="http://www.dftvip.com/templa/images/u5.jpg" alt=""  class="img-responsive">
 +
<div class="grid">
 +
<div class="grid-left">  
 +
      <h3>19</h3>
 +
      <p>Aug</p>
 +
  </div>
 +
<div class="grid-right">
 +
  <h3>名称</h3>
 +
    <p>简介</p>   
 +
  </div>
 +
  <div class="clearfix"> </div>
 +
  </div>
 +
</div>
 +
 
 +
</div>
 +
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
<!--blog end here-->
 +
<!--footer start here-->
 +
<div class="footer">
 +
<div class="container">
 +
<div class="footer-main">
 +
<div class="col-md-4 ftr-grid">
 +
<h3>Navigation</h3>
 +
<ul>
 +
<li><a href="index.html">Home</a></li>
 +
<li><a href="about.html">About</a></li>
 +
<li><a href="shortcodes.html">Short Codes</a></li>
 +
<li><a href="blog.html">Blog</a></li>
 +
<li><a href="contact.html">Contact</a></li>
 +
</ul>
 +
</div>
 +
 +
<div class="clearfix"> </div>
 +
</div>
 +
</div>
 +
</div>
 +
<!--footer end here-->
 +
<!--copy rights start here-->
  
−
 
+
<!--copy right end here-->
−
 
+
</body>
 
</html>
 
</html>

Revision as of 10:20, 18 October 2016

LN-shiyan-China

Human Practice

18

Aug

名称

简介

19

Aug

名称

简介

19

Aug

名称

简介

19

Aug

名称

简介

19

Aug

名称

简介

Navigation