Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17098747.03-terms-of-service ---
- Version: 4.5
- -
- -Fixed text colour messing up on lightmode.
- -
- -Updated terms and service link above
- -
- -Changed all <p class="pb-3"> into the line underneath
- -Made Header and Ref Sheet icons the Sun/Primary instead of Curved Fire/Secondary
- -Fixed colour bugs in playlist and Info/Playlist Headers
- Default Colours
- -Light-Fill / Text Colour: #B00B69
- -Dark-Fill : #400225
- -Text White: #FFFFFF
- -Border Black: #000000
- -Font Awesome Icons: fas fa-fire-flame-curved | fas fa-star
- There are no find and replace variables in this code. By using this code, you agree that you are somewhat familiar with HTML and how it works. There are also less comments in this code than usual, simply because this code is so long already.
- Most user-changeable varibles are set as # if that helps.
- Thank you for reading!
- Crispin
- -->
- <!------------------------------- START BACKGROUND -------------------------------->
- <!-- No Image -->
- <div class="m-0 p-0">
- <!-- If you want An Image, delete above div and Uncomment code on the line below. -->
- <!-- <div style="background-image:url(https://media.discordapp.net/attachments/917542533930823690/996466133202907206/unknown.png?width=574&height=578); background-size:cover; background-position:top-center; overflow:auto;" class="card-block"> -->
- <!------------------------------- START ACTUAL CODE -------------------------------->
- <div class="col-12 p-0" style="font-size:1rem; font-family:'comic sans ms'; background-color:#FFFFFF; border:none;">
- <!------------------------------- START HEADING -------------------------------->
- <div class="col-12 p-0" style="border:#000000 8px solid; border-bottom:none;">
- <div class="card rounded-0" style="background:url(#); background-position:center; background-size:cover; border:none;"><p class="justify-content-between display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);">
- <span><a href="https://toyhou.se/19283348.nebula" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA" data-original-title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-star fa-flip-horizontal"></i></span></a> # - #</span></p></div>
- </div>
- <!------------------------------- END HEADING -------------------------------->
- <!------------------------------- START BUTTONS -------------------------------->
- <div class="col-12 p-0" style="border:#000000 4px solid; border-bottom:none;">
- <ul class="nav nav-tabs card-header-tabs row p-0 m-0" style="text-align:center;">
- <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#one" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">About</a></li>
- <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#two" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Personality</a></li>
- <li class="col-12 col-lg-2 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#three" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Story</a></li>
- <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#four" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Background</a></li>
- <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#five" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Tastes</a></li>
- <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#six" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Design</a></li>
- <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#seven" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Buddies</a></li>
- <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#eight" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Trivia</a></li>
- <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#nine" style="color:#FFFFFF; background:#B00B69; border:#000000 4px solid; border-radius:0px">Extras</a></li>
- </ul>
- </div>
- <!------------------------------- END BUTTONS -------------------------------->
- <!------------------------------- START MIDDLE SECTION -------------------------------->
- <div class="col-12 mx-auto p-0 row" style="color:#FFFFFF; background-color:#532202; border:#000000 4px solid; border-top:none;">
- <div class="col-12 col-lg-3 p-0">
- <div class="col-12 p-3" style="color:#FFFFFF; font-size:1.2rem; background:#B00B69; border:#000000 4px solid;"><i class="fas fa-fire-flame-curved fa-flip-horizontal"></i> Playlist</div>
- <!------------------------------- START PLAYLIST -------------------------------->
- <div class="col-12" style="height:688px; overflow:auto; border:#000000 4px solid;">
- <div class="container p-3">
- <div class="p-3 text-center">
- <ul class="list-unstyled">
- <!------ START SONG ----->
- <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
- <p="text-center" style="color:#B00B69; text-shadow:0px 0px;"><b># - #</b></p>
- <audio controls="" style="border-radius:0px; background:#B00B69; padding:2px; width:200px; height:35px;"><source src="#"></audio></td><br><p style="color:#400225;">-</p>
- <!------ END SONG ----->
- </ul>
- </div>
- </div>
- </div>
- <!------------------------------- End PLAYLIST -------------------------------->
- </div>
- <!------------------------------- START INFO -------------------------------->
- <div class="col-12 col-lg-9 p-0" style="background-color:#400225; border:none;">
- <div class="tab-content" style="border:#000000 4px solid;">
- <div class="col-12 p-3" style="color:#FFFFFF; font-size:1.2rem; background:#B00B69; border-bottom:#000000 8px solid;"><i class="fas fa-fire-flame-curved fa-flip-horizontal"></i> Info</div>
- <!------------------------------- START TAB 1 -------------------------------->
- <div class="tab-pane active show" id="one"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <div class="col-12 row">
- <div class="col-12 col-lg-8">
- <!------ START INTRODUCTION ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Introduction</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ START INTRODUCTION ----->
- <!------ START FLAGS ----->
- <div class="col-12 my-2 mb-3 text-center">
- <div data-toggle="tooltip" title="Lesbian" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E65524,#E65524 20%,#FE9855 20%,#FE9855 40%,#FFD4B8 40%,#FFD4B8 60%,#E17684 60%,#E17684 80%,#C93B5F 80%);line-height:60px;width:80px; font-size:0px;">Lesbian</div>
- </div>
- <!------ END FLAGS ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Basic Information</span><hr class="mt-1 mb-2">
- <div class="col-12 row mb-2 pb-3 p-0 text-center">
- <div class="col-12">
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Full-Name</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- <div class="col-12 col-lg-6">
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Species</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#" style="color:#B00B69;">#</a></span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Birthday</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Age</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Gender</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Orientation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Occupation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Story-Role</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Alignment</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- <div class="col-12 col-lg-6">
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Birth-Place</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Resides</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Status</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Relationship</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Religion</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Ethnicity</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Race</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Voiceclaim</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#" style="color:#B00B69;">#</a></span>
- </div>
- </div>
- </div>
- </div>
- <!------ END TEXT ----->
- <!------ START Image ----->
- <div class="col-12 col-lg-4 text-center">
- <img src="#" height="400" width="200">
- </div>
- <!------ END Image ----->
- </div>
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 1 -------------------------------->
- <!------------------------------- START TAB 2 -------------------------------->
- <div class="tab-pane fade" id="two"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;" style="height:680px;"><!--Start Tab Set-Up-->
- <div class="col-12 row">
- <!------ START Q&A ----->
- <div class="col-12 row mb-2 p-0 text-center">
- <div class="col-12 col-lg-6">
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">MBTI</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Western Zodiac</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Chinese Zodiac</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Birth-Flower</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Birth-Stone</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- <div class="col-12 col-lg-6">
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Enneagram</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Hogwarts House</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Blood-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Triforce-Piece</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Cat/Dog Person</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- </div>
- <!------ END Q&A ----->
- <!------ START TEXT ----->
- <div class="py-3 pb-5">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Personality</span><hr class="mt-1 mb-2">
- <p>#</p>
- </div>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <div class="col-12 row mb-4">
- <div class="col-12 col-lg-6 mb-4 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Positive Traits</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- <div class="col-12 col-lg-6 mb-4 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Negative Traits</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- <div class="col-12 col-lg-6 mb-4 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Realistic Goals</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- <div class="col-12 col-lg-6 mb-4 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Aspirational Dreams</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- <div class="col-12 col-lg-6 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Fears</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- <div class="col-12 col-lg-6 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Secrets</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- </div>
- <!------ END TEXT ----->
- </div>
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act Alone?</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With Friends?</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With Family?</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With A Partner?</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With An Enemy?</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With An Authority Figure?</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 2 -------------------------------->
- <!------------------------------- START TAB 3 -------------------------------->
- <div class="tab-pane fade" id="three"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Story-Name</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 3 -------------------------------->
- <!------------------------------- START TAB 4 -------------------------------->
- <div class="tab-pane fade" id="four"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Early Childhood</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Childhood</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Teenagehood</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Adulthood</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 4 -------------------------------->
- <!------------------------------- START TAB 5 -------------------------------->
- <div class="tab-pane fade" id="five"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <!------ START Q&A ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Favourites</span><hr class="mt-1 mb-2">
- <div class="col-12 row mb-4 p-0 text-center">
- <div class="col-12 col-lg-6">
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Snack Food</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Meal</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Cold Drink</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Hot Drink</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Animal</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Colour</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Time Of Day</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Season</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- <div class="col-12 col-lg-6">
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Holiday</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Sport</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Song</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#" style="color:#B00B69;">Unknown</a></span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Band</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Music Genre</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Book</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Film</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Book/Film Genre</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- </div>
- <!------ END Q&A ----->
- <!------ START TEXT ----->
- <div class="col-12 row mb-4">
- <div class="col-12 col-lg-6 mb-4 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Likes</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- <div class="col-12 col-lg-6 mb-4 text-center">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Dislikes</span><hr class="mt-1 mb-2">
- <p>
- #<br>
- #<br>
- #<br>
- </p>
- </div>
- </div>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Pass-Times</span><hr class="mt-1 mb-2">
- <div class="col-12 row">
- <div class="col-12">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- </div>
- <div class="col-12">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- </div>
- <div class="col-12">
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- </div>
- </div>
- <!------ END TEXT ----->
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 5 -------------------------------->
- <!------------------------------- START TAB 6 -------------------------------->
- <div class="tab-pane fade" id="six"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <!------ START IMAGE ------>
- <div class="card bg-transparent border-0 rounded-0" style="max-width:600px; margin-left:auto; margin-right:auto;">
- <img src="#">
- <a href="#" data-toggle="tooltip" title="Full Size" style="color:#FFFFFF; position:absolute; top:3px; right:7px; font-size:1.4rem"> <i class="fas fa-star"></i></a>
- </div>
- <!------ END IMAGE ------>
- <!------------------------------- START COLOUR-PALETTE -------------------------------->
- <div class="col-12 my-3 px-0" style="border:#000000 4px solid;">
- <ul class="nav nav-justified" style="font-size:1rem;">
- <li class="nav-item m-0" style="color:#B00B69; font-size:1rem; background:#B00B69;">I</li>
- <li class="nav-item m-0" style="background:#B00B69;"></li>
- <!-- Copy and paste the 2ND LINE ONLY just above this comment to add more! -->
- </ul>
- </div>
- <!------------------------------- END COLOUR-PALETTE -------------------------------->
- <div class="row my-3" style="max-width:700px; margin-left:auto; margin-right:auto">
- <!------ START DESIGN NOTES ------>
- <div class="col-12 col-xl-5 mt-2 mb-3 mb-xl-0">
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Hair-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Hair-Length</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Hair-Colour</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Eye-Colour</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Eye-Vibe</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Body-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Skin-Tone</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Height</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Weight</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Piercings</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Tattoos</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Clothing-Style</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Presentation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- <!------ END DESIGN NOTES ------>
- <!------ START EXTRA NOTES ------>
- <div class="col-12 col-xl-7">
- <span style="color:#B00B69; font-size:1.4rem;"> Extra Notes</span><hr class="mt-0 mb-2">
- <ul>
- <li>#</li>
- </ul>
- </div>
- <!------ END EXTRA NOTES ------>
- </div>
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 6 -------------------------------->
- <!------------------------------- START TAB 7 -------------------------------->
- <div class="tab-pane fade" id="seven"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <!-- START MATEY -->
- <div class="row">
- <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
- <a href="#" style="font-size:1.2rem; color:#B00B69">#</a>
- <span class="pull-right" style="font-size:1.2rem; color:#B00B69">#</span><hr class="mt-0 mb-2">
- <p>#</p>
- <p>-</p>
- <p>#</p>
- <p style="color:#400225;">-</p>
- </div>
- <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
- <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
- <a data-toggle="tooltip" href="#"><img src="#"></a>
- </div>
- </div>
- </div>
- <!-- END MATEY -->
- <!-- START MATEY -->
- <div class="row">
- <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
- <a href="#" style="font-size:1.2rem; color:#B00B69">#</a>
- <span class="pull-right" style="font-size:1.2rem; color:#B00B69">#</span><hr class="mt-0 mb-2">
- <p>#</p>
- <p>-</p>
- <p>#</p>
- <p style="color:#400225;">-</p>
- </div>
- <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
- <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
- <a data-toggle="tooltip" href="#"><img src="#"></a>
- </div>
- </div>
- </div>
- <!-- END MATEY -->
- <!-- START MATEY -->
- <div class="row">
- <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
- <a href="#" style="font-size:1.2rem; color:#B00B69">#</a>
- <span class="pull-right" style="font-size:1.2rem; color:#B00B69">#</span><hr class="mt-0 mb-2">
- <p>#</p>
- <p>-</p>
- <p>#</p>
- <p style="color:#400225;">-</p>
- </div>
- <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
- <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
- <a data-toggle="tooltip" href="#"><img src="#"></a>
- </div>
- </div>
- </div>
- <!-- END MATEY -->
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 7 -------------------------------->
- <!------------------------------- START TAB 8 -------------------------------->
- <div class="tab-pane fade" id="eight"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <!------ START TRIVIA ----->
- <div class="col-12 row mb-2 pb-3 p-0 text-center">
- <div class="col-12 col-lg-6">
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Created By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Designed By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Assosciated Lore By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Character Arc By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- <div class="col-12 col-lg-6">
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Created At</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Forename Meaning</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- <div class="d-flex" style="flex-direction:row; align-items:center;">
- <p class="mr-2" style="flex-grow:0;">Surename Meaning</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
- </div>
- </div>
- </div>
- <!------ END TRIVIA ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Canon Trivia</span><hr class="mt-1 mb-2">
- <ul class="pb-3">
- <li>#</li>
- </ul>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">"Word-Of-God" Trivia</span><hr class="mt-1 mb-2">
- <ul class="pb-3">
- <li>#</li>
- </ul>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Developmental Trivia</span><hr class="mt-1 mb-2">
- <ul class="pb-3">
- <li>#</li>
- </ul>
- <!------ END TEXT ----->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Retcons/Mistakes</span><hr class="mt-1 mb-2">
- <ul class="pb-3">
- <li>#</li>
- </ul>
- <!------ END TEXT ----->
- <!------ START AWARDS ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">Awards Cabinet</span><hr class="mt-1 mb-2">
- <div class="col-12">
- <div class="row p-3" style="text-align:center;">
- <!-- Award -->
- <div class="tooltipster px-3 pb-3" title="【 # 】"><a href="#">
- <img src="#" class="tooltipster" width="50" height="50" data-placement="bottom" title="#"></a></div>
- <!-- Award -->
- </div>
- </div>
- <!------ END AWARDS ----->
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 8 -------------------------------->
- <!------------------------------- START TAB 9 -------------------------------->
- <div class="tab-pane fade" id="nine"><!-- Start Tab-->
- <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
- <!------ START TEXT ----->
- <span style="color:#B00B69; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
- <p>#</p>
- <p style="color:#400225;">-</p>
- <!------ END TEXT ----->
- </div><!--End Tab Set-Up-->
- </div><!-- End Tab -->
- <!------------------------------- END TAB 9 -------------------------------->
- </div>
- </div>
- <!------------------------------- END INFO -------------------------------->
- </div>
- <!------------------------------- END MIDDLE SECTION -------------------------------->
- <!------------------------------- START GALLERY-BUTTON -------------------------------->
- <div class="col-12 py-3 text-center" style="background-color:#B00B69; border-top:none; border-left:#000000 8px solid; border-right:#000000 8px solid; border-bottom:#000000 8px solid;">
- <a href="#" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-fire-flame-curved fa-flip-horizontal"></i> GALLERY <i class="fas fa-fire-flame-curved"></i></li>
- </div>
- <!------------------------------- END GALLERY-BUTTON -------------------------------->
- <!------------------------------- START CREDITS LIST -------------------------------->
- <div class="col-12 py-2 text-center" style="font-size:1.2rem; background-color:#B00B69; border-top:none; border-left:#000000 8px solid; border-right:#000000 8px solid; border-bottom:#000000 8px solid;">
- <a href="#" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-fire-flame-curved fa-flip-horizontal"></i></span></a>
- <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-fire-flame-curved fa-flip-horizontal"></i></span></a>
- <a href="https://toyhou.se/19283348.nebula" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-star"></i></span></a>
- <a href="https://toyhou.se/16962387.html-pride-flags" data-toggle="tooltip" title="Pride Flags Frankensteined From: VynxCodes"><span style="color:#FFFFFF;"><i class="fas fa-fire-flame-curved"></i></span></a>
- <a href="https://toyhou.se/15560571.ribbon-repository-upd8-2-14-" data-toggle="tooltip" title="Ribbon Awards From: RadioStorage"><span style="color:#FFFFFF;"><i class="fas fa-fire-flame-curved"></i></span></a>
- </div>
- <!------------------------------- END CREDITS LIST -------------------------------->
- </div>
- </div>
- <!------------------------------- END ACTUAL CODE -------------------------------->
- </div> <!-- End Background -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement