API tools faq
paste
Advertisement
cvndythemes

gctita_page

cvndythemes
Apr 29th, 2020
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.99 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5. <title>BLOG TITLE HERE</title> <!-------- ADD YOUR PAGE TITLE HERE --------->
  6.  
  7.  
  8. <!--
  9.  
  10. >> ETHEREAL THEMES // COMMISSION THEME
  11.  
  12. Designed by etherealthemes for
  13. gctita.tumblr.com
  14. ⓒ 2016 - 2020
  15.  
  16. >> TERMS OF USE
  17.  
  18. Do NOT remove the credit
  19. Do NOT claim as your own
  20.  
  21. *You can move the credit, but leave it visible
  22. *Edit as much as you'd like
  23. *Feel free to ask about basic customization
  24. *Theme suggestions always welcomed
  25.  
  26. >> EXTRAS
  27.  
  28. Fonts by Google Fonts
  29. Icons by Jam Icons @ jam-icons.com
  30. Tooltips by Tippy.js @ atomiks.github.io/tippyjs/
  31. Tumblr controls styling by cyantists @ cyantists.tumblr.com
  32. PXU Photosets by chloethemes @ bychloethemes.tumblr.com
  33.  
  34. >> NOTES
  35.  
  36. TO FIND CERTAIN SECTIONS: simply press ctrl:f and search for the keyword. All the containers are named what they are. For example, find the stats by searching "start stats" or find the personality container by searching "start personality"
  37.  
  38. To change the skill points follow the below cheat sheet adding whichever number you want up to 100. If your character has 50 points in the first stat area (stat-1), the width should be 150px for .stat-1 in the .css
  39.  
  40. I've tried to make this as user friendly as possible, but if you need help setting this page up, please feel feel free to contact me.
  41.  
  42. 0 = 0px // 5 = 15px // 10 = 30px // 15 = 45px // 20 = 60px // 25 = 75px // 30 = 90px // 35 = 105px // 40 = 120px // 45 = 135px // 50 = 150px // 55 = 165px // 60 = 180px // 65 = 195px // 70 = 210px // 75 = 225px // 80 = 240px // 85 = 255px // 90 = 270px // 95 = 285px // 100 = 300px
  43.  
  44. FOR OTHER TIPS AND HELP, LOOK FOR THE LIGHT GRAY TEXT (LIKE THIS ONE) ABOVE EACH SECTION
  45.  
  46. COLOR CHEAT SHEET:
  47.  
  48. black: #000000
  49. white: #ffffff
  50. dark gray: #202020
  51. light gray: #eff2f3
  52. pink: #ff52dd
  53. blue: #4ca6fa
  54.  
  55. -->
  56.  
  57.  
  58. <!-- SCRIPTS -->
  59. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  60.  
  61. <link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css">
  62.  
  63. <!-- TIPPY JS -->
  64. <script src="https://unpkg.com/popper.js@1"></script>
  65. <script src="https://unpkg.com/tippy.js@5"></script>
  66. <script>
  67. $(document).ready(function(){
  68. tippy('[title]', {
  69.  
  70. animation: 'fade',
  71. placement: 'top',
  72. arrow: true,
  73. duration: [400, 100],
  74.  
  75. theme: 'custom',
  76. ignoreAttributes: true,
  77. content(reference) {
  78. const title = reference.getAttribute('title');
  79. reference.removeAttribute('title');
  80. return title;
  81. },
  82. });
  83. });
  84. </script>
  85.  
  86. <link href="https://fonts.googleapis.com/css?family=Iceland|Luckiest+Guy|Mogra|Roboto+Mono:400,400i,700|Satisfy&display=swap" rel="stylesheet">
  87.  
  88.  
  89. <!-- STYLESHEET -->
  90.  
  91. <style type="text/css">
  92.  
  93. /* --- SCROLLBAR ---*/
  94.  
  95. ::-webkit-scrollbar-thumb {background:#000000;border-left:1px solid #efefef;border-right:1px solid #efefef;border-top:8px solid #efefef;border-bottom:8px solid #efefef;}
  96.  
  97. ::-webkit-scrollbar {width:9px;border:4px solid #efefef;background:#000000;}
  98.  
  99. div::-webkit-scrollbar-thumb {background:#ffffff;border-left:0px;border-right:0px;border-top:0px;border-bottom:0px;}
  100.  
  101. div::-webkit-scrollbar {width:4px;border:4px solid #202020;background:#ffffff;}
  102.  
  103. div::-webkit-scrollbar-button {background:#202020;}
  104.  
  105. /* --- SELECTION ---*/
  106.  
  107. ::-moz-selection {color:#ffffff;background:#202020;font-weight:400;opacity:1;}
  108.  
  109. ::selection {color:#ffffff;background:#202020;font-weight:400;opacity:1;}
  110.  
  111. /* --- TOOLTIPS ---*/
  112.  
  113. .tippy-tooltip.custom-theme {
  114. $tooltipBg:#4fb4fc;
  115. background-color:#4fb4fc;
  116. color:#ffffff;
  117. font-size:8.5pt;
  118. margin-bottom:0px;
  119. border-radius:0px;
  120. }
  121.  
  122. .tippy-content {padding:5px 5px 4px 5px!important;}
  123.  
  124. .tippy-tooltip.custom-theme[data-placement^='top'] .tippy-arrow {border-top-color:#4fb4fc;}
  125.  
  126. .tippy-tooltip.custom-theme[data-placement^='bottom'] .tippy-arrow {border-bottom-color:#4fb4fc;}
  127.  
  128. .tippy-tooltip.custom-theme[data-placement^='left'] .tippy-arrow {border-left-color:#4fb4fc;}
  129.  
  130. .tippy-tooltip.custom-theme[data-placement^='right'] .tippy-arrow {border-right-color:#4fb4fc;}
  131.  
  132. /* --- TUMBLR TOOLS--- */
  133.  
  134. iframe.tmblr-iframe {
  135. top:6px!important;
  136. right:15px!important;
  137. opacity:0.8;
  138. padding:0px;
  139. z-index:15!important;
  140. transform:scale(0.6);
  141. transform-origin:100% 0;
  142. -webkit-transform:scale(0.6);
  143. -webkit-transform-origin:100% 0;
  144. -o-transform:scale(0.6);
  145. -o-transform-origin:100% 0;
  146. -moz-transform:scale(0.6);
  147. -moz-transform-origin:100% 0;
  148. -ms-transform:scale(0.6);
  149. -ms-transform-origin:100% 0;
  150. transition:0.2s ease-in-out;
  151. -webkit-transition:0.2s ease-in-out;
  152. -moz-transition:0.2s ease-in-out;
  153.  
  154. }
  155.  
  156. /* --- BODY --- */
  157.  
  158. body {
  159. margin:0px;
  160. padding:0px;
  161. font-family: 'Roboto Mono', monospace;
  162. color:#000000;
  163. font-size:10.5pt;
  164. line-height:150%;
  165. font-weight:normal;
  166. word-wrap:normal;
  167. text-align:left;
  168. background-color:#efefef;
  169. }
  170.  
  171. .fill {
  172. position:fixed;
  173. width:100%;
  174. height:100%;
  175. background-image:url('https://static.tumblr.com/zvesamf/IpEq9d6x5/bg.jpg');
  176. background-position:center;
  177. background-repeat:repeat-x;
  178. z-index:-1;
  179. }
  180.  
  181. a {
  182. color:#000000;
  183. text-decoration:none;
  184. border:0;
  185. cursor:help;
  186. transition:0.2s ease-in-out;
  187. -webkit-transition:0.2s ease-in-out;
  188. -moz-transition:0.2s ease-in-out;
  189. }
  190.  
  191. b,strong {font-weight:700;}
  192. i,italic {font-style:italic;}
  193. small {font-size:9pt;}
  194. big {font-size:9pt;}
  195.  
  196. .posts b, .posts em, .posts i {font-weight:400;font-style:normal;}
  197.  
  198. .posts b {color:#ff55e8;}
  199. .posts em, .posts i {color:#4fb4fc;}
  200.  
  201. hr.divider, hr, hr.separator {
  202. display: block;
  203. margin-top: 0.5em;
  204. margin-bottom: 0.5em;
  205. margin-left: auto;
  206. margin-right: auto;
  207. border-style: inset;
  208. border-color:#000000;
  209. border-bottom: 1px;
  210. }
  211.  
  212. pre {
  213. white-space: pre-wrap;
  214. white-space: -moz-pre-wrap;
  215. white-space: -pre-wrap;
  216. white-space: -o-pre-wrap;
  217. word-wrap: break-word;
  218. }
  219.  
  220. /* --- CONTAINER --- */
  221.  
  222. #container {
  223. position:fixed;
  224. top:50%;
  225. left:50%;
  226. transform: translate(-50%, -50%);
  227. width:750px;
  228. height:600px;
  229. text-align:center;
  230. padding:0px 10px 10px 10px;
  231. background:#000000;
  232. }
  233.  
  234. /* --- TITLE --- */
  235.  
  236. .title {
  237. margin:0 auto;
  238. margin-top:-30px;
  239. display:inline-block;
  240. padding:10px 10px 10px 10px;
  241. border-top-left-radius:25px;
  242. border-top-right-radius:25px;
  243. background:#000000;
  244. z-index:3;
  245. }
  246.  
  247. .title h1 {
  248. font-family: 'Luckiest Guy', cursive;
  249. font-size:16.5pt;
  250. letter-spacing:1pt;
  251. color:#eff2f3;
  252. padding:0px;
  253. font-weight:400;
  254. margin:0px 15px;
  255. }
  256.  
  257. /* --- HEADER --- */
  258.  
  259. .image {width:750px;height:200px;}
  260.  
  261. .image img {width:750px;height:200px;}
  262.  
  263. /* --- TOPBAR --- */
  264.  
  265. .topbar {
  266. margin:0 auto;
  267. width:750px;
  268. padding:20px 0px;
  269. background:#000000;
  270. transition:0.2s ease-in-out;
  271. -webkit-transition:0.2s ease-in-out;
  272. -moz-transition:0.2s ease-in-out;
  273. }
  274.  
  275. .navigation {margin:0 auto;text-align:center;}
  276.  
  277. .navigation a {
  278. font-family: 'Roboto Mono', monospace;
  279. font-size:10pt;
  280. padding:0px;
  281. text-transform:uppercase;
  282. margin:0px 15px;
  283. letter-spacing:-0.5pt;
  284. filter: blur(0px);
  285. transition:0.1s ease-in-out;
  286. -webkit-transition:0.1s ease-in-out;
  287. -moz-transition:0.1s ease-in-out;
  288. }
  289.  
  290. .navigation a:hover {
  291. filter: blur(1px);
  292. margin:0px 15px;
  293. }
  294.  
  295. .navigation a:nth-of-type(3n+1) {color:#ff55e8;}
  296.  
  297. .navigation a:nth-of-type(3n+2) {color:#4fb4fc;}
  298.  
  299. .navigation a:nth-of-type(3n+3) {color:#eff2f3;}
  300.  
  301.  
  302. /* --- TABS --- */
  303.  
  304. #div1, #div2, #div3, #div4, #div5, #div6 {
  305. height:303px;
  306. width:670px;
  307. margin-left:-10px;
  308. padding:15px 50px 20px 50px ;
  309. background:#202020;
  310. text-align:center!important;
  311. }
  312.  
  313. /* --- STATS AND OVERVIEW --- */
  314.  
  315. .stats_cont {
  316. float:left;
  317. overflow-x:hidden;
  318. overflow-y:scroll;
  319. height:298px;
  320. display:inline-block;
  321. width:330px;
  322. padding-right:0px;
  323. margin:10px 0px 0px -25px;
  324. letter-spacing:-0.5pt;
  325. }
  326.  
  327. .overview_cont {
  328. overflow-x:hidden;
  329. overflow-y:scroll;
  330. height:267px;
  331. float:right;
  332. display:inline-block;
  333. width:350px;
  334. margin:0px -30px 0px 0px;
  335. padding-right:20px;
  336. letter-spacing:-0.5pt;
  337. text-align:left;
  338. color:#ffffff;
  339. }
  340.  
  341. .overview_cont img {margin:6px 10px 0px 0px;}
  342.  
  343. .overview_title h1 {
  344. position:relative;
  345. left:38px;
  346. font-family: 'Luckiest Guy', cursive;
  347. font-size:18.5pt;
  348. letter-spacing:1pt;
  349. color:#eff2f3;
  350. text-align:center;
  351. padding:0px;
  352. font-weight:400;
  353. margin:5px 0px 15px 0px;
  354. }
  355.  
  356. .overview_cont b, .stats_cont b {font-weight:bold;color:#ffffff;}
  357.  
  358. .overview_cont i, .stats_cont i {color:#ff55e8;}
  359.  
  360. .overview_cont em, .stats_cont em {color:#4fb4fc;}
  361.  
  362. .overview_cont a, .stats_cont a {display:inline-block;padding:0px 4px 1px 2px;color:#ffffff;background:#000000;}
  363.  
  364. .panel_nav {text-align:center;}
  365.  
  366. .panel_nav a {display:inline-block;padding:2px 6px;background:#000000;color:#ffffff;margin:10px 2px;}
  367.  
  368. .panel_nav a:hover {background:#ffffff;color:#000000;}
  369.  
  370. .stats {
  371. width:300px;
  372. height:34px;
  373. margin:4px 0px 0px 0px;
  374. text-align:left;
  375. }
  376.  
  377. .stats_cont li {color:#ffffff;}
  378.  
  379.  
  380.  
  381. /* --- APPEARANCE AND BACKGROUND --- */
  382.  
  383. .appearance_cont {
  384. float:left;
  385. overflow-x:hidden;
  386. overflow-y:scroll;
  387. height:297px;
  388. display:inline-block;
  389. width:330px;
  390. margin:10px 0px 0px -25px;
  391. }
  392.  
  393. .background_cont img {margin:6px 10px 0px 0px;}
  394.  
  395. .background_cont {
  396. overflow-x:hidden;
  397. overflow-y:scroll;
  398. height:265px;
  399. float:right;
  400. display:inline-block;
  401. width:350px;
  402. margin:0px -30px 0px 0px;
  403. padding-right:20px;
  404. }
  405.  
  406. .appearance_cont, .background_cont {letter-spacing:-0.5pt;text-align:left;color:#ffffff;}
  407.  
  408. ul.appearance {width:320px;margin-left:-40px;list-style-type:none;text-align:left;}
  409.  
  410. .appearance li {
  411. display:block;
  412. margin:0px 0px 5px 0px;
  413. padding:10px 10px;
  414. background:#000000;
  415. }
  416.  
  417. .appearance li b {font-weight:700;color:#ff55e8;text-transform:uppercase;}
  418.  
  419. .appearance_cont b, .background_cont b {font-weight:bold;color:#ffffff;}
  420.  
  421. .appearance_cont i, .background_cont i {color:#ff55e8;}
  422.  
  423. .appearance_cont em, .background_cont em {color:#4fb4fc;}
  424.  
  425. .appearance_cont a, .background_cont a {display:inline-block;padding:0px 4px 1px 2px;color:#ffffff;background:#000000;}
  426.  
  427. .background_title h1 {
  428. position:relative;
  429. left:28px;
  430. font-family: 'Luckiest Guy', cursive;
  431. font-size:18.5pt;
  432. letter-spacing:1pt;
  433. color:#eff2f3;
  434. text-align:center;
  435. padding:0px;
  436. font-weight:400;
  437. margin:5px 0px 15px 0px;
  438. }
  439.  
  440. /* --- PERSONALITY AND RELATIONSHIPS --- */
  441.  
  442. .personality_cont {
  443. float:left;
  444. overflow-x:hidden;
  445. overflow-y:scroll;
  446. height:297px;
  447. display:inline-block;
  448. width:720px;
  449. text-align:center!important;
  450. margin:10px 0px 0px -25px;
  451. padding-right:15px;
  452. }
  453.  
  454. .relationships_cont img, .personality_cont img {margin:6px 10px 0px 0px;}
  455.  
  456. .relationships_cont {
  457. float:left;
  458. overflow-x:hidden;
  459. overflow-y:scroll;
  460. height:297px;
  461. display:inline-block;
  462. width:720px;
  463. text-align:center!important;
  464. margin:10px 0px 0px -25px;
  465. padding-right:15px;
  466. }
  467.  
  468. .personality_cont, .relationships_cont {letter-spacing:-0.5pt;text-align:left;color:#ffffff;}
  469.  
  470. ul.personalities {width:630px;margin-left:0px;list-style-type:none;text-align:left;}
  471.  
  472. .personalities li, .relations li {
  473. width:calc(630px / 2 - 30px);
  474. display:inline-block;
  475. margin:0px 5px 5px 5px;
  476. padding:10px 10px;
  477. background:#000000;
  478. }
  479.  
  480. .personalities li b, .relations li b {font-weight:700;color:#ff55e8;text-transform:uppercase;}
  481.  
  482. .personality_cont b, .relationships_cont b {font-weight:bold;color:#ffffff;}
  483.  
  484. .personality_cont i, .relationships_cont i {color:#ff55e8;}
  485.  
  486. .personality_cont em, .relationships_cont em {color:#4fb4fc;}
  487.  
  488. .personality_cont a, .relationships_cont a {display:inline-block;padding:0px 4px 1px 2px;color:#ffffff;background:#000000;}
  489.  
  490. .relationships_cont h1, .personality_cont h1 {
  491. font-family: 'Luckiest Guy', cursive;
  492. font-size:17pt;
  493. letter-spacing:1pt;
  494. color:#eff2f3;
  495. text-align:center;
  496. padding:0px;
  497. font-weight:400;
  498. margin:5px 0px 15px 0px;
  499. }
  500.  
  501. .relation_box {
  502. display:inline-block;
  503. max-width:220px;
  504. max-height:250px;
  505. margin:0px 5px 30px 5px;
  506. }
  507.  
  508. .relation_box img {height:75px;width:220px;margin:0px 0px 5px 0px;}
  509.  
  510. .relation_box h1 {
  511. font-family: 'Luckiest Guy', cursive;
  512. font-size:16.5pt;
  513. letter-spacing:1pt;
  514. color:#eff2f3;
  515. text-align:center;
  516. padding:0px;
  517. font-weight:400;
  518. margin:0px 0px -5px 0px;
  519. }
  520.  
  521. .relation_box h2 {font-size:13.5pt;}
  522.  
  523. /* --- EASTER EGGS --- */
  524.  
  525. .eastereggs_cont {
  526. float:left;
  527. overflow-x:hidden;
  528. overflow-y:scroll;
  529. height:297px;
  530. display:inline-block;
  531. width:720px;
  532. text-align:center!important;
  533. margin:10px 0px 0px -25px;
  534. padding-right:15px;
  535. }
  536.  
  537. .eastereggs_cont img {margin:6px 10px 0px 0px;}
  538.  
  539. .eastereggs_cont {letter-spacing:-0.5pt;text-align:left;color:#ffffff;}
  540.  
  541. .eastereggs_cont b {font-weight:bold;color:#ffffff;}
  542.  
  543. .eastereggs_cont i {color:#ff55e8;}
  544.  
  545. .eastereggs_cont em {color:#4fb4fc;}
  546.  
  547. .eastereggs_cont a {display:inline-block;padding:0px 4px 1px 2px;color:#ffffff;background:#000000;}
  548.  
  549. .eastereggs_cont h1 {
  550. font-family: 'Luckiest Guy', cursive;
  551. font-size:17pt;
  552. letter-spacing:1pt;
  553. color:#eff2f3;
  554. text-align:center;
  555. padding:0px;
  556. font-weight:400;
  557. margin:5px 0px 15px 0px;
  558. }
  559.  
  560. /* --- VERSES --- */
  561.  
  562. .verses_cont {
  563. float:left;
  564. overflow-x:hidden;
  565. overflow-y:scroll;
  566. height:297px;
  567. display:inline-block;
  568. width:720px;
  569. text-align:center!important;
  570. margin:10px 0px 0px -25px;
  571. padding-right:15px;
  572. }
  573.  
  574. .verses_cont img {margin:6px 10px 0px 0px;}
  575.  
  576. .verses_cont {letter-spacing:-0.5pt;text-align:left;color:#ffffff;}
  577.  
  578. .verses_cont b {font-weight:bold;color:#ffffff;}
  579.  
  580. .verses_cont i {color:#ff55e8;}
  581.  
  582. .verses_cont em {color:#4fb4fc;}
  583.  
  584. .verses_cont a {display:inline-block;padding:0px 4px 1px 2px;color:#ffffff;background:#000000;}
  585.  
  586. ul.verses {width:630px;margin-left:0px;list-style-type:none;text-align:left;}
  587.  
  588. .verses li {
  589. width:calc(630px / 2 - 30px);
  590. display:inline-block;
  591. margin:0px 5px 5px 5px;
  592. padding:10px 10px;
  593. background:#000000;
  594. }
  595.  
  596. .verses li b {font-weight:700;color:#ff55e8;text-transform:uppercase;}
  597.  
  598. .verses_cont h1 {
  599. font-family: 'Luckiest Guy', cursive;
  600. font-size:17pt;
  601. letter-spacing:1pt;
  602. color:#eff2f3;
  603. text-align:center;
  604. padding:0px;
  605. font-weight:400;
  606. margin:5px 0px 15px 0px;
  607. }
  608.  
  609. </style>
  610.  
  611. </head>
  612. <body>
  613.  
  614.  
  615.  
  616.  
  617.  
  618. <div class="fill"></div>
  619.  
  620.  
  621. <!-- START CONTAINER -->
  622. <div id="container">
  623.  
  624.  
  625.  
  626. <!--------------------------------------------
  627.  
  628. ----------------------------------------------
  629.  
  630. START CHARACTER INFORMATION
  631.  
  632. ----------------------------------------------
  633.  
  634. --------------------------------------------->
  635. <div class="title"><h1>Character Name</h1></div>
  636. <!-- END CHARACTER INFORMATION
  637.  
  638.  
  639. <!----START HEADER IMAGE ---->
  640. <div class="image">
  641. <img src="https://static.tumblr.com/zvesamf/hUqq9itub/character_header.jpg"/>
  642. </div>
  643. <!-- END HEADER IMAGE -->
  644.  
  645.  
  646.  
  647.  
  648. <!-- START NAVIGATION: DO NOT EDIT -->
  649. <div class="topbar">
  650. <div class="navigation">
  651. <a href="/" title="back"><span class="jam jam-home"></span></a>
  652. <a href="/ask" title="contact"><span class="jam jam-envelope"></span></a>
  653. <a id="showoverview" title="stats + overview"><span class="jam jam-heart"></span></a>
  654. <a id="showappearance" title="appearance + background"><span class="jam jam-user"></span></a>
  655. <a id="showpersonality" title="personality"><span class="jam jam-users"></span></a>
  656. <a id="showrelationships" title="relationships"><span class="jam jam-plus-circle"></span></a>
  657. <a id="showeastereggs" title="easter eggs"><span class="jam jam-egg"></span></a>
  658. <a href="https://gctita.tumblr.com/tagged/1.-ic.-headcanon." title="headcanons"><span class="jam jam-message"></span></a>
  659. <a id="showverses" title="verses"><span class="jam jam-align-center"></span></a>
  660. <a href="https://docs.google.com/document/d/18MyzG1jDS8OziY7FG-WDI6QDBLvtXJkUzaQTX7xD2Qo/edit?usp=sharing" title="canon character guide"><span class="jam jam-pie-chart"></span></a>
  661. </div>
  662. </div>
  663. <!-- END NAVIGATION -->
  664.  
  665.  
  666.  
  667.  
  668.  
  669.  
  670.  
  671.  
  672.  
  673.  
  674.  
  675.  
  676.  
  677.  
  678.  
  679. <!--------------------------------------------
  680.  
  681. ----------------------------------------------
  682.  
  683. START STATS AND OVERVIEW
  684.  
  685. ----------------------------------------------
  686.  
  687. --------------------------------------------->
  688. <div id="div1">
  689. <!------- START STATS -------->
  690. <div class="stats_cont">
  691.  
  692. <!-- START STATS -->
  693. <ul class="appearance">
  694. <li><b>title:</b> description</h1>
  695. <li><b>title:</b> description</h1>
  696. <li><b>title:</b> description</h1>
  697. <li><b>title:</b> description</h1>
  698. </ul>
  699.  
  700. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  701.  
  702.  
  703. </div><!------END STATS-------->
  704.  
  705.  
  706.  
  707.  
  708. <!------------------- START OVERVIEW -------->
  709. <div class="overview_title">
  710. <h1>Stats + Overview</h1>
  711. </div>
  712. <div class="overview_cont">
  713.  
  714. <img src="https://placehold.it/150X200" align="left" /> Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>.
  715.  
  716. <p>
  717.  
  718. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  719.  
  720. <p>
  721.  
  722. <img src="https://placehold.it/150X200" align="right" />Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>.
  723.  
  724. <p>
  725.  
  726. <div class="panel_nav">
  727. <a href="">Link</a>
  728. <a href="">Link</a>
  729. <a href="">Link</a>
  730. <a href="">Link</a>
  731. <a href="">Link</a>
  732. </div>
  733.  
  734.  
  735. </div><!------END OVERVIEW-------->
  736.  
  737. </div>
  738. <!------- END STATS AND OVERVIEW ------->
  739.  
  740.  
  741.  
  742.  
  743.  
  744.  
  745.  
  746.  
  747.  
  748.  
  749.  
  750.  
  751.  
  752.  
  753.  
  754.  
  755.  
  756.  
  757.  
  758.  
  759.  
  760. <!--------------------------------------------
  761.  
  762. ----------------------------------------------
  763.  
  764. START APPEARANCE AND BACKGROUND
  765.  
  766. ----------------------------------------------
  767.  
  768. --------------------------------------------->
  769. <div id="div2" style="display:none;">
  770.  
  771.  
  772. <!------------------- START APPEARANCE -------->
  773. <div class="appearance_cont">
  774.  
  775. <!-- START APPEARANCE STATS -->
  776. <ul class="appearance">
  777. <li><b>title:</b> description</h1>
  778. <li><b>title:</b> description</h1>
  779. <li><b>title:</b> description</h1>
  780. <li><b>title:</b> description</h1>
  781. </ul>
  782.  
  783. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  784.  
  785. </div><!------END APPEARANCE -------->
  786.  
  787.  
  788.  
  789.  
  790.  
  791. <!------------------- START BACKGROUND -------->
  792. <div class="background_title">
  793. <h1>Appearance + Background</h1>
  794. </div>
  795. <div class="background_cont">
  796.  
  797. <img src="https://placehold.it/150X200" align="left" /> Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>.
  798.  
  799. <p>
  800.  
  801. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  802.  
  803. <p>
  804.  
  805. <img src="https://placehold.it/150X200" align="right" />Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>.
  806.  
  807. <p>
  808.  
  809. <div class="panel_nav">
  810. <a href="">Link</a>
  811. <a href="">Link</a>
  812. <a href="">Link</a>
  813. <a href="">Link</a>
  814. <a href="">Link</a>
  815. </div>
  816.  
  817. <p>
  818.  
  819. </div><!------END BACKGROUND -------->
  820.  
  821.  
  822.  
  823. </div>
  824. <!------- END APPEARANCE AND BACKGROUND ------->
  825.  
  826.  
  827.  
  828.  
  829.  
  830.  
  831.  
  832.  
  833.  
  834.  
  835.  
  836.  
  837.  
  838.  
  839.  
  840.  
  841.  
  842.  
  843.  
  844.  
  845.  
  846. <!--------------------------------------------
  847.  
  848. ----------------------------------------------
  849.  
  850. START PERSONALITY
  851.  
  852. ----------------------------------------------
  853.  
  854. --------------------------------------------->
  855. <div id="div3" style="display:none;">
  856.  
  857. <!------------------- START PERSONALITY -------->
  858. <div class="personality_cont">
  859.  
  860.  
  861. <h1>Personality</h1>
  862.  
  863. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  864.  
  865. <!-- START APPEARANCE STATS -->
  866. <ul class="personalities">
  867. <li><b>title:</b> description</h1>
  868. <li><b>title:</b> description</h1>
  869. <li><b>title:</b> description</h1>
  870. <li><b>title:</b> description</h1>
  871. </ul>
  872.  
  873. <p>
  874.  
  875. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  876.  
  877. <p>
  878.  
  879. <div class="panel_nav">
  880. <a href="">Link</a>
  881. <a href="">Link</a>
  882. <a href="">Link</a>
  883. <a href="">Link</a>
  884. <a href="">Link</a>
  885. </div>
  886.  
  887.  
  888. </div><!------END PERSONALITY -------->
  889.  
  890. </div>
  891. <!------- END PERSONALITY ------->
  892.  
  893.  
  894.  
  895.  
  896.  
  897.  
  898.  
  899.  
  900.  
  901.  
  902.  
  903.  
  904.  
  905.  
  906.  
  907.  
  908.  
  909.  
  910.  
  911.  
  912.  
  913. <!--------------------------------------------
  914.  
  915. ----------------------------------------------
  916.  
  917. START RELATIONSHIPS
  918.  
  919. ----------------------------------------------
  920.  
  921. --------------------------------------------->
  922. <div id="div4" style="display:none;">
  923.  
  924. <!------------------- START PERSONALITY -------->
  925. <div class="relationships_cont">
  926.  
  927. <h1>Relationships</h1>
  928.  
  929.  
  930.  
  931.  
  932. <!----- Start Relation -------->
  933. <div class="relation_box">
  934. <img src="https://placehold.it/220X75" />
  935. <h1>Name</h1>
  936. <h2>Relation</h2>
  937. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit.
  938. </div>
  939. <!----- End Relation -------->
  940.  
  941.  
  942.  
  943.  
  944. <!----- Start Relation -------->
  945. <div class="relation_box">
  946. <img src="https://placehold.it/220X75" />
  947. <h1>Name</h1>
  948. <h2>Relation</h2>
  949. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit.
  950. </div>
  951. <!----- End Relation -------->
  952.  
  953.  
  954.  
  955.  
  956. <!----- Start Relation -------->
  957. <div class="relation_box">
  958. <img src="https://placehold.it/220X75" />
  959. <h1>Name</h1>
  960. <h2>Relation</h2>
  961. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit.
  962. </div>
  963. <!----- End Relation -------->
  964.  
  965.  
  966.  
  967.  
  968. <!----- Start Relation -------->
  969. <div class="relation_box">
  970. <img src="https://placehold.it/220X75" />
  971. <h1>Name</h1>
  972. <h2>Relation</h2>
  973. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit.
  974. </div>
  975. <!----- End Relation -------->
  976.  
  977.  
  978.  
  979.  
  980. <!----- Start Relation -------->
  981. <div class="relation_box">
  982. <img src="https://placehold.it/220X75" />
  983. <h1>Name</h1>
  984. <h2>Relation</h2>
  985. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit.
  986. </div>
  987. <!----- End Relation -------->
  988.  
  989.  
  990. <p>
  991.  
  992. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  993.  
  994. <!-- START APPEARANCE STATS -->
  995. <ul class="relations">
  996. <li><b>title:</b> description</h1>
  997. <li><b>title:</b> description</h1>
  998. <li><b>title:</b> description</h1>
  999. <li><b>title:</b> description</h1>
  1000. </ul>
  1001.  
  1002. <p>
  1003.  
  1004. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  1005.  
  1006. <p>
  1007.  
  1008. <div class="panel_nav">
  1009. <a href="">Link</a>
  1010. <a href="">Link</a>
  1011. <a href="">Link</a>
  1012. <a href="">Link</a>
  1013. <a href="">Link</a>
  1014. </div>
  1015.  
  1016.  
  1017.  
  1018. </div><!------END RELATIONSHIPS -------->
  1019.  
  1020. </div>
  1021. <!------- END PERSONALITY AND RELATIONSHIPS ------->
  1022.  
  1023.  
  1024.  
  1025.  
  1026.  
  1027.  
  1028.  
  1029.  
  1030.  
  1031.  
  1032.  
  1033.  
  1034.  
  1035.  
  1036.  
  1037.  
  1038.  
  1039.  
  1040.  
  1041.  
  1042.  
  1043. <!--------------------------------------------
  1044.  
  1045. ----------------------------------------------
  1046.  
  1047. START EASTER EGGS
  1048.  
  1049. ----------------------------------------------
  1050.  
  1051. --------------------------------------------->
  1052. <div id="div5" style="display:none;">
  1053.  
  1054. <!------------------- START EASTER EGGS -------->
  1055. <div class="eastereggs_cont">
  1056.  
  1057. <h1>Easter Eggs</h1>
  1058.  
  1059. <img src="https://placehold.it/150X200" align="left" /> Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>.
  1060.  
  1061. <p>
  1062.  
  1063. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  1064.  
  1065. <p>
  1066.  
  1067. <img src="https://placehold.it/150X200" align="right" />Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>.
  1068.  
  1069. <p>
  1070.  
  1071. <div class="panel_nav">
  1072. <a href="">Link</a>
  1073. <a href="">Link</a>
  1074. <a href="">Link</a>
  1075. <a href="">Link</a>
  1076. <a href="">Link</a>
  1077. </div>
  1078.  
  1079. <p>
  1080.  
  1081. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  1082.  
  1083. </div>
  1084. <!------END EASTER EGGS-------->
  1085.  
  1086. </div>
  1087. <!------- END EASTER EGGS ------->
  1088.  
  1089.  
  1090.  
  1091.  
  1092.  
  1093.  
  1094.  
  1095.  
  1096.  
  1097.  
  1098.  
  1099.  
  1100.  
  1101.  
  1102.  
  1103.  
  1104.  
  1105.  
  1106.  
  1107.  
  1108.  
  1109. <!--------------------------------------------
  1110.  
  1111. ----------------------------------------------
  1112.  
  1113. START VERSES
  1114.  
  1115. ----------------------------------------------
  1116.  
  1117. --------------------------------------------->
  1118. <div id="div6" style="display:none;">
  1119.  
  1120. <!------------------- START VERSES -------->
  1121.  
  1122. <div class="verses_cont">
  1123.  
  1124. <h1>Verses</h1>
  1125.  
  1126. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  1127.  
  1128. <!-- START APPEARANCE STATS -->
  1129. <ul class="verses">
  1130. <li><b>title:</b> description</h1>
  1131. <li><b>title:</b> description</h1>
  1132. <li><b>title:</b> description</h1>
  1133. <li><b>title:</b> description</h1>
  1134. </ul>
  1135.  
  1136. <p>
  1137.  
  1138. Lorem <b>ipsum</b> dolor sit amet, <i>consectetur</i> adipiscing elit. Aliquam <em>pretium</em> magna et velit <i>dignissim</i>, a <b>placerat</b> nisi rutrum. <em>Vestibulum</em> odio <a href="/">ipsum</a>, rutrum a ex ac, fringilla fermentum ante. <b>Donec</b> nec elit molestie <i>massa</i> finibus <em>pulvinar</em> non nec lacus.
  1139.  
  1140. <p>
  1141.  
  1142. <div class="panel_nav">
  1143. <a href="">Link</a>
  1144. <a href="">Link</a>
  1145. <a href="">Link</a>
  1146. <a href="">Link</a>
  1147. <a href="">Link</a>
  1148. </div>
  1149.  
  1150. </div>
  1151. <!------END VERSES-------->
  1152.  
  1153. </div>
  1154. <!------- END VERSES ------->
  1155.  
  1156.  
  1157.  
  1158.  
  1159.  
  1160.  
  1161.  
  1162.  
  1163.  
  1164.  
  1165.  
  1166.  
  1167.  
  1168.  
  1169.  
  1170.  
  1171.  
  1172.  
  1173.  
  1174.  
  1175.  
  1176. </div>
  1177. <!-- END CONTAINER -->
  1178.  
  1179.  
  1180.  
  1181.  
  1182.  
  1183.  
  1184.  
  1185. <!-- ADDITIONAL SCRIPTS -->
  1186.  
  1187. <script>
  1188. $(function() {
  1189. $('#showoverview').click(function() {$('div[id^=div]').hide();$('#div1').show();});
  1190. $('#showappearance').click(function() {$('div[id^=div]').hide();$('#div2').show();});
  1191. $('#showpersonality').click(function() {$('div[id^=div]').hide();$('#div3').show();});
  1192. $('#showrelationships').click(function() {$('div[id^=div]').hide();$('#div4').show();});
  1193. $('#showeastereggs').click(function() {$('div[id^=div]').hide();$('#div5').show();});
  1194. $('#showverses').click(function() {$('div[id^=div]').hide();$('#div6').show();});
  1195. })
  1196. </script>
  1197.  
  1198.  
  1199.  
  1200.  
  1201. </body>
  1202. </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!