Team:Buenos Aires
From 2013.igem.org
(Difference between revisions)
(prueba) |
|||
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <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> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | body.templa{ | |
+ | margin-left: auto; | ||
+ | margin-right:auto; | ||
- | + | width:830px; | |
- | + | height: 1000px; | |
- | + | color: #000000; | |
- | + | font-size: 14px; | |
- | + | letter-spacing: 1px; | |
- | + | line-height: 30px; | |
- | + | ||
- | + | text-align: left; | |
- | + | ||
- | + | background:url("http://s3.postimg.org/ou7ozf5kz/background.png"); | |
- | + | background-repeat:no-repeat; | |
+ | background-position:50% 50%; | ||
+ | background-size: 100% 100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | span{ | ||
+ | |||
+ | width: 480px; | ||
+ | height: 350px; | ||
+ | margin-left: 10%; | ||
+ | margin-right:10%; | ||
+ | |||
+ | |||
+ | background:#F8F8F8; | ||
+ | border: 5px solid #DFDFDF; | ||
+ | color: #000000; | ||
+ | font-size: 13px; | ||
+ | letter-spacing: 1px; | ||
+ | line-height: 30px; | ||
+ | |||
+ | text-align: left; | ||
+ | |||
+ | position:absolute; | ||
+ | |||
+ | |||
+ | opacity:0; | ||
+ | |||
+ | |||
+ | 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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <body class="templa"> | ||
+ | |||
+ | |||
+ | <ul id="menu" class="menu"> | ||
+ | <li class="item" id="proj"> <a class="boton" href="#Project">Project</a></li> | ||
+ | <li class="item" id="team"> <a class="boton" href="#Team">Team</a></li> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | <span id="teamPrev"> | ||
+ | Fotitos de los pibes | ||
+ | </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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
+ | </html> |
Revision as of 03:39, 22 April 2013
Fotitos de los pibes
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.