Page d’accueil

Bonjour,

je sollicite votre aide pour le codage d'une page d'accueil.

Largeur maximale : 845px
Hauteur maximale : 450px
Schéma : https://www.zupimages.net/up/16/24/88fj.jpg
Éléments : Je voudrais que le fond de la PA soit une image. Pour le moment, un rectangle noir fera l'affaire. La phrase (un espoir sous forme de cage) ne doit pas être sur l'image mais bien en texte dans la PA.
Je voudrais, si possible, avoir la possibilité de rajouter des images top-sites supplémentaires ou en enlever.

Concernant l'event, je voudrais que ça soit une image et que le texte apparaisse en dessous au survol, de même pour le staff.

"Les autres ?", "+ d'infos" doivent être des liens.

Images : Pour les top-sites : https://www.zupimages.net/up/15/34/w72u.png https://www.zupimages.net/up/15/34/n0da.png https://www.zupimages.net/up/15/34/6vn5.png https://www.zupimages.net/up/15/34/8whu.png https://www.zupimages.net/up/16/24/sccu.png

Pour les autres, des images vides conviendront :).
Mis à part les partenaires, les dimensions des images peuvent être modifiées à votre guise.

Animations : Pour le staff, je voudrais que l'image disparaisse en glissant vers le bas, pour l'évent, je voudrais que l'image s'ouvre comme si elle tombait en arrière (je ne sais pas expliquer autrement, excusez moi !).

Pour les attendus, je voudrais que l'image devienne saturée quand on la survol, de même que pour les top-sites.

Informations supplémentaires : Merci beaucoup & bonne journée.

Bonjour,

Code:: <link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/FLU_PA.css" rel="stylesheet" type="text/css"><div class="FLU"><div class="boxFLU"><div class="welcFLU">Un espoir...</div><div class="staffFLU"><div><div><img src="http://www.aht.li/2911630/12575.png" /><p>Pseudonyme<b style="color:forestgreen;">Disponibilité</b><a href="" target="_blank">MP</a> - <a href="" target="_blank">Profil</a></p></div></div><div><div><img src="http://www.aht.li/2911630/12575.png" /><p>Pseudonyme<b style="color:forestgreen;">Disponibilité</b><a href="" target="_blank">MP</a> - <a href="" target="_blank">Profil</a></p></div></div></div><div class="topFLU"><a href="" target="_blank"><img src="http://www.zupimages.net/up/15/34/w72u.png" /></a><a href="" target="_blank"><img src="http://www.zupimages.net/up/15/34/n0da.png" /></a><a href="" target="_blank"><img src="http://www.zupimages.net/up/15/34/6vn5.png" /></a><a href="" target="_blank"><img src="http://www.zupimages.net/up/15/34/8whu.png" /></a><a href="" target="_blank"><img src="http://www.zupimages.net/up/16/24/sccu.png" /></a></div><div class="eventFLU"><img src="http://www.aht.li/2911640/255100.png" /><p><b>Evénement en cours</b><span>Résumé</span><a href="" target="_blank">lien</a> - <a href="" target="_blank">lien</a></div></div><div class="boxFLU"><div class="fosFLU">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div><div class="ctxtFLU">Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="boxFLU"><div class="pfFLU"><a href="" target="_blank"><img src="http://www.aht.li/2911667/60100C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2911667/60100C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2911667/60100C.png" /></a><span><a href="" target="_blank">les autres</a></span></div><div class="grpFLU"><span>Les castes</span><p><b style="color:coral;">Groupe</b> : X points<br/><b style="color:lightcoral;">Groupe</b> : X points<br/><b style="color:lightgreen;">Groupe</b> : X points<br/><b style="color:lightblue;">Groupe</b> : X points<br/><b style="color:yellow;">Groupe</b> : X points<br/><a href="" target="_blank">+ d'informations</a></p></div></div><br/><div class="partFLU"><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="" target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a></div><div class="txtFLU">sous forme de cage.</div></div>

Partie CSS :

Code:: /* PAGE D'ACCUEIL */
.FLU {
background:url() !important;
}
/* ESPOIR */
.welcFLU {
color:lightblue !important;
}
/* CONTENU STAFF */
.staffFLU p{
background:lightgrey !important; color:black !important;
}
/* TOP-SITES */
.topFLU {
background:none !important;
}
/* CONTENU EVENEMENT EN COURS */
.eventFLU p{
background:#dedede !important; color:black !important;
}
/* TITRE EVENEMENT EN COURS */
.eventFLU b{
color:blue !important;
}
/* INFORMATIONS */
.fosFLU {
color:white !important;
}
/* CONTEXTE */
.ctxtFLU {
background:grey !important; color:black !important;
}
/* LIEN VERS LE RESTE DES PREDEFINIS */
.pfFLU span{
background:white !important;
}
.pfFLU span a {
color:black !important;
}
/* TITRE GROUPES */
.grpFLU span{
color:white !important;
}
/* CONTENU GROUPES */
.grpFLU p{
border:1px solid white !important; color:white !important;
}
/* LIEN + D'INFORMATIONS GROUPES */
.grpFLU a{
color:white !important;
}
/* CAGE */
.txtFLU {
color:lightblue !important;
}

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

Taille de l'image de fond : 845*360

Bonjour,

merci beaucoup et bonne journée.