Team:Edinburgh/Human Practices

From 2012.igem.org

(Difference between revisions)
(Added the timeline to the Human Practices page.)
(Adding nav-menu)
Line 10: Line 10:
color: #cad8e5;
color: #cad8e5;
}
}
-
/* middle - structure */
+
#page-content{
-
#timeline{
+
background-color:#fff;
-
width:100%;
+
-
height: 100px;
+
border:1px solid #ccc;
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 */
 
-
#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{
 
-
font: normal 12px/16px tahoma, calibri, sans-serif;
 
-
background:#fff;
 
-
border-radius:20px;
 
}
}
</style>
</style>
<script language="JavaScript">
<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-->
//End of code-->
</script>
</script>
<div id="page-middle">
<div id="page-middle">
-
<div id="timeline">
+
<div id="page-navigation">
-
<div class="time-interval"  id="y2012">
+
<ul>
-
<div class="time-interval-year" id="y2012-year">
+
<li>
-
<a id="y2012-year-a" href="#"
+
<a href="#">DIY bio</a>
-
onclick=""
+
</li>
-
onmouseover="expand_year('2012');"
+
<li>
-
onmouseout="collapse_year('2012');">
+
<a href="#">Crowdfunding</a>
-
2012
+
</li>
-
</a>
+
<li>
-
</div>
+
<a href="#">Blog</a>
-
<div class="time-interval-description" id="y2012-description">
+
</li>
-
<p>
+
<li>
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
<a href="#">DIY bio</a>
-
</p>
+
</li>
-
</div>
+
</ul>
-
</div>
+
</div><!-- /page-navigation -->
-
<div class="time-interval" id="y2018">
+
<div id="page-content">
-
<div class="time-interval-year">
+
<div class="text">
-
<a id="y2018-year-a" href="#"
+
<p class="normal-text">
-
onclick=""
+
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="#">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.
-
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>
</p>
-
</div><!-- /human-practices--content -->
+
</div><!-- /text -->
 +
</div><!-- /page-content -->
</div><!-- /page-middle -->
</div><!-- /page-middle -->
</html>
</html>

Revision as of 13:02, 11 September 2012

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"