dvdexe

MSPA Wiki

Jul 2nd, 2022 (edited)
645
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.68 KB | None
  1. <!----------
  2. layout & code by @dvdexe
  3. based on my wiki theme but customized for MSPA/trolls
  4. suited for long written information or else the sidebar will interrupt the character gallery lol
  5. editing OK but don't claim as your own
  6. infobox images (sign caste, god tier) are linked directly from the wiki
  7. V2: forgot to provide single-image option for infobox
  8. ---------->
  9.  
  10.  
  11. <!------ INFOBOX ------>
  12. <div class="float-md-right ml-md-2 mb-2" style="width:21.5rem">
  13. <div class="card card-outline-muted bg-muted">
  14.  
  15. <!-- CHARACTER NAME -->
  16. <h2 class="card-header text-center d-flex justify-content-between align-items-center">
  17.   <!-- caste --><img src="https://static.wikia.nocookie.net/mspaintadventures/images/e/ea/Scorpio.svg" style="width:30px;height:auto" />
  18.   Vriska Serket
  19.   <!-- title --><img src="https://static.wikia.nocookie.net/mspaintadventures/images/6/68/Light_Aspect.svg" style="width:30px;height:auto" />
  20. </h2>
  21.  
  22. <!-- IMAGE TABS - only default/first image should have "active" class-->
  23. <ul class="nav nav-tabs flex-wrap px-1 pt-1">
  24.   <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#default">Default</a></li>
  25.   <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#eyepatch">Eyepatch</a></li>
  26.   <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#fairy">Fairy</a></li>
  27.   <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#dream">Dream</a></li>
  28.   <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#pirate">Pirate</a></li>
  29.   <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#homosuck">Homosuck</a></li>
  30. </ul>
  31. <!-- IMAGE TAB CONTENT - only default/first image should have "active show" classes -->
  32. <div class="tab-content text-center p-2 card border-top-0 border-right-0 border-left-0 rounded-0 mb-2">
  33.   <div class="tab-pane width-auto active show" id="default">
  34.     <img src="https://static.wikia.nocookie.net/mspaintadventures/images/8/81/Vriska_Serket.png" />
  35.   </div>
  36.   <div class="tab-pane width-auto" id="eyepatch">
  37.     <img src="https://static.wikia.nocookie.net/mspaintadventures/images/1/15/Vriska_eyepatch.png" />
  38.   </div>
  39.   <div class="tab-pane width-auto" id="godtier">
  40.     <img src="https://static.wikia.nocookie.net/mspaintadventures/images/2/26/Vriska%2C_God_Tier%2C_Hood_Down.png" />
  41.   </div>
  42.   <div class="tab-pane width-auto" id="fairy">
  43.     <img src="https://static.wikia.nocookie.net/mspaintadventures/images/e/ed/Vriskawendy.png" />
  44.   </div>
  45.   <div class="tab-pane width-auto" id="dream">
  46.     <img src="https://static.wikia.nocookie.net/mspaintadventures/images/8/81/Vriskadream.png" />
  47.   </div>
  48.   <div class="tab-pane width-auto" id="pirate">
  49.     <img src="https://static.wikia.nocookie.net/mspaintadventures/images/0/0d/Piratevriska.png" />
  50.   </div>
  51.   <div class="tab-pane width-auto" id="homosuck">
  52.     <img src="https://static.wikia.nocookie.net/mspaintadventures/images/8/87/Homosuck_Vriska.png" />
  53.   </div>
  54. <!-- IF ONLY ONE IMAGE - delete the whole image tab section above and remove the comment tags from below -->
  55. <!-- <div class="text-center p-2 card border-top-0 border-right-0 border-left-0 rounded-0 mb-2">
  56. <div class="width-auto">
  57.  <img src="https://static.wikia.nocookie.net/mspaintadventures/images/8/81/Vriska_Serket.png" />
  58. </div> -->
  59.  
  60.  
  61. <!-- INFOBOX QUOTE -->  
  62. <div class="pt-2" style="color:#005682">
  63.   And you don't have to 8e a good person to 8e a hero.
  64. </div></div>
  65.  
  66. <!-- FIELDS // copy+paste col-4/8 rows as needed -->
  67. <div class="row mb-2">
  68.   <div class="col-4 pl-4 font-weight-bold">AKA</div>
  69.   <div class="col-8 pr-4 pb-2">Marquise Spinneret Mindfang, marquise bossyfangs mcsekret, spider)(ag, spidertroll, fishska, vwiskers</div>
  70.   <div class="col-4 pl-4 font-weight-bold">Title</div>
  71.   <div class="col-8 pr-4 pb-2">Thief of Light</div>
  72.   <div class="col-4 pl-4 font-weight-bold">Age</div>
  73.   <div class="col-8 pr-4 pb-2"><b>Introduction:</b><br />
  74. 6 Alternian solar sweeps/ 13 Earth years<br />
  75. <b>(Vriska)/Dead retconned self:</b><br />
  76. 6 Alternian solar sweeps/ 13 Earth years<br />
  77. <b>Act 7:</b><br />
  78. 7.38 sweeps /16 Earth Years<br />
  79. <b>Credits:</b><br />
  80. 7.38 sweeps /16 Earth Years</div>
  81.   <div class="col-4 pl-4 font-weight-bold">Screen name</div>
  82.   <div class="col-8 pr-4 pb-2">arachnidsGrip</div>
  83.   <div class="col-4 pl-4 font-weight-bold">Typing style</div>
  84.   <div class="col-8 pr-4 pb-2">Replaces "b" and "eight sounds" with the number 8, multiplies vowels and ending punctuation by 8 for emphasis, uses 4 colons (8 eyes) for smilies. When frustrated, replaces vowels with the letter 8 more liberally, as seen when confronting ghost Aradia.</div>
  85.   <div class="col-4 pl-4 font-weight-bold">Strife Specibi</div>
  86.   <div class="col-8 pr-4 pb-2">Dicekind</div>
  87.   <div class="col-4 pl-4 font-weight-bold">Fetch modus</div>
  88.   <div class="col-8 pr-4 pb-2">8-Ball</div>
  89.   <div class="col-4 pl-4 font-weight-bold">Relations</div>
  90.   <div class="col-8 pr-4 pb-2">Marquise Spinneret Mindfang - Ancestor<br />
  91. Aranea Serket - Dancestor<br />
  92. "Spidermom" - Lusus</div>
  93.   <div class="col-4 pl-4 font-weight-bold">Planet</div>
  94.   <div class="col-8 pr-4 pb-2">Land of Maps and Treasure</div>
  95.   <div class="col-4 pl-4 font-weight-bold">Music</div>
  96.   <div class="col-8 pr-4">
  97.     <a href="/">Spider's Claw <i class="fa fa-music" /></a><br />
  98.     <a href="/">MeGaLoVania <i class="fa fa-music" /></a><br />
  99.     <a href="/">Vriska's Theme <i class="fa fa-music" /></a><br />
  100.     <a href="/">Killed By BR8K Spider!!!!!!!! <i class="fa fa-music" /></a><br />
  101.     <a href="/">She's a Sp8der <i class="fa fa-music" /></a><br />
  102.     <a href="/">Spider8reath <i class="fa fa-music" /></a><br />
  103.     <a href="/">Do You Remember Me <i class="fa fa-music" /></a><br />
  104.     <a href="/">Cobalt Thief <i class="fa fa-music" /></a><br />
  105.     <a href="/">Superego <i class="fa fa-music" /></a><br />
  106.     <a href="/">Moonsetter <i class="fa fa-music" /></a><br />
  107.     <a href="/">Castle <i class="fa fa-music" /></a>
  108.   </div>
  109. </div>
  110. <!------ END INFOBOX ------>
  111. </div></div>
  112.  
  113.  
  114. <!------ INTRODUCTION ------>
  115. <p><b>Vriska Serket</b>, also known by her Trollian handle <b style="color:#005682">arachnidsGrip</b>, is one of the trolls. She was the eighth troll to be introduced, which also refers to her theme and obsession with the number eight. Her handle relates to her in two main ways. One, <span style="color:#005682">arachnids</span>, refers to her interest in and fascination for spiders. The <span style="color:#005682">Grip</span> part of the handle most likely represents her power to have a grip on someone's mind, or control it. Her associated zodiac sign is Scorpio (♏) and her horns are shaped like a pincer and a stinger.</p>
  116.  
  117. <!------ TABLE OF CONTENTS // credit to @lowkeywicked for toggle base code ------>
  118. <div class="card bg-faded card-outline-default p-2" style="width:15rem">
  119. <h6 class="p-2 mb-0 d-flex justify-content-between"><span><i class="fa-solid fa-list pr-2" />Contents</span>
  120. <small>[<a class="px-1" data-toggle="collapse" href="#tocshow2">toggle</a>]</small></h6>
  121. <ol class="collapse p-2 pt-0 pl-4 rounded-bottom mb-0" id="tocshow2">
  122. <!-- TOC LINKS -->
  123.   <li><a href="#etymology">Etymology</a></li>
  124.   <li><a href="#biography">Biography</a></li>
  125.   <li><a href="#personality-traits">Personality and Traits</a></li>
  126.   <li><a href="#relationships">Relationships</a></li>
  127.   <!-- subsection links -->
  128.   <ol class="pl-3" style="list-style-type:lower-alpha">
  129.     <li><a href="#terezi-pyrope">Terezi Pyrope</a></li>
  130.     <li><a href="#john-egbert">John Egbert</a></li>
  131.   </ol>
  132.   <li><a href="#trivia">Trivia</a></li>
  133. </ol></div>
  134.  
  135. <!------ ETYMOLOGY ------>
  136. <div class="profile-fields-title mt-2">
  137.   <a id="etymology" /><h2>Etymology </h2>
  138. </div>
  139. <div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div><!-- divider/hr line -->
  140.   <p>"Vriska" was suggested by Terin. "Serket" was suggested by Chin Music. Vriska is a shortening of "Vrishchika", the Hindi name for Scorpio, or could be related to "Vṛścika" the Sanskrit word for scorpion, but could also refer to Kalpavriksha, a wish-fulfilling tree below the fourth chakra according to Zentra Yoga. This tree is said to fulfil both positive and negative wishes, again corresponding with the duality of Vriska's personality. Her name could also be a reference to the Planescape: Torment character Vrischika. Both characters are bossy, winged, have travelled throughout several universes, and are associated with the color blue.</p>
  141.   <p>Her surname is taken from "Serket", the Egyptian goddess of healing stings and bites, and also the personification of the scorpion. It means both "(she who) tightens the throat", a reference to paralysis caused by scorpion stings, and "(she who) causes the throat to breathe", meaning that Serket was one who could cure scorpion stings and the effects of other poisons such as snake bites. Serket was conflictingly associated with stings or bites and with the cures to such maladies, mirroring the duality of Vriska's personality - she alternates between seriously injuring other trolls and helping them, or at least attempting to do so.</p>
  142.  
  143. <!------ BIOGRAPHY ------>
  144. <div class="profile-fields-title mt-2">
  145.   <a id="biography" /><h2>Biography</h2>
  146. </div>
  147. <div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div><!-- divider/hr line -->
  148.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  149.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  150.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  151.  
  152. <!------ PERSONALITY ------>
  153. <div class="profile-fields-title mt-2">
  154.   <a id="personality-traits" /><h2>Personality and Traits</h2>
  155. </div>
  156. <div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div><!-- divider/hr line -->
  157.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  158.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  159.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  160.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  161.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  162.  
  163. <!------ RELATIONSHIPS ------>
  164. <div class="profile-fields-title mt-2">
  165.   <a id="relationships" /><h2>Relationships</h2>
  166. </div>
  167. <div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div><!-- divider/hr line -->
  168.   <a id="terezi-pyrope" /><h4 class="mb-1">@@15058668</a></h4>
  169.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  170.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  171.   <a id="john-egbert" /><h4 class="mb-1">@@15058668</a></h4>
  172.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  173.   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  174.  
  175. <!------ TRIVIA ------>
  176. <div class="profile-fields-title mt-3">
  177.   <a id="trivia" /><h2>Trivia</h2>
  178. </div>
  179. <div class="card border-top-0 border-right-0 border-left-0 rounded-0 mb-1" style="height:1px"> </div><!-- divider/hr line -->
  180. <ul class="pl-4">
  181.   <li>List item 1</li>
  182.   <li>List item 2</li>
  183.   <li>List item 3</li>
  184. </ul>
RAW Paste Data Copied