-29%
Le deal à ne pas rater :
PC portable Gamer ERAZER DEPUTY P60 – 15,6” FHD 144Hz – i7-12è ...
999.99 € 1399.99 €
Voir le deal

Partagez

Modèle de fiche

Staff DC-Earth
Staff
Staff DC-Earth
Staff
Inscription : 22/11/2016
Messages : 399
Localisations : Le forum.
Modèle de fiche 386562Rien
Modèle de fiche Jeu 5 Sep 2019 - 9:05


Ses relations



Prénom nom



Type de relation

Description de la relation


Prénom nom



Type de relation

Description de la relation


Prénom nom



Type de relation

Description de la relation


Prénom nom



Type de relation

Description de la relation


Code par Dehvi sur Never-Utopia



Code:
<style>.perso{width: 500px;margin:auto;background-color: #16151B; color:#c3c3c3;} .perso h1{font-family:'Segoe UI';text-align:center;font-size:48px;text-transform:uppercase;background-color:#3B3E4F;line-height:100px;color:white;margin-bottom:-30px;}  .relations{margin: auto;} .relations h3{font-family:'Segoe UI';text-align:center;font-size:24px;text-transform:uppercase;background-color:#3B3E4F;line-height: 40px;color: white;margin-right:0px;margin-top:0px;margin-bottom: -20px; font-weight: normal;} .relations td{width:150px;border-bottom: 4px solid #3B3E4F ;background-color: #16151B;} .relations td p{height: 200px;max-height: 200px;overflow-y:auto;overflow-x:hidden;padding: 5px;text-align: left;margin-top: -5px;margin-bottom: -15px;} .relations img{border-bottom: 4px solid #3B3E4F;} .relations strong{font-family: 'Segoe UI';font-size: 16px;text-transform: uppercase;color: white;font-weight: normal;margin-bottom: -30px;display: block;}</style>
<div class="perso"><h1>Ses relations</h1>

<table class="relations"><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr></table>
<center>[size=10]Code par <a href="http://www.never-utopia.com/u17236">Dehvi</a> sur <a href="http://www.never-utopia.com">Never-Utopia</a>[/size]</center>
</div>
Joseph Wilson
Staff
Joseph Wilson
Staff
Inscription : 22/11/2019
Messages : 1153
DC : Slade Wilson | Kent Nelson
Situation : Suite à son procès, Joseph n'a pas pu être déclaré coupable des accusations qu'on lui portait. Il est placé sous la tutelle mystique de Zaren Zara (Nick Necro). Il suit des spécialiste pour espérer se débarrasser du démon qui le possède toujours.
Localisations : Maison des Mystères / Justice Academy
Inventaire : • Combinaison IKON
• Téléphone High-Tech de Kord Industries
Justice Academy
Superfamily
Modèle de fiche 386562Rien
Re: Modèle de fiche Dim 15 Nov 2020 - 17:56



Titre de fiche de relation





























Code:
<style>#rel_1:checked ~ #lien_1, #rel_2:checked ~ #lien_2, #rel_3:checked ~ #lien_3 { display: block; } .rel_div { width: 700px; margin: auto; } /* TITRE DE LA FICHE */ #rel_title h2 { font-family: Cousine, sans-serif; letter-spacing: 2px; text-transform: uppercase; font-weight: inherit; text-align: center; font-size: 30px; color: #0B96D7; text-shadow: -2px 3px 2px black; margin: 10px 0; box-sizing: border-box; } /* BOUTONS */ #rel_box { display: flex; flex-wrap: wrap; justify-content: space-between; } #rel_box label { height: 16px; display: block; cursor: pointer; background: #0B96D7; text-align: center; text-transform: uppercase; border: 0; font-family: Cousine, sans-serif; color: #fff; font-weight: inherit; letter-spacing: 3px; font-size: 11px; padding: 8px 15px; width: 26%; margin-bottom: 20px; transition: all 0.6s; } /* BOUTON CLIQUE */ #rel_box [id^="rel"]:checked + label {background: #070707;} #rel_box input[type=radio], .rel_liens {display:none;} #rel_middle { margin: 0px 30px; } .rel_details::-webkit-scrollbar { width: 0px; } .lien_img { width: 200px; height: 132px; padding: 10px; box-sizing: border-box; filter: grayscale(1); transition: all 0.5s; } .lien_img:hover { filter: grayscale(0); transition: all 0.5s } .lien_img div { background: rgba(7,7,7,0.7); height: 100%; text-align: center; transform: scale(0); display: flex; flex-direction: column; justify-content: center; font-size: 15px; text-transform: uppercase; font-family: Cousine, sans-serif; letter-spacing: 3px; transition: all 0.5s;} .lien_img:hover div { transform: scale(1); transition: all 0.5s; } /* TITRE DE LA FICHE */ .rel_infos { margin: 0; font-size: 10px; color: #0B96D7; } .a_liens { display: flex; justify-content: space-between; } .rel_details { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(7, 7, 7, 0) rgba(7, 7, 7, 0); width: 68%; background: #070707; border-top: 15px solid #070707; border-bottom: 15px solid #070707; padding: 0 15px; box-sizing: border-box; height: 132px; } /* PSEUDO */ .rel_details span { font-family: Cousine, sans-serif; color: #0B96D7; text-transform: uppercase; font-size: 14px; } /* DESCRIPTION ET BORDURE HAUT */ .rel_details p { font-size: 10.8px; line-height: 20px; border-top: 2px solid #0B96D7; margin: 0; padding-top: 10px; margin-top: 2px; } .liens_margin { margin-top: -13px; }</style>

<section class="rel_div" id="rel_title"><!-- TITRE DE LA FICHE RELATION --><h2>Titre de fiche de relation</h2></section>
<!---------------- BOUTONS -------------->
<section class="rel_div" id="rel_box"><input type="radio" name="rel_buttons" id="rel_1" checked><label for="rel_1">FAMILLE</label><input type="radio" name="rel_buttons" id="rel_2"><label id="rel_middle" for="rel_2">Alliés</label><input type="radio" name="rel_buttons" id="rel_3"><label for="rel_3">Ennemis</label>

<!-- ------------------------------------------- FICHE FAMILLE ------------------------------------------- -->
<article class="rel_liens" id="lien_1"><!-- FAMILLE 1 --><aside class="a_liens"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- FAMILLE 2 --><aside class="a_liens liens_margin"><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">pseudo</p></div></div></aside>

<!-- FAMILLE 3 --><aside class="a_liens liens_margin"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- ------------------------------------------- FICHE ALLIES ------------------------------------------- -->
</article><article class="rel_liens" id="lien_2"><!-- ALLIE 1 --><aside class="a_liens"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- ALLIE 2 --><aside class="a_liens liens_margin"><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam.</p></div><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div></aside>

<!-- ALLIE 3 --><aside class="a_liens liens_margin"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam.</p></div></aside>


<!-- ------------------------------------------- FICHE ENNEMIS  ------------------------------------------- -->
</article><article class="rel_liens" id="lien_3"><!-- ENNEMI 1 --><aside class="a_liens"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- ENNEMI 2 --><aside class="a_liens liens_margin"><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">pseudo</p></div></div></aside>

<!-- ENNEMI 3 --><aside class="a_liens liens_margin"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

</article></section>
Modèle de fiche
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
DC Earth - Forum RPG Comics :: Plateforme joueurs :: Rôle-Play :: Relations-
Sauter vers: