Team:Heidelberg/testing/Project new

From 2014.igem.org

(Difference between revisions)
(Created page with "{{:Team:Heidelberg/Templates/MainTemplate}} {{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}} {{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/c...")
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 73: Line 73:
.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;
}
}
Line 91: Line 110:
.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 130: Line 149:
.descr-box span {
.descr-box span {
-
margin-left: 40px;
+
  margin-left: 40px;
-
display: block;
+
  display: block;
}
}
Line 163: Line 182:
}
}
</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 main" style="color: white;">
+
    <div class="container" 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 class="row" >
+
    </div>
-
<div class="ringbox">
+
    <div class="container grapicalAbstract">
-
<img src="/wiki/images/d/dc/Ring_Project.png" id="ring-background" />
+
    <div id="redOverlay"></div>
-
<div id="circ-box" class="descr-box">
+
      <div style="z-index:3">
-
<a href="/Team:Heidelberg/Toolbox/Circularization">
+
        <div class="ringbox">
-
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon"/>
+
          <img src="/wiki/images/d/dc/Ring_Project.png" id="ring-background" />
-
</a>
+
          <div id="circ-box" class="descr-box">
-
<div><h3>CIRCULARIZATION</h3></div>
+
            <a href="/Team:Heidelberg/Toolbox/Circularization">
-
<span>Create a linker with our crowd computing <a href="/Team:Heidelberg/Software/Linker-Software">software</a> and make your protein heat stable</span>
+
              <img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon"/>
-
</div>
+
            </a>
-
<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>
+
            <div><h3>CIRCULARIZATION</h3></div>
-
</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 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>
+
          </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><div><h3>OLIGOMERIZATION</h3></div><span>Fuse multiple Proteins or Domains using Inteins</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><div><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 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>
-
</div>
+
          </div>
-
<div style="width:390px; float:left;">
+
          <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 style="text-align: right; display:block; font-size: 2.5em;">
+
          <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>
-
<span class="grey-text">Modify</span> your protein<br />
+
        </div>
-
<span class="grey-text">post-</span>translationally<br />
+
        <div style="width:390px; float:left;">
-
<span class="grey-text">easy</span> and <span class="grey-text">standardized</span>
+
          <span style="text-align: right; display:block; font-size: 2.5em;">
-
<br /><br />
+
            <span class="grey-text">Modify</span> your protein<br />
-
WITH THE POWER<br />
+
            <span class="grey-text">post-</span>translationally<br />
-
of <span class="red-text">INTEIN SPLICING</span>
+
            <span class="grey-text">easy</span> and <span class="grey-text">standardized</span>
-
<br /><br />
+
            <br /><br />
-
</span>
+
            WITH THE POWER<br />
-
<a href="#" class="block box">
+
            of <span class="red-text">INTEIN SPLICING</span>
-
<img style="position:absolute;height:330px; right: 15px;top: -35px;" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png" />
+
            <br /><br />
-
<span style="width:40%;" class="block">
+
          </span>
-
<span style="font-size:1.5em;">
+
          <a href="#" class="block box">
-
<span class="red-text">Heat-stable</span>  circular <span style="font-weight:bold;">DNMT&nbsp;I</span>
+
            <img style="position:absolute;height:330px; right: 15px;top: -35px;" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png" />
-
</span><br />
+
            <span style="width:40%;" class="block">
-
<span style="font-size:2.5em; text-align:right;">
+
              <span style="font-size:1.5em;">
-
<span class="red-text">PCR</span><br />
+
                <span class="red-text">Heat-stable</span>  circular <span style="font-weight:bold;">DNMT&nbsp;I</span>
-
2.0
+
              </span><br />
-
</span>
+
              <span style="font-size:2.5em; text-align:right;">
-
</span>
+
                <span class="red-text">PCR</span><br />
-
</a>
+
                2.0
-
</div>
+
              </span>
-
</div>
+
            </span>
-
<div class="row" style="margin-top:60px;">
+
          </a>
-
<a href="#" class="col-lg-4 block grey-text" style="font-size:2em; text-align:right; position:relative; top: -50px;">
+
        </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 />
taking it to<br />
the next level:<br />
the next level:<br />
Inducable <br />
Inducable <br />
via <span class="red-text">light induction</span>
via <span class="red-text">light induction</span>
-
</a>
+
          </a>
-
<a href="#" class="col-lg-7 col-lg-offset-1 block box">
+
          <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" />
+
            <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-8 col-lg-offset-4 block">
-
<span class="col-lg-6" style="font-size:1.5em; display: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 class="red-text">Heat-stable</span>  circular <br /><span style="font-weight:bold;">Xylanase</span>
-
</span>
+
              </span>
-
<span class="col-lg-6 block" style="font-size:2.5em; text-align:right;">
+
              <span class="col-lg-6 block" style="font-size:2.5em; text-align:right;">
-
<span class="red-text">PCR</span><br />
+
                <span class="red-text">PCR</span><br />
-
2.0
+
                2.0
-
</span>
+
              </span>
-
</span>
+
            </span>
-
<span class="clearfix block"></span>
+
            <span class="clearfix block"></span>
-
</a>
+
          </a>
-
</div>
+
      </div>
-
</div>
+
      </div><!-- z-index wrapper -->
 +
    </div>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">

Revision as of 21:14, 11 October 2014

   


   
    

      

        

          
 Abstract

        

        

          Click to read full abstract
        

        

          Placeholder
        

      

    

    

    

      

        

          
          

            
              
            
            
CIRCULARIZATION

            Create a linker with our crowd computing software and make your protein heat stable
          

          
OLIGOMERIZATION
Fuse multiple Proteins or Domains using Inteins
          

          
FUSION
Fuse two Proteins or Domains together using Inteins
          

          
ON/OFF
Activate or deactivate Proteins using Inteins

          
PURIFICATION

        

        

          
            Modify your protein

            post-translationally

            easy and standardized
            


            WITH THE POWER

            of INTEIN SPLICING
            


          
          
            
            
              
                Heat-stable  circular DNMT I
              

              
                PCR

                2.0
              
            
          
        

      

          
taking it to

the next level:

Inducable 

via light induction
          
          
            
            
              
                Heat-stable  circular 
Xylanase
              
              
                PCR

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