Team:Edinburgh/Human Practices

From 2012.igem.org

(Difference between revisions)
(Added the timeline to the Human Practices page.)
 
(11 intermediate revisions not shown)
Line 5: Line 5:
<html>
<html>
<style type="text/css">
<style type="text/css">
-
/*Some changes in the header*/
+
/* header edit */
-
#human-practices-page a:hover{
+
#human-practices-page a{
-
cursor: default;
+
-
color: #cad8e5;
+
-
}
+
-
/* middle - structure */
+
-
#timeline{
+
-
width:100%;
+
-
height: 100px;
+
-
border:1px solid #ccc;
+
-
position:relative;
+
-
}
+
-
.time-interval{
+
-
float:left;
+
-
position:absolute;
+
-
top:25px;
+
-
width:100px;
+
-
height:50px;
+
-
border:1px solid #ccc;
+
-
}
+
-
.time-interval-year{
+
-
width:100px;
+
-
height:50px;
+
-
}
+
-
.time-interval-year{
+
-
text-align:center;
+
-
}
+
-
.time-interval-year a{
+
display:block;
display:block;
 +
background-color: #f2f2f2;
 +
border-top-right-radius: 10px;
 +
border-top-left-radius: 10px;
}
}
-
.time-interval-description p{
+
#human-practices-page a,
-
margin:0;
+
#human-practices-page a:visited{
-
padding:0;
+
color: #000;
}
}
-
.time-interval-description{
+
#human-practices-page a:hover{
-
position:relative;
+
cursor: default;
-
top:-9000px;
+
color: #000;
}
}
-
#y2012{
+
/* actual page */
-
left:84px;
+
#page-content{
-
}
+
background-color:#fff;
-
#y2018{
+
-
left:335px;
+
-
}
+
-
#y2025{
+
-
left:585px;
+
-
}
+
-
#y2035{
+
-
left:837px;
+
-
}
+
-
.time-interval-description p{
+
-
padding:20px;
+
-
}
+
-
#human-practices-content{
+
-
margin-top:20px;
+
-
padding:20px;
+
border:1px solid #ccc;
border:1px solid #ccc;
-
width:1085;
 
-
}
 
-
/* middle - style */
 
-
#timeline{
 
-
background-image:url("https://static.igem.org/mediawiki/2012/0/09/Edi-timeline-all_grey.png");
 
-
background-colour:#f2f2f2;
 
-
background-repeat:no-repeat;
 
-
border-radius:20px;
 
-
}
 
-
.time-interval{
 
-
border-top-right-radius:10px;
 
-
border-bottom-right-radius:10px;
 
-
}
 
-
.time-interval-year a{
 
-
text-decoration:none;
 
-
font: bold 16px/50px tahoma, calibri, sans-serif;
 
-
color:#ccc;
 
-
}
 
-
.time-interval-description p{
 
-
font: normal 12px/16px tahoma, calibri, sans-serif;
 
}
}
-
#human-practices-content{
+
#venn-diagram{
-
font: normal 12px/16px tahoma, calibri, sans-serif;
+
width:500px;
-
background:#fff;
+
padding-left:160px;
-
border-radius:20px;
+
}
}
</style>
</style>
-
<script language="JavaScript">
+
</html>
-
<!--
+
 
-
function expand_year (x){
+
{{:Team:Edinburgh/Human_Practices/navigation}}
-
var year = 'y'+ x;
+
 
-
document.getElementById(year + '-description').style.top='0px';
+
<html>
-
document.getElementById(year).style.backgroundColor='#fff';
+
<div id="page-content">
-
document.getElementById(year).style.width='200px';
+
<div class="text">
-
document.getElementById(year).style.height='auto';
+
<p style="font-size:14px;line-height:20px;" class="normal-text">
-
document.getElementById(year + '-year-a').style.color='#25476c';
+
This diagram shows how our human practices work contextualises our project. We looked at several overlapping areas to find out where our project sits within synthetic biology research, how it responds to legislation and public opinion and how it might be useful in the future.
-
if(x=='2012'){
+
</p>
-
document.getElementById('timeline').style.backgroundImage="url('https://static.igem.org/mediawiki/2012/5/59/Edi-timeline-1st_black.png')";
+
<img id="venn-diagram" src="https://static.igem.org/mediawiki/2012/c/c3/Human-Practices-Diagram.jpg">
-
}
+
</div><!-- /text -->
-
if(x=='2018'){
+
</div><!-- /page-content -->
-
document.getElementById('timeline').style.backgroundImage="url('https://static.igem.org/mediawiki/2012/5/54/Edi-timeline-2nd_black.png')";
+
-
}
+
-
if(x=='2025'){
+
-
document.getElementById('timeline').style.backgroundImage="url('https://static.igem.org/mediawiki/2012/e/e6/Edi-timeline-3rd_black.png')";
+
-
}
+
-
if(x=='2035'){
+
-
document.getElementById('timeline').style.backgroundImage="url('https://static.igem.org/mediawiki/2012/8/8b/Edi-timeline-4th_black.png')";
+
-
}
+
-
}
+
-
function collapse_year (x){
+
-
var year = 'y'+ x;
+
-
document.getElementById(year + '-description').style.top='-9000px';
+
-
document.getElementById(year).style.backgroundColor='#f2f2f2';
+
-
document.getElementById(year).style.width='100px';
+
-
document.getElementById(year).style.height='50px';
+
-
document.getElementById(year + '-year-a').style.color='#ccc';
+
-
document.getElementById('timeline').style.backgroundImage="url('https://static.igem.org/mediawiki/2012/0/09/Edi-timeline-all_grey.png')";
+
-
}
+
-
//End of code-->
+
-
</script>
+
-
<div id="page-middle">
+
-
<div id="timeline">
+
-
<div class="time-interval"  id="y2012">
+
-
<div class="time-interval-year" id="y2012-year">
+
-
<a id="y2012-year-a" href="#"
+
-
onclick=""
+
-
onmouseover="expand_year('2012');"
+
-
onmouseout="collapse_year('2012');">
+
-
2012
+
-
</a>
+
-
</div>
+
-
<div class="time-interval-description" id="y2012-description">
+
-
<p>
+
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
-
</p>
+
-
</div>
+
-
</div>
+
-
<div class="time-interval" id="y2018">
+
-
<div class="time-interval-year">
+
-
<a id="y2018-year-a" href="#"
+
-
onclick=""
+
-
onmouseover="expand_year('2018');"
+
-
onmouseout="collapse_year('2018');">
+
-
2018
+
-
</a>
+
-
</div>
+
-
<div class="time-interval-description" id="y2018-description">
+
-
<p>
+
-
Aliquam tincidunt mauris eu risus.
+
-
</p>
+
-
</div>
+
-
</div>
+
-
<div class="time-interval" id="y2025">
+
-
<div class="time-interval-year">
+
-
<a id="y2025-year-a" href="#"
+
-
onclick=""
+
-
onmouseover="expand_year('2025');"
+
-
onmouseout="collapse_year('2025');">
+
-
2025
+
-
</a>
+
-
</div>
+
-
<div class="time-interval-description" id="y2025-description">
+
-
<p>
+
-
Vestibulum auctor dapibus neque.
+
-
</p>
+
-
</div>
+
-
</div>
+
-
<div class="time-interval" id="y2035">
+
-
<div class="time-interval-year">
+
-
<a id="y2035-year-a" href="#"
+
-
onclick=""
+
-
onmouseover="expand_year('2035');"
+
-
onmouseout="collapse_year('2035');">
+
-
2035
+
-
</a>
+
-
</div>
+
-
<div class="time-interval-description" id="y2035-description">
+
-
<p>
+
-
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
+
-
</p>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div id="human-practices-content">
+
-
<p>
+
-
As part of our human practices project we are writing a science-fiction blog inspired by technological advances in the world of synthetic biology. We're still working on the layout. You can also view the posts on <a href="http://synthbiopunk.blogspot.co.uk/">blogspot</a>. The blog is written from the perspectives of different people in the world of synthetic biology where the petri dish is half full or half empty.
+
-
</p>
+
-
</div><!-- /human-practices--content -->
+
</div><!-- /page-middle -->
</div><!-- /page-middle -->
</html>
</html>

Latest revision as of 00:21, 27 September 2012

This diagram shows how our human practices work contextualises our project. We looked at several overlapping areas to find out where our project sits within synthetic biology research, how it responds to legislation and public opinion and how it might be useful in the future.

Retrieved from "http://2012.igem.org/Team:Edinburgh/Human_Practices"