Team:Buenos Aires/Templates/menu

From 2013.igem.org

(Difference between revisions)
(Blanked the page)
Line 1: Line 1:
 +
<html>
 +
<head>
 +
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 +
 +
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/katamotzikasi" rel="stylesheet" type="text/css"/>
 +
 +
<style>
 +
 +
 +
/*tengo que cambiar el body porque sino afecto a la wiki también, es decir crear una subcategoría o algo así */
 +
#Contenido{
 +
margin-left: auto;
 +
margin-right:auto;
 +
 +
    color: #000000;
 +
    font-size: 14px;
 +
    letter-spacing: 1px;
 +
    line-height: 30px;
 +
 +
    text-align: left;
 +
 +
background:url("http://s17.postimg.org/bp7obatz3/background.png");
 +
background-repeat:no-repeat;
 +
background-position:50% 50%;
 +
background-size: 100% 100%;
 +
 +
}
 +
 +
 +
 +
span{
 +
 +
width: 50%;
 +
 +
margin-left: 20%;
 +
margin-right:10%;
 +
 +
 +
    background:#F8F8F8;
 +
    border: 5px solid #DFDFDF;
 +
    color: #000000;
 +
    font-size: 13px;
 +
    letter-spacing: 1px;
 +
    line-height: 20px;
 +
 +
    text-align: left;
 +
 +
    position:absolute;
 +
 +
 +
  opacity:0;
 +
  text-indent:50px;
 +
box-shadow: 10px 10px 5px #888888;
 +
 +
    display:block;
 +
    padding:0 20px;
 +
 +
 +
 +
}
 +
 +
 +
 +
ul.menu {
 +
 +
width: 770px;
 +
height: 100px;
 +
 +
margin-left: auto;
 +
margin-right: auto;
 +
 +
position:relative;
 +
 +
display:block;
 +
overflow:hidden;
 +
}
 +
 +
ul.menu li.item{
 +
display:table;
 +
width: 100px;
 +
height: 99px;
 +
float:left;
 +
 +
 +
padding: 0 120px;
 +
overflow:hidden;
 +
 +
/*Rota el li, funciona para Moz y Chrome, NO TOCAR*/
 +
 +
 +
background:transparent url("http://s16.postimg.org/dt3lc44f5/plasmido.png") no-repeat center center;
 +
    /* -webkit-mask-image: url("plasmido.png");*/
 +
      -webkit-mask-size: 62px 62px;
 +
      -webkit-animation-name: rotate;
 +
    -webkit-animation-duration: 15s;
 +
    -webkit-animation-iteration-count: infinite;
 +
    -webkit-animation-timing-function: linear;
 +
  -moz-animation-name: rotate;
 +
  -moz-animation-duration:15s;
 +
  -moz-animation-iteration-count:infinite;
 +
  -moz-animation-timing-function:linear;
 +
opacity:0.8;
 +
 +
}
 +
 +
 +
 +
a.boton{
 +
 +
  display:table-cell;
 +
  width:100px;
 +
height: 35px;
 +
    cursor:pointer;
 +
text-align:center;
 +
/*text-transform: uppercase;*/
 +
font-size: 25px;
 +
vertical-align:middle;
 +
 +
 +
overflow:hidden;
 +
position:relative;
 +
 +
/*Rota la parte de adentro del boton para la izquierda, así
 +
parece que está fijo (porque está rotando el li */
 +
      -webkit-animation-name: invrotate;
 +
    -webkit-animation-duration: 15s;
 +
    -webkit-animation-iteration-count: infinite;
 +
    -webkit-animation-timing-function: linear;
 +
  -moz-animation-name: invrotate;
 +
  -moz-animation-duration:15s;
 +
  -moz-animation-iteration-count:infinite;
 +
  -moz-animation-timing-function:linear;
 +
opacity:1;
 +
 +
 
 +
 +
 +
 +
}
 +
 +
 +
@-webkit-keyframes rotate {
 +
      from {-webkit-transform:rotate(0deg);}
 +
      to {-webkit-transform:rotate(360deg);}
 +
    }
 +
   
 +
@-moz-keyframes rotate {
 +
  from {-moz-transform:rotate(0deg);}
 +
  to {  -moz-transform:rotate(360deg);}
 +
}
 +
 +
@-webkit-keyframes invrotate {
 +
      from {-webkit-transform:rotate(0deg);}
 +
      to {-webkit-transform:rotate(-360deg);}
 +
    }
 +
   
 +
@-moz-keyframes invrotate {
 +
  from {-moz-transform:rotate(0deg);}
 +
  to {  -moz-transform:rotate(-360deg);}
 +
}
 +
 +
a.boton:link, a.boton:visited
 +
/*Editar acá si quiero cambiar el formato de los botones*/
 +
{
 +
 +
 +
 +
display:table-cell;
 +
color:#000000;
 +
text-decoration:none;
 +
opacity:1;
 +
font-family:'KatamotzIkasi';
 +
 +
  font-weight: bold;
 +
  font-style: normal;
 +
 +
 +
 +
}
 +
 +
a.boton:hover,a.boton:active
 +
{
 +
opacity:0.3;
 +
 +
}
 +
 +
 +
#projPrev{
 +
opacity:0;
 +
filter:alpha(opacity=0);
 +
}
 +
 +
</style>
 +
 +
 +
 +
 
 +
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 +
<script>
 +
$(document).ready(function(){
 +
  $("li").hover(function(){
 +
var liId = $(this).attr('id');
 +
var namePrev = liId + "Prev";
 +
var element = document.getElementById(namePrev);
 +
 +
element.style.opacity="0.9"
 +
 +
 
 +
  }, function(){
 +
var liId = $(this).attr('id');
 +
var namePrev = liId + "Prev";
 +
var element = document.getElementById(namePrev);
 +
element.style.opacity="0.0"
 +
});
 +
});
 +
</script>   
 +
 +
 +
 +
</head>
 +
 +
 +
 +
 +
<div id="Contenido">
 +
 +
 +
<ul id="menu" class="menu">
 +
<li class="item" id="proj"> <a class="boton" href="https://2013.igem.org/Team:Buenos_Aires/Project">Project</a></li>
 +
<li class="item" id="team"> <a class="boton" href="#Team">Team</a></li>
 +
</ul>
 +
 +
 +
<span id="teamPrev">
 +
            <p> El equipo está formado por seis biólogos, un químico, un físico y un computador. Contamos con la ayuda de tres advisors y un instructor</p>
 +
      </span>
 +
<span id="projPrev">
 +
        <p>  El proyecto se basa en el biosensado cuantitativo de contaminantes en aguas.  </p>
 +
 +
  <p> La contaminación con arsénico es una problemática a nivel mundial, y en particular
 +
en la Argentina.  </p>
 +
 +
 +
<p>Los controles existentes son aislados y requieren de conocimientos técnicos y de un equipamiento
 +
costoso para el usuario medio. Frente a esto es que surge la idea de brindarle a la población una forma
 +
simple, elegante y económica de realizar sus propias pruebas de agua.</p>
 +
 +
 +
      </span>
 +
 +
 +
 +
 +
 +
</div>
 +
</html>

Revision as of 14:18, 22 April 2013

El equipo está formado por seis biólogos, un químico, un físico y un computador. Contamos con la ayuda de tres advisors y un instructor

El proyecto se basa en el biosensado cuantitativo de contaminantes en aguas.

La contaminación con arsénico es una problemática a nivel mundial, y en particular en la Argentina.

Los controles existentes son aislados y requieren de conocimientos técnicos y de un equipamiento costoso para el usuario medio. Frente a esto es que surge la idea de brindarle a la población una forma simple, elegante y económica de realizar sus propias pruebas de agua.

Retrieved from "http://2013.igem.org/Team:Buenos_Aires/Templates/menu"