Accueil
Dernières images
Rechercher
S'enregistrer
Connexion :: Bienvenue à Tôkyô :: codage
fiche de projet libre service
Admin
Messages : 253
Date d'inscription : 05/01/2018
code iframe :
- Code:
<center><iframe style="width: 460px; height: 635px;" scrolling="no" marginheight="0" marginwidth="0" src="https://lovemuffin.forumactif.com/h41-ls-fiche-de-projet" id="heartbox" frameborder="no"> </iframe></center>
code de la fiche html :
- Code:
<meta charset="utf-8">
<link href="https://www.aht.li/3745828/libre_service_fiche_de_projet_a_onglets_sans_root.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- CREDITS : onglets css crées à partir du tutoriel Nyo The Neko sur Never Utopia -->
<style>
/* LA MODIFICATION DES COULEURS, C'EST JUSTE ICI */
:root {
--color-fond-1 : #eaeaea; /*fond presque blanc*/
--color-fond-2 : #dfdfdf; /*fond gris-blanc cassé*/
--color-fond-3 : #ac4849; /*rouge*/
--color-u : rgba(172,72,73,.6); /*rouge en opacité 0.6/1 */
--color-texte: #302D33; /*gris foncé*/
--border-1 : 1px solid #eaeaea; /*quelques bordures par défaut*/
}
</style>
<div class="fiche-entt-ls"><div style="text-align: right; padding: 5px;">Titre du projet</div>
<div class="fiche-entt-ssttr-ls">
<!-- DEBUT DES 3 IMAGES DE L'EN-TETE -->
<img src="https://64.media.tumblr.com/9b2aac5d7319a5cfde179ccd7949c15e/34f0a878a8e7478c-af/s640x960/4f6a0efd5d1f26ffa8901c6661cb66d2a2e5516d.jpg" class="entt-icn1-ls" title=":copyright: image : holographic-watermelon.tumblr.com" />
<img src="https://64.media.tumblr.com/1383fbf59c3331885517d308f24ffbe8/34f0a878a8e7478c-2c/s640x960/fbbccc6a090075ea0fe47c03ba99db7e1feb33cb.jpg" class="entt-icn1-ls" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/fd4a50f61075aecd597399619e963dea/34f0a878a8e7478c-3f/s640x960/af5b5ccc2c095e0969d9e3f28096d8fd51c9533b.jpg" title=":copyright: image : holographic-watermelon.tumblr.com" style="margin-right: 7px;" class="entt-icn1-ls"/>
<!-- FIN DES 3 IMAGES DE L'EN-TETE -->
<!-- ZONE DE TEXTE DE L'EN-TETE, mettre ce que vous voulez -->
genre ; adjectifs ; TW : ici, ici... ; avatar réel/illustré 200x320 ; xx rp(s) par mois ;
<strong>début du projet xx/xx/xxxx</strong>.
<!-- FIN EN-TETE : 2 DIV --></div></div>
<!-- DEBUT DU CORPS DE FICHE -->
<div class="fiche-fd3-ls">
<!-- LES BOUTONS -->
<input checked="" name="fiche" id="intro" type="radio" />
<input name="fiche" id="contexte" type="radio" />
<input name="fiche" id="logistique" type="radio" />
<div class="boutons">
<label for="intro" class="lab un">Introduction</label> <!-- Texte en gris peut être modifié -->
<label for="contexte" class="lab deux">Contexte</label>
<label for="logistique" class="lab trois">Logistique</label>
</div>
<!-- FIN DES BOUTONS -->
<div class="fiche-fd4-ls">
<!-- LE CONTENU DE L'ONGLE 1 COMMENCE ICI -->
<div class="contenu un">
<!-- DEBUT CODE MOODBAR -->
<div class="fiche-titre1-ls">moodbar</div><!-- LE TITRE -->
<div class="fiche-moodbar-ls ">
<!-- ZONE DES IMAGES ; ne pas oublier les crédites dans la zone title de chaque ligne img -->
<img src="https://64.media.tumblr.com/b297c37f39befaf33e23bbe6bc9aa7d7/34f0a878a8e7478c-b2/s640x960/518d66e55430c51d5e79749415e39d88c780cde1.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/9b2aac5d7319a5cfde179ccd7949c15e/34f0a878a8e7478c-af/s640x960/4f6a0efd5d1f26ffa8901c6661cb66d2a2e5516d.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/ee4089f391b9a8b81e800476287911d8/34f0a878a8e7478c-55/s640x960/8bb7cf452d989f07ef6f399de9114da0443e6f57.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/eaf11913b1bbdbea512e92c66401be78/34f0a878a8e7478c-e9/s640x960/9e749bfc43691377e6576c1f58420d7b562d8ec1.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/1383fbf59c3331885517d308f24ffbe8/34f0a878a8e7478c-2c/s640x960/fbbccc6a090075ea0fe47c03ba99db7e1feb33cb.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/35dfe77ef022c25c9f21afd9428b0f6b/34f0a878a8e7478c-e0/s640x960/586fb542052399ba8a5ef0f8a7767fe54d9c0acf.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/330791324d52b5eaac65d10ecdee2a72/34f0a878a8e7478c-18/s640x960/cc08481cf8b005b9aab16380cf95e7fd0631fd38.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/fd4a50f61075aecd597399619e963dea/34f0a878a8e7478c-3f/s640x960/af5b5ccc2c095e0969d9e3f28096d8fd51c9533b.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
<img src="https://64.media.tumblr.com/6bfca6e1f68b09114db5fff7ad645505/34f0a878a8e7478c-2a/s640x960/0af48151f169e1ff91fc768a384e106388e80dda.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
</div>
<!-- FIN CODE MOODBAR à SUPPRIMER SI PAS UTILISé -->
<!-- ZONE TEXTE 1 -->
<div class="fiche-titre2-ls">idée principale</div><!-- Modifier titre si nécessaire -->
<!-- LE TEXTE A METTRE ENTRE BALISE <p></p> POUR CHAQUE PARAGRAPHE ;
conseil : à chaque fois que vous souhaitez sauter à la ligne, ajoutez : <br/> ;
les saurs de lignes ne sont pas pris en compte dans les pages html -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed commodo ac elit eu ultrices. Aliquam ligula libero, tincidunt vel suscipit non, gravida nec lacus.
Vestibulum euismod ipsum vitae massa dignissim, a tempor dui mattis.
Duis eget massa a urna sollicitudin mattis. Nulla finibus ultrices feugiat.
Pellentesque quis dictum leo, nec fermentum quam.
Duis ac ante tincidunt, aliquet sem sed, porta orci.
Integer ullamcorper ultricies nisi sed venenatis.
Praesent facilisis erat at congue aliquam.
Aenean eu purus finibus, varius orci et, euismod est.
Sed sagittis velit vitae dignissim lacinia.
Maecenas molestie, nisl a ultrices condimentum, justo mi imperdiet velit, sit amet posuere felis dolor nec tortor.
Suspendisse vitae sapien at dui eleifend rutrum.
Cras dictum sollicitudin metus, eu commodo nulla ultricies sit amet.
Nullam faucibus quam libero, eget laoreet eros pulvinar posuere.</p>
<!-- ZONE TEXTE 2 -->
<div class="fiche-titre1-ls">disclaimer</div><!-- Modifier titre si nécessaire ;
si ajout d'autres zones de texte avec titre, penser à alterner la class fiche-titre1-ls avec fiche-titre2-ls -->
<p>Sed egestas, justo non porta aliquet, ipsum tortor tristique ex, a rhoncus diam diam ut ligula.
Pellentesque quis luctus ex, in pharetra lacus.
Nullam placerat, diam eget accumsan suscipit, sapien urna fringilla est, ac vestibulum velit sapien vitae urna.
Cras convallis mauris justo, vitae rhoncus enim condimentum quis. Nam ac egestas orci.
Aenean quam lacus, tristique pulvinar tincidunt at, ullamcorper sollicitudin sem.
<!-- exemple d'ajout d'une image dans les zones de texte <p> modifier le credit dans title -->
<img src="https://64.media.tumblr.com/fd4a50f61075aecd597399619e963dea/34f0a878a8e7478c-3f/s640x960/af5b5ccc2c095e0969d9e3f28096d8fd51c9533b.jpg" title=":copyright: image : holographic-watermelon.tumblr.com"/>
Donec vitae enim at neque vulputate commodo quis sit amet magna.
Pellentesque laoreet mauris quis felis auctor hendrerit at vitae lectus.
Proin laoreet, ex ac varius pretium, nibh ipsum sollicitudin odio, sit amet fermentum velit risus vitae ligula.
Duis dignissim mauris nec urna fringilla, a auctor purus tincidunt. Nam a sodales neque, eu ultricies felis.
Cras nulla magna, tincidunt varius elit id, gravida gravida leo. In egestas tempor elementum.</p>
<!-- FIN contenu 1 = 1 div --></div>
<!-- LE CONTENU DE L'ONGLE 2 COMMENCE ICI -->
<div class="contenu deux">
<!-- UTILISER <u></u> pour surligner, <strong></stong> pour mettre en gras et <i></i> en italique si besoin -->
<p>
<u>Lorem ipsum dolor sit amet</u>, consectetur adipiscing elit.
Phasellus sagittis nisi eros, sit amet suscipit purus interdum imperdiet.
Praesent laoreet mauris non dictum ultricies.
Ut sodales non felis a auctor.
Maecenas pretium, purus vel laoreet tempor, turpis ex dignissim ligula, sit amet lobortis enim sem vitae nisl.
<!-- ICONE 1 -->
<img src="https://64.media.tumblr.com/cb8bda82b18440e698183bf10af529df/7b7d7df474dcb936-eb/s2048x3072/73db460933af686d9d88baca83c4a5b963829f80.jpg" class="icn1" title=":copyright: image : jaces-mangoes.tumblr.com"/>
Vivamus id placerat velit, lobortis varius dui.
Mauris fermentum congue ligula, et venenatis mi pellentesque sit amet.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed in malesuada lorem.
Duis vitae sollicitudin elit.
Vivamus porta molestie turpis sit amet tincidunt.
Vestibulum id nisi mattis, iaculis orci nec, condimentum quam.
Duis pharetra quam sit amet nibh volutpat, efficitur lacinia neque consequat.
<br/> <!-- SAUT DE LIGNE -->
Curabitur scelerisque sed nunc at euismod.
<strong>Mauris cursus risus mattis velit pellentesque convallis.</strong>
Morbi id orci vitae nibh molestie consectetur.
Phasellus ut sem sodales purus laoreet dictum sed eu est.
Mauris vestibulum tortor non sollicitudin commodo.
Donec feugiat eros ac orci aliquam, ac accumsan turpis hendrerit.
Fusce facilisis sed metus a ultrices. Donec rhoncus vehicula elementum.
Curabitur gravida iaculis scelerisque. Aliquam nec turpis lorem. Nullam ac malesuada enim.
Fusce consectetur nulla et nisi auctor tincidunt.
</p><br/> <!-- SAUT DE LIGNE + CHANGEMENT DE PARAGRAPHE-->
<p>Aenean vel tristique dui.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Aliquam at pellentesque sapien. Etiam id nibh id augue porttitor luctus.
<i>Nullam bibendum pulvinar sem</i>, et tristique turpis accumsan vitae.
Nam nec nulla sit amet orci sodales imperdiet id eu enim. Mauris non urna faucibus tellus commodo facilisis ac sed nisl.
Nulla sed elementum lorem, eget sollicitudin metus.
<!-- ICONE 2 -->
<img src="https://64.media.tumblr.com/5d6d3d1e35bfd2982a3a3a969560df7f/7b7d7df474dcb936-df/s400x600/c11592a08ff8f6a45b2fc076e9bd0d0f794ca37a.pnj" class="icn2" title=":copyright: image : jaces-mangoes.tumblr.com"/>
Quisque viverra nec nisl quis tempus. Proin vulputate libero vitae ultrices lacinia.
Mauris eu nulla dui. Aliquam diam lacus, ultricies sit amet dapibus eget, venenatis a odio.
Praesent rhoncus vulputate massa, pharetra bibendum mi maximus at. Aenean eu dui ornare, feugiat quam ac, tincidunt velit.</p>
<!-- FIN contenu 2 = 1 div --></div>
<!-- LE CONTENU DE L'ONGLE 3 COMMENCE ICI -->
<div class="contenu trois">
<div style="display: flex;">
<!-- DEBUT PREVENUS -->
<div class="fiche-stat-ls">
<h2>Prévenus</h2><!-- le titre toujours à mettre entre balise <h2></h2> -->
<span class="fiche-liste">Gérard Bouchard</span><!-- ligne 1, suivre l'exemple -->
<span class="fiche-liste">Jean-Michel Tunning</span>
<span class="fiche-liste">Emma Watson</span>
<!-- fin des prévenus = 1 div --></div>
<!-- DEBUT AVATAR RESERVES : même code que pour les prévenus -->
<div class="fiche-stat-ls" style="margin-left: 5px;">
<h2>Avatars réservés</h2> <!-- titre -->
<span class="fiche-liste">Prénom Nom</span> <!-- ligne 1 etc. -->
<span class="fiche-liste">Prénom Nom (Groupe)</span>
<span class="fiche-liste">Prénom Nom</span>
<!-- /!\FIN = 2 div --></div></div>
<br/>
<!-- NOUVELLE ZONE DE TEXTE -->
<div class="fiche-titre2-ls">Staff</div>
<p>
Poster ici les membres du staff, détaillez si vous le souhaitez ou décrivez quel type de staff vous recherchez +
<a href="LIEN DU SUJET DE LA RECHERCHE DE STAFF A COLLER ICI" target="_blank">votre sujet pour votre recherche de staff</a>
<!-- code ci-dessus = code lien qui ouvre dans un nouvel onglet -->
</p>
<!-- ZONE DE TEXTE POUR DE BREVES DESCRIPTIONS ; dans cet exemple, les groupes -->
<div class="fiche-titre2-ls">Groupes</div><!-- TITRE : à retirer si inutile, à modifier si souhaité -->
<img src="https://64.media.tumblr.com/5d6d3d1e35bfd2982a3a3a969560df7f/7b7d7df474dcb936-df/s400x600/c11592a08ff8f6a45b2fc076e9bd0d0f794ca37a.pnj" class="lien-icn2" title=":copyright: image : jaces-mangoes.tumblr.com"/>
<!-- Image qui va avec cette structure
(oui je l'avais fait à la base pour un groupe de pv d'où le titre) -->
<!-- début du cadre texte -->
<div class="fiche-lien-ls">
<div class="cp">
<as>TITRE</as> <!-- le titre -->
précision
</div>
Etiam pharetra eget leo sed sollicitudin.
Morbi ultricies magna sit amet quam hendrerit maximus.
Vivamus at semper mauris. Nullam id metus in lacus facilisis aliquam sit amet eu nibh.
Suspendisse sodales mi odio, sed vehicula risus scelerisque vitae.
Nullam a metus euismod, blandit turpis vulputate, volutpat diam.
Etiam in imperdiet risus. Aliquam eget cursus nisl, non tempor ex.
</div><!-- fin de la bande de texte = 1 div -->
<br/> <!-- saut de ligne -->
<img src="https://64.media.tumblr.com/5d6d3d1e35bfd2982a3a3a969560df7f/7b7d7df474dcb936-df/s400x600/c11592a08ff8f6a45b2fc076e9bd0d0f794ca37a.pnj" class="lien-icn1" title=":copyright: image : jaces-mangoes.tumblr.com"/>
<!-- début du cadre de texte -->
<div class="fiche-lien-ls">
<div class="cp">
<as>Titre</as> <!-- titre -->
précision
</div>
Etiam pharetra eget leo sed sollicitudin.
Morbi ultricies magna sit amet quam hendrerit maximus.
Vivamus at semper mauris. Nullam id metus in lacus facilisis aliquam sit amet eu nibh.
Suspendisse sodales mi odio, sed vehicula risus scelerisque vitae.
Nullam a metus euismod, blandit turpis vulputate, volutpat diam.
Etiam in imperdiet risus. Aliquam eget cursus nisl, non tempor ex.
</div><!-- fin de la bande de texte = 1 div -->
<br/>
<!-- LE CODE POUR LES BARRES DE PROGRESSION DE VOTRE PROJET -->
<div class="fiche-titre1-ls">Avancement</div><!-- TITRE : à retirer si inutile -->
<div class="avancement">
<!-- codé en table attention : tr = ligne ; td = case . Ici, tableau en 2 colonnes-->
<table width="100%">
<!-- DEBUT LIGNE --><tr>
<!-- 1ère BARRE DE PROGRESSION = 1ère colonne --><td width="50%">
<center><stat>annexes</stat></center>
<div class="barre">
<!-- DONNER ICI L'AVANCEMENT DE LA BARRE 1 EN % --><span style="width: 90%;"></span>
</div>
<!-- fin de la case --></td>
<!-- 2ème BARRE DE PROGRESSION : toujours la même ligne -->
<td width="55%">
<center><stat>postes administratifs</stat></center>
<div class="barre">
<!-- DONNER ICI L'AVANCEMENT DE LA BARRE 1 EN % --><span style="width: 70%;"></span>
</div>
<!-- fin de la case --></td>
<!-- fin de la ligne --></tr>
<!-- DEBUT DE LIGNE -->
<tr>
<!-- 3ème BARRE DE PROGRESSION-->
<td>
<center><stat>mise en place des groupes</stat></center>
<div class="barre">
<!-- DONNER ICI L'AVANCEMENT DE LA BARRE 1 EN % --><span style="width: 60%;"></span>
</div>
</td>
<!-- 4ème BARRE DE PROGRESSION-->
<td>
<center><stat>design</stat></center>
<div class="barre">
<!-- DONNER ICI L'AVANCEMENT DE LA BARRE 1 EN % --><span style="width: 5%;"></span>
</div>
</td>
</tr>
<!-- si ajout d'une ou plusieurs lignes (2 barres de progession) copier le code ci-dessus ici -->
</table><!-- fin du tableau -->
<!-- FIN BARRES DE PROGRESSION = 1 div --></div>
<!-- FIN contenu 3 = 2 div --></div></div>
<!-- pas touche c'est le crédit --><center><credit>:copyright: fiche : truc.</credit></center>
<!-- FIN DE LA FICHE = 1 div --></div>
Admin
Messages : 253
Date d'inscription : 05/01/2018
Titre du projet
MAJ du xx/xx/xxxx.Staff
Poster ici les membres du staff, détaillez si vous le souhaitez ou décrivez quel type de staff vous recherchez +
votre sujet pour votre recherche de staff
Groupes
Etiam pharetra eget leo sed sollicitudin.
Morbi ultricies magna sit amet quam hendrerit maximus.
Vivamus at semper mauris. Nullam id metus in lacus facilisis aliquam sit amet eu nibh.
Suspendisse sodales mi odio, sed vehicula risus scelerisque vitae.
Nullam a metus euismod, blandit turpis vulputate, volutpat diam.
Etiam in imperdiet risus. Aliquam eget cursus nisl, non tempor ex.
Avancement
fiche : truc.|
|
|