Partagez|

[CREAPHY] Code de PA #2

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 #2 Dim 25 Mai - 0:43



CSS
Code:
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: local('Qwigley'), local('Qwigley-Regular'), url(http://themes.googleusercontent.com/static/fonts/qwigley/v4/jXlXpULVZtk2Rzpy5O18QwLUuEpTyoUstqEm5AMlJo4.ttf) format('truetype');
}
@font-face {
  font-family: 'Oxygen Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen Mono'), local('OxygenMono-Regular'), url(http://themes.googleusercontent.com/static/fonts/oxygenmono/v2/BzV4DVOwAgGelLT9EC5xyobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}


a{text-decoration: none !important;
  letter-spacing:-1px;
font-size:11px;}
a:hover {text-decoration: none !important;}


/**PA**/

#pa {margin:auto;
  font-family:arial;
width:800px;
  text-align:center;}

#pa a {text-transform:uppercase;letter-spacing:1px;
font-family:arial;}

#pa h1 {
  color:#ebc21d;
  font-family: 'Qwigley';
  font-size:48px;
  margin-bottom:-18px;
  text-shadow:
    #eb1d98 0 1px 0,
    #eb1d98 0 2px 0,
    #eb1d98 0 3px 0,
    rgba(255,255,255,0.3) 0 -2px 0;
}

#pa .soustitre {
  font-size:14px;
  font-family: 'Oxygen Mono';
  text-transform:uppercase;
  color:#aba7cf;
  letter-spacing:1px;
}

#pa h3 {font-size:14px;
  text-transform:uppercase;
  border-bottom:2px rgba(0,0,0,0.3) solid;
  margin:0px auto;
font-family:arial;
}

#pa h4{font-size:24px;
  letter-spacing:-1px;
  font-weight:200;
  margin:-3px auto;
  font-family:arial;
}

#pa h5 {font-size:31px;
font-weight:bold;
  margin:-3px auto 2px;
  font-family: 'Qwigley';
}

#pa #links span {
  padding:0 0 10px;
  display:inline-block;
  vertical-align:middle;
  height:31px;
  margin:6px 1.5% -22px;
 
transition:all 1s;
-o-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
}

#pa #links span a {
  text-transform:lowercase;
  font-size:27px;
  font-family: 'Qwigley';
  letter-spacing:-1px;
}

#pa #main_pa{
  background:#fff;
  border:0 #eb1d98 solid;
  border-width:5px 0;
  margin:5px auto;
width:89%;
  text-align:center;
  color:grey;
  letter-spacing:-0.8px;
}

#pa #staff, #pa #nuest {
  width:48%;
  padding:0 5px;
  border:0 rgba(0,0,0,0.1) solid;
  margin:7px -2px;
  display:inline-block;
  vertical-align:middle;
}

#pa #video, #pa #news, #pa #part {
  width:32.1%;
  padding:0 5px;
  margin:7px -2px;
  display:inline-block;
  vertical-align:middle;
  height:200px;
}

#pa #staff .infos {
  display:none;
  background:lavender;
  margin:3px;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
}
.active{display:block !important;}

#pa #staff .infos img {float:right;border:4px rgba(0,0,0,0.3) solid;}

#pa #staff #name {
  border-bottom:2px rgba(0,0,0,0.2) solid;
}

#pa #staff #name span {
  font-size:10px;
  text-transform:uppercase;
  margin:0 10px;
}
#pa #staff #name span:hover {
  cursor:crosshair;
}

#pa #nuest {
  line-height:9.5px;
  text-align:justify;
  padding:0 5px;
  font-family:arial;
  font-size:10px;
}

#pa #nuest strong {color:#655bb5;}

#pa #nuest .img {width:95%;
  height:100px;
display:block;
margin:auto auto 5px;
background:url(http://img15.hostingpics.net/pics/707880nuest.gif) center center;}

#pa #part {
  display:inline-block;
  vertical-align:middle;
}

#pa #part #blocimg {
  height:150px;
  overflow:auto;

}

#pa #part img {margin:1px;width:30%;}

#pa #news {}

#pa #news .blocnews {
  height:150px;
  overflow:auto;
  text-align:left;
  font-size:11px;
}

JQUERY
Code:
$(document).ready(function() {

$("#staff #name span").click(function(){
Thisclass = $(this).attr('class');
$("#staff .infos.active").removeClass("active");
$("#staff").find("div."+Thisclass).addClass("active");
})


});

HTML
Code:
<div id="pa">
  
  <h1>
       Bienvenue sur NOM DU FORUM
   </h1><span class="soustitre">petit slogan par ici ou là</span>
   <div class="pa_box" id="links" style="">
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
     <span><a href="">Liens</a></span>
  </div>
  
  <div id="main_pa">
      
      <div id="nuest">
        
        <div class="img">
            
         </div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id mauris congue, venenatis dolor vel, ullamcorper lectus. Morbi pellentesque iaculis dolor, vel facilisis tellus semper nec. Fusce felis diam, sodales in sapien non, rutrum facilisis augue. Nullam mattis tellus non arcu tristique, in cursus diam congue. Aliquam erat volutpat. Nulla suscipit, arcu quis vestibulum facilisis, augue orci varius justo, at semper quam eros id odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum est massa, semper pulvinar mi blandit, aliquet ullamcorper tellus. Mauris ullamcorper urna a eros rutrum ullamcorper.
    </div>
      
      <div id="staff">
        
        <div class="infos 1 active">
             <img src="http://img11.hostingpics.net/pics/84821725hs.png" />
            <h4>
                Nom Prénom
            </h4>
            
            <h5>
                Rang
            </h5><a href="">MP</a><br /><a href="">Profil</a><br /><a href="">Contact</a>
         </div>
        
        <div class="infos 2">
             <img src="http://img15.hostingpics.net/pics/758288yanggaengie.png" />
            <h4>
                Nom Prénom
            </h4>
            
            <h5>
                Rang
            </h5><a href="">MP</a><br /><a href="">Profil</a><br /><a href="">Contact</a>
         </div>
        
        <div class="infos 3">
             <img src="http://img15.hostingpics.net/pics/6916193.png" />
            <h4>
                Nom Prénom
            </h4>
            
            <h5>
                Rang
            </h5><a href="">MP</a><br /><a href="">Profil</a><br /><a href="">Contact</a>
         </div>
        
        <div class="infos 4">
             <img src="http://img11.hostingpics.net/pics/750566soohyun1.png" />
            <h4>
                Nom Prénom
            </h4>
            
            <h5>
                Rang
            </h5><a href="">MP</a><br /><a href="">Profil</a><br /><a href="">Contact</a>
         </div>
        
        <div id="name">
             <span class="1">Nom Prénom</span><span class="2">Nom Prénom</span>
           <span class="3">Nom Prénom</span><span class="4">Nom Prénom</span>
         </div>
        
     </div>
      
      <div id="part" style="">
        
        <h3>
             Partenaires au TOP
         </h3><a href="">Nos partenaires</a><br /><a href="">Nous lier</a>
         <div id="blocimg">
             <a href="http://creaphy.olympe.in/index.php"><img class="part" src="http://i.imgur.com/SMjyrFL.png"/></a>
           <a href="http://creaphy.olympe.in/index.php"><img class="part" src="http://i.imgur.com/zIN4F7S.png"/></a>
           <a href="http://creaphy.olympe.in/index.php"><img class="part" src="http://i.imgur.com/SMjyrFL.png"/></a>
           <a href="http://creaphy.olympe.in/index.php"><img class="part" src="http://i.imgur.com/zIN4F7S.png"/></a>
           <a href="http://creaphy.olympe.in/index.php"><img class="part" src="http://i.imgur.com/SMjyrFL.png"/></a>
           <a href="http://creaphy.olympe.in/index.php"><img class="part" src="http://i.imgur.com/zIN4F7S.png"/></a>
           <a href="http://creaphy.olympe.in"><img class="part" src="http://i.imgur.com/SMjyrFL.png"/></a>
           <a href="http://creaphy.olympe.in"><img class="part" src="http://i.imgur.com/zIN4F7S.png"/></a>
           <a href="http://creaphy.olympe.in"><img class="part" src="http://i.imgur.com/SMjyrFL.png"/></a>
           <a href="http://creaphy.olympe.in"><img class="part" src="http://i.imgur.com/zIN4F7S.png"/></a>
           <a href="http://creaphy.olympe.in"><img class="part" src="http://i.imgur.com/SMjyrFL.png"/></a>
           <a href="http://creaphy.olympe.in"><img class="part" src="http://i.imgur.com/zIN4F7S.png"/></a>
          
       </div>
        
     </div>
      
      <div id="video" style="">
     <iframe style="width: 100%; height: 193px;" src="//www.youtube.com/embed/ynIRUjgmBKA" frameborder="0" allowfullscreen></iframe>
     </div>
      
      <div id="news">
        
        <h3>
             Dernières Mises à Jour
         </h3>
        
        <div class="blocnews">
             - blabla<br /> - blabla<br /> - blabla<br /> - blabla<br /> - blabla<br /> - blabla<br />
         </div>
        
     </div>
      
   </div>
  
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code de PA #2

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-