API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 11th, 2018
91
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 92.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- page 002: oh hey? whatup by @chaaostheory
  4.  
  5. edit to your hearts content, i'd just prefer you'd leave the credit in
  6. -->
  7.  
  8. <html>
  9.  
  10. <head>
  11.  
  12. <title>{Title}</title>
  13.  
  14. <link rel="shortcut icon" href="{favicon}">
  15.  
  16. <!--fonts-->
  17. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
  18.  
  19. <!-- fontawesome-->
  20. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  21.  
  22. <!-- SCRIPTS-->
  23. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  24. <!-- TOOLTIPS SCRIPTS-->
  25. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js" type="text/javascript"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("[title]").style_my_tooltips({tip_delay_time:20});
  30. });
  31. })(jQuery);
  32. </script>
  33.  
  34. <!-- hint script-->
  35.  
  36. <link href="https://static.tumblr.com/ewjs2wm/Kpvpaxpo1/hint.css" rel='stylesheet' type='text/css'>
  37.  
  38. <!--tabs-->
  39.  
  40. <script> function openCity(cityName) {
  41. var i;
  42. var x = document.getElementsByClassName("tab");
  43. for (i = 0; i < x.length; i++) {
  44. x[i].style.display = "none";
  45. }
  46. document.getElementById(cityName).style.display = "block";
  47. } </script>
  48.  
  49.  
  50.  
  51.  
  52. <style type="text/css">
  53.  
  54. ::-webkit-scrollbar {
  55. width:2px;
  56. border-radius: 5px;
  57. height: auto;
  58. padding:1px
  59.  
  60. }
  61. ::-webkit-scrollbar-thumb {
  62. background-color:#ddd;
  63. border-radius: 5px;
  64. padding:1px;
  65. }
  66.  
  67. /* hint styling */
  68.  
  69. [class*="hint--"]:after{
  70. font-size:9px;
  71. text-transform:uppercase;
  72. font-family:roboto, sans-serif;
  73. }
  74.  
  75.  
  76. /*transition styling*/
  77.  
  78. .w3-animate-opacity{animation:opac 1s}@keyframes opac{from{opacity:0} to{opacity:1}}
  79. .w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
  80. .w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
  81. .w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
  82.  
  83.  
  84. #s-m-t-tooltip {
  85. padding:2px;
  86. padding-left:5px;
  87. padding-right:5px;
  88. margin:5px 5px 5px 10px;
  89. font-weight:400;
  90. font-size:10px;
  91. text-transform:uppercase;
  92. letter-spacing:0.5px;
  93. color:#fff;
  94. background:#555;
  95. border:1px solid #999;
  96. }
  97.  
  98. body {
  99. font-size:12px;
  100. font-family:roboto, sans-serif;
  101. }
  102.  
  103. a {
  104. color:#000;
  105. }
  106.  
  107.  
  108. h1{
  109. background-color:#555;
  110. color:#fff;
  111. font-size:15px;
  112. padding:2px;
  113. text-align:center;
  114. font-weight:300;
  115. text-transform:uppercase;
  116. margin-bottom:2px;
  117. }
  118.  
  119. .pheader {
  120. background:#ddd;
  121. height:35px;
  122. width:100%;
  123. vertical-align:center;
  124. padding:10px;
  125. padding-top:10px;
  126. margin-left:10px;
  127. border:1px solid #ccc;
  128. z-index:999;
  129. }
  130.  
  131. .pheadertitle {
  132. font-size:25px;
  133. font-weight:200;
  134. }
  135.  
  136. .hicons {
  137. margin-left:10px;
  138. }
  139.  
  140. .hicons a {
  141. border:1px solid #000;
  142. padding:3px;
  143. -webkit-transition: 0.7s; /* Safari */
  144. transition: 0.7s;
  145. }
  146.  
  147. .hicons a:hover {
  148. border:1px solid #fff;
  149. color:#fff;
  150. -webkit-transition: 0.7s; /* Safari */
  151. transition: 0.7s;
  152. }
  153.  
  154. .mdash {
  155. margin-left:5px;
  156. }
  157.  
  158. .sidebar {
  159. height: 770px;
  160. width: 125px;
  161. border: 1px solid #ccc;
  162. padding: 5px;
  163. margin-left: 10px;
  164. margin-top: -1px;
  165. position: fixed;
  166. background: #fff;
  167. }
  168.  
  169. .characternav {
  170. height: 100%;
  171. padding-left: 12px;
  172. padding-top: 5px;
  173. }
  174.  
  175. .characternav img {
  176. padding:5px 0px;
  177. width:50px;
  178. }
  179.  
  180. .container {
  181. width:700px;
  182. height:750px;
  183. border: 1px solid #ccc;
  184. margin-left:165px;
  185. margin-top:20px;
  186. padding:5px;
  187. background:#fff;
  188. }
  189.  
  190. .rightcolumn {
  191. width:300px;
  192. float:right;
  193. }
  194.  
  195. .characterheader {
  196. height:107px;
  197. background:#ddd;
  198. }
  199.  
  200. .characterheader img {
  201. padding:3px; border:1px solid #eee;float:left;
  202. width:100px;
  203. }
  204.  
  205. .charactername {
  206. font-size:16px;
  207. margin-top:35px;
  208. background:#555;
  209. color:#fff;
  210. float:right;
  211. padding:5px;
  212. text-transform:uppercase;
  213. width:182px;
  214. text-align:right;
  215. }
  216.  
  217. .biotext {
  218. padding:5px;
  219. height:287px;
  220. text-align:justify;
  221. overflow-y:scroll;
  222. }
  223.  
  224. .sorting, .wand {
  225. height:145px;
  226. background:#ddd;
  227. }
  228.  
  229. .sortingtext, .wandtext {
  230. padding:5px;
  231. text-align:justify;
  232. overflow-y:scroll;
  233. display:block;
  234. height:100px;
  235. }
  236.  
  237. .wandtext {
  238. padding-left:10px;
  239. }
  240.  
  241. .sortingtext img, .wandtext img {
  242. width:100px;
  243. }
  244.  
  245. .cstatsc {
  246. height:100px;
  247. width:198px;
  248. margin-top:-10px;
  249. }
  250.  
  251. .cstats {
  252. background:#eee;
  253. height:305px;
  254. width:197px;
  255. display:block;
  256. position:absolute;
  257. float:right;
  258. line-height:0;
  259. overflow-y:scroll;
  260. }
  261.  
  262. .cstats table {
  263. width:100%;
  264. border-collapse: collapse;
  265. }
  266.  
  267. .cstats tr {
  268. border: 1px #e0e0e0 solid;
  269. font-variant: small-caps;
  270. font-weight: 400;
  271. font-size:12px;
  272. }
  273.  
  274. .cstats tr:nth-child(even) {
  275. background-color: #f4f4f4;
  276. }
  277.  
  278. .cstats th {
  279. width: 25px;
  280. }
  281.  
  282. .cstats td {
  283. border: 1px #e0e0e0 solid;
  284. padding: 3px;
  285. text-align: right;
  286. }
  287.  
  288. .cstats i {
  289. padding:3px;
  290. }
  291.  
  292. .tagsc {
  293. height:100px;
  294. width:200px;
  295. margin-left:198px;
  296. margin-top:-105px;
  297. padding:5px;
  298. }
  299.  
  300. .links a{
  301. width:189px;
  302. font-size:11px;
  303. text-align:center;
  304. background:#555;
  305. text-transform:uppercase;
  306. color:#fff;
  307. text-decoration:none;
  308. padding:1px;
  309. display:block;
  310. margin-bottom:3px;
  311. font-weight:300;
  312. -webkit-transition: 0.7s; /* Safari */
  313. transition: 0.7s;
  314. }
  315.  
  316. .links a:hover {
  317. background:#fff;
  318. color:#555;
  319. -webkit-transition: 0.7s; /* Safari */
  320. transition: 0.7s;
  321. }
  322.  
  323. .traits {
  324. width:393px;
  325. margin-top:236px;
  326. display:block;
  327. color:#fff;
  328. font-weight:300;
  329. text-transform:uppercase;
  330. background:#ddd;
  331. }
  332.  
  333. .traits table {
  334. width:100%;
  335. display: table;
  336. border-collapse: separate;
  337. border-spacing: 10px;
  338. }
  339.  
  340. .traits tr {
  341. font-size:12px;
  342. }
  343.  
  344. .traits td {
  345. background:#555;
  346. text-align:center;
  347. width:43%;
  348. padding:5px;
  349. }
  350.  
  351. .tvtropes {
  352. width:392px;
  353. display:block;
  354. background:#ddd;
  355. height:285px;
  356. }
  357.  
  358. .tvtropes h1 {
  359. width:388px
  360. }
  361.  
  362. .tvtropes table {
  363. width: 395px;
  364. }
  365.  
  366. .tvtropes tr {
  367. font-family:cambria;
  368. font-size: 10px;
  369. font-weight:400;
  370. text-align: center;
  371. letter-spacing:2px;
  372. color: #fff;
  373. text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
  374. }
  375.  
  376. .tvtropes td {
  377. width: 33%;
  378. padding: 23px;
  379. background-size: 110%;
  380. background-position: center;
  381. border:1px solid #999;
  382. }
  383.  
  384. .tvtropes a {
  385. color: #fff;
  386. text-decoration:none;
  387. text-transform:uppercase;
  388. }
  389.  
  390. .sidestatcontainer {
  391. float:left;
  392. position: fixed;
  393. margin-left: 835px;
  394. margin-top: 0px; width:6px;
  395.  
  396. }
  397.  
  398. .sidestat {
  399. width: 5px;
  400. height: 5px;
  401. padding: 4px;
  402. margin-top: 0px;
  403.  
  404. }
  405.  
  406. .statdot {
  407. display:block;
  408. height:5px;
  409. width:5px;
  410. padding:2px;
  411. border:1px solid #eee;
  412. border-radius:100%;
  413. }
  414.  
  415. /* credit */
  416.  
  417. .credit{
  418. position:fixed;
  419. margin-left:840px;
  420. top:805px;
  421. }
  422.  
  423. .credit a{
  424. color:#000;
  425. background:rgba(255,255,255, 0.5);
  426. border-radius:100%;
  427. padding:2px 3px;
  428. font-size:20px;
  429. -webkit-transition: 1s; /* Safari */
  430. transition: 1s;
  431. }
  432.  
  433. .credit a:hover{
  434. color:#fff;
  435. background:rgba(0,0,0, 0.5);
  436. -webkit-transition: 1s; /* Safari */
  437. transition: 1s;
  438. }
  439.  
  440. </style>
  441.  
  442. </head>
  443. <body>
  444.  
  445. <!-- header -->
  446.  
  447. <div class="pheader">
  448. <span class="pheadertitle">oh hey?<b>whatup?</b></span>
  449. <span class="mdash">—</span>
  450. <!-- header links-->
  451. <!--
  452. wanna change icons? use fontawesome 5.1 library here: https://fontawesome.com/icons?d=gallery
  453. -->
  454. <span class="hicons">
  455. <a href="/" title="back"><i class="fa fa-home fa-fw"></i></a>
  456. <a href="/ask" title="message"><i class="far fa-envelope fa-fw"></i></a>
  457. <a href="/about" title="about"><i class="fas fa-user-circle fa-fw"></i></a>
  458. <a href="/nav" title="navigation"><i class="fas fa-map fa-fw"></i></a>
  459. </span>
  460. </div>
  461. <!-- end header-->
  462.  
  463. <!-- character nav-->
  464. <div class="sidebar">
  465. <div class="characternav">
  466. <!-- tab one-->
  467. <a href="#" onclick="openCity('tabone')" class="hint--top" aria-label="avery archer"><img src="https://placehold.it/100"></a>
  468. <!--tab two-->
  469. <a href="#" onclick="openCity('tabtwo')" class="hint--top" aria-label="eleanor guthrie"><img src="https://placehold.it/100"></a>
  470. <!--tab three-->
  471. <a href="#" onclick="openCity('tabthree')" class="hint--top" aria-label="elizabeth swann"><img src="https://placehold.it/100"></a>
  472. <!--tab four-->
  473. <a href="#" onclick="openCity('tabfour')" class="hint--top" aria-label="harper roswell"><img src="https://placehold.it/100"></a>
  474. <!--tab five-->
  475. <a href="#" onclick="openCity('tabten')" class="hint--top" aria-label="jacqueline rousseau"><img src="https://placehold.it/100"></a>
  476. <a href="#" onclick="openCity('tabfive')" class="hint--top" aria-label="josephine davis"><img src="https://placehold.it/100"></a>
  477. <a href="#" onclick="openCity('tabsix')" class="hint--top" aria-label="lukas harlow"><img src="https://placehold.it/100"></a>
  478. <a href="#" onclick="openCity('tabseven')" class="hint--top" aria-label="piper sutton"><img src="https://placehold.it/100"></a>
  479. <a href="#" onclick="openCity('tabeight')" class="hint--top" aria-label="sophie prescott"><img src="https://placehold.it/100"></a>
  480. <a href="#" onclick="openCity('tabnine')" class="hint--top" aria-label="victoria brighton"><img src="https://placehold.it/100"></a>
  481.  
  482. <!-- want more tabs? just copy one of the above ones and change "openCity('tabone') to another number! make sure to also copy the tab page as well-->
  483. </div>
  484. <!-- end character nav-->
  485. </div>
  486.  
  487.  
  488. <!-- start tabs-->
  489.  
  490. <!--tab one-->
  491.  
  492. <div id="tabone" class="tab w3-animate-opacity">
  493. <!-- side statics-->
  494. <div class="sidestatcontainer">
  495.  
  496. <a class="hint--right hint--warning sidestat" aria-label="development status">
  497. <span class="statdot" style="background: #EEE721;"></span></a>
  498.  
  499. <a class="hint--right hint--success sidestat" aria-label="activity">
  500. <span class="statdot" style="background: #00cc00; "></span></a>
  501.  
  502. <a class="hint--right hint--error sidestat" aria-label="ship status">
  503. <span class="statdot" style="background: #cc0000; "></span></a>
  504.  
  505. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  506. <span class="statdot" style="background: #cc0000; "></span></a>
  507.  
  508. <a class="hint--right sidestat" aria-label="affiliation">
  509. <span class="statdot" style="background: #000; "></span></a>
  510.  
  511. </div>
  512. <!-- end side statics-->
  513.  
  514. <div class="container">
  515.  
  516. <!--right column-->
  517. <!-- start character header-->
  518. <div class="rightcolumn">
  519. <div class="characterheader">
  520. <span class="hint--sright" aria-label="face claim name">
  521. <img src="https://placehold.it/100"> </span>
  522. <div class="charactername">avery<b>archer</b></div>
  523. </div>
  524. <!--end character header-->
  525. <div class="bio" style="width:300px; background:#ddd;">
  526. <h1>bio<b>graphy</b></h1>
  527. <div class="biotext">
  528. write shit here!! it'll scroll?
  529. </div>
  530. </div>
  531. <!-- house info-->
  532. <div class="sorting">
  533. <h1>sorting<b>hat</b></h1>
  534. <div class="sortingtext">
  535. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  536. house info here
  537. </div>
  538. </div>
  539.  
  540. <!-- end house info-->
  541. <!-- start wand info-->
  542. <div class="wand">
  543. <h1>wand<b>info</b></h1>
  544. <div class="wandtext">
  545. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  546. wand info here
  547. </div>
  548. </div>
  549. <!-- end wand info-->
  550.  
  551. </div>
  552. <!--end right column-->
  553.  
  554. <!--stats column-->
  555. <div class="cstatsc">
  556. <!--stats-->
  557. <h1>quick<b>stats</b></h1>
  558. <div class="cstats">
  559. <table>
  560. <tr>
  561. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  562. <td>name</td>
  563. </tr>
  564.  
  565. <tr>
  566. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  567. <td>age</td>
  568. </tr>
  569.  
  570. <tr>
  571. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  572. <td>b day</td>
  573. </tr>
  574.  
  575. <tr>
  576. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  577. <td>gender</td>
  578. </tr>
  579.  
  580. <tr>
  581. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  582. <td>he/she/they</td>
  583. </tr>
  584.  
  585. <tr>
  586. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  587. <td>sexual</td>
  588. </tr>
  589.  
  590. <tr>
  591. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  592. <td>blood status</td>
  593. </tr>
  594.  
  595. <tr>
  596. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  597. <td>nationality</td>
  598. </tr>
  599.  
  600. <tr>
  601. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  602. <td>father</td>
  603. </tr>
  604.  
  605. <tr>
  606. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  607. <td>mother</td>
  608. </tr>
  609.  
  610. <tr>
  611. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  612. <td>job</td>
  613. </tr>
  614.  
  615. <tr>
  616. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  617. <td>city, country</td>
  618. </tr>
  619.  
  620. <tr>
  621. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  622. <td>city, country</td>
  623. </tr>
  624.  
  625. <tr>
  626. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  627. <td>zodiac</td>
  628. </tr>
  629.  
  630. <tr>
  631. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  632. <td>xxxx</td>
  633. </tr>
  634.  
  635. <tr>
  636. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  637. <td>type x, the x</td>
  638. </tr>
  639.  
  640. <tr>
  641. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  642. <td>alignment</td>
  643. </tr>
  644.  
  645. <tr>
  646. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  647. <td>temperament</td>
  648. </tr>
  649.  
  650. <tr>
  651. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  652. <td>the archetype</td>
  653. </tr>
  654.  
  655. <tr>
  656. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  657. <td>element</td>
  658. </tr>
  659.  
  660. </table>
  661. </div>
  662. <!-- end stats-->
  663. </div>
  664. <!-- end stats column-->
  665.  
  666. <!-- links column-->
  667. <div class="tagsc">
  668. <!-- another image i guess-->
  669. <img src="https://placehold.it/191x215">
  670.  
  671. <!-- start links-->
  672. <div class="links">
  673. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  674. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  675. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  676. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  677. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  678. <a href="#">blog</a>
  679. </div>
  680. </div>
  681.  
  682. <!--end links-->
  683.  
  684. <!-- start traits-->
  685. <div class="traits">
  686. <table>
  687. <tbody>
  688. <tr>
  689. <td title="definition">positive trait
  690. <td title="definition">positive trait
  691. </tr>
  692. <tr>
  693. <td title="definition">neutral trait
  694. <td title="definition">neutral trait
  695. </tr>
  696. <tr>
  697. <td title="definition">negitive trait
  698. <td title="definition">negitive trait
  699. </tr>
  700. </tbody>
  701. </table>
  702. </div>
  703. <!-- end traits-->
  704.  
  705. <!-- start tv tropes-->
  706. <div class="tvtropes">
  707. <h1>TV<b>TROPES</b></h1>
  708. <table cellspacing="9">
  709. <tbody>
  710. <tr>
  711. <td style="background-image: url('https://placehold.it/100');">
  712. <a href="/">
  713. trope<br>here
  714. </a>
  715. </td>
  716. <td style="background-image: url('https://placehold.it/100');">
  717. <a href="/">
  718. trope<br>here
  719. </a>
  720. </td>
  721. <td style="background-image: url('https://placehold.it/100');">
  722. <a href="/">
  723. trope<br>here
  724. </a>
  725. </td>
  726. </tr>
  727. <tr>
  728. <td style="background-image: url('https://placehold.it/100');">
  729. <a href="/">
  730. trope<br>here
  731. </a>
  732. </td>
  733.  
  734. <td style="background-image: url('https://placehold.it/100');">
  735. <a href="/">
  736. trope<br>here
  737. </a>
  738. </td>
  739. <td style="background-image: url('https://placehold.it/100');">
  740. <a href="/">
  741. trope<br>here
  742. </a>
  743. </td>
  744. </tr>
  745. <tr>
  746. <td style="background-image: url('https://placehold.it/100');">
  747. <a href="/">
  748. trope<br>here
  749. </a>
  750. </td>
  751.  
  752. <td style="background-image: url('https://placehold.it/100');">
  753. <a href="/">
  754. trope<br>here
  755. </a>
  756. </td>
  757. <td style="background-image: url('https://placehold.it/100');">
  758. <a href="/">
  759. trope<br>here
  760. </a>
  761. </td>
  762. </tr>
  763. </tbody></table>
  764. </div>
  765. <!-- end tv tropes-->
  766.  
  767.  
  768. </div>
  769. <!--end container-->
  770. </div>
  771.  
  772. <!-- end tab one-->
  773.  
  774. <!-- start tab two-->
  775.  
  776. <div id="tabtwo" class="tab w3-animate-opacity" style="display:none">
  777. <!-- side statics-->
  778. <div class="sidestatcontainer">
  779.  
  780. <a class="hint--right hint--warning sidestat" aria-label="development status">
  781. <span class="statdot" style="background: #EEE721;"></span></a>
  782.  
  783. <a class="hint--right hint--success sidestat" aria-label="activity">
  784. <span class="statdot" style="background: #00cc00; "></span></a>
  785.  
  786. <a class="hint--right hint--error sidestat" aria-label="ship status">
  787. <span class="statdot" style="background: #cc0000; "></span></a>
  788.  
  789. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  790. <span class="statdot" style="background: #cc0000; "></span></a>
  791.  
  792. <a class="hint--right sidestat" aria-label="affiliation">
  793. <span class="statdot" style="background: #000; "></span></a>
  794.  
  795. </div>
  796. <!-- end side statics-->
  797.  
  798. <div class="container">
  799.  
  800. <!--right column-->
  801. <!-- start character header-->
  802. <div class="rightcolumn">
  803. <div class="characterheader">
  804. <span class="hint--sright" aria-label="hannah new">
  805. <img src="https://placehold.it/100"> </span>
  806. <div class="charactername">eleanor<b>guthrie</b></div>
  807. </div>
  808. <!--end character header-->
  809. <div class="bio" style="width:300px; background:#ddd;">
  810. <h1>bio<b>graphy</b></h1>
  811. <div class="biotext">
  812. write shit here!! it'll scroll?
  813. </div>
  814. </div>
  815. <!-- house info-->
  816. <div class="sorting">
  817. <h1>sorting<b>hat</b></h1>
  818. <div class="sortingtext">
  819. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  820. house info here
  821. </div>
  822. </div>
  823.  
  824. <!-- end house info-->
  825. <!-- start wand info-->
  826. <div class="wand">
  827. <h1>wand<b>info</b></h1>
  828. <div class="wandtext">
  829. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  830. wand info here
  831. </div>
  832. </div>
  833. <!-- end wand info-->
  834.  
  835. </div>
  836. <!--end right column-->
  837.  
  838. <!--stats column-->
  839. <div class="cstatsc">
  840. <!--stats-->
  841. <h1>quick<b>stats</b></h1>
  842. <div class="cstats">
  843. <table>
  844. <tr>
  845. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  846. <td>name</td>
  847. </tr>
  848.  
  849. <tr>
  850. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  851. <td>age</td>
  852. </tr>
  853.  
  854. <tr>
  855. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  856. <td>b day</td>
  857. </tr>
  858.  
  859. <tr>
  860. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  861. <td>gender</td>
  862. </tr>
  863.  
  864. <tr>
  865. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  866. <td>he/she/they</td>
  867. </tr>
  868.  
  869. <tr>
  870. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  871. <td>sexual</td>
  872. </tr>
  873.  
  874. <tr>
  875. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  876. <td>blood status</td>
  877. </tr>
  878.  
  879. <tr>
  880. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  881. <td>nationality</td>
  882. </tr>
  883.  
  884. <tr>
  885. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  886. <td>father</td>
  887. </tr>
  888.  
  889. <tr>
  890. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  891. <td>mother</td>
  892. </tr>
  893.  
  894. <tr>
  895. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  896. <td>job</td>
  897. </tr>
  898.  
  899. <tr>
  900. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  901. <td>city, country</td>
  902. </tr>
  903.  
  904. <tr>
  905. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  906. <td>city, country</td>
  907. </tr>
  908.  
  909. <tr>
  910. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  911. <td>zodiac</td>
  912. </tr>
  913.  
  914. <tr>
  915. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  916. <td>xxxx</td>
  917. </tr>
  918.  
  919. <tr>
  920. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  921. <td>type x, the x</td>
  922. </tr>
  923.  
  924. <tr>
  925. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  926. <td>alignment</td>
  927. </tr>
  928.  
  929. <tr>
  930. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  931. <td>temperament</td>
  932. </tr>
  933.  
  934. <tr>
  935. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  936. <td>the archetype</td>
  937. </tr>
  938.  
  939. <tr>
  940. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  941. <td>element</td>
  942. </tr>
  943.  
  944. </table>
  945. </div>
  946. <!-- end stats-->
  947. </div>
  948. <!-- end stats column-->
  949.  
  950. <!-- links column-->
  951. <div class="tagsc">
  952. <!-- another image i guess-->
  953. <img src="https://placehold.it/191x215">
  954.  
  955. <!-- start links-->
  956. <div class="links">
  957. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  958. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  959. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  960. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  961. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  962. <a href="#">blog</a>
  963. </div>
  964. </div>
  965.  
  966. <!--end links-->
  967.  
  968. <!-- start traits-->
  969. <div class="traits">
  970. <table>
  971. <tbody>
  972. <tr>
  973. <td title="definition">positive trait
  974. <td title="definition">positive trait
  975. </tr>
  976. <tr>
  977. <td title="definition">neutral trait
  978. <td title="definition">neutral trait
  979. </tr>
  980. <tr>
  981. <td title="definition">negitive trait
  982. <td title="definition">negitive trait
  983. </tr>
  984. </tbody>
  985. </table>
  986. </div>
  987. <!-- end traits-->
  988.  
  989. <!-- start tv tropes-->
  990. <div class="tvtropes">
  991. <h1>TV<b>TROPES</b></h1>
  992. <table cellspacing="9">
  993. <tbody>
  994. <tr>
  995. <td style="background-image: url('https://placehold.it/100');">
  996. <a href="/">
  997. trope<br>here
  998. </a>
  999. </td>
  1000. <td style="background-image: url('https://placehold.it/100');">
  1001. <a href="/">
  1002. trope<br>here
  1003. </a>
  1004. </td>
  1005. <td style="background-image: url('https://placehold.it/100');">
  1006. <a href="/">
  1007. trope<br>here
  1008. </a>
  1009. </td>
  1010. </tr>
  1011. <tr>
  1012. <td style="background-image: url('https://placehold.it/100');">
  1013. <a href="/">
  1014. trope<br>here
  1015. </a>
  1016. </td>
  1017.  
  1018. <td style="background-image: url('https://placehold.it/100');">
  1019. <a href="/">
  1020. trope<br>here
  1021. </a>
  1022. </td>
  1023. <td style="background-image: url('https://placehold.it/100');">
  1024. <a href="/">
  1025. trope<br>here
  1026. </a>
  1027. </td>
  1028. </tr>
  1029. <tr>
  1030. <td style="background-image: url('https://placehold.it/100');">
  1031. <a href="/">
  1032. trope<br>here
  1033. </a>
  1034. </td>
  1035.  
  1036. <td style="background-image: url('https://placehold.it/100');">
  1037. <a href="/">
  1038. trope<br>here
  1039. </a>
  1040. </td>
  1041. <td style="background-image: url('https://placehold.it/100');">
  1042. <a href="/">
  1043. trope<br>here
  1044. </a>
  1045. </td>
  1046. </tr>
  1047. </tbody></table>
  1048. </div>
  1049. <!-- end tv tropes-->
  1050.  
  1051.  
  1052. </div>
  1053. <!--end container-->
  1054. </div>
  1055.  
  1056. <!--end tab two-->
  1057.  
  1058. <!-- start tab three-->
  1059.  
  1060. <div id="tabthree" class="tab w3-animate-opacity" style="display:none">
  1061. <!-- side statics-->
  1062. <div class="sidestatcontainer">
  1063.  
  1064. <a class="hint--right hint--warning sidestat" aria-label="development status">
  1065. <span class="statdot" style="background: #EEE721;"></span></a>
  1066.  
  1067. <a class="hint--right hint--success sidestat" aria-label="activity">
  1068. <span class="statdot" style="background: #00cc00; "></span></a>
  1069.  
  1070. <a class="hint--right hint--error sidestat" aria-label="ship status">
  1071. <span class="statdot" style="background: #cc0000; "></span></a>
  1072.  
  1073. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  1074. <span class="statdot" style="background: #cc0000; "></span></a>
  1075.  
  1076. <a class="hint--right sidestat" aria-label="affiliation">
  1077. <span class="statdot" style="background: #000; "></span></a>
  1078.  
  1079. </div>
  1080. <!-- end side statics-->
  1081.  
  1082. <div class="container">
  1083.  
  1084. <!--right column-->
  1085. <!-- start character header-->
  1086. <div class="rightcolumn">
  1087. <div class="characterheader">
  1088. <span class="hint--sright" aria-label="keira knightley">
  1089. <img src="https://placehold.it/100"> </span>
  1090. <div class="charactername">elizabeth<b>swann</b></div>
  1091. </div>
  1092. <!--end character header-->
  1093. <div class="bio" style="width:300px; background:#ddd;">
  1094. <h1>bio<b>graphy</b></h1>
  1095. <div class="biotext">
  1096. write shit here!! it'll scroll?
  1097. </div>
  1098. </div>
  1099. <!-- house info-->
  1100. <div class="sorting">
  1101. <h1>sorting<b>hat</b></h1>
  1102. <div class="sortingtext">
  1103. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  1104. house info here
  1105. </div>
  1106. </div>
  1107.  
  1108. <!-- end house info-->
  1109. <!-- start wand info-->
  1110. <div class="wand">
  1111. <h1>wand<b>info</b></h1>
  1112. <div class="wandtext">
  1113. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  1114. wand info here
  1115. </div>
  1116. </div>
  1117. <!-- end wand info-->
  1118.  
  1119. </div>
  1120. <!--end right column-->
  1121.  
  1122. <!--stats column-->
  1123. <div class="cstatsc">
  1124. <!--stats-->
  1125. <h1>quick<b>stats</b></h1>
  1126. <div class="cstats">
  1127. <table>
  1128. <tr>
  1129. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  1130. <td>name</td>
  1131. </tr>
  1132.  
  1133. <tr>
  1134. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  1135. <td>age</td>
  1136. </tr>
  1137.  
  1138. <tr>
  1139. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  1140. <td>b day</td>
  1141. </tr>
  1142.  
  1143. <tr>
  1144. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  1145. <td>gender</td>
  1146. </tr>
  1147.  
  1148. <tr>
  1149. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  1150. <td>he/she/they</td>
  1151. </tr>
  1152.  
  1153. <tr>
  1154. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  1155. <td>sexual</td>
  1156. </tr>
  1157.  
  1158. <tr>
  1159. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  1160. <td>blood status</td>
  1161. </tr>
  1162.  
  1163. <tr>
  1164. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  1165. <td>nationality</td>
  1166. </tr>
  1167.  
  1168. <tr>
  1169. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  1170. <td>father</td>
  1171. </tr>
  1172.  
  1173. <tr>
  1174. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  1175. <td>mother</td>
  1176. </tr>
  1177.  
  1178. <tr>
  1179. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  1180. <td>job</td>
  1181. </tr>
  1182.  
  1183. <tr>
  1184. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  1185. <td>city, country</td>
  1186. </tr>
  1187.  
  1188. <tr>
  1189. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  1190. <td>city, country</td>
  1191. </tr>
  1192.  
  1193. <tr>
  1194. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  1195. <td>zodiac</td>
  1196. </tr>
  1197.  
  1198. <tr>
  1199. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  1200. <td>xxxx</td>
  1201. </tr>
  1202.  
  1203. <tr>
  1204. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  1205. <td>type x, the x</td>
  1206. </tr>
  1207.  
  1208. <tr>
  1209. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  1210. <td>alignment</td>
  1211. </tr>
  1212.  
  1213. <tr>
  1214. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  1215. <td>temperament</td>
  1216. </tr>
  1217.  
  1218. <tr>
  1219. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  1220. <td>the archetype</td>
  1221. </tr>
  1222.  
  1223. <tr>
  1224. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  1225. <td>element</td>
  1226. </tr>
  1227.  
  1228. </table>
  1229. </div>
  1230. <!-- end stats-->
  1231. </div>
  1232. <!-- end stats column-->
  1233.  
  1234. <!-- links column-->
  1235. <div class="tagsc">
  1236. <!-- another image i guess-->
  1237. <img src="https://placehold.it/191x215">
  1238.  
  1239. <!-- start links-->
  1240. <div class="links">
  1241. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  1242. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1243. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  1244. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1245. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  1246. <a href="#">blog</a>
  1247. </div>
  1248. </div>
  1249.  
  1250. <!--end links-->
  1251.  
  1252. <!-- start traits-->
  1253. <div class="traits">
  1254. <table>
  1255. <tbody>
  1256. <tr>
  1257. <td title="definition">positive trait
  1258. <td title="definition">positive trait
  1259. </tr>
  1260. <tr>
  1261. <td title="definition">neutral trait
  1262. <td title="definition">neutral trait
  1263. </tr>
  1264. <tr>
  1265. <td title="definition">negitive trait
  1266. <td title="definition">negitive trait
  1267. </tr>
  1268. </tbody>
  1269. </table>
  1270. </div>
  1271. <!-- end traits-->
  1272.  
  1273. <!-- start tv tropes-->
  1274. <div class="tvtropes">
  1275. <h1>TV<b>TROPES</b></h1>
  1276. <table cellspacing="9">
  1277. <tbody>
  1278. <tr>
  1279. <td style="background-image: url('https://placehold.it/100');">
  1280. <a href="/">
  1281. trope<br>here
  1282. </a>
  1283. </td>
  1284. <td style="background-image: url('https://placehold.it/100');">
  1285. <a href="/">
  1286. trope<br>here
  1287. </a>
  1288. </td>
  1289. <td style="background-image: url('https://placehold.it/100');">
  1290. <a href="/">
  1291. trope<br>here
  1292. </a>
  1293. </td>
  1294. </tr>
  1295. <tr>
  1296. <td style="background-image: url('https://placehold.it/100');">
  1297. <a href="/">
  1298. trope<br>here
  1299. </a>
  1300. </td>
  1301.  
  1302. <td style="background-image: url('https://placehold.it/100');">
  1303. <a href="/">
  1304. trope<br>here
  1305. </a>
  1306. </td>
  1307. <td style="background-image: url('https://placehold.it/100');">
  1308. <a href="/">
  1309. trope<br>here
  1310. </a>
  1311. </td>
  1312. </tr>
  1313. <tr>
  1314. <td style="background-image: url('https://placehold.it/100');">
  1315. <a href="/">
  1316. trope<br>here
  1317. </a>
  1318. </td>
  1319.  
  1320. <td style="background-image: url('https://placehold.it/100');">
  1321. <a href="/">
  1322. trope<br>here
  1323. </a>
  1324. </td>
  1325. <td style="background-image: url('https://placehold.it/100');">
  1326. <a href="/">
  1327. trope<br>here
  1328. </a>
  1329. </td>
  1330. </tr>
  1331. </tbody></table>
  1332. </div>
  1333. <!-- end tv tropes-->
  1334.  
  1335.  
  1336. </div>
  1337. <!--end container-->
  1338. </div>
  1339.  
  1340. <!--end tab three-->
  1341.  
  1342. <!-- start tab four-->
  1343.  
  1344. <div id="tabfour" class="tab w3-animate-opacity" style="display:none">
  1345. <!-- side statics-->
  1346. <div class="sidestatcontainer">
  1347.  
  1348. <a class="hint--right hint--warning sidestat" aria-label="development status">
  1349. <span class="statdot" style="background: #EEE721;"></span></a>
  1350.  
  1351. <a class="hint--right hint--success sidestat" aria-label="activity">
  1352. <span class="statdot" style="background: #00cc00; "></span></a>
  1353.  
  1354. <a class="hint--right hint--error sidestat" aria-label="ship status">
  1355. <span class="statdot" style="background: #cc0000; "></span></a>
  1356.  
  1357. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  1358. <span class="statdot" style="background: #cc0000; "></span></a>
  1359.  
  1360. <a class="hint--right sidestat" aria-label="affiliation">
  1361. <span class="statdot" style="background: #000; "></span></a>
  1362.  
  1363. </div>
  1364. <!-- end side statics-->
  1365.  
  1366. <div class="container">
  1367.  
  1368. <!--right column-->
  1369. <!-- start character header-->
  1370. <div class="rightcolumn">
  1371. <div class="characterheader">
  1372. <span class="hint--sright" aria-label="brie larson">
  1373. <img src="https://placehold.it/100"> </span>
  1374. <div class="charactername">harper<b>roswell</b></div>
  1375. </div>
  1376. <!--end character header-->
  1377. <div class="bio" style="width:300px; background:#ddd;">
  1378. <h1>bio<b>graphy</b></h1>
  1379. <div class="biotext">
  1380. write shit here!! it'll scroll?
  1381. </div>
  1382. </div>
  1383. <!-- house info-->
  1384. <div class="sorting">
  1385. <h1>sorting<b>hat</b></h1>
  1386. <div class="sortingtext">
  1387. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  1388. house info here
  1389. </div>
  1390. </div>
  1391.  
  1392. <!-- end house info-->
  1393. <!-- start wand info-->
  1394. <div class="wand">
  1395. <h1>wand<b>info</b></h1>
  1396. <div class="wandtext">
  1397. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  1398. wand info here
  1399. </div>
  1400. </div>
  1401. <!-- end wand info-->
  1402.  
  1403. </div>
  1404. <!--end right column-->
  1405.  
  1406. <!--stats column-->
  1407. <div class="cstatsc">
  1408. <!--stats-->
  1409. <h1>quick<b>stats</b></h1>
  1410. <div class="cstats">
  1411. <table>
  1412. <tr>
  1413. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  1414. <td>name</td>
  1415. </tr>
  1416.  
  1417. <tr>
  1418. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  1419. <td>age</td>
  1420. </tr>
  1421.  
  1422. <tr>
  1423. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  1424. <td>b day</td>
  1425. </tr>
  1426.  
  1427. <tr>
  1428. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  1429. <td>gender</td>
  1430. </tr>
  1431.  
  1432. <tr>
  1433. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  1434. <td>he/she/they</td>
  1435. </tr>
  1436.  
  1437. <tr>
  1438. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  1439. <td>sexual</td>
  1440. </tr>
  1441.  
  1442. <tr>
  1443. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  1444. <td>blood status</td>
  1445. </tr>
  1446.  
  1447. <tr>
  1448. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  1449. <td>nationality</td>
  1450. </tr>
  1451.  
  1452. <tr>
  1453. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  1454. <td>father</td>
  1455. </tr>
  1456.  
  1457. <tr>
  1458. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  1459. <td>mother</td>
  1460. </tr>
  1461.  
  1462. <tr>
  1463. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  1464. <td>job</td>
  1465. </tr>
  1466.  
  1467. <tr>
  1468. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  1469. <td>city, country</td>
  1470. </tr>
  1471.  
  1472. <tr>
  1473. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  1474. <td>city, country</td>
  1475. </tr>
  1476.  
  1477. <tr>
  1478. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  1479. <td>zodiac</td>
  1480. </tr>
  1481.  
  1482. <tr>
  1483. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  1484. <td>xxxx</td>
  1485. </tr>
  1486.  
  1487. <tr>
  1488. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  1489. <td>type x, the x</td>
  1490. </tr>
  1491.  
  1492. <tr>
  1493. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  1494. <td>alignment</td>
  1495. </tr>
  1496.  
  1497. <tr>
  1498. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  1499. <td>temperament</td>
  1500. </tr>
  1501.  
  1502. <tr>
  1503. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  1504. <td>the archetype</td>
  1505. </tr>
  1506.  
  1507. <tr>
  1508. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  1509. <td>element</td>
  1510. </tr>
  1511.  
  1512. </table>
  1513. </div>
  1514. <!-- end stats-->
  1515. </div>
  1516. <!-- end stats column-->
  1517.  
  1518. <!-- links column-->
  1519. <div class="tagsc">
  1520. <!-- another image i guess-->
  1521. <img src="https://placehold.it/191x215">
  1522.  
  1523. <!-- start links-->
  1524. <div class="links">
  1525. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  1526. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1527. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  1528. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1529. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  1530. <a href="#">blog</a>
  1531. </div>
  1532. </div>
  1533.  
  1534. <!--end links-->
  1535.  
  1536. <!-- start traits-->
  1537. <div class="traits">
  1538. <table>
  1539. <tbody>
  1540. <tr>
  1541. <td title="definition">positive trait
  1542. <td title="definition">positive trait
  1543. </tr>
  1544. <tr>
  1545. <td title="definition">neutral trait
  1546. <td title="definition">neutral trait
  1547. </tr>
  1548. <tr>
  1549. <td title="definition">negitive trait
  1550. <td title="definition">negitive trait
  1551. </tr>
  1552. </tbody>
  1553. </table>
  1554. </div>
  1555. <!-- end traits-->
  1556.  
  1557. <!-- start tv tropes-->
  1558. <div class="tvtropes">
  1559. <h1>TV<b>TROPES</b></h1>
  1560. <table cellspacing="9">
  1561. <tbody>
  1562. <tr>
  1563. <td style="background-image: url('https://placehold.it/100');">
  1564. <a href="/">
  1565. trope<br>here
  1566. </a>
  1567. </td>
  1568. <td style="background-image: url('https://placehold.it/100');">
  1569. <a href="/">
  1570. trope<br>here
  1571. </a>
  1572. </td>
  1573. <td style="background-image: url('https://placehold.it/100');">
  1574. <a href="/">
  1575. trope<br>here
  1576. </a>
  1577. </td>
  1578. </tr>
  1579. <tr>
  1580. <td style="background-image: url('https://placehold.it/100');">
  1581. <a href="/">
  1582. trope<br>here
  1583. </a>
  1584. </td>
  1585.  
  1586. <td style="background-image: url('https://placehold.it/100');">
  1587. <a href="/">
  1588. trope<br>here
  1589. </a>
  1590. </td>
  1591. <td style="background-image: url('https://placehold.it/100');">
  1592. <a href="/">
  1593. trope<br>here
  1594. </a>
  1595. </td>
  1596. </tr>
  1597. <tr>
  1598. <td style="background-image: url('https://placehold.it/100');">
  1599. <a href="/">
  1600. trope<br>here
  1601. </a>
  1602. </td>
  1603.  
  1604. <td style="background-image: url('https://placehold.it/100');">
  1605. <a href="/">
  1606. trope<br>here
  1607. </a>
  1608. </td>
  1609. <td style="background-image: url('https://placehold.it/100');">
  1610. <a href="/">
  1611. trope<br>here
  1612. </a>
  1613. </td>
  1614. </tr>
  1615. </tbody></table>
  1616. </div>
  1617. <!-- end tv tropes-->
  1618.  
  1619.  
  1620. </div>
  1621. <!--end container-->
  1622. </div>
  1623.  
  1624. <!--end tab four-->
  1625.  
  1626. <!--tab ten-->
  1627.  
  1628. <div id="tabten" class="tab w3-animate-opacity">
  1629. <!-- side statics-->
  1630. <div class="sidestatcontainer">
  1631.  
  1632. <a class="hint--right hint--warning sidestat" aria-label="development status">
  1633. <span class="statdot" style="background: #EEE721;"></span></a>
  1634.  
  1635. <a class="hint--right hint--success sidestat" aria-label="activity">
  1636. <span class="statdot" style="background: #00cc00; "></span></a>
  1637.  
  1638. <a class="hint--right hint--error sidestat" aria-label="ship status">
  1639. <span class="statdot" style="background: #cc0000; "></span></a>
  1640.  
  1641. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  1642. <span class="statdot" style="background: #cc0000; "></span></a>
  1643.  
  1644. <a class="hint--right sidestat" aria-label="affiliation">
  1645. <span class="statdot" style="background: #000; "></span></a>
  1646.  
  1647. </div>
  1648. <!-- end side statics-->
  1649.  
  1650. <div class="container">
  1651.  
  1652. <!--right column-->
  1653. <!-- start character header-->
  1654. <div class="rightcolumn">
  1655. <div class="characterheader">
  1656. <span class="hint--sright" aria-label="niamh walsh">
  1657. <img src="https://placehold.it/100"> </span>
  1658. <div class="charactername">jacqueline<b>rousseau</b></div>
  1659. </div>
  1660. <!--end character header-->
  1661. <div class="bio" style="width:300px; background:#ddd;">
  1662. <h1>bio<b>graphy</b></h1>
  1663. <div class="biotext">
  1664. write shit here!! it'll scroll?
  1665. </div>
  1666. </div>
  1667. <!-- house info-->
  1668. <div class="sorting">
  1669. <h1>sorting<b>hat</b></h1>
  1670. <div class="sortingtext">
  1671. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  1672. house info here
  1673. </div>
  1674. </div>
  1675.  
  1676. <!-- end house info-->
  1677. <!-- start wand info-->
  1678. <div class="wand">
  1679. <h1>wand<b>info</b></h1>
  1680. <div class="wandtext">
  1681. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  1682. wand info here
  1683. </div>
  1684. </div>
  1685. <!-- end wand info-->
  1686.  
  1687. </div>
  1688. <!--end right column-->
  1689.  
  1690. <!--stats column-->
  1691. <div class="cstatsc">
  1692. <!--stats-->
  1693. <h1>quick<b>stats</b></h1>
  1694. <div class="cstats">
  1695. <table>
  1696. <tr>
  1697. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  1698. <td>name</td>
  1699. </tr>
  1700.  
  1701. <tr>
  1702. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  1703. <td>age</td>
  1704. </tr>
  1705.  
  1706. <tr>
  1707. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  1708. <td>b day</td>
  1709. </tr>
  1710.  
  1711. <tr>
  1712. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  1713. <td>gender</td>
  1714. </tr>
  1715.  
  1716. <tr>
  1717. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  1718. <td>he/she/they</td>
  1719. </tr>
  1720.  
  1721. <tr>
  1722. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  1723. <td>sexual</td>
  1724. </tr>
  1725.  
  1726. <tr>
  1727. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  1728. <td>blood status</td>
  1729. </tr>
  1730.  
  1731. <tr>
  1732. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  1733. <td>nationality</td>
  1734. </tr>
  1735.  
  1736. <tr>
  1737. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  1738. <td>father</td>
  1739. </tr>
  1740.  
  1741. <tr>
  1742. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  1743. <td>mother</td>
  1744. </tr>
  1745.  
  1746. <tr>
  1747. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  1748. <td>job</td>
  1749. </tr>
  1750.  
  1751. <tr>
  1752. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  1753. <td>city, country</td>
  1754. </tr>
  1755.  
  1756. <tr>
  1757. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  1758. <td>city, country</td>
  1759. </tr>
  1760.  
  1761. <tr>
  1762. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  1763. <td>zodiac</td>
  1764. </tr>
  1765.  
  1766. <tr>
  1767. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  1768. <td>xxxx</td>
  1769. </tr>
  1770.  
  1771. <tr>
  1772. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  1773. <td>type x, the x</td>
  1774. </tr>
  1775.  
  1776. <tr>
  1777. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  1778. <td>alignment</td>
  1779. </tr>
  1780.  
  1781. <tr>
  1782. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  1783. <td>temperament</td>
  1784. </tr>
  1785.  
  1786. <tr>
  1787. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  1788. <td>the archetype</td>
  1789. </tr>
  1790.  
  1791. <tr>
  1792. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  1793. <td>element</td>
  1794. </tr>
  1795.  
  1796. </table>
  1797. </div>
  1798. <!-- end stats-->
  1799. </div>
  1800. <!-- end stats column-->
  1801.  
  1802. <!-- links column-->
  1803. <div class="tagsc">
  1804. <!-- another image i guess-->
  1805. <img src="https://placehold.it/191x215">
  1806.  
  1807. <!-- start links-->
  1808. <div class="links">
  1809. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  1810. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1811. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  1812. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1813. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  1814. <a href="#">blog</a>
  1815. </div>
  1816. </div>
  1817.  
  1818. <!--end links-->
  1819.  
  1820. <!-- start traits-->
  1821. <div class="traits">
  1822. <table>
  1823. <tbody>
  1824. <tr>
  1825. <td title="definition">positive trait
  1826. <td title="definition">positive trait
  1827. </tr>
  1828. <tr>
  1829. <td title="definition">neutral trait
  1830. <td title="definition">neutral trait
  1831. </tr>
  1832. <tr>
  1833. <td title="definition">negitive trait
  1834. <td title="definition">negitive trait
  1835. </tr>
  1836. </tbody>
  1837. </table>
  1838. </div>
  1839. <!-- end traits-->
  1840.  
  1841. <!-- start tv tropes-->
  1842. <div class="tvtropes">
  1843. <h1>TV<b>TROPES</b></h1>
  1844. <table cellspacing="9">
  1845. <tbody>
  1846. <tr>
  1847. <td style="background-image: url('https://placehold.it/100');">
  1848. <a href="/">
  1849. trope<br>here
  1850. </a>
  1851. </td>
  1852. <td style="background-image: url('https://placehold.it/100');">
  1853. <a href="/">
  1854. trope<br>here
  1855. </a>
  1856. </td>
  1857. <td style="background-image: url('https://placehold.it/100');">
  1858. <a href="/">
  1859. trope<br>here
  1860. </a>
  1861. </td>
  1862. </tr>
  1863. <tr>
  1864. <td style="background-image: url('https://placehold.it/100');">
  1865. <a href="/">
  1866. trope<br>here
  1867. </a>
  1868. </td>
  1869.  
  1870. <td style="background-image: url('https://placehold.it/100');">
  1871. <a href="/">
  1872. trope<br>here
  1873. </a>
  1874. </td>
  1875. <td style="background-image: url('https://placehold.it/100');">
  1876. <a href="/">
  1877. trope<br>here
  1878. </a>
  1879. </td>
  1880. </tr>
  1881. <tr>
  1882. <td style="background-image: url('https://placehold.it/100');">
  1883. <a href="/">
  1884. trope<br>here
  1885. </a>
  1886. </td>
  1887.  
  1888. <td style="background-image: url('https://placehold.it/100');">
  1889. <a href="/">
  1890. trope<br>here
  1891. </a>
  1892. </td>
  1893. <td style="background-image: url('https://placehold.it/100');">
  1894. <a href="/">
  1895. trope<br>here
  1896. </a>
  1897. </td>
  1898. </tr>
  1899. </tbody></table>
  1900. </div>
  1901. <!-- end tv tropes-->
  1902.  
  1903.  
  1904. </div>
  1905. <!--end container-->
  1906. </div>
  1907.  
  1908. <!-- end tab ten-->
  1909.  
  1910. <!-- start tab five-->
  1911.  
  1912. <div id="tabfive" class="tab w3-animate-opacity" style="display:none;">
  1913. <!-- side statics-->
  1914. <div class="sidestatcontainer">
  1915.  
  1916. <a class="hint--right hint--warning sidestat" aria-label="development status">
  1917. <span class="statdot" style="background: #EEE721;"></span></a>
  1918.  
  1919. <a class="hint--right hint--success sidestat" aria-label="activity">
  1920. <span class="statdot" style="background: #00cc00; "></span></a>
  1921.  
  1922. <a class="hint--right hint--error sidestat" aria-label="ship status">
  1923. <span class="statdot" style="background: #cc0000; "></span></a>
  1924.  
  1925. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  1926. <span class="statdot" style="background: #cc0000; "></span></a>
  1927.  
  1928. <a class="hint--right sidestat" aria-label="affiliation">
  1929. <span class="statdot" style="background: #000; "></span></a>
  1930.  
  1931. </div>
  1932. <!-- end side statics-->
  1933.  
  1934. <div class="container">
  1935.  
  1936. <!--right column-->
  1937. <!-- start character header-->
  1938. <div class="rightcolumn">
  1939. <div class="characterheader">
  1940. <span class="hint--sright" aria-label="face claim name">
  1941. <img src="https://placehold.it/100"> </span>
  1942. <div class="charactername">josephine<b>davis</b></div>
  1943. </div>
  1944. <!--end character header-->
  1945. <div class="bio" style="width:300px; background:#ddd;">
  1946. <h1>bio<b>graphy</b></h1>
  1947. <div class="biotext">
  1948. write shit here!! it'll scroll?
  1949. </div>
  1950. </div>
  1951. <!-- house info-->
  1952. <div class="sorting">
  1953. <h1>sorting<b>hat</b></h1>
  1954. <div class="sortingtext">
  1955. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  1956. house info here
  1957. </div>
  1958. </div>
  1959.  
  1960. <!-- end house info-->
  1961. <!-- start wand info-->
  1962. <div class="wand">
  1963. <h1>wand<b>info</b></h1>
  1964. <div class="wandtext">
  1965. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  1966. wand info here
  1967. </div>
  1968. </div>
  1969. <!-- end wand info-->
  1970.  
  1971. </div>
  1972. <!--end right column-->
  1973.  
  1974. <!--stats column-->
  1975. <div class="cstatsc">
  1976. <!--stats-->
  1977. <h1>quick<b>stats</b></h1>
  1978. <div class="cstats">
  1979. <table>
  1980. <tr>
  1981. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  1982. <td>name</td>
  1983. </tr>
  1984.  
  1985. <tr>
  1986. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  1987. <td>age</td>
  1988. </tr>
  1989.  
  1990. <tr>
  1991. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  1992. <td>b day</td>
  1993. </tr>
  1994.  
  1995. <tr>
  1996. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  1997. <td>gender</td>
  1998. </tr>
  1999.  
  2000. <tr>
  2001. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  2002. <td>he/she/they</td>
  2003. </tr>
  2004.  
  2005. <tr>
  2006. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  2007. <td>sexual</td>
  2008. </tr>
  2009.  
  2010. <tr>
  2011. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  2012. <td>blood status</td>
  2013. </tr>
  2014.  
  2015. <tr>
  2016. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  2017. <td>nationality</td>
  2018. </tr>
  2019.  
  2020. <tr>
  2021. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  2022. <td>father</td>
  2023. </tr>
  2024.  
  2025. <tr>
  2026. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  2027. <td>mother</td>
  2028. </tr>
  2029.  
  2030. <tr>
  2031. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  2032. <td>job</td>
  2033. </tr>
  2034.  
  2035. <tr>
  2036. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  2037. <td>city, country</td>
  2038. </tr>
  2039.  
  2040. <tr>
  2041. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  2042. <td>city, country</td>
  2043. </tr>
  2044.  
  2045. <tr>
  2046. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  2047. <td>zodiac</td>
  2048. </tr>
  2049.  
  2050. <tr>
  2051. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  2052. <td>xxxx</td>
  2053. </tr>
  2054.  
  2055. <tr>
  2056. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  2057. <td>type x, the x</td>
  2058. </tr>
  2059.  
  2060. <tr>
  2061. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  2062. <td>alignment</td>
  2063. </tr>
  2064.  
  2065. <tr>
  2066. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  2067. <td>temperament</td>
  2068. </tr>
  2069.  
  2070. <tr>
  2071. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  2072. <td>the archetype</td>
  2073. </tr>
  2074.  
  2075. <tr>
  2076. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  2077. <td>element</td>
  2078. </tr>
  2079.  
  2080. </table>
  2081. </div>
  2082. <!-- end stats-->
  2083. </div>
  2084. <!-- end stats column-->
  2085.  
  2086. <!-- links column-->
  2087. <div class="tagsc">
  2088. <!-- another image i guess-->
  2089. <img src="https://placehold.it/191x215">
  2090.  
  2091. <!-- start links-->
  2092. <div class="links">
  2093. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  2094. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2095. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  2096. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2097. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  2098. <a href="#">blog</a>
  2099. </div>
  2100. </div>
  2101.  
  2102. <!--end links-->
  2103.  
  2104. <!-- start traits-->
  2105. <div class="traits">
  2106. <table>
  2107. <tbody>
  2108. <tr>
  2109. <td title="definition">positive trait
  2110. <td title="definition">positive trait
  2111. </tr>
  2112. <tr>
  2113. <td title="definition">neutral trait
  2114. <td title="definition">neutral trait
  2115. </tr>
  2116. <tr>
  2117. <td title="definition">negitive trait
  2118. <td title="definition">negitive trait
  2119. </tr>
  2120. </tbody>
  2121. </table>
  2122. </div>
  2123. <!-- end traits-->
  2124.  
  2125. <!-- start tv tropes-->
  2126. <div class="tvtropes">
  2127. <h1>TV<b>TROPES</b></h1>
  2128. <table cellspacing="9">
  2129. <tbody>
  2130. <tr>
  2131. <td style="background-image: url('https://placehold.it/100');">
  2132. <a href="/">
  2133. trope<br>here
  2134. </a>
  2135. </td>
  2136. <td style="background-image: url('https://placehold.it/100');">
  2137. <a href="/">
  2138. trope<br>here
  2139. </a>
  2140. </td>
  2141. <td style="background-image: url('https://placehold.it/100');">
  2142. <a href="/">
  2143. trope<br>here
  2144. </a>
  2145. </td>
  2146. </tr>
  2147. <tr>
  2148. <td style="background-image: url('https://placehold.it/100');">
  2149. <a href="/">
  2150. trope<br>here
  2151. </a>
  2152. </td>
  2153.  
  2154. <td style="background-image: url('https://placehold.it/100');">
  2155. <a href="/">
  2156. trope<br>here
  2157. </a>
  2158. </td>
  2159. <td style="background-image: url('https://placehold.it/100');">
  2160. <a href="/">
  2161. trope<br>here
  2162. </a>
  2163. </td>
  2164. </tr>
  2165. <tr>
  2166. <td style="background-image: url('https://placehold.it/100');">
  2167. <a href="/">
  2168. trope<br>here
  2169. </a>
  2170. </td>
  2171.  
  2172. <td style="background-image: url('https://placehold.it/100');">
  2173. <a href="/">
  2174. trope<br>here
  2175. </a>
  2176. </td>
  2177. <td style="background-image: url('https://placehold.it/100');">
  2178. <a href="/">
  2179. trope<br>here
  2180. </a>
  2181. </td>
  2182. </tr>
  2183. </tbody></table>
  2184. </div>
  2185. <!-- end tv tropes-->
  2186.  
  2187.  
  2188. </div>
  2189. <!--end container-->
  2190. </div>
  2191.  
  2192. <!-- end tab five-->
  2193.  
  2194. <!--tab six-->
  2195.  
  2196. <div id="tabsix" class="tab w3-animate-opacity">
  2197. <!-- side statics-->
  2198. <div class="sidestatcontainer">
  2199.  
  2200. <a class="hint--right hint--warning sidestat" aria-label="development status">
  2201. <span class="statdot" style="background: #EEE721;"></span></a>
  2202.  
  2203. <a class="hint--right hint--success sidestat" aria-label="activity">
  2204. <span class="statdot" style="background: #00cc00; "></span></a>
  2205.  
  2206. <a class="hint--right hint--error sidestat" aria-label="ship status">
  2207. <span class="statdot" style="background: #cc0000; "></span></a>
  2208.  
  2209. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  2210. <span class="statdot" style="background: #cc0000; "></span></a>
  2211.  
  2212. <a class="hint--right sidestat" aria-label="affiliation">
  2213. <span class="statdot" style="background: #000; "></span></a>
  2214.  
  2215. </div>
  2216. <!-- end side statics-->
  2217.  
  2218. <div class="container">
  2219.  
  2220. <!--right column-->
  2221. <!-- start character header-->
  2222. <div class="rightcolumn">
  2223. <div class="characterheader">
  2224. <span class="hint--sright" aria-label="jason momoa">
  2225. <img src="https://placehold.it/100"> </span>
  2226. <div class="charactername">lukas<b>harlow</b></div>
  2227. </div>
  2228. <!--end character header-->
  2229. <div class="bio" style="width:300px; background:#ddd;">
  2230. <h1>bio<b>graphy</b></h1>
  2231. <div class="biotext">
  2232. write shit here!! it'll scroll?
  2233. </div>
  2234. </div>
  2235. <!-- house info-->
  2236. <div class="sorting">
  2237. <h1>sorting<b>hat</b></h1>
  2238. <div class="sortingtext">
  2239. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  2240. house info here
  2241. </div>
  2242. </div>
  2243.  
  2244. <!-- end house info-->
  2245. <!-- start wand info-->
  2246. <div class="wand">
  2247. <h1>wand<b>info</b></h1>
  2248. <div class="wandtext">
  2249. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  2250. wand info here
  2251. </div>
  2252. </div>
  2253. <!-- end wand info-->
  2254.  
  2255. </div>
  2256. <!--end right column-->
  2257.  
  2258. <!--stats column-->
  2259. <div class="cstatsc">
  2260. <!--stats-->
  2261. <h1>quick<b>stats</b></h1>
  2262. <div class="cstats">
  2263. <table>
  2264. <tr>
  2265. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  2266. <td>name</td>
  2267. </tr>
  2268.  
  2269. <tr>
  2270. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  2271. <td>age</td>
  2272. </tr>
  2273.  
  2274. <tr>
  2275. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  2276. <td>b day</td>
  2277. </tr>
  2278.  
  2279. <tr>
  2280. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  2281. <td>gender</td>
  2282. </tr>
  2283.  
  2284. <tr>
  2285. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  2286. <td>he/she/they</td>
  2287. </tr>
  2288.  
  2289. <tr>
  2290. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  2291. <td>sexual</td>
  2292. </tr>
  2293.  
  2294. <tr>
  2295. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  2296. <td>blood status</td>
  2297. </tr>
  2298.  
  2299. <tr>
  2300. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  2301. <td>nationality</td>
  2302. </tr>
  2303.  
  2304. <tr>
  2305. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  2306. <td>father</td>
  2307. </tr>
  2308.  
  2309. <tr>
  2310. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  2311. <td>mother</td>
  2312. </tr>
  2313.  
  2314. <tr>
  2315. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  2316. <td>job</td>
  2317. </tr>
  2318.  
  2319. <tr>
  2320. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  2321. <td>city, country</td>
  2322. </tr>
  2323.  
  2324. <tr>
  2325. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  2326. <td>city, country</td>
  2327. </tr>
  2328.  
  2329. <tr>
  2330. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  2331. <td>zodiac</td>
  2332. </tr>
  2333.  
  2334. <tr>
  2335. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  2336. <td>xxxx</td>
  2337. </tr>
  2338.  
  2339. <tr>
  2340. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  2341. <td>type x, the x</td>
  2342. </tr>
  2343.  
  2344. <tr>
  2345. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  2346. <td>alignment</td>
  2347. </tr>
  2348.  
  2349. <tr>
  2350. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  2351. <td>temperament</td>
  2352. </tr>
  2353.  
  2354. <tr>
  2355. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  2356. <td>the archetype</td>
  2357. </tr>
  2358.  
  2359. <tr>
  2360. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  2361. <td>element</td>
  2362. </tr>
  2363.  
  2364. </table>
  2365. </div>
  2366. <!-- end stats-->
  2367. </div>
  2368. <!-- end stats column-->
  2369.  
  2370. <!-- links column-->
  2371. <div class="tagsc">
  2372. <!-- another image i guess-->
  2373. <img src="https://placehold.it/191x215">
  2374.  
  2375. <!-- start links-->
  2376. <div class="links">
  2377. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  2378. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2379. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  2380. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2381. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  2382. <a href="#">blog</a>
  2383. </div>
  2384. </div>
  2385.  
  2386. <!--end links-->
  2387.  
  2388. <!-- start traits-->
  2389. <div class="traits">
  2390. <table>
  2391. <tbody>
  2392. <tr>
  2393. <td title="definition">positive trait
  2394. <td title="definition">positive trait
  2395. </tr>
  2396. <tr>
  2397. <td title="definition">neutral trait
  2398. <td title="definition">neutral trait
  2399. </tr>
  2400. <tr>
  2401. <td title="definition">negitive trait
  2402. <td title="definition">negitive trait
  2403. </tr>
  2404. </tbody>
  2405. </table>
  2406. </div>
  2407. <!-- end traits-->
  2408.  
  2409. <!-- start tv tropes-->
  2410. <div class="tvtropes">
  2411. <h1>TV<b>TROPES</b></h1>
  2412. <table cellspacing="9">
  2413. <tbody>
  2414. <tr>
  2415. <td style="background-image: url('https://placehold.it/100');">
  2416. <a href="/">
  2417. trope<br>here
  2418. </a>
  2419. </td>
  2420. <td style="background-image: url('https://placehold.it/100');">
  2421. <a href="/">
  2422. trope<br>here
  2423. </a>
  2424. </td>
  2425. <td style="background-image: url('https://placehold.it/100');">
  2426. <a href="/">
  2427. trope<br>here
  2428. </a>
  2429. </td>
  2430. </tr>
  2431. <tr>
  2432. <td style="background-image: url('https://placehold.it/100');">
  2433. <a href="/">
  2434. trope<br>here
  2435. </a>
  2436. </td>
  2437.  
  2438. <td style="background-image: url('https://placehold.it/100');">
  2439. <a href="/">
  2440. trope<br>here
  2441. </a>
  2442. </td>
  2443. <td style="background-image: url('https://placehold.it/100');">
  2444. <a href="/">
  2445. trope<br>here
  2446. </a>
  2447. </td>
  2448. </tr>
  2449. <tr>
  2450. <td style="background-image: url('https://placehold.it/100');">
  2451. <a href="/">
  2452. trope<br>here
  2453. </a>
  2454. </td>
  2455.  
  2456. <td style="background-image: url('https://placehold.it/100');">
  2457. <a href="/">
  2458. trope<br>here
  2459. </a>
  2460. </td>
  2461. <td style="background-image: url('https://placehold.it/100');">
  2462. <a href="/">
  2463. trope<br>here
  2464. </a>
  2465. </td>
  2466. </tr>
  2467. </tbody></table>
  2468. </div>
  2469. <!-- end tv tropes-->
  2470.  
  2471.  
  2472. </div>
  2473. <!--end container-->
  2474. </div>
  2475.  
  2476. <!-- end tab six-->
  2477.  
  2478. <!--tab seven-->
  2479.  
  2480. <div id="tabseven" class="tab w3-animate-opacity">
  2481. <!-- side statics-->
  2482. <div class="sidestatcontainer">
  2483.  
  2484. <a class="hint--right hint--warning sidestat" aria-label="development status">
  2485. <span class="statdot" style="background: #EEE721;"></span></a>
  2486.  
  2487. <a class="hint--right hint--success sidestat" aria-label="activity">
  2488. <span class="statdot" style="background: #00cc00; "></span></a>
  2489.  
  2490. <a class="hint--right hint--error sidestat" aria-label="ship status">
  2491. <span class="statdot" style="background: #cc0000; "></span></a>
  2492.  
  2493. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  2494. <span class="statdot" style="background: #cc0000; "></span></a>
  2495.  
  2496. <a class="hint--right sidestat" aria-label="affiliation">
  2497. <span class="statdot" style="background: #000; "></span></a>
  2498.  
  2499. </div>
  2500. <!-- end side statics-->
  2501.  
  2502. <div class="container">
  2503.  
  2504. <!--right column-->
  2505. <!-- start character header-->
  2506. <div class="rightcolumn">
  2507. <div class="characterheader">
  2508. <span class="hint--sright" aria-label="emily vancamp">
  2509. <img src="https://placehold.it/100"> </span>
  2510. <div class="charactername">piper<b>sutton</b></div>
  2511. </div>
  2512. <!--end character header-->
  2513. <div class="bio" style="width:300px; background:#ddd;">
  2514. <h1>bio<b>graphy</b></h1>
  2515. <div class="biotext">
  2516. write shit here!! it'll scroll?
  2517. </div>
  2518. </div>
  2519. <!-- house info-->
  2520. <div class="sorting">
  2521. <h1>sorting<b>hat</b></h1>
  2522. <div class="sortingtext">
  2523. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  2524. house info here
  2525. </div>
  2526. </div>
  2527.  
  2528. <!-- end house info-->
  2529. <!-- start wand info-->
  2530. <div class="wand">
  2531. <h1>wand<b>info</b></h1>
  2532. <div class="wandtext">
  2533. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  2534. wand info here
  2535. </div>
  2536. </div>
  2537. <!-- end wand info-->
  2538.  
  2539. </div>
  2540. <!--end right column-->
  2541.  
  2542. <!--stats column-->
  2543. <div class="cstatsc">
  2544. <!--stats-->
  2545. <h1>quick<b>stats</b></h1>
  2546. <div class="cstats">
  2547. <table>
  2548. <tr>
  2549. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  2550. <td>name</td>
  2551. </tr>
  2552.  
  2553. <tr>
  2554. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  2555. <td>age</td>
  2556. </tr>
  2557.  
  2558. <tr>
  2559. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  2560. <td>b day</td>
  2561. </tr>
  2562.  
  2563. <tr>
  2564. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  2565. <td>gender</td>
  2566. </tr>
  2567.  
  2568. <tr>
  2569. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  2570. <td>he/she/they</td>
  2571. </tr>
  2572.  
  2573. <tr>
  2574. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  2575. <td>sexual</td>
  2576. </tr>
  2577.  
  2578. <tr>
  2579. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  2580. <td>blood status</td>
  2581. </tr>
  2582.  
  2583. <tr>
  2584. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  2585. <td>nationality</td>
  2586. </tr>
  2587.  
  2588. <tr>
  2589. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  2590. <td>father</td>
  2591. </tr>
  2592.  
  2593. <tr>
  2594. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  2595. <td>mother</td>
  2596. </tr>
  2597.  
  2598. <tr>
  2599. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  2600. <td>job</td>
  2601. </tr>
  2602.  
  2603. <tr>
  2604. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  2605. <td>city, country</td>
  2606. </tr>
  2607.  
  2608. <tr>
  2609. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  2610. <td>city, country</td>
  2611. </tr>
  2612.  
  2613. <tr>
  2614. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  2615. <td>zodiac</td>
  2616. </tr>
  2617.  
  2618. <tr>
  2619. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  2620. <td>xxxx</td>
  2621. </tr>
  2622.  
  2623. <tr>
  2624. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  2625. <td>type x, the x</td>
  2626. </tr>
  2627.  
  2628. <tr>
  2629. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  2630. <td>alignment</td>
  2631. </tr>
  2632.  
  2633. <tr>
  2634. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  2635. <td>temperament</td>
  2636. </tr>
  2637.  
  2638. <tr>
  2639. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  2640. <td>the archetype</td>
  2641. </tr>
  2642.  
  2643. <tr>
  2644. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  2645. <td>element</td>
  2646. </tr>
  2647.  
  2648. </table>
  2649. </div>
  2650. <!-- end stats-->
  2651. </div>
  2652. <!-- end stats column-->
  2653.  
  2654. <!-- links column-->
  2655. <div class="tagsc">
  2656. <!-- another image i guess-->
  2657. <img src="https://placehold.it/191x215">
  2658.  
  2659. <!-- start links-->
  2660. <div class="links">
  2661. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  2662. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2663. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  2664. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2665. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  2666. <a href="#">blog</a>
  2667. </div>
  2668. </div>
  2669.  
  2670. <!--end links-->
  2671.  
  2672. <!-- start traits-->
  2673. <div class="traits">
  2674. <table>
  2675. <tbody>
  2676. <tr>
  2677. <td title="definition">positive trait
  2678. <td title="definition">positive trait
  2679. </tr>
  2680. <tr>
  2681. <td title="definition">neutral trait
  2682. <td title="definition">neutral trait
  2683. </tr>
  2684. <tr>
  2685. <td title="definition">negitive trait
  2686. <td title="definition">negitive trait
  2687. </tr>
  2688. </tbody>
  2689. </table>
  2690. </div>
  2691. <!-- end traits-->
  2692.  
  2693. <!-- start tv tropes-->
  2694. <div class="tvtropes">
  2695. <h1>TV<b>TROPES</b></h1>
  2696. <table cellspacing="9">
  2697. <tbody>
  2698. <tr>
  2699. <td style="background-image: url('https://placehold.it/100');">
  2700. <a href="/">
  2701. trope<br>here
  2702. </a>
  2703. </td>
  2704. <td style="background-image: url('https://placehold.it/100');">
  2705. <a href="/">
  2706. trope<br>here
  2707. </a>
  2708. </td>
  2709. <td style="background-image: url('https://placehold.it/100');">
  2710. <a href="/">
  2711. trope<br>here
  2712. </a>
  2713. </td>
  2714. </tr>
  2715. <tr>
  2716. <td style="background-image: url('https://placehold.it/100');">
  2717. <a href="/">
  2718. trope<br>here
  2719. </a>
  2720. </td>
  2721.  
  2722. <td style="background-image: url('https://placehold.it/100');">
  2723. <a href="/">
  2724. trope<br>here
  2725. </a>
  2726. </td>
  2727. <td style="background-image: url('https://placehold.it/100');">
  2728. <a href="/">
  2729. trope<br>here
  2730. </a>
  2731. </td>
  2732. </tr>
  2733. <tr>
  2734. <td style="background-image: url('https://placehold.it/100');">
  2735. <a href="/">
  2736. trope<br>here
  2737. </a>
  2738. </td>
  2739.  
  2740. <td style="background-image: url('https://placehold.it/100');">
  2741. <a href="/">
  2742. trope<br>here
  2743. </a>
  2744. </td>
  2745. <td style="background-image: url('https://placehold.it/100');">
  2746. <a href="/">
  2747. trope<br>here
  2748. </a>
  2749. </td>
  2750. </tr>
  2751. </tbody></table>
  2752. </div>
  2753. <!-- end tv tropes-->
  2754.  
  2755.  
  2756. </div>
  2757. <!--end container-->
  2758. </div>
  2759.  
  2760. <!-- end tab seven-->
  2761.  
  2762. <!--tab eight-->
  2763.  
  2764. <div id="tabeight" class="tab w3-animate-opacity">
  2765. <!-- side statics-->
  2766. <div class="sidestatcontainer">
  2767.  
  2768. <a class="hint--right hint--warning sidestat" aria-label="development status">
  2769. <span class="statdot" style="background: #EEE721;"></span></a>
  2770.  
  2771. <a class="hint--right hint--success sidestat" aria-label="activity">
  2772. <span class="statdot" style="background: #00cc00; "></span></a>
  2773.  
  2774. <a class="hint--right hint--error sidestat" aria-label="ship status">
  2775. <span class="statdot" style="background: #cc0000; "></span></a>
  2776.  
  2777. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  2778. <span class="statdot" style="background: #cc0000; "></span></a>
  2779.  
  2780. <a class="hint--right sidestat" aria-label="affiliation">
  2781. <span class="statdot" style="background: #000; "></span></a>
  2782.  
  2783. </div>
  2784. <!-- end side statics-->
  2785.  
  2786. <div class="container">
  2787.  
  2788. <!--right column-->
  2789. <!-- start character header-->
  2790. <div class="rightcolumn">
  2791. <div class="characterheader">
  2792. <span class="hint--sright" aria-label="gemma arterton">
  2793. <img src="https://placehold.it/100"> </span>
  2794. <div class="charactername">sophie<b>prescott</b></div>
  2795. </div>
  2796. <!--end character header-->
  2797. <div class="bio" style="width:300px; background:#ddd;">
  2798. <h1>bio<b>graphy</b></h1>
  2799. <div class="biotext">
  2800. write shit here!! it'll scroll?
  2801. </div>
  2802. </div>
  2803. <!-- house info-->
  2804. <div class="sorting">
  2805. <h1>sorting<b>hat</b></h1>
  2806. <div class="sortingtext">
  2807. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  2808. house info here
  2809. </div>
  2810. </div>
  2811.  
  2812. <!-- end house info-->
  2813. <!-- start wand info-->
  2814. <div class="wand">
  2815. <h1>wand<b>info</b></h1>
  2816. <div class="wandtext">
  2817. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  2818. wand info here
  2819. </div>
  2820. </div>
  2821. <!-- end wand info-->
  2822.  
  2823. </div>
  2824. <!--end right column-->
  2825.  
  2826. <!--stats column-->
  2827. <div class="cstatsc">
  2828. <!--stats-->
  2829. <h1>quick<b>stats</b></h1>
  2830. <div class="cstats">
  2831. <table>
  2832. <tr>
  2833. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  2834. <td>name</td>
  2835. </tr>
  2836.  
  2837. <tr>
  2838. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  2839. <td>age</td>
  2840. </tr>
  2841.  
  2842. <tr>
  2843. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  2844. <td>b day</td>
  2845. </tr>
  2846.  
  2847. <tr>
  2848. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  2849. <td>gender</td>
  2850. </tr>
  2851.  
  2852. <tr>
  2853. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  2854. <td>he/she/they</td>
  2855. </tr>
  2856.  
  2857. <tr>
  2858. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  2859. <td>sexual</td>
  2860. </tr>
  2861.  
  2862. <tr>
  2863. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  2864. <td>blood status</td>
  2865. </tr>
  2866.  
  2867. <tr>
  2868. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  2869. <td>nationality</td>
  2870. </tr>
  2871.  
  2872. <tr>
  2873. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  2874. <td>father</td>
  2875. </tr>
  2876.  
  2877. <tr>
  2878. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  2879. <td>mother</td>
  2880. </tr>
  2881.  
  2882. <tr>
  2883. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  2884. <td>job</td>
  2885. </tr>
  2886.  
  2887. <tr>
  2888. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  2889. <td>city, country</td>
  2890. </tr>
  2891.  
  2892. <tr>
  2893. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  2894. <td>city, country</td>
  2895. </tr>
  2896.  
  2897. <tr>
  2898. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  2899. <td>zodiac</td>
  2900. </tr>
  2901.  
  2902. <tr>
  2903. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  2904. <td>xxxx</td>
  2905. </tr>
  2906.  
  2907. <tr>
  2908. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  2909. <td>type x, the x</td>
  2910. </tr>
  2911.  
  2912. <tr>
  2913. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  2914. <td>alignment</td>
  2915. </tr>
  2916.  
  2917. <tr>
  2918. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  2919. <td>temperament</td>
  2920. </tr>
  2921.  
  2922. <tr>
  2923. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  2924. <td>the archetype</td>
  2925. </tr>
  2926.  
  2927. <tr>
  2928. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  2929. <td>element</td>
  2930. </tr>
  2931.  
  2932. </table>
  2933. </div>
  2934. <!-- end stats-->
  2935. </div>
  2936. <!-- end stats column-->
  2937.  
  2938. <!-- links column-->
  2939. <div class="tagsc">
  2940. <!-- another image i guess-->
  2941. <img src="https://placehold.it/191x215">
  2942.  
  2943. <!-- start links-->
  2944. <div class="links">
  2945. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  2946. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2947. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  2948. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  2949. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  2950. <a href="#">blog</a>
  2951. </div>
  2952. </div>
  2953.  
  2954. <!--end links-->
  2955.  
  2956. <!-- start traits-->
  2957. <div class="traits">
  2958. <table>
  2959. <tbody>
  2960. <tr>
  2961. <td title="definition">positive trait
  2962. <td title="definition">positive trait
  2963. </tr>
  2964. <tr>
  2965. <td title="definition">neutral trait
  2966. <td title="definition">neutral trait
  2967. </tr>
  2968. <tr>
  2969. <td title="definition">negitive trait
  2970. <td title="definition">negitive trait
  2971. </tr>
  2972. </tbody>
  2973. </table>
  2974. </div>
  2975. <!-- end traits-->
  2976.  
  2977. <!-- start tv tropes-->
  2978. <div class="tvtropes">
  2979. <h1>TV<b>TROPES</b></h1>
  2980. <table cellspacing="9">
  2981. <tbody>
  2982. <tr>
  2983. <td style="background-image: url('https://placehold.it/100');">
  2984. <a href="/">
  2985. trope<br>here
  2986. </a>
  2987. </td>
  2988. <td style="background-image: url('https://placehold.it/100');">
  2989. <a href="/">
  2990. trope<br>here
  2991. </a>
  2992. </td>
  2993. <td style="background-image: url('https://placehold.it/100');">
  2994. <a href="/">
  2995. trope<br>here
  2996. </a>
  2997. </td>
  2998. </tr>
  2999. <tr>
  3000. <td style="background-image: url('https://placehold.it/100');">
  3001. <a href="/">
  3002. trope<br>here
  3003. </a>
  3004. </td>
  3005.  
  3006. <td style="background-image: url('https://placehold.it/100');">
  3007. <a href="/">
  3008. trope<br>here
  3009. </a>
  3010. </td>
  3011. <td style="background-image: url('https://placehold.it/100');">
  3012. <a href="/">
  3013. trope<br>here
  3014. </a>
  3015. </td>
  3016. </tr>
  3017. <tr>
  3018. <td style="background-image: url('https://placehold.it/100');">
  3019. <a href="/">
  3020. trope<br>here
  3021. </a>
  3022. </td>
  3023.  
  3024. <td style="background-image: url('https://placehold.it/100');">
  3025. <a href="/">
  3026. trope<br>here
  3027. </a>
  3028. </td>
  3029. <td style="background-image: url('https://placehold.it/100');">
  3030. <a href="/">
  3031. trope<br>here
  3032. </a>
  3033. </td>
  3034. </tr>
  3035. </tbody></table>
  3036. </div>
  3037. <!-- end tv tropes-->
  3038.  
  3039.  
  3040. </div>
  3041. <!--end container-->
  3042. </div>
  3043.  
  3044. <!-- end tab eight-->
  3045.  
  3046. <!--tab nine-->
  3047.  
  3048. <div id="tabnine" class="tab w3-animate-opacity">
  3049. <!-- side statics-->
  3050. <div class="sidestatcontainer">
  3051.  
  3052. <a class="hint--right hint--warning sidestat" aria-label="development status">
  3053. <span class="statdot" style="background: #EEE721;"></span></a>
  3054.  
  3055. <a class="hint--right hint--success sidestat" aria-label="activity">
  3056. <span class="statdot" style="background: #00cc00; "></span></a>
  3057.  
  3058. <a class="hint--right hint--error sidestat" aria-label="ship status">
  3059. <span class="statdot" style="background: #cc0000; "></span></a>
  3060.  
  3061. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  3062. <span class="statdot" style="background: #cc0000; "></span></a>
  3063.  
  3064. <a class="hint--right sidestat" aria-label="affiliation">
  3065. <span class="statdot" style="background: #000; "></span></a>
  3066.  
  3067. </div>
  3068. <!-- end side statics-->
  3069.  
  3070. <div class="container">
  3071.  
  3072. <!--right column-->
  3073. <!-- start character header-->
  3074. <div class="rightcolumn">
  3075. <div class="characterheader">
  3076. <span class="hint--sright" aria-label="hannah new">
  3077. <img src="https://placehold.it/100"> </span>
  3078. <div class="charactername">victoria<b>brighton</b></div>
  3079. </div>
  3080. <!--end character header-->
  3081. <div class="bio" style="width:300px; background:#ddd;">
  3082. <h1>bio<b>graphy</b></h1>
  3083. <div class="biotext">
  3084. write shit here!! it'll scroll?
  3085. </div>
  3086. </div>
  3087. <!-- house info-->
  3088. <div class="sorting">
  3089. <h1>sorting<b>hat</b></h1>
  3090. <div class="sortingtext">
  3091. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  3092. house info here
  3093. </div>
  3094. </div>
  3095.  
  3096. <!-- end house info-->
  3097. <!-- start wand info-->
  3098. <div class="wand">
  3099. <h1>wand<b>info</b></h1>
  3100. <div class="wandtext">
  3101. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  3102. wand info here
  3103. </div>
  3104. </div>
  3105. <!-- end wand info-->
  3106.  
  3107. </div>
  3108. <!--end right column-->
  3109.  
  3110. <!--stats column-->
  3111. <div class="cstatsc">
  3112. <!--stats-->
  3113. <h1>quick<b>stats</b></h1>
  3114. <div class="cstats">
  3115. <table>
  3116. <tr>
  3117. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  3118. <td>name</td>
  3119. </tr>
  3120.  
  3121. <tr>
  3122. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  3123. <td>age</td>
  3124. </tr>
  3125.  
  3126. <tr>
  3127. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  3128. <td>b day</td>
  3129. </tr>
  3130.  
  3131. <tr>
  3132. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  3133. <td>gender</td>
  3134. </tr>
  3135.  
  3136. <tr>
  3137. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  3138. <td>he/she/they</td>
  3139. </tr>
  3140.  
  3141. <tr>
  3142. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  3143. <td>sexual</td>
  3144. </tr>
  3145.  
  3146. <tr>
  3147. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  3148. <td>blood status</td>
  3149. </tr>
  3150.  
  3151. <tr>
  3152. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  3153. <td>nationality</td>
  3154. </tr>
  3155.  
  3156. <tr>
  3157. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  3158. <td>father</td>
  3159. </tr>
  3160.  
  3161. <tr>
  3162. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  3163. <td>mother</td>
  3164. </tr>
  3165.  
  3166. <tr>
  3167. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  3168. <td>job</td>
  3169. </tr>
  3170.  
  3171. <tr>
  3172. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  3173. <td>city, country</td>
  3174. </tr>
  3175.  
  3176. <tr>
  3177. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  3178. <td>city, country</td>
  3179. </tr>
  3180.  
  3181. <tr>
  3182. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  3183. <td>zodiac</td>
  3184. </tr>
  3185.  
  3186. <tr>
  3187. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  3188. <td>xxxx</td>
  3189. </tr>
  3190.  
  3191. <tr>
  3192. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  3193. <td>type x, the x</td>
  3194. </tr>
  3195.  
  3196. <tr>
  3197. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alignment"></i></th>
  3198. <td>alignment</td>
  3199. </tr>
  3200.  
  3201. <tr>
  3202. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  3203. <td>temperament</td>
  3204. </tr>
  3205.  
  3206. <tr>
  3207. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  3208. <td>the archetype</td>
  3209. </tr>
  3210.  
  3211. <tr>
  3212. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  3213. <td>element</td>
  3214. </tr>
  3215.  
  3216. </table>
  3217. </div>
  3218. <!-- end stats-->
  3219. </div>
  3220. <!-- end stats column-->
  3221.  
  3222. <!-- links column-->
  3223. <div class="tagsc">
  3224. <!-- another image i guess-->
  3225. <img src="https://placehold.it/191x215">
  3226.  
  3227. <!-- start links-->
  3228. <div class="links">
  3229. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  3230. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  3231. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  3232. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  3233. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  3234. <a href="#">blog</a>
  3235. </div>
  3236. </div>
  3237.  
  3238. <!--end links-->
  3239.  
  3240. <!-- start traits-->
  3241. <div class="traits">
  3242. <table>
  3243. <tbody>
  3244. <tr>
  3245. <td title="definition">positive trait
  3246. <td title="definition">positive trait
  3247. </tr>
  3248. <tr>
  3249. <td title="definition">neutral trait
  3250. <td title="definition">neutral trait
  3251. </tr>
  3252. <tr>
  3253. <td title="definition">negitive trait
  3254. <td title="definition">negitive trait
  3255. </tr>
  3256. </tbody>
  3257. </table>
  3258. </div>
  3259. <!-- end traits-->
  3260.  
  3261. <!-- start tv tropes-->
  3262. <div class="tvtropes">
  3263. <h1>TV<b>TROPES</b></h1>
  3264. <table cellspacing="9">
  3265. <tbody>
  3266. <tr>
  3267. <td style="background-image: url('https://placehold.it/100');">
  3268. <a href="/">
  3269. trope<br>here
  3270. </a>
  3271. </td>
  3272. <td style="background-image: url('https://placehold.it/100');">
  3273. <a href="/">
  3274. trope<br>here
  3275. </a>
  3276. </td>
  3277. <td style="background-image: url('https://placehold.it/100');">
  3278. <a href="/">
  3279. trope<br>here
  3280. </a>
  3281. </td>
  3282. </tr>
  3283. <tr>
  3284. <td style="background-image: url('https://placehold.it/100');">
  3285. <a href="/">
  3286. trope<br>here
  3287. </a>
  3288. </td>
  3289.  
  3290. <td style="background-image: url('https://placehold.it/100');">
  3291. <a href="/">
  3292. trope<br>here
  3293. </a>
  3294. </td>
  3295. <td style="background-image: url('https://placehold.it/100');">
  3296. <a href="/">
  3297. trope<br>here
  3298. </a>
  3299. </td>
  3300. </tr>
  3301. <tr>
  3302. <td style="background-image: url('https://placehold.it/100');">
  3303. <a href="/">
  3304. trope<br>here
  3305. </a>
  3306. </td>
  3307.  
  3308. <td style="background-image: url('https://placehold.it/100');">
  3309. <a href="/">
  3310. trope<br>here
  3311. </a>
  3312. </td>
  3313. <td style="background-image: url('https://placehold.it/100');">
  3314. <a href="/">
  3315. trope<br>here
  3316. </a>
  3317. </td>
  3318. </tr>
  3319. </tbody></table>
  3320. </div>
  3321. <!-- end tv tropes-->
  3322.  
  3323.  
  3324. </div>
  3325. <!--end container-->
  3326. </div>
  3327.  
  3328. <!-- end tab nine-->
  3329.  
  3330. <!-- credit -->
  3331. <div class="credit">
  3332. <a href="http://chaaostheory.tumblr.com" class="hint--right" aria-label="@chaaostheory"><i class="fas fa-feather-alt fa-fw" aria-hidden="true"></i></a>
  3333. </div>
  3334.  
  3335. </body>
  3336. </html>
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!