|
|
| 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>
| |
| - |
| |
| - |
| |
| - | 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>
| |
"
