Estudio de diseño publicitario y web

Editar "portada", OK.

Título
Keywords
Description
Slideshow <ul id="pagination" class="pagination"> <li onclick="slideshow.pos(0)"> </li> <li onclick="slideshow.pos(1)"> </li> <li onclick="slideshow.pos(2)"> </li> <li onclick="slideshow.pos(3)"> </li> </ul> <div id="slideshow"> <b onclick="slideshow.move(-1)"></b> <i onclick="slideshow.move(1) "></i> <ul id="slides"> <li><a href="/es/portafolio"><img src="/.style/slider-portafolio2.jpg" alt="Red abstract" /></a></li> <li><img src="/.style/slider4.jpg" alt="Green forest" /></li> <li><img src="/.style/slider1.jpg" alt="Sea turtle" /></li> <li><img src="/.style/slider3.jpg" alt="Blue Fish" /></li> </ul> </div> <script type="text/javascript"> var slideshow=new TINY.fader.fade('slideshow',{ id:'slides', auto:2, resume:false, navid:'pagination', activeclass:'current', visible:true, position:0 }); </script>
HTML español <h1> Portafolio</h1> <div class="section" id="quicksand"> <ul class="splitter"> <li class="show"><em>Ver:</em><ul><li class="segment-1 selected-1"><a href="#" data-value="all">Todo</a></li><li class="segment-0"><a href="#" data-value="publi">Publi</a></li><li class="segment-2"><a href="#" data-value="web">Web</a></li></ul></li> <li class="order"><em>Orden:</em><ul><li class="segment-1 selected-1"><a href="#" data-value="name">Título</a></li><li class="segment-2"><a href="#" data-value="size">Fecha</a></li></ul></li></ul> <div class="demo"> <ul style="height: 591px;" id="list" class="image-grid articles"> <a class="publi" href="/es/alhambra"> <img src="/./alhambra/th.png" alt="./alhambra" /> <strong>Alhambra</strong> <span class="bubble">2011-04-11</span></a> <a class="publi" href="/es/cerca-de-mi"> <img src="/./cerca-de-mi/th.png" alt="./cerca-de-mi" /> <strong>Cerca de mi</strong> <span class="bubble">2011-02-19</span></a> <a class="publi" href="/es/comparte-tu-historia"> <img src="/./comparte-tu-historia/th.png" alt="./comparte-tu-historia" /> <strong>Comparte tu historia</strong> <span class="bubble">2009-01-00</span></a> <a class="web" href="/es/fernando-yanguela"> <img src="/./fernando-yanguela/th.png" alt="./fernando-yanguela" /> <strong>Fernando Yangüela</strong> <span class="bubble">2005-01-01</span></a> <a class="web" href="/es/fish-elsewhere"> <img src="/./fish-elsewhere/th.png" alt="./fish-elsewhere" /> <strong>Fish elsewhere</strong> <span class="bubble">2009-08-30</span></a> <a class="publi" href="/es/la-vida-sabe-mejor"> <img src="/./la-vida-sabe-mejor/th.png" alt="./la-vida-sabe-mejor" /> <strong>La Vida Sabe Mejor</strong> <span class="bubble">2012-07-01</span></a> <a class="publi" href="/es/liga-de-reciclaje"> <img src="/./liga-de-reciclaje/th.png" alt="./liga-de-reciclaje" /> <strong>Liga de Reciclaje</strong> <span class="bubble">2009-05-19</span></a> <a class="misc" href="/es/logo"> <img src="/./.img/th-logo-itech.png" alt="./logo" /> <strong>Logos</strong> <span class="bubble">2011-01-23</span></a><!-- <a class="web" href="/es/michl-marine"> <img src="/./michl-marine/th.png" alt="./michl-marine" /> <strong>Michl Marine</strong> <span class="bubble">2011-12-20</span></a>--> <a class="publi" href="/es/no-dejes-que-te-ate"> <img src="/./no-dejes-que-te-ate/th.png" alt="./no-dejes-que-te-ate" /> <strong>No dejes que te ate</strong> <span class="bubble">2009-04-25</span></a> <a class="web" href="/es/phero"> <img src="/./phero/th.png" alt="./phero" /> <strong>Phero</strong> <span class="bubble">2009-01-20</span></a> <a class="web" href="/es/naranja"> <img src="/./naranja/th.png" alt="./ychina" /> <strong>Pokémon Naranja</strong> <span class="bubble">2011-10-00</span></a> <a class="web" href="/es/servisan"> <img src="/./servisan/th.png" alt="./servisan" /> <strong>Servisan</strong> <span class="bubble">2009-02-01</span></a> <a class="web" href="/es/summer-day"> <img src="/./summer-day/th.png" alt="./summer-day" /> <strong>Summer day</strong> <span class="bubble">2010-08-00</span></a> <a class="misc" href="/es/whack-a-hack"> <img src="/./whack-a-hack/th.png" alt="./whack-a-hack" /> <strong>Whack a hack</strong> <span class="bubble">2005-01-01</span></a> <a class="web" href="/es/ychina"> <img src="/./ychina/th.png" alt="./ychina" /> <strong>Ychina</strong> <span class="bubble">2011-10-00</span></a> </ul> </div> <br class="clear" /> <br class="clear" /> <!-- <p id="performance-toggle">Demo seems sluggish? <a href="#toggle">Disable CSS3 scaling</a> and try again.</p> --> </div> <script src="/.js/ga.js" type="text/javascript"></script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-1121012-6"); pageTracker._trackPageview(); } catch(err) {} </script>
HTML english
CSS .section {min-height:720px} .articles a {position:relative} .articles a span {position:absolute; top:8px; left:40px; opacity:0; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; transition:all .3s ease-out } .articles a:hover span {display:block; left:6px; opacity:1} .splitter, .splitter * {padding:0; margin:0; list-style:none} .splitter {display:block; width:352px; height:33px; padding:1px 1px 5px 1px; line-height:29px} .splitter ul, .splitter li li {float:left} .splitter em {font-size:90%; color:#AAA; cursor:default} .splitter li li a {font-size:95%; color:#FFF; font-weight:bold} .splitter em, .splitter li li a {width:50px; display:block; float:left; text-align:center; background:url(/.style/botonera.png) 0px -33px no-repeat transparent; height:33px; } .show em {background-position:0px 0px} .order .segment-2 a {background-position:0px -66px} ul li.selected-0 a, ul li.selected-1 a, ul li.selected-2 a {background-position:0px -99px; line-height:33px} .order li.selected-2 a {background-position:0px -132px; line-height:33px} .zh .splitter em, .zh .splitter li li a {font-weight:normal; font-style:normal} .splitter {margin:9px 5px 0 9px}
URL

Surgever