<!DOCTYPE html>
<html>
<style>
#cadreglobal{
width:500px;
height:1270px;
background-image:url('http://i86.servimg.com/u/f86/18/88/54/70/tylych10.jpg');
display:block;
}
#bandeauname{
width:500px;
height:80px;
background-image:radial-gradient(white, #8D8D8D);
margin-top:20px;
-moz-box-shadow: inset 0 9px 9px -9px black,
inset 0 -9px 9px -9px black;
-webkit-box-shadow: inset 0 9px 9px --9px black,
inset 0 -9px 9px -9px black;
box-shadow: inset 0 9px 9px -9px black,
inset 0 -9px 9px -9px black;
}
#bandeauname h1{
text-align:center;
font-size:25px;
color:black;
margin:0;
line-height:70px;
font-family: 'Josefin Sans', sans-serif;
}
#bandeauname h2{
text-align:center;
font-size:15px;
color:black;
margin:0;
margin-top:-40px;
font-family: 'Josefin Sans', sans-serif;
}
.avatar{
width:490px;
height:300px;
background-image:url('http://i86.servimg.com/u/f86/18/88/54/70/dirt_b11.jpg');
margin:5px;
}
.infoperso{
width:40px;
height:40px;
background-image:radial-gradient(white, #8D8D8D);
border-radius:20px;
float:right;
text-align:center;
line-height:11px;
font-size:50px;
font-family:'Josefin Sans';
margin-top:-50px;
margin-right:10px;
}
.nul{
width:500px;
height:1px;
}
a.infoavatar{
position:relative;
z-index:24;
color:#000;
text-decoration:none;
}
a.infoavatar:hover{
z-index:25;
}
a.infoavatar span{
display: none;
}
a.infoavatar:hover span{
display:block;
position:absolute;
top:60px;
left:-400px;
width:400px;
border:1px groove black;
box-shadow:0 0 8px black;
background-image:radial-gradient(white, #8D8D8D);
color:#000;
text-align: justify;
font-weight:normal;
font-size:12px;
font-family:'Josefin Sans';
padding:5px;
}
.RP1{
width:490px;
height:30px;
background-image:radial-gradient(white, #8D8D8D);
margin:auto;
}
.RP1 h3{
text-align:center;
font-size:15px;
color:black;
font-family: 'Josefin Sans', sans-serif;
line-height:30px;
margin:0;
}
.RP1:hover .RP1hover{
opacity:1;
}
.RP1hover {
opacity:0;
text-align: center;
width:490px;
height:auto;
background: #C8C8C8;
color: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
font-family: 'Josefin Sans', sans-serif;
}
.RP2{
width:490px;
height:30px;
background-image:radial-gradient(white, #8D8D8D);
margin:auto;
margin-top:40px;
}
.RP2 h3{
text-align:center;
font-size:15px;
color:black;
font-family: 'Josefin Sans', sans-serif;
line-height:30px;
margin:0;
}
.RP2:hover .RP2hover{
opacity:1;
}
.RP2hover {
opacity:0;
text-align: center;
width:490px;
height:auto;
background: #C8C8C8;
color: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:auto;
font-family: 'Josefin Sans', sans-serif;
}
.histoire{
width:490px;
height:30px;
background-image:radial-gradient(white, #8D8D8D);
margin:auto;
margin-top:40px;
}
.histoire p{
text-align:justify;
margin:0;
}
.histoire h3{
text-align:center;
font-size:15px;
color:black;
font-family: 'Josefin Sans', sans-serif;
line-height:30px;
margin:0;
}
.histoire:hover .histoirehover{
opacity:1;
}
.histoirehover {
opacity:0;
text-align: center;
width:490px;
height:300px;
background: #C8C8C8;
color: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:auto;
font-family: 'Josefin Sans', sans-serif;
overflow:auto;
}
.titreamis{
width:150px;
height:30px;
background-image:radial-gradient(white, #8D8D8D);
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
margin-top:100px;
margin-left:-55px;
}
.titreamis h3{
text-align:center;
font-size:15px;
color:black;
font-family: 'Josefin Sans', sans-serif;
line-height:30px;
margin:0;
}
.cadreamis{
width: 460px;
height: 150px;
background-image: radial-gradient(white, #8D8D8D);
margin-top: -90px;
margin-left: 35px;
}
.titreenemis{
width:150px;
height:30px;
background-image:radial-gradient(white, #8D8D8D);
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
margin-top:75px;
margin-left:-55px;
}
.titreenemis h3{
text-align:center;
font-size:15px;
color:black;
font-family: 'Josefin Sans', sans-serif;
line-height:30px;
margin:0;
}
.cadreenemis{
width: 460px;
height: 150px;
background-image: radial-gradient(white, #8D8D8D);
margin-top: -90px;
margin-left: 35px;
}
.cadreamis:hover .amishover{
opacity:1;
}
.amishover {
opacity:0;
text-align: center;
width:460px;
height:150px;
background: #C8C8C8;
color: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:auto;
overflow:auto;
}
.cadreenemis:hover .enemishover{
opacity:1;
}
.enemishover {
opacity:0;
text-align: center;
width:460px;
height:150px;
background: #C8C8C8;
color: black;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin:auto;
overflow:auto;
}
.listeamis{
width:120px;
height:120px;
margin-top:7px;
margin-left:24px;
float:left;
font-family: 'Josefin Sans', sans-serif;
color:green;
}
.listeenemis{
width:120px;
height:120px;
margin-top:7px;
margin-left:24px;
float:left;
font-family: 'Josefin Sans', sans-serif;
color:red;
}
#copyright, #copyright a{
width:500px;
height:auto;
background-color:white;
text-align: center;
font-size:15px;
font-family: 'Josefin Sans', sans-serif;
color:black;
margin-top:310px;
}
</style>
<head>
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>Fiche lien #1</title>
</head>
<body>
<div id="cadreglobal">
<div class="nul"><!-- NE PAS TOUCHER --></div>
<div id="bandeauname">
<h1>Nom & Prenom</h1><br>
<h2>C'est fort en chocapic !</h2>
</div>
<div class="avatar"></div>
<div class="infoperso"><a class="infoavatar" href="#">...<span> CARACTERE DU PERSONNAGE ICI </span></a></div>
<div class="RP1"><h3>RP EN COURS !</h3>
<div class="RP1hover">- Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien </div>
</div>
<div class="RP2"><h3>RP TERMINES !</h3>
<div class="RP2hover">- Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien - Lien</div>
</div>
<div class="titreamis"><h3>MES AMIS</h3></div>
<div class="cadreamis"><div class="amishover">
<div class="listeamis"><img src="http://i86.servimg.com/u/f86/18/88/54/70/11151j11.gif">Shakumiro</div>
<div class="listeamis"><img src="http://i86.servimg.com/u/f86/18/88/54/70/11151j11.gif">Shakumiro</div>
<div class="listeamis"><img src="http://i86.servimg.com/u/f86/18/88/54/70/11151j11.gif">Shakumiro</div>
</div>
</div>
<div class="titreenemis"><h3>MES ENNEMIS</h3></div>
<div class="cadreenemis"><div class="enemishover">
<div class="listeenemis"><img src="http://i86.servimg.com/u/f86/18/88/54/70/11151j11.gif">Shakumiro</div>
<div class="listeenemis"><img src="http://i86.servimg.com/u/f86/18/88/54/70/11151j11.gif">Shakumiro</div>
<div class="listeenemis"><img src="http://i86.servimg.com/u/f86/18/88/54/70/11151j11.gif">Shakumiro</div>
</div>
</div>
<div class="histoire"><h3>MON HISTOIRE</h3>
<div class="histoirehover"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta dui justo, ut fringilla elit volutpat vitae. Nunc dui felis, gravida nec gravida sit amet, imperdiet sed orci. Donec eget magna dapibus odio maximus sagittis. Suspendisse posuere molestie elit quis pretium. Nulla at leo dolor. Vestibulum ornare cursus metus, nec vestibulum diam. Donec pharetra consequat tellus a volutpat. Vestibulum cursus augue quis turpis posuere commodo.
Vivamus molestie ex a nunc efficitur, at fringilla sem elementum. Suspendisse gravida dignissim nisi, eu sodales nibh sollicitudin sit amet. Vestibulum id neque leo. Duis ullamcorper convallis sodales. Ut ut mattis justo. Duis ac imperdiet magna, venenatis congue mi. Nullam pellentesque tempor quam eu consectetur. Proin sagittis, sapien sodales placerat iaculis, nisi orci porttitor felis, sed porta tortor leo ac mauris. Sed rutrum iaculis lacus nec pulvinar. Duis dapibus efficitur nibh sed sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus molestie ex a nunc efficitur, at fringilla sem elementum. Suspendisse gravida dignissim nisi, eu sodales nibh sollicitudin sit amet. Vestibulum id neque leo. Duis ullamcorper convallis sodales. Ut ut mattis justo. Duis ac imperdiet magna, venenatis congue mi. Nullam pellentesque tempor quam eu consectetur. Proin sagittis, sapien sodales placerat iaculis, nisi orci porttitor felis, sed porta tortor leo ac mauris. Sed rutrum iaculis lacus nec pulvinar. Duis dapibus efficitur nibh sed sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p></div>
</div>
<div id="copyright"><b>Fiche codée par <a href="http://ocean-home.forumactif.org/u97">Shakumiro</a> pour <a href="http://ocean-home.forumactif.org/">Ocean Home</a></b></div>
</div>
</body>
</html>
Accueil 
