Page d’accueil Pokemon !

 :: Exposition NLDD :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas
MessagePage d’accueil Pokemon ! Lun 20 Juin - 18:46
Bonjour ou Bonsoir ! Alors moi se serait une commande pour une PA spéciale ! Je m'occupe d'un serveur de jeux vidéos sur le thème Pokemon, et nous faisons un Forum pour aidez les joueurs à avoir plus de détails ! En voyant votre talent j'aimerais votre aide pour une PA spéciale :

Largeur maximale : 900px
Hauteur maximale : Auto !
Schéma : http://image.noelshack.com/fichiers/2016/25/1466440381-1.png http://image.noelshack.com/fichiers/2016/25/1466440381-2.png
Éléments :
Images : Le Hasardex : http://image.noelshack.com/fichiers/2016/25/1466440698-hasardex.png
Animations : Pour la partie Staff, j'aimerais savoir si il serait possible d'ajouter ou de retirer facilement les codages vu que notre serveur s’agrandit et qu'on rajoute souvent des personnes dans le staff et ainsi les rajouter rapidement dans la pa ?
Informations supplémentaires : Si jamais il y a des parties flous ou impossible n’hésitez pas à me le faire savoir.

Merci d'avoir pris le temps de lire ma demande, cordialement, Luna
Revenir en haut Aller en bas
MessageRe: Page d’accueil Pokemon ! Jeu 23 Juin - 6:32
Nombre de messages : 838
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Bonjour,

Code:
<script type="text/javascript">
var random_images_array = ['liendelimage.png', 'liendelimage.png', 'liendelimage.png', 'liendelimage.png']; // placer les liens des images ici
   
function getRandomImage(imgAr) {
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + img + '" alt = "">';
    document.write(imgStr); document.close();
}
</script>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css"><!-- PAGE D'ACCUEIL --><div class="POK"><!-- BIENVENUE --><div class="welcPOK">Bienvenue {USERNAME}</div><div class="boxPOK"><!-- BLOC LIENS --><div class="lksPOK"><!-- IMAGE 200*200 --><img src="http://www.aht.li/2780872/200200.png" /><!-- LIENS --><a href="" target="_blank">Lien</a><!-- II --><a href="" target="_blank">Lien</a><!-- III --><a href="" target="_blank">Lien</a><!-- IV --><a href="" target="_blank">Lien</a><!-- V --><a href="" target="_blank">Lien</a></div><!-- STAFF - IMAGES EN 650*225 --><div class="staffPOK"><!-- I --><div><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- II --><div class="II"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- III --><div class="III"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IV --><div class="IV"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- V --><div class="V"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><br/><!-- VI --><div class="VI"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VII --><div class="VII"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VIII --><div class="VIII"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IX --><div class="IX"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- X --><div class="X"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div></div><!-- HASARDEX --><div class="hazPOK" style="background:url(http://image.noelshack.com/fichiers/2016/25/1466440698-hasardex.png);"><!-- TITRE --><span>Hasardex</span><!-- POKEMONS --><div class="imgHAZ"><a href="" target="_blank"><script type="text/javascript">getRandomImage(random_images_array)</script></a></div></div></div></div>

Partie CSS :
Code:
/* PAGE D'ACCUEIL */
.POK {
margin:auto; width:800px; line-height:16px;
}
.POK a{text-decoration:none !important;}
/* BIENVENUE */
.welcPOK {
margin-bottom:5px; text-align:center;
color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */
}
/* FOND PAGE D'ACCUEIL */
.boxPOK {
height:530px; border-radius:150px; text-align:left;
background:lightgrey; /* MODIFIABLE */
}
/* BLOC LIENS */
.lksPOK {
position:absolute; margin-top:45px; margin-left:-75px;
width:230px; height:440px; border-radius:50px;
background:#191919; /* MODIFIABLE */
}
/* IMAGE BLOC LIENS */
.lksPOK img{
display:block; margin:10px auto;
width:200px; height:200px; border-radius:200px; border:10px solid;
border-color:grey; /* MODIFIABLE */
}
/* LIEN BLOC LIENS */
.lksPOK a{
display:block; margin:5px auto; width:90%; padding:5px 0;
background:grey; color:white; letter-spacing:1px; /* MODIFIABLE */
text-align:center; text-transform:uppercase; font-family:Fjalla One; font-size:18px;
transition:all 0.65s; -webkit-transition:all 0.65s;
}
/* SURVOL LIEN BLOC LIENS */
.lksPOK a:hover {
letter-spacing:3px; /* MODIFIABLE */
}
/* BLOC STAFF */
.staffPOK {
position:absolute; margin-top:25px; margin-left:200px;
width:650px; height:225px; border-radius:45px; overflow:hidden; text-align:left;
background:black; /* MODIFIABLE */
}
.staffPOK div{
display:inline-block; margin:5px 15px;
width:100px; height:100px; overflow:hidden;
transition:all 0.65s; -webkit-transition:all 0.65s;
}
/* PSEUDONYME / RANG / MP STAFF */
.staffPOK div:hover span{
position:absolute; z-index:5; margin-top:15px; margin-left:-585px;
width:200px; height:20px;
background:crimson; color:black; /* MODIFIABLE */
}
/* DESCRIPTION STAFF */
.staffPOK div:hover p{
position:absolute; z-index:3; margin-top:-180px; margin-left:25px;
width:300px; height:140px; padding:5px; overflow:auto; text-align:justify;
background:white; color:black; /* MODIFIABLE */
}
/* IMAGE STAFF */
.staffPOK div img{
width:100px; height:100px; border-radius:150px; transition:all 0.65s; -webkit-transition:all 0.65s;
}
.staffPOK div:hover img{
width:650px; height:225px; border-radius:45px;
}
.staffPOK div:hover {
position:absolute; margin-top:0; margin-left:0;
width:650px; height:225px; border-radius:45px;
}
.staffPOK .II:hover {position:absolute; margin-top:0; margin-left:-130px;}
.staffPOK .III:hover {position:absolute; margin-top:0; margin-left:-260px;}
.staffPOK .IV:hover {position:absolute; margin-top:0; margin-left:-390px;}
.staffPOK .V:hover {position:absolute; margin-top:0; margin-left:-520px;}
.staffPOK .VI:hover {position:absolute; margin-top:-110px; margin-left:0;}
.staffPOK .VII:hover {position:absolute; margin-top:-110px; margin-left:-130px;}
.staffPOK .VIII:hover {position:absolute; margin-top:-110px; margin-left:-260px;}
.staffPOK .IX:hover {position:absolute; margin-top:-110px; margin-left:-390px;}
.staffPOK .X:hover {position:absolute; margin-top:-110px; margin-left:-520px;}
/* HASARDEX */
.hazPOK {
position:absolute; margin-top:320px; margin-left:250px;
width:500px; height:150px;
}
/* TITRE HASARDEX */
.hazPOK span{
position:absolute; margin-top:-25px; width:500px; text-align:center;
color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */
}
/* POKEMONS HAZARDEX */
.imgHAZ{
margin:36px auto 0; width:75px; height:75px; overflow:hidden; text-align:center;
}

Instructions :
I. Copier/coller le code initial dans un sujet dédié de sa partie administration
II. Modifier le code à partir du logiciel de sa préférence
III. Actualiser le code du sujet dédié
IV. Remplacer l'intégralité du code dans la partie correspondante du panneau d'administration
∟ Affichage > Page d'accueil > Généralités
∞ Répéter les étapes II à IV à chaque modification

Revenir en haut Aller en bas
MessageRe: Page d’accueil Pokemon ! Ven 1 Juil - 14:55
Vraiment Magnifique ! Merci beaucoup !

J'ai juste un soucis ( oui vraiment désolé je suis perfectionniste...) Est-ce qu'il y aurait moyen que les petites images du staff, quand elles sont miniatures ne soient pas écrasé ? Peut être une image en miniature et une autre agrandit ? Dites moi ce que vous en pensez :)

http://image.noelshack.com/fichiers/2016/26/1467377676-pa.png
Revenir en haut Aller en bas
MessageRe: Page d’accueil Pokemon ! Sam 2 Juil - 0:50
Nombre de messages : 838
Date d'inscription : 04/07/2007
Logiciels : Photoshop CS6 - Flash CS6 - Notepad
Code:
<script type="text/javascript">
var random_images_array = ['liendelimage.png', 'liendelimage.png', 'liendelimage.png', 'liendelimage.png']; // placer les liens des images ici
 
function getRandomImage(imgAr) {
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + img + '" alt = "">';
    document.write(imgStr); document.close();
}
</script>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css"><!-- PAGE D'ACCUEIL --><div class="POK"><!-- BIENVENUE --><div class="welcPOK">Bienvenue {USERNAME}</div><div class="boxPOK"><!-- BLOC LIENS --><div class="lksPOK"><!-- IMAGE 200*200 --><img src="http://www.aht.li/2780872/200200.png" /><!-- LIENS --><a href="" target="_blank">Lien</a><!-- II --><a href="" target="_blank">Lien</a><!-- III --><a href="" target="_blank">Lien</a><!-- IV --><a href="" target="_blank">Lien</a><!-- V --><a href="" target="_blank">Lien</a></div><!-- STAFF - IMAGES I EN 100*100 & IMAGES II EN 650*225 --><div class="staffPOK"><!-- I --><div><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- II --><div class="II"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- III --><div class="III"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IV --><div class="IV"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- V --><div class="V"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><br/><!-- VI --><div class="VI"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VII --><div class="VII"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VIII --><div class="VIII"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IX --><div class="IX"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- X --><div class="X"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div></div><!-- HASARDEX --><div class="hazPOK" style="background:url(http://image.noelshack.com/fichiers/2016/25/1466440698-hasardex.png);"><!-- TITRE --><span>Hasardex</span><!-- POKEMONS --><div class="imgHAZ"><a href="" target="_blank"><script type="text/javascript">getRandomImage(random_images_array)</script></a></div></div></div></div>

Partie CSS :
Code:
/* PAGE D'ACCUEIL */
.POK {
margin:auto; width:800px; line-height:16px;
}
.POK a{text-decoration:none !important;}
/* BIENVENUE */
.welcPOK {
margin-bottom:5px; text-align:center;
color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */
}
/* FOND PAGE D'ACCUEIL */
.boxPOK {
height:530px; border-radius:150px; text-align:left;
background:lightgrey; /* MODIFIABLE */
}
/* BLOC LIENS */
.lksPOK {
position:absolute; margin-top:45px; margin-left:-75px;
width:230px; height:440px; border-radius:50px;
background:#191919; /* MODIFIABLE */
}
/* IMAGE BLOC LIENS */
.lksPOK img{
display:block; margin:10px auto;
width:200px; height:200px; border-radius:200px; border:10px solid;
border-color:grey; /* MODIFIABLE */
}
/* LIEN BLOC LIENS */
.lksPOK a{
display:block; margin:5px auto; width:90%; padding:5px 0;
background:grey; color:white; letter-spacing:1px; /* MODIFIABLE */
text-align:center; text-transform:uppercase; font-family:Fjalla One; font-size:18px;
transition:all 0.65s; -webkit-transition:all 0.65s;
}
/* SURVOL LIEN BLOC LIENS */
.lksPOK a:hover {
letter-spacing:3px; /* MODIFIABLE */
}
/* BLOC STAFF */
.staffPOK {
position:absolute; margin-top:25px; margin-left:200px;
width:650px; height:225px; border-radius:45px; overflow:hidden; text-align:left;
background:black; /* MODIFIABLE */
}
.staffPOK div{
display:inline-block; margin:5px 15px;
width:100px; height:100px; overflow:hidden;
transition:all 0s; -webkit-transition:all 0s;
}
/* PSEUDONYME / RANG / MP STAFF */
.staffPOK div:hover span{
position:absolute; z-index:5; margin-top:15px; margin-left:-585px;
width:200px; height:20px;
background:crimson; color:black; /* MODIFIABLE */
}
/* DESCRIPTION STAFF */
.staffPOK div:hover p{
position:absolute; z-index:3; margin-top:-180px; margin-left:25px;
width:300px; height:140px; padding:5px; overflow:auto; text-align:justify;
background:white; color:black; /* MODIFIABLE */
}
/* IMAGES STAFF */
.staffPOK div .IIPOK{
width:100px; height:100px; border-radius:100px; transition:all 0.65s; -webkit-transition:all 0.65s;
}
.staffPOK div:hover .IIPOK{
width:650px; height:225px; border-radius:45px;
}
.staffPOK div .IPOK {
width:100px; height:100px; border-radius:100px;
}
.staffPOK div:hover .IPOK{
width:0px; height:0px;opacity:0;
}
.staffPOK div:hover {
position:absolute; margin-top:0; margin-left:0;
width:650px; height:225px; border-radius:45px;
transition:all 0.65s; -webkit-transition:all 0.65s;
}
.staffPOK .II:hover {position:absolute; margin-top:0; margin-left:-130px;}
.staffPOK .III:hover {position:absolute; margin-top:0; margin-left:-260px;}
.staffPOK .IV:hover {position:absolute; margin-top:0; margin-left:-390px;}
.staffPOK .V:hover {position:absolute; margin-top:0; margin-left:-520px;}
.staffPOK .VI:hover {position:absolute; margin-top:-110px; margin-left:0;}
.staffPOK .VII:hover {position:absolute; margin-top:-110px; margin-left:-130px;}
.staffPOK .VIII:hover {position:absolute; margin-top:-110px; margin-left:-260px;}
.staffPOK .IX:hover {position:absolute; margin-top:-110px; margin-left:-390px;}
.staffPOK .X:hover {position:absolute; margin-top:-110px; margin-left:-520px;}
/* HASARDEX */
.hazPOK {
position:absolute; margin-top:320px; margin-left:250px;
width:500px; height:150px;
}
/* TITRE HASARDEX */
.hazPOK span{
position:absolute; margin-top:-25px; width:500px; text-align:center;
color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */
}
/* POKEMONS HAZARDEX */
.imgHAZ{
margin:36px auto 0; width:75px; height:75px; overflow:hidden; text-align:center;
}
Revenir en haut Aller en bas
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CCCrush. :: Exposition NLDD :: Intruders :: Réalisés-