Rappel du premier message :

Breakdown

Voici la page d'accueil de l'ensemble de fiche Breakdown.

Je précise que l'arrière plan vert correspond à mon forum.



Et le code :
HTML :

Code:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<div class="contenant"><div class="titre">Bienvenue à xxxxxxxx</div>
<div class="news">• 00/00/00 : Lorem ipsum dolor sit amet <br />• 00/00/00 : Lorem ipsum dolor sit amet <br />• 00/00/00 : Lorem ipsum dolor sit amet <br />• 00/00/00 : Lorem ipsum dolor sit amet <br />
</div>
<div class="staff"><div class="staff01"><div class="staff02">XXXX - Administrateur
Chieur de service /pan</div><img src="http://nsa34.casimages.com/img/2015/02/05/15020510425075057.png" /></div><div class="staff01"><div class="staff02">XXXX - Administrateur
Chieur de service /pan</div><img src="http://nsa34.casimages.com/img/2015/02/05/15020510425075057.png" /></div><div class="staff01"><div class="staff02">XXXX - Administrateur
Chieur de service /pan</div><img src="http://nsa34.casimages.com/img/2015/02/05/15020510425075057.png" /></div></div>
<div class="topsite"><a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a> <a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a><br /><a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a> <a href="LIEN"><img src="http://nsa33.casimages.com/img/2015/02/05/150205093603234468.png" /></a>
</div>
<br />
<div class="contexte">contexte ici
</div>
<div class="partenaire"><a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a><br /><a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a><br /><a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a> <a href="LIEN"><img src="http://nsa34.casimages.com/img/2015/02/05/150205093809924631.png" /></a>
</div>
<a href="http://never-utopia.com" id="ALice">A-Lice | Never-Utopia</a>
</div>

CSS :

Code:

.contenant {
width: 700px;
height: 450px;
background: firebrick;
overflow: hidden;
color: firebrick;
text-align: justify;
border: dashed burlywood 2px;
margin: auto;
}

.titre {
color: burlywood;
text-align: center;
font-size: 20px;
padding: 10px;
font-weight: bold;
font-family: 'Open Sans Condensed', sans-serif;
}

.news {
background: burlywood;
display: inline-block;
height: 150px;
overflow: auto;
padding: 5px;
position: relative;
top: -90px;
transform: rotate(-2deg);
width: 200px;
left: 20px;
}

.staff {
background: burlywood;
display: inline-block;
height: 225px;
margin-left: 10px;
overflow: auto;
transform: rotate(-2deg);
width: 230px;
position: relative;
left: 35px;
}

.staff01 img {
width: 230px;
height: 50px;
margin-bottom: -45px;
position: relative;
bottom: 50px;
transition: 1s;
}

.staff01:hover img {
bottom: 100px;
transition: 1s;
}

.staff02 {
padding: 5px;
color: white;
text-align: center;
background: firebrick;
height: 40px;
}

.topsite {
background: burlywood;
display: inline-block;
height: 150px;
margin-left: 10px;
overflow: auto;
padding: 5px;
transform: rotate(-2deg);
width: 150px;
position: relative;
top: -50px;
left: 45px;
}

.contexte {
background: burlywood;
display: inline-block;
height: 220px;
overflow: auto;
padding: 5px;
transform: rotate(-2deg);
width: 200px;
position: relative;
top: -80px;
left: 30px;
}

.partenaire {
background: burlywood;
display: inline-block;
height: 130px;
margin-left: 10px;
overflow: auto;
padding: 5px;
transform: rotate(-2deg);
width: 390px;
position: relative;
top: -85px;
left: 40px;
}

#ALice {
color: white;
font-size: 11px;
text-decoration: none;
margin-left: -80px;
position: relative;
top: -475px;
}

La class "plop" correspond aux trois images de 100px par 100px.

La suite de l'ensemble se trouve ici :

Règlement
Contexte
Annonce
Présentation
Prédéfini
Page d'accueil

merci beaucoup ! ♥

merci beaucoup ^^

Thanks

Mercii *^*

merci

Merci ! ^^

J'aime. Merci =D

Merci !

Merci

Joli travail