Team:Heidelberg/Project

From 2014.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
{{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}}
 +
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}}
 +
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}}
 +
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/overrides}}
 +
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/jquery}}
 +
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/bootstrapjs}}
 +
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/wikipage}}
 +
<html>
 +
<style type="text/css">
 +
#myContainer {
 +
padding:0;
 +
background-color: black;
 +
background-image: url(/wiki/images/6/6a/Heidelberg_epic_background.jpg);
 +
background-repeat: no-repeat;
 +
background-size: 100% auto;
 +
}
 +
#light:hover {
 +
color: #FF7E25;
 +
}
-
{{CSS/Main}}
+
.main {
 +
margin-top: 25px;
 +
}
 +
.middle {
 +
font-size: 3em;
 +
}
-
<html>
+
.large {
 +
font-size: 5em;
 +
font-weight: bold;
 +
}
 +
 
 +
/* Enlarge Icons on hover */
 +
.toolbox-icon:hover {
 +
transform: scale(1.15);
 +
-webkit-transform: scale(1.15);
 +
-moz-transform: scale(1.15);
 +
-o-transform: scale(1.15);
 +
-ms-transform: scale(1.15);
 +
}
 +
 
 +
.toolbox-icon {
 +
transition:transform 0.15s ease;
 +
-webkit-transition:-webkit-transform 0.15s ease;
 +
-moz-transition:-moz-transform 0.15s ease;
 +
-o-transition:-o-transform 0.15s ease;
 +
}
 +
 
 +
.ringbox{
 +
/*
 +
width: 750px;
 +
height: 600px;
 +
background-image:url('/wiki/images/d/dc/Ring_Project.png');
 +
background-size: 550px;
 +
background-repeat: no-repeat;
 +
*/
 +
position: absolute;
 +
top:260px;
 +
left:140px;
 +
height:1000px;
 +
z-index:3;
 +
}
 +
 
 +
.abstract-special {
 +
color: white;
 +
}
 +
 
 +
.abstract-special span {
 +
margin-top: 10px;
 +
margin-bottom: 10px;
 +
display: block;
 +
}
 +
 
 +
.abstract-special img {
 +
height: 15px;
 +
}
 +
 
 +
.toolbox-icon {
 +
height: 90px;
 +
position: absolute;
 +
right:-43px;
 +
bottom:-45px;
 +
}
 +
 
 +
#ring-background {
 +
width: 450px;
 +
height: auto;
 +
opacity:0.8;
 +
}
 +
 
 +
.block{
 +
display:block;
 +
text-decoration:none;
 +
color: white;
 +
}
 +
 
 +
.block:hover{
 +
text-decoration: none;
 +
}
 +
 
 +
.box {
 +
background-color: rgba(81,81,81,0.7);
 +
padding: 15px;
 +
position:relative;
 +
}
 +
 
 +
.box:hover {
 +
border:solid 2px #DE4230;
 +
padding: 13px;
 +
}
 +
 
 +
 
 +
.descr-box {
 +
width: 250px;
 +
height: 100px;
 +
position: absolute;
 +
}
 +
 
 +
.descr-box h3 {
 +
margin-top: 10px;
 +
margin-bottom: 0;
 +
text-align: left;
 +
}
 +
 
 +
.descr-box h3 span {
 +
font-size: 0.8em;
 +
}
 +
 
 +
.descr-box div {
 +
border-right: solid white 2px;
 +
border-top: solid white 2px;
 +
padding-right:43px;
 +
}
 +
 
 +
.descr-box span {
 +
display: block;
 +
}
-
<!--main content -->
+
#circ-box {
-
<table width="70%" align="center">
+
right: 160px;
 +
top: -120px;
 +
}
 +
#circ-box img {
 +
bottom: -130px;
 +
height: 120px;
 +
right: -57px;
 +
}
-
<!--welcome box -->
+
#circ-box div {
-
<tr>
+
height: 114px;
-
<td style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor=#FF404B>
+
}
-
<h1 >WELCOME TO iGEM 2014! </h1>
+
-
<p>Your team has been approved and you are ready to start the iGEM season!
+
-
<br>On this page you can document your project, introduce your team members, document your progress <br> and share your iGEM experience with the rest of the world! </p>
+
-
<br>
+
-
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:Heidelberg/Project&action=edit"style="color:#FFFFFF"> Click here  to edit this page!</a> </p>
+
-
</td>
+
-
</tr>
+
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
#oligo-box {
-
<!-- end welcome box -->
+
left: -100px;
-
<tr>
+
top: -10px;
 +
width: 200px;
 +
}
-
<!--navigation menu -->
+
#onoff-box {
-
<td align="center" colspan="3">
+
left: -105px;
 +
top: 120px;
 +
width: 150px;
 +
}
-
<table  width="100%">
+
#fusion-box {
-
<tr heigth="15px"></tr>
+
left: -100px;
-
<tr heigth="75px">
+
top: 330px;
 +
width: 190px;
 +
}
 +
#fusion-box img {
 +
top: -16px;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
#fusion-box div {
-
<a href="https://2014.igem.org/Team:Heidelberg"style="color:#000000">Home </a> </td>
+
border-right: none;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
#purification-box {
-
<a href="https://2014.igem.org/Team:Heidelberg/Team"style="color:#000000"> Team </a> </td>
+
left: 20px;
 +
top: 445px;
 +
width: 200px;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px"  onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
#purification-box img {
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=Heidelberg"style="color:#000000"> Official Team Profile </a></td>
+
top: -70px;
 +
}
-
<td style="border:1px solid black" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
#purification-box div {
-
<a href="https://2014.igem.org/Team:Heidelberg/Project"style="color:#000000"> Project</a></td>
+
border-top: none;
 +
border-bottom: solid white 2px;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
#abstract-content {
-
<a href="https://2014.igem.org/Team:Heidelberg/Parts"style="color:#000000"> Parts</a></td>
+
display:none;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
.graphicalAbstract {
-
<a href="https://2014.igem.org/Team:Heidelberg/Modeling"style="color:#000000"> Modeling</a></td>
+
  background-image:url('/wiki/images/f/fa/Heidelberg_Project_Background.png');
 +
  background-size: 100% auto;
 +
  background-repeat: no-repeat;
 +
  position:relative;
 +
  z-index: 1;
 +
  height:1000px;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
#redOverlay {
-
<a href="https://2014.igem.org/Team:Heidelberg/Notebook"style="color:#000000"> Notebook</a></td>
+
  position:absolute;
 +
  width:100%;
 +
  height:100%;
 +
  left:0;
 +
  top:0;
 +
  display:none;
 +
  background-image:url('/wiki/images/5/51/Heidelberg_project_red_overlay.png');
 +
  background-size: 100% auto;
 +
  background-repeat: no-repeat;
 +
  z-index:2;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
#lightning {
-
<a href="https://2014.igem.org/Team:Heidelberg/Safety"style=" color:#000000"> Safety </a></td>
+
z-index: 3;
 +
position:absolute;
 +
top: 610px;
 +
left: 460px;
 +
color:white;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
 
-
<a href="https://2014.igem.org/Team:Heidelberg/Attributions"style="color:#000000"> Attributions </a></td>
 
 +
#calibrated {
 +
z-index: 3;
 +
position:absolute;
 +
left: 0;
 +
top: 0;
 +
color: white;
 +
}
-
<td align ="center"> <a href="https://2014.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
#screened {
-
</tr>
+
z-index: 3;
-
</table>
+
position:absolute;
 +
right: 0;
 +
top: 0;
 +
color: white;
 +
}
-
</tr>
+
#dnmt1-img {
-
</tr>
+
position: absolute;
-
</td>
+
height: 155px;
 +
right: 15px;
 +
z-index:4;
 +
}
-
<tr> <td colspan="3"  height="15px"> </td></tr>
+
a:hover #dnmt1-img {
-
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
+
right: 13px;
-
<tr> <td colspan="3"  height="5px"> </td></tr>
+
}
 +
#dnmt1-box {
 +
right: 40px;
 +
top: 340px;
 +
position: absolute;
 +
}
 +
#xylanase-box {
 +
width:250px;
 +
top: 556px;
 +
right:40px;
 +
position:absolute;
 +
}
-
<!--Project content  -->
+
#xylanase-img {
-
<tr><td > <h3> Project Description </h3></td>
+
height: 140px;
-
<td ></td >
+
    position: absolute;
-
<td > <h3> Content</h3></td>
+
    right: 15px;
-
</tr>
+
}
-
<tr>
+
a:hover #xylanase-img {
-
<td width="45%"  valign="top">
+
right: 13px;
-
<p>Tell us more about your project.  Give us background.  Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs) </p>
+
}
-
<br>
+
-
<h3>References </h3>
+
-
<p>
+
-
iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you though about your project and what works inspired you. </p>
+
-
</td>
+
-
<td></td>
+
#toolbox-text{
-
<td  width="45%"  valign="top">
+
position: absolute;
-
<p> You can use these subtopics to further explain your project</p>
+
top: 145px;
 +
right: -135px;
 +
font-size: 5em;
 +
line-height: 70px;
 +
font-weight: bold;
 +
}
-
<ol>
+
#linker-links {
-
<li>Overall project summary</li>
+
position: absolute;
-
<li>Project Details</li>
+
width: 405px;
-
<li>Materials and Methods</li>
+
right: 60px;
-
<li>The Experiments</li>
+
top: 35px;
-
<li>Results</li>
+
height: 240px;
-
<li>Data analysis</li>
+
}
-
<li>Conclusions</li>
+
-
</ol>
+
-
<p>
 
-
It's important for teams to describe all the creativity that goes into an iGEM project, along with all the great ideas your team will come up with over the course of your work.
 
-
</p>
 
-
<p>
+
</style>
-
It's also important to clearly describe your achievements so that judges will know what you tried to do and where you succeeded. Please write your project page such that what you achieved is easy to distinguish from what you attempted.  
+
<div id="myContainer" class="container">
-
</p>
+
</html>
 +
{{:Team:Heidelberg/Templates/BootstrapNav|
 +
red=|
 +
white=true|
 +
red-logo=true|
 +
white-logo=|
 +
header-bg=|
 +
header-img=|
 +
title=
 +
}}
 +
<html>
 +
<div class="container main" style="color: white;">
 +
<div id="abstract-dropdown" class="row abstract-special dark-grey">
 +
<div class="col-lg-offset-1 col-lg-2">
 +
<h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/>&nbsp;Abstract</h4>
 +
</div>
 +
<div class="col-lg-9">
 +
<span>Click to read full abstract</span>
 +
</div>
 +
<div id="abstract-content" class="col-lg-12" >
 +
Placeholder
 +
</div>
 +
</div>
 +
<div class="graphicalAbstract">
 +
    <div id="redOverlay"></div>
 +
    <div style="z-index:3;position:relative;">
 +
    <div id="linker-links">
 +
    <a href="#" class="block" id="calibrated">
 +
<img style="height:60px;display: inline-block;" src="/wiki/images/e/ea/Heidelberg_Project_Computer.png">
 +
<span style="position: relative;top: 10px;display: inline-block;">
 +
calibrated<br>
 +
<span class="red-text">in silico</span></span>
 +
</a>
 +
<a href="#" class="block" id="screened">
 +
<span style="position: relative;top:10px;display: inline-block;">
 +
screened <span class="red-text">in vitro</span><br>
 +
with lysozyme</span>
 +
<img style="height:60px; display:inline-block;" src="/wiki/images/d/df/Heidelberg_Lysozyme.png" />
 +
</a>
 +
<a href="#" class="block" style="bottom:0; left:0; position:absolute;">
 +
<span class="red-text" >circularize</span> it<br>
 +
with calculated linkers
 +
</a>
 +
    </div>
 +
<div class="ringbox">
 +
<img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" />
 +
<div id="circ-box" class="descr-box">
 +
<a href="/Team:Heidelberg/Toolbox/Circularization">
 +
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon"/>
 +
</a>
 +
<h3>CIRCULARIZATION</h3>
 +
<div><span>Create a linker with our crowd computing <a href="/Team:Heidelberg/Software/Linker-Software">software</a> and make your protein heat stable</span></div>
 +
</div>
 +
<div id="oligo-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Oligomerization"><img src="/wiki/images/4/40/Oligomerization.png" id="oligo-icon" class="toolbox-icon"/></a><h3><span>OLIGOMERIZATION</span></h3><div><span>Fuse multiple Proteins or Domains using Inteins</span></div>
 +
</div>
 +
<div id="fusion-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Fusion"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" id="fusion-icon" class="toolbox-icon"/></a><h3><span>FUSION</span></h3><div><span>Fuse two Proteins or Domains together using Inteins</span></div>
 +
</div>
 +
<div id="onoff-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/OnOff"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" id="onoff-icon" class="toolbox-icon"/></a><h3><span>ON/OFF</span></h3><div><span>Activate or deactivate Proteins using Inteins</span></div></div>
 +
<div id="purification-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Purification"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" id="purification-icon" class="toolbox-icon"/></a><div><h3><span>PURIFICATION</span></h3></div><span>Placeholder</span></div>
 +
<div id="toolbox-text">
 +
the intein<br>
 +
<span>toolbox<span>
 +
</div>
 +
</div>
 +
<a href="#" clas="block" id="lightning">
 +
<img style="height:110px;display: inline-block;" src="/wiki/images/8/83/Heidelberg_Project_Lightning.png">
 +
<span style="position: relative;top: 20px;display: inline-block;">
 +
inducable via<br>
 +
<span style="font-weight:bold;position: relative;left: -18px;" class="red-text">light induction</span></span>
 +
</a>
 +
<a href="#" class="block box" style="width:250px;" id="dnmt1-box">
 +
<img id="dnmt1-img" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png">
 +
<span style="position:relative; z-index:5;" class="block">
 +
<span style="font-size:1.5em;">
 +
<span class="red-text">Heat-stable</span><br>  circular <br><span style="font-weight:bold;">Methyltransferase</span>
 +
</span><br>
 +
<span style="font-size: 2.5em; text-align:right;line-height: 35px;">
 +
<span class="red-text">PCR</span><br>
 +
2.0
 +
</span>
 +
</span>
 +
</a>
 +
<a href="#" class="block box" id="xylanase-box">
 +
<img id="xylanase-img" src="/wiki/images/8/82/Heidelberg_Project_Xylanase.png">
 +
<span style="position:relative; z-index:5;" class="block">
 +
<span style="font-size:1.5em;">
 +
<span class="red-text">Heat-stable</span><br>  circular <br><span style="font-weight:bold;">Xylanase</span>
 +
</span><br>
 +
<span style="font-size: 2.5em; text-align:right;">
 +
<span class="">Industry</span>
 +
</span>
 +
</span>
 +
</a>
 +
<div class="clearfix"></div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
if(window.location.hash) {
 +
  var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
 +
  if(hash == "Abstract")
 +
      $('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");});
 +
}
 +
$('#abstract-dropdown').click(function() {
 +
if($('#abstract-content').css("display") == 'none'){
 +
$('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");});
 +
}
 +
else{
 +
$('#abstract-content').slideUp(400, function() {$('#dropdownImg').attr("src", "/wiki/images/7/70/Heidelberg_Abstract-dropdown.png");});
 +
}
 +
});
-
</td>
+
$('#linker-links').mouseenter(function(){
 +
$('#redOverlay').stop(true);
 +
$('#redOverlay').fadeIn();
 +
});
-
</tr>
+
$('#linker-links').mouseleave(function(){
 +
$('#redOverlay').stop(true);
 +
$('#redOverlay').fadeOut();
 +
});
-
</table>
+
});
 +
</script>
</html>
</html>

Revision as of 15:45, 12 October 2014

Retrieved from "http://2014.igem.org/Team:Heidelberg/Project"