API tools faq
paste
codesbyraven

trialogues

codesbyraven
Jun 1st, 2016
6,995
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.30 KB | None | 0 0
raw download clone embed print report
  1. <!--- page by hailthehelpful. please don't use this as a base, redistribute...just don't steal it in general. use common sense. thanks!-->
  2.  
  3. <!doctype html>
  4. <html>
  5. <head>
  6. <title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100,100italic,400italic,500,700,700italic|Permanent+Marker' rel='stylesheet' type='text/css'>
  12.  
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  14. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
  15.  
  16. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"/>
  17.  
  18. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"/>
  19.  
  20. <!--font awesome-->
  21.  
  22. <script src="https://use.fontawesome.com/4b64282c24.js"></script>
  23.  
  24. <script type="text/javascript">
  25. $(document).ready(function() {
  26. $('.slider-for').slick({
  27. slidesToShow: 1,
  28. slidesToScroll: 1,
  29. arrows: false,
  30. fade: true,
  31. asNavFor: '.slider-nav',
  32.  
  33. });
  34. $('.slider-nav').slick({
  35.  
  36. centerPadding:'40px',
  37. slidesToShow: 3,
  38. slidesToScroll: 1,
  39. asNavFor: '.slider-for',
  40. dots: true,
  41. focusOnSelect: true,
  42. vertical:true,
  43. verticalSwipe:true,
  44. appendDots:$('.content'),
  45. arrows: false,
  46. centerMode: true,
  47. TouchThreshold:10,
  48. });
  49.  
  50. });
  51. </script>
  52.  
  53. </head>
  54.  
  55. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  56. <script>
  57. (function($){
  58. $(document).ready(function(){
  59. $("[title]").style_my_tooltips({
  60. tip_follows_cursor:true,
  61. tip_delay_time:100,
  62. tip_fade_speed:200
  63. }
  64. );
  65. });
  66. })(jQuery);
  67. </script>
  68.  
  69. <style type="text/css">
  70. .tumblr_preview_marker___.slick-slide {
  71. position: absolute;
  72. }
  73.  
  74. #s-m-t-tooltip {
  75. max-width: 300px;
  76. margin: 10px;
  77. padding: 3px 9px;
  78. border-radius: 4px;
  79. background: #151515;
  80. color: #fff;
  81. z-index: 999999;
  82. font-size: 9px;
  83. font-weight: 100;
  84. text-transform: lowercase;
  85. box-shadow: 1px 1px 0 rgba(228,63,204,0.5);
  86. }
  87.  
  88. ::-webkit-scrollbar{width:8px}
  89. ::-webkit-scrollbar-thumb{background-color:#0a0a0a;border-radius:5px}
  90. ::-webkit-scrollbar:horizontal{background-color:#000;height:5px}
  91. ::-webkit-scrollbar-thumb:horizontal{background-color:#fff}
  92. ::-webkit-scrollbar-corner{background-color:#000}
  93. ::selection{background:gray;color:#FFF;text-shadow:0}
  94. ::-moz-selection{background:gray;color:#FFF}
  95.  
  96. body {
  97. margin: 0;
  98. background: #151515;
  99. background-image: url('');
  100. background-attachment: fixed;
  101. background-position: center;
  102. background-size: cover;
  103. color: #fff;
  104. font-size: 12.5px;
  105. font-family: roboto,helvetica,arial,sans-serif;
  106. }
  107.  
  108.  
  109. a {
  110. color: #fff; /*link color*/
  111. outline: none;
  112. text-decoration: none;
  113. -webkit-transition: all .3s ease-in-out;
  114. -moz-transition: all .3s ease-in-out;
  115. -ms-transition: all .3s ease-in-out;
  116. -o-transition: all .3s ease-in-out;
  117. transition: all .3s ease-in-out;
  118. -moz-outline-style: none;
  119. }
  120.  
  121.  
  122. h1 {
  123. margin: 0 10px 10px;
  124. padding: 10px;
  125. width: 445px;
  126. color: #151515;
  127. text-align: center;
  128. text-transform: uppercase;
  129. letter-spacing: 1px;
  130. font-weight: 300;
  131. font-size:11px;
  132. position: relative;
  133. }
  134.  
  135.  
  136. h1:after{position:absolute;top:0;right:-10px;width:0;height:0;border-width:35px 10px 0 0;border-style:solid;content:""}
  137. h1:before{position:absolute;top:0;left:-10px;width:0;height:0;border-width:0 0 35px 10px;border-style:solid;content:""}
  138.  
  139.  
  140. .content {
  141. position: absolute;
  142. left: 145px;
  143. margin: 45px 10px;
  144. padding: 20px;
  145. width: 760px;
  146. height: 460px;
  147. background: #151515 !important;
  148. text-align: justify;
  149. font-weight: 100;
  150. }
  151.  
  152. .content:after{position:absolute;bottom:-20px;left:0;z-index:-9;width:0;height:0;border-width:20px 760px 0 0;border-style:solid;border-color:#151515 transparent transparent;content:""}
  153. .content:before{position:absolute;top:-20px;left:0;z-index:-9;width:0;height:0;border-width:0 0 20px 760px;border-style:solid;border-color:transparent transparent #151515;content:""}
  154.  
  155.  
  156.  
  157. .title {
  158. z-index: 999999;
  159. padding-bottom: 5px;
  160. color: #f2f2f2;
  161. text-transform: uppercase;
  162. text-shadow: 1px 1px 0 #ffad50,-1px -1px 0 #5cb9b5;
  163. font-size: 28px;
  164. font-family: 'permanent marker';
  165. }
  166.  
  167. .sideimg {
  168. float: left;
  169. height: 380px;
  170. }
  171.  
  172. .sideimg img {
  173. height: 100%;
  174. }
  175.  
  176. img {
  177. max-width: 100%;
  178. }
  179.  
  180. #container {
  181. position: fixed;
  182. top: 100px;
  183. left: 250px;
  184. }
  185.  
  186. .inner {
  187. overflow: auto;
  188. padding: 10px 15px 30px 20px;
  189. height: 350px;
  190. font-size: 11px;
  191. -webkit-mask-image: -webkit-gradient(linear,center 90%,center bottom,from(rgba(0,0,0,20)),to(rgba(20,0,0,0)));
  192. }
  193.  
  194.  
  195. #links {
  196. color: #acacac;
  197. font-size: 8px;
  198. text-transform: uppercase;
  199. margin-top: 10px;
  200. }
  201.  
  202. .minibio {
  203. line-height: 170%;
  204. }
  205.  
  206. .minibio p:first-child:first-letter {
  207. float: left;
  208. padding-top: 4px;
  209. padding-right: 8px;
  210. padding-left: 3px;
  211. color: #fff;
  212. font-size: 55px;
  213. font-family: 'permanent marker';
  214. line-height: 50px;
  215. }
  216.  
  217.  
  218. .stats {
  219. display: inline-block;
  220. width: 240px;
  221. vertical-align: top;
  222. text-align: left;
  223. line-height: 13px;
  224. margin-bottom: 20px;
  225. }
  226.  
  227. .bar {
  228. position: relative;
  229. display: inherit;
  230. width: 237px;
  231. height: 10px;
  232. background-color: #2D2D2D;
  233. }
  234.  
  235. .barinner {
  236. position: absolute;
  237. top: 0;
  238. left: 0;
  239. height: 10px;
  240. background-color: #B0B0B0;
  241. color: #151515;
  242. line-height: 10px;
  243. }
  244.  
  245. .inner ul {
  246. margin: 0;
  247. margin-bottom: 10px;
  248. padding: 0;
  249. list-style: none;
  250. text-align: left;
  251. }
  252.  
  253. .inner li {
  254. display: inline-block;
  255. margin: 5px 5px 5px 0;
  256. padding: 2px 0 0;
  257. border-bottom: 1px solid #454545;
  258. }
  259.  
  260. ul b {
  261. text-transform: uppercase;
  262. font-size: 10px!important;
  263. font-family: roboto !important;
  264. color: #fff;
  265. font-style: italic;
  266. line-height: 100%;
  267. font-weight: 100!important;
  268. }
  269.  
  270. .thumbnail {
  271. margin: 0;
  272. padding: 0;
  273. width: 130px;
  274. height: 130px;
  275. background:#151515
  276. }
  277.  
  278. .thumbnail img {
  279. opacity: .7;
  280. -webkit-filter: brightness(70%);
  281. -webkit-transition: all .4s ease-in-out;
  282. -moz-transition: all .4s ease-in-out;
  283. -ms-transition: all .4s ease-in-out;
  284. -o-transition: all .4s ease-in-out;
  285. transition: all .4s ease-in-out;
  286. }
  287.  
  288.  
  289. #personname { color: #E1418E; }
  290. #personname h1 { background-color: #E1418E;}
  291. #personname h1:after { border-color: #E1418E transparent transparent; }
  292. #personname h1:before { border-color: transparent transparent #E1418E; }
  293.  
  294. #anothername { color: #5CB9B5; }
  295. #anothername h1 { background-color: #5CB9B5; }
  296. #anothername h1:after { border-color: #5CB9B5 transparent transparent; }
  297. #anothername h1:before { border-color: transparent transparent #5CB9B5; }
  298.  
  299.  
  300.  
  301. /*no need to touch this css down here its a mess */
  302.  
  303. .thumbnail:focus{outline:0!important}
  304. .thumbnail.slick-current img{opacity:1;-webkit-filter:brightness(100%)!important}
  305.  
  306. .thumbnailcontainer{position:fixed;top:155px;width:130px;height:130px}
  307. .thumbnailcontainer img{float:left;height:130px}
  308. .slick-vertical .slick-slide{width:130px!important;border:none}
  309.  
  310. .slick-dots{bottom:-50px}
  311. .slick-dots li.slick-active button:before{color:#fff;opacity:.75}
  312. .slick-dots li button::before{color:#fff}
  313.  
  314.  
  315. #credit{line-height:100%; border-radius:50%;position:fixed;bottom:10px;right:10px;color:#fff;background:rgba(0,0,0,.2);padding:5px;width:10px;height:10px;overflow:hidden;font-size:10px;font-weight:100;white-space:nowrap;-moz-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;transition:all .6s ease-in-out}#credit:hover{background:#000;width:80px;border-radius:15px}#credit:before{font-size:10px;content:'\f292';font-family:FontAwesome;padding-right:5px;
  316. }
  317.  
  318. .iframe-controls-container.iframe-controls-container--logged-in
  319. {display:none}
  320.  
  321. iframe {display:none}
  322. </style>
  323.  
  324.  
  325. <body>
  326.  
  327. <div id="container">
  328.  
  329. <div class="slider thumbnailcontainer slider-nav">
  330.  
  331. <div class="thumbnail"><!--thumbnail one-->
  332. <img src="http://placehold.it/130x130"></div>
  333.  
  334. <div class="thumbnail"><!--thumbnail two-->
  335. <img src="http://placehold.it/130x130"></div>
  336.  
  337. <div class="thumbnail"><!--thumbnail three-->
  338. <img src="http://placehold.it/130x130"></div>
  339.  
  340. <div class="thumbnail"><!--thumbnail four-->
  341. <img src="http://placehold.it/130x130"></div>
  342.  
  343. <div class="thumbnail"><!--thumbnail five-->
  344. <img src="http://placehold.it/130x130"></div>
  345.  
  346. <div class="thumbnail"><!--thumbnail six-->
  347. <img src="http://placehold.it/130x130"></div>
  348.  
  349. </div>
  350.  
  351. <div class="slider content slider-for">
  352.  
  353. <!-------------------------------SLIDE ONE------------------------------->
  354.  
  355. <div style="text-align:center">
  356.  
  357. <div class="title"> insert cool title</div>
  358.  
  359. <img src="http://placehold.it/1000x320?text=a header image if you want (it'll resize)">
  360.  
  361. <p>Eiusmod chia slow-carb schlitz before they sold out cronut austin stumptown. Pitchfork et literally ennui knausgaard banjo roof party pop-up cred DIY, YOLO excepteur nesciunt yr. Sustainable yr elit vegan kickstarter mlkshk. Mlkshk art party taxidermy hella street art intelligentsia, asymmetrical sint. Bitters literally consectetur freegan duis before they sold out wolf, umami delectus tote bag. Farm-to-table venmo gluten-free blue bottle. Pickled proident pitchfork thundercats.</p>
  362.  
  363.  
  364. <div id="links">
  365. click images to view dossier &nbsp;|&nbsp; click <a href="/">here</a> to return home</div>
  366. </div>
  367.  
  368.  
  369. <!-------------------------------SLIDE TWO------------------------------->
  370. <div id="personname">
  371.  
  372. <div class="title">
  373. — character name
  374. </div>
  375.  
  376. <img class="sideimg" src="http://placehold.it/190x380">
  377.  
  378. <div class="inner">
  379.  
  380. <h1>a quote, descriptor, whatever</h1>
  381.  
  382. <div class="minibio">
  383. <p>Ugh qui tattooed mollit, fashion axe roof party incididunt humblebrag yuccie man braid irure. Art party wayfarers tousled mlkshk, brunch asymmetrical pop-up synth kale chips plaid. Food truck in helvetica echo park, cornhole trust fund umami before they sold out ullamco. Listicle fanny pack blog deserunt irony. Organic pitchfork craft beer affogato tacos, four loko bushwick culpa truffaut migas food truck slow-carb dolore. Bitters swag +1, slow-carb commodo four dollar toast venmo elit incididunt asymmetrical lumbersexual hashtag before they sold out. Nulla duis mlkshk, blog laborum vegan yr squid voluptate nihil placeat cold-pressed post-ironic.</p>
  384. </div>
  385.  
  386.  
  387. <h1>age, moral alignment, mbti</h1>
  388.  
  389. <!----------------------------stats section---------------------------->
  390.  
  391.  
  392. <div class="stats">
  393. stamina
  394. <div class="bar">
  395. <span class="barinner" style="width:50%"></span>
  396. </div><br>
  397. strength
  398. <div class="bar">
  399. <span class="barinner" style="width:50%"></span>
  400. </div><br>
  401. battle skill
  402. <div class="bar">
  403. <span class="barinner" style="width:50%"></span>
  404. </div><br>
  405. agility
  406. <div class="bar">
  407. <span class="barinner" style="width:50%"></span>
  408. </div><br>
  409. strategy
  410. <div class="bar">
  411. <span class="barinner" style="width:50%"></span>
  412. </div><br>
  413. teamwork
  414. <div class="bar">
  415. <span class="barinner" style="width:50%"></span>
  416. </div><br>
  417. </div>
  418. <div class="stats">
  419. intelligence
  420. <div class="bar">
  421. <span class="barinner" style="width:50%"></span>
  422. </div><br>
  423. empathy
  424. <div class="bar">
  425. <span class="barinner" style="width:50%"></span>
  426. </div><br>
  427. compassion
  428. <div class="bar">
  429. <span class="barinner" style="width:50%"></span>
  430. </div><br>
  431. creativity
  432. <div class="bar">
  433. <span class="barinner" style="width:50%"></span>
  434. </div><br>
  435. wisdom
  436. <div class="bar">
  437. <span class="barinner" style="width:50%"></span>
  438. </div><br>
  439. charisma
  440. <div class="bar">
  441. <span class="barinner" style="width:50%"></span>
  442. </div><br>
  443. </div>
  444. <!----------------------------basics---------------------------->
  445.  
  446. <h1>basics</h1>
  447. <ul>
  448. <li><b>full name:</b> full name</li>
  449. <li><b>nickname:</b> nickname</li>
  450. <li><b>age:</b> age</li>
  451. <li><b>birth date:</b> birth date</li>
  452. <li><b>race/ethnicity:</b> race/ethnicity</li>
  453. <li><b>gender:</b> male</li>
  454. <li><b>romantic orientation:</b> orientation</li>
  455. <li><b>sexual orientation:</b> orientation</li>
  456. <li><b>religion:</b> religion</li>
  457. <li><b>spoken languages:</b> languages</li>
  458. <li><b>current living conditions:</b> living conditions</li>
  459. <li><b>occupation:</b> occupation</li>
  460. </ul>
  461.  
  462. <!----------------------------appearance---------------------------->
  463.  
  464. <h1>appearance</h1>
  465. <ul>
  466. <li><b>eye color:</b> eye color</li>
  467. <li>hair color: hair color</li>
  468. <li><b>height:</b> height</li>
  469. <li><b>body build:</b> body build</li>
  470. <li><b>tattoos & piercings:</b> tattoo & piercings</li>
  471. <li><b>voice claim:</b> voice claim</li>
  472. <li><b>notable physical traits:</b> notable physical traits</li>
  473. </ul>
  474.  
  475. <!----------------------------personality---------------------------->
  476.  
  477. <h1>personality</h1>
  478. <ul>
  479. <li><b>likes:</b> likes</li>
  480. <li><b>dislikes:</b> dislikes</li>
  481. <li><b>phobias:</b> phobias</li>
  482. <li><b>mental:</b> mental</li>
  483. </ul>
  484.  
  485. <!----------------------------relationships---------------------------->
  486.  
  487. <h1>relationships</h1>
  488. <ul>
  489. <li><b>parents:</b> parents</li>
  490. <li><b>siblings:</b> siblings</li>
  491. <li><b>significant other:</b> significant other</li>
  492. <li><b>children:</b> children</li>
  493. </ul>
  494.  
  495. </div>
  496. </div>
  497. <!-----------------------------END SLIDE TWO----------------------------->
  498.  
  499. <!-------------------------------SLIDE THREE------------------------------->
  500. <div id="anothername">
  501.  
  502. <div class="title">
  503. — character name
  504. </div>
  505.  
  506. <img class="sideimg" src="http://placehold.it/190x380">
  507.  
  508. <div class="inner">
  509.  
  510. <h1>a quote, descriptor, whatever</h1>
  511.  
  512. <div class="minibio">
  513. <p>Ugh qui tattooed mollit, fashion axe roof party incididunt humblebrag yuccie man braid irure. Art party wayfarers tousled mlkshk, brunch asymmetrical pop-up synth kale chips plaid. Food truck in helvetica echo park, cornhole trust fund umami before they sold out ullamco. Listicle fanny pack blog deserunt irony. Organic pitchfork craft beer affogato tacos, four loko bushwick culpa truffaut migas food truck slow-carb dolore. Bitters swag +1, slow-carb commodo four dollar toast venmo elit incididunt asymmetrical lumbersexual hashtag before they sold out. Nulla duis mlkshk, blog laborum vegan yr squid voluptate nihil placeat cold-pressed post-ironic.</p>
  514. </div>
  515.  
  516.  
  517. <h1>age, moral alignment, mbti</h1>
  518.  
  519. <!----------------------------stats section---------------------------->
  520.  
  521.  
  522. <div class="stats">
  523. stamina
  524. <div class="bar">
  525. <span class="barinner" style="width:50%"></span>
  526. </div><br>
  527. strength
  528. <div class="bar">
  529. <span class="barinner" style="width:50%"></span>
  530. </div><br>
  531. battle skill
  532. <div class="bar">
  533. <span class="barinner" style="width:50%"></span>
  534. </div><br>
  535. agility
  536. <div class="bar">
  537. <span class="barinner" style="width:50%"></span>
  538. </div><br>
  539. strategy
  540. <div class="bar">
  541. <span class="barinner" style="width:50%"></span>
  542. </div><br>
  543. teamwork
  544. <div class="bar">
  545. <span class="barinner" style="width:50%"></span>
  546. </div><br>
  547. </div>
  548. <div class="stats">
  549. intelligence
  550. <div class="bar">
  551. <span class="barinner" style="width:50%"></span>
  552. </div><br>
  553. empathy
  554. <div class="bar">
  555. <span class="barinner" style="width:50%"></span>
  556. </div><br>
  557. compassion
  558. <div class="bar">
  559. <span class="barinner" style="width:50%"></span>
  560. </div><br>
  561. creativity
  562. <div class="bar">
  563. <span class="barinner" style="width:50%"></span>
  564. </div><br>
  565. wisdom
  566. <div class="bar">
  567. <span class="barinner" style="width:50%"></span>
  568. </div><br>
  569. charisma
  570. <div class="bar">
  571. <span class="barinner" style="width:50%"></span>
  572. </div><br>
  573. </div>
  574. <!----------------------------basics---------------------------->
  575.  
  576. <h1>basics</h1>
  577. <ul>
  578. <li><b>full name:</b> full name</li>
  579. <li><b>nickname:</b> nickname</li>
  580. <li><b>age:</b> age</li>
  581. <li><b>birth date:</b> birth date</li>
  582. <li><b>race/ethnicity:</b> race/ethnicity</li>
  583. <li><b>gender:</b> male</li>
  584. <li><b>romantic orientation:</b> orientation</li>
  585. <li><b>sexual orientation:</b> orientation</li>
  586. <li><b>religion:</b> religion</li>
  587. <li><b>spoken languages:</b> languages</li>
  588. <li><b>current living conditions:</b> living conditions</li>
  589. <li><b>occupation:</b> occupation</li>
  590. </ul>
  591.  
  592. <!----------------------------appearance---------------------------->
  593.  
  594. <h1>appearance</h1>
  595. <ul>
  596. <li><b>eye color:</b> eye color</li>
  597. <li>hair color: hair color</li>
  598. <li><b>height:</b> height</li>
  599. <li><b>body build:</b> body build</li>
  600. <li><b>tattoos & piercings:</b> tattoo & piercings</li>
  601. <li><b>voice claim:</b> voice claim</li>
  602. <li><b>notable physical traits:</b> notable physical traits</li>
  603. </ul>
  604.  
  605. <!----------------------------personality---------------------------->
  606.  
  607. <h1>personality</h1>
  608. <ul>
  609. <li><b>likes:</b> likes</li>
  610. <li><b>dislikes:</b> dislikes</li>
  611. <li><b>phobias:</b> phobias</li>
  612. <li><b>mental:</b> mental</li>
  613. </ul>
  614.  
  615. <!----------------------------relationships---------------------------->
  616.  
  617. <h1>relationships</h1>
  618. <ul>
  619. <li><b>parents:</b> parents</li>
  620. <li><b>siblings:</b> siblings</li>
  621. <li><b>significant other:</b> significant other</li>
  622. <li><b>children:</b> children</li>
  623. </ul>
  624.  
  625. </div>
  626. </div>
  627. <!-----------------------------END SLIDE THREE----------------------------->
  628.  
  629. <!-------------------------------SLIDE FOUR------------------------------->
  630. <div id="personname">
  631.  
  632. <div class="title">
  633. — character name
  634. </div>
  635.  
  636. <img class="sideimg" src="http://placehold.it/190x380">
  637.  
  638. <div class="inner">
  639.  
  640. <h1>a quote, descriptor, whatever</h1>
  641.  
  642. <div class="minibio">
  643. <p>Ugh qui tattooed mollit, fashion axe roof party incididunt humblebrag yuccie man braid irure. Art party wayfarers tousled mlkshk, brunch asymmetrical pop-up synth kale chips plaid. Food truck in helvetica echo park, cornhole trust fund umami before they sold out ullamco. Listicle fanny pack blog deserunt irony. Organic pitchfork craft beer affogato tacos, four loko bushwick culpa truffaut migas food truck slow-carb dolore. Bitters swag +1, slow-carb commodo four dollar toast venmo elit incididunt asymmetrical lumbersexual hashtag before they sold out. Nulla duis mlkshk, blog laborum vegan yr squid voluptate nihil placeat cold-pressed post-ironic.</p>
  644. </div>
  645.  
  646.  
  647. <h1>age, moral alignment, mbti</h1>
  648.  
  649. <!----------------------------stats section---------------------------->
  650.  
  651.  
  652. <div class="stats">
  653. stamina
  654. <div class="bar">
  655. <span class="barinner" style="width:50%"></span>
  656. </div><br>
  657. strength
  658. <div class="bar">
  659. <span class="barinner" style="width:50%"></span>
  660. </div><br>
  661. battle skill
  662. <div class="bar">
  663. <span class="barinner" style="width:50%"></span>
  664. </div><br>
  665. agility
  666. <div class="bar">
  667. <span class="barinner" style="width:50%"></span>
  668. </div><br>
  669. strategy
  670. <div class="bar">
  671. <span class="barinner" style="width:50%"></span>
  672. </div><br>
  673. teamwork
  674. <div class="bar">
  675. <span class="barinner" style="width:50%"></span>
  676. </div><br>
  677. </div>
  678. <div class="stats">
  679. intelligence
  680. <div class="bar">
  681. <span class="barinner" style="width:50%"></span>
  682. </div><br>
  683. empathy
  684. <div class="bar">
  685. <span class="barinner" style="width:50%"></span>
  686. </div><br>
  687. compassion
  688. <div class="bar">
  689. <span class="barinner" style="width:50%"></span>
  690. </div><br>
  691. creativity
  692. <div class="bar">
  693. <span class="barinner" style="width:50%"></span>
  694. </div><br>
  695. wisdom
  696. <div class="bar">
  697. <span class="barinner" style="width:50%"></span>
  698. </div><br>
  699. charisma
  700. <div class="bar">
  701. <span class="barinner" style="width:50%"></span>
  702. </div><br>
  703. </div>
  704. <!----------------------------basics---------------------------->
  705.  
  706. <h1>basics</h1>
  707. <ul>
  708. <li><b>full name:</b> full name</li>
  709. <li><b>nickname:</b> nickname</li>
  710. <li><b>age:</b> age</li>
  711. <li><b>birth date:</b> birth date</li>
  712. <li><b>race/ethnicity:</b> race/ethnicity</li>
  713. <li><b>gender:</b> male</li>
  714. <li><b>romantic orientation:</b> orientation</li>
  715. <li><b>sexual orientation:</b> orientation</li>
  716. <li><b>religion:</b> religion</li>
  717. <li><b>spoken languages:</b> languages</li>
  718. <li><b>current living conditions:</b> living conditions</li>
  719. <li><b>occupation:</b> occupation</li>
  720. </ul>
  721.  
  722. <!----------------------------appearance---------------------------->
  723.  
  724. <h1>appearance</h1>
  725. <ul>
  726. <li><b>eye color:</b> eye color</li>
  727. <li>hair color: hair color</li>
  728. <li><b>height:</b> height</li>
  729. <li><b>body build:</b> body build</li>
  730. <li><b>tattoos & piercings:</b> tattoo & piercings</li>
  731. <li><b>voice claim:</b> voice claim</li>
  732. <li><b>notable physical traits:</b> notable physical traits</li>
  733. </ul>
  734.  
  735. <!----------------------------personality---------------------------->
  736.  
  737. <h1>personality</h1>
  738. <ul>
  739. <li><b>likes:</b> likes</li>
  740. <li><b>dislikes:</b> dislikes</li>
  741. <li><b>phobias:</b> phobias</li>
  742. <li><b>mental:</b> mental</li>
  743. </ul>
  744.  
  745. <!----------------------------relationships---------------------------->
  746.  
  747. <h1>relationships</h1>
  748. <ul>
  749. <li><b>parents:</b> parents</li>
  750. <li><b>siblings:</b> siblings</li>
  751. <li><b>significant other:</b> significant other</li>
  752. <li><b>children:</b> children</li>
  753. </ul>
  754.  
  755. </div>
  756. </div>
  757. <!-----------------------------END SLIDE FOUR----------------------------->
  758.  
  759. <!-------------------------------SLIDE FIVE------------------------------->
  760. <div id="anothername">
  761.  
  762. <div class="title">
  763. — character name
  764. </div>
  765.  
  766. <img class="sideimg" src="http://placehold.it/190x380">
  767.  
  768. <div class="inner">
  769.  
  770. <h1>a quote, descriptor, whatever</h1>
  771.  
  772. <div class="minibio">
  773. <p>Ugh qui tattooed mollit, fashion axe roof party incididunt humblebrag yuccie man braid irure. Art party wayfarers tousled mlkshk, brunch asymmetrical pop-up synth kale chips plaid. Food truck in helvetica echo park, cornhole trust fund umami before they sold out ullamco. Listicle fanny pack blog deserunt irony. Organic pitchfork craft beer affogato tacos, four loko bushwick culpa truffaut migas food truck slow-carb dolore. Bitters swag +1, slow-carb commodo four dollar toast venmo elit incididunt asymmetrical lumbersexual hashtag before they sold out. Nulla duis mlkshk, blog laborum vegan yr squid voluptate nihil placeat cold-pressed post-ironic.</p>
  774. </div>
  775.  
  776.  
  777. <h1>age, moral alignment, mbti</h1>
  778.  
  779. <!----------------------------stats section---------------------------->
  780.  
  781.  
  782. <div class="stats">
  783. stamina
  784. <div class="bar">
  785. <span class="barinner" style="width:50%"></span>
  786. </div><br>
  787. strength
  788. <div class="bar">
  789. <span class="barinner" style="width:50%"></span>
  790. </div><br>
  791. battle skill
  792. <div class="bar">
  793. <span class="barinner" style="width:50%"></span>
  794. </div><br>
  795. agility
  796. <div class="bar">
  797. <span class="barinner" style="width:50%"></span>
  798. </div><br>
  799. strategy
  800. <div class="bar">
  801. <span class="barinner" style="width:50%"></span>
  802. </div><br>
  803. teamwork
  804. <div class="bar">
  805. <span class="barinner" style="width:50%"></span>
  806. </div><br>
  807. </div>
  808. <div class="stats">
  809. intelligence
  810. <div class="bar">
  811. <span class="barinner" style="width:50%"></span>
  812. </div><br>
  813. empathy
  814. <div class="bar">
  815. <span class="barinner" style="width:50%"></span>
  816. </div><br>
  817. compassion
  818. <div class="bar">
  819. <span class="barinner" style="width:50%"></span>
  820. </div><br>
  821. creativity
  822. <div class="bar">
  823. <span class="barinner" style="width:50%"></span>
  824. </div><br>
  825. wisdom
  826. <div class="bar">
  827. <span class="barinner" style="width:50%"></span>
  828. </div><br>
  829. charisma
  830. <div class="bar">
  831. <span class="barinner" style="width:50%"></span>
  832. </div><br>
  833. </div>
  834. <!----------------------------basics---------------------------->
  835.  
  836. <h1>basics</h1>
  837. <ul>
  838. <li><b>full name:</b> full name</li>
  839. <li><b>nickname:</b> nickname</li>
  840. <li><b>age:</b> age</li>
  841. <li><b>birth date:</b> birth date</li>
  842. <li><b>race/ethnicity:</b> race/ethnicity</li>
  843. <li><b>gender:</b> male</li>
  844. <li><b>romantic orientation:</b> orientation</li>
  845. <li><b>sexual orientation:</b> orientation</li>
  846. <li><b>religion:</b> religion</li>
  847. <li><b>spoken languages:</b> languages</li>
  848. <li><b>current living conditions:</b> living conditions</li>
  849. <li><b>occupation:</b> occupation</li>
  850. </ul>
  851.  
  852. <!----------------------------appearance---------------------------->
  853.  
  854. <h1>appearance</h1>
  855. <ul>
  856. <li><b>eye color:</b> eye color</li>
  857. <li>hair color: hair color</li>
  858. <li><b>height:</b> height</li>
  859. <li><b>body build:</b> body build</li>
  860. <li><b>tattoos & piercings:</b> tattoo & piercings</li>
  861. <li><b>voice claim:</b> voice claim</li>
  862. <li><b>notable physical traits:</b> notable physical traits</li>
  863. </ul>
  864.  
  865. <!----------------------------personality---------------------------->
  866.  
  867. <h1>personality</h1>
  868. <ul>
  869. <li><b>likes:</b> likes</li>
  870. <li><b>dislikes:</b> dislikes</li>
  871. <li><b>phobias:</b> phobias</li>
  872. <li><b>mental:</b> mental</li>
  873. </ul>
  874.  
  875. <!----------------------------relationships---------------------------->
  876.  
  877. <h1>relationships</h1>
  878. <ul>
  879. <li><b>parents:</b> parents</li>
  880. <li><b>siblings:</b> siblings</li>
  881. <li><b>significant other:</b> significant other</li>
  882. <li><b>children:</b> children</li>
  883. </ul>
  884.  
  885. </div>
  886. </div>
  887. <!-----------------------------END SLIDE FIVE----------------------------->
  888.  
  889. <!-------------------------------SLIDE SIX------------------------------->
  890. <div id="personname">
  891.  
  892. <div class="title">
  893. — character name
  894. </div>
  895.  
  896. <img class="sideimg" src="http://placehold.it/190x380">
  897.  
  898. <div class="inner">
  899.  
  900. <h1>a quote, descriptor, whatever</h1>
  901.  
  902. <div class="minibio">
  903. <p>Ugh qui tattooed mollit, fashion axe roof party incididunt humblebrag yuccie man braid irure. Art party wayfarers tousled mlkshk, brunch asymmetrical pop-up synth kale chips plaid. Food truck in helvetica echo park, cornhole trust fund umami before they sold out ullamco. Listicle fanny pack blog deserunt irony. Organic pitchfork craft beer affogato tacos, four loko bushwick culpa truffaut migas food truck slow-carb dolore. Bitters swag +1, slow-carb commodo four dollar toast venmo elit incididunt asymmetrical lumbersexual hashtag before they sold out. Nulla duis mlkshk, blog laborum vegan yr squid voluptate nihil placeat cold-pressed post-ironic.</p>
  904. </div>
  905.  
  906.  
  907. <h1>age, moral alignment, mbti</h1>
  908.  
  909. <!----------------------------stats section---------------------------->
  910.  
  911.  
  912. <div class="stats">
  913. stamina
  914. <div class="bar">
  915. <span class="barinner" style="width:50%"></span>
  916. </div><br>
  917. strength
  918. <div class="bar">
  919. <span class="barinner" style="width:50%"></span>
  920. </div><br>
  921. battle skill
  922. <div class="bar">
  923. <span class="barinner" style="width:50%"></span>
  924. </div><br>
  925. agility
  926. <div class="bar">
  927. <span class="barinner" style="width:50%"></span>
  928. </div><br>
  929. strategy
  930. <div class="bar">
  931. <span class="barinner" style="width:50%"></span>
  932. </div><br>
  933. teamwork
  934. <div class="bar">
  935. <span class="barinner" style="width:50%"></span>
  936. </div><br>
  937. </div>
  938. <div class="stats">
  939. intelligence
  940. <div class="bar">
  941. <span class="barinner" style="width:50%"></span>
  942. </div><br>
  943. empathy
  944. <div class="bar">
  945. <span class="barinner" style="width:50%"></span>
  946. </div><br>
  947. compassion
  948. <div class="bar">
  949. <span class="barinner" style="width:50%"></span>
  950. </div><br>
  951. creativity
  952. <div class="bar">
  953. <span class="barinner" style="width:50%"></span>
  954. </div><br>
  955. wisdom
  956. <div class="bar">
  957. <span class="barinner" style="width:50%"></span>
  958. </div><br>
  959. charisma
  960. <div class="bar">
  961. <span class="barinner" style="width:50%"></span>
  962. </div><br>
  963. </div>
  964. <!----------------------------basics---------------------------->
  965.  
  966. <h1>basics</h1>
  967. <ul>
  968. <li><b>full name:</b> full name</li>
  969. <li><b>nickname:</b> nickname</li>
  970. <li><b>age:</b> age</li>
  971. <li><b>birth date:</b> birth date</li>
  972. <li><b>race/ethnicity:</b> race/ethnicity</li>
  973. <li><b>gender:</b> male</li>
  974. <li><b>romantic orientation:</b> orientation</li>
  975. <li><b>sexual orientation:</b> orientation</li>
  976. <li><b>religion:</b> religion</li>
  977. <li><b>spoken languages:</b> languages</li>
  978. <li><b>current living conditions:</b> living conditions</li>
  979. <li><b>occupation:</b> occupation</li>
  980. </ul>
  981.  
  982. <!----------------------------appearance---------------------------->
  983.  
  984. <h1>appearance</h1>
  985. <ul>
  986. <li><b>eye color:</b> eye color</li>
  987. <li>hair color: hair color</li>
  988. <li><b>height:</b> height</li>
  989. <li><b>body build:</b> body build</li>
  990. <li><b>tattoos & piercings:</b> tattoo & piercings</li>
  991. <li><b>voice claim:</b> voice claim</li>
  992. <li><b>notable physical traits:</b> notable physical traits</li>
  993. </ul>
  994.  
  995. <!----------------------------personality---------------------------->
  996.  
  997. <h1>personality</h1>
  998. <ul>
  999. <li><b>likes:</b> likes</li>
  1000. <li><b>dislikes:</b> dislikes</li>
  1001. <li><b>phobias:</b> phobias</li>
  1002. <li><b>mental:</b> mental</li>
  1003. </ul>
  1004.  
  1005. <!----------------------------relationships---------------------------->
  1006.  
  1007. <h1>relationships</h1>
  1008. <ul>
  1009. <li><b>parents:</b> parents</li>
  1010. <li><b>siblings:</b> siblings</li>
  1011. <li><b>significant other:</b> significant other</li>
  1012. <li><b>children:</b> children</li>
  1013. </ul>
  1014.  
  1015. </div>
  1016. </div>
  1017. <!-----------------------------END SLIDE SIX----------------------------->
  1018.  
  1019.  
  1020. <!--DONT TOUCH WHATS BELOW HERE-->
  1021. </div>
  1022. </div>
  1023.  
  1024. <a href="http://www.hailthehelpful.tumblr.com">
  1025. <div id="credit">hailthehelpful.</div>
  1026. </a>
  1027. </body>
  1028.  
  1029. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!