Team:UNITN-Trento/CSS/Home

From 2013.igem.org

(Difference between revisions)
(Given style to the tour buttons (lacks color))
(Undo revision 146407 by Ggirelli (talk))
Line 1: Line 1:
-
<!--NEW PAGE-->
+
#tn-central-container,
 +
#tn-content-wrap,
 +
#tn-content {
 +
    padding-bottom: 0 !important;
 +
}
-
{{:Team:UNITN-Trento/Templates/Default|<html><!--start content-->
+
.grid {
 +
    width: 960px;
 +
    margin: 0 auto;
 +
    padding-bottom: 2em;
 +
}
-
<!-- CSS -->
+
.column {
-
<link rel="stylesheet" href="https://2013.igem.org/Team:UNITN-Trento/CSS/Home?action=raw&ctype=text/css" />
+
    display: inline-block;
 +
    vertical-align: top;
 +
}
-
<!-- JS -->
+
.wrap,
-
<script type="text/javascript" src="https://2013.igem.org/wiki/index.php?title=Team:UNITN-Trento/JS/Home&action=raw&ctype=text/javascript"></script>
+
.cell {
 +
    display: block;
 +
}
-
<!-- PAGE -->
+
.column.first .cell {
 +
    height: 222px;
 +
    width: 324px;
-
<div class="pre-footer">
+
    background-color: #005e20;
-
     <a class="silhouette" href="https://2013.igem.org/Team:UNITN-Trento/Team"><img class="photo-1" src="https://static.igem.org/mediawiki/2013/a/a5/Tn-2013-silhouette.png"><img style="display: none;" class="photo-2" src="https://static.igem.org/mediawiki/2013/2/21/Tn-2013-silhouette-2.png" /></a>
+
     /*background-image: url(https://static.igem.org/mediawiki/2013/a/af/Tn-2013-boxbgs-Box-verde.png);
-
     <div class="sheet">
+
    background-position: bottom;
-
        <div class="container">
+
    background-repeat: no-repeat;*/
-
            <p>Hi everybody!</p>
+
     border: 3px solid white;
-
           
+
-
            <p>Our team is proud to introduce to you <i>B. fruity</i>, a new environmentally friendly way to control climacteric and non-climacteric fruit ripening by exploiting an engineered, light regulated strain of <i>B. subtilis</i>. The system works by synthesizing ethylene or methyl salicylate (MeSA) upon photoinduction.</p>
+
-
            <p><b>Ethylene</b> is a plant hormone widely used to ripen fruit such as bananas, kiwifruit, apples, and others. However, the synthesis, handling, and storage of ethylene is expensive and dangerous. In contrast, <i>B. fruity</i> produces ethylene from inexpensive material by hijacking a metabolic intermediate, 2-oxoglutarate, from the TCA cycle and converting this metabolite to ethylene throught the activity of an ethylene forming enzyme (EFE, 2-oxoglutarate oxygenase/decarboxylase) from <i>Pseudomonas syringae</i>.</p>
+
    box-shadow: 2px 2px 4px #323232;
 +
}
-
            <p><i>B. fruity</i> does not just accelerate ripening, but can also slow the process down, when desired, through the incorporation of a <b>methyl salicylate</b> (MeSA) synthesis pathway. MeSA was previously shown to inhibit the ripening of kiwi and tomatoes. The explored MeSA pathway builds upone the 2006 MIT iGEM project “<i>Eau de coli</i>”.</p>
+
.column.first .cell.first {
 +
    margin: 17px 7px 9px 17px;
 +
    background-color: #355667;
 +
}
-
            <p>As a proof of concept, we engineered <i>E. coli</i> with the above systems plus the YF1/FixJ blue light receptor device.</p>
+
.column.first .cell.second {
 +
    margin: 9px 7px 9px 17px;
 +
    background-color: #355667;
 +
}
-
            <p>We are hopeful that <i>B. fruity</i> will simplify the process of bringing fresh fruit from the field to the consumer.</p>
+
.column.first .cell.third {
-
        </div>
+
    margin: 9px 7px 0px 17px;
-
     </div>
+
    background-color: #13913f;
-
</div>
+
    background-image: url(https://static.igem.org/mediawiki/2013/8/8c/Tn-2013-home-Know-your-fruit.jpg);
 +
     border-color: transparent;
 +
}
-
<div class="grid">
+
.column.first .cell.third:hover {
-
    <div class="column first">
+
    box-shadow: 2px 2px 8px #323232 inset;
-
        <div class="wrap cell first">
+
}
-
        </div>
+
.column.first .cell.third a {
-
        <div class="wrap cell second">
+
    display: block;
 +
    width: 100%;
 +
    height: 100%;
 +
}
-
        </div>
+
.column.second .cell {
-
        <div class="wrap cell third">
+
    width: 574px;
-
            <a href="https://2013.igem.org/Team:UNITN-Trento/Extra/Fruit%20Info"></a>
+
-
        </div>
+
-
    </div>
+
-
    <div class="column second">
+
-
        <div class="cell first guide">
+
-
            <span class="bubble">
+
-
                <img src="https://static.igem.org/mediawiki/2013/d/d4/Tn-2013-guide-Bubble-point.png" class="pointer" />
+
-
                Hi, I am <span style="color: green;">Kiwi</span>ki! Choose a tour and I will be your wiki guide!
+
-
            </span>
+
-
            <a href="https://2013.igem.org/Team:UNITN-Trento/Project" class="tour" id="tour1">Project</a>
+
-
            <a href="https://2013.igem.org/Team:UNITN-Trento/Products" class="tour" id="tour2">Products</a>
+
-
            <a href="https://2013.igem.org/Team:UNITN-Trento/About_us" class="tour" id="tour3">About Us</a>
+
-
            <a href="https://2013.igem.org/Team:UNITN-Trento/Extra" class="tour" id="tour4">Extra</a>
+
-
        </div>
+
-
        <div class="wrap cell second">
+
-
        </div>
+
     background-color: #355667;
-
     </div>
+
     /*background-image: url(https://static.igem.org/mediawiki/2013/d/dd/Tn-2013-boxbgs-Box-video.jpg);
-
     <div class="row second">
+
     background-position: bottom;
-
        <center><h1>Achievements</h1></center>
+
    background-repeat: no-repeat;*/
-
     </div>
+
    border: 3px solid white;
-
</div>
+
-
<!--end content--></html>|<html>https://static.igem.org/mediawiki/2013/5/53/Tn-2013-headerbg-Sfondobb.png</html>|<html>https://static.igem.org/mediawiki/2013/d/d2/Tn-2013-headerbg-Sfondobb_or.png</html>}}
+
    box-shadow: 2px 2px 4px #323232;
 +
}
 +
 
 +
.column.second .cell.first {
 +
    position: relative;
 +
    height: 423px;
 +
    margin: 17px 17px -10px 0;
 +
    background-color: transparent;
 +
    border-color: transparent;
 +
    box-shadow: none;
 +
    background-image: url('https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-Tourbg-kiwiki.png');
 +
    background-repeat: no-repeat;
 +
    background-size: 400px;
 +
    background-position: 27px 10px;
 +
}
 +
 
 +
.column.second .guide .bubble {
 +
    display: block;
 +
    position: absolute;
 +
    top: 0;
 +
    right: 65px;
 +
   
 +
    padding: 1em;
 +
   
 +
    width: 200px;
 +
   
 +
    background-color: rgba(250,250,250,1);
 +
    border: 2px solid black;
 +
    border-radius: 1em;
 +
   
 +
    font-family: "Cabin", sans-serif;
 +
}
 +
 
 +
.column.second .guide .bubble .pointer {
 +
    position: absolute;
 +
    bottom: -26px;
 +
    left: 12px;
 +
}
 +
 
 +
.column.second .guide .tour {
 +
    display: block;
 +
    padding: 10px;
 +
    width: 150px;
 +
   
 +
    background-color: white;
 +
    border-bottom: 3px solid #dadada;
 +
    border-radius: 0.4em;
 +
    box-shadow: 1px 1px 2px black;
 +
   
 +
    font-family: "Boogaloo", cursive;
 +
    font-size: 1.5em;
 +
    text-align: center;
 +
}
 +
 
 +
.column.second .guide .tour:hover {
 +
    background-color: #dadada;
 +
    border-bottom: 3px solid white;
 +
    box-shadow: 1px 1px 1px black inset;
 +
}
 +
 
 +
.column.second .guide #tour4 {
 +
    position: absolute;
 +
    bottom: 5px;
 +
    right: 80px;
 +
}
 +
 
 +
.column.second .guide #tour3 {
 +
    position: absolute;
 +
    bottom: 60px;
 +
    right: 80px;
 +
}
 +
 
 +
.column.second .guide #tour2 {
 +
    position: absolute;
 +
    bottom: 115px;
 +
    right: 80px;
 +
}
 +
 
 +
.column.second .guide #tour1 {
 +
    position: absolute;
 +
    bottom: 170px;
 +
    right: 80px;
 +
}
 +
 
 +
.column.second .cell.second {
 +
    height: 268px;
 +
    margin: 9px 17px 0px 0;
 +
    background-color: #c02020;
 +
}
 +
 
 +
.row.second {
 +
    height: 215px;
 +
    width: 915px;
 +
    margin: 9px 17px 0 17px;
 +
 
 +
    background-color: #ca6819;
 +
    border: 3px solid white;
 +
 
 +
    box-shadow: 2px 2px 4px #323232;
 +
}
 +
 
 +
/*PRE-FOOTER*/
 +
 
 +
.pre-footer {
 +
    width: 960px;
 +
    margin: 0 auto;
 +
}
 +
 
 +
.pre-footer .sheet {
 +
    width: 915px;
 +
    min-height: 100px;
 +
 
 +
    margin-left: 17px;
 +
 
 +
    background-color: #13913f;
 +
    border: 3px solid white;
 +
 
 +
    box-shadow: 2px -2px 4px #323232;
 +
 
 +
    text-align: justify;
 +
}
 +
 
 +
.pre-footer .sheet .container {
 +
    margin: 20px;
 +
    padding: 25px;
 +
   
 +
    background-color: rgba(250,250,250,.7);
 +
    border-radius: 10px;
 +
}
 +
 
 +
.pre-footer .silhouette {
 +
    display: block;
 +
    margin: 0 auto;
 +
}

Revision as of 08:29, 22 September 2013

  1. tn-central-container,
  2. tn-content-wrap,
  3. tn-content { 
   padding-bottom: 0 !important;

}

.grid { 

   width: 960px;
   margin: 0 auto;
   padding-bottom: 2em;

}

.column { 

   display: inline-block;
   vertical-align: top;

}

.wrap, .cell { 

   display: block;

}

.column.first .cell { 

   height: 222px;
   width: 324px;

   background-color: #005e20;
   /*background-image: url(Tn-2013-boxbgs-Box-verde.png);
   background-position: bottom;
   background-repeat: no-repeat;*/
   border: 3px solid white;

   box-shadow: 2px 2px 4px #323232;

}

.column.first .cell.first { 

   margin: 17px 7px 9px 17px;
   background-color: #355667;

}

.column.first .cell.second { 

   margin: 9px 7px 9px 17px;
   background-color: #355667;

}

.column.first .cell.third { 

   margin: 9px 7px 0px 17px;
   background-color: #13913f;
   background-image: url(Tn-2013-home-Know-your-fruit.jpg);
   border-color: transparent;

}

.column.first .cell.third:hover { 

   box-shadow: 2px 2px 8px #323232 inset;

}

.column.first .cell.third a { 

   display: block;
   width: 100%;
   height: 100%;

}

.column.second .cell { 

   width: 574px;

   background-color: #355667;
   /*background-image: url(Tn-2013-boxbgs-Box-video.jpg);
   background-position: bottom;
   background-repeat: no-repeat;*/
   border: 3px solid white;

   box-shadow: 2px 2px 4px #323232;

}

.column.second .cell.first { 

   position: relative;
   height: 423px;
   margin: 17px 17px -10px 0;
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
   background-image: url('https://static.igem.org/mediawiki/2013/c/c3/Tn-2013-Tourbg-kiwiki.png');
   background-repeat: no-repeat;
   background-size: 400px;
   background-position: 27px 10px;

}

.column.second .guide .bubble { 

   display: block;
   position: absolute;
   top: 0;
   right: 65px;
   
   padding: 1em;
   
   width: 200px;
   
   background-color: rgba(250,250,250,1);
   border: 2px solid black;
   border-radius: 1em;
   
   font-family: "Cabin", sans-serif;

}

.column.second .guide .bubble .pointer { 

   position: absolute;
   bottom: -26px;
   left: 12px;

}

.column.second .guide .tour { 

   display: block;
   padding: 10px;
   width: 150px;
   
   background-color: white;
   border-bottom: 3px solid #dadada;
   border-radius: 0.4em;
   box-shadow: 1px 1px 2px black;
   
   font-family: "Boogaloo", cursive;
   font-size: 1.5em;
   text-align: center;

}

.column.second .guide .tour:hover { 

   background-color: #dadada;
   border-bottom: 3px solid white;
   box-shadow: 1px 1px 1px black inset;

}

.column.second .guide #tour4 { 

   position: absolute;
   bottom: 5px;
   right: 80px;

}

.column.second .guide #tour3 { 

   position: absolute;
   bottom: 60px;
   right: 80px;

}

.column.second .guide #tour2 { 

   position: absolute;
   bottom: 115px;
   right: 80px;

}

.column.second .guide #tour1 { 

   position: absolute;
   bottom: 170px;
   right: 80px;

}

.column.second .cell.second { 

   height: 268px;
   margin: 9px 17px 0px 0;
   background-color: #c02020;

}

.row.second { 

   height: 215px;
   width: 915px;
   margin: 9px 17px 0 17px;

   background-color: #ca6819;
   border: 3px solid white;

   box-shadow: 2px 2px 4px #323232;

}

/*PRE-FOOTER*/

.pre-footer { 

   width: 960px;
   margin: 0 auto;

}

.pre-footer .sheet { 

   width: 915px;
   min-height: 100px;

   margin-left: 17px;

   background-color: #13913f;
   border: 3px solid white;

   box-shadow: 2px -2px 4px #323232;

   text-align: justify;

}

.pre-footer .sheet .container { 

   margin: 20px;
   padding: 25px;
   
   background-color: rgba(250,250,250,.7);
   border-radius: 10px;

}

.pre-footer .silhouette { 

   display: block;
   margin: 0 auto;

}

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Home"