API tools faq
paste
quinncitycreations

Theme One: Provocateur

quinncitycreations
Sep 3rd, 2016
695
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!-- theme no. 1 by quinncitycreations: provocateur. Please read and follow my terms of use here. http://quinncitycreations.tumblr.com/terms
  4.  
  5. Credit:
  6. -asschlinthemes for their navi theme base
  7. -nutty-themes for their smooth scrolling tutorial
  8. -allesio atzeni for their tooltips tutorial
  9. -zorkat for their scrollbar tutorial
  10. -->
  11. <head>
  12.  
  13. <!-- this is for the tab info -->
  14. <title> {title} </title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <!-- end tab info -->
  17.  
  18. <!-- these are fonts -->
  19. <script src="//use.edgefonts.net/abel;anonymous-pro.js"></script>
  20. <script src="//use.edgefonts.net/droid-sans.js"></script>
  21.  
  22. <!-- this is the script for the tooltips (aka the box that comes up when you hover over a character). dont touch this unless you know what you're doing. -->
  23. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  24.  
  25. <script type="text/javascript">
  26. $(document).ready(function() {
  27. // Tooltip only Text
  28. $('.masterTooltip').hover(function(){
  29. // Hover over code
  30. var title = $(this).attr('title');
  31. $(this).data('tipText', title).removeAttr('title');
  32. $('<p class="tooltip"></p>')
  33. .text(title)
  34. .appendTo('body')
  35. .fadeIn('slow');
  36. }, function() {
  37. // Hover out code
  38. $(this).attr('title', $(this).data('tipText'));
  39. $('.tooltip').remove();
  40. }).mousemove(function(e) {
  41. var mousex = e.pageX + 20; //Get X coordinates
  42. var mousey = e.pageY + 10; //Get Y coordinates
  43. $('.tooltip')
  44. .css({ top: mousey, left: mousex })
  45. });
  46. });
  47. </script>
  48.  
  49. <script type="text/javascript">
  50. $('body').fadeTo(100, 1);
  51. $(window).load(function() {
  52. $('body').fadeTo(100, 1);
  53. });
  54. $(document).ready(function() {
  55. setTimeout('$("body").fadeTo(100, 1)', 1000);
  56. });
  57. </script>
  58.  
  59. <!-- okay so now thats squared away. here is the script for masonry (aka the thing that makes the navi layout nice and neat instead of broken up and weird. again don't touch this unless you know what you're doing. -->
  60.  
  61. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  62.  
  63. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  64.  
  65. <script>
  66. $(function(){
  67. var $navicon = $('.navicon');
  68. $navicon.imagesLoaded(function(){
  69. $navicon.masonry({
  70. itemSelector: '.navibox',
  71. });
  72. });
  73. $navicon.infinitescroll({
  74. itemSelector : ".navibox",
  75. navSelector : "div.pagination",
  76. nextSelector : ".pagination a#next",
  77. loadingImg : "",
  78. loadingText : "<em></em>",
  79. bufferPx : 10000,
  80. extraScrollPx: 12000,
  81. },
  82. // trigger Masonry as a callback
  83. function( newElements ) {
  84. var $newElems = $( newElements ).css({ opacity: 0 });
  85. // ensure that images load before adding to masonry layout
  86. $newElems.imagesLoaded(function(){
  87. $newElems.animate({ opacity: 1 });
  88. $navicon.masonry( 'appended', $newElems, true );
  89. });
  90. }
  91. );
  92. });
  93. </script>
  94.  
  95.  
  96. <!-- okay cool so we're done w the masonry. this last script idk what it's called but it makes the scrolling nice so when you click one of the links it scrolls down the page gracefully instead of just dumping you there. much nicer. as per usual do not touch unless you know what you're doing-->
  97.  
  98. <script src="http://static.tumblr.com/whx9ghv/lSGm6k18m/jquery.scrollto-1.4.2-min.js"></script>
  99. <script src="http://static.tumblr.com/whx9ghv/GJEm6k188/jquery.localscroll-1.2.7-min.js"></script>
  100.  
  101. <script>
  102. $(document).ready(function () {
  103. $.localScroll();
  104. });
  105. </script>
  106.  
  107.  
  108.  
  109. <!-- aight cool so we're done w all the jquery. now the css which is what makes everything look pretty. u can change stuff here if you want but u dont have to. i put lil notes in it so you can change stuff if u want cuz im nice like that. lmk if u need help tho. -->
  110.  
  111. <style>
  112.  
  113. ::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
  114. ::-webkit-scrollbar-thumb {background-color:black ;}
  115.  
  116. /* BEGIN MISC CODE */
  117.  
  118. body {
  119. font-family: droid-sans, sans-serif;
  120. font-size:15px;
  121. color:black;
  122. margin-left:10px;
  123. text-align:justify;
  124. }
  125.  
  126. .sectionheady {
  127. width:100%;
  128. height:auto;
  129. background-color:black;
  130. display:block;
  131. color:white;
  132. font-family: abel, sans-serif;
  133. font-size:60px;
  134. text-align:center;
  135. line-height:75px;
  136. word-spacing:20px;
  137. margin-bottom:20px;
  138. margin-top:25px;
  139. }
  140.  
  141. mark {
  142. background-color:white;
  143. color:white;
  144. }
  145.  
  146. .tooltip {
  147. display:none;
  148. position:absolute;
  149. border:1px solid #333;
  150. background-color:#161616;
  151. border-radius:5px;
  152. padding:10px;
  153. color:#fff;
  154. font-size:12px Arial;
  155. font-family:abel, sans-serif;
  156. width:200px;
  157. }
  158.  
  159. .tooltip-inner {
  160. white-space: pre-wrap; }
  161.  
  162.  
  163.  
  164. /* END MISC CODE; BEGIN HEADER CODE */
  165.  
  166. .heady {
  167. width:100%;
  168. height:auto;
  169. background-color:black;
  170. display:block;
  171. color:white;
  172. font-family: abel, sans-serif;
  173. font-size:60px;
  174. text-align:center;
  175. line-height:75px;
  176. word-spacing:20px;
  177. margin-bottom:20px;
  178. }
  179.  
  180. .heady img {
  181. width:100%;
  182. height:300px auto; /*this is where u change the height of the header img if thats something ur interested in */
  183. display:block;
  184. }
  185.  
  186. .heady a {
  187. font-size:40px;
  188. text-decoration:none;
  189. color:white;
  190. -moz-transition-duration: 0.5s;
  191. -o-transition-duration: 0.5s;
  192. -webkit-transition-duration: 0.5s;
  193. transition-duration: 0.5s;
  194. font-style:normal;
  195.  
  196. }
  197.  
  198. .heady a:hover {
  199. letter-spacing:2px;
  200. text-decoration:underline;
  201. -moz-transition-duration: 0.5s;
  202. -o-transition-duration: 0.5s;
  203. -webkit-transition-duration: 0.5s;
  204. transition-duration: 0.5s;
  205. }
  206.  
  207. /* END HEADER CODE; BEGIN BUFFER CODE */
  208.  
  209. .buffercon {
  210. height:200px
  211. padding:10px;
  212. display:block;
  213. margin:auto;
  214. text-align:center;
  215. }
  216.  
  217. .buffer {
  218. height:200px;
  219. width:200px;
  220. display:inline-block;
  221. margin-left:40px;
  222. margin-right:40px;
  223.  
  224. }
  225.  
  226. .buffer img {
  227. width:200px;
  228. height:200px;
  229. border:3px solid black;
  230. border-radius:100%;
  231. }
  232.  
  233. /* END BUFFER CODE; BEGIN SUMMARY CODE */
  234.  
  235. .info {
  236. border: 1px solid black;
  237. width:70%;
  238. height:auto;
  239. margin:auto;
  240. display:block;
  241. padding:15px;
  242. padding-bottom:30px;
  243. }
  244.  
  245. .info h1 {
  246. color:black;
  247. text-decoration: underline;
  248. text-align:left;
  249. font-family:abel, sans-serif;
  250. font-size: 50px;
  251. line-height:50px;
  252. }
  253.  
  254. .info a {
  255. color:black;
  256. -moz-transition-duration: 0.5s;
  257. -o-transition-duration: 0.5s;
  258. -webkit-transition-duration: 0.5s;
  259. transition-duration: 0.5s;
  260. font-size:17px;
  261. }
  262.  
  263. .info a:hover {
  264. letter-spacing:1px;
  265. -moz-transition-duration: 0.5s;
  266. -o-transition-duration: 0.5s;
  267. -webkit-transition-duration: 0.5s;
  268. transition-duration: 0.5s;
  269. }
  270.  
  271. blockquote {
  272. font-style:italic;
  273. font-size:20px;
  274. }
  275.  
  276. .stat {
  277. font-family:abel, sans-serif;
  278. font-size:20px;
  279. color:black;
  280. margin-left:20px;
  281. }
  282.  
  283. .stat b {
  284. font-size:24px;
  285. }
  286.  
  287.  
  288. .readme {
  289. height:20px;
  290. width:70px;
  291. background-color:black;
  292. color:white;
  293. font-family:abel, sans-serif;
  294. font-size:20px;
  295. line-height:20px;
  296. padding:10px;
  297. display:inline-block;
  298. margin:15px;
  299. }
  300.  
  301. .readme a {
  302. color:white;
  303. text-decoration:none;
  304. }
  305.  
  306. .readme a:hover {
  307. color:white;
  308. text-decoration:underline;
  309. text-align:center;
  310. }
  311.  
  312. /* END SUMMARY CODE; BEGIN CAST CODE */
  313.  
  314. .castcon {
  315. width:60%;
  316. height:auto;
  317. padding:10px;
  318. display:block;
  319. margin:auto;
  320. border:2px solid black;
  321. text-align:center;
  322. }
  323.  
  324. .char {
  325. height:300px;
  326. width:200px;
  327. display:inline-block;
  328. margin:15px;
  329. }
  330.  
  331. .char img {
  332. width:200px;
  333. height:200px;
  334. border:3px solid black;
  335. border-radius:100%;
  336. }
  337.  
  338. .charname {
  339. background-color:black;
  340. display:inline-block;
  341. color:white;
  342. font-family:abel, sans-serif;
  343. font-size:20px;
  344. line-height:20px;
  345. margin-top:5px;
  346. padding:5px;
  347. }
  348.  
  349. .charname a {
  350. color:white;
  351. text-decoration:none;
  352. -moz-transition-duration: 0.5s;
  353. -o-transition-duration: 0.5s;
  354. -webkit-transition-duration: 0.5s;
  355. transition-duration: 0.5s;
  356. }
  357.  
  358. .charname a:hover {
  359. letter-spacing:1px;
  360. -moz-transition-duration: 0.5s;
  361. -o-transition-duration: 0.5s;
  362. -webkit-transition-duration: 0.5s;
  363. transition-duration: 0.5s;
  364. }
  365.  
  366. .charstat {
  367. background-color:black;
  368. display:inline-block;
  369. color:white;
  370. font-family:abel, sans-serif;
  371. font-size:15px;
  372. line-height:15px;
  373. margin-top:5px;
  374. padding:5px;
  375. }
  376.  
  377. .charstat a {
  378. color:white;
  379. text-decoration:none;
  380. -moz-transition-duration: 0.5s;
  381. -o-transition-duration: 0.5s;
  382. -webkit-transition-duration: 0.5s;
  383. transition-duration: 0.5s;
  384. }
  385.  
  386. .charstat a:hover {
  387. text-decoration:underline;
  388. -moz-transition-duration: 0.5s;
  389. -o-transition-duration: 0.5s;
  390. -webkit-transition-duration: 0.5s;
  391. transition-duration: 0.5s;
  392. }
  393.  
  394. /* END CAST CODE; BEGIN GUIDE CODE */
  395.  
  396. .chapcon {
  397. width:70%;
  398. height:auto;
  399. padding:10px;
  400. display:block;
  401. margin:auto;
  402. }
  403.  
  404. button.accordion {
  405. background-color: black;
  406. color: white;
  407. cursor: pointer;
  408. padding: 18px;
  409. width: 100%;
  410. text-align: left;
  411. border: none;
  412. outline: none;
  413. transition: 0.4s;
  414. font-family:droid-sans, sans-serif;
  415. font-size:20px;
  416. }
  417.  
  418. button.accordion:hover {
  419. background-color: #ddd;
  420. color:black;
  421. }
  422.  
  423. div.panel {
  424. background-color: white;
  425. display: none;
  426. font-family: abel, sans-serif;
  427. font-size:20px;
  428. padding:5px;
  429. }
  430.  
  431.  
  432. div.panel.show {
  433. display: block;
  434. }
  435.  
  436. table, th, td {
  437. border: 1px solid gray;
  438. border-collapse: collapse;
  439. margin-top:5px;
  440. text-align:center;
  441. }
  442.  
  443. td {
  444. text-align:center;
  445. }
  446.  
  447. .chapcon a {
  448. color:black;
  449. }
  450.  
  451. /* END CHAPTER CODE; BEGIN NAVI CODE */
  452.  
  453. .navicon {
  454. width:808px;
  455. margin:auto;
  456. display:block;
  457. }
  458.  
  459. .naviname {
  460. text-transform:uppercase;
  461. text-decoration:underline;
  462. font-size:18px;
  463. line-height:12px;
  464. color:#000;
  465. z-index:9;
  466. font-family:abel, sans-serif;
  467. font-weight:bold;
  468. margin-bottom:6px;
  469. }
  470.  
  471.  
  472.  
  473. .navibox {
  474. float:left;
  475. width:150px;
  476. padding:15px;
  477. margin:10px;
  478. background:#FFF;
  479. border:1px solid black;
  480. }
  481.  
  482.  
  483. .navibox a {
  484. text-transform:none;
  485. display:block;
  486. margin:2px 0px;
  487. text-decoration:none;
  488. color:black;
  489. -moz-transition-duration: 0.5s;
  490. -o-transition-duration: 0.5s;
  491. -webkit-transition-duration: 0.5s;
  492. transition-duration: 0.5s;
  493. }
  494.  
  495. .navibox a:hover {
  496. text-decoration:underline;
  497. padding-left:10px;
  498. -moz-transition-duration: 0.5s;
  499. -o-transition-duration: 0.5s;
  500. -webkit-transition-duration: 0.5s;
  501. transition-duration: 0.5s;
  502. }
  503.  
  504. /* END NAVI CODE; BEGIN CREDIT CODE */
  505.  
  506.  
  507. .itme a {
  508. color: black;
  509. font-size:15px;
  510. position:fixed;
  511. bottom:10px;
  512. right:10px;
  513. text-decoration:none;
  514. transition-duration:0.5s;
  515. -moz-transition-duration:0.5s;
  516. -o-transition-duration:0.5s;
  517. -webkit-transition-duration:0.5s;
  518. }
  519.  
  520. .itme a:hover {
  521. text-decoration:none;
  522. letter-spacing:3px;
  523. transition-duration:0.5s;
  524. -moz-transition-duration:0.5s;
  525. -o-transition-duration:0.5s;
  526. -webkit-transition-duration:0.5s;
  527. }
  528.  
  529. /* END CREDIT CODE ; BEGIN BACK TO TOP CODE */
  530.  
  531. .scrolltotop {
  532. color:white;
  533. background-color:black;
  534. font-family: abel, sans-serif;
  535. font-size:15px;
  536. padding:4px;
  537. right:10px;
  538. position:fixed;
  539. bottom:30px;
  540. }
  541.  
  542. .scrolltotop a {
  543. color:white;
  544. text-decoration:none;
  545. }
  546.  
  547.  
  548.  
  549.  
  550. </style>
  551. </head>
  552. <body>
  553. <!-- OK this is the html. this is the part u HAVE to touch to make it look how u want it instead of just placeholder images and filler text. again i have put notes to help u alter it but lmk if you need help and dont feel embarrassed cause the first time i tried to use a page theme i couldnt figure any of it out and i got so frustrated i started crying so im not gonna judge i promise -->
  554.  
  555. <!-- HEADER SECTION -->
  556. <div class="heady">
  557. <div class="name">Story Title</div>
  558. <img src="http://placehold.it/1000x300" height="300" width="1000"><!-- here's where the header image goes. It looks best at 300 by 1000. if you changed the height up in the css, change it here too for it to work.-->
  559. <a href="#"><a name="top">Home</a></a>
  560. <a href="#">Ask</a>
  561. <a href="#about">About</a>
  562. <a href="#cast">Cast</a>
  563. <a href="#chapters">Chapters</a>
  564. <a href="#navi">Explore</a>
  565. </div>
  566. <!-- END HEADER SECTION -->
  567.  
  568. <!-- BUFFER IMAGES -->
  569. <div class="buffercon">
  570. <div class="buffer">
  571. <img src="http://placehold.it/200x200"> <!-- here's where the buffer images go. they should be 200 x 200. -->
  572. </div>
  573. <div class="buffer">
  574. <img src="http://placehold.it/200x200">
  575. </div>
  576. <!-- if you want more images, copy paste from here -->
  577. <div class="buffer">
  578. <img src="http://placehold.it/200x200">
  579. </div>
  580. <!-- to here. the images will center automatically. just don't put too many.-->
  581. </div> <!-- don't put any buffer images after this div!!! -->
  582. <!-- END BUFFER IMAGES -->
  583.  
  584. <!-- SUMMARY SECTION -->
  585. <div class="sectionheady"><a name="about">About</a></div>
  586. <div class="info">
  587. <h1>Summary</h1>
  588. <p><b>Cupcake</b> <i>ipsum </i> <s>dolor</s> sit amet <a href="#">soufflé</a> cookie ice cream powder. Dessert soufflé jujubes cotton candy wafer. Donut oat cake caramels chocolate chocolate tiramisu chupa chups cake. Chupa chups chocolate apple pie croissant cake icing. Pie pastry ice cream jujubes danish tootsie roll gummies. Cake gingerbread tart lollipop ice cream marshmallow.</p>
  589.  
  590.  
  591. <blockquote>Chocolate bar chocolate macaroon marshmallow liquorice tootsie roll. Soufflé bonbon bonbon marzipan. Pastry oat cake pudding bonbon powder bear claw pie cookie. Cotton candy carrot cake ice cream icing soufflé jelly beans tiramisu. Lemon drops jelly cupcake sweet sweet croissant. Jelly brownie sweet gingerbread. Marshmallow chocolate bar liquorice marshmallow jujubes. Brownie cookie icing cookie cake cupcake bonbon tiramisu cotton candy.</blockquote>
  592.  
  593. <p>Gummies powder lollipop cotton candy. Chocolate bar bonbon sugar plum jelly cake cupcake. Muffin pudding bonbon sweet roll gingerbread fruitcake. Tootsie roll jelly danish. Brownie cheesecake biscuit gummi bears topping wafer dessert. Marzipan danish apple pie jujubes.
  594. Pie apple pie jelly-o brownie cotton candy donut. Icing powder liquorice macaroon sugar plum danish donut cupcake carrot cake. Halvah sesame snaps tootsie roll jelly danish chocolate cake wafer. Sesame snaps chupa chups candy canes caramels sweet roll liquorice chocolate bar. Biscuit brownie pastry danish. Candy oat cake bear claw ice cream danish. Toffee gingerbread donut tart apple pie.</p>
  595.  
  596. <!-- this is how you do a spoiler. this makes it so the reader has to highlight the text in order to read it. if you don't want the little hover box thing, just take everything out so it's just <mark></mark> with nothing else.-->
  597. <p><mark title="highlight this text to read the spoiler." class="masterTooltip">Biscuit sesame snaps liquorice biscuit.</mark> Brownie cupcake ice cream. Caramels wafer cupcake carrot cake oat cake donut wafer gingerbread sesame snaps. Sweet roll macaroon cookie tootsie roll powder liquorice dragée carrot cake. Oat cake liquorice candy canes candy canes. Topping pie danish cake. Gingerbread chocolate carrot cake jujubes gummies.</p>
  598.  
  599. <h1>Stats</h1>
  600. <div class="stat"><b>Characters:</b> A bunch of characters</div>
  601. <div class="stat"><b>Ships:</b> A whole lot of oteeps</div>
  602. <div class="stat"><b>Content Warnings:</b> As many are as necessary. </div>
  603.  
  604. <h1>Read</h1>
  605. <center>
  606. <div class="readme"><a href="#">Link 1</a></div>
  607. <div class="readme"><a href="#">Link 2</a></div>
  608. <div class="readme"><a href="#">Link 3</a></div>
  609. <div class="readme"><a href="#">Link 4</a></div>
  610. <div class="readme"><a href="#">Link 5</a></div>
  611. </center>
  612. </div> <!-- don't put any summary-related things after this div!!! -->
  613.  
  614. <!-- END SUMMARY SECTION -->
  615. <!-- CAST SECTION -->
  616.  
  617. <div class="sectionheady"><a name="cast">Cast</a></div>
  618. <div class="castcon">
  619. <!-- WHOLE CHARACTER CODE -->
  620. <div class="char">
  621.  
  622. <img class="masterTooltip" src="http://placehold.it/200x200" title ="EYYY so here's your description. it can be as long or as short as you want, the box will change to accomodate it!"><center><div class="charname">
  623. Character Name</div></center>
  624. <center><div class="charstat">Subtitle</div></center>
  625. </div>
  626. <!--END WHOLE CHARACTER CODE -->
  627.  
  628. <!-- WHOLE CHARACTER CODE -->
  629. <div class="char">
  630. <img class ="masterTooltip" src="http://placehold.it/200x200" title="the image size is 200 by 200 pixels, as u can tell (thanks placeholdit ur a star.)">
  631. <center><div class="charname">Character Name</div></center>
  632. <center><div class="charstat">Subtitle</div></center>
  633. </div>
  634. <!--END WHOLE CHARACTER CODE -->
  635.  
  636. <!-- WHOLE CHARACTER CODE -->
  637. <div class="char">
  638. <img class="masterTooltip" src="http://placehold.it/200x200" title="unfortunately there's no way to style the text in this description, or have multiple paragraphs. the brave scientists at quinncitycreations are working on this as we speak but in the meantime we'll all have to make do. My apologies for the inconvenience.">
  639. <center><div class="charname">Character Name</div></center>
  640. <center><div class="charstat">Subtitle</div></center>
  641. </div>
  642. <!--END WHOLE CHARACTER CODE -->
  643.  
  644. <!-- WHOLE CHARACTER CODE -->
  645. <div class="char">
  646. <img class="masterTooltip" src="http://placehold.it/200x200" title="the character name can also be a link btw! you can link to their character page or tag or whatever you want. the subtitle can also be a link if you want. the coding is different on hover because making the subtitle spread out the way the name does can make it weird. speaking of which...">
  647. <center><div class="charname"><a href="#">Character Name</a></div></center>
  648. <center><div class="charstat"><a href="#">Subtitle</a></div></center>
  649. </div>
  650. <!--END WHOLE CHARACTER CODE -->
  651.  
  652. <!-- WHOLE CHARACTER CODE -->
  653. <div class="char">
  654. <img class="masterTooltip" src="http://placehold.it/200x200" title="try to keep the name and subtitles short okay? otherwise they'll break into two lines and it'll mess up the layout. i mean if you like the messed up layout then by all means im not ur mom you can do what you want. but personally i like the grid layout so that's my advice to you.">
  655. <center><div class="charname">Character Name</div></center>
  656. <center><div class="charstat">Subtitle</div></center>
  657. </div>
  658. <!--END WHOLE CHARACTER CODE -->
  659.  
  660. <!-- WHOLE CHARACTER CODE -->
  661. <div class="char">
  662. <img class="masterTooltip" src="http://placehold.it/200x200" title="Oh and hey, look at that! you can have as many characters as you want, even if the number isn't a multiple of three! it just centers itself. how bout that.">
  663. <center><div class="charname">Character Name</div></center>
  664. <center><div class="charstat">Subtitle</div></center>
  665. </div>
  666. <!--END WHOLE CHARACTER CODE -->
  667.  
  668. <!-- WHOLE CHARACTER CODE -->
  669. <div class="char">
  670. <img class="masterTooltip" src="http://placehold.it/200x200" title="anyways while i've still got your attention: if you're using this as an all-in-one page and not a story page, here's some ideas for what you could use this section for: friends, networks, links to other blogs you have, links to other social media accounts you have, any projects you're working on.">
  671. <center><div class="charname">Character Name (?)</div></center>
  672. <center><div class="charstat">Subtitle</div></center>
  673. </div>
  674. <!--END WHOLE CHARACTER CODE -->
  675.  
  676. </div> <!-- don't put any characters after this div!!! -->
  677.  
  678. <!-- END CAST SECTION -->
  679.  
  680. <!-- CHAPTER GUIDE SECTION -->
  681. <div class="sectionheady"><a name="chapters">Chapter Guide</a></div>
  682. <div class="chapcon">
  683. <button class="accordion">Prologue</button>
  684. <div class="panel">
  685. <table style="width:100%">
  686. <tr>
  687. <th>Published</th>
  688. <th>Timeline</th>
  689. <th>POV</th>
  690. <th>Read</th>
  691. </tr>
  692. <tr>
  693. <td>Date</td>
  694. <td>Point in Canon</td>
  695. <td>POV Character</td>
  696. <td>
  697. <a href="http://tumblr.com">WP</a> | <a href="http://tumblr.com">FFN</a> | <a href="http://tumblr.com">AO3</a></td>
  698.  
  699.  
  700. </tr>
  701. </table>
  702. <p><b>Summary:</b> Hey guys! So this is what the chapter guide looks like. Note that you don't have to use the table up there, or format it like this. It's totally up to you what you put in these panels. This is just a suggestion.</p>
  703. <p><b>Characters:</b> If you're writing a series, you can also use this as a series guide instead of a chapter guide. (like "book one" "book two" instead of "chapter one" "chapter two." You get it.)</p>
  704. <p><b>Content Warnings:</b> Unfortunately, as of this writing, there's no way to have panels within panels, so you can't have, like "book one" and then within that "chapter one" "chapter two" etc etc. This, too, I am working on (and am close to solving!!! stay tuned!!!) but in the meantime, I hope you enjoy this anyways.</p>
  705. </div>
  706.  
  707. <button class="accordion">Chapter One</button>
  708. <div class="panel">
  709. <table style="width:100%">
  710. <tr>
  711. <th>Published</th>
  712. <th>Timeline</th>
  713. <th>POV</th>
  714. <th>Read</th>
  715. </tr>
  716. <tr>
  717. <td>Date</td>
  718. <td>Point in Canon</td>
  719. <td>POV Character</td>
  720. <td>Site | Site | Site</td>
  721. </tr>
  722. </table>
  723. <p><b>Summary:</b> OH forgot to mention this but you can pretty much have as many of these bad boys are you want. There's notes in the code to help you add more. If you still have trouble tho, lmk!</p>
  724. <p><b>Characters:</b> Also, if you're using this as a character page, you could use this section for different verses maybe?</p>
  725. <p><b>Content Warnings:</b> this is off-topic but I think "secondhand embarassment" should be a content warning.</p>
  726. </div>
  727.  
  728.  
  729.  
  730. <!-- for a new panel, copy all the way from here -->
  731. <button class="accordion">Chapter One</button>
  732. <div class="panel">
  733. <table style="width:100%">
  734. <tr>
  735. <th>Published</th>
  736. <th>Timeline</th>
  737. <th>POV</th>
  738. <th>Read</th>
  739. </tr>
  740. <tr>
  741. <td>Date</td>
  742. <td>Point in Canon</td>
  743. <td>POV Character</td>
  744. <td>Site | Site | Site</td>
  745. </tr>
  746. </table>
  747. <p><b>Summary:</b> Insert your favorite fanfic tropes here.</p>
  748. <p><b>Characters:</b> Sam Wilson, Dean Winchester, Joe Jonas, Nicky Fury, Will Graham, fuck idk...slime man</p>
  749. <p><b>Content Warnings:</b> Did you know Dean Winchester/Joe Jonas fanfiction exists. Isn't life amazing.</p>
  750. </div>
  751. <!-- to here! -->
  752.  
  753.  
  754.  
  755. </div> <!-- don't put any panels after this div!! -->
  756.  
  757. <!-- NAVI SECTION-->
  758. <div class="sectionheady"><a name="navi">Explore</a></div>
  759.  
  760. <div class="navicon">
  761.  
  762. <!-- BOX 1 -->
  763. <div class="navibox">
  764. <div class="naviname">Misc</div>
  765. <a href="/tagged/tag-link">Tag Name</a>
  766. <a href="/tagged/tag-link">Tag Name</a>
  767. <a href="/tagged/tag-link">Tag Name</a>
  768. <a href="/tagged/tag-link">Tag Name</a>
  769. </div>
  770.  
  771. <!-- BOX 2 -->
  772. <div class="navibox">
  773. <div class="naviname">Misc</div>
  774. <a href="/tagged/tag-link">Tag Name</a>
  775. <a href="/tagged/tag-link">Tag Name</a>
  776. <a href="/tagged/tag-link">Tag Name</a>
  777. <a href="/tagged/tag-link">Tag Name</a>
  778. <a href="/tagged/tag-link">Tag Name</a>
  779. </div>
  780.  
  781. <!-- BOX 3 -->
  782. <div class="navibox">
  783. <div class="naviname">Misc</div>
  784. <a href="/tagged/tag-link">Tag Name</a>
  785. <a href="/tagged/tag-link">Tag Name</a>
  786. <a href="/tagged/tag-link">Tag Name</a>
  787. </div>
  788.  
  789. <!-- BOX 4 -->
  790. <div class="navibox">
  791. <div class="naviname">Misc</div>
  792. <a href="/tagged/tag-link">Tag Name</a>
  793. <a href="/tagged/tag-link">Tag Name</a>
  794. <a href="/tagged/tag-link">Tag Name</a>
  795. <a href="/tagged/tag-link">Tag Name</a>
  796. <a href="/tagged/tag-link">Tag Name</a>
  797. <a href="/tagged/tag-link">Tag Name</a>
  798. <a href="/tagged/tag-link">Tag Name</a>
  799. <a href="/tagged/tag-link">Tag Name</a>
  800. <a href="/tagged/tag-link">Tag Name</a>
  801. <a href="/tagged/tag-link">Tag Name</a>
  802. <a href="/tagged/tag-link">Tag Name</a>
  803. <a href="/tagged/tag-link">Tag Name</a>
  804. <a href="/tagged/tag-link">Tag Name</a>
  805. <a href="/tagged/tag-link">Tag Name</a>
  806. <a href="/tagged/tag-link">Tag Name</a>
  807. <a href="/tagged/tag-link">Tag Name</a>
  808. </div>
  809.  
  810. <!-- BOX 5 -->
  811. <div class="navibox">
  812. <div class="naviname">Misc</div>
  813. <a href="/tagged/tag-link">Tag Name</a>
  814. <a href="/tagged/tag-link">Tag Name</a>
  815. <a href="/tagged/tag-link">Tag Name</a>
  816. <a href="/tagged/tag-link">Tag Name</a>
  817. <a href="/tagged/tag-link">Tag Name</a>
  818. <a href="/tagged/tag-link">Tag Name</a>
  819. <a href="/tagged/tag-link">Tag Name</a>
  820. <a href="/tagged/tag-link">Tag Name</a>
  821. <a href="/tagged/tag-link">Tag Name</a>
  822. <a href="/tagged/tag-link">Tag Name</a>
  823. <a href="/tagged/tag-link">Tag Name</a>
  824. <a href="/tagged/tag-link">Tag Name</a>
  825. </div>
  826.  
  827. <!-- BOX 6 -->
  828. <div class="navibox">
  829. <div class="naviname">Misc</div>
  830. <a href="/tagged/tag-link">Tag Name</a>
  831. <a href="/tagged/tag-link">Tag Name</a>
  832. <a href="/tagged/tag-link">Tag Name</a>
  833. <a href="/tagged/tag-link">Tag Name</a>
  834. <a href="/tagged/tag-link">Tag Name</a>
  835. <a href="/tagged/tag-link">Tag Name</a>
  836. <a href="/tagged/tag-link">Tag Name</a>
  837. <a href="/tagged/tag-link">Tag Name</a>
  838. <a href="/tagged/tag-link">Tag Name</a>
  839. <a href="/tagged/tag-link">Tag Name</a>
  840. <a href="/tagged/tag-link">Tag Name</a>
  841. </div>
  842.  
  843. <!-- BOX 7 -->
  844. <div class="navibox">
  845. <div class="naviname">Misc</div>
  846. <a href="/tagged/tag-link">Tag Name</a>
  847. <a href="/tagged/tag-link">Tag Name</a>
  848. <a href="/tagged/tag-link">Tag Name</a>
  849. <a href="/tagged/tag-link">Tag Name</a>
  850. <a href="/tagged/tag-link">Tag Name</a>
  851. <a href="/tagged/tag-link">Tag Name</a>
  852. <a href="/tagged/tag-link">Tag Name</a>
  853. </div>
  854.  
  855. <!-- BOX 8 -->
  856. <div class="navibox">
  857. <div class="naviname">Misc</div>
  858. <a href="/tagged/tag-link">Tag Name</a>
  859. <a href="/tagged/tag-link">Tag Name</a>
  860. <a href="/tagged/tag-link">Tag Name</a>
  861. <a href="/tagged/tag-link">Tag Name</a>
  862. <a href="/tagged/tag-link">Tag Name</a>
  863. <a href="/tagged/tag-link">Tag Name</a>
  864. <a href="/tagged/tag-link">Tag Name</a>
  865. <a href="/tagged/tag-link">Tag Name</a>
  866. <a href="/tagged/tag-link">Tag Name</a>
  867. <a href="/tagged/tag-link">Tag Name</a>
  868. <a href="/tagged/tag-link">Tag Name</a>
  869. <a href="/tagged/tag-link">Tag Name</a>
  870. <a href="/tagged/tag-link">Tag Name</a>
  871. <a href="/tagged/tag-link">Tag Name</a>
  872. </div>
  873.  
  874. <!-- BOX 9 -->
  875. <div class="navibox">
  876. <div class="naviname">Misc</div>
  877. <a href="/tagged/tag-link">Tag Name</a>
  878. <a href="/tagged/tag-link">Tag Name</a>
  879. <a href="/tagged/tag-link">Tag Name</a>
  880. <a href="/tagged/tag-link">Tag Name</a>
  881. <a href="/tagged/tag-link">Tag Name</a>
  882. <a href="/tagged/tag-link">Tag Name</a>
  883. <a href="/tagged/tag-link">Tag Name</a>
  884. <a href="/tagged/tag-link">Tag Name</a>
  885. <a href="/tagged/tag-link">Tag Name</a>
  886. <a href="/tagged/tag-link">Tag Name</a>
  887. <a href="/tagged/tag-link">Tag Name</a>
  888. <a href="/tagged/tag-link">Tag Name</a>
  889. <a href="/tagged/tag-link">Tag Name</a>
  890. <a href="/tagged/tag-link">Tag Name</a>
  891. <a href="/tagged/tag-link">Tag Name</a>
  892. <a href="/tagged/tag-link">Tag Name</a>
  893. <a href="/tagged/tag-link">Tag Name</a>
  894. <a href="/tagged/tag-link">Tag Name</a>
  895. <a href="/tagged/tag-link">Tag Name</a>
  896. <a href="/tagged/tag-link">Tag Name</a>
  897. </div>
  898.  
  899. <!-- BOX 10 -->
  900. <div class="navibox">
  901. <div class="naviname">Misc</div>
  902. <a href="/tagged/tag-link">Tag Name</a>
  903. <a href="/tagged/tag-link">Tag Name</a>
  904. </div>
  905.  
  906. <!-- BOX 11 -->
  907. <div class="navibox">
  908. <div class="naviname">Misc</div>
  909. <a href="/tagged/tag-link">Tag Name</a>
  910. <a href="/tagged/tag-link">Tag Name</a>
  911. <a href="/tagged/tag-link">Tag Name</a>
  912. <a href="/tagged/tag-link">Tag Name</a>
  913. <a href="/tagged/tag-link">Tag Name</a>
  914. <a href="/tagged/tag-link">Tag Name</a>
  915. <a href="/tagged/tag-link">Tag Name</a>
  916. </div>
  917.  
  918. <!-- BOX 11 -->
  919. <div class="navibox">
  920. <div class="naviname">Misc</div>
  921. <a href="/tagged/tag-link">Tag Name</a>
  922. </div>
  923.  
  924.  
  925.  
  926. </div> <!-- don't put anything after this div!!! -->
  927. <!-- END NAVI SECTION -->
  928.  
  929. </body>
  930. <div class="scrolltotop"><a href="#top">Ascend</a></div>
  931. <!-- DON"T TOUCH THE CREDIT! -->
  932. <div class="itme"><a href="http://quinncitycreations.tumblr.com">
  933. &#9824;
  934. &#9829;
  935. &#9827;
  936. &#9830;
  937.  
  938. </a></div>
  939. <!-- this is the script for the chapter guide. don't ask me why it has to be down here, computers are frickin weird. anyways as usual don't touch this. -->
  940. <script>
  941. var acc = document.getElementsByClassName("accordion");
  942. var i;
  943.  
  944. for (i = 0; i < acc.length; i++) {
  945. acc[i].onclick = function(){
  946. this.classList.toggle("active");
  947. this.nextElementSibling.classList.toggle("show");
  948. }
  949. }
  950. </script>
  951.  
  952. </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!