[code] ton css ou ton html ici [/code]

 
/* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://www.css-actif.com/)
MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */
/* Mise en forme générale */
  .cssactif_pa_main {
      width: 800px; 
      padding: 30px;
      margin: 0 auto;
  }
 
  .cssactif_pa_main h1 { /* Titre principal (Bienvenue sur...) */
      font-family: "Courier New", Courier, monospace;  /* Police de caractère */
      text-align: center; /* Alignement du texte */
      text-transform: uppercase; /* Transformation: met le texte en majuscules */
      font-weight: normal; /* Épaisseur normale */
      letter-spacing: 16px; /* Espacemement des caractères en PX */
      font-size: 32px; /* Grosseur du texte */
      color: #fcca00; /* Couleur du texte */
      text-shadow: 2px 2px 0px #FFFFFF; /* Ombre du texte */
  }
 
  .cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;    /* Police de caractère */
      font-weight: normal; /* Épaisseur normale */
      color: #FFFFFF; /* Couleur du texte */
      text-transform: uppercase; /* Transformation: met le texte en majuscules */
      text-shadow: 1px 1px 1px #000000; /* Ombre du texte */
      font-size: 18px; /* Grosseur du texte */
      margin:0;
  }
 
  .cssactif_pa_colonne { /* Style général des colonnes */
      float: left; /* Place les colonnes un à côté de l'autre */
      width: 33%; /* Donne la grandeur des colonnes */
      background-color: #FFFFFF; /* Couleur de fond */
      height: 400px; /* Hauteur des colonnes: doit être fixe */
      color: #777777; /* Couleur du texte */
 
      opacity: 0.9; /* Opacité des colonnes */
     
      /* Transition */
      -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

/*Ombre porté */
-webkit-box-shadow: 0px 0px 1px 0px #CCCCCC;
box-shadow: 0px 0px 1px 0px #CCCCCC;

 
  }
 
  .cssactif_pa_colonne p { /* Paragraphe des colonnes */
  padding: 0 10px; /* Padding */
  text-indent: 10px; /* Alinéa */
  text-align: justify;  /* Alignement du texte */
  }
  .cssactif_pa_colonne:hover { /* Colonne au survol */
  /* Effet de grossissement */
      -moz-transform: scale(1.05) translate(0px, -20px) ;
-webkit-transform: scale(1.05) translate(0px, -20px) ;
-o-transform: scale(1.05) translate(0px, -20px) ;
-ms-transform: scale(1.05) translate(0px, -20px);
transform: scale(1.05) translate(0px, -20px) ;

opacity: 1; /* Opacité */

/* Nouvelle ombre portée */
-webkit-box-shadow: 0px 5px 10px 0px #CCCCCC;
box-shadow: 0px 5px 10px 0px #CCCCCC;
z-index: 999;

  }
 
.cssactif_pa_header { /* Style commun des header de couleur */
  padding: 10px;
  height: 80px;
}

.cssactif_pa_header p { /* Style du description dans les headers */
margin: 5px; /* Marge */
padding: 0; /* Padding */
color: #FFFFFF; /* Couleur du texte */
text-shadow: 1px 1px 1px #000000;  /* Ombre portée */
font-style: italic; /* Style italic */
opacity: 0.8; /* Opacity du texte */

}
.colgauche .cssactif_pa_header {background-color: #01c6d9;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #d9015d;}/* Colonne du centre, couleur du header */
.coldroite .cssactif_pa_header {background-color: #7fbf33;  } /* Colonne de droite, couleur du header */

/* Contenu des colonnes */

.new {
  margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
  padding: 5px; /* Padding */
  border-bottom: 1px solid #d9015d; /* Bordure du séparateur */
 
  text-align: justify; /* Alignement du texte */
}

.new em { /* Dates */
  color: #d9015d;  /* Couleur du texte */
  text-transform: uppercase; /* Transformation du texte en majuscule */
  font-style: normal; /* Enlève le italic par défaut de la balise em */
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
}

.new em:after {
  content: " ►";  /* Ajoute la flèche après les dates */
}

.pers { /* Cadre des personnages */
 border: 1px solid #7fbf33;  /* Bordure des personnages */
 margin: 10px; /* marge externe */
 
 /* Arrondissement des bordures */
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


padding: 3px; /* Marge interne */
text-align: center; /* Alignement du texte */
}

.pers img { /* Image des personnages */
 float: left; /* Place à gauche du texte */
 width: 50px; /* Grandeur de l'image */
 height: 50px;    /* Grandeur de l'image */
 border: 3px solid #7fbf33; /* Bordure de l'image */
 
 /* Arrondissement des bordures */
  -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;   

/* Transformation */
 -moz-transform: rotate(-12deg) translate(0px, -5px) ;
-webkit-transform:  rotate(-12deg) translate(0px, -5px) ;
-o-transform: rotate(-12deg) translate(0px, -5px) ;
-ms-transform:  rotate(-12deg) translate(0px,-5px) ;
transform:  rotate(-12deg) translate(0px, -5px);
}

.pers:first-line { /* Première ligne:contient le nom du personnage */
 color: #7fbf33;/* Couleur du texte */
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
 text-transform: uppercase; /* Transformation du texte */
} 

<div class="cssactif_pa_main">
<h1>Bienvenue sur le forum</h1>
<div>

<div class="cssactif_pa_colonne colgauche">
        <div class="cssactif_pa_header">
          <h2>Concept</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
        </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. Donec sed velit ac turpis sagittis consectetur. Morbi lacinia auctor lectus vel lacinia. Nullam quis mauris sem, non laoreet est. Aenean pretium adipiscing tellus vel porttitor. Nam sit amet mi enim. In nulla turpis, dapibus in iaculis non, mollis ac lorem.</p>
  <p> Ut sollicitudin sem vel ligula pulvinar vehicula. Aliquam sagittis risus adipiscing nisi placerat ac bibendum nisi tincidunt. Maecenas imperdiet, dolor eu elementum dapibus, leo elit dapibus orci, ut ornare purus purus at nisl. Praesent consectetur tincidunt neque id vulputate.</p>
    </div>
    <div class="cssactif_pa_colonne colcentre">
   
      <div class="cssactif_pa_header">
          <h2>Nouveautés</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
        </div>
    <div class="new"><em>14/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
    <div class="new"><em>05/07</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
    <div class="new"><em>23/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
    <div class="new"><em>21/06</em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit.</div>
    </div>
    <div class="cssactif_pa_colonne coldroite">
     
      <div class="cssactif_pa_header">
          <h2>Personnages</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus augue, posuere ac feugiat in, rutrum in elit. </p>
        </div>
        <div class="pers">
        <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
        Prénom & nom<br>
        Groupe<br>
        <a href="#pv1">Voir la fiche</a>
        </div>
        <div class="pers">
        <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
        Prénom & nom<br>
        Groupe<br>
        <a href="#pv1">Voir la fiche</a>
        </div>
        <div class="pers">
        <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
        Prénom & nom<br>
        Groupe<br>
        <a href="#pv1">Voir la fiche</a>
        </div>
        <div class="pers">
        <img src="http://image.noelshack.com/fichiers/2012/28/1342357997-avatar_vide.jpg">
        Prénom & nom<br>
        Groupe<br>
        <a href="#pv1">Voir la fiche</a>
        </div>
   
    </div>
 
</div>
</div>