Advertisement
Guest User

Untitled

a guest
Jan 17th, 2020
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.14 KB | None | 0 0
  1. <!--------------------------
  2. --
  3. -- Default custom accent color is #cc828a
  4. -- use find & replace in a word processor to quickly change all hex codes
  5. --
  6. --------------------------->
  7.  
  8. <div class="container px-0"><div class="row no-gutters mb-2">
  9. <div class="col-lg-4 col-md-5 pr-md-2 mb-md-0 mb-2">
  10.  
  11. <!-------- FOCAL IMAGE -- WILL SCALE & CROP WITH SCREEN -- FOCUS IN TOP CENTER ------------------>
  12. <div class="rounded card-block bg-faded h-100" style="background-image:url(https://cdn.discordapp.com/attachments/613890428034482191/663378526942265344/unknown.png); background-size: cover; repeat:no-repeat; background-position: top center; min-height: 400px;"><br></div>
  13. </div>
  14.  
  15. <div class="col-lg-8 col-md-7">
  16. <ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
  17. <li class="nav-item col mr-1 mb-2">
  18. <a class="btn btn-default border-0 nav-link active" data-toggle="tab" href="#ONE">
  19. Intro
  20. </a>
  21. </li>
  22. <li class="nav-item col mx-1 mb-2">
  23. <a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#FOUR">
  24. Design Notes
  25. </a>
  26. </li>
  27. <li class="nav-item col mx-1 mb-2">
  28. <a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#TWO">
  29. About
  30. </a>
  31. </li>
  32. <li class="nav-item col ml-1 mb-2">
  33. <a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#THREE">
  34. Links
  35. </a>
  36. </li>
  37. </ul>
  38.  
  39. <div class="rounded bg-faded tab-content">
  40.  
  41. <!------------------------------------ FIRST TAB ------------------------------------------------------------->
  42. <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
  43. <div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
  44. <h1 style="color: #cc828a; letter-spacing:1px;" class="display-4 text-uppercase mb-3">
  45. <i class="fal fa-star fa-fw pull-right" /> Basics
  46. </h1>
  47.  
  48. <div class="row">
  49. <div class="col-sm-6">
  50. <span class="text-uppercase text-muted">Name</span>
  51. <span class="pull-right">Nathaniel</span>
  52. <hr class="my-2">
  53. </div>
  54. <div class="col-sm-6">
  55. <span class="text-uppercase text-muted">Called</span>
  56. <span class="pull-right">Noel</span>
  57. <hr class="my-2">
  58. </div>
  59. <div class="col-sm-6">
  60. <span class="text-uppercase text-muted">Age</span>
  61. <span class="pull-right">???</span>
  62. <hr class="my-2">
  63. </div>
  64. <div class="col-sm-6">
  65. <span class="text-uppercase text-muted">Gender</span>
  66. <span class="pull-right">Male</span>
  67. <hr class="my-2">
  68. </div>
  69. <div class="col-sm-6">
  70. <span class="text-uppercase text-muted">Race</span>
  71. <span class="pull-right">Demon</span>
  72. <hr class="my-2">
  73. </div>
  74. <div class="col-sm-6">
  75. <span class="text-uppercase text-muted">Birthday</span>
  76. <span class="pull-right">17th of August</span>
  77. <hr class="my-2">
  78. </div>
  79. <div class="col-sm-6">
  80. <span class="text-uppercase text-muted">Voice</span>
  81. <span class="pull-right"><a href="https://sp.nicovideo.jp/watch/sm34973316?cp_in=wt_mllst" style="color:#cc828a;" target="_BLANK">志麻</a> </span>
  82. <hr class="my-2 hidden-md-up">
  83. </div>
  84. <div class="col-sm-6">
  85. <span class="text-uppercase text-muted">Theme</span>
  86. <span class="pull-right"> <a href="https://youtu.be/3_r9KsfdgpU" style="color: #cc828a;" target="_BLANK">Peacock Epoch </a></span>
  87. </div>
  88. </div>
  89.  
  90. <div>
  91. <hr class="mt-2 mb-3">
  92. <p class="text-center mb-0"> Nathaniel is your typical playboy looking guy, a charming fellow that's pleasant to be around with. He's usually found around town or in nightclubs, which often end in his various one night stands with people. Not much else is known about him, since he barely talks about his origins and such, however, whenever someone stubborn keeps asking him about it, every answer they get will most likely sound like a joke. </p>
  93. <hr class="mt-3 mb-2">
  94. </div>
  95.  
  96. <!------------------------------- LIKES & DISLIKES ----------------------------------->
  97. <div class="row">
  98. <div class="col-sm-6 mb-2">
  99. <p class="text-uppercase text-muted">
  100. <i class="fal fa-heart fa-fw"></i> Likes
  101. </p>
  102. <ul class="mb-0">
  103. <li class="mb-2">Cocktails.</li>
  104. <li class="mb-2">Ambient music.</li>
  105. <li class="mb-2">Watching Scenery</li>
  106. <li class="mb-2">Body contact.</li>
  107. </ul>
  108. </div>
  109. <div class="col-sm-6 mb-2">
  110. <p class="text-uppercase text-muted">
  111. <i class="fal fa-times fa-fw"></i> Dislikes
  112. </p>
  113. <ul class="mb-0">
  114. <li class="mb-2">Excessively believing people.</li>
  115. <li class="mb-2">Strict rule followers.</li>
  116. <li class="mb-2">Fights.</li>
  117. <li class="mb-2">Unwanted drama about him.</li>
  118. </ul>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123.  
  124. <!------------------------------------ DESIGN NOTES TAB ------------------------------------------------------------->
  125. <div class="tab-pane fade" data-toggle="tab" id="FOUR">
  126. <div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
  127. <h1 class="display-4 text-uppercase mb-3" style="color: #cc828a; letter-spacing:1px;">
  128. <i class="fal fa-book fa-fw pull-right"></i>Design Notes
  129. </h1>
  130.  
  131. <p>‣His eyes are relatively big, but he keeps them in a playful and slanted look most of the time.</p>
  132. <p>‣His pink hair is kind of messy or wavy looking, curling around some parts of his head.</p>
  133. <p>‣The length of his hair only reaches slightly above his ears.</p>
  134. <p>‣His eyes are black with a sharp white iris.</p>
  135. <p>‣His usual clothes aren't 100% black, they have a slight red tint to them.
  136. <p>He is <b>NOT</b> an Incubus or anything of the like just because he seems playful!! Thats just part of his personality, please just think of him as a regular demon.</b></p>
  137. </p>
  138.  
  139. <p class="text-center">
  140. <i class="fas fa-square fa-3x" style="color:#fbbbb9"></i>
  141. <i class="fas fa-square fa-3x" style="color:#fbbbb9"></i>
  142. <i class="fas fa-square fa-3x" style="color:#fbbbb9"></i>
  143. <i class="fas fa-square fa-3x" style="color:#fbbbb9"></i>
  144. <i class="fas fa-square fa-3x" style="color:#fbbbb9"></i>
  145. </p>
  146.  
  147. </div>
  148. </div>
  149.  
  150. <!------------------------------------ SECOND TAB ------------------------------------------------------------->
  151. <div class="tab-pane fade" data-toggle="tab" id="TWO">
  152. <div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
  153. <h1 class="display-4 text-uppercase mb-3" style="color: #cc828a; letter-spacing:1px;">
  154. <i class="fal fa-book fa-fw pull-right"></i>About
  155. </h1>
  156. <p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw"></i> Trivia</p>
  157. <p>
  158. <p>‣Prefers to be called and introduce himself as Noel.</p>
  159. <p>‣Rarely forms strong bonds with others, but won’t mind it if people call him their friend.</p>
  160. <p>‣Wants to find what humans label as “the one” in their life, so far however, no luck.</p>
  161. <p><i class="fal fa-lock"></i> ‣You can know more about him in private.</p>
  162. </p>
  163.  
  164. <p><br></p>
  165. <p class="text-uppercase text-muted mb-0"><i class="fal fa-bookmark fa-fw"></i> Background</p>
  166. <p>Humans often associate the word "demon" with a cruel, ruthless creature incapable of feeling empathy with their prey. In reality however, demons are just like humans, they all behave differently and are gifted different powers by their respective lord, depending on what type of demon they are. You truly cannot judge a book by its cover alone, never knowing what to expect. In the case of Nathaniel, he was a simple worker of one of the many lords ruling over hell. [...]</p>
  167. <p>You see, one of Nathaniel's gifts was to awaken passions and desires encouraging and motivating people to manifest their true intentions. A power seen by many other demons as weak, compared to theirs. Of course it could be seen as powerful, like Nathaniel did, if only they knew how to use it well. After all, said weak power, managed to get rid of his lord. It was a simple task quite honestly, one not even his own Lord foresaw, after all, no one thought that the power Nathaniel had would be used against the very person who bestowed it upon him. Well, what was it that his Lord desired that became his own doom at the end??</p>
  168. <p>Death. His Lord craved Death after countless of millennia living, seeing humans come and go, fellow demons getting killed, having fought against many creatures. But they were a lord, they couldn't just give up their position, die as easily as everyone else. They had a high responsibility after all. So they couldn't afford to die until it was ordered to. Yet, they died. They died thanks to Nathaniel, who gave them the little push they needed to end their own life. They desired it after all. Of course no one suspected him, no one suspected his power to be the cause of it all. So no one knew what happened, chaos ensured, the other fellow demons in the now deceased Lords region panicked. All Nathaniel did, was to leave hell. And now, hes free, walking among humans.</p>
  169.  
  170. </div>
  171. </div>
  172.  
  173. <!------------------------------------ THIRD TAB------------------------------------------------------------->
  174. <div class="tab-pane fade" data-toggle="tab" id="THREE">
  175. <div class="px-4 pt-3 pb-1" style="height: 540px; overflow: auto;">
  176. <h1 class="display-4 text-uppercase mb-3" style="color: #cc828a; letter-spacing:1px;">
  177. <i class="fal fa-users fa-fw pull-right"></i> Relationships
  178. </h1>
  179.  
  180. <!--------------------------- CHARACTER LINK -------------------------------------->
  181. <div class="row">
  182.  
  183. <div class="col-12 mb-3">
  184. <img src="https://cdn.discordapp.com/attachments/613890428034482191/633039936404324373/aaaaa.jpg" style="max-height:100px;" class="img-thumbnail fr-rounded float-sm-right ml-sm-2 d-block mx-auto"/>
  185.  
  186. <p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;">
  187. <a href="" style="color: #cc828a;">
  188. Lord</a>
  189.  
  190. <span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
  191. [ Business. ]</span></p>
  192.  
  193. <p>His now deceased Lord. They had what you would call a typical working relationship. However Nathaniel did grow next to their side since a young age, thus making many people believe that they might have been closer than just a Lord with his underling. </p>
  194. </div>
  195.  
  196. <!--------------------------- CHARACTER LINK -------------------------------------->
  197.  
  198. <div class="col-12 mb-3">
  199. <img src="https://cdn.discordapp.com/attachments/582315667685113865/664616561642045450/unknown.png" style="max-height: 100px;" class="img-thumbnail fr-rounded float-sm-right ml-sm-2 d-block mx-auto">
  200.  
  201. <p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;">
  202. <a href="https://toyhou.se/5760663.circe" style="color: #cc828a;">
  203. Circe</a>
  204.  
  205. <span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300;">
  206. [ Witch friend ]</span></p>
  207.  
  208. <p>A witch he found and ended up making a pact with. Quite honestly, seeing how she isn't technically a human, he coulnd't help but be pulled into curiosity, ending up in what mayhaps might be considered a friendship of some sorts.</p>
  209.  
  210. </div>
  211.  
  212. <!--------------------------- CHARACTER LINK -------------------------------------->
  213.  
  214. <div class="col-12 mb-3">
  215. <img src="https://file.toyhou.se/characters/725246?1535860071" style="max-height:100px;" class="img-thumbnail fr-rounded float-sm-right ml-sm-2 d-block mx-auto" />
  216.  
  217. <p class="my-2" style="letter-spacing:1px; font-size: 14pt; font-weight:300;">
  218. <a href="https://toyhou.se/725246.shiyuki-taeko" style="color: #cc828a;">
  219. Shiyuki Takeo</a>
  220.  
  221. <span class="text-muted pull-right small mt-1" style="letter-spacing:1px; font-weight:300">
  222. [ Adoptive Daughter (AU) ]</span></p>
  223.  
  224. <p>In another universe, he meets the little lady wandering alone and ends up adopting her. Doesn't question her cannibalism one bit, seeing how many Demons he knew in the past had similar tendencies. Her Timing to appear while he's busy bothers him a bit, but still cares highly about her.</p>
  225. </div>
  226.  
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234.  
  235. <p class="text-right small">HTML by @lowkeywicked</p></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement