API tools faq
paste
Advertisement
chaaostheory

PAGE 02: OH HEY WHATUP

chaaostheory
Jun 27th, 2018
4,150
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.52 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:75px;
  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:120px;
  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-size: 10px;
  368. font-weight:400;
  369. text-align: center;
  370. color: #fff;
  371. text-shadow: -1px 0 #000000,0 1px #000000,1px 0 #000000,0 -1px #000000;
  372. }
  373.  
  374. .tvtropes td {
  375. width: 33%;
  376. padding: 23px;
  377. background-size: 110%;
  378. background-position: center;
  379. border:1px solid #999;
  380. }
  381.  
  382. .tvtropes a {
  383. color: #fff;
  384. text-decoration:none;
  385. text-transform:uppercase;
  386. }
  387.  
  388. .sidestatcontainer {
  389. float:left;
  390. position: fixed;
  391. margin-left: 835px;
  392. margin-top: 0px; width:6px;
  393.  
  394. }
  395.  
  396. .sidestat {
  397. width: 5px;
  398. height: 5px;
  399. padding: 4px;
  400. margin-top: 0px;
  401.  
  402. }
  403.  
  404. .statdot {
  405. display:block;
  406. height:5px;
  407. width:5px;
  408. padding:2px;
  409. border:1px solid #eee;
  410. border-radius:100%;
  411. }
  412.  
  413. /* credit */
  414.  
  415. .credit{
  416. position:fixed;
  417. margin-left:840px;
  418. top:805px;
  419. }
  420.  
  421. .credit a{
  422. color:#000;
  423. background:rgba(255,255,255, 0.5);
  424. border-radius:100%;
  425. padding:2px 3px;
  426. font-size:20px;
  427. -webkit-transition: 1s; /* Safari */
  428. transition: 1s;
  429. }
  430.  
  431. .credit a:hover{
  432. color:#fff;
  433. background:rgba(0,0,0, 0.5);
  434. -webkit-transition: 1s; /* Safari */
  435. transition: 1s;
  436. }
  437.  
  438. </style>
  439.  
  440. </head>
  441. <body>
  442.  
  443. <!-- header -->
  444.  
  445. <div class="pheader">
  446. <span class="pheadertitle">oh hey?<b>whatup?</b></span>
  447. <span class="mdash">—</span>
  448. <!-- header links-->
  449. <!--
  450. wanna change icons? use fontawesome 5.1 library here: https://fontawesome.com/icons?d=gallery
  451. -->
  452. <span class="hicons">
  453. <a href="/" title="back"><i class="fa fa-home fa-fw"></i></a>
  454. <a href="/ask" title="message"><i class="far fa-envelope fa-fw"></i></a>
  455. <a href="/about" title="about"><i class="fas fa-user-circle fa-fw"></i></a>
  456. <a href="/nav" title="navigation"><i class="fas fa-map fa-fw"></i></a>
  457. </span>
  458. </div>
  459. <!-- end header-->
  460.  
  461. <!-- character nav-->
  462. <div class="sidebar">
  463. <div class="characternav">
  464. <!-- tab one-->
  465. <a href="#" onclick="openCity('tabone')" class="hint--top" aria-label="name here"><img src="https://placehold.it/100"></a>
  466. <!--tab two-->
  467. <a href="#" onclick="openCity('tabtwo')" class="hint--top" aria-label="name here"><img src="https://placehold.it/100"></a>
  468. <!--tab three-->
  469. <a href="#" onclick="openCity('tabthree')" class="hint--top" aria-label="name here"><img src="https://placehold.it/100"></a>
  470. <!--tab four-->
  471. <a href="#" onclick="openCity('tabfour')" class="hint--top" aria-label="name here"><img src="https://placehold.it/100"></a>
  472. <!--tab five-->
  473. <a href="#" onclick="openCity('tabfive')" class="hint--top" aria-label="name here"><img src="https://placehold.it/100"></a>
  474.  
  475. <!-- 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-->
  476. </div>
  477. <!-- end character nav-->
  478. </div>
  479.  
  480.  
  481. <!-- start tabs-->
  482.  
  483. <!--tab one-->
  484.  
  485. <div id="tabone" class="tab w3-animate-opacity">
  486. <!-- side statics-->
  487. <div class="sidestatcontainer">
  488.  
  489. <a class="hint--right hint--warning sidestat" aria-label="development status">
  490. <span class="statdot" style="background: #EEE721;"></span></a>
  491.  
  492. <a class="hint--right hint--success sidestat" aria-label="activity">
  493. <span class="statdot" style="background: #00cc00; "></span></a>
  494.  
  495. <a class="hint--right hint--error sidestat" aria-label="ship status">
  496. <span class="statdot" style="background: #cc0000; "></span></a>
  497.  
  498. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  499. <span class="statdot" style="background: #cc0000; "></span></a>
  500.  
  501. <a class="hint--right sidestat" aria-label="affiliation">
  502. <span class="statdot" style="background: #000; "></span></a>
  503.  
  504. </div>
  505. <!-- end side statics-->
  506.  
  507. <div class="container">
  508.  
  509. <!--right column-->
  510. <!-- start character header-->
  511. <div class="rightcolumn">
  512. <div class="characterheader">
  513. <span class="hint--sright" aria-label="face claim name">
  514. <img src="https://placehold.it/100"> </span>
  515. <div class="charactername">first<b>last</b></div>
  516. </div>
  517. <!--end character header-->
  518. <div class="bio" style="width:300px; background:#ddd;">
  519. <h1>bio<b>graphy</b></h1>
  520. <div class="biotext">
  521. write shit here!! it'll scroll?
  522. </div>
  523. </div>
  524. <!-- house info-->
  525. <div class="sorting">
  526. <h1>sorting<b>hat</b></h1>
  527. <div class="sortingtext">
  528. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  529. house info here
  530. </div>
  531. </div>
  532.  
  533. <!-- end house info-->
  534. <!-- start wand info-->
  535. <div class="wand">
  536. <h1>wand<b>info</b></h1>
  537. <div class="wandtext">
  538. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  539. wand info here
  540. </div>
  541. </div>
  542. <!-- end wand info-->
  543.  
  544. </div>
  545. <!--end right column-->
  546.  
  547. <!--stats column-->
  548. <div class="cstatsc">
  549. <!--stats-->
  550. <h1>quick<b>stats</b></h1>
  551. <div class="cstats">
  552. <table>
  553. <tr>
  554. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  555. <td>name</td>
  556. </tr>
  557.  
  558. <tr>
  559. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  560. <td>age</td>
  561. </tr>
  562.  
  563. <tr>
  564. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  565. <td>b day</td>
  566. </tr>
  567.  
  568. <tr>
  569. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  570. <td>gender</td>
  571. </tr>
  572.  
  573. <tr>
  574. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  575. <td>he/she/they</td>
  576. </tr>
  577.  
  578. <tr>
  579. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  580. <td>sexual</td>
  581. </tr>
  582.  
  583. <tr>
  584. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  585. <td>blood status</td>
  586. </tr>
  587.  
  588. <tr>
  589. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  590. <td>nationality</td>
  591. </tr>
  592.  
  593. <tr>
  594. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  595. <td>father</td>
  596. </tr>
  597.  
  598. <tr>
  599. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  600. <td>mother</td>
  601. </tr>
  602.  
  603. <tr>
  604. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  605. <td>job</td>
  606. </tr>
  607.  
  608. <tr>
  609. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  610. <td>city, country</td>
  611. </tr>
  612.  
  613. <tr>
  614. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  615. <td>city, country</td>
  616. </tr>
  617.  
  618. <tr>
  619. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  620. <td>zodiac</td>
  621. </tr>
  622.  
  623. <tr>
  624. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  625. <td>xxxx</td>
  626. </tr>
  627.  
  628. <tr>
  629. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  630. <td>type x, the x</td>
  631. </tr>
  632.  
  633. <tr>
  634. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alingment"></i></th>
  635. <td>alingment</td>
  636. </tr>
  637.  
  638. <tr>
  639. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  640. <td>temperment</td>
  641. </tr>
  642.  
  643. <tr>
  644. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  645. <td>the archetype</td>
  646. </tr>
  647.  
  648. <tr>
  649. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  650. <td>element</td>
  651. </tr>
  652.  
  653. </table>
  654. </div>
  655. <!-- end stats-->
  656. </div>
  657. <!-- end stats column-->
  658.  
  659. <!-- links column-->
  660. <div class="tagsc">
  661. <!-- another image i guess-->
  662. <img src="https://placehold.it/191x215">
  663.  
  664. <!-- start links-->
  665. <div class="links">
  666. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  667. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  668. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  669. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  670. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  671. <a href="#">blog</a>
  672. </div>
  673. </div>
  674.  
  675. <!--end links-->
  676.  
  677. <!-- start traits-->
  678. <div class="traits">
  679. <table>
  680. <tbody>
  681. <tr>
  682. <td title="definition">positive trait
  683. <td title="definition">positive trait
  684. </tr>
  685. <tr>
  686. <td title="definition">neutral trait
  687. <td title="definition">neutral trait
  688. </tr>
  689. <tr>
  690. <td title="definition">negitive trait
  691. <td title="definition">negitive trait
  692. </tr>
  693. </tbody>
  694. </table>
  695. </div>
  696. <!-- end traits-->
  697.  
  698. <!-- start tv tropes-->
  699. <div class="tvtropes">
  700. <h1>TV<b>TROPES</b></h1>
  701. <table cellspacing="9">
  702. <tbody>
  703. <tr>
  704. <td style="background-image: url('https://placehold.it/100');">
  705. <a href="/">
  706. trope<br>here
  707. </a>
  708. </td>
  709. <td style="background-image: url('https://placehold.it/100');">
  710. <a href="/">
  711. trope<br>here
  712. </a>
  713. </td>
  714. <td style="background-image: url('https://placehold.it/100');">
  715. <a href="/">
  716. trope<br>here
  717. </a>
  718. </td>
  719. </tr>
  720. <tr>
  721. <td style="background-image: url('https://placehold.it/100');">
  722. <a href="/">
  723. trope<br>here
  724. </a>
  725. </td>
  726.  
  727. <td style="background-image: url('https://placehold.it/100');">
  728. <a href="/">
  729. trope<br>here
  730. </a>
  731. </td>
  732. <td style="background-image: url('https://placehold.it/100');">
  733. <a href="/">
  734. trope<br>here
  735. </a>
  736. </td>
  737. </tr>
  738. <tr>
  739. <td style="background-image: url('https://placehold.it/100');">
  740. <a href="/">
  741. trope<br>here
  742. </a>
  743. </td>
  744.  
  745. <td style="background-image: url('https://placehold.it/100');">
  746. <a href="/">
  747. trope<br>here
  748. </a>
  749. </td>
  750. <td style="background-image: url('https://placehold.it/100');">
  751. <a href="/">
  752. trope<br>here
  753. </a>
  754. </td>
  755. </tr>
  756. </tbody></table>
  757. </div>
  758. <!-- end tv tropes-->
  759.  
  760.  
  761. </div>
  762. <!--end container-->
  763. </div>
  764.  
  765. <!-- end tab one-->
  766.  
  767. <!-- start tab two-->
  768.  
  769. <div id="tabtwo" class="tab w3-animate-opacity" style="display:none">
  770. <!-- side statics-->
  771. <div class="sidestatcontainer">
  772.  
  773. <a class="hint--right hint--warning sidestat" aria-label="development status">
  774. <span class="statdot" style="background: #EEE721;"></span></a>
  775.  
  776. <a class="hint--right hint--success sidestat" aria-label="activity">
  777. <span class="statdot" style="background: #00cc00; "></span></a>
  778.  
  779. <a class="hint--right hint--error sidestat" aria-label="ship status">
  780. <span class="statdot" style="background: #cc0000; "></span></a>
  781.  
  782. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  783. <span class="statdot" style="background: #cc0000; "></span></a>
  784.  
  785. <a class="hint--right sidestat" aria-label="affiliation">
  786. <span class="statdot" style="background: #000; "></span></a>
  787.  
  788. </div>
  789. <!-- end side statics-->
  790.  
  791. <div class="container">
  792.  
  793. <!--right column-->
  794. <!-- start character header-->
  795. <div class="rightcolumn">
  796. <div class="characterheader">
  797. <span class="hint--sright" aria-label="face claim name">
  798. <img src="https://placehold.it/100"> </span>
  799. <div class="charactername">first<b>last</b></div>
  800. </div>
  801. <!--end character header-->
  802. <div class="bio" style="width:300px; background:#ddd;">
  803. <h1>bio<b>graphy</b></h1>
  804. <div class="biotext">
  805. write shit here!! it'll scroll?
  806. </div>
  807. </div>
  808. <!-- house info-->
  809. <div class="sorting">
  810. <h1>sorting<b>hat</b></h1>
  811. <div class="sortingtext">
  812. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  813. house info here
  814. </div>
  815. </div>
  816.  
  817. <!-- end house info-->
  818. <!-- start wand info-->
  819. <div class="wand">
  820. <h1>wand<b>info</b></h1>
  821. <div class="wandtext">
  822. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  823. wand info here
  824. </div>
  825. </div>
  826. <!-- end wand info-->
  827.  
  828. </div>
  829. <!--end right column-->
  830.  
  831. <!--stats column-->
  832. <div class="cstatsc">
  833. <!--stats-->
  834. <h1>quick<b>stats</b></h1>
  835. <div class="cstats">
  836. <table>
  837. <tr>
  838. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  839. <td>name</td>
  840. </tr>
  841.  
  842. <tr>
  843. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  844. <td>age</td>
  845. </tr>
  846.  
  847. <tr>
  848. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  849. <td>b day</td>
  850. </tr>
  851.  
  852. <tr>
  853. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  854. <td>gender</td>
  855. </tr>
  856.  
  857. <tr>
  858. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  859. <td>he/she/they</td>
  860. </tr>
  861.  
  862. <tr>
  863. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  864. <td>sexual</td>
  865. </tr>
  866.  
  867. <tr>
  868. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  869. <td>blood status</td>
  870. </tr>
  871.  
  872. <tr>
  873. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  874. <td>nationality</td>
  875. </tr>
  876.  
  877. <tr>
  878. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  879. <td>father</td>
  880. </tr>
  881.  
  882. <tr>
  883. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  884. <td>mother</td>
  885. </tr>
  886.  
  887. <tr>
  888. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  889. <td>job</td>
  890. </tr>
  891.  
  892. <tr>
  893. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  894. <td>city, country</td>
  895. </tr>
  896.  
  897. <tr>
  898. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  899. <td>city, country</td>
  900. </tr>
  901.  
  902. <tr>
  903. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  904. <td>zodiac</td>
  905. </tr>
  906.  
  907. <tr>
  908. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  909. <td>xxxx</td>
  910. </tr>
  911.  
  912. <tr>
  913. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  914. <td>type x, the x</td>
  915. </tr>
  916.  
  917. <tr>
  918. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alingment"></i></th>
  919. <td>alingment</td>
  920. </tr>
  921.  
  922. <tr>
  923. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  924. <td>temperment</td>
  925. </tr>
  926.  
  927. <tr>
  928. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  929. <td>the archetype</td>
  930. </tr>
  931.  
  932. <tr>
  933. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  934. <td>element</td>
  935. </tr>
  936.  
  937. </table>
  938. </div>
  939. <!-- end stats-->
  940. </div>
  941. <!-- end stats column-->
  942.  
  943. <!-- links column-->
  944. <div class="tagsc">
  945. <!-- another image i guess-->
  946. <img src="https://placehold.it/191x215">
  947.  
  948. <!-- start links-->
  949. <div class="links">
  950. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  951. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  952. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  953. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  954. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  955. <a href="#">blog</a>
  956. </div>
  957. </div>
  958.  
  959. <!--end links-->
  960.  
  961. <!-- start traits-->
  962. <div class="traits">
  963. <table>
  964. <tbody>
  965. <tr>
  966. <td title="definition">positive trait
  967. <td title="definition">positive trait
  968. </tr>
  969. <tr>
  970. <td title="definition">neutral trait
  971. <td title="definition">neutral trait
  972. </tr>
  973. <tr>
  974. <td title="definition">negitive trait
  975. <td title="definition">negitive trait
  976. </tr>
  977. </tbody>
  978. </table>
  979. </div>
  980. <!-- end traits-->
  981.  
  982. <!-- start tv tropes-->
  983. <div class="tvtropes">
  984. <h1>TV<b>TROPES</b></h1>
  985. <table cellspacing="9">
  986. <tbody>
  987. <tr>
  988. <td style="background-image: url('https://placehold.it/100');">
  989. <a href="/">
  990. trope<br>here
  991. </a>
  992. </td>
  993. <td style="background-image: url('https://placehold.it/100');">
  994. <a href="/">
  995. trope<br>here
  996. </a>
  997. </td>
  998. <td style="background-image: url('https://placehold.it/100');">
  999. <a href="/">
  1000. trope<br>here
  1001. </a>
  1002. </td>
  1003. </tr>
  1004. <tr>
  1005. <td style="background-image: url('https://placehold.it/100');">
  1006. <a href="/">
  1007. trope<br>here
  1008. </a>
  1009. </td>
  1010.  
  1011. <td style="background-image: url('https://placehold.it/100');">
  1012. <a href="/">
  1013. trope<br>here
  1014. </a>
  1015. </td>
  1016. <td style="background-image: url('https://placehold.it/100');">
  1017. <a href="/">
  1018. trope<br>here
  1019. </a>
  1020. </td>
  1021. </tr>
  1022. <tr>
  1023. <td style="background-image: url('https://placehold.it/100');">
  1024. <a href="/">
  1025. trope<br>here
  1026. </a>
  1027. </td>
  1028.  
  1029. <td style="background-image: url('https://placehold.it/100');">
  1030. <a href="/">
  1031. trope<br>here
  1032. </a>
  1033. </td>
  1034. <td style="background-image: url('https://placehold.it/100');">
  1035. <a href="/">
  1036. trope<br>here
  1037. </a>
  1038. </td>
  1039. </tr>
  1040. </tbody></table>
  1041. </div>
  1042. <!-- end tv tropes-->
  1043.  
  1044.  
  1045. </div>
  1046. <!--end container-->
  1047. </div>
  1048.  
  1049. <!--end tab two-->
  1050.  
  1051. <!-- start tab three-->
  1052.  
  1053. <div id="tabthree" class="tab w3-animate-opacity" style="display:none">
  1054. <!-- side statics-->
  1055. <div class="sidestatcontainer">
  1056.  
  1057. <a class="hint--right hint--warning sidestat" aria-label="development status">
  1058. <span class="statdot" style="background: #EEE721;"></span></a>
  1059.  
  1060. <a class="hint--right hint--success sidestat" aria-label="activity">
  1061. <span class="statdot" style="background: #00cc00; "></span></a>
  1062.  
  1063. <a class="hint--right hint--error sidestat" aria-label="ship status">
  1064. <span class="statdot" style="background: #cc0000; "></span></a>
  1065.  
  1066. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  1067. <span class="statdot" style="background: #cc0000; "></span></a>
  1068.  
  1069. <a class="hint--right sidestat" aria-label="affiliation">
  1070. <span class="statdot" style="background: #000; "></span></a>
  1071.  
  1072. </div>
  1073. <!-- end side statics-->
  1074.  
  1075. <div class="container">
  1076.  
  1077. <!--right column-->
  1078. <!-- start character header-->
  1079. <div class="rightcolumn">
  1080. <div class="characterheader">
  1081. <span class="hint--sright" aria-label="face claim name">
  1082. <img src="https://placehold.it/100"> </span>
  1083. <div class="charactername">first<b>last</b></div>
  1084. </div>
  1085. <!--end character header-->
  1086. <div class="bio" style="width:300px; background:#ddd;">
  1087. <h1>bio<b>graphy</b></h1>
  1088. <div class="biotext">
  1089. write shit here!! it'll scroll?
  1090. </div>
  1091. </div>
  1092. <!-- house info-->
  1093. <div class="sorting">
  1094. <h1>sorting<b>hat</b></h1>
  1095. <div class="sortingtext">
  1096. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  1097. house info here
  1098. </div>
  1099. </div>
  1100.  
  1101. <!-- end house info-->
  1102. <!-- start wand info-->
  1103. <div class="wand">
  1104. <h1>wand<b>info</b></h1>
  1105. <div class="wandtext">
  1106. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  1107. wand info here
  1108. </div>
  1109. </div>
  1110. <!-- end wand info-->
  1111.  
  1112. </div>
  1113. <!--end right column-->
  1114.  
  1115. <!--stats column-->
  1116. <div class="cstatsc">
  1117. <!--stats-->
  1118. <h1>quick<b>stats</b></h1>
  1119. <div class="cstats">
  1120. <table>
  1121. <tr>
  1122. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  1123. <td>name</td>
  1124. </tr>
  1125.  
  1126. <tr>
  1127. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  1128. <td>age</td>
  1129. </tr>
  1130.  
  1131. <tr>
  1132. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  1133. <td>b day</td>
  1134. </tr>
  1135.  
  1136. <tr>
  1137. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  1138. <td>gender</td>
  1139. </tr>
  1140.  
  1141. <tr>
  1142. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  1143. <td>he/she/they</td>
  1144. </tr>
  1145.  
  1146. <tr>
  1147. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  1148. <td>sexual</td>
  1149. </tr>
  1150.  
  1151. <tr>
  1152. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  1153. <td>blood status</td>
  1154. </tr>
  1155.  
  1156. <tr>
  1157. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  1158. <td>nationality</td>
  1159. </tr>
  1160.  
  1161. <tr>
  1162. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  1163. <td>father</td>
  1164. </tr>
  1165.  
  1166. <tr>
  1167. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  1168. <td>mother</td>
  1169. </tr>
  1170.  
  1171. <tr>
  1172. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  1173. <td>job</td>
  1174. </tr>
  1175.  
  1176. <tr>
  1177. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  1178. <td>city, country</td>
  1179. </tr>
  1180.  
  1181. <tr>
  1182. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  1183. <td>city, country</td>
  1184. </tr>
  1185.  
  1186. <tr>
  1187. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  1188. <td>zodiac</td>
  1189. </tr>
  1190.  
  1191. <tr>
  1192. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  1193. <td>xxxx</td>
  1194. </tr>
  1195.  
  1196. <tr>
  1197. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  1198. <td>type x, the x</td>
  1199. </tr>
  1200.  
  1201. <tr>
  1202. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alingment"></i></th>
  1203. <td>alingment</td>
  1204. </tr>
  1205.  
  1206. <tr>
  1207. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  1208. <td>temperment</td>
  1209. </tr>
  1210.  
  1211. <tr>
  1212. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  1213. <td>the archetype</td>
  1214. </tr>
  1215.  
  1216. <tr>
  1217. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  1218. <td>element</td>
  1219. </tr>
  1220.  
  1221. </table>
  1222. </div>
  1223. <!-- end stats-->
  1224. </div>
  1225. <!-- end stats column-->
  1226.  
  1227. <!-- links column-->
  1228. <div class="tagsc">
  1229. <!-- another image i guess-->
  1230. <img src="https://placehold.it/191x215">
  1231.  
  1232. <!-- start links-->
  1233. <div class="links">
  1234. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  1235. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1236. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  1237. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1238. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  1239. <a href="#">blog</a>
  1240. </div>
  1241. </div>
  1242.  
  1243. <!--end links-->
  1244.  
  1245. <!-- start traits-->
  1246. <div class="traits">
  1247. <table>
  1248. <tbody>
  1249. <tr>
  1250. <td title="definition">positive trait
  1251. <td title="definition">positive trait
  1252. </tr>
  1253. <tr>
  1254. <td title="definition">neutral trait
  1255. <td title="definition">neutral trait
  1256. </tr>
  1257. <tr>
  1258. <td title="definition">negitive trait
  1259. <td title="definition">negitive trait
  1260. </tr>
  1261. </tbody>
  1262. </table>
  1263. </div>
  1264. <!-- end traits-->
  1265.  
  1266. <!-- start tv tropes-->
  1267. <div class="tvtropes">
  1268. <h1>TV<b>TROPES</b></h1>
  1269. <table cellspacing="9">
  1270. <tbody>
  1271. <tr>
  1272. <td style="background-image: url('https://placehold.it/100');">
  1273. <a href="/">
  1274. trope<br>here
  1275. </a>
  1276. </td>
  1277. <td style="background-image: url('https://placehold.it/100');">
  1278. <a href="/">
  1279. trope<br>here
  1280. </a>
  1281. </td>
  1282. <td style="background-image: url('https://placehold.it/100');">
  1283. <a href="/">
  1284. trope<br>here
  1285. </a>
  1286. </td>
  1287. </tr>
  1288. <tr>
  1289. <td style="background-image: url('https://placehold.it/100');">
  1290. <a href="/">
  1291. trope<br>here
  1292. </a>
  1293. </td>
  1294.  
  1295. <td style="background-image: url('https://placehold.it/100');">
  1296. <a href="/">
  1297. trope<br>here
  1298. </a>
  1299. </td>
  1300. <td style="background-image: url('https://placehold.it/100');">
  1301. <a href="/">
  1302. trope<br>here
  1303. </a>
  1304. </td>
  1305. </tr>
  1306. <tr>
  1307. <td style="background-image: url('https://placehold.it/100');">
  1308. <a href="/">
  1309. trope<br>here
  1310. </a>
  1311. </td>
  1312.  
  1313. <td style="background-image: url('https://placehold.it/100');">
  1314. <a href="/">
  1315. trope<br>here
  1316. </a>
  1317. </td>
  1318. <td style="background-image: url('https://placehold.it/100');">
  1319. <a href="/">
  1320. trope<br>here
  1321. </a>
  1322. </td>
  1323. </tr>
  1324. </tbody></table>
  1325. </div>
  1326. <!-- end tv tropes-->
  1327.  
  1328.  
  1329. </div>
  1330. <!--end container-->
  1331. </div>
  1332.  
  1333. <!--end tab three-->
  1334.  
  1335. <!-- start tab four-->
  1336.  
  1337. <div id="tabfour" class="tab w3-animate-opacity" style="display:none">
  1338. <!-- side statics-->
  1339. <div class="sidestatcontainer">
  1340.  
  1341. <a class="hint--right hint--warning sidestat" aria-label="development status">
  1342. <span class="statdot" style="background: #EEE721;"></span></a>
  1343.  
  1344. <a class="hint--right hint--success sidestat" aria-label="activity">
  1345. <span class="statdot" style="background: #00cc00; "></span></a>
  1346.  
  1347. <a class="hint--right hint--error sidestat" aria-label="ship status">
  1348. <span class="statdot" style="background: #cc0000; "></span></a>
  1349.  
  1350. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  1351. <span class="statdot" style="background: #cc0000; "></span></a>
  1352.  
  1353. <a class="hint--right sidestat" aria-label="affiliation">
  1354. <span class="statdot" style="background: #000; "></span></a>
  1355.  
  1356. </div>
  1357. <!-- end side statics-->
  1358.  
  1359. <div class="container">
  1360.  
  1361. <!--right column-->
  1362. <!-- start character header-->
  1363. <div class="rightcolumn">
  1364. <div class="characterheader">
  1365. <span class="hint--sright" aria-label="face claim name">
  1366. <img src="https://placehold.it/100"> </span>
  1367. <div class="charactername">first<b>last</b></div>
  1368. </div>
  1369. <!--end character header-->
  1370. <div class="bio" style="width:300px; background:#ddd;">
  1371. <h1>bio<b>graphy</b></h1>
  1372. <div class="biotext">
  1373. write shit here!! it'll scroll?
  1374. </div>
  1375. </div>
  1376. <!-- house info-->
  1377. <div class="sorting">
  1378. <h1>sorting<b>hat</b></h1>
  1379. <div class="sortingtext">
  1380. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  1381. house info here
  1382. </div>
  1383. </div>
  1384.  
  1385. <!-- end house info-->
  1386. <!-- start wand info-->
  1387. <div class="wand">
  1388. <h1>wand<b>info</b></h1>
  1389. <div class="wandtext">
  1390. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  1391. wand info here
  1392. </div>
  1393. </div>
  1394. <!-- end wand info-->
  1395.  
  1396. </div>
  1397. <!--end right column-->
  1398.  
  1399. <!--stats column-->
  1400. <div class="cstatsc">
  1401. <!--stats-->
  1402. <h1>quick<b>stats</b></h1>
  1403. <div class="cstats">
  1404. <table>
  1405. <tr>
  1406. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  1407. <td>name</td>
  1408. </tr>
  1409.  
  1410. <tr>
  1411. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  1412. <td>age</td>
  1413. </tr>
  1414.  
  1415. <tr>
  1416. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  1417. <td>b day</td>
  1418. </tr>
  1419.  
  1420. <tr>
  1421. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  1422. <td>gender</td>
  1423. </tr>
  1424.  
  1425. <tr>
  1426. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  1427. <td>he/she/they</td>
  1428. </tr>
  1429.  
  1430. <tr>
  1431. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  1432. <td>sexual</td>
  1433. </tr>
  1434.  
  1435. <tr>
  1436. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  1437. <td>blood status</td>
  1438. </tr>
  1439.  
  1440. <tr>
  1441. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  1442. <td>nationality</td>
  1443. </tr>
  1444.  
  1445. <tr>
  1446. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  1447. <td>father</td>
  1448. </tr>
  1449.  
  1450. <tr>
  1451. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  1452. <td>mother</td>
  1453. </tr>
  1454.  
  1455. <tr>
  1456. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  1457. <td>job</td>
  1458. </tr>
  1459.  
  1460. <tr>
  1461. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  1462. <td>city, country</td>
  1463. </tr>
  1464.  
  1465. <tr>
  1466. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  1467. <td>city, country</td>
  1468. </tr>
  1469.  
  1470. <tr>
  1471. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  1472. <td>zodiac</td>
  1473. </tr>
  1474.  
  1475. <tr>
  1476. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  1477. <td>xxxx</td>
  1478. </tr>
  1479.  
  1480. <tr>
  1481. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  1482. <td>type x, the x</td>
  1483. </tr>
  1484.  
  1485. <tr>
  1486. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alingment"></i></th>
  1487. <td>alingment</td>
  1488. </tr>
  1489.  
  1490. <tr>
  1491. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  1492. <td>temperment</td>
  1493. </tr>
  1494.  
  1495. <tr>
  1496. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  1497. <td>the archetype</td>
  1498. </tr>
  1499.  
  1500. <tr>
  1501. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  1502. <td>element</td>
  1503. </tr>
  1504.  
  1505. </table>
  1506. </div>
  1507. <!-- end stats-->
  1508. </div>
  1509. <!-- end stats column-->
  1510.  
  1511. <!-- links column-->
  1512. <div class="tagsc">
  1513. <!-- another image i guess-->
  1514. <img src="https://placehold.it/191x215">
  1515.  
  1516. <!-- start links-->
  1517. <div class="links">
  1518. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  1519. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1520. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  1521. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1522. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  1523. <a href="#">blog</a>
  1524. </div>
  1525. </div>
  1526.  
  1527. <!--end links-->
  1528.  
  1529. <!-- start traits-->
  1530. <div class="traits">
  1531. <table>
  1532. <tbody>
  1533. <tr>
  1534. <td title="definition">positive trait
  1535. <td title="definition">positive trait
  1536. </tr>
  1537. <tr>
  1538. <td title="definition">neutral trait
  1539. <td title="definition">neutral trait
  1540. </tr>
  1541. <tr>
  1542. <td title="definition">negitive trait
  1543. <td title="definition">negitive trait
  1544. </tr>
  1545. </tbody>
  1546. </table>
  1547. </div>
  1548. <!-- end traits-->
  1549.  
  1550. <!-- start tv tropes-->
  1551. <div class="tvtropes">
  1552. <h1>TV<b>TROPES</b></h1>
  1553. <table cellspacing="9">
  1554. <tbody>
  1555. <tr>
  1556. <td style="background-image: url('https://placehold.it/100');">
  1557. <a href="/">
  1558. trope<br>here
  1559. </a>
  1560. </td>
  1561. <td style="background-image: url('https://placehold.it/100');">
  1562. <a href="/">
  1563. trope<br>here
  1564. </a>
  1565. </td>
  1566. <td style="background-image: url('https://placehold.it/100');">
  1567. <a href="/">
  1568. trope<br>here
  1569. </a>
  1570. </td>
  1571. </tr>
  1572. <tr>
  1573. <td style="background-image: url('https://placehold.it/100');">
  1574. <a href="/">
  1575. trope<br>here
  1576. </a>
  1577. </td>
  1578.  
  1579. <td style="background-image: url('https://placehold.it/100');">
  1580. <a href="/">
  1581. trope<br>here
  1582. </a>
  1583. </td>
  1584. <td style="background-image: url('https://placehold.it/100');">
  1585. <a href="/">
  1586. trope<br>here
  1587. </a>
  1588. </td>
  1589. </tr>
  1590. <tr>
  1591. <td style="background-image: url('https://placehold.it/100');">
  1592. <a href="/">
  1593. trope<br>here
  1594. </a>
  1595. </td>
  1596.  
  1597. <td style="background-image: url('https://placehold.it/100');">
  1598. <a href="/">
  1599. trope<br>here
  1600. </a>
  1601. </td>
  1602. <td style="background-image: url('https://placehold.it/100');">
  1603. <a href="/">
  1604. trope<br>here
  1605. </a>
  1606. </td>
  1607. </tr>
  1608. </tbody></table>
  1609. </div>
  1610. <!-- end tv tropes-->
  1611.  
  1612.  
  1613. </div>
  1614. <!--end container-->
  1615. </div>
  1616.  
  1617. <!--end tab four-->
  1618.  
  1619. <!-- start tab five-->
  1620.  
  1621. <div id="tabfive" class="tab w3-animate-opacity" style="display:none;">
  1622. <!-- side statics-->
  1623. <div class="sidestatcontainer">
  1624.  
  1625. <a class="hint--right hint--warning sidestat" aria-label="development status">
  1626. <span class="statdot" style="background: #EEE721;"></span></a>
  1627.  
  1628. <a class="hint--right hint--success sidestat" aria-label="activity">
  1629. <span class="statdot" style="background: #00cc00; "></span></a>
  1630.  
  1631. <a class="hint--right hint--error sidestat" aria-label="ship status">
  1632. <span class="statdot" style="background: #cc0000; "></span></a>
  1633.  
  1634. <a class="hint--right hint--error sidestat" aria-label="plotting availibility">
  1635. <span class="statdot" style="background: #cc0000; "></span></a>
  1636.  
  1637. <a class="hint--right sidestat" aria-label="affiliation">
  1638. <span class="statdot" style="background: #000; "></span></a>
  1639.  
  1640. </div>
  1641. <!-- end side statics-->
  1642.  
  1643. <div class="container">
  1644.  
  1645. <!--right column-->
  1646. <!-- start character header-->
  1647. <div class="rightcolumn">
  1648. <div class="characterheader">
  1649. <span class="hint--sright" aria-label="face claim name">
  1650. <img src="https://placehold.it/100"> </span>
  1651. <div class="charactername">first<b>last</b></div>
  1652. </div>
  1653. <!--end character header-->
  1654. <div class="bio" style="width:300px; background:#ddd;">
  1655. <h1>bio<b>graphy</b></h1>
  1656. <div class="biotext">
  1657. write shit here!! it'll scroll?
  1658. </div>
  1659. </div>
  1660. <!-- house info-->
  1661. <div class="sorting">
  1662. <h1>sorting<b>hat</b></h1>
  1663. <div class="sortingtext">
  1664. <img src="https://placehold.it/100" style="float:right; padding:5px; padding-right:0px;">
  1665. house info here
  1666. </div>
  1667. </div>
  1668.  
  1669. <!-- end house info-->
  1670. <!-- start wand info-->
  1671. <div class="wand">
  1672. <h1>wand<b>info</b></h1>
  1673. <div class="wandtext">
  1674. <img src="https://placehold.it/100" style="float:left; padding:5px; padding-left:0px;">
  1675. wand info here
  1676. </div>
  1677. </div>
  1678. <!-- end wand info-->
  1679.  
  1680. </div>
  1681. <!--end right column-->
  1682.  
  1683. <!--stats column-->
  1684. <div class="cstatsc">
  1685. <!--stats-->
  1686. <h1>quick<b>stats</b></h1>
  1687. <div class="cstats">
  1688. <table>
  1689. <tr>
  1690. <th><i class="fa fa-user fa-fw" aria-hidden="true" title="full name"></i></th>
  1691. <td>name</td>
  1692. </tr>
  1693.  
  1694. <tr>
  1695. <th><i class="fa fa-calendar-plus fa-fw" aria-hidden="true" title="age"></i></th>
  1696. <td>age</td>
  1697. </tr>
  1698.  
  1699. <tr>
  1700. <th><i class="fa fa-birthday-cake fa-fw" aria-hidden="true" title="birthday"></i></th>
  1701. <td>b day</td>
  1702. </tr>
  1703.  
  1704. <tr>
  1705. <th><i class="fa fa-transgender-alt fa-fw" aria-hidden="true" title="gender"></i></th>
  1706. <td>gender</td>
  1707. </tr>
  1708.  
  1709. <tr>
  1710. <th><i class="fa fa-asterisk fa-fw" aria-hidden="true" title="pronouns"></i></th>
  1711. <td>he/she/they</td>
  1712. </tr>
  1713.  
  1714. <tr>
  1715. <th><i class="fa fa-heart fa-fw" aria-hidden="true" title="sexuality"></i></th>
  1716. <td>sexual</td>
  1717. </tr>
  1718.  
  1719. <tr>
  1720. <th><i class="fa fa-universal-access fa-fw" aria-hidden="true" title="blood status"></i></th>
  1721. <td>blood status</td>
  1722. </tr>
  1723.  
  1724. <tr>
  1725. <th><i class="fa fa-globe-africa fa-fw" aria-hidden="true" title="nationality"></i></th>
  1726. <td>nationality</td>
  1727. </tr>
  1728.  
  1729. <tr>
  1730. <th><i class="fa fa-male fa-fw" aria-hidden="true" title="father"></i></th>
  1731. <td>father</td>
  1732. </tr>
  1733.  
  1734. <tr>
  1735. <th><i class="fa fa-female fa-fw" aria-hidden="true" title="mother"></i></th>
  1736. <td>mother</td>
  1737. </tr>
  1738.  
  1739. <tr>
  1740. <th><i class="fa fa-briefcase fa-fw" aria-hidden="true" title="occupation"></i></th>
  1741. <td>job</td>
  1742. </tr>
  1743.  
  1744. <tr>
  1745. <th><i class="fa fa-atlas fa-fw" aria-hidden="true" title="hometown"></i></th>
  1746. <td>city, country</td>
  1747. </tr>
  1748.  
  1749. <tr>
  1750. <th><i class="fa fa-map-marker-alt fa-fw" aria-hidden="true" title="residence"></i></th>
  1751. <td>city, country</td>
  1752. </tr>
  1753.  
  1754. <tr>
  1755. <th><i class="fa fa-moon fa-fw" aria-hidden="true" title="zodiac"></i></th>
  1756. <td>zodiac</td>
  1757. </tr>
  1758.  
  1759. <tr>
  1760. <th><i class="fa fa-chart-pie fa-fw" aria-hidden="true" title="mbti"></i></th>
  1761. <td>xxxx</td>
  1762. </tr>
  1763.  
  1764. <tr>
  1765. <th><i class="fab fa-connectdevelop fa-fw" aria-hidden="true" title="enneagram"></i></th>
  1766. <td>type x, the x</td>
  1767. </tr>
  1768.  
  1769. <tr>
  1770. <th><i class="fa fa-table fa-fw" aria-hidden="true" title="moral alingment"></i></th>
  1771. <td>alingment</td>
  1772. </tr>
  1773.  
  1774. <tr>
  1775. <th><i class="fa fa-fire fa-fw" aria-hidden="true" title="temperament"></i></th>
  1776. <td>temperment</td>
  1777. </tr>
  1778.  
  1779. <tr>
  1780. <th><i class="fas fa-crown fa-fw" aria-hidden="true" title="archetype"></i></th>
  1781. <td>the archetype</td>
  1782. </tr>
  1783.  
  1784. <tr>
  1785. <th><i class="fab fa-superpowers fa-fw" aria-hidden="true" title="element"></i></th>
  1786. <td>element</td>
  1787. </tr>
  1788.  
  1789. </table>
  1790. </div>
  1791. <!-- end stats-->
  1792. </div>
  1793. <!-- end stats column-->
  1794.  
  1795. <!-- links column-->
  1796. <div class="tagsc">
  1797. <!-- another image i guess-->
  1798. <img src="https://placehold.it/191x215">
  1799.  
  1800. <!-- start links-->
  1801. <div class="links">
  1802. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>main<b>tag</b></a>
  1803. <a href="#"><b>ship</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1804. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>answered<b>tag</b></a>
  1805. <a href="#"><b>headcanons</b>tag<i class="fab fa-slack-hash fa-fw fa-flip-horizontal" aria-hidden="true"></i></a>
  1806. <a href="#"><i class="fab fa-slack-hash fa-fw" aria-hidden="true"></i>writing<b>tag</b></a>
  1807. <a href="#">blog</a>
  1808. </div>
  1809. </div>
  1810.  
  1811. <!--end links-->
  1812.  
  1813. <!-- start traits-->
  1814. <div class="traits">
  1815. <table>
  1816. <tbody>
  1817. <tr>
  1818. <td title="definition">positive trait
  1819. <td title="definition">positive trait
  1820. </tr>
  1821. <tr>
  1822. <td title="definition">neutral trait
  1823. <td title="definition">neutral trait
  1824. </tr>
  1825. <tr>
  1826. <td title="definition">negitive trait
  1827. <td title="definition">negitive trait
  1828. </tr>
  1829. </tbody>
  1830. </table>
  1831. </div>
  1832. <!-- end traits-->
  1833.  
  1834. <!-- start tv tropes-->
  1835. <div class="tvtropes">
  1836. <h1>TV<b>TROPES</b></h1>
  1837. <table cellspacing="9">
  1838. <tbody>
  1839. <tr>
  1840. <td style="background-image: url('https://placehold.it/100');">
  1841. <a href="/">
  1842. trope<br>here
  1843. </a>
  1844. </td>
  1845. <td style="background-image: url('https://placehold.it/100');">
  1846. <a href="/">
  1847. trope<br>here
  1848. </a>
  1849. </td>
  1850. <td style="background-image: url('https://placehold.it/100');">
  1851. <a href="/">
  1852. trope<br>here
  1853. </a>
  1854. </td>
  1855. </tr>
  1856. <tr>
  1857. <td style="background-image: url('https://placehold.it/100');">
  1858. <a href="/">
  1859. trope<br>here
  1860. </a>
  1861. </td>
  1862.  
  1863. <td style="background-image: url('https://placehold.it/100');">
  1864. <a href="/">
  1865. trope<br>here
  1866. </a>
  1867. </td>
  1868. <td style="background-image: url('https://placehold.it/100');">
  1869. <a href="/">
  1870. trope<br>here
  1871. </a>
  1872. </td>
  1873. </tr>
  1874. <tr>
  1875. <td style="background-image: url('https://placehold.it/100');">
  1876. <a href="/">
  1877. trope<br>here
  1878. </a>
  1879. </td>
  1880.  
  1881. <td style="background-image: url('https://placehold.it/100');">
  1882. <a href="/">
  1883. trope<br>here
  1884. </a>
  1885. </td>
  1886. <td style="background-image: url('https://placehold.it/100');">
  1887. <a href="/">
  1888. trope<br>here
  1889. </a>
  1890. </td>
  1891. </tr>
  1892. </tbody></table>
  1893. </div>
  1894. <!-- end tv tropes-->
  1895.  
  1896.  
  1897. </div>
  1898. <!--end container-->
  1899. </div>
  1900.  
  1901. <!-- end tab five-->
  1902.  
  1903. <!-- credit -->
  1904. <div class="credit">
  1905. <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>
  1906. </div>
  1907.  
  1908. </body>
  1909. </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!