Difference between revisions of "Team:SZU-China/HP/Gold Integrated"

Line 1: Line 1:
−
{{SZU-China}}
 
 
<html>
 
<html>
−
<div class="column full_size">
 
−
<h3>★  ALERT! </h3>
 
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
 
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
 
−
</div>
 
−
<div class="clear"></div>
 
  
−
<div class="column full_size">
+
<head>
  
−
<h1>Gold Medal and Integrated Human Practices</h1>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
<title>HP PAGE</title>
  
−
<p>This page will contain information for your Gold medal Human Practices work, which you can also use to nominate your team for the Best Integrated Human Practices page. To make things easier, we have combined the Gold medal page with the Best Integrated Human Practices page since we expect the work to overlap considerably. </p>
+
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:SZU-China/flow/CSS?action=raw&amp;ctype=text/css">
−
<p>iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:SZU-China/sub/CSS?action=raw&amp;ctype=text/css">
−
<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>
+
−
<p>For more information, please see the <a href="https://2017.igem.org/Competition/Human_Practices">Human Practices page</a>.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
 +
<script type="text/javascript" src="https://2017.igem.org/Template:SZU-China/jquery/Javascript?action=raw&amp;ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2017.igem.org/Template:SZU-China/flow/Javascript?action=raw&amp;ctype=text/javascript"> </script>
  
−
<div class="column half_size">
+
<style type="text/css">
−
<h3>Gold Medal Criterion #1</h3>
+
.btn {
−
<p>Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the design and/or execution of your project.</p>
+
font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
border: 2px solid #47b475;
 +
font-size: 18px;
 +
font-weight: 700;
 +
text-transform: uppercase;
 +
}
  
 +
</style>
 +
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
$("#nav-list-ul li").hover(function(){
 +
$(this).find('ul.sub-nav').show();
 +
}, function(){
 +
$(this).find('ul.sub-nav').hide();
 +
});
 +
 +
$("div.navbar").hover(function(){
 +
$(this).css("box-shadow", "1px 1px 7px #000")
 +
}, function(){
 +
$(this).css("box-shadow", "0px 0px 0px #000")
 +
});
 +
 +
$("#top").click(function () {
 +
$('body,html').animate({ scrollTop: 0 }, 200);
 +
return false;
 +
});
 +
 +
$(".b-hp1").click(function () {
 +
$('.hp1').toggle(1);
 +
});
 +
});
 +
</script>
 +
 +
</head>
 +
 +
<body style="background:#FFF;">
 +
 +
<div class="navbar">
 +
<div class="navbar-nav">
 +
<ul id="nav-list-ul" class="nav-list">
 +
<li><a href="#">TEAM</a>
 +
<span class="caret"></span>
 +
<ul class="sub-nav">
 +
<li><a href="#">PEOPLE</a></li>
 +
<li><a href="#">COLLABARATIONS</a></li>
 +
<li><a href="#">ATTRIBUTION</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">PRACTICE</a>
 +
<span class="caret"></span>
 +
<ul class="sub-nav">
 +
<li><a href="#">GOLD HP</a></li>
 +
<li><a href="#">SILVER HP</a></li>
 +
<li><a href="#">INTEGRATED HP</a></li>
 +
<li><a href="#">ENGAGEMENT</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">OUTEACH</a></li>
 +
<li><a href="#">EXPERIMENT</a>
 +
<span class="caret"></span>
 +
<ul class="sub-nav">
 +
<li><a href="#">PROCEDURE</a></li>
 +
<li><a href="#">RESULTS</a></li>
 +
<li><a href="#">NOTEBOOK</a></li>
 +
<li><a href="#">PROTOCOL</a></li>
 +
<li><a href="#">PARTS</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">PROJECT</a>
 +
<span class="caret"></span>
 +
<ul class="sub-nav">
 +
<li><a href="#">DESCRIPTION</a></li>
 +
<li><a href="#">DESIGN</a></li>
 +
<li><a href="#">PROOF</a></li>
 +
<li><a href="#">SAFTY</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">ACHIEVEMENT</a>
 +
<span class="caret"></span>
 +
<ul class="sub-nav">
 +
<li><a href="#">AWARD</a></li>
 +
<li><a href="#">MEDAL</a></li>
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 
</div>
 
</div>
  
−
<div class="column half_size">
+
<div style="position: relative;top: 60px;">
−
<h3>Best Integrated Human Practices Special Prize</h3>
+
    <img src="https://static.igem.org/mediawiki/2017/e/ea/T--SZU-China--hpbanner1.jpg" width="100%">
 +
</div>
  
−
<p>
+
<div style="position: relative;top: 60px;">
−
To compete for the <a href="https://2017.igem.org/Judging/Awards">Best Integrated Human Practices prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2017.igem.org/Judging/Judging_Form">judging form</a>.
+
<div class="container">
−
<br><br>
+
      <div class="flow_img">
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
        <div class="column">
−
</p>
+
          <div class="img_item" id="1">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-2.jpg" alt="">
 +
          </div>
 +
          <div class="img_item">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-1.jpg" alt="">
 +
          </div>
 +
        </div>
 +
        <div class="column">
 +
          <div class="img_item">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-1.jpg" alt="">
 +
          </div>
 +
          <div class="img_item">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-2.jpg" alt="">
 +
          </div>
 +
        </div>
 +
        <div class="column">
 +
          <div class="img_item">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-2.jpg" alt="">
 +
          </div>
 +
          <div class="img_item">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-1.jpg" alt="">
 +
          </div>
 +
        </div>
 +
<div class="column">
 +
          <div class="img_item">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-1.jpg" alt="">
 +
          </div>
 +
          <div class="img_item">
 +
            <div class="title_cover">
 +
              <span>Title</span>
 +
            </div>
 +
            <img src="img/hp-2.jpg" alt="">
 +
          </div>
 +
        </div>
 +
    </div>
 +
</div>
 +
<div class="text_img backgrounded">
 +
<div class="container">
 +
<div class="img text_left_img_right">
 +
<img src="img/hp-img1.png" alt="">
 +
</div>
 +
<div class="text text_left_img_right">
 +
<h1>Lorem Ipsum</h1>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="text_img">
 +
<div class="container">
 +
<div class="img">
 +
<img src="img/hp-img1.png" alt="">
 +
</div>
 +
<div class="text">
 +
<h1>Lorem Ipsum</h1>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
−
<div class="clear"></div>
+
 
−
<div class="column full_size">
+
 
−
<h5>Inspiration</h5>
+
<div class="arrow-div">
−
<p>Here are a few examples of excellent Integrated Human Practices work:</p>
+
<a id="top" href="#" title="Back to top">
−
<ul>
+
<img src="https://static.igem.org/mediawiki/2017/f/f6/T--SZU-China--arrow.png" class="arrow-img">
−
<li><a href="https://2016.igem.org/Team:INSA-Lyon/Integrated_Practices">2016 INSA Lyon</a></li>
+
</a>
−
<li><a href="https://2016.igem.org/Team:UofC_Calgary/Integrated_Practices">2016 UofC Calgary</a></li>
+
</div>
−
<li><a href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Practices">2015 Bielefeld</a></li>
+
 
−
<li><a href="https://2015.igem.org/Team:Edinburgh/Practices">2015 Edinburgh</a></li>
+
</body>
−
</ul>
+
 
 +
 
 +
 
 +
 
 
</html>
 
</html>

Revision as of 06:58, 23 October 2017

HP PAGE

Title
Title
Title
Title
Title
Title
Title
Title

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.