PA Bleu 1

Admin Messages : 13 Date d'inscription : 21/01/2015

Code::    <link href='http://fonts.googleapis.com/css?family=Dancing+Script|Pinyon+Script' rel='stylesheet' type='text/css'>

   <table style="width: 500px;">
   <tbody>
   <tr>
   <td style="width: 350px;" colspan="3" class="titre"> Bienvenue sur Nomforum {USERNAME} ! </td>
   </tr>
   <tr>
   <td colspan="2">
   <div class="contexte">
   <div class="soustitre"> Contexte
   </div> Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem. <br /> <br />Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute. <br /> <br />Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.
   </div> </td>
   <td style="width: 150px;">
   <div class="blocliens">
   <div class="soustitre"> Liens utiles
   </div>
   <a href="URL"> </a>
   <div style="" class="liens"> Réglement
   </div>
   <a href="URL"></a>
   <a href="URL"> </a>
   <div style="" class="liens"> Contexte
   </div>
   <a href="URL"></a>
   <a href="URL"> </a>
   <div style="" class="liens"> Présentation
   </div>
   <a href="URL"></a>
   <a href="URL"> </a>
   <div style="" class="liens"> Devenir partenaire
   </div>
   <a href="URL"></a>
   <a href="URL"> </a>
   <div style="" class="liens"> Autre lien
   </div>
   <a href="URL"></a>
   </div> </td>
   </tr>
   <tr>
   <td style="width: 200px;">
   <div class="new">
   <div class="soustitre"> Nouveauté
   </div> xxxx/xx/xx Nouveau <br />xxxx/xx/xx Nouveau <br />xxxx/xx/xx Nouveau <br />xxxx/xx/xx Nouveau <br />
   </div> </td>
   <td style="width: 300px;" colspan="2">
   <div class="staff">
   <div class="soustitre"> Notre équipe
   </div>
   <span class="contenustaff">
   <span class="pseudo">Pseudo
   </span>Fondatrice
   <img src="http://i.imgur.com/Wr7umeR.png" />
   </span>
   <span class="contenustaff">
   <span class="pseudo">Pseudo
   </span>Rôle dans le staff
   <img src="http://i.imgur.com/Wr7umeR.png" />
   </span> <br />
   <span class="contenustaff">
   <span class="pseudo">Pseudo
   </span>Rôle dans le staff
   <img src="http://i.imgur.com/Wr7umeR.png" />
   </span>
   <span class="contenustaff">
   <span class="pseudo">Pseudo
   </span>Rôle dans le staff
   <img src="http://i.imgur.com/Wr7umeR.png" />
   </span>
   </div> </td>
   </tr>
   <tr>
   <td colspan="3">
   <div class="partenaire">
   <div class="soustitre"> Partenaires</div>
   <marquee id="id1">
   <span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">
   <a href="LIEN_FORUM"><img src="http://i.imgur.com/c6SU9lG.png" /></a>
   <a href="LIEN_FORUM"><img src="http://i.imgur.com/c6SU9lG.png" /></a>
   <a href="LIEN_FORUM"><img src="http://i.imgur.com/c6SU9lG.png" /></a>
   <a href="LIEN_FORUM"><img src="http://i.imgur.com/c6SU9lG.png" /></a>
   </span>
   </marquee>
   </div>
   <div class="copy"> © Batty pour
   <a href="epicode.bbactif.com" style="color:#3f7274;font-variant: small-caps;">Epicode</a>
   </div> </td>
   </tr>
   </tbody>
   </table>

Code:: /**=====================================================
   Ombrelle bleu | Par Batty
   =====================================================**/

   .titre{
   width: 500px;
   color:#3f7274;
   font-family: 'Pinyon Script', cursive;
   font-size: 30px;
   text-align: center;
   }

   .contexte{
   width: 350px;
   height: 150px;
   background-color:#8fb1b5;
   color: #ffffff;
   font-size: 12px;
   text-align: justify;
   overflow: auto;
   margin:5px;
   padding: 5px;
   }

   .blocliens{
   width: 150px;
   height: 150px;
   background-color:#55969d;
   color: #ffffff;
   font-size: 12px;
   text-align: justify;
   margin:5px;
   padding: 5px;
   }

   .liens{
   background-color:#ffffff;
   color: #55969d;
   border-radius: 10px;
   font-size: 12px;
   padding: 2px;
   margin:5px;
   text-align: center;
   }

   .liens:hover{
   background-color:#8fb1b5;
   color: #ffffff;
   }

   a{
   text-decoration:none;
   }

   .new{
   width: 200px;
   height: 125px;
   background-color:#55969d;
   color: #ffffff;
   font-size: 12px;
   text-align: justify;
   margin:5px;
   padding: 5px;
   }

   .staff{
   width: 300px;
   height: 125px;
   background-color:#8fb1b5;
   color: #ffffff;
   font-size: 12px;
   margin:5px;
   padding: 5px;
   }

   .contenustaff{
   display: inline-block;
   position:relative;
   width: 116px;
   height: 36px;
   background-color: #3f7274;
   color: #ffffff;
   overflow: hidden;
   padding: 2px;
   margin:5px 12px;
   text-align:center;
   }

   .contenustaff img {
   position: absolute;
   left: 0;
   top: 0;
   transition: transform 3s;
   -moz-transition: -moz-transform 3s;
   -o-transition: -o-transform 3s;
   -webkit-transition: -webkit-transform 3s;
   }

   .contenustaff:hover img {
   transform: translateX(-120px);
   -moz-transform: translateX(-120px);
   -o-transform: translateX(-120px);
   -webkit-transform: translateX(-120px);
   }

   .partenaire{
   width: 525px;
   height: 55px;
   background-color:#55969d;
   color: #ffffff;
   font-size: 12px;
   margin:5px;
   padding: 5px;
   }

   .soustitre{
   font-family:Swis721 LtEx BT;
   font-variant: small-caps;
   font-size: 18px;
   text-align:center;
   color: #ffffff;
   text-shadow: 1px 1px 5px black;
   }

   .pseudo{
   display:block;
   font-family:Swis721 LtEx BT;
   font-variant: small-caps;
   font-size: 16px;
   text-align:center;
   color: #ffffff;
   text-shadow: 1px 1px 5px black;
   }

   .copy{
   text-align:right;
   color:#3f7274;
   font-size:12px;
   }