<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Musitag - Futur en Seine 2012</title>
<link rel="stylesheet" type="text/css" href="css/musitag.css" />
</head>
<body>
<div class="big-container">
<div class="home-header">
<h1>Musitag</h1>
<h2>Mets tes couleurs, tes émotions<br />et ta voix sur la musique !</h2>
</div>
<div class="home-media">
<a href="#">
<img class="home-media-image" src="media/wari-120.jpg" />
</a>
<h3>
<a href="#">Au Clair de la Lune</a>
</h3>
<h4>
<a href="#">Steve Waring</a>
</h4>
<ul class="home-dataviz home-dataviz-colors">
<li>
<div class="tag-container-50">
<div class="tag-shadow"></div>
<div class="tag-color tag-green"></div>
</div>
</li>
<li style="width: 40px">
<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
<div class="tag-shadow"></div>
<div class="tag-color tag-yellow"></div>
</div>
</li>
<li style="width: 25px">
<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
<div class="tag-shadow"></div>
<div class="tag-color tag-red"></div>
</div>
</li>
<li style="width: 10px">
<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
<div class="tag-shadow"></div>
<div class="tag-color tag-blue"></div>
</div>
</li>
</ul>
<ul class="home-dataviz home-dataviz-emoticon">
<li>
<div class="tag-container-50">
<div class="tag-shadow"></div>
<div class="tag-color"></div>
<div class="tag-emoticon tag-laughing"></div>
</div>
</li>
<li style="width: 40px">
<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
<div class="tag-color"></div>
<div class="tag-emoticon tag-happy"></div>
</div>
</li>
<li style="width: 25px">
<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
<div class="tag-color"></div>
<div class="tag-emoticon tag-surprised"></div>
</div>
</li>
<li style="width: 10px">
<div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
<div class="tag-color"></div>
<div class="tag-emoticon tag-unhappy"></div>
</div>
</li>
</ul>
</div>
<div class="home-media">
<a href="#">
<img class="home-media-image" src="media/wari-120.jpg" />
</a>
<h3>
<a href="#">Au Clair de la Lune</a>
</h3>
<h4>
<a href="#">Steve Waring</a>
</h4>
</div>
<div class="home-media">
<a href="#">
<img class="home-media-image" src="media/wari-120.jpg" />
</a>
<h3>
<a href="#">Au Clair de la Lune</a>
</h3>
<h4>
<a href="#">Steve Waring</a>
</h4>
</div>
<div class="home-media">
<a href="#">
<img class="home-media-image" src="media/wari-120.jpg" />
</a>
<h3>
<a href="#">Au Clair de la Lune</a>
</h3>
<h4>
<a href="#">Steve Waring</a>
</h4>
</div>
<div class="home-media">
<a href="#">
<img class="home-media-image" src="media/wari-120.jpg" />
</a>
<h3>
<a href="#">Au Clair de la Lune</a>
</h3>
<h4>
<a href="#">Steve Waring</a>
</h4>
</div>
<div class="home-media">
<a href="#">
<img class="home-media-image" src="media/wari-120.jpg" />
</a>
<h3>
<a href="#">Au Clair de la Lune</a>
</h3>
<h4>
<a href="#">Steve Waring</a>
</h4>
</div>
</div>
</body>
</html>