API tools faq
paste
Advertisement
CrispinAsheYA

Oak Woods - (CHARACTER, F2U)

CrispinAsheYA
May 1st, 2022 (edited)
165
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 31.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--RULES
  4.  
  5. YOU MAY
  6. -Frankenstein this with other codes and add/change/delete sections to your liking
  7. -Change colours, images, fonts, ect.
  8.  
  9. YOU MAYN'T
  10. -Resell or copy and paste this template pretty much exactly and pass it off as your own
  11. -Change every single image to be Minecraft Raw Porkchop
  12.  
  13. HOW TO USE
  14. -When editing, remember to turn WYSIWYG off! (AKA, the button should say "Enable WYSIWYG"! What does that stand for anyway?)
  15. -I tend to litter comments everywhere. I like to assume that somewhere out there, one of my templates its someone's first ever experience with HTML so I tend to explain accordingly. Feel free to delete the comments to your liking.
  16. -To change the colours, I reccomend copy and pasting all of your code into a Google Doc, going onto "find and replace" and using the colours below to quickly change the colours globally.
  17.  
  18. Default Colours
  19. -Bright Colour: #0B9758
  20. -Darker Colour: #143F2C
  21. -Background Colour: #163829
  22.  
  23. For this template specically, your character's design may be consistent no matter what they endure by the end of the story. Therefore, it may be easier to, instead of copying and pasting one Design area to the second design area, you may wanna get rid of the second Design Area and set the button in the spoilers area from 7 to 5 instead. Just remember to add the section back in and change accordingly if you change your mind!
  24.  
  25. Thank you for reading!
  26. Crispin
  27.  
  28. -->
  29.  
  30. <!---------------------------------------------------------  START BACKGROUND --------------------------------------------------------->
  31.  
  32. <div class="col-lg-2 col-md-3 hidden-sm-down sidebar"></div>
  33. <div class="card rounded-0 border-0 col-lg-10 offset-lg-2 col-md-9 offset-md-3 p-0" style="overflow:hidden; position:fixed; bottom:0; top:0; left:0; z-index:-1; background-color:#163829;">
  34. </div>
  35.  
  36. <!---------------------------------------------------------  END BACKGROUND --------------------------------------------------------->
  37.  
  38.  
  39. <div class="row p-3 tab-pane fade show active"> <!-- This sets up the box you're writing in. I suggest not fiddling this. -->
  40.  
  41.  
  42.   <!--------------------------------------------------------- START TABS & PLAYLIST ------------------------------------------------------->
  43.  
  44.   <div class="col-12 col-lg-4"> <!-- Sets up the Tabs & Playlist area -->
  45.  
  46.     <!------------------------------------------------------------- START TABS ------------------------------------------------------------>
  47.    
  48.     <div class="card mb-3 mb-lg-0" style="height:285px; font-family:'comic sans ms'; color:#0B9758; background:#143F2C; border:6px #0B9758 solid;"> <!-- Sets up Tabs Area -->
  49.      
  50.       <!------ START HEADER ------>
  51.       <div class="card-header py-1 px-2 text-white" style="font-size:17px; border-radius:0px; background-color:#0B9758; border-color:#0B9758">
  52.         <span class="pull-left"><i class="fas fa-leaf-oak"></i> Tabs</span>
  53.       </div>
  54.       <!------ END HEADER ------>
  55.      
  56.       <!------------------------- START BUTTONS --------------------------->
  57.      
  58.       <ul class="nav flex-column m-3"> <!-- Defines this as the list for the buttons -->
  59.        
  60.         <!--- START BUTTON ONE --->
  61.         <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#0B9758; background: #143F2C; border: 6px #0B9758 solid;" data-toggle="pill" href="#one">ONE</a></li>
  62.         <!-- <li> and </li> defines each point of the list (like a bullet point!) making each button distinct -->
  63.         <!--- END BUTTON ONE --->
  64.        
  65.         <!--- START BUTTON TWO --->
  66.         <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#0B9758; background: #143F2C; border: 6px #0B9758 solid;" data-toggle="pill" href="#two">TWO</a></li>
  67.         <!-- nav-link btn btn is essentially the building block of the button -->
  68.         <!--- END BUTTON TWO --->
  69.        
  70.         <!--- START BUTTON THREE --->
  71.         <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#0B9758; background: #143F2C; border: 6px #0B9758 solid;" data-toggle="pill" href="#three">THREE</a></li>
  72.         <!-- anything within the style="##" is fun stuff like font of the writing inside the button, the background colour, border colour & thickness, ect. -->
  73.         <!--- END BUTTON THREE --->
  74.        
  75.         <!--- START BUTTON FOUR --->
  76.         <li class="nav-item m-1"><a class="nav-link btn btn" style="font-family:'comic sans ms'; color:#0B9758; background: #143F2C; border: 6px #0B9758 solid;" data-toggle="pill" href="#four">FOUR</a></li>
  77.         <!-- data-toggle="pill" means this is a button   and    href="#four" sets up which tab the button leads too. -->
  78.         <!--- END BUTTON FOUR --->
  79.        
  80.       </ul> <!-- Ends the button list -->
  81.      
  82.     </div> <!-- End Tabs Area -->
  83.    
  84.     <!------------------------- END BUTTONS --------------------------->
  85.    
  86.     <!------------------------------------------------------ END TABS ----------------------------------------------------->
  87.    
  88.    
  89.     <!------------------------------------------------------ START PLAYLIST ----------------------------------------------------->
  90.    
  91.     <div class="card mb-3" style="height:420px; font-family:'comic sans ms'; color:#0B9758; background:#143F2C; border:6px #0B9758 solid;"> <!-- Sets up Playlist Area -->
  92.      
  93.       <!------ START HEADER ------>
  94.       <div class="card-header py-1 px-2 text-white" style="font-size:17px; border-radius:0px; background-color:#0B9758; border-color:#0B9758">
  95.         <span class="pull-left"><i class="fas fa-leaf-oak"></i> Playlist</span>
  96.       </div>
  97.       <!------ END HEADER ------>
  98.      
  99.       <!--------------------- START PLAYLIST -------------------------->
  100.      
  101.       <div class="col-12 col-xl-10"> <!-- Sets up where the songs actually go. At 420px, you have room for 5 songs. Make sure they're good! -->
  102.        
  103.         <div class="nav-item m-1"><a style="color:#143F2C;">-</a></div>
  104.        
  105.         <!------ START SONG ONE ----->
  106.         <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  107.           <span style="color:0B9758; text-shadow:0px 0px;"><strong>One - Pluffaduff</strong></span><br />
  108.           <audio controls="" style="opacity:.99;border-radius:10px;background:0B9758; padding:2px;width:300px;height:35px;"><source src="https://cdn.discordapp.com/attachments/917542533930823690/964144152176640020/ytmp3free.cc_pluffaduff-one-final-cut-youtubemp3free.org.mp3"></audio>
  109.         </td>
  110.         <br>
  111.         <!------ END SONG ONE ----->
  112.        
  113.         <!------ START SONG TWO ----->
  114.         <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  115.           <span style="color:0B9758; text-shadow:0px 0px;"><strong>Song 2 - Blur</strong></span><br />
  116.           <audio controls="" style="opacity:.99;border-radius:10px;background:0B9758; padding:2px;width:300px;height:35px;"><source src="https://cdn.discordapp.com/attachments/917542533930823690/964144598773555251/ytmp3free.cc_blur-song-2-official-music-video-youtubemp3free.org.mp3"></audio>
  117.         </td>
  118.         <br>
  119.         <!------ END SONG TWO ----->
  120.        
  121.         <!------ START SONG THREE ----->
  122.         <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  123.           <span style="color:0B9758; text-shadow:0px 0px;"><strong>3 - Britney Spears</strong></span><br />
  124.           <audio controls="" style="opacity:.99;border-radius:10px;background:0B9758; padding:2px;width:300px;height:35px;"><source src="https://cdn.discordapp.com/attachments/917542533930823690/964145433800757278/ytmp3free.cc_britney-spears-3-official-hd-video-youtubemp3free.org.mp3"></audio>
  125.         </td>
  126.         <br>
  127.         <!------ END SONG THREE ----->
  128.        
  129.         <!------ START SONG FOUR ----->
  130.         <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  131.           <span style="color:0B9758; text-shadow:0px 0px;"><strong>Song Title - Artist Name</strong></span><br />        <!-- Link here VV -->
  132.           <audio controls="" style="opacity:.99;border-radius:10px;background:0B9758; padding:2px;width:300px;height:35px;"><source src="#"></audio>
  133.         </td>
  134.         <br>
  135.         <!------ END SONG FOUR ----->
  136.        
  137.         <!------ START SONG FIVE ----->
  138.         <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  139.           <span style="color:0B9758; text-shadow:0px 0px;"><strong>Song Title - Artist Name</strong></span><br />        <!-- Link here VV -->
  140.           <audio controls="" style="opacity:.99;border-radius:10px;background:0B9758; padding:2px;width:300px;height:35px;"><source src="#"></audio>
  141.         </td>
  142.         <br>
  143.         <!------ END SONG FIVE ----->
  144.        
  145.       </div> <!-- End Song Area -->
  146.      
  147.     </div> <!-- End Playlist Area -->
  148.    
  149.     <!------------------------------------------------------ END PLAYLIST ----------------------------------------------------->
  150.  
  151.   </div> <!-- End Tabs & Playlist Area -->
  152.  
  153.   <!------------------------------------------------------ END TABS & PLAYLIST ----------------------------------------------------->
  154.  
  155.   <!----------------------------------------------------------- START INFO ------------------------------------------------------------>
  156.    
  157.   <div class="col-12 col-lg-8"> <!-- Sets up The Whole Square On The Right -->
  158.    
  159.     <div class="card text-white" style="height:715px; font-family:'comic sans ms'; color:#0B9758; background:#143F2C; border:6px #0B9758 solid;"> <!-- Sets up The Whole Square On The Right 2 -->
  160.      
  161.       <!------ START HEADER ------>
  162.       <div class="card-header py-1 px-2 text-white" style="font-size:17px; border-radius:0px; background-color:#0B9758; border-color:#0B9758">
  163.         <span class="pull-left"><i class="fas fa-leaf-oak"></i> Info</span>
  164.       </div>
  165.       <!------ END HEADER ------>
  166.      
  167.       <div class="tab-content"> <!-- Sets up Tabs -->
  168.      
  169.       <!------------------------------------------ START ABOUT TAB ------------------------------------------>
  170.        
  171.         <div class="tab-pane active" id="one"> <!-- Start Tab 1 -->
  172.          
  173.           <div class="card-body p-3 table-responsive" style="max-height:675px"> <!-- This area is 675 pixels high -->
  174.            
  175.             <span style="font-size:22px; color:#0B9758"> Basic info</span> <!-- Writes Basic Info at the top -->
  176.            
  177.             <hr class="mt-1 mb-2" style="border-color:#0B9758; border-style:dashed;"> <!-- The lil underline beneath Basic Info -->
  178.            
  179.             <!------ START INFO BOXES ------>
  180.            
  181.             <div class="row mb-2" style="max-width:600px; margin-right:auto; margin-left:auto"> <!-- Sets up the info box area -->
  182.              
  183.               <!-- Lil  "Question: Answer" Section. It goes in a zigzag pattern in terms of code which is kind of annoying. For example, Name is top left, Zodiac is top right, Birthday is second down on the left, etc. Remember that if you want to add, change or delete parts. Feel free to add whatever you want here! I'd reccomend having an even number of these though.
  184.                -->
  185.               <div class="col-12 col-sm-6 mt-1">
  186.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Name</span>
  187.                 <span class="pull-right">Text</span>
  188.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  189.               </div>
  190.              
  191.               <div class="col-12 col-sm-6 mt-1">
  192.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Zodiac</span>
  193.                 <span class="pull-right">Text</span>
  194.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  195.               </div>
  196.              
  197.               <div class="col-12 col-sm-6 mt-1">
  198.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Birthday</span>
  199.                 <span class="pull-right">1st January 2022</span>
  200.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  201.               </div>
  202.              
  203.               <div class="col-12 col-sm-6 mt-1">
  204.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Chinese Zodiac</span>
  205.                 <span class="pull-right">Text</span>
  206.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  207.               </div>
  208.              
  209.               <div class="col-12 col-sm-6 mt-1">
  210.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Species</span>
  211.                 <span class="pull-right">Text</span>
  212.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  213.               </div>
  214.              
  215.               <div class="col-12 col-sm-6 mt-1">
  216.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Birthstone</span>
  217.                 <span class="pull-right">Text</span>
  218.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  219.               </div>
  220.              
  221.               <div class="col-12 col-sm-6 mt-1">
  222.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Gender</span>
  223.                 <span class="pull-right">Text</span>
  224.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  225.               </div>
  226.              
  227.               <div class="col-12 col-sm-6 mt-1">
  228.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Birthflower</span>
  229.                 <span class="pull-right">Text</span>
  230.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  231.               </div>
  232.              
  233.               <div class="col-12 col-sm-6 mt-1">
  234.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Orientation</span>
  235.                 <span class="pull-right">Text</span>
  236.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  237.               </div>
  238.              
  239.               <div class="col-12 col-sm-6 mt-1">
  240.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Alignment</span>
  241.                 <span class="pull-right">Text</span>
  242.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  243.               </div>
  244.              
  245.               <div class="col-12 col-sm-6 mt-1">
  246.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Occupation</span>
  247.                 <span class="pull-right">Text</span>
  248.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  249.               </div>
  250.              
  251.               <div class="col-12 col-sm-6 mt-1">
  252.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">MBTI</span>
  253.                 <span class="pull-right">DUMB</span>
  254.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  255.               </div>
  256.              
  257.               <div class="col-12 col-sm-6 mt-1">
  258.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Story Role</span>
  259.                 <span class="pull-right">Text</span>
  260.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  261.               </div>
  262.              
  263.               <div class="col-12 col-sm-6 mt-1">
  264.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Ennegram</span>
  265.                 <span class="pull-right">OwO</span>
  266.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  267.               </div>
  268.              
  269.               <div class="col-12 col-sm-6 mt-1">
  270.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Voiceclaim</span>
  271.                 <a href="#" span class="pull-right">Text</span></a>
  272.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  273.               </div>
  274.              
  275.               <div class="col-12 col-sm-6 mt-1">
  276.                 <span class="badge" style="background-color:#0B9758; font-size:14px; border-radius:0px;">Hogwarts House</span>
  277.                 <span class="pull-right">Text</span>
  278.                 <hr class="my-1" style="border-color:#0B9758; border-style:dashed;">
  279.               </div>
  280.              
  281.             </div>
  282.            
  283.             <!------ END INFO BOXES ------>
  284.            
  285.             <!------ START FREE-WRITE AREA ------>
  286.             <span style="color:#0B9758; font-size:22px;"> About</span>
  287.             <hr class="mt-1 mb-2" style="border-color:#0B9758; border-style:dashed;">
  288.             <p>Text.</p>
  289.             <p>More text. Write whatever you want here. Not even kidding. Go for it. Make this is large was you want, this area scrolls n stuff.</p>
  290.             <!------ END FREE-WRITE AREA ------>
  291.            
  292.            
  293.            
  294.             <!------ START LIKES, DISLIKES, N' AWARDS ------>
  295.            
  296.             <!------ START LIKES N' DISLIKES ------>
  297.             <div class="row my-3" style="max-width:700px; margin-left:auto; margin-right:auto;">
  298.              
  299.               <div class="col-12 col-xl-6 mb-3 mb-xl-0">
  300.                
  301.                 <span style="font-size:20px; color:#0B9758"> Likes</span>
  302.                 <hr class="mt-0 mb-2" style="border-color:#0B9758; border-style:dashed;">
  303.                 <li>Favourite Food</li><br>
  304.                 <li>Music Taste</li><br>
  305.                 <br>
  306.                
  307.                 <span style="font-size:20px; color:#0B9758"> Dislikes</span>
  308.                 <hr class="mt-0 mb-2" style="border-color:#0B9758; border-style:dashed;">
  309.                 <li>Hated Food</li><br>
  310.                 <li>Pet Peeve</li>
  311.              
  312.               </div>
  313.              
  314.               <!------ END LIKES N' DISLIKES ------>
  315.              
  316.               <!------ START AWARDS ------>
  317.               <div class="col-12 col-xl-6">
  318.                 <span style="font-size:20px; color:#0B9758;"> Awards Cabinet</span>
  319.                 <hr class="mt-0 mb-2" style="border-style:dashed; border-color:#0B9758;">
  320.                 <span style="font-size:2em; letter-spacing:20px">
  321.                  
  322.                   <!-- 1 Award -->
  323.                   <a data-toggle="tooltip" href="https://toyhou.se/4739396.-ribbons"
  324.                  title="----- Main Character ----- This Character Is A Main Character!">
  325.                   <img src="https://file.toyhou.se/images/15987643_bvhutjRbgnwMYz3.png?1565855179" width="50" height="50" />
  326.                   <!-- 1 Award -->
  327.                  
  328.                   <!-- 2 Award -->
  329.                   <a data-toggle="tooltip" href="https://toyhou.se/4739396.-ribbons"
  330.                  title="------- Protagonist ------- This Character Is A Protagonist!">
  331.                   <img src="https://file.toyhou.se/images/15994090_jZQYPy6eZM1ZgYY.png" width="50" height="50" />
  332.                   <!-- 2 Award -->
  333.                  
  334.                   <!-- 3 Award -->
  335.                   <a data-toggle="tooltip" href="https://toyhou.se/4739396.-ribbons"
  336.                  title="--- Comfort Character --- This Character Is A Comfort Character!">
  337.                   <img src="https://file.toyhou.se/images/15994134_9UPUgphY1EnRGoa.png" width="50" height="50" />
  338.                   <!-- 3 Award -->
  339.                  
  340.                   <!-- 4 Award -->
  341.                   <a data-toggle="tooltip" href="https://toyhou.se/4739396.-ribbons"
  342.                  title="------- Pretty Face ------- This Character Is A Design And Not Much Else!">
  343.                   <img src="https://file.toyhou.se/images/15991319_rfQOphlrx6EckZp.png?1565840400" width="50" height="50" />
  344.                   <!-- 4 Award -->
  345.                  
  346.                   <!-- 5 Award -->
  347.                   <a data-toggle="tooltip" href="https://toyhou.se/4739396.-ribbons"
  348.                  title="-------- Recycled -------- This Character Was Recycled Into Something New!">
  349.                   <img src="https://file.toyhou.se/images/15991455_3cAZ44gnaFRvheM.png?1565844492" width="50" height="50" />
  350.                   <!-- 5 Award -->
  351.                  
  352.                 </span>
  353.               </div>
  354.               <!------ END AWARDS ------>
  355.              
  356.             </div>
  357.             <!------ END LIKES, DISLIKES, N' AWARDS ------>
  358.            
  359.           </div> <!-- End 675 pixels high div -->
  360.          
  361.         </div> <!-- End Tab 1 -->
  362.        
  363.         <!----------------------------------------------------------- END ABOUT ------------------------------------------------------------>
  364.         <!---------------------------------------------------------- START TRIVIA ----------------------------------------------------------->
  365.        
  366.         <div class="tab-pane fade" id="two"> <!-- Start Tab 2 -->
  367.          
  368.           <div class="card-body p-3 table-responsive" style="max-height:675px"> <!-- This area is 675 pixels high -->
  369.            
  370.             <span style="font-size:22px; color:#0B9758"> Trivia</span> <!-- Writes Trivia at the top -->
  371.            
  372.             <hr class="mt-1 mb-2" style="border-color:#0B9758; border-style:dashed;"> <!-- The lil underline beneath Trivia -->
  373.            
  374.             <!------ START TRIVIA ------>
  375.             <ul>
  376.               <li>Character was created at (TI:ME) on the 5th September 2022.</li>
  377.               <li>Trivia about what their name means.</li>
  378.               <ul>
  379.                 <li>Any extra name trivia.</li>
  380.               </ul>
  381.               <li>Character appears in N AUs: (AU), (AU)</li>
  382.               <li>Trivia about meta-backstory.</li>
  383.               <li>Extra Trivia.</li>
  384.             </ul>
  385.             <!------ END TRIVIA ------>
  386.            
  387.           </div> <!-- End 675 pixels high div -->
  388.          
  389.         </div> <!-- End Tab 1 -->
  390.        
  391.         <!----------------------------------------------------------- END TRIVIA ------------------------------------------------------------>
  392.         <!---------------------------------------------------------- START DESIGN ----------------------------------------------------------->
  393.        
  394.         <div class="tab-pane fade" id="three"> <!-- Start Tab 3 -->
  395.          
  396.           <div class="card-body p-3 table-responsive" style="max-height:675px"> <!-- This area is 675 pixels high -->
  397.            
  398.             <span style="font-size:22px; color:#0B9758;"> Design</span> <!-- Writes Design at the top -->
  399.            
  400.             <hr class="mt-1 mb-2" style="border-color:#0B9758; border-style:dashed;"> <!-- The lil underline beneath Design -->
  401.            
  402.             <!------ START REFERENCE ------>
  403.             <div class="card bg-transparent border-0 rounded-0" style="max-width:600px; margin-left:auto; margin-right:auto;">
  404.               <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/44802365_IHyKSrMA6aaMIOu.jpg"> <!-- Image That Appears On Reference-->
  405.               <a href="#" data-toggle="tooltip" title="full size" style="color:#ffffff; position:absolute; top:2px; right:6px; font-size:17px;"> <i class="fas fa-external-link"></i> </a> <!-- Link To Fullsize Image -->
  406.             </div>
  407.             <!------ END REFERENCE ------>
  408.            
  409.             <div class="row my-3" style="max-width:700px; margin-left:auto; margin-right:auto"> <!-- Div Timmy -->
  410.              
  411.               <!------ START DESIGN NOTES ------>
  412.               <div class="col-12 col-xl-5 mb-3 mb-xl-0">
  413.                
  414.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Hair Type</span>
  415.                 <span class="pull-right">Text</span>
  416.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  417.                
  418.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Hair Colour</span>
  419.                 <span class="pull-right">Text</span>
  420.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  421.                
  422.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Eye Colour</span>
  423.                 <span class="pull-right">Text</span>
  424.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  425.                
  426.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Eye Vibe</span>
  427.                 <span class="pull-right">Text</span>
  428.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  429.                
  430.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Body Type</span>
  431.                 <span class="pull-right">Text</span>
  432.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  433.                
  434.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Skin Tone</span>
  435.                 <span class="pull-right">Text</span>
  436.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  437.                
  438.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Height</span>
  439.                 <span class="pull-right">Text</span>
  440.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  441.                
  442.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Weight</span>
  443.                 <span class="pull-right">Text</span>
  444.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  445.                
  446.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Piercings</span>
  447.                 <span class="pull-right">Yes/No</span>
  448.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  449.                
  450.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Tattoos</span>
  451.                 <span class="pull-right">Yes/No</span>
  452.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  453.                
  454.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Clothing Style</span>
  455.                 <span class="pull-right">Text</span>
  456.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  457.                
  458.                 <span class="badge" style="font-size:14px;border-radius:0px;background-color:#0B9758">Presentation</span>
  459.                 <span class="pull-right">Text</span>
  460.                 <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  461.                
  462.               </div>
  463.              
  464.               <!------ END DESIGN NOTES ------>
  465.              
  466.               <!------ START EXTRA NOTES ------>
  467.              
  468.               <div class="col-12 col-xl-7">
  469.                
  470.                 <span style="font-size:20px;color:#0B9758"> Extra Notes</span>
  471.                 <hr class="mt-0 mb-2" style="border-color:#0B9758; border-style:dashed;">
  472.                
  473.                 <ul>
  474.                   <li>Extra notes.</li>
  475.                   <li>If they have piercings/tattoos, elaborate on that here</li>
  476.                   <li>If they present masculine, are they opposed to feminine clothing and vice versa?</li>
  477.                   <li>Any type of clothing they absolutely won't wear? (IE, Animal fur, denim, etc.)</li>
  478.                 </ul>
  479.                
  480.               </div>
  481.              
  482.               <!------ END EXTRA NOTES ------>
  483.              
  484.               <!------ START COLOUR PALETTE ------>
  485.               <div class="col-12 col-xl-6">
  486.                 <span style="text-align:center;margin-top:auto;margin-bottom:5px;font-size:2em;letter-spacing:2px">
  487.                   <i class="fas fa-coffee" data-toggle="tooltip" title="#0B9758" style="color:#0B9758;"></i>
  488.                   <i class="fas fa-coffee" data-toggle="tooltip" title="#0B9758" style="color:#0B9758;"></i>
  489.                   <i class="fas fa-coffee" data-toggle="tooltip" title="#0B9758" style="color:#0B9758;"></i>
  490.                   <i class="fas fa-coffee" data-toggle="tooltip" title="#0B9758" style="color:#0B9758;"></i>
  491.                   <i class="fas fa-coffee" data-toggle="tooltip" title="#0B9758" style="color:#0B9758;"></i>
  492.                   <i class="fas fa-coffee" data-toggle="tooltip" title="#0B9758" style="color:#0B9758;"></i>
  493.                 </span>
  494.               </div>
  495.               <!------ END COLOUR PALETTE ------>
  496.              
  497.             </div> <!-- End Div Timmy -->
  498.            
  499.           </div> <!-- End 675 pixels high div -->
  500.          
  501.         </div> <!-- End Tab 3 -->
  502.        
  503.         <!----------------------------------------------------------- END DESIGN ------------------------------------------------------------>
  504.         <!------------------------------------------------------- START RELATIONSHIPS -------------------------------------------------------->
  505.        
  506.         <div class="tab-pane fade" id="four">
  507.          
  508.           <div class="card-body p-3 table-responsive" style="max-height:675px">
  509.            
  510.             <span style="font-size:22px;color:#0B9758"> Relationships</span>
  511.            
  512.             <hr class="mt-1 mb-2" style="border-style:dashed;border-color:#0B9758">
  513.            
  514.             <!-- START MATEY ONE -->
  515.             <div class="row">
  516.               <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  517.                 <a href="#" style="font-size:20px; color:#0B9758">  Character</a>
  518.                 <span class="pull-right" style="font-size:17px; color:#0B9758">Friend</span>
  519.                 <hr class="mt-0 mb-2" style="border-style:dashed; border-color:#0B9758">
  520.                 <p>Write about this character and that character's relationship. How did they meet? What did they think of each other? Any note worthy events since then? How do they feel about each other now? Write as much as you want, write a literal novel here for all I care, this scrolls.</p>
  521.               </div>
  522.               <!--image-->
  523.               <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  524.                 <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  525.                   <a data-toggle="tooltip" href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/14602274?1644772373"></a>
  526.                 </div>
  527.               </div>
  528.             </div>
  529.             <hr class="my-2" style="border-style:dashed;border-color:#0B9758">
  530.             <!-- END MATEY ONE -->
  531.            
  532.           </div>
  533.          
  534.         </div>
  535.        
  536.         <!------------------------------------------------------- END RELATIONSHIPS -------------------------------------------------------->
  537.        
  538.       </div> <!-- End Tabs -->
  539.      
  540.     </div> <!-- Sets up The Whole Square On The Right 2 -->
  541.    
  542.   </div> <!-- End The Whole Square On The Right -->
  543.  
  544. </div> <!-- End Tab Content -->
  545.  
  546.  
  547. <!--Credit. You may move it, but please do not delete/remove-->
  548. <div class="text-right w-100">
  549. <a href="https://toyhou.se/15656852.oak-woods-code" target="_blank" class="m-1" style="color:#fff;"><i class="fas fa-code"></i> Code By CrispinAsheYA</a>
  550. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!