<!DOCTYPE html>
<html lang="fr">
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet" type="text/css">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="author" content="Nom de l'auteur" />
<meta name="description" content"Description de la page en quelques phrases" />
<title>Titre de votre page</title>
<style type="text/css">
.fondg{
height: 920px;
width: 600px;
background:url('http://image.noelshack.com/fichiers/2016/30/1469960528-oceanshaden.png');
}
.gtitre{
width:600px;
height:150px;
font-size: 34px;
font-family:Marck Script;
text-align: center;
padding-top: 60px;
transform:rotate(-3deg);
text-shadow:1px 1px 0px #67714a;
letter-spacing: 6px;
color: white;
}
.avatar{
height: 200px;
width: 200px;
background:url(http://image.noelshack.com/fichiers/2016/30/1469966698-ertuiklmliuytr.png);
margin-left:50px;
margin-top:-55px;
transform:rotate(-10deg);
border-radius: 100px;
-webkit-transition-duration:1000ms;
-moz-transition-duration:1000ms;
-o-transition-duration:1000ms;
-transition-duration:1000ms;
box-shadow: 0px 0px 5px grey;
}
.avatar:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transition-duration:1000ms;
-moz-transition-duration:1000ms;
-o-transition-duration:1000ms;
-transition-duration:1000ms;
}
.presentation{
width: 275px;
height: 195px;
color: white;
font-size: 14px;
font-family: Courier new;
text-align: center;
margin-left: -5px;
margin-top: -25px;
overflow: hidden;
line-height: 30px;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #5e4444;
}
.faq{
width:490px;
max-height: 80px;
color: white;
font-size: 11px;
font-family: courier new;
text-align: justify;
margin-left: 60px;
margin-top: 10px;
overflow: auto;
padding: 5px;
text-shadow: 1px 1px 0px #a17878;
}
.titrepave{
font-family:marck Script;
font-size: 20px;
color: white;
text-shadow:1px 1px 0px #67714a;
text-align: center;
margin-top: 40px;
letter-spacing: 2px;
margin-left: 50px;
}
.pave{
color: white;
font-family: courier new;
font-size: 12px;
letter-spacing: 2px;
text-align: justify;
height: 190px;
width: 380px;
overflow: auto;
margin-left: 125px;
padding: 5px;
margin-top: 15px;
text-shadow: 1px 1px 0px #956161;
}
.copyright{
z-index: 1;
color: white;
font-family: marck script;
font-size: 12px;
text-shadow:1px 1px 0px #67714a;
text-align: right;
transform: rotate(-3deg);
margin-right: 100px;
margin-top: -20px;
}
.citation{
z-index: 2;
width: 500px;
height: 40px;
color: #594747;
font-size: 12px;
font-family: marck script;
text-align: center;
margin-top: 40px;
margin-left: 60px;
line-height: -15px;
overflow: hidden;
}
.lignemaj{
height: 20px;
width: 150px;
margin-left: 100px;
margin-top: 10px;
}
.maj{
display:inline-block;
position: relative;
z-index:3;
margin-left: -5px;
-webkit-transition-duration:1000ms;
-moz-transition-duration:1000ms;
-o-transition-duration:1000ms;
-transition-duration:1000ms;
}
.maj:hover{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transition-duration:1000ms;
-moz-transition-duration:1000ms;
-o-transition-duration:1000ms;
-transition-duration:1000ms;
}
</style>
<body>
<div class="fondg">
<div class="gtitre">Océan de Pseudo</div>
<table><tr>
<td><div class="avatar"></div></td>
<td><div class="presentation">
Prénom: Réponse ici <br/>
Origines: Réponse ici <br/>
Hobbies: Réponse ici<br/>
Signe astro: Réponse ici<br/>
Signe Chinois: Réponse ici <br/>
Etudes: Réponse ici<br/></div></td>
</tr></table>
<div class="faq"><span style="font-family:Marck Script;font-size:14px;">Question éventuelle:</span> Réponse ici Réponse ici Réponse ici Réponse ici<br/>
<span style="font-family:Marck Script;font-size:14px;">Question éventuelle:</span> Réponse ici Réponse ici Réponse ici Réponse ici <br/>
<span style="font-family:Marck Script;font-size:14px;">Question éventuelle:</span> Réponse ici Réponse ici Réponse ici Réponse ici <br/>
<span style="font-family:Marck Script;font-size:14px;">Question éventuelle:</span> Réponse ici Réponse ici Réponse ici Réponse ici <br/>
</div>
<div class="titrepave">Titre de mon premier pavé ici</div>
<div class="pave">Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis
confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut
appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini
praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque
discrimen vitae vexatus nihil fateri conpulsus est.
Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis
confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut
appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini
praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque
discrimen vitae vexatus nihil fateri conpulsus est.
Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis
confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut
appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini
praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque
discrimen vitae vexatus nihil fateri conpulsus est.
Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis
confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut
appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini
praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque
discrimen vitae vexatus nihil fateri conpulsus est.
Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis
confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut
appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini
praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque
discrimen vitae vexatus nihil fateri conpulsus est.</div>
<div class="citation">Une belle p'tite citation par ici parce que là haut yapu dplace
</div>
<div class="lignemaj">
<div class="maj"><a href="LIEN_URL_MAJ" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/30/1469970718-sdfghjkl.png"/style="width:20px;"/></a></div>
<div class="maj"><a href="LIEN_URL_MAJ" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/30/1469970718-sdfghjkl.png"/style="width:20px;"/></a></div>
<div class="maj"><a href="LIEN_URL_MAJ" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/30/1469970718-sdfghjkl.png"/style="width:20px;"/></a></div>
<div class="maj"><a href="LIEN_URL_MAJ" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/30/1469970718-sdfghjkl.png"/style="width:20px;"/></a></div>
<div class="maj"><a href="LIEN_URL_MAJ" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/30/1469970718-sdfghjkl.png"/style="width:20px;"/></a></div>
<div class="maj"><a href="LIEN_URL_MAJ" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/30/1469970718-sdfghjkl.png"/style="width:20px;"/></a></div>
<div class="maj"><a href="LIEN_URL_MAJ" target="_blank"><img src="http://image.noelshack.com/fichiers/2016/30/1469970718-sdfghjkl.png"/style="width:20px;"/></a></div>
</div>
<div class="copyright">
Fiche Par Sygea / Maquette par Shaden</div>
</body>
</html>
Accueil 
