<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet)
.className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).
className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet)
.style.display = 'none';
document.getElementById('contenu_onglet_'+name).
style.display = 'block';
anc_onglet = name;
}
//-->
</script>
<style type="text/css">
.header{
width : 599px;
height : 299px;
border : 5px solid #5bc2a4;
background : url('http://www.asesoriasmava.cl/images/Imagenes_banner/accounting_exel.285214557-600x300.jpg');
margin : -5px 0px 0px 0px;
}
.onglets{
width : 650px;
height : auto;
background : #5bc2a4;
border-radius : 20px;
}
.onglet_1{
width : auto;
height : 50px;
display:inline-block;
position: relative;
overflow: hidden;
font-family: 'Lobster', cursive;
font-size : 35px;
color : #97e6d9;
text-shadow : 1px 1px 0px #37939b;
-webkit-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
-moz-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
-o-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
}
.onglet_0 {
width : auto;
height : 50px;
display:inline-block;
position: relative;
overflow: hidden;
color : #ebdcb1;
font-size : 35px;
font-family: 'Lobster', cursive;
-webkit-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
-moz-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
-o-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
;
}
.onglet:hover{
color : #fcf0b6;
text-shadow : 0px 0px 2px #37939b;
-webkit-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
-moz-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
-o-transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
transition-duration:500ms,500ms,500ms,500ms,500ms,500ms;
}
.contenu_onglet {
display:none;
padding : 10px;
font-size : 18px ;
font-family: 'Lobster', cursive;
line-height : center;
height : 510px;
width : 550px;
background-color: rgba(91, 194, 164, 1);
border-radius : 20px;
margin-top : 30px;
overflow : none;
color: #ebdcb1;
text-shadow : 1px 1px 0px #bbbbbb;
text-align : justify;
}
.fond{
width : 600px;
height : 1000px;
background : #ebdcb1;
}
.description{
width : 500px;
height : 400px;
overflow :auto;
text-align : justify;
padding : 10px;
color : #5bc2a4;
font-size : 18px ;
font-family: 'Lobster', cursive;
}
img {
max-width: 100%;
height: auto;
margin : 5px 0px 5px 0px;
}
</style>
<body>
<center>
<div class="header"> </div>
<div class="onglets">
<span onclick="javascript:change_onglet('1er');" id="onglet_1er" class="onglet_0 onglet" style="width : 110px;">Avatar</span>
<span onclick="javascript:change_onglet('2eme');" id="onglet_2eme" class="onglet_0 onglet" style="width : 150px;">Signature</span>
<span onclick="javascript:change_onglet('3eme');" id="onglet_3eme" class="onglet_0 onglet" style="width : 70px;">Kit</span>
<span onclick="javascript:change_onglet('4eme');" id="onglet_4eme" class="onglet_0 onglet" style="width : 110px;">Header</span>
<span onclick="javascript:change_onglet('5eme');" id="onglet_5eme" class="onglet_0 onglet" style="width : 100px;">Autre</span>
</div>
<div class="fond">
<div class="description">
Pellentesque tincidunt ut enim vel commodo. Phasellus rutrum iaculis eleifend. In eu mi vel justo faucibus aliquet. Nulla congue lectus et elit vulputate interdum. Quisque non iaculis nisl. In hac habitasse platea dictumst. Morbi tellus mi, pharetra ut mauris non, semper lacinia orci. Vivamus interdum risus id nisl pulvinar, nec adipiscing diam commodo. Morbi semper, enim id porta dapibus, libero ante porta nisi, vitae interdum turpis lorem vitae augue. Duis bibendum sem eu tortor volutpat sollicitudin nec id diam. Phasellus scelerisque ut mi sed viverra. Sed accumsan libero id neque consectetur, scelerisque viverra turpis tempor. Phasellus leo odio, placerat quis porttitor at, tincidunt ut magna. Curabitur accumsan pretium magna, ornare mattis urna luctus ac.
Nulla tristique nulla id orci pharetra, vitae faucibus ligula rhoncus. Integer pulvinar, urna ut iaculis tristique, velit tortor venenatis ante, interdum faucibus velit mauris et odio. Aliquam mollis commodo metus, eleifend tincidunt quam mattis vitae. Aliquam lobortis vulputate risus, at blandit mauris congue venenatis. Donec eget est eget ante luctus auctor. Integer in urna mauris. Proin rutrum sit amet dolor ut cursus. Curabitur scelerisque feugiat tellus, ac laoreet nisl cursus sagittis. Duis ut bibendum turpis. Aliquam cursus lectus sed diam blandit, a tristique tortor dictum. Morbi vestibulum et ligula id dapibus. Maecenas adipiscing eu enim ac posuere. Maecenas ornare libero at rutrum vulputate. Sed interdum dignissim felis convallis adipiscing. Quisque tellus nulla, dictum eget tellus vel, blandit auctor dui. Proin bibendum dignissim justo, sit amet dictum elit vulputate et.
Quisque bibendum sagittis condimentum. Vestibulum pretium nulla nibh, at imperdiet urna aliquam eu. Ut nec neque posuere nisl placerat pellentesque nec at risus. Integer hendrerit, tellus sit amet accumsan gravida, dolor elit convallis neque, sed condimentum nulla erat nec libero. Duis nisl dui, aliquet quis diam vitae, elementum convallis sapien. Nunc mattis turpis et turpis rutrum dapibus. Phasellus euismod, ligula nec sagittis dignissim, enim mi iaculis turpis, vitae feugiat arcu libero sit amet felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula bibendum justo, nec varius ante dapibus eget. Suspendisse sed feugiat ante. Sed tristique bibendum lobortis. Morbi bibendum eros vel sodales tempor. Phasellus pellentesque molestie velit, eu scelerisque nibh venenatis eget. Vivamus consequat sodales euismod. Duis orci purus, mattis sed sapien vitae, rhoncus dictum eros. Aliquam bibendum iaculis lorem nec aliquet. Nullam erat lectus, convallis id egestas nec, consectetur ut nibh. Ut id erat cursus, rhoncus magna sit amet, gravida felis. Aenean laoreet velit quis tortor ornare, at pretium augue malesuada. Nam non consequat erat, vitae interdum enim. Vestibulum eu est blandit, consectetur purus nec, rutrum lorem. Ut et ante ipsum.
</div>
<div id="contenu_onglet_1er" class="contenu_onglet" style="overflow : auto;">
<a href="[url=http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg]http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg[/url]" target="_blank"><img src="[url=http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg]http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg[/url]" /></a>
<a href="[url=http://blog.gettyimages.com/wp-content/uploads/2012/10/81076116-Chip-Somodevilla-Getty-Images-e1351541533518.jpg]http://blog.gettyimages.com/wp-content/uploads/2012/10/81076116-Chip-Somodevilla-Getty-Images-e1351541533518.jpg" target="_blank"><img src="[url=http://blog.gettyimages.com/wp-content/uploads/2012/10/81076116-Chip-Somodevilla-Getty-Images-e1351541533518.jpg]http://blog.gettyimages.com/wp-content/uploads/2012/10/81076116-Chip-Somodevilla-Getty-Images-e1351541533518.jpg[/url]" /></a>
</div>
<div id="contenu_onglet_2eme" class="contenu_onglet" style="overflow : auto;"> </div>
<div id="contenu_onglet_3eme" class="contenu_onglet" style="overflow : auto;"> </div>
<div id="contenu_onglet_4eme" class="contenu_onglet" style="overflow : auto;"> </div>
<div id="contenu_onglet_5eme" class="contenu_onglet" style="overflow : auto;"> </div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</div>
</center>
</body>
Accueil Règlement 
Lun 01 Sep 2014, 11:46
