Difference between revisions of "Team:British Columbia/HP/Gold"

 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{British_Columbia}}
+
{{British_Columbia_2}}
−
<html>
+
{{British_Columbia_Navbar}}
 +
<html lang="en">
 +
<head>
 +
  <title>Human Practices</title>
 +
<style>
 +
.cover{
 +
  background: url("https://static.igem.org/mediawiki/2016/1/1d/T--British_Columbia--header-tree-again.JPG");
 +
  background-size: cover; background-repeat: no-repeat;
 +
}
  
 +
@media screen and (min-width: 768px) {
 +
  .cover{
 +
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0) 100%), url("https://static.igem.org/mediawiki/2016/1/1d/T--British_Columbia--header-tree-again.JPG");
 +
    background-size: cover; background-repeat: no-repeat;
 +
    background-position: 0 0, 0 -220px;
 +
  }
 +
}
  
 +
.content-wrap img{
 +
  width: 80%; height: auto;
 +
  display: table; margin: 0 auto;
 +
  top: 90px;
 +
}
  
−
<div class="column full_size">
+
/*important to set the position of these images such that the figcaption below the background image is visible*/
 +
#previous img{
 +
  width: 100%; min-width: 100%; height: auto;
 +
  transition: all 1s ease;
 +
  left: -50px;
 +
}
 +
#previous:hover img{ transform: scale(1.05); }
 +
#next img{
 +
  width: 100%; min-width: 100%; height: auto;
 +
  transition: all 1s ease; bottom: 0;
 +
}
  
 +
</style>
 +
</head>
 +
<body>
 +
<div class="cover">
 +
  <div class="container-fluid">
 +
    <div class="row" id="title">
 +
      <div class="col-sm-12">
 +
        <strong><p style="font-size: 3em">Human Practices</p></strong>
 +
      </div>
 +
    </div><!--title-->
 +
  </div><!--container-fluid-->
 +
</div><!--cover-->
  
−
<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>
+
<div id="breadcrumbs">
−
<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>
+
<strong>
−
<p>For more information, please see the <a href="https://2016.igem.org/Human_Practices">Human Practices Hub</a>.</p>
+
<a href="https://2016.igem.org/Team:British_Columbia">Home</a> /
 +
<a href="https://2016.igem.org/Team:British_Columbia/HP/Gold">Human Practices</a></strong>
 +
</div><!--#breadcrumbs-->
  
−
</div>
+
<div class="content-wrap">
 +
<img src="https://static.igem.org/mediawiki/2016/9/9c/T--British_Columbia--SciCom_achievements.png">
 +
</div><!--.content-wrap-->
 +
</body>
  
 +
<p id="read-more"><strong>Check out other parts of our project below!</strong></p>
 +
<div id="up-next">
 +
<div class="row" style="max-width: 100%; margin: 0">
 +
<div class="col-sm-6" id="previous">
 +
<a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Infographic">
 +
<img src="https://static.igem.org/mediawiki/2016/5/53/T--British_Columbia--sci_com_infographics.png"></a>
 +
<a href="https://2016.igem.org/Team:British_Columbia/Human_Practices/Infographic">
 +
<strong><figcaption>Infographic</figcaption></strong></a>
 +
</div>
 +
<div class="col-sm-6" id="next">
 +
<a href="https://2016.igem.org/Team:British Columbia/Human Practices/Interview">
 +
<img src="https://static.igem.org/mediawiki/2016/1/1d/T--British_Columbia--header-tree-again.JPG"></a>
 +
<a href="https://2016.igem.org/Team:British Columbia/Human Practices/Interview">
 +
<strong><figcaption>Interviews</figcaption></strong></a></div>
 +
</div>
  
 
</html>
 
</html>

Latest revision as of 02:16, 20 October 2016

Main CSS Navbar CSS

Human Practices

Human Practices

Check out other parts of our project below!