Team:Heidelberg/testing/Project new

From 2014.igem.org

(Difference between revisions)
 
(44 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Heidelberg/Templates/MainTemplate}}
+
{{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}}
Line 14: Line 14:
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 100% auto;
background-size: 100% auto;
-
 
}
}
Line 62: Line 61:
left:140px;
left:140px;
height:1000px;
height:1000px;
 +
z-index:3;
}
}
Line 79: Line 79:
.toolbox-icon {
.toolbox-icon {
-
height: 70px;
+
height: 90px;
position: absolute;
position: absolute;
-
right:-33px;
+
right:-43px;
 +
bottom:-45px;
}
}
#ring-background {
#ring-background {
-
position:absolute;
 
-
top:0;
 
-
left:0;
 
width: 450px;
width: 450px;
height: auto;
height: auto;
Line 125: Line 123:
margin-bottom: 0;
margin-bottom: 0;
text-align: left;
text-align: left;
 +
}
 +
 +
.descr-box h3 span {
 +
font-size: 0.8em;
}
}
.descr-box div {
.descr-box div {
border-right: solid white 2px;
border-right: solid white 2px;
-
border-bottom: solid white 2px;
+
border-top: solid white 2px;
-
padding-right:33px;
+
padding-right:43px;
}
}
Line 138: Line 140:
#circ-box {
#circ-box {
-
right: 0;
+
right: 160px;
-
top: 80px;
+
top: -120px;
}
}
 +
#circ-box img {
#circ-box img {
-
top:-45px;
+
bottom: -130px;
 +
height: 120px;
 +
right: -57px;
 +
}
 +
 
 +
#circ-box div {
 +
height: 114px;
}
}
#oligo-box {
#oligo-box {
-
right: 25px;
+
left: -100px;
-
top: 200px;
+
top: -10px;
 +
width: 200px;
 +
}
 +
 
 +
#onoff-box {
 +
left: -105px;
 +
top: 120px;
 +
width: 150px;
}
}
#fusion-box {
#fusion-box {
-
right: 85px;
+
left: -100px;
-
top: 300px;
+
top: 330px;
 +
width: 190px;
}
}
-
#onoff-box {
+
#fusion-box img {
-
right: 180px;
+
top: -16px;
-
top: 390px;
+
}
 +
 
 +
#fusion-box div {
 +
border-right: none;
}
}
#purification-box {
#purification-box {
-
left: 190px;
+
left: 20px;
-
top: 465px;
+
top: 445px;
 +
width: 200px;
 +
}
 +
 
 +
#purification-box img {
 +
top: -70px;
 +
}
 +
 
 +
#purification-box div {
 +
border-top: none;
 +
border-bottom: solid white 2px;
}
}
Line 184: Line 214:
   left:0;
   left:0;
   top:0;
   top:0;
-
   opacity:0;
+
   display:none;
   background-image:url('/wiki/images/5/51/Heidelberg_project_red_overlay.png');
   background-image:url('/wiki/images/5/51/Heidelberg_project_red_overlay.png');
   background-size: 100% auto;
   background-size: 100% auto;
 +
  background-repeat: no-repeat;
   z-index:2;
   z-index:2;
}
}
 +
 +
#lightning {
 +
z-index: 3;
 +
position:absolute;
 +
top: 610px;
 +
left: 460px;
 +
color:white;
 +
}
 +
 +
 +
#calibrated {
 +
z-index: 3;
 +
position:absolute;
 +
left: 0;
 +
top: 0;
 +
color: white;
 +
}
 +
 +
#screened {
 +
z-index: 3;
 +
position:absolute;
 +
right: 0;
 +
top: 0;
 +
color: white;
 +
}
 +
 +
#dnmt1-img {
 +
position: absolute;
 +
height: 155px;
 +
right: 15px;
 +
z-index:4;
 +
}
 +
 +
a:hover #dnmt1-img {
 +
right: 13px;
 +
}
 +
 +
#dnmt1-box {
 +
right: 40px;
 +
top: 340px;
 +
position: absolute;
 +
}
 +
 +
#xylanase-box {
 +
width:250px;
 +
top: 556px;
 +
right:40px;
 +
position:absolute;
 +
}
 +
 +
#xylanase-img {
 +
height: 140px;
 +
    position: absolute;
 +
    right: 15px;
 +
}
 +
 +
a:hover #xylanase-img {
 +
right: 13px;
 +
}
 +
 +
#toolbox-text{
 +
position: absolute;
 +
top: 145px;
 +
right: -135px;
 +
font-size: 5em;
 +
line-height: 70px;
 +
font-weight: bold;
 +
}
 +
 +
#linker-links {
 +
position: absolute;
 +
width: 405px;
 +
right: 60px;
 +
top: 35px;
 +
height: 240px;
 +
}
 +
</style>
</style>
Line 217: Line 325:
<div class="graphicalAbstract">
<div class="graphicalAbstract">
     <div id="redOverlay"></div>
     <div id="redOverlay"></div>
-
     <div style="z-index:3;">
+
     <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">
<div class="ringbox">
<img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" />
<img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" />
Line 224: Line 350:
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon"/>
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon"/>
</a>
</a>
-
<div><h3>CIRCULARIZATION</h3></div>
+
<h3>CIRCULARIZATION</h3>
-
<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><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>
-
<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>OLIGOMERIZATION</h3><div><span>Fuse multiple Proteins or Domains using Inteins</span></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>
-
<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>FUSION</h3><div><span>Fuse two Proteins or Domains together using Inteins</span></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>
-
<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>ON/OFF</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>PURIFICATION</h3></div><span></span></div>
 
</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 class="clearfix"></div>
-
</div>
 
-
</div>
 
-
<div class="row" style="margin-top:60px;">
 
-
<a href="#" class="col-lg-4 block grey-text" style="font-size:2em; text-align:right; position:relative; top: -50px;">
 
-
taking it to<br />
 
-
the next level:<br />
 
-
Inducable <br />
 
-
via <span class="red-text">light induction</span>
 
-
</a>
 
-
<a href="#" class="col-lg-7 col-lg-offset-1 block box">
 
-
<img style="position:absolute;height: 165px; left: 15px;top: -50px;" src="/wiki/images/8/82/Heidelberg_Project_Xylanase.png" />
 
-
<span class="col-lg-8 col-lg-offset-4 block">
 
-
<span class="col-lg-6" style="font-size:1.5em; display:block;">
 
-
<span class="red-text">Heat-stable</span>  circular <br /><span style="font-weight:bold;">Xylanase</span>
 
-
</span>
 
-
<span class="col-lg-6 block" style="font-size:2.5em; text-align:right;">
 
-
<span class="red-text">PCR</span><br />
 
-
2.0
 
-
</span>
 
-
</span>
 
-
<span class="clearfix block"></span>
 
-
</a>
 
</div>
</div>
</div>
</div>
 +
</div>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
Line 275: Line 413:
}
}
});
});
 +
 +
$('#linker-links').mouseenter(function(){
 +
$('#redOverlay').stop(true);
 +
$('#redOverlay').fadeIn();
 +
});
 +
 +
$('#linker-links').mouseleave(function(){
 +
$('#redOverlay').stop(true);
 +
$('#redOverlay').fadeOut();
 +
});
 +
});
});
</script>
</script>
</html>
</html>

Latest revision as of 15:44, 12 October 2014

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