<style>a{text-decoration: none}/* - - - - - - - - - - PRÉSENTATION #3 D'ANESIDORA - - - - - - - - - -A PROPOS DU CODE :- - - > DANS LE HTML- Les blocs peuvent s'interchanger, s'ajouter ou se supprimer sans souci.Le.s bloc.s de gauche : < div class="gauche_b_adcb" >XXXXXXXXXXX< /div >Le.s bloc.s de doite : < div class="droite_b_adcb" >XXXXXXXXXXX< /div >Le.s bloc.s large.s : < div class="large_adcb" >XXXXXXXXXXX< /div >- Les titres dans les bandelettes rouges peuvent s'étaler sur autant de lignes que voulu, mais ayez en tête qu'au plus ils seront longs, au plus vous aurez de place pour la partie texte. Ils peuvent également s'enlever en supprimant simplement :< st >< div class="intitule_adcb" >XXXXXXXX< /div >< /st >- Toutes les images se redimensionnent et se repositionnent d'elles-mêmes. Vous ne trouverez pas de balise img mais des div avec "background: url(URLXXXXXXXX) 50% 50% / cover". Le cover redimensionne l'image et les 50% 50% la repositionnent (horizontal% vertical%).- Si vous voulez intégrer les images au CSS pour plus d'uniformité et, accessoirement, en changer de version en version, ajoutez un nom de class à votre balise-image (ne supprimez surtout pas celui déjà présent, rajoutez juste un espace entre les deux class, par exemple class="ic_adbp nouveau_nom") et copiez/collez l'intérieur du 'style' à l'intérieur du class que vous rajouterez alors dans votre css.- - - > DANS LE CSS- Modifier la largeur de fiche est réalisable mais il faudra un peu plus trifouiller (MPottez-moi si vous n'y arrivez vraiment pas).- Les variables sont utilisées : vous trouverez à la place de tous les codes couleur type "#AAAAAA" des "var(--JESAISPASQUOI)", dont le listing est repris en tout premier lieu dans le CSS, juste en-dessous. Ce n'est pas sorcier, à chaque "var(--JESAISPASQUOI)" dans le code correspond un "--JESAISPASQUOI" dans la liste, et c'est seulement dans ladite liste que vous pouvez changer la valeur. Vous pouvez tout à fait vous débarrasser de ce système (ou ajouter, changer des variables, par ex mettre "var(--MACHIN)" au lieu de "var(--TRUC)), mais je trouve ceci nettement plus pratique quand vous devez changer une demi-douzaine de fois telle ou telle couleur, comme le rouge dans le cas présent. Notez que je ne parle que des couleurs, mais le même principe peut être utilisé pour n'importe quoi (notamment les filtres photo ou la valeur de certains blocs, dans le cas présent).(En fait, pour info, c'est applicable à n'importe quelle valeur et aussi utilisable pour le forum en général, en mettant la liste de toutes les variables dans :root ou body)*/.bp_adcb{ --un: #212121; /*gris-noir*/ --deux: #8C8C8C; /*gris moyen*/ --trois: #BEBEBE; /*gris clair*/ --quatre: #AF3232; /*rouge clair*/ --cinq: #782828; /*rouge foncé*/ --f-nb1: grayscale(100%) contrast(60%) brightness(80%); /*filtre n&b fort*/ --f-nb2: grayscale(100%) contrast(80%) brightness(90%); /*fitre n&b faible*/ /*mise en forme du texte principal, supprimer pour ajuster à la police initiale du forum*/ color: var(--un); font-family: Verdana; font-size: 12px; line-height: 15px; text-align: left;}/*soulignement des <u>, supprimer selon besoin*/u{ text-decoration: none; border-bottom: 2px solid;}ttt{ display: block; /*mise en forme du titre, vous pouvez le reprende pour d'autres parties de votre forum*/ color: var(--quatre); font-family: Dorsa; font-size: 60px; font-weight: bold; letter-spacing: 10px; line-height: 55px; text-transform: uppercase;}/*mise en forme des lignes du titre paires*/ttt:nth-of-type(even){ color: var(--trois); font-size: 50px;}/*mise en forme du texte mis en évidence*/st{ color: var(--cinq); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;}/*couleur du texte dans l'intitulé*/.intitule_adcb{ color: var(--trois);}/*----- GÉNERAL GÉNERAL GÉNERAL -----*/.bp_adcb{ background: var(--un); margin: auto; position: relative; padding: 400px 0px var(--marge); --hauteur: 350px; /*hauteur de la grande image; si modifiée, changer également le 400px juste au-dessus (hauteur-image + 50px)*/ width: 500px; /*largeur totale de la présentation*/ --marge-haut: 50px; /*marges de séparation entre plusieurs blocs*/ --marge: 50px; /*marges gauches des blocs de droite*/ --largeur: 450px; /*largeur des blocs*/ /*si vous modifiez la largeur totale de la présentation, veillez à ce que la somme de la marge (gauche) et la largeur des blocs lui soient toujours égale*/ --large: 245px; /*hauteur du large bloc*/}/*créditer ailleurs dans le forum si vous enlevez cette partie de la présentation, merci*/.bp_adcb::after{ content: "(c) ANESIDORA"; position: absolute; bottom: 10px; left: 60px; color: var(--cinq); font-size: 10px; letter-spacing: 24px;}.bp_adcb, .bp_adcb div{ box-sizing: border-box;}scroll{ display: block; flex: 1 1; width: 100%; height: 100%; padding-right: 30px; overflow: auto;}scroll::-webkit-scrollbar{ opacity: 0; width: 4px; height: auto;}scroll::-webkit-scrollbar-thumb{ border-radius: 2px; background: var(--un);}.bp_adcb table{ width: 100%; height: 100%; border-collapse: collapse;}/*----- ENTÊTE ENTÊTE ENTÊTE -----*/[class*=img_adcb]{ width: var(--largeur); height: var(--hauteur); position: absolute; top: 0px; right: 0px; border-radius: 0px 0px 0px 85%; filter: var(--f-nb1); z-index: 2}.over_img_adcb{ z-index: 4;}.over_img_adcb:hover ~ .img_adcb{ filter: var(--f-nb2);}.titre_adcb{ width: var(--largeur); height: var(--hauteur); position: absolute; top: 0px; right: 0px;}.titre_adcb table{ height: 0px; position: absolute; bottom: 0px; z-index: 2;}.bordure_adcb{ width: 100%; height: 15px; background: var(--trois);}/*----- BLOCS BLOCS BLOCS -----*/[class*=b_adcb]{ display: flex; width: var(--largeur); height: 245px; background: var(--deux); margin-top: var(--marge-haut);}.droite_b_adcb{ margin-left: var(--marge);}.petit_b_adcb{ height: 130px;}.colonne_adcb{ display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 130px; background: var(--cinq); padding: 15px;}.ic_adcb{ flex: 0 0 100px; width: 100px; height: 100px; filter: var(--f-nb2);}.ic_adcb:hover{ filter: var(--f-nb1);}.texte_adcb{ display: flex; flex-direction: column; flex: 1; padding: 30px;}.intitule_adcb{ width: 100%; background: var(--cinq); padding: 5px; margin-bottom: 15px; text-align: center;}.large_adcb{ display: flex; flex-direction: column; width: 100%; height: var(--large); background: var(--deux); margin-top: var(--marge-haut); padding: 30px;}</style>
<div class="bp_adcb"> <div class="over_img_adcb"></div> <div class="img_adcb" style="background: /*
URL GRANDE IMAGE*/url(https://images2.imgbox.com/be/a5/zhwW4GRn_o.jpg) 50% 50% / cover;"></div> <div class="titre_adcb"> <table><tr><td><!--
--><ttt>Prenom</ttt><ttt>Nom</ttt><!--
--></td></tr></table> </div> <div class="bordure_adcb"></div> <div class="gauche_b_adcb"> <div class="texte_adcb"> <st><div class="intitule_adcb"><!--
-->ft. avatar </div></st> <scroll><!--
--><st>prénom & nom :</st> écrire ici. <st>▲ âge, date et lieux de naissance :</st> écrire ici. <st>▲ nationalité et origines :</st> écrire ici. <st>▲ métier, études :</st> écrire ici. <st>▲ orientation sexuelle :</st> écrire ici. <st>▲ statut civil :</st> écrire ici. <st>▲ traits de caractère :</st> écrire ici, une dizaine. <st>▲ groupe :</st> écrire ici. <st>▲ crédits :</st> écrire ici. </scroll> </div> <div class="colonne_adcb"> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/5fa01f473cad6da981033232d9235c10/tumblr_ozs8spfopK1wcpipoo7_100.png) 50% 50% / cover;"></div> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/e3f038fd7fde950e3dcdb9c990fb2179/tumblr_ozs8spfopK1wcpipoo5_100.png) 50% 50% / cover;"></div> </div> </div> <div class="droite_b_adcb"> <div class="colonne_adcb"> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/5fa01f473cad6da981033232d9235c10/tumblr_ozs8spfopK1wcpipoo7_100.png) 50% 50% / cover;"></div> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/e3f038fd7fde950e3dcdb9c990fb2179/tumblr_ozs8spfopK1wcpipoo5_100.png) 50% 50% / cover;"></div> </div> <div class="texte_adcb"> <st><div class="intitule_adcb"><!--
-->feel free not to talk </div></st> <scroll><!--
-->récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, <u>ce que vous voulez</u>. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. </scroll> </div> </div> <div class="large_adcb"> <scroll><!--
-->l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre. l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre. l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre. l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre.</scroll> </div> <div class="petit_b_adcb"> <div class="texte_adcb"> <scroll><!--
--><st>prénom, pseudo :</st> écrire ici. <st>▲ âge, pays :</st> écrire ici. <st>▲ pré-lien, scénario ? :</st> écrire ici. si oui, taguer le créateur dudit pl/scénar. <st>▲ avis sur le forum :</st> écrire ici. <st>▲ mot de la fin :</st> écrire ici. fais-toi plaisir, c'est ton heure de gloire. </scroll> </div> <div class="colonne_adcb"> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/5fa01f473cad6da981033232d9235c10/tumblr_ozs8spfopK1wcpipoo7_100.png) 50% 50% / cover;"></div> </div> </div> </div>
Accueil
