<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mario Pavón</title>
<link rel="icon" type="image/png" href="http://galeon.com/mariopavon/fotos/favicon.png" />
<link rel="stylesheet" href="http://galeon.com/mariopavon/stylesheet.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://www.essentialsapps.com/js/jquery-1.4.4.min.js" defer></script>
<script type="text/javascript" src="http://www.essentialsapps.com/js/jquery.scrollTo-1.4.2.min.js" defer></script>
<script type="text/javascript" src="http://www.essentialsapps.com/js/scrollto.min.js" defer></script>
<script type="text/javascript" src=" http://galeon.com/mariopavon/java.html"></script>
<script type="text/javascript">
var contador = 1
$(document).ready(function(){
$("button#b-tripinrome").click(function(){ contador = 2
$("div.contenido#tripinrome , p.texto#t-tripinrome").fadeIn(); $("div.contenido#peliculas , p.texto#t-peliculas , div.contenido#soulink , p.texto#t-soulink , div.contenido#smile , p.texto#t-smile , div.contenido#idematrix , p.texto#t-idematrix" ).fadeOut(); });
$("button#b-peliculas").click(function(){ contador = 3
$("div.contenido#peliculas , p.texto#t-peliculas").fadeIn(); $("div.contenido#tripinrome , p.texto#t-tripinrome , div.contenido#soulink , p.texto#t-soulink , div.contenido#smile , p.texto#t-smile , div.contenido#idematrix , p.texto#t-idematrix").fadeOut(); });
$("button#b-soulink").click(function(){ contador = 1
$("div.contenido#soulink , p.texto#t-soulink").fadeIn(); $("div.contenido#tripinrome , p.texto#t-tripinrome ,div.contenido#peliculas , p.texto#t-peliculas , div.contenido#smile , p.texto#t-smile , div.contenido#idematrix , p.texto#t-idematrix").fadeOut(); });
$("button#b-smile").click(function(){ contador = 4
$("div.contenido#smile , p.texto#t-smile").fadeIn(); $("div.contenido#tripinrome , p.texto#t-tripinrome ,div.contenido#peliculas , p.texto#t-peliculas ,div.contenido#soulink , p.texto#t-soulink , div.contenido#idematrix , p.texto#t-idematrix").fadeOut(); });
$("button#b-idematrix").click(function(){ contador = 5
$("div.contenido#idematrix , p.texto#t-idematrix").fadeIn(); $("div.contenido#tripinrome , p.texto#t-tripinrome ,div.contenido#peliculas , p.texto#t-peliculas ,div.contenido#soulink , p.texto#t-soulink ,div.contenido#smile , p.texto#t-smile").fadeOut(); });
if(contador = 1){$("button#b-soulink").css("width","20px").css("height","20px").css("background-color","#990000").css("left","48px").css("top","48px");}
else if(contador = 2){$("button#b-tripinrome").css("width","20px").css("height","20px").css("background-color","#990000").css("left","48px").css("top","48px");}
else if(contador = 3){$("button#b-peliculas").css("width","20px").css("height","20px").css("background-color","#990000").css("left","48px").css("top","48px");}
else if(contador = 4){$("button#b-smile").css("width","20px").css("height","20px").css("background-color","#990000").css("left","48px").css("top","48px");}
else if(contador = 5){$("button#b-idematrix").css("width","20px").css("height","20px").css("background-color","#990000").css("left","48px").css("top","48px");}
});
</script>
<style type="text/css">
*{margin:0px;padding:0px;}
div#cabecera{
width:100%;
height:60px;
position:fixed;
z-index:3;
opacity:0.8;
}
a#logo{
position:absolute;
left:50px;
height:34px;
width:200px;
top:50%;
margin-top:-12px;
background-image:url(http://galeon.com/mariopavon/fotos/mariopavon.png);
}
ul#menu{
position:absolute;
float:left;
left:50%;
margin-left:-280px;
list-style-type:none;
height:34px;
top:50%;
margin-top:-3px;
font-family:'futura_bk_btbook';
font-size:16px;}
ul#menu li{
position:relative;
float:left;
margin-left:20px;
color:#dadada;}
ul#menu li a{
text-decoration:none;
color:#dadada;
letter-spacing:1px;
}
ul#menu li a:hover{background-color:#990000; color:#ececec;}
ul#rrss{
position:absolute;
float:left;
right:75px;
list-style-type:none;
height:30px;
width:150px;
top:50%;
margin-top:-10px;}
ul#rrss li{
position:relative;
float:left;
width:25px;
height:25px;
margin-left:5px;}
ul#rrss li a#tumblr{
position:fixed;
width:25px;
height:25px;
background-image:url(http://galeon.com/mariopavon/fotos/tumblr.png);}
ul#rrss li a#facebook{
position:fixed;
width:25px;
height:25px;
background-image:url(http://galeon.com/mariopavon/fotos/facebook.png);}
ul#rrss li a#vimeo{
position:fixed;
width:25px;
height:25px;
background-image:url(http://galeon.com/mariopavon/fotos/vimeo.png);}
ul#rrss li a#linkedin{
position:fixed;
width:25px;
height:25px;
background-image:url(http://galeon.com/mariopavon/fotos/linkedin.png);}
ul#rrss li a#spotify{
position:fixed;
width:25px;
height:25px;
background-image:url(http://galeon.com/mariopavon/fotos/spotify.png);}
ul#rrss li a:hover{background-position:0px -25px;}
div.seccion{ position:relative;
width:100%;
height:750px;
font-family:'futura_bk_btbook';
}
div.seccion#uno{
background-image:url(http://galeon.com/mariopavon/fotos/fondopavoneon.gif);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
-khtml-background-size:cover;}
div.seccion#dos{
background-color:#282828;}
div#separador{
position:relative;
width:100%;
height:208px;
background-image:url(http://galeon.com/mariopavon/fotos/separador-dos.png);
background-repeat:no-repeat;
background-position:center;
}
div.seccion#cinco{
background-color:#282828;}
div.seccion#siete{
background-color:#282828;}
div.contenedor{ position:absolute;
width:1000px;
height:560px;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-280px;
border-radius:5px;}
div.contenedor#grafico{background-color:#dadada;}
div.contenedor#video{background-color:#dadada;}
div#cajavideo{position:absolute;width:747px;height:560px;right:0px}
div.contenedor#contacto{background-color:#dadada;}
p#textopersonal{position:absolute;width:350px;height:260px;left:100px;bottom:120px;font-size:14px;}
div#datos{position:absolute; width:315px; font-size:20px; top:90px; right:100px; letter-spacing:1px; line-height:160%;color:#282828;padding-left:5px;}
div#logomail{position:absolute;width:25px;height:25px;background-image:url(http://galeon.com/mariopavon/fotos/mail.png);left:-30px;top:5px;}
div#logotelefono{position:absolute;width:25px;height:25px;background-image:url(http://galeon.com/mariopavon/fotos/telefono.png);left:-30px;top:35px;}
div.contenido{ position:absolute;
width:720px;
height:100%;
right:0px;}
div.contenido#tripinrome{background-image:url(http://galeon.com/mariopavon/fotos/tripinrome.png);display:none}
div.contenido#peliculas{background-image:url(http://galeon.com/mariopavon/fotos/peliculas.png);display:none;}
div.contenido#soulink{background-image:url(http://galeon.com/mariopavon/fotos/soulink.png);}
div.contenido#smile{background-image:url(http://galeon.com/mariopavon/fotos/smile.png);display:none;}
div.contenido#idematrix{background-image:url(http://galeon.com/mariopavon/fotos/idematrix.png);display:none;}
p.texto{position:absolute;font-size:14px;left:50px;bottom:50px;width:200px;}
p.texto#t-tripinrome{color:#282828;display:none;}
p.texto#t-peliculas{color:#282828;display:none;}
p.texto#t-soulink{color:#282828;}
p.texto#t-smile{color:#282828;display:none;}
p.texto#t-idematrix{color:#282828;display:none;}
span#titulo{font-size:16px;letter-spacing:1px;}
img{ position:absolute;
left:-45px;
bottom:0px;}
img#grafico{bottom:-15px;}
img#video{bottom:-45px;}
button{ position:absolute;
float:left;
left:50px;
top:50px;
width:15px;
height:15px;
border-radius:100%;
border:none;
background-color:#282828;}
button#b-tripinrome{left:87px;}
button#b-peliculas{left:124px;}
button#b-smile{left:161px;}
button#b-idematrix{left:198px;}
button#b-tfm{left:235px;}
button:hover{background-color:#990000;width:20px;height:20px;left:48px;top:48px;}
div#footer{
position:relative;
bottom:0px;
width:100%;
height:208px;
background-image: url(http://galeon.com/mariopavon/fotos/footer.png);
background-position:center;}
div.rotulo{ width:60px;
height:500px;
position:absolute;
top:50%;
margin-top:-250px;
left:50px;
}
</style>
</head>
<body>
<div id="cabecera">
<a id="logo" href="" ></a>
<ul id="menu">
<li>|</li>
<li><a id="home" title="Home" href="javascript:$.scrollTo('div.seccion#uno',1000)">HOME</a></li> <li>|</li>
<li><a id="grafico" title="Gráfico" href="javascript:$.scrollTo('div.seccion#dos',1000)">DISEÑO GRÁFICO</a></li> <li>|</li>
<li><a id="video" title="Video" href="javascript:$.scrollTo('div.seccion#cinco',1000)">VIDEO</a></li> <li>|</li>
<li><a id="contacto" title="Contacto" href="javascript:$.scrollTo('div.seccion#siete',1000)">CONTACTO</a></li> <li>|</li>
</ul>
<ul id="rrss">
<li><a id="tumblr" title="Tumblr" href="http://mariopavonalv.tumblr.com"></a></li>
<li><a id="facebook" title="Facebook" href=""></a></li>
<li><a id="linkedin" title="LinkedIn" href=""></a></li>
<li><a id="vimeo" title="Vimeo" href=""></a></li>
<li><a id="spotify" title="Spotify" href="http://open.spotify.com/user/mariopavonalvarez"></a></li>
</ul>
</div>
<div class="seccion" id="uno">
<img id="pavoneon" src="pavoneon.gif" title="welcome" />
</div>
<div id="separador"></div>
<div class="seccion" id="dos">
<div class="rotulo" id="grafico"></div>
<div class="contenedor" id="grafico">
<button id="b-soulink" title="Soulink"></button>
<button id="b-tripinrome" title="Trip in Rome"></button>
<button id="b-peliculas" title="Carteles de Cine"></button>
<button id="b-smile" title="Smile"></button>
<button id="b-idematrix" title="Idematrix"></button>
<button id="b-tfm" title="Butler y Spivak"></button>
<div class="contenido" id="tripinrome"></div>
<div class="contenido" id="peliculas"></div>
<div class="contenido" id="soulink"></div>
<div class="contenido" id="smile"></div>
<div class="contenido" id="idematrix"></div>
<p class="texto" id="t-tripinrome"><span id="titulo">PORTADA ÁLBUM:</span><br /><br />
El trabajo consistía en diseñar la portada de un álbum, para un grupo de música punk-rock con una base muy electrónica. La temática del disco gira entorno a los viajes psicodélicos y espacio-temporales, por lo que ésta me pareció la mejor propuesta.
</p>
<p class="texto" id="t-peliculas"><span id="titulo">LOGOTIPO</span><br /><br />
Una serie de carteles inspirados en algunas de mis películas favoritas. Los diseños tenían que constar de un logotipo sencillo acompañado por una tipografía Helvética.
</p>
<p class="texto" id="t-soulink"><span id="titulo">IDENTIDAD VISUAL CORPORATIVA</span><br /><br />
Desarrollo de la imagen corporativa para una empresa ficticia dedicada a piercings y tatuajes. El diseño del logotipo se asemeja al típico sello de calidad, metalizado y manchado de tinta para representar la actividad de la empresa. Se incluyen dos diseños de papelería corporativa, uno de ellos de producción más barata ya que está hecho a una sola tinta.
</p>
<p class="texto" id="t-smile"><span id="titulo">lOGOTIPO</span><br /><br />
Propuesta para concurso. Smile & Co. es una marca de ropa orientada a un público aficionado a deportes como el skateboarding y el snowboarding. El diseño del logotipo y la tipografía escogida aportan el toque elegante, moderno y desenfadado que los clientes buscaban.
</p>
<p class="texto" id="t-idematrix"><span id="titulo">IDENTIDAD VISUAL CORPORATIVA</span><br /><br />
Propuesta para concurso. Se trata de una empresa de Business Angels de reciente creación. Los clientes buscaban que el logotipo guardase la proporción áurea, además de representar los conceptos “idea” y “matriz”. La idea queda representada por el cerebro contenido en la D y por el símbolo ID que también simula una bombilla, la matriz está implícita en la proporción aúrea además de la línea superior sobre la palabra.
</p>
</div>
</div>
<div class="seccion" id="cinco">
<div class="rotulo" id="video"></div>
<div class="contenedor" id="video">
<div id="cajavideo">
<iframe src="//player.vimeo.com/video/105489227" width="747" height="560" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="seccion" id="siete">
<div class="rotulo" id="contacto"></div>
<div class="contenedor" id="contacto">
<p id="textopersonal">
</p>
<div id="datos">
<div id="logomail"></div>pavon.alvarez@gmail.com<br />
<div id="logotelefono"></div>+34 684 624 536
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
