Team:UNITN-Trento/Team

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!--NEW PAGE-->
+
@import url(http://fonts.googleapis.com/css?family=Contrail+One);
-
{{:Team:UNITN-Trento/Templates/Default|<html><!--start content-->
+
-
<!--CSS-->
+
.tn-title {
-
<link rel="stylesheet" href="https://2013.igem.org/wiki/index.php?title=Team:UNITN-Trento/CSS/Team&action=raw&ctype=text/css" type="text/css" />
+
    display: block;
-
<!--JS-->
+
    margin-bottom: 0;
-
<script src="https://2013.igem.org/wiki/index.php?title=Team:UNITN-Trento/JS/Team&action=raw&ctype=text/javascript"></script>
+
-
<!--PAGE-->
+
    color: #bf1b39;
-
<span class="tn-title">Fruity Team</span>
+
-
<div id="jms-slideshow" class="jms-slideshow">
+
-
     <div id="bruno" class="step" data-color="color-1" data-x="0" data-y="0" data-z="0">
+
     font-family: "Trebuchet MS",Helvetica,sans-serif;
-
<table>
+
    font-variant: small-caps;
-
<tr>
+
    font-size: 3em;
-
<td colspan="3" class="title">Bruno Aor</td>
+
   
-
</tr>
+
    text-align: center;
-
<tr>
+
}
-
<td class="image" rowspan="7"><img src="https://static.igem.org/mediawiki/2013/2/26/Tn-2013-Ba_face.jpg" /></td>
+
-
<th>Nickname:</th>
+
-
<td>Br1</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Description:</th>
+
-
<td rowspan="2">An eccentric and creepy guy that doesn't miss the chance to show his fantastic body. A wannabe tango dancer with the passion for the worst “tunz tunz” music.</td>
+
-
</tr>
+
-
<tr>
+
-
<td></td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td rowspan="2">The Macgyver of the biology, he built the Ripenator with only an hairpin and some chewing gum.</td>
+
-
</tr>
+
-
<tr>
+
-
<td></td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>Allergic</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quote:</th>
+
-
<td>"OOOOOOOOOH!!!!!", "Yes-sir!"</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
    <div id="fabio" class="step" data-color="color-2" data-x="600" data-z="-600" data-z="0" >
+
/*jmslideshow*/
-
<table>
+
-
<tr>
+
-
<td colspan="3" class="title">Fabio Digiacomo</td>
+
-
</tr>
+
-
<tr>
+
-
<td class="image" rowspan="5"><img src="https://static.igem.org/mediawiki/2013/5/50/Tn-2013-Fd_face.jpg" /></td>
+
-
<th>Nickname:</th>
+
-
<td>Fabius</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Description:</th>
+
-
<td>The american guy nostalgic of the 90's stars like Britney Spears. He loves the life in the lab and he has a passion for the rack in which his fingers get stuck more times.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td>He could sell a comb to Vin Diesel! Our Vending Machine and designer, with a Master in Paint Programmation!</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>Strawberry</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quotes:</th>
+
-
<td>"Totally, you know..."</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
    <div id="gabriele" class="step" data-color="color-3"  data-x="1200" data-z="-1200" >
+
.jms-slideshow,
-
<table>
+
.jms-wrapper {
-
<tr>
+
    height: 600px;
-
<td colspan="3" class="title">Gabriele Girelli</td>
+
-
</tr>
+
-
<tr>
+
-
<td class="image" rowspan="5"><img src="https://static.igem.org/mediawiki/2013/5/5e/Tn-2013-Gg_face_b.jpg" /></td>
+
-
<th>Nickname:</th>
+
-
<td>Gire</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Description:</th>
+
-
<td>The king of the notebook (he changes this page at least 3 times a day)! He is the housekeeper and the first lady of the team but he always forgets to make us lunch!</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td>Computer programming have no more secrets for him and for his lovely cat (it is called Dylan, Dylan Cat, by the way…). He is the chief of the wiki and the father of SAM synthetase.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>Melon</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quotes:</th>
+
-
<td>"WHO USED MY BENCH?"</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
     <div id="caterina" class="step" data-color="color-4" data-x="600" data-z="-1800" >
+
     font-size: 16px;
-
<table>
+
}
-
<tr>
+
-
<td colspan="3" class="title">Caterina Marchioretti</td>
+
-
</tr>
+
-
<tr>
+
-
<td class="image" rowspan="5"><img src="https://static.igem.org/mediawiki/2013/b/b4/Tn-2013-Cm_face_b.jpg" /></td>
+
-
<th>Nickname:</th>
+
-
<td>KateKillah</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Description:</th>
+
-
<td>An easygoing girl full of surprises. Loves workin with pipettes and listening to every kind of bad music. She is passionate for politics as for science.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td>The guardian angel of the team. She is always present for advices and to comfort everyone who has failed. We are not able to list all the things that she has done in the lab because from the early beginning she was working as a crazy monkey!</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>Peach</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quotes:</th>
+
-
<td>"Booooooombaaaaa!"</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
+
-
    <div id="michele" class="step" data-color="color-5" data-x="0" data-z="-2400" >
+
-
<table>
+
-
<tr>
+
-
<td colspan="3" class="title">Michele Pedrotti</td>
+
-
</tr>
+
-
<tr>
+
-
<td class="image" rowspan="5"><img src="https://static.igem.org/mediawiki/2013/b/b0/Tn-2013-Mp_face.jpg" /></td>
+
-
<th>Nickname:</th>
+
-
<td>Pedro</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Description:</th>
+
-
<td>The philosopher and animal party guy with many energies and existential problems! In every dread of him you can find many cool ideas and some <i>B. fruity</i>.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td>He gladdens the lab with reggae music and pearls of wisdom during the most difficult days. He can stay awake for many days to make experiments and characterisations. </td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>Watermelon</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quotes:</th>
+
-
<td>"Oooooh, but how have we got ourselves!?"</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
    <div id="thomas" class="step" data-color="color-6" data-x="-600" data-z="-1800"  >
+
.jms-slideshow .step {
-
<table>
+
    height: 600px;
-
<tr>
+
    height: 500px;
-
<td colspan="3" class="title">Thomas Perli</td>
+
    font-size: 1.5em;
-
</tr>
+
    text-align: center;
-
<tr>
+
    border-radius: 1em;
-
<td class="image" rowspan="5"><img src="https://static.igem.org/mediawiki/2013/6/66/Tn-2013-Tp_face.jpg" /></td>
+
    -webkit-box-shadow: 0 8px 6px -6px black;
-
<th>Nickname:</th>
+
    -moz-box-shadow: 0 8px 6px -6px black;
-
<td>Xli</td>
+
    box-shadow: 0 8px 6px -6px black;
-
</tr>
+
    background-image: url(http://i40.tinypic.com/wlvibc.png);
-
<tr>
+
}
-
<th>Description:</th>
+
-
<td>The sporty man able to run faster than the DNA during the electrophoresis. You can ask him for private lesson of biology and chemistry, mostly if you are a pretty girl.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td>With his decrepit Mac he is still able to design primers! Probably after these months he produces more ethylene than testosterone but this is a good offering for the SCIENCE!</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>Tomato</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quotes:</th>
+
-
<td>"MA TE PAR!?", "EASY!"</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
     <div id="emil" class="step" data-color="color-7" data-x="-1200" data-z="-1200" >
+
.jms-slideshow .step .title {
-
<table>
+
     font-family: "Contrail One";
-
<tr>
+
    font-size: 2.5em;
-
<td colspan="3" class="title">Emil Tonon</td>
+
    font-weight: bold;
-
</tr>
+
    text-align: center;
-
<tr>
+
}
-
<td class="image" rowspan="5"><img src="https://static.igem.org/mediawiki/2013/5/50/Tn-2013-Et_face.jpg" /></td>
+
-
<th>Nickname:</th>
+
-
<td>ET</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Description:</th>
+
-
<td>A guy with many skills among whom SINGING! A little bit hypochondriac so: don’t  drink ethidium bromide in his presence!</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td>10Tb of memory: Emil is the big boss of the knowledge! He passes many hours in lab with his baby Bacillus and tell them story about dinosaurs and the origin of life.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>"Stark delicious" apple</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quotes:</th>
+
-
<td>"Ma porca ma porca ma porca ma porca ma porca (loop) di quella miseria"</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
    <div id="viola" class="step" data-color="color-8" data-x="-600" data-z="-600" >
+
.jms-slideshow .step table {
-
<table>
+
    width: 100%;
-
<tr>
+
    height: 100%;
-
<td colspan="3" class="title">Viola Valentini</td>
+
    border-radius: 1em;
-
</tr>
+
    background-color: rgba(250,250,250,0.6);
-
<tr>
+
}
-
<td class="image" rowspan="5"><img src="https://static.igem.org/mediawiki/2013/1/1d/Tn-2013-Vv_face.jpg" /></td>
+
-
<th>Nickname:</th>
+
-
<td>Birubiru</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Description:</th>
+
-
<td>The flower of the team, she became a superstar after her first video on youtube “Zozzoni”. You can ask a live performance for some loaves of bread.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Skills:</th>
+
-
<td>She is always cheerful and positive and she surely will become a loving mother, as we have seen in these few months with her baby bacillus.</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Favourite fruit:</th>
+
-
<td>Cherry</td>
+
-
</tr>
+
-
<tr>
+
-
<th>Quotes:</th>
+
-
<td>"Puttanega"</td>
+
-
</tr>
+
-
</table>
+
-
    </div>
+
-
</div>
+
-
<!--end content--></html>}}
+
.jms-slideshow .step table th {
 +
    width: 150px;
 +
 
 +
    font-size: 0.9em;
 +
    font-variant: small-caps;
 +
 
 +
    text-align: right;
 +
    vertical-align: top;
 +
}
 +
 
 +
.jms-slideshow .step table td:not(.title):not(.image) {
 +
    width: 350px;
 +
 
 +
    padding: 0.5em;
 +
 
 +
    font-size: 0.8em;
 +
 
 +
    text-align: justify;
 +
}
 +
 
 +
.jms-slideshow .step table .image {
 +
    position: relative;
 +
 
 +
    padding: 0;
 +
 
 +
    width: 200px;
 +
 
 +
    text-align: center;
 +
    vertical-align: top;
 +
 
 +
    background-color: transparent;
 +
}
 +
 
 +
.jms-slideshow .step table .image img {
 +
    border-radius: 1em;
 +
}
 +
 
 +
.jms-slideshow .step table td:not(.image),
 +
.jms-slideshow .step table th {
 +
    vertical-align: middle;
 +
}
 +
 
 +
/*hashtags*/
 +
#tn-content a {
 +
    display: inline-block;
 +
    margin: 2px;
 +
    padding: 10px;
 +
    background-color: #323232;
 +
    border-radius: 5px;
 +
    box-shadow: 1px 1px 0 1px rgba(18,18,18,.3);
 +
    color: #dadada;
 +
    font-size: 0.8em;
 +
    font-variant: small-caps;
 +
    font-weight: bold;
 +
}
 +
 
 +
.jms-slideshow .color-1,
 +
#tn-content .color-1 a {
 +
    background-color: #000000!important;
 +
}
 +
 
 +
.jms-slideshow .color-2,
 +
#tn-content .color-2 a {
 +
    background-color: #68C9B6!important;
 +
    color: #323232!important;
 +
}
 +
 
 +
#tn-content .color-2 a {
 +
    background-color: #68C9B6!important;
 +
}
 +
 
 +
.jms-slideshow .color-3,
 +
#tn-content .color-3 a {
 +
    background-color: #D67500!important;
 +
}
 +
 
 +
.jms-slideshow .color-4,
 +
#tn-content .color-4 a {
 +
    background-color: #7F0A06!important;
 +
}
 +
 
 +
.jms-slideshow .color-5,
 +
#tn-content .color-5 a {
 +
    background-color: #BA301B!important;
 +
}
 +
 
 +
.jms-slideshow .color-6,
 +
#tn-content .color-6 a {
 +
    background-color: #97D900!important;
 +
    color: #323232;
 +
}
 +
 
 +
.jms-slideshow .color-7,
 +
#tn-content .color-7 a {
 +
    background-color: #239435!important;
 +
}
 +
 
 +
.jms-slideshow .color-8,
 +
#tn-content .color-8 a {
 +
    background-color: #C7004C!important;
 +
}
 +
 
 +
#tn-content a:hover {
 +
    background-color: #dadada!important;
 +
    box-shadow: 1px 1px 0 1px rgba(18,18,18,.3) inset;
 +
    color: #323232;
 +
    text-decoration: none;
 +
}
 +
 
 +
/*hoverTag*/
 +
 
 +
.tn-hoverTag {
 +
    display: table;
 +
    position: fixed;
 +
    top: 0; left: 0; right: 0; bottom: 0;
 +
    width: 100%; height: 100%;
 +
    z-index: 10;
 +
    text-align: center;
 +
}
 +
 
 +
.tn-hoverTag div {
 +
    display: table-cell;
 +
    max-width: 600px;
 +
    padding: 1em;
 +
    background-color: rgba(250,250,250,.8);
 +
    border-radius: 1em;
 +
    vertical-align: middle;
 +
}
 +
 
 +
.tn-hoverTag span {
 +
    display: inline-block;
 +
    max-width: 200px;
 +
    background-color: white;
 +
    font-size: 2em;
 +
}
 +
 
 +
.tn-hoverTag .title {
 +
    padding: 15px;
 +
    max-width: 800px;
 +
    font-family: "Contrail One";
 +
    font-size: 4em;
 +
    font-weight: bold;
 +
    text-align: center;
 +
}

Revision as of 10:02, 26 August 2013

@import url(http://fonts.googleapis.com/css?family=Contrail+One);

.tn-title {

   display: block;
   margin-bottom: 0;
   color: #bf1b39;
   font-family: "Trebuchet MS",Helvetica,sans-serif;
   font-variant: small-caps;
   font-size: 3em;
   
   text-align: center;

}

/*jmslideshow*/

.jms-slideshow, .jms-wrapper {

   height: 600px;
   font-size: 16px;

}

.jms-slideshow .step {

   height: 600px;
   height: 500px;
   font-size: 1.5em;
   text-align: center;
   border-radius: 1em;
   -webkit-box-shadow: 0 8px 6px -6px black;
   -moz-box-shadow: 0 8px 6px -6px black;
   box-shadow: 0 8px 6px -6px black;
   background-image: url(wlvibc.png);

}

.jms-slideshow .step .title {

   font-family: "Contrail One";
   font-size: 2.5em;
   font-weight: bold;
   text-align: center;

}

.jms-slideshow .step table {

   width: 100%;
   height: 100%;
   border-radius: 1em;
   background-color: rgba(250,250,250,0.6);

}

.jms-slideshow .step table th {

   width: 150px;
   font-size: 0.9em;
   font-variant: small-caps;
   text-align: right;
   vertical-align: top;

}

.jms-slideshow .step table td:not(.title):not(.image) {

   width: 350px;
   padding: 0.5em;
   font-size: 0.8em;
   text-align: justify;

}

.jms-slideshow .step table .image {

   position: relative;
   padding: 0;
   width: 200px;
   text-align: center;
   vertical-align: top;
   background-color: transparent;

}

.jms-slideshow .step table .image img {

   border-radius: 1em;

}

.jms-slideshow .step table td:not(.image), .jms-slideshow .step table th {

   vertical-align: middle;

}

/*hashtags*/

  1. tn-content a {
   display: inline-block;
   margin: 2px;
   padding: 10px;
   background-color: #323232;
   border-radius: 5px;
   box-shadow: 1px 1px 0 1px rgba(18,18,18,.3);
   color: #dadada;
   font-size: 0.8em;
   font-variant: small-caps;
   font-weight: bold;

}

.jms-slideshow .color-1,

  1. tn-content .color-1 a {
   background-color: #000000!important;

}

.jms-slideshow .color-2,

  1. tn-content .color-2 a {
   background-color: #68C9B6!important;
   color: #323232!important;

}

  1. tn-content .color-2 a {
   background-color: #68C9B6!important;

}

.jms-slideshow .color-3,

  1. tn-content .color-3 a {
   background-color: #D67500!important;

}

.jms-slideshow .color-4,

  1. tn-content .color-4 a {
   background-color: #7F0A06!important;

}

.jms-slideshow .color-5,

  1. tn-content .color-5 a {
   background-color: #BA301B!important;

}

.jms-slideshow .color-6,

  1. tn-content .color-6 a {
   background-color: #97D900!important;
   color: #323232;

}

.jms-slideshow .color-7,

  1. tn-content .color-7 a {
   background-color: #239435!important;

}

.jms-slideshow .color-8,

  1. tn-content .color-8 a {
   background-color: #C7004C!important;

}

  1. tn-content a:hover {
   background-color: #dadada!important;
   box-shadow: 1px 1px 0 1px rgba(18,18,18,.3) inset;
   color: #323232;
   text-decoration: none;

}

/*hoverTag*/

.tn-hoverTag {

   display: table;
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   width: 100%; height: 100%;
   z-index: 10;
   text-align: center;

}

.tn-hoverTag div {

   display: table-cell;
   max-width: 600px;
   padding: 1em;
   background-color: rgba(250,250,250,.8);
   border-radius: 1em;
   vertical-align: middle;

}

.tn-hoverTag span {

   display: inline-block;
   max-width: 200px;
   background-color: white;
   font-size: 2em;

}

.tn-hoverTag .title {

   padding: 15px;
   max-width: 800px;
   font-family: "Contrail One";
   font-size: 4em;
   font-weight: bold;
   text-align: center;

}