Partagez|

[CREAPHY] Code de PA #3

Voir le sujet précédent Voir le sujet suivant Aller en bas


I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 19

MessageSujet: [CREAPHY] Code de PA #3 Mer 26 Nov - 10:26



CSS
Code:
/**PA**/

#pa_night {
  color:grey; /*couleur générale*/
  font-size:11px; /*taille du texte générale*/
  font-family:arial; /*police générale*/
  width:700px;
  margin:20px 0;
  text-align:center;
  margin:30px auto 15px;
  line-height:10px;
}

#pa_night .titreh1 { /*TITRE BIENVENUE*/
  font-size:34px; /*taille du texte*/
  font-family: 'Playfair Display SC'; /*police*/
  text-transform:uppercase; /*majuscule*/
  letter-spacing:-2px; /*espacement des lettres*/
}

#pa_night > div { /*TOUS LES BLOCS*/
   /*les propriétés de texte se changent dans le général*/
  border:1px solid #ddd; /*bordure*/
  display:inline-block;
  vertical-align:top;
  overflow:auto;
  margin:0.6%;
  box-sizing:border-box;
  padding:7px;
}

#pa_night .news, #pa_night .staff, #pa_night .contexte {
  height:120px;
}

#pa_night .news {
  width:23%;
  text-align:left;
}

#pa_night .staff {
  width:27%;
  overflow:hidden;
}

#pa_night .staff span { /*STAFF*/
  font-size:16px; /*taille du texte*/
  width:31%;
  display:block;
  background-position:center center;
  background-size:130%;
  height:95%;
  margin:2px;
  float:left;
}

#pa_night .staff span a {
  color:transparent;
}

#pa_night .staff span:hover {
  background-image:none !important;
  padding-top:19%;
  box-sizing:border-box;
}

#pa_night .staff span:hover a{ /*PSEUDO STAFF*/
   color:grey; /*couleur du pseudo*/
   text-decoration:none; /*enlève soulignement*/
}

#pa_night .contexte {
  width:45%;
  text-align:justify;
}

#pa_night .pv, #pa_night .partenaire {
  height:90px;
}

#pa_night .pv {
  width:40%;
}

#pa_night .pv span{
  width:15%;
  overflow:hidden;
  height:100%;
  margin:0 2px;
  display:block;
  float:left;
  background-position:center center;
  opacity:0.4;
}

#pa_night .partenaire {
  width:57%;
}

#pa_night .partenaire img {
  width:70px;
  opacity:0.6;
}

#pa_night .partenaire img:hover, #pa_night .pv span:hover {
  opacity:1;
}

HTML
Code:
<div id="pa_night">
                   <span class="titreh1">Welcome to yourforumname</span> <br />            
   <div class="contexte">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius mi sed ex ultricies fringilla. Aenean feugiat elementum erat, ut tempus dolor consectetur dignissim. Aenean vulputate erat a nulla dapibus, sagittis varius purus malesuada. Duis id mi vitae mauris porttitor pharetra. Ut pharetra eget massa nec viverra. Vestibulum et elementum risus. Duis at leo lorem. Morbi id diam lobortis, tincidunt justo ut, interdum erat. Fusce fringilla sagittis arcu accumsan lobortis. Donec efficitur eros vestibulum porttitor varius. Sed cursus neque mollis velit congue vehicula.          
   </div>
                               
   <div class="staff">
   <!--CE SONT DES IMAGES 320x200 !!-->
                   <span style="background-image:url(http://i.imgur.com/qAFywMc.png)"><a href="http://creaphy.olympe.in">Nom Prenom</a></span>
                <span style="background-image:url(http://img11.hostingpics.net/pics/377508seunghyunhotboom.png)"><a href="http://creaphy.olympe.in">Nom Prenom</a></span>
                <span style="background-image:url(http://img11.hostingpics.net/pics/366178parkkyung.png)"><a href="http://creaphy.olympe.in">Nom Prenom</a></span>    
   </div>
                               
   <div class="news">
                    <strong>11.00.11 - </strong> news ici bla bla bla et bla<br />      <strong>11.00.11 - </strong> news ici bla bla bla et bla<br />      <strong>11.00.11 - </strong> news ici bla bla bla et bla<br />      <strong>11.00.11 - </strong> news ici bla bla bla et bla<br />      <strong>11.00.11 - </strong> news ici<br />        
   </div>
                               
   <div class="partenaire">
                   <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                   <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                   <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                   <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                   <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>
                <a href="http://creaphy.olympe.in"><img src="http://i.imgur.com/SMjyrFL.png" /></a>      
   </div>
                               
   <div class="pv">
   <!--CE SONT DES IMAGES 100x100 !!-->
                   <a href="http://creaphy.olympe.in"><span style="background-image:url(http://img11.hostingpics.net/pics/374528afterschoolnana1.png);"></span></a>
                <a href="http://creaphy.olympe.in"><span style="background-image:url(http://img11.hostingpics.net/pics/649810kevin2.png);"></span></a>
                <a href="http://creaphy.olympe.in"><span style="background-image:url(http://img11.hostingpics.net/pics/958093dj3.png);"></span></a>
                <a href="http://creaphy.olympe.in"><span style="background-image:url(http://img15.hostingpics.net/pics/748446sungjae5.png);"></span></a>
                <a href="http://creaphy.olympe.in"><span style="background-image:url(http://img11.hostingpics.net/pics/538712dw25.png);"></span></a>
                <a href="http://creaphy.olympe.in"><span style="background-image:url(http://img11.hostingpics.net/pics/9661374.png);"></span></a>
   </div>
                                 
</div>
<div style="font-family:arial;font-size:9px;text-transform:uppercase;text-align:center;"><a style="text-decoration:none;color:rgba(0,0,0,0.5);" href="http://creaphy.olympe.in">@pyphi(lia)</a></div>
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code de PA #3

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» code pour inséré les anime (Fond transparent)
» manuel de code e-anim
» J'ai 2 code pour avoir 6 razoirs Shick Induition DÉJÀ DONNÉ
» Vidéos - générateur de code pour vidéo et player
» [Nocturne] Demande d'aide pour code css complet s'il vous plait.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-