API tools faq
paste
tricksterkid

request page // sunflower + stat box

tricksterkid
Oct 26th, 2020 (edited)
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <!--
  6. || CREDITS ||
  7.  
  8. Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  9.  
  10. Fonts from Google >> https://fonts.google.com/
  11.  
  12. Placeholders from Unsplash >> https://unsplash.com/
  13.  
  14. -->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <title>{Name} / title</title> <!-- page title -->
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i|Josefin+Sans:400,400i,700,700i|Kristi:400,400i,700,700i" rel="stylesheet">
  25.  
  26. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  27.  
  28. <style type="text/css">
  29.  
  30. /* ----------------------------------------------------------------------- */
  31. /* --------------------------- custom tooltips --------------------------- */
  32.  
  33. .tippy-tooltip.custom-theme {
  34. background-color: #5c616d;
  35. color: #f5d177;
  36. font-family: inherit;
  37. text-align: center;
  38. }
  39.  
  40. /* ----------------------------------------------------------------------- */
  41. /* -------------------- custom selection & scrollbar --------------------- */
  42.  
  43. ::-moz-selection {background: #f4f8ff; color: #2f3136;}
  44. ::selection {background: #f4f8ff; color: #2f3136;}
  45.  
  46. ::-webkit-scrollbar-thumb {background: #f4f8ff;}
  47. ::-webkit-scrollbar {background: #2f3136; width: 5px;}
  48.  
  49. * {margin:0; padding:0;}
  50.  
  51. /* ----------------------------------------------------------------------- */
  52. /* ---------------------------- large blocks ----------------------------- */
  53.  
  54. body {
  55. background: #2f3136; /* background color */
  56. color: #f4f8ff; /* text color */
  57. font-family: Josefin Sans; /* font */
  58. font-size: 14px; /* font size */
  59. text-align: justify; /* text align */
  60. -ms-overflow-style: none;
  61. }
  62.  
  63. body::-webkit-scrollbar {
  64. display: none;
  65. }
  66.  
  67. #sidemenu { /* CONTAINER SIDE MENU */
  68. background-color: #36393f;
  69. border-radius: 20px;
  70. height: calc(100% - 80px);
  71. margin: 20px;
  72. overflow: auto;
  73. padding: 20px;
  74. position: absolute;
  75. width: 150px;
  76. -ms-overflow-style: none;
  77. }
  78.  
  79. #sidemenu::-webkit-scrollbar {
  80. display: none;
  81. }
  82.  
  83. #btncontainer { /* CONTAINER TOP BUTTONS */
  84. background-color: #36393f;
  85. border-radius: 20px 20px 0px 0px;
  86. height: 50px;
  87. overflow: hidden;
  88. margin: 20px;
  89. position: absolute;
  90. right: 0;
  91. width: calc(100% - 260px);
  92. }
  93.  
  94. #container { /* CONTAINER CONTENT */
  95. background-color: #36393f;
  96. border-radius: 0px 0px 20px 20px;
  97. bottom: 0;
  98. height: calc(100% - 130px);
  99. margin: 20px;
  100. overflow: none;
  101. padding: 20px;
  102. position: absolute;
  103. right: 0;
  104. width: calc(100% - 300px);
  105. }
  106.  
  107. .tabcontent { /* CONTAINER TAB CONTENT */
  108. display: none;
  109. height: 100%;
  110. overflow: none;
  111. width: 100%;
  112. }
  113.  
  114. /* ----------------------------------------------------------------------- */
  115. /* ----------------------------- tab buttons ----------------------------- */
  116.  
  117. #btncontainer button { /* tab buttons */
  118. background-color: inherit;
  119. border: none;
  120. color: #dee1e9;
  121. cursor: pointer;
  122. display: inline;
  123. font-family: inherit;
  124. margin: 0;
  125. outline: none;
  126. padding: 15px;
  127. text-transform: uppercase;
  128. }
  129.  
  130. #btncontainer button:hover { /* tab buttons hover */
  131. background-color: #f57794;
  132. color: #f4f8ff;
  133. transition: 0.4s;
  134. }
  135.  
  136. #btncontainer button.active { /* active tab button */
  137. background-color: #f57794;
  138. color: #f4f8ff;
  139. }
  140.  
  141. /* ----------------------------------------------------------------------- */
  142. /* -------------------------------- text --------------------------------- */
  143.  
  144. h1 { /* sidebar title */
  145. color: #f5d177;
  146. font-family: Fira Sans;
  147. font-size: 2em;
  148. font-weight: normal;
  149. margin-top: 15px;
  150. text-align: center;
  151. text-transform: uppercase;
  152. }
  153.  
  154. h2 { /* character names */
  155. bottom: -10;
  156. color: #f5d177;
  157. font-family: Kristi;
  158. font-size: 5em;
  159. font-weight: normal;
  160. position: absolute;
  161. right: 18;
  162. }
  163.  
  164. h3 { /* block titles */
  165. color: #f5d177;
  166. font-family: Fira Sans;
  167. font-size: 1.5em;
  168. font-weight: normal;
  169. margin-bottom: 10px;
  170. text-align: right;
  171. text-transform: uppercase;
  172. }
  173.  
  174. a {
  175. color: #f57794; /* link color */
  176. text-decoration: none;
  177. }
  178.  
  179. a:hover {
  180. color: #f5d177; /* link hover color */
  181. transition: 0.4s;
  182. }
  183.  
  184. b { /* bold text */
  185. color: #f57794;
  186. }
  187.  
  188. i { /* italic text */
  189. color: #f5d177;
  190. }
  191.  
  192. /* ----------------------------------------------------------------------- */
  193. /* --------------------------- sidebar content --------------------------- */
  194.  
  195. #sidebarimage { /* sidebar icon */
  196. background-color: #2f3136;
  197. border-radius: 100%;
  198. padding: 10px;
  199. width: 130px;
  200. }
  201.  
  202. .sidebarlinks { /* sidebar links */
  203. background-color: #5c616d;
  204. border-radius: 20px;
  205. color: #dee1e9;
  206. font-size: 15px;
  207. margin: 20px 0px;
  208. padding: 12px 15px;
  209. text-transform: uppercase;
  210. }
  211.  
  212. .sidebarlinks:hover {
  213. background-color: #f57794;
  214. color: #f4f8ff;
  215. transition: 0.4s;
  216. }
  217.  
  218. /* ----------------------------------------------------------------------- */
  219. /* -------------------------- character content -------------------------- */
  220.  
  221. .characterpic { /* 2000x3000 */
  222. border-radius: 20px;
  223. float: right;
  224. height: 100%;
  225. }
  226.  
  227. .content { /* container for text */
  228. float: left;
  229. width: calc(100% - 420px);
  230. }
  231.  
  232. .block { /* content blocks */
  233. border: 1px solid #f57794;
  234. border-radius: 20px;
  235. float: left;
  236. height: 240px;
  237. line-height: 18px;
  238. margin: 0px 20px 20px 10px;
  239. overflow: auto;
  240. padding: 20px;
  241. width: 300px;
  242. -ms-overflow-style: none;
  243. }
  244.  
  245. .block::-webkit-scrollbar {
  246. display: none;
  247. }
  248.  
  249. .left { /* left column */
  250. border-right: 1px solid #f57794;
  251. float: left;
  252. line-height: 20px;
  253. margin-right: 20px;
  254. padding-right: 20px;
  255. text-transform: uppercase;
  256. width: auto;
  257. }
  258.  
  259. .right { /* right column */
  260. float: left;
  261. line-height: 20px;
  262. }
  263.  
  264. .pictures { /* little pictures */
  265. border: 2px solid #f57794;
  266. border-radius: 100%;
  267. float: left;
  268. margin: 8px 5px;
  269. padding: 5px;
  270. width: 75px;
  271. }
  272.  
  273. .pictures:hover {
  274. cursor: cell;
  275. transition: 0.4s;
  276. }
  277.  
  278. /* ----------------------------------------------------------------------- */
  279. /* ---------------------------- bottom credit ---------------------------- */
  280.  
  281. #credit {
  282. color: #5c616d;
  283. border-radius: 5px;
  284. bottom: 0;
  285. display: inline;
  286. font-style: italic;
  287. left: 0;
  288. margin: 25px 0px 25px 36px;
  289. padding: 10px;
  290. position: fixed;
  291. }
  292.  
  293. #credit:hover {
  294. color: #dee1e9;
  295. transition: 0.4s;
  296. }
  297.  
  298. /* ----------------------------------------------------------------------- */
  299.  
  300. </style>
  301.  
  302. </head>
  303.  
  304. <body>
  305.  
  306. <!--------------------------- START SIDEBAR MENU --------------------------->
  307.  
  308. <div id="sidemenu">
  309.  
  310. <a href="/">
  311. <img id="sidebarimage" src="https://i.imgur.com/llSaaBi.jpg">
  312. </a>
  313.  
  314. <h1>sunflower</h1>
  315.  
  316. <a href="">
  317. <div class="sidebarlinks">
  318. Link 1
  319. </div>
  320. </a>
  321.  
  322. <a href="">
  323. <div class="sidebarlinks">
  324. Link 2
  325. </div>
  326. </a>
  327.  
  328. <a href="">
  329. <div class="sidebarlinks">
  330. Link 3
  331. </div>
  332. </a>
  333.  
  334. <a href="">
  335. <div class="sidebarlinks">
  336. Link 4
  337. </div>
  338. </a>
  339.  
  340. <a href="">
  341. <div class="sidebarlinks">
  342. Link 5
  343. </div>
  344. </a>
  345.  
  346. </div>
  347.  
  348. <!---------------------------- END SIDEBAR MENU ---------------------------->
  349.  
  350. <!--------------------------- START TAB BUTTONS ---------------------------->
  351.  
  352. <div id="btncontainer">
  353.  
  354. <button class="tablinks" onclick="openTab(event, 'Tab 1')" id="defaultOpen">
  355. character 1
  356. </button>
  357.  
  358. <button class="tablinks" onclick="openTab(event, 'Tab 2')">
  359. character 2
  360. </button>
  361.  
  362. <button class="tablinks" onclick="openTab(event, 'Tab 3')">
  363. character 3
  364. </button>
  365.  
  366. </div>
  367.  
  368. <!---------------------------- END TAB BUTTONS ----------------------------->
  369.  
  370. <!--------------------------- START MAIN CONTENT---------------------------->
  371.  
  372. <div id="container">
  373.  
  374. <!---------------------------- START TAB 1 ----------------------------->
  375.  
  376. <div id="Tab 1" class="tabcontent">
  377.  
  378. <div class="content">
  379.  
  380. <h2>Character Name</h2>
  381.  
  382. <!-- START BLOCK 1 -->
  383.  
  384. <div class="block">
  385.  
  386. <h3>facts</h3>
  387.  
  388. <div class="left">
  389.  
  390. name
  391. <br>
  392. nickname
  393. <br>
  394. age
  395. <br>
  396. gender
  397. <br>
  398. pronouns
  399. <br>
  400. sexuality
  401. <br>
  402. alignment
  403. <br>
  404. zodiac
  405. <br>
  406. height
  407. <br>
  408. hobbies
  409.  
  410. </div>
  411.  
  412. <div class="right">
  413.  
  414. name
  415. <br>
  416. nickname
  417. <br>
  418. age
  419. <br>
  420. gender
  421. <br>
  422. pronouns
  423. <br>
  424. sexuality
  425. <br>
  426. alignment
  427. <br>
  428. zodiac
  429. <br>
  430. height
  431. <br>
  432. hobbies
  433.  
  434. </div>
  435.  
  436. </div>
  437.  
  438. <!-- END BLOCK 1 -->
  439.  
  440. <!-- START BLOCK 2 -->
  441.  
  442. <div class="block">
  443.  
  444. <h3>stats</h3>
  445.  
  446. <div class="left">
  447. stat 1
  448. <br>
  449. stat 2
  450. <br>
  451. stat 3
  452. <br>
  453. stat 4
  454. <br>
  455. stat 5
  456. <br>
  457. stat 6
  458. <br>
  459. stat 7
  460. <br>
  461. stat 8
  462. <br>
  463. stat 9
  464. <br>
  465. stat 10
  466. <br>
  467. </div>
  468.  
  469. <!-- START STATS -->
  470.  
  471. <div class="right">
  472.  
  473. <!-- STAT 1 -->
  474.  
  475. <i class="fa fa-heart"></i>
  476. <i class="fa fa-heart"></i>
  477. <i class="fa fa-heart"></i>
  478. <i class="fa fa-heart"></i>
  479. <i class="fa fa-heart-o"></i>
  480. <i class="fa fa-heart-o"></i>
  481. <i class="fa fa-heart-o"></i>
  482. <i class="fa fa-heart-o"></i>
  483. <i class="fa fa-heart-o"></i>
  484. <i class="fa fa-heart-o"></i>
  485.  
  486. <br>
  487.  
  488. <!-- STAT 2 -->
  489.  
  490. <i class="fa fa-heart"></i>
  491. <i class="fa fa-heart"></i>
  492. <i class="fa fa-heart-o"></i>
  493. <i class="fa fa-heart-o"></i>
  494. <i class="fa fa-heart-o"></i>
  495. <i class="fa fa-heart-o"></i>
  496. <i class="fa fa-heart-o"></i>
  497. <i class="fa fa-heart-o"></i>
  498. <i class="fa fa-heart-o"></i>
  499. <i class="fa fa-heart-o"></i>
  500.  
  501. <br>
  502.  
  503. <!-- STAT 3 -->
  504.  
  505. <i class="fa fa-heart"></i>
  506. <i class="fa fa-heart"></i>
  507. <i class="fa fa-heart"></i>
  508. <i class="fa fa-heart"></i>
  509. <i class="fa fa-heart"></i>
  510. <i class="fa fa-heart"></i>
  511. <i class="fa fa-heart"></i>
  512. <i class="fa fa-heart"></i>
  513. <i class="fa fa-heart-o"></i>
  514. <i class="fa fa-heart-o"></i>
  515.  
  516. <br>
  517.  
  518. <!-- STAT 4 -->
  519.  
  520. <i class="fa fa-heart"></i>
  521. <i class="fa fa-heart"></i>
  522. <i class="fa fa-heart"></i>
  523. <i class="fa fa-heart"></i>
  524. <i class="fa fa-heart"></i>
  525. <i class="fa fa-heart"></i>
  526. <i class="fa fa-heart-o"></i>
  527. <i class="fa fa-heart-o"></i>
  528. <i class="fa fa-heart-o"></i>
  529. <i class="fa fa-heart-o"></i>
  530.  
  531. <br>
  532.  
  533. <!-- STAT 5 -->
  534.  
  535. <i class="fa fa-heart"></i>
  536. <i class="fa fa-heart-o"></i>
  537. <i class="fa fa-heart-o"></i>
  538. <i class="fa fa-heart-o"></i>
  539. <i class="fa fa-heart-o"></i>
  540. <i class="fa fa-heart-o"></i>
  541. <i class="fa fa-heart-o"></i>
  542. <i class="fa fa-heart-o"></i>
  543. <i class="fa fa-heart-o"></i>
  544. <i class="fa fa-heart-o"></i>
  545.  
  546. <br>
  547.  
  548. <!-- STAT 6 -->
  549.  
  550. <i class="fa fa-heart"></i>
  551. <i class="fa fa-heart"></i>
  552. <i class="fa fa-heart"></i>
  553. <i class="fa fa-heart"></i>
  554. <i class="fa fa-heart-o"></i>
  555. <i class="fa fa-heart-o"></i>
  556. <i class="fa fa-heart-o"></i>
  557. <i class="fa fa-heart-o"></i>
  558. <i class="fa fa-heart-o"></i>
  559. <i class="fa fa-heart-o"></i>
  560.  
  561. <br>
  562.  
  563. <!-- STAT 7 -->
  564.  
  565. <i class="fa fa-heart"></i>
  566. <i class="fa fa-heart"></i>
  567. <i class="fa fa-heart"></i>
  568. <i class="fa fa-heart"></i>
  569. <i class="fa fa-heart"></i>
  570. <i class="fa fa-heart"></i>
  571. <i class="fa fa-heart"></i>
  572. <i class="fa fa-heart"></i>
  573. <i class="fa fa-heart"></i>
  574. <i class="fa fa-heart"></i>
  575.  
  576. <br>
  577.  
  578. <!-- STAT 8 -->
  579.  
  580. <i class="fa fa-heart"></i>
  581. <i class="fa fa-heart"></i>
  582. <i class="fa fa-heart-o"></i>
  583. <i class="fa fa-heart-o"></i>
  584. <i class="fa fa-heart-o"></i>
  585. <i class="fa fa-heart-o"></i>
  586. <i class="fa fa-heart-o"></i>
  587. <i class="fa fa-heart-o"></i>
  588. <i class="fa fa-heart-o"></i>
  589. <i class="fa fa-heart-o"></i>
  590.  
  591. <br>
  592.  
  593. <!-- STAT 9 -->
  594.  
  595. <i class="fa fa-heart"></i>
  596. <i class="fa fa-heart"></i>
  597. <i class="fa fa-heart"></i>
  598. <i class="fa fa-heart"></i>
  599. <i class="fa fa-heart"></i>
  600. <i class="fa fa-heart"></i>
  601. <i class="fa fa-heart"></i>
  602. <i class="fa fa-heart"></i>
  603. <i class="fa fa-heart"></i>
  604. <i class="fa fa-heart-o"></i>
  605.  
  606. <br>
  607.  
  608. <!-- STAT 10 -->
  609.  
  610. <i class="fa fa-heart"></i>
  611. <i class="fa fa-heart"></i>
  612. <i class="fa fa-heart"></i>
  613. <i class="fa fa-heart"></i>
  614. <i class="fa fa-heart"></i>
  615. <i class="fa fa-heart"></i>
  616. <i class="fa fa-heart-o"></i>
  617. <i class="fa fa-heart-o"></i>
  618. <i class="fa fa-heart-o"></i>
  619. <i class="fa fa-heart-o"></i>
  620.  
  621. </div>
  622.  
  623. <!-- END STATS -->
  624.  
  625. </div>
  626.  
  627. <!-- END BLOCK 2 -->
  628.  
  629. <!-- START BLOCK 3 -->
  630.  
  631. <div class="block">
  632.  
  633. <h3>relationships</h3>
  634.  
  635. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  636. title="friends">
  637.  
  638. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  639. title="lovers">
  640.  
  641. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  642. title="siblings">
  643.  
  644. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  645. title="strangers">
  646.  
  647. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  648. title="acquaintances">
  649.  
  650. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  651. title="enemies">
  652.  
  653. </div>
  654.  
  655. <!-- END BLOCK 3 -->
  656.  
  657. <!-- START BLOCK 4 -->
  658.  
  659. <div class="block">
  660.  
  661. <h3>bio</h3>
  662.  
  663. You can put a character bio here. If you're wondering what a link looks like, <a href="">this is the answer</a>. There's also <b>bold text</b> as well as <i>italic text</i>, so go wild! It has automatic overflow, so you can put as much text here as you want.
  664.  
  665. <br><br>
  666.  
  667. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  668.  
  669. <br><br>
  670.  
  671. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  672.  
  673. </div>
  674.  
  675. <!-- END BLOCK 4 -->
  676.  
  677. </div>
  678.  
  679. <img class="characterpic" src="https://i.imgur.com/LvbAEzE.jpg">
  680.  
  681. </div>
  682.  
  683. <!----------------------------- END TAB 1 ------------------------------>
  684.  
  685. <!---------------------------- START TAB 2 ----------------------------->
  686.  
  687. <div id="Tab 2" class="tabcontent">
  688.  
  689. <div class="content">
  690.  
  691. <h2>Character Name</h2>
  692.  
  693. <!-- START BLOCK 1 -->
  694.  
  695. <div class="block">
  696.  
  697. <h3>facts</h3>
  698.  
  699. <div class="left">
  700.  
  701. name
  702. <br>
  703. nickname
  704. <br>
  705. age
  706. <br>
  707. gender
  708. <br>
  709. pronouns
  710. <br>
  711. sexuality
  712. <br>
  713. alignment
  714. <br>
  715. zodiac
  716. <br>
  717. height
  718. <br>
  719. hobbies
  720.  
  721. </div>
  722.  
  723. <div class="right">
  724.  
  725. name
  726. <br>
  727. nickname
  728. <br>
  729. age
  730. <br>
  731. gender
  732. <br>
  733. pronouns
  734. <br>
  735. sexuality
  736. <br>
  737. alignment
  738. <br>
  739. zodiac
  740. <br>
  741. height
  742. <br>
  743. hobbies
  744.  
  745. </div>
  746.  
  747. </div>
  748.  
  749. <!-- END BLOCK 1 -->
  750.  
  751. <!-- START BLOCK 2 -->
  752.  
  753. <div class="block">
  754.  
  755. <h3>stats</h3>
  756.  
  757. <div class="left">
  758. stat 1
  759. <br>
  760. stat 2
  761. <br>
  762. stat 3
  763. <br>
  764. stat 4
  765. <br>
  766. stat 5
  767. <br>
  768. stat 6
  769. <br>
  770. stat 7
  771. <br>
  772. stat 8
  773. <br>
  774. stat 9
  775. <br>
  776. stat 10
  777. <br>
  778. </div>
  779.  
  780. <!-- START STATS -->
  781.  
  782. <div class="right">
  783.  
  784. <!-- STAT 1 -->
  785.  
  786. <i class="fa fa-heart"></i>
  787. <i class="fa fa-heart"></i>
  788. <i class="fa fa-heart"></i>
  789. <i class="fa fa-heart"></i>
  790. <i class="fa fa-heart-o"></i>
  791. <i class="fa fa-heart-o"></i>
  792. <i class="fa fa-heart-o"></i>
  793. <i class="fa fa-heart-o"></i>
  794. <i class="fa fa-heart-o"></i>
  795. <i class="fa fa-heart-o"></i>
  796.  
  797. <br>
  798.  
  799. <!-- STAT 2 -->
  800.  
  801. <i class="fa fa-heart"></i>
  802. <i class="fa fa-heart"></i>
  803. <i class="fa fa-heart-o"></i>
  804. <i class="fa fa-heart-o"></i>
  805. <i class="fa fa-heart-o"></i>
  806. <i class="fa fa-heart-o"></i>
  807. <i class="fa fa-heart-o"></i>
  808. <i class="fa fa-heart-o"></i>
  809. <i class="fa fa-heart-o"></i>
  810. <i class="fa fa-heart-o"></i>
  811.  
  812. <br>
  813.  
  814. <!-- STAT 3 -->
  815.  
  816. <i class="fa fa-heart"></i>
  817. <i class="fa fa-heart"></i>
  818. <i class="fa fa-heart"></i>
  819. <i class="fa fa-heart"></i>
  820. <i class="fa fa-heart"></i>
  821. <i class="fa fa-heart"></i>
  822. <i class="fa fa-heart"></i>
  823. <i class="fa fa-heart"></i>
  824. <i class="fa fa-heart-o"></i>
  825. <i class="fa fa-heart-o"></i>
  826.  
  827. <br>
  828.  
  829. <!-- STAT 4 -->
  830.  
  831. <i class="fa fa-heart"></i>
  832. <i class="fa fa-heart"></i>
  833. <i class="fa fa-heart"></i>
  834. <i class="fa fa-heart"></i>
  835. <i class="fa fa-heart"></i>
  836. <i class="fa fa-heart"></i>
  837. <i class="fa fa-heart-o"></i>
  838. <i class="fa fa-heart-o"></i>
  839. <i class="fa fa-heart-o"></i>
  840. <i class="fa fa-heart-o"></i>
  841.  
  842. <br>
  843.  
  844. <!-- STAT 5 -->
  845.  
  846. <i class="fa fa-heart"></i>
  847. <i class="fa fa-heart-o"></i>
  848. <i class="fa fa-heart-o"></i>
  849. <i class="fa fa-heart-o"></i>
  850. <i class="fa fa-heart-o"></i>
  851. <i class="fa fa-heart-o"></i>
  852. <i class="fa fa-heart-o"></i>
  853. <i class="fa fa-heart-o"></i>
  854. <i class="fa fa-heart-o"></i>
  855. <i class="fa fa-heart-o"></i>
  856.  
  857. <br>
  858.  
  859. <!-- STAT 6 -->
  860.  
  861. <i class="fa fa-heart"></i>
  862. <i class="fa fa-heart"></i>
  863. <i class="fa fa-heart"></i>
  864. <i class="fa fa-heart"></i>
  865. <i class="fa fa-heart-o"></i>
  866. <i class="fa fa-heart-o"></i>
  867. <i class="fa fa-heart-o"></i>
  868. <i class="fa fa-heart-o"></i>
  869. <i class="fa fa-heart-o"></i>
  870. <i class="fa fa-heart-o"></i>
  871.  
  872. <br>
  873.  
  874. <!-- STAT 7 -->
  875.  
  876. <i class="fa fa-heart"></i>
  877. <i class="fa fa-heart"></i>
  878. <i class="fa fa-heart"></i>
  879. <i class="fa fa-heart"></i>
  880. <i class="fa fa-heart"></i>
  881. <i class="fa fa-heart"></i>
  882. <i class="fa fa-heart"></i>
  883. <i class="fa fa-heart"></i>
  884. <i class="fa fa-heart"></i>
  885. <i class="fa fa-heart"></i>
  886.  
  887. <br>
  888.  
  889. <!-- STAT 8 -->
  890.  
  891. <i class="fa fa-heart"></i>
  892. <i class="fa fa-heart"></i>
  893. <i class="fa fa-heart-o"></i>
  894. <i class="fa fa-heart-o"></i>
  895. <i class="fa fa-heart-o"></i>
  896. <i class="fa fa-heart-o"></i>
  897. <i class="fa fa-heart-o"></i>
  898. <i class="fa fa-heart-o"></i>
  899. <i class="fa fa-heart-o"></i>
  900. <i class="fa fa-heart-o"></i>
  901.  
  902. <br>
  903.  
  904. <!-- STAT 9 -->
  905.  
  906. <i class="fa fa-heart"></i>
  907. <i class="fa fa-heart"></i>
  908. <i class="fa fa-heart"></i>
  909. <i class="fa fa-heart"></i>
  910. <i class="fa fa-heart"></i>
  911. <i class="fa fa-heart"></i>
  912. <i class="fa fa-heart"></i>
  913. <i class="fa fa-heart"></i>
  914. <i class="fa fa-heart"></i>
  915. <i class="fa fa-heart-o"></i>
  916.  
  917. <br>
  918.  
  919. <!-- STAT 10 -->
  920.  
  921. <i class="fa fa-heart"></i>
  922. <i class="fa fa-heart"></i>
  923. <i class="fa fa-heart"></i>
  924. <i class="fa fa-heart"></i>
  925. <i class="fa fa-heart"></i>
  926. <i class="fa fa-heart"></i>
  927. <i class="fa fa-heart-o"></i>
  928. <i class="fa fa-heart-o"></i>
  929. <i class="fa fa-heart-o"></i>
  930. <i class="fa fa-heart-o"></i>
  931.  
  932. </div>
  933.  
  934. <!-- END STATS -->
  935.  
  936. </div>
  937.  
  938. <!-- END BLOCK 2 -->
  939.  
  940. <!-- START BLOCK 3 -->
  941.  
  942. <div class="block">
  943.  
  944. <h3>relationships</h3>
  945.  
  946. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  947. title="friends">
  948.  
  949. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  950. title="lovers">
  951.  
  952. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  953. title="siblings">
  954.  
  955. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  956. title="strangers">
  957.  
  958. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  959. title="acquaintances">
  960.  
  961. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  962. title="enemies">
  963.  
  964. </div>
  965.  
  966. <!-- END BLOCK 3 -->
  967.  
  968. <!-- START BLOCK 4 -->
  969.  
  970. <div class="block">
  971.  
  972. <h3>bio</h3>
  973.  
  974. You can put a character bio here. If you're wondering what a link looks like, <a href="">this is the answer</a>. There's also <b>bold text</b> as well as <i>italic text</i>, so go wild! It has automatic overflow, so you can put as much text here as you want.
  975.  
  976. <br><br>
  977.  
  978. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  979.  
  980. <br><br>
  981.  
  982. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  983.  
  984. </div>
  985.  
  986. <!-- END BLOCK 4 -->
  987.  
  988. </div>
  989.  
  990. <img class="characterpic" src="https://i.imgur.com/HaLlBse.jpg">
  991.  
  992. </div>
  993.  
  994. <!----------------------------- END TAB 2 ------------------------------>
  995.  
  996. <!---------------------------- START TAB 3 ----------------------------->
  997.  
  998. <div id="Tab 3" class="tabcontent">
  999.  
  1000. <div class="content">
  1001.  
  1002. <h2>Character Name</h2>
  1003.  
  1004. <!-- START BLOCK 1 -->
  1005.  
  1006. <div class="block">
  1007.  
  1008. <h3>facts</h3>
  1009.  
  1010. <div class="left">
  1011.  
  1012. name
  1013. <br>
  1014. nickname
  1015. <br>
  1016. age
  1017. <br>
  1018. gender
  1019. <br>
  1020. pronouns
  1021. <br>
  1022. sexuality
  1023. <br>
  1024. alignment
  1025. <br>
  1026. zodiac
  1027. <br>
  1028. height
  1029. <br>
  1030. hobbies
  1031.  
  1032. </div>
  1033.  
  1034. <div class="right">
  1035.  
  1036. name
  1037. <br>
  1038. nickname
  1039. <br>
  1040. age
  1041. <br>
  1042. gender
  1043. <br>
  1044. pronouns
  1045. <br>
  1046. sexuality
  1047. <br>
  1048. alignment
  1049. <br>
  1050. zodiac
  1051. <br>
  1052. height
  1053. <br>
  1054. hobbies
  1055.  
  1056. </div>
  1057.  
  1058. </div>
  1059.  
  1060. <!-- END BLOCK 1 -->
  1061.  
  1062. <!-- START BLOCK 2 -->
  1063.  
  1064. <div class="block">
  1065.  
  1066. <h3>stats</h3>
  1067.  
  1068. <div class="left">
  1069. stat 1
  1070. <br>
  1071. stat 2
  1072. <br>
  1073. stat 3
  1074. <br>
  1075. stat 4
  1076. <br>
  1077. stat 5
  1078. <br>
  1079. stat 6
  1080. <br>
  1081. stat 7
  1082. <br>
  1083. stat 8
  1084. <br>
  1085. stat 9
  1086. <br>
  1087. stat 10
  1088. <br>
  1089. </div>
  1090.  
  1091. <!-- START STATS -->
  1092.  
  1093. <div class="right">
  1094.  
  1095. <!-- STAT 1 -->
  1096.  
  1097. <i class="fa fa-heart"></i>
  1098. <i class="fa fa-heart"></i>
  1099. <i class="fa fa-heart"></i>
  1100. <i class="fa fa-heart"></i>
  1101. <i class="fa fa-heart-o"></i>
  1102. <i class="fa fa-heart-o"></i>
  1103. <i class="fa fa-heart-o"></i>
  1104. <i class="fa fa-heart-o"></i>
  1105. <i class="fa fa-heart-o"></i>
  1106. <i class="fa fa-heart-o"></i>
  1107.  
  1108. <br>
  1109.  
  1110. <!-- STAT 2 -->
  1111.  
  1112. <i class="fa fa-heart"></i>
  1113. <i class="fa fa-heart"></i>
  1114. <i class="fa fa-heart-o"></i>
  1115. <i class="fa fa-heart-o"></i>
  1116. <i class="fa fa-heart-o"></i>
  1117. <i class="fa fa-heart-o"></i>
  1118. <i class="fa fa-heart-o"></i>
  1119. <i class="fa fa-heart-o"></i>
  1120. <i class="fa fa-heart-o"></i>
  1121. <i class="fa fa-heart-o"></i>
  1122.  
  1123. <br>
  1124.  
  1125. <!-- STAT 3 -->
  1126.  
  1127. <i class="fa fa-heart"></i>
  1128. <i class="fa fa-heart"></i>
  1129. <i class="fa fa-heart"></i>
  1130. <i class="fa fa-heart"></i>
  1131. <i class="fa fa-heart"></i>
  1132. <i class="fa fa-heart"></i>
  1133. <i class="fa fa-heart"></i>
  1134. <i class="fa fa-heart"></i>
  1135. <i class="fa fa-heart-o"></i>
  1136. <i class="fa fa-heart-o"></i>
  1137.  
  1138. <br>
  1139.  
  1140. <!-- STAT 4 -->
  1141.  
  1142. <i class="fa fa-heart"></i>
  1143. <i class="fa fa-heart"></i>
  1144. <i class="fa fa-heart"></i>
  1145. <i class="fa fa-heart"></i>
  1146. <i class="fa fa-heart"></i>
  1147. <i class="fa fa-heart"></i>
  1148. <i class="fa fa-heart-o"></i>
  1149. <i class="fa fa-heart-o"></i>
  1150. <i class="fa fa-heart-o"></i>
  1151. <i class="fa fa-heart-o"></i>
  1152.  
  1153. <br>
  1154.  
  1155. <!-- STAT 5 -->
  1156.  
  1157. <i class="fa fa-heart"></i>
  1158. <i class="fa fa-heart-o"></i>
  1159. <i class="fa fa-heart-o"></i>
  1160. <i class="fa fa-heart-o"></i>
  1161. <i class="fa fa-heart-o"></i>
  1162. <i class="fa fa-heart-o"></i>
  1163. <i class="fa fa-heart-o"></i>
  1164. <i class="fa fa-heart-o"></i>
  1165. <i class="fa fa-heart-o"></i>
  1166. <i class="fa fa-heart-o"></i>
  1167.  
  1168. <br>
  1169.  
  1170. <!-- STAT 6 -->
  1171.  
  1172. <i class="fa fa-heart"></i>
  1173. <i class="fa fa-heart"></i>
  1174. <i class="fa fa-heart"></i>
  1175. <i class="fa fa-heart"></i>
  1176. <i class="fa fa-heart-o"></i>
  1177. <i class="fa fa-heart-o"></i>
  1178. <i class="fa fa-heart-o"></i>
  1179. <i class="fa fa-heart-o"></i>
  1180. <i class="fa fa-heart-o"></i>
  1181. <i class="fa fa-heart-o"></i>
  1182.  
  1183. <br>
  1184.  
  1185. <!-- STAT 7 -->
  1186.  
  1187. <i class="fa fa-heart"></i>
  1188. <i class="fa fa-heart"></i>
  1189. <i class="fa fa-heart"></i>
  1190. <i class="fa fa-heart"></i>
  1191. <i class="fa fa-heart"></i>
  1192. <i class="fa fa-heart"></i>
  1193. <i class="fa fa-heart"></i>
  1194. <i class="fa fa-heart"></i>
  1195. <i class="fa fa-heart"></i>
  1196. <i class="fa fa-heart"></i>
  1197.  
  1198. <br>
  1199.  
  1200. <!-- STAT 8 -->
  1201.  
  1202. <i class="fa fa-heart"></i>
  1203. <i class="fa fa-heart"></i>
  1204. <i class="fa fa-heart-o"></i>
  1205. <i class="fa fa-heart-o"></i>
  1206. <i class="fa fa-heart-o"></i>
  1207. <i class="fa fa-heart-o"></i>
  1208. <i class="fa fa-heart-o"></i>
  1209. <i class="fa fa-heart-o"></i>
  1210. <i class="fa fa-heart-o"></i>
  1211. <i class="fa fa-heart-o"></i>
  1212.  
  1213. <br>
  1214.  
  1215. <!-- STAT 9 -->
  1216.  
  1217. <i class="fa fa-heart"></i>
  1218. <i class="fa fa-heart"></i>
  1219. <i class="fa fa-heart"></i>
  1220. <i class="fa fa-heart"></i>
  1221. <i class="fa fa-heart"></i>
  1222. <i class="fa fa-heart"></i>
  1223. <i class="fa fa-heart"></i>
  1224. <i class="fa fa-heart"></i>
  1225. <i class="fa fa-heart"></i>
  1226. <i class="fa fa-heart-o"></i>
  1227.  
  1228. <br>
  1229.  
  1230. <!-- STAT 10 -->
  1231.  
  1232. <i class="fa fa-heart"></i>
  1233. <i class="fa fa-heart"></i>
  1234. <i class="fa fa-heart"></i>
  1235. <i class="fa fa-heart"></i>
  1236. <i class="fa fa-heart"></i>
  1237. <i class="fa fa-heart"></i>
  1238. <i class="fa fa-heart-o"></i>
  1239. <i class="fa fa-heart-o"></i>
  1240. <i class="fa fa-heart-o"></i>
  1241. <i class="fa fa-heart-o"></i>
  1242.  
  1243. </div>
  1244.  
  1245. <!-- END STATS -->
  1246.  
  1247. </div>
  1248.  
  1249. <!-- END BLOCK 2 -->
  1250.  
  1251. <!-- START BLOCK 3 -->
  1252.  
  1253. <div class="block">
  1254.  
  1255. <h3>relationships</h3>
  1256.  
  1257. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  1258. title="friends">
  1259.  
  1260. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  1261. title="lovers">
  1262.  
  1263. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  1264. title="siblings">
  1265.  
  1266. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  1267. title="strangers">
  1268.  
  1269. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  1270. title="acquaintances">
  1271.  
  1272. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  1273. title="enemies">
  1274.  
  1275. </div>
  1276.  
  1277. <!-- END BLOCK 3 -->
  1278.  
  1279. <!-- START BLOCK 4 -->
  1280.  
  1281. <div class="block">
  1282.  
  1283. <h3>bio</h3>
  1284.  
  1285. You can put a character bio here. If you're wondering what a link looks like, <a href="">this is the answer</a>. There's also <b>bold text</b> as well as <i>italic text</i>, so go wild! It has automatic overflow, so you can put as much text here as you want.
  1286.  
  1287. <br><br>
  1288.  
  1289. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  1290.  
  1291. <br><br>
  1292.  
  1293. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  1294.  
  1295. </div>
  1296.  
  1297. <!-- END BLOCK 4 -->
  1298.  
  1299. </div>
  1300.  
  1301. <img class="characterpic" src="https://i.imgur.com/hnADTjf.jpg">
  1302.  
  1303. </div>
  1304.  
  1305. <!----------------------------- END TAB 3 ------------------------------>
  1306.  
  1307. </div>
  1308.  
  1309. <!---------------------------- END MAIN CONTENT----------------------------->
  1310.  
  1311. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  1312.  
  1313. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/">
  1314. page theme by bones.
  1315. </a>
  1316.  
  1317. <script src="https://unpkg.com/popper.js@1"></script>
  1318. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1319. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1320.  
  1321. <script>
  1322. tippy('[title]', {
  1323. theme: 'custom',
  1324. arrow: false,
  1325. delay: [200, 0],
  1326. zIndex: 9999999999,
  1327. maxWidth: 300,
  1328.  
  1329. content(reference) {
  1330. const title = reference.getAttribute('title');
  1331. reference.removeAttribute('title');
  1332. return title;
  1333. },
  1334. });
  1335.  
  1336. function openTab(evt, tabName) {
  1337. var i, tabcontent, tablinks;
  1338. tabcontent = document.getElementsByClassName("tabcontent");
  1339. for (i = 0; i < tabcontent.length; i++) {
  1340. tabcontent[i].style.display = "none";
  1341. }
  1342.  
  1343. tablinks = document.getElementsByClassName("tablinks");
  1344. for (i = 0; i < tablinks.length; i++) {
  1345. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1346. }
  1347.  
  1348. document.getElementById(tabName).style.display = "block";
  1349. evt.currentTarget.className += " active";
  1350. }
  1351.  
  1352. document.getElementById("defaultOpen").click();
  1353. </script>
  1354.  
  1355. </body>
  1356.  
  1357. </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!