Team:Heidelberg/testing/Project new

From 2014.igem.org

(Difference between revisions)
 
(53 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 35: Line 35:
/* Enlarge Icons on hover */
/* Enlarge Icons on hover */
.toolbox-icon:hover {
.toolbox-icon:hover {
-
  transform: scale(1.15);
+
transform: scale(1.15);
-
  -webkit-transform: scale(1.15);
+
-webkit-transform: scale(1.15);
-
  -moz-transform: scale(1.15);
+
-moz-transform: scale(1.15);
-
  -o-transform: scale(1.15);
+
-o-transform: scale(1.15);
-
  -ms-transform: scale(1.15);
+
-ms-transform: scale(1.15);
}
}
Line 50: Line 50:
.ringbox{
.ringbox{
 +
/*
width: 750px;
width: 750px;
height: 600px;
height: 600px;
-
/*
 
background-image:url('/wiki/images/d/dc/Ring_Project.png');
background-image:url('/wiki/images/d/dc/Ring_Project.png');
background-size: 550px;
background-size: 550px;
background-repeat: no-repeat;
background-repeat: no-repeat;
*/
*/
-
position: relative;
+
position: absolute;
-
float: left;
+
top:260px;
 +
left:140px;
 +
height:1000px;
 +
z-index:3;
}
}
Line 73: Line 76:
.abstract-special img {
.abstract-special img {
height: 15px;
height: 15px;
-
}
 
-
 
-
.graphicalAbstract {
 
-
  background-image:url('/wiki/images/f/fa/Heidelberg_Project_Background.png');
 
-
  background-size: 100% auto;
 
-
  background-repeat: no-repeat;
 
-
  position:relative;
 
-
  z-index: 1;
 
-
}
 
-
 
-
#redOverlay {
 
-
  position:absolute;
 
-
  width:100%;
 
-
  height:100%;
 
-
  left:0;
 
-
  top:0;
 
-
  opacity:0;
 
-
  background-image:url('/wiki/images/5/51/Heidelberg_project_red_overlay.png');
 
-
  z-index:2;
 
}
}
.toolbox-icon {
.toolbox-icon {
-
height: 70px;
+
height: 90px;
position: absolute;
position: absolute;
-
top:-45px;
+
right:-43px;
-
left:-33px;
+
bottom:-45px;
}
}
#ring-background {
#ring-background {
-
position:absolute;
 
-
top:0;
 
-
left:0;
 
width: 450px;
width: 450px;
height: auto;
height: auto;
 +
opacity:0.8;
}
}
.block{
.block{
-
  display:block;
+
display:block;
-
  text-decoration:none;
+
text-decoration:none;
-
  color: white;
+
color: white;
}
}
.block:hover{
.block:hover{
-
  text-decoration: none;
+
text-decoration: none;
}
}
.box {
.box {
-
  background-color: rgba(81,81,81,0.7);
+
background-color: rgba(81,81,81,0.7);
-
  padding: 15px;
+
padding: 15px;
-
  position:relative;
+
position:relative;
}
}
.box:hover {
.box:hover {
-
  border:solid 2px #DE4230;
+
border:solid 2px #DE4230;
-
  padding: 13px;
+
padding: 13px;
}
}
Line 140: Line 122:
margin-top: 10px;
margin-top: 10px;
margin-bottom: 0;
margin-bottom: 0;
-
text-align: right;
+
text-align: left;
 +
}
 +
 
 +
.descr-box h3 span {
 +
font-size: 0.8em;
}
}
.descr-box div {
.descr-box div {
-
border-left: solid white 2px;
+
border-right: solid white 2px;
-
border-bottom: solid white 2px;
+
border-top: solid white 2px;
 +
padding-right:43px;
}
}
.descr-box span {
.descr-box span {
-
  margin-left: 40px;
+
display: block;
-
  display: block;
+
}
}
#circ-box {
#circ-box {
-
right: 0;
+
right: 160px;
-
top: 80px;
+
top: -120px;
 +
}
 +
 
 +
#circ-box img {
 +
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 181: Line 198:
display:none;
display:none;
}
}
 +
 +
.graphicalAbstract {
 +
  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;
 +
}
 +
 +
#redOverlay {
 +
  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;
 +
}
 +
 +
#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>
-
  <div id="myContainer" class="container">
+
<div id="myContainer" class="container">
</html>
</html>
-
    {{:Team:Heidelberg/Templates/BootstrapNav|
+
{{:Team:Heidelberg/Templates/BootstrapNav|
-
      red=|
+
red=|
-
      white=true|
+
white=true|
-
      red-logo=true|
+
red-logo=true|
-
      white-logo=|
+
white-logo=|
-
      header-bg=|
+
header-bg=|
-
      header-img=|
+
header-img=|
-
      title=
+
title=
-
    }}
+
}}
-
    <html>
+
<html>
-
    <div class="container" style="color: white;">
+
<div class="container main" style="color: white;">
-
      <div id="abstract-dropdown" class="row abstract-special dark-grey">
+
<div id="abstract-dropdown" class="row abstract-special dark-grey">
-
        <div class="col-lg-offset-1 col-lg-2">
+
<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>
+
<h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/>&nbsp;Abstract</h4>
-
        </div>
+
</div>
-
        <div class="col-lg-9">
+
<div class="col-lg-9">
-
          <span>Click to read full abstract</span>
+
<span>Click to read full abstract</span>
-
        </div>
+
</div>
-
        <div id="abstract-content" class="col-lg-12" >
+
<div id="abstract-content" class="col-lg-12" >
-
          Placeholder
+
Placeholder
-
        </div>
+
</div>
-
      </div>
+
</div>
-
    </div>
+
<div class="graphicalAbstract">
-
    <div class="container grapicalAbstract">
+
    <div id="redOverlay"></div>
-
    <div id="redOverlay"></div>
+
    <div style="z-index:3;position:relative;">
-
      <div style="z-index:3">
+
    <div id="linker-links">
-
        <div class="ringbox">
+
    <a href="#" class="block" id="calibrated">
-
          <img src="/wiki/images/d/dc/Ring_Project.png" id="ring-background" />
+
<img style="height:60px;display: inline-block;" src="/wiki/images/e/ea/Heidelberg_Project_Computer.png">
-
          <div id="circ-box" class="descr-box">
+
<span style="position: relative;top: 10px;display: inline-block;">
-
            <a href="/Team:Heidelberg/Toolbox/Circularization">
+
calibrated<br>
-
              <img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon"/>
+
<span class="red-text">in silico</span></span>
-
            </a>
+
</a>
-
            <div><h3>CIRCULARIZATION</h3></div>
+
<a href="#" class="block" id="screened">
-
            <span>Create a linker with our crowd computing <a href="/Team:Heidelberg/Software/Linker-Software">software</a> and make your protein heat stable</span>
+
<span style="position: relative;top:10px;display: inline-block;">
-
          </div>
+
screened <span class="red-text">in vitro</span><br>
-
          <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><div><h3>OLIGOMERIZATION</h3></div><span>Fuse multiple Proteins or Domains using Inteins</span>
+
with lysozyme</span>
-
          </div>
+
<img style="height:60px; display:inline-block;" src="/wiki/images/d/df/Heidelberg_Lysozyme.png" />
-
          <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><div><h3>FUSION</h3></div><span>Fuse two Proteins or Domains together using Inteins</span>
+
</a>
-
          </div>
+
<a href="#" class="block" style="bottom:0; left:0; position:absolute;">
-
          <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><div><h3>ON/OFF</h3></div><span>Activate or deactivate Proteins using Inteins</span></div>
+
<span class="red-text" >circularize</span> it<br>
-
          <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>
+
with calculated linkers
-
        </div>
+
</a>
-
        <div style="width:390px; float:left;">
+
    </div>
-
          <span style="text-align: right; display:block; font-size: 2.5em;">
+
<div class="ringbox">
-
            <span class="grey-text">Modify</span> your protein<br />
+
<img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" />
-
            <span class="grey-text">post-</span>translationally<br />
+
<div id="circ-box" class="descr-box">
-
            <span class="grey-text">easy</span> and <span class="grey-text">standardized</span>
+
<a href="/Team:Heidelberg/Toolbox/Circularization">
-
            <br /><br />
+
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon"/>
-
            WITH THE POWER<br />
+
</a>
-
            of <span class="red-text">INTEIN SPLICING</span>
+
<h3>CIRCULARIZATION</h3>
-
            <br /><br />
+
<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>
-
          </span>
+
</div>
-
          <a href="#" class="block box">
+
<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>
-
            <img style="position:absolute;height:330px; right: 15px;top: -35px;" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png" />
+
</div>
-
            <span style="width:40%;" class="block">
+
<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>
-
              <span style="font-size:1.5em;">
+
</div>
-
                <span class="red-text">Heat-stable</span>  circular <span style="font-weight:bold;">DNMT&nbsp;I</span>
+
<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>
-
              </span><br />
+
<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>
-
              <span style="font-size:2.5em; text-align:right;">
+
<div id="toolbox-text">
-
                <span class="red-text">PCR</span><br />
+
the intein<br>
-
                2.0
+
<span>toolbox<span>
-
              </span>
+
</div>
-
            </span>
+
</div>
-
          </a>
+
<a href="#" clas="block" id="lightning">
-
        </div>
+
<img style="height:110px;display: inline-block;" src="/wiki/images/8/83/Heidelberg_Project_Lightning.png">
-
      <div class="row" style="margin-top:60px;">
+
<span style="position: relative;top: 20px;display: inline-block;">
-
          <a href="#" class="col-lg-4 block grey-text" style="font-size:2em; text-align:right; position:relative; top: -50px;">
+
inducable via<br>
-
taking it to<br />
+
<span style="font-weight:bold;position: relative;left: -18px;" class="red-text">light induction</span></span>
-
the next level:<br />
+
</a>
-
Inducable <br />
+
<a href="#" class="block box" style="width:250px;" id="dnmt1-box">
-
via <span class="red-text">light induction</span>
+
<img id="dnmt1-img" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png">
-
          </a>
+
<span style="position:relative; z-index:5;" class="block">
-
          <a href="#" class="col-lg-7 col-lg-offset-1 block box">
+
<span style="font-size:1.5em;">
-
            <img style="position:absolute;height: 165px; left: 15px;top: -50px;" src="/wiki/images/8/82/Heidelberg_Project_Xylanase.png" />
+
<span class="red-text">Heat-stable</span><br>  circular <br><span style="font-weight:bold;">Methyltransferase</span>
-
            <span class="col-lg-8 col-lg-offset-4 block">
+
</span><br>
-
              <span class="col-lg-6" style="font-size:1.5em; display:block;">
+
<span style="font-size: 2.5em; text-align:right;line-height: 35px;">
-
                <span class="red-text">Heat-stable</span>  circular <br /><span style="font-weight:bold;">Xylanase</span>
+
<span class="red-text">PCR</span><br>
-
              </span>
+
2.0
-
              <span class="col-lg-6 block" style="font-size:2.5em; text-align:right;">
+
</span>
-
                <span class="red-text">PCR</span><br />
+
</span>
-
                2.0
+
</a>
-
              </span>
+
<a href="#" class="block box" id="xylanase-box">
-
            </span>
+
<img id="xylanase-img" src="/wiki/images/8/82/Heidelberg_Project_Xylanase.png">
-
            <span class="clearfix block"></span>
+
<span style="position:relative; z-index:5;" class="block">
-
          </a>
+
<span style="font-size:1.5em;">
-
      </div>
+
<span class="red-text">Heat-stable</span><br>  circular <br><span style="font-weight:bold;">Xylanase</span>
-
      </div><!-- z-index wrapper -->
+
</span><br>
-
    </div>
+
<span style="font-size: 2.5em; text-align:right;">
 +
<span class="">Industry</span>
 +
</span>
 +
</span>
 +
</a>
 +
<div class="clearfix"></div>
 +
</div>
 +
</div>
 +
</div>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
Line 288: 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"