Hello, person who wants to add more toggles! I've added everything needed to serve as placeholders for up to SIX (6) extra toggles. I don't think any more than that will fit this code. If you need in-depth toggling, I highly suggest using Referential (https://referential.insanejournal.com/) instead of this.
Run a REPLACE ALL on this entire page to instantly add new filters, then un-hide their toggle input down in the HTML. For example, you could run a replace all on the term "placeholder1" to change it to "genderfluid" across the board, creating your new option.
.masc-filter:checked ~ main .femme, .masc-filter:checked ~ main .nb, .masc-filter:checked ~ main .placeholder1, .masc-filter:checked ~ main .placeholder2, .masc-filter:checked ~ main .placeholder3, .masc-filter:checked ~ main .placeholder4, .masc-filter:checked ~ main .placeholder5, .masc-filter:checked ~ main .placeholder6,
.femme-filter:checked ~ main .masc, .femme-filter:checked ~ main .nb, .femme-filter:checked ~ main .placeholder1, .femme-filter:checked ~ main .placeholder2, .femme-filter:checked ~ main .placeholder3, .femme-filter:checked ~ main .placeholder4, .femme-filter:checked ~ main .placeholder5, .femme-filter:checked ~ main .placeholder6,
.nonbinary-filter:checked ~ main .masc, .nonbinary-filter:checked ~ main .femme, .nonbinary-filter:checked ~ main .placeholder1, .nonbinary-filter:checked ~ main .placeholder2, .nonbinary-filter:checked ~ main .placeholder3, .nonbinary-filter:checked ~ main .placeholder4, .nonbinary-filter:checked ~ main .placeholder5, .nonbinary-filter:checked ~ main .placeholder6,
.placeholder1-filter:checked ~ main .masc, .placeholder1-filter:checked ~ main .femme, .placeholder1-filter:checked ~ main .nb, .placeholder1-filter:checked ~ main .placeholder2, .placeholder1-filter:checked ~ main .placeholder3, .placeholder1-filter:checked ~ main .placeholder4, .placeholder1-filter:checked ~ main .placeholder5, .placeholder1-filter:checked ~ main .placeholder6,
.placeholder2-filter:checked ~ main .masc, .placeholder2-filter:checked ~ main .femme, .placeholder2-filter:checked ~ main .nb, .placeholder2-filter:checked ~ main .placeholder1, .placeholder2-filter:checked ~ main .placeholder3, .placeholder2-filter:checked ~ main .placeholder4, .placeholder2-filter:checked ~ main .placeholder5, .placeholder2-filter:checked ~ main .placeholder6,
.placeholder3-filter:checked ~ main .masc, .placeholder3-filter:checked ~ main .femme, .placeholder3-filter:checked ~ main .nb, .placeholder3-filter:checked ~ main .placeholder1, .placeholder3-filter:checked ~ main .placeholder2, .placeholder3-filter:checked ~ main .placeholder4, .placeholder3-filter:checked ~ main .placeholder5, .placeholder3-filter:checked ~ main .placeholder6,
.placeholder4-filter:checked ~ main .masc, .placeholder4-filter:checked ~ main .femme, .placeholder4-filter:checked ~ main .nb, .placeholder4-filter:checked ~ main .placeholder1, .placeholder4-filter:checked ~ main .placeholder2, .placeholder4-filter:checked ~ main .placeholder3, .placeholder4-filter:checked ~ main .placeholder5, .placeholder4-filter:checked ~ main .placeholder6,
.placeholder5-filter:checked ~ main .masc, .placeholder5-filter:checked ~ main .femme, .placeholder5-filter:checked ~ main .nb, .placeholder5-filter:checked ~ main .placeholder1, .placeholder5-filter:checked ~ main .placeholder2, .placeholder5-filter:checked ~ main .placeholder3, .placeholder5-filter:checked ~ main .placeholder4, .placeholder5-filter:checked ~ main .placeholder6,
.placeholder6-filter:checked ~ main .masc, .placeholder6-filter:checked ~ main .femme, .placeholder6-filter:checked ~ main .nb, .placeholder6-filter:checked ~ main .placeholder1, .placeholder6-filter:checked ~ main .placeholder2, .placeholder6-filter:checked ~ main .placeholder3, .placeholder6-filter:checked ~ main .placeholder4, .placeholder6-filter:checked ~ main .placeholder5 {display:none;}
Der Code hat schon seine Faszination! Eine Filterung nur aus CSS-Einträgen hinzubekommen! Zusätzlich kann ganz oben in der CSS so einiges über die "VAR-Funktion" angepasst werden! Der Code ist allerdings als komplette HTML-Seite aufgestellt. Um es im Gaia oder den anderen Templates laufen zu lassen und dass sich nichts gegenseitig stört, mussten die CSS-Einträge erweitert und teilweise mit "!important" versehen werden! Die Positionen für die Filterauswahl und "CODING" wurden korrigiert! Alles lässt sich gut in "Eigene Seiten" unterbringen und kann separat aufgerufen werden!
Nachteil:
Leider muss die Character-Liste von Hand gepflegt werden!
Vielleicht ist es möglich den CSS-Code in Forum-Mitgliederliste unterzubringen. Mal sehen....!
Charcter Guide - Gaia (mit Überschrift)
Installation für alle Templates & Mobil
Character Guide kommt ohne JavaScript aus!
Der gesamte Code wird nach "Eigene Seiten" kopiert!
Nacheinander anklicken: Neue Seite erstellen..., HTML Quelltext direkt bearbeiten, Editor ausschalten und Weitere Einstellungen ein-/ausblenden!
Anschließend gesamten Code eintragen und anpassen!
Der HTML-Code ist für 3 Character und jeweils 3 Profile ausgelegt. Kann beliebig erweitert oder verringert werden!
Über Zeile 7-36 kann die ganze Seite in Farbe, Schrift und Größe angepasst werden, einfach ausprobieren! Besonders wichtig sind die Zeilen 33-36! Hier wird die Größe des einzelnen Profilkarten bestimmt und damit auch die Anzahl der Karten in einer Reihe!
Die Profilkarten können auch beliebig erweitert werden!
Wichtig! Hier den femme-Character für jedes Mitglied eintragen, einschließlich den anderen Angaben! z.B.: Zeile 316-357
<section class="char femme"> ... </section>
Wichtig! Hier den masc-character für jedes Mitglied eintragen, einschließlich den anderen Angaben! z.B.: Zeile 362-403
<section class="char masc"> ... </section>
Wichtig! Hier den nonbinary-Character für jedes Mitglied eintragen, einschließlich den anderen Angaben! z.B.: Zeile 408-449
/* GENERAL */ @font-face{font-family:Bulgarry;src:url(https://dl.dropbox.com/s/k1qo9z6034a4pqt/John-Bulgarry.otf);}
character ::selection {background:var(--accent1);color:var(--lightest);} character ::-moz-selection{background:var(--accent1);color:var(--lightest);}
character ::-webkit-scrollbar-track{background:var(--bg-color);} character ::-webkit-scrollbar{width:5px;background:transparent;} character ::-webkit-scrollbar-thumb{background:var(--accent1);border:2px solid var(--bg-color);border-radius:5px;}
character .page::-webkit-scrollbar-track{background:var(--content-bg);} character .page::-webkit-scrollbar-thumb{border:2px solid var(--content-bg);}
character *, character *:before, character *:after {box-sizing:border-box !important;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out !important;} character {margin:0;background:var(--bg-color) var(--bg-img);background-size:cover;font-family:var(--body-font);color:var(--text);font-size:var(--body-text);line-height:1;} character h1, character h2, character h3 {font-family:var(--heading-font) !important; font-weight:normal !important; margin:0 !important; line-height:0 !important; color:var(--headings) !important;}
character img{max-width:100%;}
character a{text-decoration:none !important;color:var(--accent1) !important;} character a:hover{color:var(--accent2) !important;}
/* CONTAINERS */
character article{} character main {clear:both; display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
character header nav {font-weight:bold !important; text-transform:uppercase !important; letter-spacing:1px !important;} character header nav a {border:1px solid rgba(0,0,0,0.1) !important; padding:2px 8px 2px 9px !important;} character header nav a:hover {}
/* CHARACTERS */
character .char{width:var(--char-width);display:flex;align-items:flex-end;justify-content:center;margin:15px;}
character .char .pic{display:flex;align-items:flex-end;justify-content:flex-start;background-size:cover!important;border:8px solid #fff;width:var(--char-img-width);height:var(--char-img-height);border-radius:10px;outline:1px solid var(--borders);box-shadow:1px 1px 3px rgba(0,0,0,0.1);} character .char .pic[style*='()']{background:rgba(0,0,0,0.02)!important;} character .char .pic .user{background:var(--content-bg);border:1px solid var(--borders);border-radius:3px;box-shadow:1px 1px 2px rgba(0,0,0,0.1);padding:2px 5px;margin:5px;}
character .char .info{width:calc(100% - var(--char-img-width) - 10px);margin:0 0 0 10px;position:relative;}
character .char .info .page{height:var(--char-info-height);overflow:auto;background:var(--content-bg);border:1px solid var(--borders);border-left:6px solid var(--borders);padding:10px; text-align:left !important; color:var(--text);} character .char .info .page b{text-transform:uppercase;letter-spacing:1px;color:var(--accent1);}
character .char .info .bio{position:absolute;bottom:0;left:0;right:0;opacity:0;} character .char .info .bio:hover{opacity:1;}
/* USE FILTER-SPECIFIC COLORS */
character .femme a{color:;} character .femme .pic{outline-color:;} character .femme .pic .user{border-color:;}
character .femme .info .name{color:;} character .femme .info .page{border-color:;} character .femme .info .page b{color:;}
character .masc a{color:;} character .masc .pic{outline-color:;} character .masc .pic .user{border-color:;} character .masc .info .name{color:;} character .masc .info .page{border-color:;} character .masc .info .page b{color:;}
character .nb a{color:;} character .nb .pic{outline-color:;} character .nb .pic .user{border-color:;} character .nb .info .name{color:;} character .nb .info .page{border-color:;} character .nb .info .page b{color:;}
character .placeholder1 a{color:;} character .placeholder1 .pic{outline-color:;} character .placeholder1 .pic .user{border-color:;} character .placeholder1 .info .name{color:;} character .placeholder1 .info .page{border-color:;} character .placeholder1 .info .page b{color:;}
character .placeholder2 a{color:;} character .placeholder2 .pic{outline-color:;} character .placeholder2 .pic .user{border-color:;} character .placeholder2 .info .name{color:;} character .placeholder2 .info .page{border-color:;} character .placeholder2 .info .page b{color:;}
character .placeholder3 a{color:;} character .placeholder3 .pic{outline-color:;} character .placeholder3 .pic .user{border-color:;} character .placeholder3 .info .name{color:;} character .placeholder3 .info .page{border-color:;} character .placeholder3 .info .page b{color:;}
character .placeholder4 a{color:;} character .placeholder4 .pic{outline-color:;} character .placeholder4 .pic .user{border-color:;} character .placeholder4 .info .name{color:;} character .placeholder4 .info .page{border-color:;} character .placeholder4 .info .page b{color:;}
character .placeholder5 a{color:;} character .placeholder5 .pic{outline-color:;} character .placeholder5 .pic .user{border-color:;} character .placeholder5 .info .name{color:;} character .placeholder5 .info .page{border-color:;} character .placeholder5 .info .page b{color:;}
character .placeholder6 a{color:;} character .placeholder6 .pic{outline-color:;} character .placeholder6 .pic .user{border-color:;} character .placeholder6 .info .name{color:;} character .placeholder6 .info .page{border-color:;} character .placeholder6 .info .page b{color:;}
/* FILTER */
character .femme-filter:after{content:'Femme';} character .masc-filter:after{content:'Masc';} character .nonbinary-filter:after{content:'Nonbinary';} character .placeholder1-filter:after{content:'placeholder1';} character .placeholder2-filter:after{content:'placeholder2';} character .placeholder3-filter:after{content:'placeholder3';} character .placeholder4-filter:after{content:'placeholder4';} character .placeholder5-filter:after{content:'placeholder5';} character .placeholder6-filter:after{content:'placeholder6';} character .all:after{content:'All';}
character .gender{-moz-appearance:none;appearance:none;cursor:pointer;margin:0;font-family:var(--main-font);font-size:var(--body-text);font-weight:bold;text-transform:uppercase;letter-spacing:1px;color:var(--accent1) !important;} character .gender:after{display:block;width:var(--toggle-btn-width) !important;height:20px;line-height:18px;background:var(--content-bg);border:1px solid rgba(0,0,0,0.1);padding:0 8px;margin:0 2px;} character .gender:hover:after{color:var(--accent); background: #eedddd;} character .gender:checked:after{background:rgba(0,0,0,0.1);color:var(--lightest);}
character .gender{float:right; margin:10px 0 20px 0; z-index:4;} character .gender:nth-of-type(1){right:calc((var(--toggle-btn-width) * 0) + (8px * 1));} character .gender:nth-of-type(2){right:calc((var(--toggle-btn-width) * 1) + (8px * 2));} character .gender:nth-of-type(3){right:calc((var(--toggle-btn-width) * 2) + (8px * 3));} character .gender:nth-of-type(4){right:calc((var(--toggle-btn-width) * 3) + (8px * 4));} character .gender:nth-of-type(5){right:calc((var(--toggle-btn-width) * 4) + (8px * 5));} character .gender:nth-of-type(6){right:calc((var(--toggle-btn-width) * 5) + (8px * 6));} character .gender:nth-of-type(7){right:calc((var(--toggle-btn-width) * 6) + (8px * 7));} character .gender:nth-of-type(8){right:calc((var(--toggle-btn-width) * 7) + (8px * 8));} character .gender:nth-of-type(9){right:calc((var(--toggle-btn-width) * 8) + (8px * 9));} character .gender:nth-of-type(10){right:calc((var(--toggle-btn-width) * 9) + (8px * 10));}
character .masc-filter:checked ~ main .femme, character .masc-filter:checked ~ main .nb, character .masc-filter:checked ~ main .placeholder1, character .masc-filter:checked ~ main .placeholder2, character .masc-filter:checked ~ main .placeholder3, character .masc-filter:checked ~ main .placeholder4, character .masc-filter:checked ~ main .placeholder5, character .masc-filter:checked ~ main .placeholder6,
character .femme-filter:checked ~ main .masc, character .femme-filter:checked ~ main .nb, character .femme-filter:checked ~ main .placeholder1, character .femme-filter:checked ~ main .placeholder2, character .femme-filter:checked ~ main .placeholder3, character .femme-filter:checked ~ main .placeholder4, character .femme-filter:checked ~ main .placeholder5, character .femme-filter:checked ~ main .placeholder6,
character .nonbinary-filter:checked ~ main .masc, character .nonbinary-filter:checked ~ main .femme, character .nonbinary-filter:checked ~ main .placeholder1, character .nonbinary-filter:checked ~ main .placeholder2, character .nonbinary-filter:checked ~ main .placeholder3, character .nonbinary-filter:checked ~ main .placeholder4, character .nonbinary-filter:checked ~ main .placeholder5, character .nonbinary-filter:checked ~ main .placeholder6,
character .placeholder1-filter:checked ~ main .masc, character .placeholder1-filter:checked ~ main .femme, character .placeholder1-filter:checked ~ main .nb, character .placeholder1-filter:checked ~ main .placeholder2, character .placeholder1-filter:checked ~ main .placeholder3, character .placeholder1-filter:checked ~ main .placeholder4, character .placeholder1-filter:checked ~ main .placeholder5, character .placeholder1-filter:checked ~ main .placeholder6,
character .placeholder2-filter:checked ~ main .masc, character .placeholder2-filter:checked ~ main .femme, character .placeholder2-filter:checked ~ main .nb, character .placeholder2-filter:checked ~ main .placeholder1, character .placeholder2-filter:checked ~ main .placeholder3, character .placeholder2-filter:checked ~ main .placeholder4, character .placeholder2-filter:checked ~ main .placeholder5, character .placeholder2-filter:checked ~ main .placeholder6,
character .placeholder3-filter:checked ~ main .masc, character .placeholder3-filter:checked ~ main .femme, character .placeholder3-filter:checked ~ main .nb, character .placeholder3-filter:checked ~ main .placeholder1, character .placeholder3-filter:checked ~ main .placeholder2, character .placeholder3-filter:checked ~ main .placeholder4, character .placeholder3-filter:checked ~ main .placeholder5, character .placeholder3-filter:checked ~ main .placeholder6,
character .placeholder4-filter:checked ~ main .masc, character .placeholder4-filter:checked ~ main .femme, character .placeholder4-filter:checked ~ main .nb, character .placeholder4-filter:checked ~ main .placeholder1, character .placeholder4-filter:checked ~ main .placeholder2, character .placeholder4-filter:checked ~ main .placeholder3, character .placeholder4-filter:checked ~ main .placeholder5, character .placeholder4-filter:checked ~ main .placeholder6,
character .placeholder5-filter:checked ~ main .masc, character .placeholder5-filter:checked ~ main .femme, character .placeholder5-filter:checked ~ main .nb, character .placeholder5-filter:checked ~ main .placeholder1, character .placeholder5-filter:checked ~ main .placeholder2, character .placeholder5-filter:checked ~ main .placeholder3, character .placeholder5-filter:checked ~ main .placeholder4, character .placeholder5-filter:checked ~ main .placeholder6,
character .placeholder6-filter:checked ~ main .masc, character .placeholder6-filter:checked ~ main .femme, character .placeholder6-filter:checked ~ main .nb, character .placeholder6-filter:checked ~ main .placeholder1, character .placeholder6-filter:checked ~ main .placeholder2, character .placeholder6-filter:checked ~ main .placeholder3, character .placeholder6-filter:checked ~ main .placeholder4, character .placeholder6-filter:checked ~ main .placeholder5 {display:none;}
<!-- NAME --> <h3 class="name">femme character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">masc character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">nonbinary character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">femme character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">masc character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">nonbinary character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">femme character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">masc character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
<!-- NAME --> <h3 class="name">nonbinary character;</h3>
<!-- BIO - FRONT --> <div class="page stats">
<b>Name</b> INFO_HERE<br><br>
<b>Age</b> INFO_HERE<br><br>
<b>Species</b> INFO_HERE<br><br>
<b>Pronouns</b> INFO_HERE<br><br>
<b>Fandom</b> INFO_HERE
</div>
<!-- BIO - BACK - DELETE IF YOU ONLY WANT ONE PAGE --> <div class="page bio">
<b>Premise</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id est ipsum. Cras viverra, lorem a faucibus dignissim, nunc nisi dictum diam, non consectetur libero magna id arcu. Nam molestie commodo dolor in cursus. Etiam id suscipit ligula. Integer rutrum, augue ac faucibus sagittis, ipsum mauris sollicitudin sem, sit amet ultricies purus dolor sit amet mi. Phasellus sit amet neque nec purus maximus semper a sed velit. Ut semper tortor a feugiat rhoncus.<br><br>
<b>Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus, diam vel tincidunt elementum, dolor neque mattis quam, in tincidunt neque ante eu velit. Pellentesque dapibus posuere euismod. Phasellus egestas sapien lobortis, feugiat dui non, posuere purus. Donec convallis nisl sit amet dolor ullamcorper euismod. Donec accumsan dolor velit, sed pulvinar nulla ultrices sit amet. Fusce diam metus, condimentum lobortis ligula sodales, hendrerit bibendum nisl. Phasellus porta elit dolor, ac consectetur tellus feugiat non. Nullam faucibus maximus nisl, vitae maximus ante tempus non.<br><br>
<b>Backstory</b> Aliquam bibendum nisl vitae sollicitudin interdum. Ut vel ante quis augue elementum ultricies. Integer convallis eleifend enim gravida eleifend. Nullam ullamcorper enim nec mi ultricies ullamcorper ut a arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam convallis ligula non nulla tincidunt euismod. Ut eget sapien vehicula, placerat urna sit amet, ultricies magna. Pellentesque congue iaculis imperdiet. Fusce a faucibus enim. Mauris quis felis et massa commodo blandit vitae nec nisl. Sed venenatis tincidunt hendrerit. Quisque maximus velit porta, aliquam nulla ut, porta massa. Cras vitae dui nec quam ullamcorper sollicitudin in a leo. Maecenas lobortis vel libero eu aliquam. Quisque tristique euismod nunc, sed mattis nunc facilisis eget.
</div>
</div>
</section>
</main>
</form></article>
<!-- CREDIT - DO NOT REMOVE --> <a href="" id="credit2">CODING</a>
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten
»
Mitgliederliste - Code mit Filterung
Foren Spende
Direkt zu PayPal
Thema drucken
29.06.2023 00:29 (zuletzt bearbeitet: 01.07.2023 14:15)
Antworten
