Fiche de Partenariat - Bataille médiévale, tons marrons
Bonsoir ! Je propose mon premier (il me semble) code en LS sur NU. J'espère qu'il ne comporte pas trop des fautes :)
C'est, comme le titre l'indique, une fiche de partenariat. C'est une fiche qui comporte du CSS, il faut donc soit avoir accès à la fiche de CSS du site où vous souhaitez l'héberger, soit avoir un forum où héberger la fiche en entier.
Vous pouvez voir ici le rendu de la fiche, des animations sont présentes sur les cases "Liens" et les cases "Pseudo".
> https://dame-nature-revenge.1fr1.net/h13-epic
- Images :
Au passage de la souris sur les "Liens" :
Sur les "Pseudos" :
Les couleurs, images, typographies, etc sont évidemment modifiables. L'image du haut fait 450px de large et les images du staff sont en 100x100 pixels. Et bien sûr, ne retirez pas mon copyright, merci. Voilà le code :
- Code:
.a {
color:#F4F3F3;
text-decoration : none;
}
.fond_fiche{
position : relative;
height: 625px;
width: 450px;
background-color: #929180;
}
.banniere_nomdufo {
position : absolute;
top: -5px;
height: auto;
width: 450px;
background-color:#A9A794 ;
}
.nomdufo{
font-family: 'Cinzel', serif;
color: #F4F3F3;
font-size: 25px;
padding-top:3px;
font-weight : bold;
text-align: center;
letter-spacing : 1px;
}
.bloc_contexte{
position : absolute;
top : 45px;
left: 10px;
height:235px;
width:260px;
border-right: 1px solid #A9A794;
}
.contenu_contexte{
position : absolute;
top: 5px;
left: 0px;
height: 225px;
width: 250px;
overflow : auto;
}
.texte{
font-family: 'Red Hat Display', sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;
}
.bloc_liens{
position : absolute;
right : 10px;
width :150px;
height: 25px;
background-color:#A9A794;
transition-duration : 1.5s;
}
.bloc_liens:hover{
width : 135px;
transition-duration : 1;5s;
}
.liensdufo{
font-family: 'Cizel', serif;
color: #F4F3F3;
font-size: 20px;
text-align :center;
font-variant : small-caps;
letter-spacing : 2px;
transition-duration : 2s;
}
.liensdufo:hover{
letter-spacing : 0px;
transition-duration : 2s;
}
.banniere_messages_membres {
position : absolute;
top : 295px;
height: auto;
width: 450px;
background-color:#A9A794 ;
text-align: center;
}
.messages_membres{
font-family: 'Red Hat Display', sans-serif;
color: #F4F3F3;
font-size: 20px;
font-variant:small-caps;
}
.soustitre_staff {
position : absolute;
left : 90px;
top : 332px;
color: #F4F3F3;
font-family :'Cinzel', serif;
font-size : 23px;
font-weight : bold;
}
.image_staff{
position :absolute;
left : 20px;
border : 3px solid #F4F3F3;
border-radius : 60px;
}
.pseudostaff{
position: absolute;
left : 75px;
height: 25px;
width: 140px;
background-color:#A9A794;
transition-duration : 1s ;
}
.pseudostaff:hover{
width:130px;
transition-duration : 1s ;
}
.texte_pseudostaff{
color: #F4F3F3;
font-size: 18px;
font-family :'Cinzel', serif;
text-align: right;
padding-right:4px;
font-variant : small-caps;
font-weight : bold;
letter-spacing : 0.5px;
}
.texte_rangstaff{
position :absolute;
right: 250px;
width : 95px;
height : 50px;
font-style :italic;
font-weight : bold;
font-size : 12px;
font-family : 'Red Hat Display', sans-serif;
color : #F4F3F3;
text-align : right;
padding-right : 3px;
overflow : auto ;
}
.soustitre_infos{
position : absolute;
right: 75px;
top:332px;
color: #F4F3F3;
font-family :'Cinzel', serif;
font-size : 23px;
font-weight : bold;
}
.bloc_infos{
position : absolute;
right : 10px;
top : 364px;
width : 205px;
height : 235px;
border-left: 1px solid #A9A794;
}
.contenu_infos{
position : absolute;
top: 5px;
left: 10px;
height: 225px;
width: 190px;
overflow : auto;
}
.credits{
position : absolute;
bottom: 5px;
left :210px ;
font-family: 'Calibri', sans-serif;
font-size : 8px;
color : #000000;
}
- Code:
<img src="https://pre00.deviantart.net/5c26/th/pre/f/2017/112/9/8/the_last_one_by_88grzes-db6preo.jpg"
style="height:auto;width:450px;" />
<div class="fond_fiche">
<div class="banniere_nomdufo">
<div class="nomdufo">
<a class="a" href="#" target="_blank">
NOM DU FORUM </a>
</div>
</div>
<div class="bloc_contexte">
<div class="contenu_contexte">
<div class="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
</div>
<div class="bloc_liens" style="top:45px;"><div class="liensdufo">
<a class="a" href="#" target="_blank">incipit</a> </div></div>
<div class="bloc_liens" style="top:80px;"><div class="liensdufo">
<a class="a" href="#" target="_blank">effectifs </a></div></div>
<div class="bloc_liens" style="top:115px;"><div class="liensdufo">
<a class="a" href="#" target="_blank">partenariats </a></div></div>
<div class="bloc_liens" style="top:150px;"><div class="liensdufo">
<a class="a" href="#" target="_blank">règlement </a></div></div>
<div class="bloc_liens" style="top:185px;"><div class="liensdufo">
<a class="a" href="#" target="_blank">autre </a></div></div>
<div class="bloc_liens" style="top:220px;"><div class="liensdufo">
<a class="a" href="#" target="_blank">autre </a></div></div>
<div class="bloc_liens" style="top:255px;"><div class="liensdufo">
<a class="a" href="#" target="_blank">autre </a></div></div>
<div class="banniere_messages_membres">
<span class="messages_membres">
xx membres - xx messages
</span></div>
<div class="soustitre_staff"> Staff </div>
<div class="pseudostaff" style="top: 372px;" >
<div class="texte_pseudostaff">
<a class="a" href="#" target="_blank">Pseudo </a>
</div>
</div>
<div class="texte_rangstaff" style="top : 398px;"> fondateur
</div>
<div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/cheval10.jpg');
height:70px; width:70px;top : 364px;"></div>
<div class="pseudostaff" style="top: 452px;" >
<div class="texte_pseudostaff">
<a class="a" href="#" target="_blank">Pseudolong </a>
</div>
</div>
<div class="texte_rangstaff" style="top : 478px;"> administrateur & codeur
</div>
<div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/arbre_10.jpg');
height:70px; width:70px;top : 444px;"></div>
<div class="pseudostaff" style="top: 532px;" >
<div class="texte_pseudostaff">
<a class="a" href="#" target="_blank">Pseudo </a>
</div>
</div>
<div class="texte_rangstaff" style="top : 558px;"> moderateur
</div>
<div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/lance_10.jpg');
height:70px; width:70px;top : 524px;"></div>
<div class="soustitre_infos" style=" margin : 0px; "> Infos </div>
<div class="bloc_infos">
<div class="contenu_infos">
<div class="texte">
:arrow_forward: une première information importante sur ton forum : sa date de création ? une particularité ?
un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
récente ? <br /><br />
:arrow_forward: une deuxième information importante sur ton forum : sa date de création ? une particularité ?
un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
récente ? <br /><br />
:arrow_forward: autre chose ?
</div>
</div>
</div>
<div class="credits">@Clém20</div>
</div>
Et les deux typographies utilisées :
- Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap" rel="stylesheet">
Je vais apporter quelques précisions pour ceux qui seraient novices en codage et/ou ceux que cela intéresse :
- Précisions:
- l'image en haut de la fiche a actuellement une largeur de 450 pixels et une hauteur définie en auto. Si vous regardez le code elle n'est pas "à l'intérieur" de la fiche, elle est au dessus, c'est pour éviter tout déréglage de la fiche si la hauteur de votre image était différente de celle de la mienne (car imaginons que votre image soit 50 pixels plus haute, tout le contenu de la fiche se retrouverait décalé de 50 pixels vers le bas et donc hors du fond de la fiche). Vous remarquez que sur le rendu il n'y a pas d'espace entre le bas de l'image et le haut de la fiche, ce qui arrive normalement si vous placez deux éléments indépendants à la suite. Si vous voulez que cela reste comme cela il vous faire attention à la ligne- Code:
top : -5px;
- Code:
.banniere_nomdufo{
}
- de manière générale si vous modifiez les balises- Code:
height : Xpx;
width : Xpx;
- Code:
top : Xpx;
bottom : Xpx;
left : Xpx;
right : Xpx;
- le "nom du forum", les "liens" et les "pseudos" peuvent être des liens vers des sujets de votre forum, il faudra pour cela placer l'url du sujet en question à la place du # entre les guillemets ici :
- Code:
<a class="a" href="#" target="_blank"></a>
Pour que votre fiche soit agréable à ceux qui la verront ne supprimez pas le- Code:
target="_blank"
Pour terminer sur les liens, vous pouvez voir que dans ce code ils ont une class associée, c'est la première fonction du CSS. Vous pouvez bien sûr modifier la couleur des liens, pour ce qui est du
- Code:
text-decoration : none;
-enfin, s'il s'avère que le nom du forum, du lien ou le pseudo que vous voulez écrire est un peu trop long, vous pouvez réduire l'espacement entre les lettres, respectivement de 1px, 0.5px et 2px via cette balise
- Code:
letter-spacing : Xpx;
