Dec 27th, 2018
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="container-fluid" style="color:#333;">
  2.     <div class="row" style="background-color:#eee;padding:10px;">
  3.         <div class="col col-lg-4" style="margin-bottom:10px;">
  4.             <div class="row" style="background-color:white;padding:10px;margin-bottom:10px;">
  6.                 <!-- THUMBNAIL: Change the URL to your preferred image, 300px in height for best results -->
  7.                 <div style="height:300px;width:35%;display:inline-block;background-size:cover; background-repeat:no-repeat;background-color:white;background-position:center; background-image:url("
  8.                ><br></div>
  10.                 <!-- INFO BOXES -->
  11.                 <div style="width:63%;margin-left:2%;display:inline-block;float:right;">
  12.                     <!-- Change the URL below to change the card's background -->
  13.                     <div class="card" style="padding:20px;background-image:url(; background-color:#333;font-size:24pt;color:white;text-align:center;"><div class="card-body">Vaira Smythe</div></div>
  14.                     <div style="margin-top:8px; background-color:white;">
  16.                         <table style="border:none;font-size:9pt;width:100%;border-collapse:separate;border-spacing:3px;">
  17.                             <tbody>
  18.                                 <tr style="margin-top:5px;">
  19.                                     <td style="text-align:right;padding:5px;">Also known as</td>
  20.                                     <td style="background-color:#666;color:white;text-align:left;padding:5px;">Character's aliases</td>
  21.                                 </tr>
  23.                                 <tr style="margin-top:5px;">
  24.                                     <td style="text-align:right;padding:5px;">Age</td>
  25.                                     <td style="background-color:#666;color:white;text-align:left;padding:5px;">27</td>
  26.                                 </tr>
  28.                                 <tr style="margin-top:5px;">
  29.                                     <td style="text-align:right;padding:5px;">Gender</td>
  30.                                     <td style="background-color:#666;color:white;text-align:left;padding:5px;">She/Her</td>
  31.                                 </tr>
  33.                                 <tr style="margin-top:5px;">
  34.                                     <td style="text-align:right;padding:5px;">Marital Status</td>
  35.                                     <td style="background-color:#666;color:white;text-align:left;padding:5px;">Taken</td>
  36.                                 </tr>
  37.                             </tbody>
  38.                         </table>
  39.                     </div>
  40.                 </div>
  41.             </div>
  43.             <!-- CHARACTER SHEET/MOODBOARD -->
  44.             <div class="row text-center" style="background-color:white;padding:10px;margin-bottom:10px;">
  45.                 <div class="col">
  46.                     <!-- CHANGE THESE URLS TO LINK TO YOUR PREFERRED IMAGE -->
  47.                     <a href="URL"><img src="IMAGE URL" style="height:400px;"/></a>
  48.                 </div>
  49.             </div>
  51.             <div class="row text-center" style="background-color:white;padding:10px;margin-bottom:10px;text-align:center;">
  52.                 <div class="col">
  53.                     <p style="text-align: center;"><a href=""><i class="fas fa-code"></i></a></p>
  54.                 </div>
  55.             </div>
  57.         </div>
  59.         <div class="col col-lg-8 tab-content" style="padding:0 0 0 10px;">
  63.             <!--- NAVIGATION --->
  64.             <div role="navigation">
  65.               <ul class="nav nav-tabs" style="border-bottom:none;">
  66.                 <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#personality" style="border:none;">Personality</a></li>
  67.                 <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#story" style="border:none;">Story</a></li>
  68.                 <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#likes" style="border:none;">Likes and Dislikes</a></li>
  69.                 <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#facts" style="border:none;">Facts</a></li>
  70.                 <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#appearance" style="border:none;">Appearance</a></li>
  71.               </ul>
  72.             </div>
  74.             <!-- PERSONALITY TAB -->      
  75.             <div id="personality" class="tab-pane table-responsive show active" style="box-sizing:border-box;width:100%; max-height: 500px; background-color:white;padding:10px;"><div class="ui-accordion-content">
  76.                 <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#7e5fcd;">Personality</div>
  77.                 <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">
  78. <center>
  79. <p>INFJ | She/Her | Multipotentialite
  80. <br><br>
  81. • Writer • Artist • Depressed Mess • <br>
  82. • INFJ • Hufflepuff • Dog Petting Enthusiast • <br>
  83. <br><br>
  85. <table class="table table-borderless">
  86.       <tr>
  87.         <td>
  88. <span style="font-family:calibri;font-size:11px;"><b>Strengths</b></span><br>
  89. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Creative</span><br>
  90. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Insightful</span><br>
  91. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Determined</span><br>
  92. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Passionate</span><br>
  93. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Altruistic</span><br>
  94. <span style="font-family:calibri;font-size:11px;">Honest, honorable, strong-willed. Versatile, adaptable. Sharp intellect. She likes literature, adapts to all situations and social groups. Enthusiastic, humorous, and sometimes moralistic. She has strong opinions, and often shares them! Democrat, philosopher, tolerant, respectful of laws. Interested in foreign places and learning more languages. Believes that everything teaches you something.</span><br>
  95. </td>
  96. <td>&nbsp; &nbsp; &nbsp; &nbsp; </td>
  97. <td>
  98. <span style="font-family:calibri;font-size:11px;"><b>Weaknesses</b></span><br>
  99. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Sensitive</span><br>
  100. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Extremely Private</span><br>
  101. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Perfectionistic</span><br>
  102. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Always Need to Have a Cause</span><br>
  103. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Can Burn Out Easily</span><br>
  104. <span style="font-family:calibri;font-size:11px;">Sometimes a bitter and mistrustful mind. Can be moody and irritable. “Grass is always greener…”. Indecisive. When irritable, can be snappy. Lack of follow-up of ideas, indecision, goes back on decisions. Melancholy, sullenness, disappointment and bitterness. Vaira has a hair-trigger temper and may even resort to verbal or physical abuse when upset. Learning to react to unpleasant circumstances with her intellect rather than her emotions comes with maturity.</span><br>
  105. </td>
  106.       </tr>
  107.   </table>
  108. </center>
  110. <br>
  111. Though soft-spoken, she has very strong opinions and will fight tirelessly for an idea she believes in. Vaira is decisive and strong-willed, but will rarely use that energy for personal gain – She will act with creativity, imagination, conviction and sensitivity not to create advantage, but to create balance. Egalitarianism and karma are very attractive ideas to Vaira.
  112. <br>
  113. Vaira suffers from depression, which can alter the way things are perceived. She tries her best to move forward, but little things can sometimes be a stumbling block for days.
  114. <br>
  115.     She feels like her passion has been swallowed by depression a lot of the time. Vaira often feels like she's unworthy or that things are not worth the effort - but finding the little things to cling to are very important. She doesn't feel joy as often, the right medication for her depression hasn't been found yet. She hopes that it will come soon.
  116. <br><br>
  117.     Vaira is a feet-on-the-ground, eye-on-the-prize woman. She has a realistic, grounded approach to life that can be seen no matter how dreamy the rest of her seems. Vaira wants to do and be something worthwhile. She needs to feel useful and effective in the real world in order to be satisfied.
  118. <br>Vaira doesn’t mind taking things slowly, but she aims to get to the top. As long as she has a direction she will steadily plod her way towards it. She can be a lonely person, though she rarely lets it show. Sometimes reserved—even standoffish. Strong sense of tradition and responsibility.
  119. <br>Her humour can be of the deadpan variety, but she can be bitingly sarcastic as well. Vaira values the ‘tried and true’ but is not a stick in the mud – she values the work of those that have paved the way before. You can turn to Vaira when you need to really get things done. She’ll have practical advice, and she’ll help you organize and manage your life a little better.
  120. <br>Vaira is a humanitarian who aims to treat everyone as equals. She seeks to be unique and original, and she does her best to avoid bias and prejudice. Social status is less important to her than belonging to a group of diverse personalities. Vaira’s identity, in fact, is somehow linked to a larger unit than herself. She has high hopes and goals and tends to look at life in terms of opportunities. People sense your broad tolerance and openness, which brings all sorts gravitating towards her.
  121. <br>It is natural for Vaira to question tradition. She is, above all things, an individualist. It doesn't mean that she consistently breaks all the rules, but she definitely does question some of the rules, especially those that simply don't make much sense. She possesses a huge distaste for routine. Vaira works best when she has some say as to when and how she gets things done. Vaira avoids labeling people and are most offended when others attempt to label or stereotype her.
  122. <br>Vaira easily embraces new ways of doing things, she sticks up for the underdog, and she expresses herself in unique and inspiring ways. She doesn’t have to try to stand out as unique—she is original, creative, and progressive without trying. She is far from pretentious. Vaira values honesty and truth, and she avoids putting on airs. Vaira believes in the equality of people, and easily relate to people from all walks of life. Vaira is generally appreciated by others because she is open-minded, fair, and not judgmental. Nothing really seems to faze her! She takes things in stride and are rarely shocked or taken aback by human behavior.
  123. <br>Vaira has a finger in every pie, is curious to a fault, and is generally well-informed. Nervousness and worry are common as well. There is an unmistakably dreamy, inspired, and sensitive side to Vaira. A marked appreciation for music and the arts is present. Vaira reads a lot. She has a tendency to analyze can give the appearance of emotional detachment. In fact, Vaira may be especially comfortable talking about their feelings, but feeling her own feelings doesn't come as easily. If Vaira doesn’t take time out to really emote and understand her own needs… she may end up baffling others.
  124. <br><br>
  125. There is a conflict here between the head and the heart. Her emotions tell her one thing and her mind tells her something else. The result is a see-saw effect: she can be emotional to the point of irrationality at one moment, and logical the next. How to blend the head and the heart is a constant struggle for Vaira, usually because she has a tendency to resist blending them! People can usually read her mood by how much she’s talking. When nervous or excitable, Vaira talks up a storm. She has a tendency to misrepresent herself with what she says from time to time, but Vaira is a charming, if a little kooky, friend. Vaira is big on romance and she tends to live and breathe her partner once she’s hooked. Not the best at defining her boundaries -- where her needs and her partner's needs separate -- She can get hurt in love rather easily. She can also feel used quite readily.
  126. <br>Vaira’s imagination is rich and her fantasy world well-developed. She is turned off by rudeness and crudeness, and is drawn to beauty in its many forms. She are very giving and generous, but may be a little on the submissive side, or sometimes downright lazy, failing to take the initiative when situations call for it.
  127. <br>Her emotional and sex life is powerful and rich. She lives out truly passionate love affairs.
  128. <br>Vaira speaks herr mind quite readily, sometimes shooting from the hip when it comes to expressing her ideas and opinions. She knows a lot about a variety of subjects, and likes to share that knowledge with others (sometimes too forcefully!). Vaira is generally very direct and clear when it comes to communicating. She can easily get worked up about what others might think are trivial matters. Whether she knows it or not, or no matter her intentions, she can be provocative in her communication style. She is gifted with manual dexterity, although she sometimes becomes impatient with tasks. At her best, she is enthusiastic, animated, and lively in the way she expresses herself, and this can inspire others. Vaira will fervently defend her opinions and beliefs, as well as her family and childhood.
  129. <br>Very easy for her to find the negatives in a situation.
  130. <br><br>
  131. <br>Her freedom is important to her, even with regard to friends. These are extravagant, original, intellectual. They are not from the same background and have a different up-bringing. Friendships are unselfish, and often wants to belong to a group of like-minded people. She generally gives others quite a bit of freedom--accepting, as a rule, people from all walks of life as equals. And, her somewhat cool and detached curiosity about all that goes on around her appeals to most.
  132. <br>Because Vaira seems so open to new ideas, it may be surprising when you encounter her decidedly stubborn streak. With her eye to the future of mankind as a whole, sometimes she overlook the more personal needs of the people closest to her. But never with malicious intent.</p>
  133. <br><br>
  135. </div>
  138.                 </div>
  139.             </div>
  142.             <div id="story" class="tab-pane table-responsive" style="box-sizing:border-box;width:100%; max-height: 500px; background-color:white;padding:10px;">
  143.                 <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#7e5fcd;">Story</div>
  144.                 <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">
  145.                     <p>When I was little, EVERY Halloween I would want to dress up as a witch.<br>
  146. "Don't you want to be something else this year?"<br>
  147. "No!"<br>
  148. "But witches are mean and-"<br>
  149. "Not every witch! I'm a good witch!"<br>
  150. <br>
  151. Etc. etc.<br>
  152. <br>
  153. In early high school someone passed me a book, I wish I remembered what it was called, but it was basically a Witchcraft 101 kinda book. After that I started researching.<br>
  154. I could BE a powerful person, I could HELP people! I just needed to know how! I consumed as much content as I could after HS - bussing to all the various libraries I could get to. Most books were all 'basic witch' stuff but I took notes dutifully.<br>
  155. <br>
  156. I didn't really do any spells for me - mostly making things for others. Like a confidence jar for my sister handing in her resignation letter and such.<br>
  157. <br>
  158. And I learned about the idea that witchcraft was basically the placebo effect in action and... I haven't really done anything since. My grimoire is gone but I think I might... try again?<br>
  159. <br>
  160. I asked my pendulum a bunch of questions years ago when I was under a depressive spell to try to 'set' the way it swung. Up and down was yes, side to side was no. I asked my name, my mom's name, my job, throwing in incorrect things to make sure it worked properly....<br>
  161. Then I asked, "Am I a witch?"<br>
  162. <br>
  163. It hesitated.<br>
  164. <br>
  165. I held my breath.<br>
  166. <br>
  167. Then it vigorously swung up and down and I sobbed like a baby.<br>
  168. <br>
  169. That was years ago... I've recently come back to the craft.</p>
  170.                 </div>
  171.             </div>
  173.             <!-- LIKES TAB -->
  174.             <div id="likes" class="tab-pane table-responsive" style="box-sizing:border-box;width:100%; max-height: 500px; background-color:white;padding:10px;">
  175.             INFORMATION HERE
  176. <br><br>
  177. <div class="row">
  178.                                 <div class="col">
  179.                                     <div class="card-header" style="background:#7e5fcd;color:#f8f8f8;text-align:center;">
  180.                                         <span style="font-size:14px;font-family:calibri;">Likes</span>
  181.                                     </div>
  184.                                     <div class="card; table-responsive" style="background:#fbfbfb;border:1px solid #dfdfdf;color:#24272b;height:150px;">
  185.                                         <div class="card-block">
  186.                                             <span style="font-family:calibri;font-size:11px;">
  187.                                             <i class="fas fa-check-circle"></i> Dogs<br>
  188.                                             <i class="fas fa-check-circle"></i> Hot Chocolate<br>
  189.                                             <i class="fas fa-check-circle"></i> Drawing<br>
  190.                                             <i class="fas fa-check-circle"></i> Jade Plants & Crystals<br>
  191.                                            <i class="fas fa-check-circle"></i> Organizing<br>
  192.                                            </span>
  193.                                        </div></div></div>
  195.                                <div class="col">
  196.                                    <div class="card-header" style="background:#7e5fcd;color:#f8f8f8;text-align:center;">
  197.                                         <span style="font-size:14px;font-family:calibri;">Dislikes</span>
  198.                                     </div>
  201.                                     <div class="card; table-responsive" style="background:#fbfbfb;border:1px solid #dfdfdf;color:#24272b;height:150px;">
  202.                                         <div class="card-block">
  203.                                             <span style="font-family:calibri;font-size:11px;">
  204.                                             <i class="fas fa-times-circle"></i> Nazi's, TERFS, SWERFS, bigots<br>
  205.                                             <i class="fas fa-times-circle"></i> Man-babies<br>
  206.                                             <i class="fas fa-times-circle"></i> Most humans<br>
  207.                                             <i class="fas fa-times-circle"></i> Sudden loud noises<br>
  208.                                             <i class="fas fa-times-circle"></i> Horror films<br>
  209.                                               </span>
  211. </div></div></div></div>
  212. </div>
  215.             <!-- FACTS TAB -->
  216.             <div id="facts" class="tab-pane table-responsive" style="box-sizing:border-box;width:100%;background-color:white; max-height: 500px; padding:10px;">
  217.                 <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#7e5fcd;">Facts</div>
  218.                 <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">
  220.     <div style="box-sizing:border-box;display:inline-block;padding:5px;text-transform:uppercase;width:100%;font-size:14pt;color:white;background-color:#7e5fcd;">Abilities</div>
  221.                 <div style="display:inline-block;padding:5px;box-sizing:border-box;width:100%;margin-top:10px;">
  222.                 <!----------- START ABILITIES ----------->
  223.                                         <span style="font-family:calibri;font-size:12px;">Strength, measuring physical power</span><br>
  224.                                         <div class="progress" style="border:none;background:#dfdfdf;">
  225.                                             <div class="progress-bar" style="width:20%;background:#bdc0c3;">
  226.                                                 <br>
  227.                                             </div>
  228.                                         </div>
  231.                                         <span style="font-family:calibri;font-size:12px;">Dexterity, measuring agility</span><br>
  232.                                         <div class="progress" style="border:none;background:#dfdfdf;">
  233.                                             <div class="progress-bar" style="width:30%;background:#bdc0c3;">
  234.                                                 <br>
  235.                                             </div>
  236.                                         </div>
  239.                                         <span style="font-family:calibri;font-size:12px;">Constitution, measuring endurance</span><br>
  240.                                         <div class="progress" style="border:none;background:#dfdfdf;">
  241.                                             <div class="progress-bar" style="width:65%;background:#bdc0c3;">
  242.                                                 <br>
  243.                                             </div>
  244.                                         </div>
  247.                                         <span style="font-family:calibri;font-size:12px;">Intelligence, measuring reasoning and memory</span><br>
  248.                                         <div class="progress" style="border:none;background:#dfdfdf;">
  249.                                             <div class="progress-bar" style="width:70%;background:#bdc0c3;">
  250.                                                 <br>
  251.                                             </div>
  252.                                         </div>
  255.                                         <span style="font-family:calibri;font-size:12px;">Wisdom, measuring Perception and Insight</span><br>
  256.                                         <div class="progress" style="border:none;background:#dfdfdf;">
  257.                                             <div class="progress-bar" style="width:80%;background:#bdc0c3;">
  258.                                                 <br>
  259.                                             </div>
  260.                                         </div>
  263.                                         <span style="font-family:calibri;font-size:12px;">Charisma, measuring force of personality</span><br>
  264.                                         <div class="progress" style="border:none;background:#dfdfdf;">
  265.                                             <div class="progress-bar" style="width:60%;background:#bdc0c3;">
  266.                                                 <br>
  267.                                         </div>
  268.                                         </div>
  269. <!----------- END ABILITIES ----------->
  271. <br><br>
  272.                         <div class="card-header" style="background:#7e5fcd;color:#f8f8f8;text-align:center;">
  273.                                 <span style="font-size:14px;font-family:calibri;">Trivia</span>
  274.                             </div>
  275.                             <div class="card; table-responsive" style="background:#fbfbfb;border:1px solid #dfdfdf;color:#24272b;height:200px;">
  276.                                 <div class="card-block">
  277.                                     <span style="font-family:calibri;font-size:11px;">
  279. <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> The name Vaira first came from a homebrew dragon-hybrid D&D character. Her Toyhouse page<a href=""> here</a>.</span>
  280.                                    <br>
  281.                                    <span style="font-family:calibri;font-size:11px;"><i class="fas fa-star"></i> Vaira Smythe is a self-insert in an alternate-reality Voltron. She's married to Coran Smythe, which is how I got my FULL username. Her Toyhouse page<a href=""> here</a>.</span>
  283.                                       </span>
  285.                 </div>
  286.             </div>
  287.         </div></div></div>
  289. <!-- Appearance TAB -->
  290.             <div id="appearance" class="tab-pane table-responsive" style="box-sizing:border-box;width:100%; max-height: 500px; background-color:white;padding:10px;">
  291.             INFORMATION HERE
  292. <br><br>
  293. <div class="row">
  294.                                 <div class="col">
  295.                                     <div class="card-header" style="background:#7e5fcd;color:#f8f8f8;text-align:center;">
  296.                                         <span style="font-size:14px;font-family:calibri;">Minor Details</span>
  297.                                     </div>
  299.                                     <div class="card; table-responsive" style="background:#fbfbfb;border:1px solid #dfdfdf;color:#24272b;height:150px;">
  300.                                         <div class="card-block">
  301.                                             <span style="font-family:calibri;font-size:11px;">
  302.                                             <i class="fas fa-star"></i> Piercings: All studs. Two on each lobe, one helix on left ear<br>
  303.                                             <i class="fas fa-star"></i> Tattoos: 3 raindrops on back of neck. Expecto Patronum on right foot.<br>
  304.                                             <i class="fas fa-star"></i> Skin: Faint freckles on nose, cheeks, and shoulders.<br>
  305.                                             </span>
  306.                                         </div></div></div>
  308.                                 <div class="col">
  309.                                     <div class="card-header" style="background:#7e5fcd;color:#f8f8f8;text-align:center;">
  310.                                         <span style="font-size:14px;font-family:calibri;">Major Details</span>
  311.                                     </div>
  314.                                     <div class="card; table-responsive" style="background:#fbfbfb;border:1px solid #dfdfdf;color:#24272b;height:150px;">
  315.                                         <div class="card-block">
  316.                                             <span style="font-family:calibri;font-size:11px;">
  317.                                             <i class="fas fa-star"></i> Race: Caucasian (Sooo pale)<br>
  318.                                             <i class="fas fa-star"></i> Height / Weight: 5'2" / ~200lbs (don't own a scale)<br>
  319.                                             <i class="fas fa-star"></i> Hair: Red (Penny copper, not Weasley red)<br>
  320.                                             <i class="fas fa-star"></i> Eyes: Green (Grey-Green)<br>
  321.                                             <i class="fas fa-star"></i> Build: Pear-Shaped<br>
  322.                                               </span>
  324. </div></div></div></div>
  326. </DIV>
  331. </div>
RAW Paste Data