Team:Edinburgh/Human Practices

From 2012.igem.org

(Difference between revisions)
(Added the timeline to the Human Practices page.)
Line 13: Line 13:
#timeline{
#timeline{
width:100%;
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;
 +
}
 +
.time-interval-description p{
 +
margin:0;
 +
padding:0;
 +
}
 +
.time-interval-description{
 +
position:relative;
 +
top:-9000px;
 +
}
 +
#y2012{
 +
left:84px;
 +
}
 +
#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;
 +
width:1085;
}
}
/* middle - style */
/* middle - style */
#timeline{
#timeline{
-
border:1px solid #000;
+
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{
 +
font: normal 12px/16px tahoma, calibri, sans-serif;
 +
background:#fff;
 +
border-radius:20px;
}
}
</style>
</style>
 +
<script language="JavaScript">
 +
<!--
 +
function expand_year (x){
 +
var year = 'y'+ x;
 +
document.getElementById(year + '-description').style.top='0px';
 +
document.getElementById(year).style.backgroundColor='#fff';
 +
document.getElementById(year).style.width='200px';
 +
document.getElementById(year).style.height='auto';
 +
document.getElementById(year + '-year-a').style.color='#25476c';
 +
if(x=='2012'){
 +
document.getElementById('timeline').style.backgroundImage="url('https://static.igem.org/mediawiki/2012/5/59/Edi-timeline-1st_black.png')";
 +
}
 +
if(x=='2018'){
 +
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="page-middle">
-
<div id="page-content">
+
<div id="timeline">
-
<p style="margin-left: 50px; margin-right: 50px" align="center">
+
<div class="time-interval"  id="y2012">
-
<font size="4"><br/>
+
<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.
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.
-
</font>
 
-
</p>
 
-
<p style="margin-left: 50px; margin-right: 50px" align="left">
 
-
<font size="3">
 
-
<br />
 
-
</font>
 
</p>
</p>
-
</div><!-- /page-content -->
+
</div><!-- /human-practices--content -->
</div><!-- /page-middle -->
</div><!-- /page-middle -->
</html>
</html>

Revision as of 16:11, 15 August 2012

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

2018

Aliquam tincidunt mauris eu risus.

2025

Vestibulum auctor dapibus neque.

2035

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

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 blogspot. 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.

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