|
|
|
| Fiche de présentation # 1 | |
| | Ven 20 Déc - 15:00
HTML & CSS direct sur le sujet - Code:
-
<div class="ffich"><img src="https://i.imgur.com/7noSd4T.png" /><div class="pseudo"><span class="psfich">Pseudo du membre</span><span class="ssfich">« Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis sed ex sollicitudin ultricies. Orci varius natoque penatibus et. »</span></div><center><span class="fl">xx ans</span><span class="fl">origine</span><span class="fl">autre</span><span class="fl">autre</span><span class="fl">autre</span><span class="fl">autre</span></center> <span class="titfich">description physique</span><div class="efich">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<span class="titfich">description mentale</span><div class="efich">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<span class="titfich">description historique</span><div class="efich">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="inffich"><span class="psfich">irl</span><b>Info 1 :</b> blblbl <b>Info 2 :</b> blblbl <b>Info 3 :</b> blblbl <b>Info 3 :</b> blblbl</div> <!-- CRÉDIT A NE PAS RETIRER, MERCI --><a href="https://agora-ls.forumactif.com/" target="_blank" class="cfich">agora</a></div>
<style>@import url('https://fonts.googleapis.com/css?family=Bebas+Neue|Roboto+Condensed&display=swap'); .ffich{font-family: Roboto condensed; background-color: #FFF; border-top: 20px solid #404040; width: 410px; padding: 20px 20px 5px 20px; margin: auto; } .pseudo {height: 150px; width: 190px; position: relative; top: -115px; left: 220px; margin-bottom: -135px;} .psfich {font-family: 'Bebas Neue', cursive; display: block; font-size: 22px; text-align: center; color: #404040; margin-bottom: 5px;} .ssfich {display: block; color: #404040; text-align: justify; font-size: 11px; line-height: 12px;} .fl {display: inline-block; padding: 1px 10px 1px 10px; border: 1px solid #404040; color: #404040; margin: 2px;} .titfich {background-color: #404040; color: #FFF; display: block; font-family: Roboto condensed; font-size: 12px;padding: 2px 2px 1px 5px; text-align: center;} .efich {padding: 5px; margin: 15px 15px 0 15px; min-height: 60px; max-height: 300px; overflow: auto; color: #404040} .efich::-webkit-scrollbar {width: 5px; height: 10px; background-color: #404040;} .efich::-webkit-scrollbar-track {background-color: #FFF;} .efich::-webkit-scrollbar-thumb {background-color: #404040; -moz-border-radius: 0px; -webkit-border-radius: 0px;} .inffich {color: #404040; border: 1px solid #404040; padding: 5px;} a.cfich {font-size: 10px; text-align: center; color: #404040; opacity: 0.4; display: block;} a.cfich:hover {opacity: 1;}</style> Si vous souhaitez partager le css du html, vous avez besoin d'ajouter les deux typos utilisées pour le code sans quoi, la typo prise en compte sera celle déjà présente sur votre forum ! Bebas neue & Roboto CondensedPour le faire, vous devez selectionner le code ci-dessous et l'insérer dans le template < overall_header > et le mettre entre les balises < style > < /style >. Si cette partie vous semble compliqué, je vous invite à trouver un tuto sur internet, vous devriez en trouver sans trop de difficulté ! Vous pouvez aussi poser la question sur le forum dans la partie de l'administration. - Code:
-
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Roboto+Condensed&display=swap" rel="stylesheet">
Le code html de la fiche - Code:
-
<div class="ffich"><img src="https://i.imgur.com/7noSd4T.png" /><div class="pseudo"><span class="psfich">Pseudo du membre</span><span class="ssfich">« Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis sed ex sollicitudin ultricies. Orci varius natoque penatibus et. »</span></div><center><span class="fl">xx ans</span><span class="fl">origine</span><span class="fl">autre</span><span class="fl">autre</span><span class="fl">autre</span><span class="fl">autre</span></center> <span class="titfich">description physique</span><div class="efich">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<span class="titfich">description mentale</span><div class="efich">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<span class="titfich">description historique</span><div class="efich">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="inffich"><span class="psfich">irl</span><b>Info 1 :</b> blblbl <b>Info 2 :</b> blblbl <b>Info 3 :</b> blblbl <b>Info 3 :</b> blblbl</div> <!-- CRÉDIT A NE PAS RETIRER, MERCI --><a href="https://agora-ls.forumactif.com/" target="_blank" class="cfich">agora</a></div> Le css - Code:
-
/* FICHE DE PRESENTATION AGORA LS */ .ffich { /* ensemble de la fiche */ font-family: Roboto condensed; background-color: #FFF; /* couleur de fond de la fiche */ border-top: 20px solid #404040; /* bordure du hhaut */ width: 410px; padding: 20px 20px 5px 20px; margin: auto; }
.pseudo { /* position du bloc du pseudo */ height: 150px; width: 190px; position: relative; top: -115px; left: 220px; margin-bottom: -135px; }
.psfich { /* pseudo du joueur */ font-family: 'Bebas Neue', cursive; display: block; font-size: 22px; text-align: center; color: #404040; /* couleur du pseudo */ margin-bottom: 5px; }
.ssfich { /* bloc citation dessous le pseudo */ display: block; color: #404040; /* couleur du texte de citation */ text-align: justify; font-size: 11px; /* taille du texte de citation */ line-height: 12px; /* hauteur de ligne, enlève de l'espace entre les lignes ou en rajouter en fonction de la valeur */ }
.fl { display: inline-block; padding: 1px 10px 1px 10px; border: 1px solid #404040; /* bordure autour des infos âge, origine etc */ color: #404040; /* couleur du texte à l'interieur des petits cadres */ margin: 2px; }
.titfich { background-color: #404040; /* couleur du fond des titres de sections, physique, mentale et histoire */ color: #FFF; /* couleur du texte */ display: block; font-family: Roboto condensed; font-size: 12px; padding: 2px 2px 1px 5px; text-align: center; }
.efich { /* paragraphe */ padding: 5px; margin: 15px 15px 0 15px; min-height: 60px; /* hauteur minimale ddu cadre sans texte */ max-height: 300px; /* hauteur maximale du cadre avant que l'overflow ne soit prise en compte */ overflow: auto; color: #404040; /* couleur du texte */ }
/* scrollbar */ .efich::-webkit-scrollbar {width: 5px; /*largeur de la scrollbar verticale*/ height: 10px;} .efich::-webkit-scrollbar-track {background-color: #FFF; /*couleur du fond de la scrollbar*/} .efich::-webkit-scrollbar-thumb {background-color: #404040; /*couleur de l'ascenseur*/} /* scrollbar */
.inffich { /* cadre des infos irl */ color: #404040; /* couleur du texte */ border: 1px solid #404040; /* bordure */ padding: 5px; }
a.cfich { /* crédit SAKURA sur Agora ; ne pas le retirer */ font-size: 10px; text-align: center; color: #404040; /* couleur du texte */ opacity: 0.4; /* opacité faible */ display: block; }
a.cfich:hover { /* au passage de la souris */ opacity: 1;} /* FIN - AGORA LS */ |
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|