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 :
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>
- 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:
Dernière édition par Argenty le Ven 8 Mai 2020 - 20:36, édité 3 fois