Advertisement
QueenOfGeckos

Ren

Jul 25th, 2020
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.23 KB | None | 0 0
  1. <!-----------------------------------------------------------------------
  2. Character Page [01]: Fortitude
  3. Made by glenthemes
  4.  
  5. Initial release: 2017/04/06
  6. Last updated: 2017/08/24
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the page credit.
  10. 2) Do not repost/redistribute my themes.
  11. 3) Do not take parts of the code and use it as your own.
  12. 4) You are not allowed to use my graphics/images from my themes.
  13. 5) Do not use my themes as a base code.
  14. 6) Do not integrate my codes together.
  15. ------------------------------------------------------------------------>
  16.  
  17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  18. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  19.  
  20. <head>
  21.  
  22. <title>Comatose, I'll never wake up with out an overdose</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  27.  
  28. <!--------------------TOOLTIP-------------------->
  29. <script src="ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("a[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:100,
  37. tip_fade_speed:100,
  38. attribute:"title"
  39. });
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <!--------------------POPUP-------------------->
  45. <script type="text/javascript"
  46. src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  47. <script>
  48. $(document).ready(function() {
  49. //
  50. $('a.poplight[href^=#]').click(function() {
  51. var popID = $(this).attr('rel'); //Get Popup Name
  52. var popURL = $(this).attr('href'); //Get Popup href to define size
  53. var query= popURL.split('?');
  54. var dim= query[1].split('&');
  55. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  56. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  57. var popMargTop = ($('#' + popID).height() + 80) / 2;
  58. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  59. //Apply Margin to Popup
  60. $('body').append('<div id="fade"></div>');
  61. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  62. return false;
  63. });
  64. $('a.close, .closewin').live('click', function() {
  65. $('#fade, .popup_block').fadeOut(function() {
  66. $('a.close').remove(); //fade them both out
  67. });
  68. return false;
  69. });
  70. });
  71. </script>
  72.  
  73. <!--------------------FONTS------------------->
  74. <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  75.  
  76. <style type="text/css">
  77.  
  78. @font-face { font-family: "montserrat"; src: url('https://dl.dropboxusercontent.com/s/neq454mx5vhfhpq/Montserrat-UltraLight.otf'); }
  79.  
  80. /*--------------------TOOLTIPS--------------------*/
  81. #s-m-t-tooltip {
  82. padding: 2px 9px;
  83. margin: 26px 9px 0px 15px;
  84. background-color: #fbfbfc; /* tooltip background color */
  85. font-family: karla;
  86. font-size: 8.5px;
  87. letter-spacing: 1px;
  88. text-transform: uppercase;
  89. color: #646464; /* tooltip color */
  90. border:0.5px solid rgba(224,224,224,0.6); /* tooltip border */
  91. z-index:9999999!important;
  92. max-width:400px;
  93. }
  94.  
  95. /*--------------------SCROLLBAR--------------------*/
  96. ::-webkit-scrollbar {
  97. width: 2.5px;
  98. height: 2.5px;
  99. }
  100.  
  101.  
  102. ::-webkit-scrollbar-thumb {
  103. background-color: #d6d1d1; /* scrollbar */
  104. }
  105.  
  106. ::-webkit-scrollbar-track {
  107. background-color: #f9f9f9; /* scrollbar background */
  108. }
  109.  
  110. /*--------------------SCROLLBAR--------------------*/
  111. ::selection {
  112. background: #f8f8f9; /* highlighted background */
  113. color:#777; /* highlighted text */
  114. }
  115.  
  116. ::-moz-selection {
  117. background: #f8f8f9; /* highlighted background */
  118. color:#777; /* highlighted text */
  119. }
  120.  
  121. /*--------------------BASICS--------------------*/
  122. body {
  123. background:#eeecec url(https://i.imgur.com/BBDhXiI.jpg); /* background color and image */
  124. background-attachment:fixed;
  125. background-repeat:no-repeat; /* delete "no-" for tiled background */
  126. background-size:cover; /* delete this line for tiled background */
  127. background-position:top right; /* delete this line for tiled background */
  128. cursor:normal;
  129. text-transform:uppercase;
  130. line-height:16px;
  131. font-size:7.5px;
  132. letter-spacing:1px;
  133. }
  134.  
  135. /*--------------------LINKS--------------------*/
  136. a {
  137. text-decoration:none;
  138. -webkit-transition: all 0.4s ease-in-out;
  139. -moz-transition: all 0.4s ease-in-out;
  140. -o-transition: all 0.4s ease-in-out;
  141. }
  142.  
  143. a:hover {
  144. text-decoration:none;
  145. -webkit-transition: all 0.4s ease-in-out;
  146. -moz-transition: all 0.4s ease-in-out;
  147. -o-transition: all 0.4s ease-in-out;
  148. }
  149.  
  150. .lnr {
  151. -webkit-transition: all 0.4s ease-in-out;
  152. -moz-transition: all 0.4s ease-in-out;
  153. -o-transition: all 0.4s ease-in-out;
  154. }
  155.  
  156. /*--------------------TUMBLR BUTTONS--------------------*/
  157. iframe#tumblr_controls, .iframe-controls--desktop {
  158. top:1px!important;
  159. right:1px!important;
  160. position:fixed!important;
  161. opacity:0.3;
  162. z-index:99999!important;
  163. -webkit-transition: all 0.4s ease-in-out;
  164. -moz-transition: all 0.4s ease-in-out;
  165. -o-transition: all 0.4s ease-in-out;
  166. }
  167.  
  168. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  169. opacity:0.6;
  170. }
  171.  
  172. /*---------------------------MAIN TITLE TEXT---------------------------*/
  173. #maintitle {
  174. position:fixed;
  175. margin:0 auto;
  176. left:0;right:0;
  177. bottom:475px; /* distance from the bottom, change if necessary */
  178. width:600px; /* width of title, change if necessary */
  179. padding:25px;
  180. height:auto;
  181. background-color:transparent;
  182. font-family:montserrat;
  183. text-transform:uppercase;
  184. color:#495661; /* main title color */
  185. font-size:20px;
  186. letter-spacing:5px;
  187. line-height:1;
  188. text-align:center;
  189. z-index:1000;
  190. }
  191.  
  192. /*-----------------------BOTTOM BAR-----------------------*/
  193. #botbar {
  194. position:fixed;
  195. margin:0 auto;
  196. left:0;right:0;bottom:0;
  197. width:100%;
  198. height:80px;
  199. background-color:#b4b4c9; /* bottom title background color */
  200. display:table;
  201. z-index:1000;
  202. }
  203.  
  204. #botmid {
  205. display:table-cell;
  206. vertical-align:middle;
  207. }
  208.  
  209. .bottext {
  210. font-family: montserrat, "KaiTi", "楷体", STKaiti, "华文楷体", serif;
  211. text-align:center;
  212. font-size:30px;
  213. color:#2277bf; /* bottom title text color */
  214. letter-spacing:4px;
  215. padding:0px 100px 0px 100px;
  216. }
  217.  
  218. /*-----------------------MAIN CHARACTER IMAGES-----------------------*/
  219. #image1 {
  220. position:fixed;
  221. margin:0 auto;
  222. left:0;right:0;bottom:74px;
  223. width:100%;
  224. text-align:center;
  225. white-space:nowrap;
  226. height:auto;
  227. }
  228.  
  229. #image1 img {
  230. margin-left:10px; /* distance between character images */
  231. margin-right:10px; /* distance between character images */
  232. width:120px;
  233. height:auto;
  234. cursor:pointer;
  235. -webkit-transition: all 0.4s ease-in-out;
  236. -moz-transition: all 0.4s ease-in-out;
  237. -o-transition: all 0.4s ease-in-out;
  238. }
  239.  
  240. #image1:hover img {
  241. /* fade/opacity amount of other images when ONE image is hovered */
  242. opacity:0.8;
  243. /* blur amount on other images when ONE image is hovered */
  244. /* remember to make all numbers the same */
  245. -webkit-filter:blur(8px);
  246. -moz-filter:blur(8px);
  247. -o-filter:blur(8px);
  248. filter:blur(8px);
  249. }
  250.  
  251. #image1:hover img:hover {
  252. opacity:1;
  253. -webkit-filter:blur(0px);
  254. -moz-filter:blur(0px);
  255. -o-filter:blur(0px);
  256. filter:blur(0px);
  257. }
  258.  
  259. /*-----------------------STATISTICS BARS-----------------------*/
  260. .statbar {
  261. margin-left:6px;
  262. height:8px;
  263. width:100px;
  264. background-color:#2277bf; /* statistics background color */
  265. overflow:hidden;
  266. border-radius:4px;
  267. display:inline-block;
  268. }
  269.  
  270. .statfill {
  271. height:100%;
  272. width:0%;
  273. background-color:#d6d1d1; /* statistcs bar fill color */
  274. border-radius:4px 0px 0px 4px;
  275. }
  276.  
  277. /*-----------------------POPUP-----------------------*/
  278. .popup_block{
  279. display:none;
  280. background:#b4b4c9; /* popup box background color */
  281. padding:20px;
  282. float:left;
  283. position:fixed;
  284. top:50%;left:50%;
  285. transform: translate(-50%, -50%);
  286. z-index: 99999;
  287. font-family:karla;
  288. font-size:11px;
  289. text-transform:none;
  290. letter-spacing:0px;
  291. color:#2277bf; /* popup box text color */
  292. }
  293.  
  294. *html #fade {position: absolute;}
  295. *html .popup_block {position: absolute;}
  296. #fade {
  297. display:none;
  298. position:fixed;
  299. left:0px;
  300. top:0px;
  301. width:100%;
  302. height:100%;
  303. z-index:9999;
  304. background:#fff; /* popup box overlay color */
  305. opacity:0.4; /* popup box overlay opacity */
  306. }
  307.  
  308. .boximage {
  309. opacity:1;
  310. }
  311.  
  312. .boximage img {
  313. float:left;
  314. width:215px;
  315. height:400px;
  316. border-right:15px solid transparent;
  317. }
  318.  
  319. .popup_block h1 {
  320. font-family:montserrat;
  321. font-size:14px;
  322. color:#2277bf; /* popup box title color */
  323. text-transform:uppercase;
  324. letter-spacing:2px;
  325. padding-bottom:10px;
  326. margin-top:0px;
  327. margin-bottom:15px;
  328. border-bottom:1px solid #2277bf; /* popup box title underline color */
  329. }
  330.  
  331. .popup_block h2 {
  332. font-family:montserrat;
  333. font-size:11px;
  334. text-transform:uppercase;
  335. text-align:center;
  336. padding-top:5px;
  337. padding-bottom:5px;
  338. letter-spacing:1px;
  339. font-weight:bold;
  340. }
  341.  
  342. .popup_block h2::first-letter {
  343. color:#24292e; /* popup box subtitle first letter color */
  344. }
  345.  
  346. .popup_block table {
  347. border-spacing:1px;
  348. margin-left:-2px;
  349. }
  350.  
  351. .popup_block stat {
  352. font-family:montserrat;
  353. font-size:10px;
  354. text-transform:uppercase;
  355. letter-spacing:1px;
  356. font-weight:bold;
  357. }
  358.  
  359. .popup_block .lnr {
  360. padding:6px;
  361. background-color:#d6d1d1; /* popup box "basic info" icon background color */
  362. color:#fff; /* popup box "basic info" icon color */
  363. margin-right:5px;
  364. margin-top:1.5px;
  365. margin-bottom:1.5px;
  366. }
  367.  
  368. .content {
  369. max-height:115px; /* maximum height of "about biography" text */
  370. overflow:auto; /* this line enables the scrollbar in your text */
  371. text-align:justify;
  372. padding-right:10px;
  373. }
  374. .content1 {
  375. max-height:200px; /* maximum height of "about biography" text */
  376. overflow:auto; /* this line enables the scrollbar in your text */
  377. text-align:justify;
  378. padding-right:10px;
  379. }
  380.  
  381. .popup_block b {
  382. color:#57728a; /* popup box bold text color */
  383. }
  384.  
  385. .closewin {
  386. float:right;
  387. margin-top:-15px;
  388. margin-right:-25px;
  389. cursor:pointer;
  390. }
  391.  
  392. .closewin .lnr {
  393. font-size:9px;
  394. padding:6px 16px;
  395. background-color:#f3f1f1; /* popup box close button background color */
  396. color:#5f5e5c; /* popup box close button color */
  397. }
  398.  
  399. #popcorn{position:fixed;display:block;bottom:90px;right:7px;z-index:7999;}
  400. #popcorn a{font-family:times;font-size:8px;text-transform:uppercase;color:#cecece;background-color:#111;letter-spacing:1.5px;padding:5px 7px;margin-left:5px;margin-right:5px;}
  401.  
  402. /*-----------------------CUSTOM LINKS-----------------------*/
  403. #customlinks {
  404. position:fixed;
  405. bottom:0;left:0;
  406. margin-bottom:90px;
  407. margin-left:10px;
  408. width:50px;
  409. height:auto;
  410. z-index:3000;
  411. }
  412.  
  413. #customlinks .lnr {
  414. font-size:12px;
  415. padding:9px 8px 10px 10px;
  416. background-color:#1f182a; /* custom links background color */
  417. color:#eee; /* custom links color */
  418. display:inline-block;
  419. margin-top:3px;
  420. margin-bottom:3px;
  421. border-radius:100%;
  422. }
  423.  
  424. #customlinks .lnr:hover {
  425. background-color:#dcd4cf; /* custom links hover background color */
  426. color:#424446; /* custom links hover color */
  427. }
  428.  
  429.  
  430. /*-----------------------CREDIT. DO NOT REMOVE-----------------------*/
  431. #c {
  432. position:fixed;
  433. display:block;
  434. bottom:90px;
  435. right:7px;
  436. z-index:8000;
  437. }
  438.  
  439. #c a {
  440. font-family:montserrat;
  441. font-size:8px;
  442. text-transform:uppercase;
  443. color:#cecece; /* credit color */
  444. background-color:#111; /* credit background color */
  445. letter-spacing:1.5px;
  446. padding:5px 7px;
  447. margin-left:5px;
  448. margin-right:5px;
  449. }
  450.  
  451. /*-----------------------FADE-IN EFFECTS-----------------------*/
  452. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  453. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  454. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  455.  
  456. .fade-in {
  457. opacity:0;
  458. -webkit-animation:fadeIn ease-in 1;
  459. -moz-animation:fadeIn ease-in 1;
  460. animation:fadeIn ease-in 1;
  461. -webkit-animation-fill-mode:forwards;
  462. -moz-animation-fill-mode:forwards;
  463. animation-fill-mode:forwards;
  464. -webkit-animation-duration:1s;
  465. -moz-animation-duration:1s; animation-duration:1s; }
  466.  
  467. .fade-in.one { -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; animation-delay: 1.3s; }
  468.  
  469. .fade-in.two { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; }
  470.  
  471. .fade-in.three { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
  472.  
  473. {CustomCSS}
  474.  
  475. </style>
  476.  
  477. </head>
  478.  
  479. <body>
  480.  
  481. <div id="popcorn"><a target="_blank" href="https://tmblr.co/mj4GEdc9g4ccXuX_vDDHmZA" title="ɢʟᴇɴᴛʜᴇᴍᴇꜱ">©</a></div>
  482.  
  483. <div id="maintitle" class="box fade-in three">
  484. <!-----MAIN TITLE TEXT----->
  485. </div>
  486.  
  487. <div id="botbar">
  488. <div id="botmid" class="box fade-in two">
  489. <!-----BOTTOM TITLE TEXT----->
  490. <div class="bottext">The Ghostly Shrine Maiden: Hollow</div>
  491. </div>
  492. </div>
  493.  
  494.  
  495. <div id="image1" class="box fade-in one">
  496.  
  497. <!-----TO ADD ANOTHER CHARACTER, COPY & PASTE THE LINES BELOW----->
  498. <!-----*START COPY*----->
  499. <a href="#?w=475" title="Relationships" rel="box2" class="poplight"><img src="https://i.imgur.com/yvTgzIA.gif" style="width:150px"></a>
  500. <!-----*END COPY*---->
  501. <a href="#?w=475" title="About" rel="box5" class="poplight"><img src="https://i.imgur.com/yvTgzIA.gif" style="width:150px"></a>
  502. <!-----*START COPY*----->
  503. <a href="#?w=475" title="Stats" rel="box1" class="poplight"><img src="https://i.imgur.com/NwyHqzl.png" style="width:200px"></a>
  504. <!-----*END COPY*---->
  505.  
  506.  
  507. <!-----*START COPY*----->
  508. <a href="#?w=475" title="Abilities" rel="box3" class="poplight"><img src="https://i.imgur.com/yvTgzIA.gif" style="width:150px"></a>
  509. <!-----*END COPY*---->
  510. <!-----*START COPY*----->
  511. <a href="#?w=475" title="Rules" rel="box4" class="poplight"><img src="https://i.imgur.com/yvTgzIA.gif" style="width:150px"></a>
  512. <!-----*END COPY*---->
  513.  
  514.  
  515. <!-----"first character" IS THE TOOLTIP TEXT THAT SHOWS UP WHEN YOU HOVER THE CHARACTER IMAGE---->
  516.  
  517. <!-----REPLACE THE IMAGE URL WITH YOUR OWN IMAGE URLS---->
  518.  
  519. <!-----YOU CAN CHANGE THE WIDTHS OF EACH IMAGE BY CHANGING "120px"---->
  520.  
  521. <!-----REMEMBER TO CHANGE THE NUMBER IN "box1" TO THE CORRECT NUMBER OF YOUR CHARACTER ORDER. FOR EXAMPLE, IF YOU HAVE 4 CHARACTERS, CHANGE THE 4TH CHARACTER TO "box4"----->
  522.  
  523. </div>
  524.  
  525.  
  526. <!-----*START BIOGRAPHY BOX*----->
  527. <div id="box2" class="popup_block">
  528.  
  529. <a title="back to characters"><div class="closewin"><span class="lnr lnr-cross"></span></div></a>
  530.  
  531. <!-----POPUPBOX TITLE----->
  532. <h1>Relationships</h1>
  533. <div class="boximage"><img src="https://i.imgur.com/qvAa5Cj.png"></div>
  534.  
  535. <!-----POPUP BOX SUBTITLE----->
  536. <h2>Friends/Family</h2>
  537.  
  538. <span class="lnr lnr-pencil"></span>
  539. <b>Name:</b> Your name here
  540. <p>
  541.  
  542. <span class="lnr lnr-user"></span>
  543. <b>Age:</b> Your age here
  544. <p>
  545.  
  546. <span class="lnr lnr-calendar-full"></span>
  547. <b>Birthday:</b> Your birthday here
  548. <p>
  549.  
  550. <!-----POPUP BOX SUBTITLE----->
  551. <h2>Aquaintences</h2>
  552.  
  553. <span class="lnr lnr-pencil"></span>
  554. <b>Name:</b> Your name here
  555. <p>
  556.  
  557. <span class="lnr lnr-user"></span>
  558. <b>Age:</b> Your age here
  559. <p>
  560.  
  561. <span class="lnr lnr-calendar-full"></span>
  562. <b>Birthday:</b> Your birthday here
  563. <p>
  564.  
  565.  
  566. <!-----POPUP BOX SUBTITLE----->
  567. <h2>Enemies</h2>
  568.  
  569. <span class="lnr lnr-pencil"></span>
  570. <b>Name:</b> Your name here
  571. <p>
  572.  
  573. <span class="lnr lnr-user"></span>
  574. <b>Age:</b> Your age here
  575. <p>
  576.  
  577. <span class="lnr lnr-calendar-full"></span>
  578. <b>Birthday:</b> Your birthday here
  579. <p>
  580. </div>
  581. <!-----*END BIOGRAPHY BOX*----->
  582.  
  583.  
  584. <div id="box1" class="popup_block">
  585.  
  586. <a title="back to characters"><div class="closewin"><span class="lnr lnr-cross"></span></div></a>
  587.  
  588. <!-----POPUPBOX TITLE----->
  589. <h1>DOSSIER</h1>
  590.  
  591. <!-----IMAGE INSIDE POPUP BOX----->
  592. <div class="boximage"><img src="https://i.imgur.com/3mCfBos.png"></div>
  593.  
  594. <!-----POPUP BOX SUBTITLE----->
  595.  
  596.  
  597. <b>Name:</b> Ren Ginrei<br>
  598. <b>Alter Ego:</b> The Shrine Heroine: Hollow<br>
  599. <b>Age:</b> 18<br>
  600. <b>Birthday:</b> August 15th<Br>
  601. <b>Gender:</b> Female<br>
  602. <b>Species:</b> Quirked human<br>
  603. <b>Hair Color:</b> White<br>
  604. <b>Eye Color:</b> Deep Grey<br>
  605. <b>Height:</b> 5ft 1 inches<br>
  606. <b>Weight:</b> 95lbs<br>
  607. <b>Sexual Orientation:</b> Bi-curious<br>
  608. <b>Martial Status:</b> Single<Br>
  609.  
  610. ddddd
  611. </div>
  612.  
  613.  
  614.  
  615.  
  616. <!-----*START BIOGRAPHY BOX*----->
  617. <div id="box3" class="popup_block">
  618.  
  619. <a title="back to characters"><div class="closewin"><span class="lnr lnr-cross"></span></div></a>
  620.  
  621. <!-----POPUPBOX TITLE----->
  622. <h1>Abilities</h1>
  623.  
  624. <!-----IMAGE INSIDE POPUP BOX----->
  625. <div class="boximage"><img src="https://i.imgur.com/hIHMMLD.jpg">
  626. </div>
  627.  
  628.  
  629. <!-----POPUP BOX SUBTITLE----->
  630. <div class="content"><h2>Quirk information</h2>
  631. <b>Name:</b> Astral Skip<br>
  632. <b>Quirk type:</b> Emitter<br>
  633. <b>Break down:</b></div>
  634. <div class="content"><p>The user is able to project their life force out of their body as a sort of spectral being. They are unable to physically interact with anything or anyone during this time and if they do attempt to touch another person it sends a chill down their spine. They can float just a few inches above the ground and pass through solid objects. This projection is completely invisible to the human eye, and she cannot be heard by normal means while in this state. <a target="_blank" href="https://en.wikipedia.org/wiki/Electronic_voice_phenomenon">*EVP style recordings.</a> -Without the right equipment it’s impossible.</p>
  635. <p>Also, electronics I.E Cell phones, radios, televisions while physically she can not interact with these she can disrupt their frequencies by passing through due to electromagnetic fields. Only when she is projecting though. </p></div>
  636.  
  637. <b>drawbacks:</b>
  638. <div class="content">
  639. While using the quirk her body falls into an unconscious state and all life-giving functions stop, if she is projecting for too long she will die without medical attention. In order to return to her body, she has to physically enter it, so if she is far away from it she runs a serious risk of dying.<Br>
  640. She also has to be able to know where her body is. If her body is moved during projection this puts her at a risk.
  641. Any items on her person in projection is useless and is only a reflection of her physical form.
  642. </div>
  643.  
  644. <div class="content">
  645. <!-----POPUP BOX STATISTICS----->
  646. <h2>Quirk Stats</h2><table><tbody>
  647. <tr>
  648. <!-----STATSTICS 1 NAME----->
  649. <td><stat>Power</stat></td>
  650.  
  651. <td>
  652. <div class="statbar">
  653. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  654. <div class="statfill" style="width:60%"></div></div>
  655. </td>
  656. </tr>
  657.  
  658. <tr>
  659. <!-----STATSTICS 2 NAME----->
  660. <td><stat>Speed</stat></td>
  661.  
  662. <td>
  663. <div class="statbar">
  664. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  665. <div class="statfill" style="width:40%"></div></div>
  666. </td>
  667. </tr>
  668.  
  669. <tr>
  670. <!-----STATSTICS 3 NAME----->
  671. <td><stat>Technique</stat></td>
  672.  
  673. <td>
  674. <div class="statbar">
  675. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  676. <div class="statfill" style="width:80%"></div></div>
  677. </td>
  678. </tr>
  679.  
  680. <tr>
  681. <!-----STATSTICS 4 NAME----->
  682. <td><stat>Intelligence</stat></td>
  683.  
  684. <td>
  685. <div class="statbar">
  686. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  687. <div class="statfill" style="width:80%"></div></div>
  688. </td>
  689. </tr>
  690.  
  691. <tr>
  692. <!-----STATSTICS 5 NAME----->
  693. <td><stat>Cooperation</stat></td>
  694.  
  695. <td>
  696. <div class="statbar">
  697. <!-----STATISTICS BAR WIDTH. PERCENTAGE----->
  698. <div class="statfill" style="width:80%"></div></div>
  699. </td>
  700. </tr>
  701. </tbody></table>
  702.  
  703. </div></div></div>
  704.  
  705. <!-----*START BIOGRAPHY BOX*----->
  706. <div id="box4" class="popup_block">
  707.  
  708. <a title="back to characters"><div class="closewin"><span class="lnr lnr-cross"></span></div></a>
  709.  
  710. <!-----POPUPBOX TITLE----->
  711. <h1>Rules/OOC</h1>
  712. <div class="boximage"><img src="https://i.imgur.com/WZzrBf7.png">
  713. </div>
  714.  
  715.  
  716. <b>o1.</b> PM friendly 99.99% of the time.<Br>
  717. <b>o2.</b> IC =/= OOC..<Br>
  718. <b>o3.</b> Roleplaying is a hobby not a job. I owe you nothing. If I take to long to respond it's because I am doing something else that is more pressing. If you have an issue with this then I'll go ahead and block you. DO NOT PLAY THIS GAME WITH ME!<Br>
  719. <b>o4.</b> BNHA/MHA OC. <Br>
  720. <b>o5.</b> DO NOT PM ME FOR SMUT.<Br>
  721. <b>o6.</b> This code? DO NOT TOUCH IT!
  722. <b>o7.</b> Start with a post if you really want to. I will decline if I am not interested. Do not take it personally.<Br>
  723. <b>o8.</b> Story > Smut.<Br>
  724. <b>o9.</b> I play this character. Not the character you give me.<Br>
  725. <b>1o.</b> Keep OOC stuff away. Friends are fine~ But other things screw off.<Br>
  726. <b>11.</b> No code? I'm sorry most likely no rp.<Br>
  727. <b>12.</b> Please at least have a basic profile. Baseball stats a bit of info and a picture or two.<Br>
  728. </div>
  729.  
  730. <!-----*START BIOGRAPHY BOX*----->
  731. <div id="box5" class="popup_block">
  732.  
  733. <a title="back to characters"><div class="closewin"><span class="lnr lnr-cross"></span></div></a>
  734.  
  735. <!-----POPUPBOX TITLE----->
  736. <h1>About</h1>
  737. <div class="boximage"><img src="https://i.imgur.com/mInOP7i.png">
  738. </div>
  739.  
  740. <!-----IMAGE INSIDE POPUP BOX----->
  741. <h2>Personality</h2>
  742. <div class="content">Ren is a quiet girl. Often overlooked or scene due to this factor. She is timid and shy when interacting with most, and it takes a bit of comfort to pull her out of her shell. This crippling shyness is a massive hindrance however she has slowly gotten better since moving from her first year of U.A to her second. </p>
  743.  
  744. <p>When she really gets going though she is a very sweet girl. Her love for horror is a massive surprise to most but she moves a good scare all things considered. And ontop of that she is also very interested in the potential science behind paranormal anomolies. And as if she couldn't have any more creep factors, she collects porcelain dolls. For no other reason then to make other people who enter her dorm room feel uneasy. </p>
  745.  
  746. <p>Normally not one for the spot like Ren really would like to become an underground hero. More working on information collections, similar to how Aizawa was an underground hero or kept himself out of the spot lot for the most part before working at U.A. She wants to be a hero for the sake of being a hero. And while her quirk has no main offensive or defensive means she still would like to use what she has to be able to help others. </p>
  747.  
  748. <p>Being able to project would make her an ideal rescue hero because it allows her to search through say disaster zones without disrupting the structures or surroundings if unstable or assess hostage situations.</p>
  749.  
  750.  
  751. </div>
  752. <h2>Biography</h2>
  753. <div class="content1"><p>Ren was born to a family of shrine maidens. Specifically working with her family's own shrine. Her mother was the youngest daughter of the current owners when she met Ren's father when both were still children during a point where his family were meeting with her's the local shrine to possibly inquire about an exorcism. It was quickly discovered it was his quirk manifesting. And since it was not akin to that of his parents or they didn't think their own quirks would mash and make this poltergeist-esque quirk, then it must be demons! But no little Hirotaka was just throwing a temper tantrum every time and his quirk was emotions based. The more high stress the emotions the more violent the reaction. All in all after that his parents were close and would eventually get married. They moved into the family Shrine and started to over see it. </p>
  754.  
  755. <p>Her quirk manifested at one point in the middle of the night. She had drifted off to sleep and found herself slip from her body. it caused the small child to quickly return and scream bloody murder in the middle of the night. It was a hysterical sight. Her mother and father came running , her father holding a baseball bat, while her mother had a couple of talismans in her grasp as if that would have stopped an intruder. The distress even caused the walls to rattle a bit from her father's quirk. </p>
  756.  
  757. <p>Describing the extremely jarring and unnerving experiences caused her mother to sigh with relief. It just met she was becoming an adult. Now this was more a conversation she'd have to have with her three other times because a woman becomes and adult when she is hit by a monthly visit... That is one... When you get a crush on someone for the first time that could be another, when you turn eighteen. It's like how many times can a girl become a freakin' woman? Seriously? That aside, Ren took to it pretty quickly. But with exploration discovered her limits. In fact a few of her little ventures resulted in several trips to the hospital. That was not fun at all. </p>
  758.  
  759. <p>Growing up Ren was trained to be a shrine maiden herself, but she was free to choose her own path in life. And with that being said she chose to attempt to be a hero. She enjoyed her shrine maiden work, her quirk works very well, she actually is still on the fence regarding whether or not she is even going to continue to be a pro hero or if she is going to do both with her life. </p>
  760.  
  761. <p>She's seen all types of occultish and weird things, and has a heavy interest and belief in the paranormal. Through elementary schools she was often either the creepy kid just because of her demeanor or where she lived, or was the quiet wall flower no one ever wanted to pay attention to. This however was far from an issue for the young woman. She was far from perturbed or bothered she was rather happy to be affiliated with the strange things she held so near and dear after all.</p>
  762. </div>
  763. </div>
  764.  
  765.  
  766.  
  767.  
  768. <!-----CREDIT. DO NOT REMOVE----->
  769. <div id="c">
  770. <a target="_blank" href="http://glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  771. </div>
  772.  
  773. </body>
  774.  
  775. </div>
  776. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement