|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/ |
Upload File : |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 TEST</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" href="startup.png" />
<link rel="stylesheet"
type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css" />
<!--script type="text/javascript">
window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
window.addEventListener('load', function(){
setTimeout(scrollTo, 0, 0, 1);
}, false);
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
if (navigator.userAgent.indexOf('Linux') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
</script-->
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() == 0){
$('.scrollToTop').fadeOut("fast");
} else {
if($('.scrollToTop').length == 0){
$('body').append('<div class="scrollToTop">'+
'<a href="#"><img src="http://www.johannlucchini.com/images/fleche.jpg"</a>'+
'</div>');
}
$('.scrollToTop').fadeIn("fast");
}
});
$('.scrollToTop a').live('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop: 0}, 'fast');
});
</script>
<!--script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34362733-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script-->
</head>
<link href="/css/html5_test.css" rel="stylesheet" type="text/css" />
<link href="/css/html5_test_font.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
<body>
<!--header>HTML5 & Web font Test Page</header-->
<!--Header-->
<div class="main">
<header>
<div class="name">
Johann Lucchini / Art director
</div>
<div class="logo"><a href="#"><img class="logoanim" src="http://www.johannlucchini.com/images/logo.png" alt="Accueil"></a>
</div>
<ul class="navigation1">
<li><a href="index.html" class="active">Work</a></li>
<li><a href="about.php"> About</a></li>
<li><a href="http://twitter.com/yopich" target="_blank">Twitter </a></li>
</ul>
</header>
<!--Contenu-->
<section class="rw-wrapper">
<h1 class="rw-sentence">I'm an web designer and kinda idiot<br/>
I love design<br/>
beauty<br/>
&
<span class="rw-words rw-words-1">
<span>life</span>
<span>smart ideas</span>
<span>Bill Murray</span>
<span>cheeseburgers</span>
<span>road trips</span>
<span>beer</span>
<span>street art</span>
<span>dreams</span>
</span>
</h1>
</section>
<ul class="filteroptions option-set">
<li><a href="" data-filter="*" class="active">All</a></li>
<li><a href="" data-filter=".cat1">Web</a></li>
<li><a href="" data-filter=".cat2">Print</a></li>
<li><a href="" data-filter=".cat3">Illustration</a></li>
</ul>
<div id="content">
<div class="box cat2 cat3">
<a href="lenthousiaste.html"><img class="vignette2" src="http://www.johannlucchini.com/images/lenthousiaste_thumbnail.jpg" alt="L'Enthousiaste">
<span class="info">
<span class="text">
<span class="title">French<br /> Mustache<br /> Contest</span>
<span class="type"><br/>/ Affiche sérigraphiée /</span>
</span>
</span>
</a>
</div>
<div class="box cat1"><a href="celio.html"><img class="vignette3" src="http://www.johannlucchini.com/images/celio_thumbnail.jpg" alt="Celio*">
<span class="info"><span class="text"><span class="title">Celio</span><span class="type"><br/>/ E-commerce /</span></span></span></a>
</div>
<div class="box cat1"><a href="st-dupont.html"><img class="vignette2" src="http://www.johannlucchini.com/images/st-dupont_thumbnail.jpg" alt="S.T. Dupont ">
<span class="info"><span class="text"><span class="title">S.T. Dupont</span><span class="type"><br/>/ E-commerce /</span></span></span></a>
</div>
<div class="box cat1"><a href="nuxe.html"><img class="vignette3" src="http://www.johannlucchini.com/images/nuxe_thumbnail.jpg" alt="Nuxe">
<span class="info"><span class="text"><span class="title">Nuxe</span><span class="type"><br/>/ E-commerce /</span></span></span></a>
</div>
<div class="box cat1"><a href="elite.html"><img class="vignette" src="http://www.johannlucchini.com/images/elite_thumbnail.jpg" alt="Elite">
<span class="info"><span class="text"><span class="title">Elite</span><span class="type"><br/>/ E-commerce /</span></span></span></a>
</div>
<div class="box cat1"><a href="pixmania.html"><img class="vignette" src="http://www.johannlucchini.com/images/pixmania_thumbnail.jpg" alt="Pixmania.com">
<span class="info"><span class="text"><span class="title">Pixmania</span><span class="type"><br/>/ E-commerce & customer experience /</span></span></span></a>
</div>
<div class="box cat2 cat3"><a href="black-posters.html"><img class="vignette2" src="http://www.johannlucchini.com/images/filmscultes_thumbnail.jpg" alt="Films cultes">
<span class="info"><span class="text"><span class="title">Black Posters</span><span class="type"><br/>/ Affiches /</span></span></span></a>
</div>
<div class="box"><a href="photo.html"><img class="vignette2" src="http://www.johannlucchini.com/images/photo_thumbnail.jpg" alt="Films cultes">
<span class="info"><span class="text"><span class="title">Photo</span><span class="type"><br/>/ Prises de vie... /</span></span></span></a>
</div>
<div class="box cat2"><a href="cinema.html"><img class="vignette3" src="http://www.johannlucchini.com/images/cinema_thumbnail.jpg" alt="French Film Festival">
<span class="info"><span class="text"><span class="title">French<br />Film<br />Festival</span><span class="type"><br/>/ Affiches /</span></span></span></a>
</div>
<div class="box cat1 cat2"><a href="vitaocean.html"><img class="vignette3" src="http://www.johannlucchini.com/images/vitaocean_thumbnail.jpg" alt="Vitaocean">
<span class="info"><span class="text"><span class="title">Vita<br />ocean</span><span class="type"><br/>/ Design global /</span></span></span></a>
</div>
<div class="box cat1"><a href="adyoulike.html"><img class="vignette" src="http://www.johannlucchini.com/images/adyoulike_thumbnail.jpg" alt="Films cultes">
<span class="info"><span class="text"><span class="title">Adyoulike</span><span class="type"><br/>/ Identité visuelle & webdesign /</span></span></span> </a>
</div>
<div class="box cat1"><a href="fauchon.html"><img class="vignette" src="http://www.johannlucchini.com/images/fauchon_thumbnail.jpg" alt="Fauchon" >
<span class="info"><span class="text"><span class="title">Fauchon</span><span class="type"><br/>/ E-commerce /</span></span></span></a>
</div>
<div class="box cat1"><a href="sinequanone.html"><img class="vignette2" src="http://www.johannlucchini.com/images/sinequanone_thumbnail.jpg" alt="Sinequanone">
<span class="info"><span class="text"><span class="title">Sinequa-<br />none</span><span class="type"><br/>/ E-commerce /</span></span></span></a>
</div>
<div class="box cat3"><a href="molette-reprend-du-service.html"><img class="vignette3" src="http://www.johannlucchini.com/images/molette_thumbnail.jpg" alt="Molette reprend du service" >
<span class="info"><span class="text"><span class="title">Molette reprend<br />du<br />service</span><span class="type"><br/>/ Livre illustré /</span></span></span></a>
</div>
<div class="box cat2"><a href="foci.html"><img class="vignette2" src="http://www.johannlucchini.com/images/foci_thumbnail.jpg" alt="Foci">
<span class="info"><span class="text"><span class="title">Foci</span><span class="type"><br/>/ Design global pour la marque /</span></span></span></a>
</div>
<div class="box cat1 cat2"><a href="loftedition.html"><img class="vignette3" src="http://www.johannlucchini.com/images/loftedition_thumbnail.jpg" alt="Loft Edition">
<span class="info"><span class="text"><span class="title">Loft Edition</span><span class="type"><br/>/ Identité visuelle & webdesign /</span></span></span></a>
</div>
<div class="box cat1"><a href="cite-des-sciences.html"><img class="vignette2" src="http://www.johannlucchini.com/images/citedessciences_thumbnail.jpg" alt="Cité des sciences">
<span class="info"><span class="text"><span class="title">Cité des sciences</span><span class="type"><br/>/ Webdesign /</span></span></span></a>
</div>
<div class="box cat2"><a href="amnesty.html"><img class="vignette2" src="http://www.johannlucchini.com/images/amnesty_thumbnail.jpg" alt="Amnesty International" >
<span class="info"><span class="text"><span class="title">Amnesty</span><span class="type"><br/>/ Affiches /</span></span></span></a>
</div>
<div class="box cat1"><a href="eads-astrium.html"><img class="vignette" src="http://www.johannlucchini.com/images/eads_thumbnail.jpg" alt="EADS Astrium">
<span class="info"><span class="text"><span class="title">EADS</span><span class="type"><br/>/ Webdesign /</span></span></span></a>
</div>
<div class="box cat2"><a href="parisjazz.html"><img class="vignette" src="http://www.johannlucchini.com/images/parisjazz_thumbnail.jpg" alt="Festival Paris Jazz">
<span class="info"><span class="text"><span class="title">Paris Jazz</span><span class="type"><br/>/ Identité visuelle /</span></span></span></a>
</div>
<!--
<div class="box cat2"><a href="#"><img class="vignette2" src="http://www.johannlucchini.com/images/maeght_thumbnail.jpg" alt="Vitaocean">
<span class="info2"><span class="text"><span class="title">Galerie Maeght</span><span class="type"> / Campagne /</span></span></span></a>
</div>
<div class="box cat2 cat3"><a href="#"><img class="vignette" src="http://www.johannlucchini.com/images/fuggifuggi_thumbnail.jpg" alt="Fuggi Fuggi">
<span class="info"><span class="text"><span class="title">Fuggi<br />Fuggi</span><span class="type"> / Illustration mode enfant /</span></span></span></a>
</div>
<div class="box cat1"><a href="#"><img class="vignette" src="http://www.johannlucchini.com/images/ecoutille_thumbnail.jpg" alt="L'écoutille">
<span class="info"><span class="text"><span class="title">Jazz</span><span class="type"> / Site vitrine /</span></span></span></a>
</div>
<div class="box cat2"><a href="#"><img class="vignette" src="http://www.johannlucchini.com/images/gopal_thumbnail.jpg" alt="L'Art de la Vic">
<span class="info"><span class="text"><span class="title">L'Art<br />de la<br />Vichitra Vina</span><span class="type"> / Edition /</span></span></span></a></div>-->
</div> <!-- main -->
<!--aside>
<section style="font-family: mplus-1p-regular;">ホテルのヴェランダで、ゆくりなくも誰とも知らない一人の青年を見つめてしまいました。</section>
<section style="font-family: mplus-1p-bold;">ホテルのヴェランダで、ゆくりなくも誰とも知らない一人の青年を見つめてしまいました。</section>
<section style="font-family: mplus-1mn-light;">ホテルのヴェランダで、ゆくりなくも誰とも知らない一人の青年を見つめてしまいました。</section>
</aside-->
<footer>© 2012 Suh Rynn</footer>
</div>
<div class="scrollToTop"><a href="#"><img class="img-scroll" src="http://www.johannlucchini.com/images/fleche.jpg" alt="Retour en haut"></a></div>
</body>
</html>