Cherry Blossom.

CSS

Code:: /***************************** MISE EN FORME PA *****************************/

.fond_PA {
background-color: #EFC8E2;
padding: 10px;
text-align: justify;
width: 800px;
border-radius: 500px;
}
.fond_PA a {
color: #0000000 !important;
text-decoration: none !important;
}
.liens1 {
background-color: #9E2C78;
color: #D9B6DC;
text-transform: uppercase;
height: 14px;
width: 130px;
text-align: center;
padding-top: 4px
font-family: 'Josefin Sans'
}
.liens1:hover {
background-color: #F9E7F3;
color: #D9B6DC;
text-transform: uppercase;
height: 14px;
width: 130px;
text-align: center;
padding-top: 4px;
font-family: 'Josefin Sans'
}
.liens2 {
background-color: #865D89;
color: #D9B6DC;
text-transform: uppercase;
height: 14px;
width: 130px;
text-align: center;
padding-top: 4px
font-family: 'Josefin Sans'
}
.liens2:hover {
background-color: #F9E7F3;
color: #D9B6DC;
text-transform: uppercase;
height: 14px;
width: 130px;
text-align: center;
padding-top: 4px;
font-family: 'Josefin Sans'
}
.titrePA {
font-family: 'Parisienne';
font-size: 45px;
color: #9E2C78;
text-shadow: 2px 2px 5px #000000;
text-align: center;
margin-top: -40px;
}
.bloc1 {
background-color: #ffffff;
border-radius: 20px;
border: 1px solid #9E2C78;
padding: 8px;
text-align: justify;
overflow: auto;
height: 200px;
}
.sous-titrePA {
font-family: 'Parisienne'
font-size: 25px;
color: #9E2C78;
text-shadow: 2px 2px 2px #F9E7F3;
}
.bloc2 {
background-color: #ffffff;
border-radius: 20px;
border: 1px solid #9E2C78;
padding: 8px;
text-align: justify;
overflow: auto;
height: 100px;
}
.a:{
color: #D9B6DC;
}
.a:visited {
color: #D9B6DC;
}
a:hover, a:focus, a:active {
color: #D9B6DC
}
.imgPA {
height: 60px;
width: 60px;
}
.imgstaff {
background-image: url('http://www.zupimages.net/up/15/36/ogzy.png');
height: 60px;
width: 60px;
margin-left: #px;
}
.staff {
opacity: 0;
height: 40px;
width: 40px;
}

.staff:hover {
Width: 180px;
height: 84px;
background-color: #ffffff;
border: 1px solid #9E2C78;
text-align: justify;
padding: 8px;
opacity: 1;
border-radius: 20px;
z-index:2;
position: absolute;
}
.staffface {
height: 84px;
width: 84px;
}
.trait {
width: 1px;
Height: 84px;
background-color: #9E2C78;
margin-top: -84px;
margin-left: 90px;
}
.presstaff {
margin-top: -84px;
margin-left: 100px;
text-align: center;
}
.imgchouchou {
width: 98px;
height: 98px;
border-radius: 50px;
border: 1px solid #9E2C78;
margin-left: 0px;
}
.imgchouchou2 {
width: 73px;
height: 73px;
border-radius: 50px;
border: 1px solid #9E2C78;
margin-top: -95px;
margin-left: 150px;
}
.pseudo {
font-family: 'Parisienne';
font-size: 20px;
color: #865D89;
text-align: center;
margin-top: -20px;
line-height: 80%;
width: 200px;
}
.pseudo:hover {
font-family: 'Parisienne';
font-size: 22px;
color: #865D89;
text-align: center;
margin-top: -20px;
line-height: 80%;
width: 200px
text-shadow: 0px 0px 10px #9E2C78;
}
.pseudo1 {
font-family: 'Parisienne';
font-size: 18px;
color: #865D89;
text-align: center;
margin-top: -40px;
line-height: 80%;
width: 200px;
}
.pseudo1:hover {
font-family: 'Parisienne';
font-size: 20px;
color: #865D89;
text-align: center;
margin-top: -40px;
line-height: 80%;
width: 200px
text-shadow: 0px 0px 10px #9E2C78;
}
.imgpredef1 {
background-image: url('http://www.zupimages.net/up/15/36/265w.png');
height: 60px;
width: 60px;
margin-left: #px;
}
.imgpredef2 {
background-image: url('http://www.zupimages.net/up/15/36/q9y3.png');
height: 60px;
width: 60px;
margin-left: #px;
}
.bloc3 {
Width: 200px;
margin-top: -4px;
font-size: 20px;
margin-left: 30px
}
.com {
color: #865D89;
font-family: 'Josefin Sans';
font-size: 15px;
}
/***************************** FIN MISE EN FORME PA *****************************/

HTML

Code:: <br /><br />
<div class="fond_PA"><div class="titrePA">Cherry Blossom
</div>

<table><tbody><tr><td>
<div style="margin-left: 55px; margin-top: -55px;" class="sous-titrePA">Contexte </div>
<div style="width: 200px; height 200px; margin-top: -7px; margin-left: 0px" class="bloc1">Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti. <a href="#">Next.</a> </div>
         </td><td>
            <center><div style="width: 340px"><div class="sous-titrePA" style="margin-left: px; margin-top: 10px;">News </div>
<div class="bloc2" style="width: 300px; margin-top: -7px;"><marquee style="height: 95px;" scrolldelay="250" direction="up">News 1: ................................................ <br />News 2: .... <br />News 3: ... </marquee></div></div><br /> <div style="margin-left: -135px;"><div class="liens1" style=""><a href="#" style="color: #D9B6DC">Lien</a></div><div class="liens2" style="margin-top: 3px;"><a href="#" style="color: #D9B6DC">Lien</a></div><div class="liens1" style="margin-top: 3px;"><a href="#" style="color: #D9B6DC">Lien</a></div></div><div style="margin-left: 135px; margin-top: -60px"><div class="liens2" style=""><a href="#" style="color: #D9B6DC">Lien</a></div><div class="liens1" style="margin-top: 3px;"><a href="#" style="color: #D9B6DC">Lien</a></div><div class="liens2" style="margin-top: 3px;"><a href="#" style="color: #D9B6DC">Lien</a></div></div></center>
            <br /><br />
            <div style="margin-left: 0px; margin-top: 0px;" class="sous-titrePA"> Scenariis </div><div style="margin-left: 13px; margin-top: -15px;"><a class="com" href="#" style="color: #865D89;">Autre...</a> </div>
            <center><div class="imgpredef1" style="margin-top: -50px;"><div style="" class="staff"><img class="staffface" src="http://www.zupimages.net/up/15/36/old7.jpg" /><div class="trait"></div><div class="presstaff"><div style="font-family: 'Parisienne'; font-size: 20px; line-height: 80%">Pseudo </div><br />Rang<br />Importance<br /><a style="color: #9E2C78" href="#">Fiche</a> </div></div></div><div class="imgpredef2" style="margin-top: -60px;margin-left: -110px"><div style="" class="staff"><img class="staffface" src="http://www.zupimages.net/up/15/36/old7.jpg" /><div class="trait"></div><div class="presstaff"><div style="font-family: 'Parisienne'; font-size: 20px; line-height: 80%">Pseudo</div><br />Rang<br />Importance<br /><a style="color: #9E2C78" href="#">Fiche</a></div></div></div><div class="imgpredef2" style="margin-top: -60px;margin-left: 110px"><div style="" class="staff"><img class="staffface" src="http://www.zupimages.net/up/15/36/old7.jpg" /><div class="trait"></div><div class="presstaff"><div style="font-family: 'Parisienne'; font-size: 20px; line-height: 80%">Pseudo </div><br />Rang<br />Importance<br /><a style="color: #9E2C78" href="#">Fiche</a></div></div></div></center></td><td><div class="sous-titrePA" style="margin-left: 150px; margin-top: -60px">Staff</div><div style="margin-left: 0px; margin-top: -10px;" class="imgstaff"><div class="staff"><img class="staffface" src="http://www.zupimages.net/up/15/36/old7.jpg" /><div class="trait"></div><div class="presstaff"><div style="font-family: 'Parisienne'; font-size: 20px;">Pseudo</div>Rang<br />Présence<br /><a style="color: #9E2C78" href="#">Mp</a></div></div></div><div class="imgstaff" style="margin-left: 70px; margin-top: -60px"><div class="staff"><img class="staffface" src="http://www.zupimages.net/up/15/36/old7.jpg" /><div class="trait"></div><div class="presstaff"><div style="font-family: 'Parisienne'; font-size: 20px;">Pseudo</div>Rang<br />Présence<br /><a style="color: #9E2C78" href="#">Mp</a></div></div></div><div style="margin-left: 140px; margin-top: -60px" class="imgstaff"><div class="staff"><img class="staffface" src="http://www.zupimages.net/up/15/36/old7.jpg" /><div class="trait"></div><div class="presstaff"><div style="font-family: 'Parisienne'; font-size: 20px;">Pseudo</div>Rang<br />Présence<br /><a style="color: #9E2C78" href="#">Mp</a></div></div></div><br /><div class="sous-titrePA" style="margin-left: -150px; margin-top: 0px; text-align: center; line-height: 80%">Membres du Mois </div><img class="imgchouchou" src="http://www.zupimages.net/up/15/36/8pcc.jpg" /><div style="margin-left:-60px;" class="pseudo">Prénom P. Nom.</div><img class="imgchouchou2" src="http://www.zupimages.net/up/15/36/8pcc.jpg" /><div style="margin-left:80px;" class="pseudo1">Prénom P. Nom.</div><div class="sous-titrePA" style="margin-left: -100px; margin-top: 50px; text-align: center; line-height: 80%">Top-sites </div><div class="bloc3"><a href="#" style="color: #000000">✿</a> <a href="#" style="color: #865D89">✿</a> <a href="#" style="color: #000000">✿</a> <a href="#" style="color: #865D89">✿</a></div></td></tr></tbody></table><br /><center>Codage by <a href="#">Lucifer</a>.</center></div>