Partagez|

[CREAPHY] Code PA #1

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

avatar

I am Pyphilia

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

MessageSujet: [CREAPHY] Code PA #1 Mer 1 Jan - 0:16



CSS
Code:

@font-face {
  font-family: 'Dorsa';
  font-style: normal;
  font-weight: 400;
  src: local('Dorsa'), local('Dorsa-Regular'), url(http://themes.googleusercontent.com/static/fonts/dorsa/v4/2nGoyekyJwdQo01pNwjk8w.woff) format('woff');
}

#pa_yr {width:700px;height:370px;
color:black;
margin:auto;
  background:#4c322e;
text-align:center;
font-family:arial;
font-size:12px;}

#pa_yr a {text-decoration:none;text-transform:uppercase;}

#pa_yr h1 {font-size:5.3em;
  font-family: 'Dorsa';
font-weight:200;
  color:#aca7a7;
text-transform:uppercase;
margin-bottom:-5px;
letter-spacing:5px;}

#pa_yr a {margin:7px;color:#1b0e0e;
position:relative;}

#pa_yr span.links {display:inline-block;vertical-align:center;
height:20px;margin:-0px 5px -5px;
font-size:10px;
  color:#918282;
  font-family: times new roman;
text-transform:uppercase;}

#pa_yr > div {display:inline-block;vertical-align:top;}
#pa_yr div div {background:#6a4540;
margin:5px;
border:0px blue solid;}

#pa_yr #part {width:200px;height:170px;
  padding:5px;margin-bottom:-10px;
position:relative;}
#pa_yr #part a {margin:2px;}
#pa_yr #part a img {width:60px;}

#pa_yr #top {width:200px;height:70px;
padding:5px;}

#pa_yr #staff {width:258px;height:158px;
padding:1px 1px 1px 4px;}
#pa_yr #staff div {height:110px;margin-bottom:-5px;}
#pa_yr #staff span.fuck {
  font-size:36px;font-weight:bold;
font-family: 'Dorsa';
letter-spacing:10px;}
#pa_yr #staff div span.pseudo {font-size:26px;display:block;
margin:-18px 0 -5px;text-shadow:1px 2px 0 #c3bdbd;
letter-spacing:6px;font-weight:200;
font-family: 'Dorsa';
}
#pa_yr #staff div a {margin:4px;
}

#pa_yr #staff #plus:hover,#pa_yr #staff #moins:hover {cursor:crosshair;}

#pa_yr #member {width:264px;height:105px;
overflow:hidden;
position:relative;
  line-height:10px;
font-size:11px;}
#pa_yr #member a {margin:4px;
  z-index:0;
}
#pa_yr #member span {
  font-size:26px;
font-family: 'Dorsa';
}
#pa_yr #member img {width:264px;
  position:absolute;top:0;left:0;
  z-index:3;
  
transition:all 1s;
-o-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;}
#pa_yr #member:hover img {margin-left:260px;}

#pa_yr #news {width:150px;height:260px;text-align:justify;
padding:5px;}

HTML
Code:
<div id="pa_yr">
 
<h1>Bienvenue !
</h1><span class="links"><a href="http://creaphy.olympe.in">Contexte</a></span><span class="links"><a href="http://creaphy.olympe.in">Règlement</a></span><span class="links"><a href="http://creaphy.olympe.in">Scénarios</a></span><span class="links"><a href="http://creaphy.olympe.in">Bottins d'avatars</a></span><span class="links"><a href="http://creaphy.olympe.in">Lexique</a></span><span class="links"><a href="http://creaphy.olympe.in">Partenariats</a></span><br />
<div>
 
<div id="part">
 <a href="http://creaphy.olympe.in"><img src="http://img15.hostingpics.net/pics/761197part.png" /></a><a href="http://creaphy.olympe.in"><img src="http://img15.hostingpics.net/pics/761197part.png" /></a><a href="http://creaphy.olympe.in"><img src="http://img15.hostingpics.net/pics/761197part.png" /></a><a href="http://creaphy.olympe.in"><img src="http://img15.hostingpics.net/pics/761197part.png" /></a><a href="http://creaphy.olympe.in"><img src="http://img15.hostingpics.net/pics/761197part.png" /></a><a href="http://creaphy.olympe.in"><img src="http://img15.hostingpics.net/pics/761197part.png" /></a>
</div><a href="http://creaphy.olympe.in">Vous !</a><a href="http://creaphy.olympe.in">Plus ?</a>
<div id="top">
 top-sites ou autres
</div>
 
</div>
 
<div>
 
<div id="staff">
 
<div id="1">
 <img style="height: 90px;" src="http://img15.hostingpics.net/pics/207080pandora16.gif" /><span class="pseudo">Nom Prénom</span><a href="http://creaphy.olympe.in">MP</a><a href="">Présentation</a><a href="http://creaphy.olympe.in">Profil</a>
</div>
 
<div id="2">
 <img style="height: 90px;" src="http://img15.hostingpics.net/pics/848850pandora20.gif" /><span class="pseudo">Nom Prénom</span><a href="http://creaphy.olympe.in">MP</a><a href="">Présentation</a><a href="http://creaphy.olympe.in">Profil</a>
</div>
 
<div id="3">
 <img style="height: 90px;" src="http://img15.hostingpics.net/pics/881404pandora17.gif" /><span class="pseudo">Nom Prénom</span><a href="http://creaphy.olympe.in">MP</a><a href="http://creaphy.olympe.in">Présentation</a><a href="http://creaphy.olympe.in">Profil</a>
</div>
 
<div id="4">
 <img style="height: 90px;" src="http://img15.hostingpics.net/pics/251428pandora22.gif" /><span class="pseudo">Nom Prénom</span><a href="http://creaphy.olympe.in">MP</a><a href="">Présentation</a><a href="http://creaphy.olympe.in">Profil</a>
</div><span class="fuck"><span id="moins">◀</span> FUCK <span id="plus">▶</span></span>
</div>
 
<div id="member">
 <img src="http://img11.hostingpics.net/pics/467544wow.gif" /><br /><br /><span>Nom Prénom</span><br />bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /><a href="http://creaphy.olympe.in">MP</a><a href="http://creaphy.olympe.in">Profil</a>
</div>
 
</div>
 
<div>
 
<div id="news">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed convallis est, et facilisis urna. Nullam eleifend bibendum justo, bibendum dictum nulla tempus laoreet. Aliquam iaculis tincidunt dapibus. Nam nec tortor lacinia nibh elementum congue. Suspendisse malesuada magna neque, in laoreet ipsum luctus quis. Fusce accumsan est a dolor dictum, eu laoreet magna molestie.
</div>
 
</div>
</div>

JQUERY
Code:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript">$(document).ready(function() {

nb=1;
$("#pa_yr #staff div").css("display", "none");
$("#pa_yr #staff #1").css("display","block");

$("span#plus").click(function(){
nb++;
if(nb==5){nb=1};
$("#pa_yr #staff div").css("display", "none");
$("#pa_yr #staff #"+nb).css("display","block");

});
$("span#moins").click(function(){
nb--;
if(nb==0){nb=4};
$("#pa_yr #staff div").css("display", "none");
$("#pa_yr #staff #"+nb).css("display","block");
});

});</script>
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code PA #1

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-