Sydrielle

Sujet: PA. Jeu 10 Déc - 22:02

CSS

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

/*PA rose beige violet*/
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://fonts.gstatic.com/s/pacifico/v7/Q_Z9mv4hySLTMoMjnk_rCRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.barre {
margin: auto;
width: 700px;
height: 38px;
border-radius:30px;
background: #5882FA; /*couleur de fond de la barre de liens utiles*/
border-left: 4px solid #FFFFFF; /*bordure*/
border-right: 4px solid #FFFFFF; /*bordure*/
font-family: 'Pacifico'; /*police*/
text-transform: lowercase; /*lettres en minuscules*/
font-size: 10px;
color: #0D868F; /*couleur police*/
text-align:center;
margin-bottom:10px;
box-shadow : 0px 2px 0px #0D868F; /*ombre barre*/
}
.barre a {
font-size: 20px;
color: #FFFFFF; /*couleur police liens*/
text-shadow : 0px 2px 0px #0D868F; /*ombre police liens*/
margin-left: 5px;
margin-right: 5px;
text-decoration: none!important;
}
.imgstaff1 {
background-image:url('http://img4.hostingpics.net/pics/373422372.gif'); /*mettre une icone 200x200 pour le staff ici*/
background-size:200px 200px;
height:200px;
width:200px;
border-radius:120px;
border: 6px solid #5882FA; /*bordure staff grand*/
margin-left:60px;
box-shadow : 0px 2px 0px #0D868F; /*ombre derrière image staff grand*/
}
.imgstaff2 {
background-image:url('http://img4.hostingpics.net/pics/183670721.gif'); /*mettre une icone 150x150 pour le staff ici*/
background-size:150px 150px;
height:150px;
width:150px;
border-radius:100px;
border: 6px solid #FFFFFF; /*bordure staff petit*/
margin-top:-80px;
position:relative;
z-index:1;
box-shadow : 0px 2px 0px #0D868F; /*ombre derrière image staff petit*/
}
.imgstaff3 {
background-image:url('http://img4.hostingpics.net/pics/183670721.gif'); /*mettre une icone 150x150 pour le staff ici*/
background-size:150px 150px;
height:120px;
width:120px;
border-radius:100px;
border: 6px solid #0D868F; /*bordure staff petit*/
margin-top:-110px;
margin-left: 130px;
position:relative;
z-index:3;
box-shadow : 0px 2px 0px #0D868F; /*ombre derrière image staff petit*/
}
.contenustaff1 {
width:200px;
height:115px;
border-radius:120px;
background: rgba(141,0,43,0.6); /*couleur de fond des infos du staff grand*/
overflow: hidden;
margin-top:-206px;
margin-left:66px;
opacity:0;
padding-top: 85px;
text-align: center;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
}
.contenustaff1:hover {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
.contenustaff1 a {
font-family: Trebuchet MS;
font-size: 11px;
color: #FFFFFF; /*couleur police du lien du staff grand*/
text-shadow : 0px 1px 0px #0D868F; /*ombre du lien du staff grand*/
text-decoration: none!important;
}
.contenustaff2 {
width:150px;
height:90px;
border-radius:100px;
background: rgba(245,221,187,0.6); /*couleur de fond des infos du staff petit*/
overflow: hidden;
margin-top:-156px;
margin-left:6px;
opacity:0;
padding-top: 60px;
text-align: center;
position:relative;
z-index:2;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
}
.contenustaff2:hover {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
.contenustaff2 a {
font-family: Trebuchet MS;
font-size: 11px;
color: #5882FA; /*couleur police du lien de staff petit*/
text-shadow : 0px 1px 0px #0D868F; /*ombre du lien du staff petit*/
text-decoration: none!important;
}
.contenustaff3 {
width:120px;
height:60px;
border-radius:100px;
background: rgba(245,221,187,0.6); /*couleur de fond des infos du staff petit*/
overflow: hidden;
margin-top:-126px;
margin-left:136px;
opacity:0;
padding-top: 60px;
text-align: center;
position:relative;
z-index:3;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
}
.contenustaff3:hover {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
.contenustaff3 a {
font-family: Trebuchet MS;
font-size: 11px;
color: #5882FA; /*couleur police du lien de staff petit*/
text-shadow : 0px 1px 0px #0D868F; /*ombre du lien du staff petit*/
text-decoration: none!important;
}
.partenaires {
width:230px;
background:#FFFFFF; /*couleur de fond de la barre partenaires*/
border: 2px solid #5882FA; /*bordure barre partenaires*/
color: #0D868F; /*couleur police*/
border-radius:10px;
overflow: hidden;
display: block;
margin: auto;
margin-top:20px;
margin-bottom:10px;
font-family: 'Pacifico'; /*police*/
text-transform: lowercase; /*lettres en minuscules*/
font-size: 12px;
}
.pvs {
height:50px;
width:50px;
border-radius:35px;
border: 4px solid #0D868F; /*bordure images des pvs*/
margin-left:5px;
text-align:center;
opacity:0.6;
transition:All 0.4s;
-webkit-transition:All 0.4s;
-moz-transition:All 0.4s;
-o-transition:All 0.4s;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
.pvs:hover {
opacity:1;
-webkit-transform: rotate(345deg);
-moz-transform: rotate(345deg);
-o-transform: rotate(345deg);
-ms-transform: rotate(345deg);
}
.topsite {
width: 20px;
text-align:center;
}
.topsite b1 a {
font-size: 20px;
color: #FFFFFF; /*couleur premier point de top site*/
text-shadow : 0px 1px 0px #0D868F; /*ombre premier point de top site*/
text-decoration: none!important;
}
.topsite b2 a {
font-size: 20px;
color: #5882FA; /*couleur deuximère point de top site*/
text-shadow : 0px 1px 0px #0D868F; /*ombre deuxième point de top site*/
text-decoration: none!important;
}
.blocs {
margin-top: 20px;
width: 430px;
height: 205px;
border-radius:10px;
background: #FFFFFF; /*couleur de fond de contexte et news*/
border-left: 4px solid #5882FA;
border-right: 4px solid #5882FA;
box-shadow: 0px 2px 0px #0D868F;
text-align: center;
font-family: 'Pacifico'; /*police titre du bloc*/
text-transform: lowercase; /*lettres en minuscules*/
font-size: 20px;
color: #5882FA; /*couleur du titre du bloc*/
text-shadow : 0px 2px 0px #0D868F; /*ombre du titre du bloc*/
}
.blocs span {
display: block;
width: 400px;
height: 140px;
margin: auto;
padding: 5px;
text-align: justify;
font-family: Trebuchet MS;
font-size:10px;
color: #0D868F; /*couleur textes des blocs*/
text-shadow : 0px 0px 0px #0D868F!important;
text-transform: none!important;
overflow-y:auto;
overflow-x:hidden;
}
.blocs2 {
margin-top: 20px;
width: 230px;
height: 205px;
border-radius:10px;
background: #FFFFFF; /*couleur de fond de contexte et news*/
border-left: 4px solid #5882FA;
border-right: 4px solid #5882FA;
box-shadow: 0px 2px 0px #0D868F;
text-align: center;
font-family: 'Pacifico'; /*police titre du bloc*/
text-transform: lowercase; /*lettres en minuscules*/
font-size: 20px;
color: #5882FA; /*couleur du titre du bloc*/
text-shadow : 0px 2px 0px #0D868F; /*ombre du titre du bloc*/
}
.blocs2 span {
display: block;
width: 200px;
height: 140px;
margin: auto;
padding: 5px;
text-align: justify;
font-family: Trebuchet MS;
font-size:10px;
color: #0D868F; /*couleur textes des blocs*/
text-shadow : 0px 0px 0px #0D868F!important;
text-transform: none!important;
overflow-y:auto;
overflow-x:hidden;
}
.chouchouimg {
background-image:url('http://img4.hostingpics.net/pics/183670721.gif'); /*mettre une icone 150x150 pour le staff ici*/
background-size:180px 180px;
height:180px;
width:180px;
border-radius:120px;
border: 6px solid #FFFFFF; /*bordure staff petit*/
margin-top:0px;
margin-left: 5px;
position:relative;
z-index:1;
box-shadow : 0px 2px 0px #0D868F; /*ombre derrière image staff petit*/
}
.chouchou {
width:180px;
height:120px;
border-radius:120px;
background: rgba(245,221,187,0.6); /*couleur de fond des infos du staff petit*/
overflow: hidden;
margin-top:-186px;
margin-left:11px;
opacity:0;
padding-top: 60px;
text-align: center;
position:relative;
z-index:2;
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
transform: scale(0.6);
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
}
.chouchou:hover {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
.chouchou a {
font-family: Trebuchet MS;
font-size: 11px;
color: #5882FA; /*couleur police du lien de staff petit*/
text-shadow : 0px 1px 0px #0D868F; /*ombre du lien du staff petit*/
text-decoration: none!important;
}
/***************************** FIN MISE EN FORME PA *****************************/

Sujet: Re: PA. Jeu 10 Déc - 22:02

Code:: <div style="width:780px; margin:auto;">

<div class="barre">
      <span style="font-size: 12px; line-height: normal"> </span> <a href="http://">Lien</a> • <a href="http://">Lien</a> • <a href="http://">Lien</a> • <a href="http://">Lien</a> • <a href="http://">Lien</a> <span style="font-size: 12px; line-height: normal"></span>
</div><span style="font-size: 12px; line-height: normal"></span> <span style="font-size: 12px; line-height: normal"></span><span style="font-size: 12px; line-height: normal"></span><span style="font-size: 12px; line-height: normal"></span><span style="font-size: 12px; line-height: normal"></span><span style="font-size: 12px; line-height: normal"></span><span style="font-size: 12px; line-height: normal"></span>
<table>

   <tbody>

      <tr>

         <td>
               <span style="font-size: 12px; line-height: normal"> </span> <span style="font-size: 12px; line-height: normal"></span>
            <div class="imgstaff1">
                  <span style="font-size: 12px; line-height: normal"> </span> <span style="font-size: 12px; line-height: normal"></span>
            </div><span style="font-size: 12px; line-height: normal"></span> <span style="font-size: 12px; line-height: normal"></span>
            <div class="contenustaff1">
                  <span style="font-size: 12px; line-height: normal"> </span> <a href="http://">Nom Prénom<br />Poste</a> <span style="font-size: 12px; line-height: normal"></span>
            </div><span style="font-size: 12px; line-height: normal"></span> <span style="font-size: 12px; line-height: normal"></span>
            <div class="imgstaff2">
                  <span style="font-size: 12px; line-height: normal"> </span> <span style="font-size: 12px; line-height: normal"></span>
            </div><span style="font-size: 12px; line-height: normal"></span> <span style="font-size: 12px; line-height: normal"></span>
            <div class="contenustaff2">
                  <span style="font-size: 12px; line-height: normal"> </span> <a href="http://">Nom Prénom<br />Poste</a> <span style="font-size: 12px; line-height: normal"></span>
            </div>

            <div class="imgstaff3">
                  <span style="font-size: 12px; line-height: normal"> </span> <span style="font-size: 12px; line-height: normal"></span>
            </div><span style="font-size: 12px; line-height: normal"></span> <span style="font-size: 12px; line-height: normal"></span>
            <div class="contenustaff3">
                  <span style="font-size: 12px; line-height: normal"> </span> <a href="http://">Nom Prénom<br />Poste</a> <span style="font-size: 12px; line-height: normal"></span>
            </div>
               <select class="partenaires" onchange="location = this.value"><option selected="selected" value="">Top Partenaires</option><option value="http://">Nom du forum</option><option value="http://">Nom du forum</option><option value="http://">Nom du forum</option></select> <span style="font-size: 12px; line-height: normal"></span>
            <center>
                  <span style="font-size: 12px; line-height: normal"> </span> <a href="http://"><img src="http://img4.hostingpics.net/pics/421479ljoe.png" class="pvs" /></a><a href="http://"><img src="http://img15.hostingpics.net/pics/580633minhee.png" class="pvs" /></a><a href="http://"><img src="http://i55.servimg.com/u/f55/18/80/15/80/yuji10.png" class="pvs" /></a><br /><span style=" margin-top: -5px;"><a href="http://"><img src="http://img4.hostingpics.net/pics/421479ljoe.png" class="pvs" /></a><a href="http://"><img src="http://img15.hostingpics.net/pics/580633minhee.png" class="pvs" /></a><a href="http://"><img src="http://i55.servimg.com/u/f55/18/80/15/80/yuji10.png" class="pvs" /></a><a href="http://"><img src="http://img4.hostingpics.net/pics/421479ljoe.png" class="pvs" /></a></span>
            </center>

         </td>

         <td>

            <div class="topsite">
                  <a href="http://">•</a><br /><a href="http://">•</a><br /><a href="http://">•</a><br /><a href="http://">•</a><br /><a href="http://">•</a><br /><a href="http://">•</a>
            </div>

         </td>

         <td>

            <div class="blocs">
                  Contexte<br /><span>Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.<br /><br /> Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.<br /><br /> Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.<br /><br /> Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus, sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus, quo administrante seditiones sunt concitatae graves ob inopiam vini: huius avidis usibus vulgus intentum ad motus asperos excitatur et crebros.</span>
            </div>

            <table>

               <tbody>

                  <tr>

                     <td>

                        <div class="blocs2">
                              News<br /><span><strong>XX/XX :</strong> News<br /><strong>XX/XX :</strong> News<br /><strong>XX/XX :</strong> News<br /><strong>XX/XX :</strong> News<br /></span> <a href="http://epicode.bbactif.com/" style="font-size:8px; text-align:center; display:block; font-family:Trebuchet MS; text-transform:uppercase; text-decoration:none!important; text-shadow:none;">Lady sur Epicode</a>
                        </div>

                     </td>

                     <td>

                        <div class="chouchouimg">
                              <span style="font-size: 12px; line-height: normal"> </span> <span style="font-size: 12px; line-height: normal"></span>
                        </div><span style="font-size: 12px; line-height: normal"></span> <span style="font-size: 12px; line-height: normal"></span>
                        <div class="chouchou">
                              <span style="font-size: 12px; line-height: normal"> </span> <a href="http://">Nom Prénom<br />Membre du Mois <br /> Fiche</a> <span style="font-size: 12px; line-height: normal"></span>
                        </div>

                     </td>

                  </tr>

               </tbody>

            </table>

         </td>

      </tr>

   </tbody>

</table>

</div>

PA.

PA.