API tools faq
paste
jacktherph

page 001: story so far

jacktherph
Jan 3rd, 2019
252
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.94 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!----------------- A FEW THINGS
  9.  
  10. - this is the first page code of jacktherph @ tumblr
  11. - please do not steal or remove the credit
  12. - feel free to message me for any questions
  13. - page created for use by http://bloodvbonerpg.tumblr.com
  14. - a big thank you to cvmpbell @ tumblr for help when I needed it
  15.  
  16. IMAGE & FONT CREDITS
  17. - background gif: https://thumbs.gfycat.com/DistinctScrawnyCicada-small.gif
  18. - "Angel" font by Julia L.
  19. - "Exodus" font by BehanceIn
  20. - "Crimson" font by Sebastian Kosch
  21. - all other images belong to their respective owners
  22.  
  23. -------------------->
  24.  
  25. <script type="text/javascript" src="https://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  26.  
  27. <style type="text/css">
  28.  
  29. @font-face { font-family: "Angel"; src: url('https://dl.dropboxusercontent.com/s/9z3uorb6yvdxjd7/Angel.TTF'); format("truetype");}
  30. @font-face { font-family: "Exodus"; src: url('https://dl.dropboxusercontent.com/s/1ywg9xsi6zyevd5/Exodus-PersonalUse-Sharpen.otf'); format("truetype");}
  31. @font-face { font-family: "Crimson-Text"; src: url('https://dl.dropboxusercontent.com/s/p14ir6fbwreqzi4/Crimson-Roman.otf'); format("truetype");}
  32.  
  33.  
  34. body {
  35. background-image: url('https://imgur.com/0sGt4Hm.png'); /* background image */
  36. background-color: #ababab; /* background color */
  37. background-size:cover;
  38. background-attachment:fixed;
  39. }
  40.  
  41. a {
  42. color: #37b1cb; /* link color */
  43. text-decoration: none;
  44. -moz-transition-duration: 0.5s;
  45. -o-transition-duration: 0.5s;
  46. -webkit-transition-duration: 0.5s;
  47. transition-duration: 0.5s;
  48. }
  49.  
  50. a:hover {
  51. color: #284248; /* link hover color */
  52. -moz-transition-duration: 0.5s;
  53. -o-transition-duration: 0.5s;
  54. -webkit-transition-duration: 0.5s;
  55. transition-duration: 0.5s;
  56. }
  57.  
  58.  
  59.  
  60.  
  61. /* SCROLLBAR */
  62.  
  63.  
  64. ::-webkit-scrollbar {
  65. width:2px;
  66. height:5px;
  67. background:#000;
  68. }
  69.  
  70.  
  71. ::-webkit-scrollbar-track {
  72. border:5px solid;
  73. background: transparent;
  74. }
  75.  
  76.  
  77. ::-webkit-scrollbar-thumb:vertical {
  78. background:#3797a5;
  79. min-height:20px;
  80. }
  81.  
  82.  
  83. ::-webkit-scrollbar-thumb:horizontal {
  84. background: #3797a5;
  85. min-height:20px;
  86. }
  87.  
  88. /* TOOL TIP */
  89.  
  90. div#qTip {
  91. background: #8ed3e0;
  92. color: #000;
  93. border: 1px;
  94. border-style: solid;
  95. font-size: 10px;
  96. display: none;
  97. text-align: center;
  98. position: absolute;
  99. z-index: 99;
  100. letter-spacing: 1px;
  101. padding: 3px 4px;
  102. text-transform: uppercase;
  103.  
  104. }
  105.  
  106.  
  107. h1 {
  108. font-size: 20px;
  109. text-transform: uppercase;
  110. font-family: 'Exodus';
  111. }
  112.  
  113. h2 {
  114. font-size: 40px;
  115. text-transform: capitalize;
  116. text-align: center;
  117. color: #dfdcdc; /* header font color */
  118. font-family: 'Angel';
  119. }
  120.  
  121. h3 {
  122. display: block;
  123. font-size: 15px;
  124. text-transform: uppercase;
  125. font-family: 'Crimson-Text';
  126. color: #dfdcdc;
  127. text-decoration: underline;
  128. }
  129.  
  130. /* row and column alignment for the images, don't touch unless you know what you're doing */
  131.  
  132. .row {
  133. display: flex;
  134. }
  135.  
  136. .column {
  137. flex: 33.33%;
  138. padding: 5px;
  139. }
  140.  
  141. /* ----------------------TOPBAR INFO---------------------- */
  142.  
  143. .topbar {
  144. width: 100%;
  145. height: 55px;
  146. background-color: #141414; /* topbar color */
  147. position: fixed;
  148. z-index: 10;
  149. top: 0px;
  150. left: 0px;
  151. }
  152.  
  153. .topbar-link {
  154. font-family: 'calibri';
  155. font-size: 13px;
  156. color: #3797a5;
  157. text-transform: uppercase;
  158. text-align: center;
  159. word-spacing: 200px; /* adjust if adding/subtracting links */
  160. margin: 4px;
  161. }
  162.  
  163. /* ----------------------TOP TAB INFO---------------------- */
  164.  
  165. .tab {
  166. position: fixed;
  167. width: 100%;
  168. height: 30px;
  169. top: 25px;
  170. overflow: hidden;
  171. z-index: 10;
  172. background-color: #141414;
  173. }
  174.  
  175. /* tab button styling */
  176. .tab button {
  177. background-color: inherit;
  178. font-family: 'calibri';
  179. font-size: 17px;
  180. color: #3797a5;
  181. text-transform: uppercase;
  182. border: none;
  183. cursor: pointer;
  184. padding: 6px 16px;
  185. transition: 0.3s;
  186. }
  187.  
  188. /* hover background color */
  189. .tab button:hover {
  190. background-color: #ddd;
  191. }
  192.  
  193. /* active tab class */
  194. .tab button.active {
  195. background-color: #ccc;
  196. }
  197.  
  198. /* tab content style */
  199. .tabcontent {
  200. padding: 6px 12px;
  201. }
  202.  
  203. /* ----------------------BEFORE BOXES---------------------- */
  204.  
  205. /* if you change the height/width of the boxes, they'll need to be moved back into placement */
  206.  
  207. .before-section { /* whole section alignment, don't touch */
  208. position: absolute;
  209. overflow: auto;
  210. margin: auto;
  211. top: 0px;
  212. bottom: 0px;
  213. left: 0px;
  214. right: 0px;
  215. }
  216.  
  217. .before-title-box {
  218. display: block;
  219. position: absolute;
  220. margin: auto;
  221. top: -480px;
  222. bottom: 0px;
  223. left: 0px;
  224. right: 0px;
  225. width: 700px;
  226. height: 80px;
  227. background: #c8d3d5;
  228. background-image: url('https://imgur.com/s6YKLHs.png');
  229. }
  230.  
  231. .before-title { /* overridden by h2, see above */
  232. position: absolute;
  233. margin: auto;
  234. top: -7px;
  235. bottom: 0px;
  236. left: 0px;
  237. right: 0px;
  238. text-align: center;
  239. font-size: 14px;
  240. font-family: 'Angel';
  241. text-transform: lowercase;
  242. }
  243.  
  244. .before-summary-box { /* before summary box */
  245. display: block;
  246. position: absolute;
  247. margin: auto;
  248. top: -70px;
  249. bottom: 0px;
  250. left: 0px;
  251. right: 0px;
  252. width: 700px;
  253. height: 300px;
  254. overflow-y: auto;
  255. padding-bottom: 20px;
  256. color: transparent;
  257. background: #000; /* container color */
  258. }
  259.  
  260. .before-summary {
  261. position: absolute;
  262. margin: auto;
  263. padding-left: 10px;
  264. padding-right: 10px;
  265. text-align: left;
  266. font-size: 12px;
  267. font-family: 'calibri';
  268. color: #dfdcdc; /* font color */
  269. text-transform: capitalize;
  270. }
  271.  
  272. /* ----------------------BEFORE BOXES END---------------------- */
  273.  
  274. /* ----------------------SEASON ONE BOXES---------------------- */
  275.  
  276. .season1-section { /* whole section alignment, don't touch */
  277. position: absolute;
  278. overflow: auto;
  279. margin: auto;
  280. top: 0px;
  281. bottom: 0px;
  282. left: 0px;
  283. right: 0px;
  284. }
  285.  
  286. .season1-title-box {
  287. display: block;
  288. position: absolute;
  289. margin: auto;
  290. top: -480px;
  291. bottom: 0px;
  292. left: 0px;
  293. right: 0px;
  294. width: 700px;
  295. height: 80px;
  296. background: #c8d3d5;
  297. background-image: url('https://imgur.com/s6YKLHs.png');
  298. }
  299.  
  300. .season1-title { /* overridden by h2, see above */
  301. position: absolute;
  302. margin: auto;
  303. top: -7px;
  304. bottom: 0px;
  305. left: 0px;
  306. right: 0px;
  307. text-align: center;
  308. font-size: 14px;
  309. font-family: 'Angel';
  310. text-transform: lowercase;
  311. }
  312.  
  313. .season1-summary-box { /* s1 summary box */
  314. display: block;
  315. position: absolute;
  316. margin: auto;
  317. top: -270px;
  318. bottom: 0px;
  319. left: 0px;
  320. right: 0px;
  321. width: 700px;
  322. height: 100px;
  323. overflow-y: auto;
  324. padding-bottom: 20px;
  325. color: transparent;
  326. background: #000; /* container color */
  327. }
  328.  
  329. .season1-summary {
  330. position: absolute;
  331. margin: auto;
  332. padding-left: 10px;
  333. padding-right: 10px;
  334. text-align: left;
  335. font-size: 12px;
  336. font-family: 'calibri';
  337. color: #dfdcdc; /* font color */
  338. text-transform: capitalize;
  339. }
  340.  
  341. .season1-event-title-box {
  342. display: block;
  343. position: absolute;
  344. margin: auto;
  345. top: -70px;
  346. bottom: 0px;
  347. left: 0px;
  348. right: 0px;
  349. width: 700px;
  350. height: 40px;
  351. background: #c8d3d5;
  352. background-image: url('https://imgur.com/s6YKLHs.png');
  353. }
  354.  
  355. .season1-event-title {
  356. position: absolute;
  357. margin: auto;
  358. top: -5px;
  359. bottom: 0px;
  360. left: 0px;
  361. right: 0px;
  362. text-align: center;
  363. font-size: 14px;
  364. font-family: 'Crimson-Text', serif; /* overridden by h1, see above */
  365. color: #3797a5; /* font color */
  366. text-transform: lowercase;
  367. }
  368.  
  369. .season1-events { /*container box for event things*/
  370. position: absolute;
  371. margin: auto;
  372. overflow: auto;
  373. white-space: nowrap;
  374. top: 180px;
  375. bottom: 0px;
  376. left: 0px;
  377. right: 0px;
  378. width: 700px;
  379. height: 200px;
  380. background-color: #000;
  381. }
  382.  
  383. .season1-event-navbox { /*EACH INDIVIDUAL IMG */
  384. display: inline-block;
  385. width: 130px; /* ADJUST IF ADDING MORE IMAGES, INCREASING SIZE MANAGES THE GAPS BETWEEN THE EDGES */
  386. height: 140px;
  387. border:10px solid #000;
  388. background-size:130px 130px;
  389. background-color: #000;
  390. margin-top: 18px;
  391. padding: 5px;
  392. background-repeat:no-repeat;
  393. }
  394.  
  395. .season1-event-navbox img {
  396. display: block;
  397. width: 130px;
  398. height: 130px;
  399. margin: 0px;
  400. padding: 10px;
  401. }
  402.  
  403. .season1-event-text {
  404. text-align: center;
  405. vertical-align: middle;
  406. margin: -5px; /*realign the hovers with the images */
  407. width:130px;
  408. height:130px;
  409. right: 0px;
  410. font-family: 'Exodus';
  411. font-size: 18px;
  412. line-height: 100%;
  413. letter-spacing: -2px;
  414. color: #000;
  415. background-color:#141414;
  416. white-space:normal;
  417. opacity:0;
  418. overflow:auto;
  419. transition:.7s ease all;
  420. }
  421.  
  422. .season1-event-text:hover {
  423. opacity:1;
  424. }
  425.  
  426. .season1-plots-title-box {
  427. display: block;
  428. position: absolute;
  429. margin: auto;
  430. top: 470px;
  431. bottom: 0px;
  432. left: 0px;
  433. right: 0px;
  434. width: 700px;
  435. height: 40px;
  436. background: #c8d3d5;
  437. background-image: url('https://imgur.com/s6YKLHs.png');
  438. }
  439.  
  440. .season1-plots-title {
  441. position: absolute;
  442. margin: auto;
  443. top: -5px;
  444. bottom: 0px;
  445. left: 0px;
  446. right: 0px;
  447. text-align: center;
  448. font-size: 14px;
  449. font-family: 'Crimson-Text', serif; /* overridden by h1, see above */
  450. color: #3797a5; /* font color */
  451. text-transform: lowercase;
  452. }
  453.  
  454. .season1-plots { /* everything in s1 plot box */
  455. position: absolute;
  456. margin: auto;
  457. top: 1330px;
  458. bottom: 0px;
  459. left: 0px;
  460. right: 0px;
  461. width: 700px;
  462. height: 810px;
  463. background-color: #000; /* container color */
  464. }
  465.  
  466. .season1-plots-navbox { /*EACH INDIVIDUAL IMG */
  467. position: absolute;
  468. display: block;
  469. margin-top: 10px;
  470. padding: 0px;
  471. }
  472.  
  473. .season1-plots-navbox img {
  474. width: 150px;
  475. height: 191px;
  476. margin: auto;
  477. padding-left: 10px;
  478. padding-bottom: 15px;
  479. }
  480.  
  481. .season1-plots-text {
  482. position: relative;
  483. top: -218px;
  484. margin: auto;
  485. padding-left: 170px;
  486. padding-right: 10px;
  487. text-align: left;
  488. font-size: 12px;
  489. z-index: 100;
  490. font-family: 'calibri';
  491. color: #dfdcdc; /* font color */
  492. text-transform: capitalize;
  493. }
  494.  
  495. /* ----------------------SEASON ONE BOXES END---------------------- */
  496.  
  497. /* ----------------------SEASON TWO BOXES---------------------- */
  498.  
  499. .season2-section { /* whole section alignment, don't touch */
  500. position: absolute;
  501. overflow: auto;
  502. margin: auto;
  503. top: 0px;
  504. bottom: 0px;
  505. left: 0px;
  506. right: 0px;
  507. }
  508.  
  509. .season2-title-box {
  510. display: block;
  511. position: absolute;
  512. margin: auto;
  513. top: -480px;
  514. bottom: 0px;
  515. left: 0px;
  516. right: 0px;
  517. width: 700px;
  518. height: 80px;
  519. background: #c8d3d5;
  520. background-image: url('https://imgur.com/s6YKLHs.png');
  521. }
  522.  
  523. .season2-title { /* overridden by h2, see above */
  524. position: absolute;
  525. margin: auto;
  526. top: -7px;
  527. bottom: 0px;
  528. left: 0px;
  529. right: 0px;
  530. text-align: center;
  531. font-size: 14px;
  532. font-family: 'Angel';
  533. color: #3797a5; /* font color */
  534. text-transform: lowercase;
  535. }
  536.  
  537. .season2-summary-box { /* s2 summary box */
  538. display: block;
  539. position: absolute;
  540. margin: auto;
  541. top: -270px;
  542. bottom: 0px;
  543. left: 0px;
  544. right: 0px;
  545. width: 700px;
  546. height: 100px;
  547. overflow-y: auto;
  548. padding-bottom: 20px;
  549. color: transparent;
  550. background: #000; /* container color */
  551. }
  552.  
  553. .season2-summary {
  554. position: absolute;
  555. margin: auto;
  556. padding-left: 10px;
  557. padding-right: 10px;
  558. text-align: left;
  559. font-size: 12px;
  560. font-family: 'calibri';
  561. color: #dfdcdc; /* font color */
  562. text-transform: capitalize;
  563. }
  564.  
  565. .season2-event-title-box {
  566. display: block;
  567. position: absolute;
  568. margin: auto;
  569. top: -70px;
  570. bottom: 0px;
  571. left: 0px;
  572. right: 0px;
  573. width: 700px;
  574. height: 40px;
  575. background: #c8d3d5;
  576. background-image: url('https://imgur.com/s6YKLHs.png');
  577. }
  578.  
  579. .season2-event-title {
  580. position: absolute;
  581. margin: auto;
  582. top: -5px;
  583. bottom: 0px;
  584. left: 0px;
  585. right: 0px;
  586. text-align: center;
  587. font-size: 14px;
  588. font-family: 'Crimson-Text', serif; /* overridden by h1, see above */
  589. color: #3797a5; /* font color */
  590. text-transform: lowercase;
  591. }
  592.  
  593. .season2-events { /*container box for event things*/
  594. position: absolute;
  595. margin: auto;
  596. overflow: auto;
  597. white-space: nowrap;
  598. top: 180px;
  599. bottom: 0px;
  600. left: 0px;
  601. right: 0px;
  602. width: 700px;
  603. height: 200px;
  604. background-color: #000;
  605. }
  606.  
  607. .season2-event-navbox { /*EACH INDIVIDUAL IMG */
  608. display: inline-block;
  609. width: 130px; /* ADJUST IF ADDING MORE IMAGES, INCREASING SIZE MANAGES THE GAPS BETWEEN THE EDGES */
  610. height: 140px;
  611. border:10px solid #000;
  612. background-size:130px 130px;
  613. background-color: #000;
  614. margin-top: 18px;
  615. padding: 5px;
  616. background-repeat:no-repeat;
  617. }
  618.  
  619. .season2-event-navbox img {
  620. display: block;
  621. width: 130px;
  622. height: 130px;
  623. margin: 0px;
  624. padding: 10px;
  625. }
  626.  
  627. .season2-event-text {
  628. text-align: center;
  629. vertical-align: middle;
  630. margin: -5px; /*realign the hovers with the images */
  631. width:130px;
  632. height:130px;
  633. right: 0px;
  634. font-family: 'Exodus';
  635. font-size: 18px;
  636. line-height: 100%;
  637. letter-spacing: -2px;
  638. color: #000;
  639. background-color:#141414;
  640. white-space:normal;
  641. opacity:0;
  642. overflow:auto;
  643. transition:.7s ease all;
  644. }
  645.  
  646. .season2-event-text:hover {
  647. opacity:1;
  648. }
  649.  
  650. .season2-plots-title-box {
  651. display: block;
  652. position: absolute;
  653. margin: auto;
  654. top: 470px;
  655. bottom: 0px;
  656. left: 0px;
  657. right: 0px;
  658. width: 700px;
  659. height: 40px;
  660. background: #c8d3d5;
  661. background-image: url('https://imgur.com/s6YKLHs.png');
  662. }
  663.  
  664. .season2-plots-title {
  665. position: absolute;
  666. margin: auto;
  667. top: -5px;
  668. bottom: 0px;
  669. left: 0px;
  670. right: 0px;
  671. text-align: center;
  672. font-size: 14px;
  673. font-family: 'Crimson-Text', serif; /* overridden by h1, see above */
  674. color: #3797a5; /* font color */
  675. text-transform: lowercase;
  676. }
  677.  
  678. .season2-plots { /* everything in s2 plot box */
  679. position: absolute;
  680. margin: auto;
  681. top: 930px;
  682. bottom: 0px;
  683. left: 0px;
  684. right: 0px;
  685. width: 700px;
  686. height: 410px;
  687. background-color: #000; /* container color */
  688. }
  689.  
  690. .season2-plots-navbox { /*EACH INDIVIDUAL IMG */
  691. position: absolute;
  692. display: block;
  693. margin-top: 10px;
  694. padding: 0px;
  695. }
  696.  
  697. .season2-plots-navbox img {
  698. width: 150px;
  699. height: 191px;
  700. margin: auto;
  701. padding-left: 10px;
  702. padding-bottom: 15px;
  703. }
  704.  
  705. .season2-plots-text {
  706. position: relative;
  707. top: -218px;
  708. margin: auto;
  709. padding-left: 170px;
  710. padding-right: 10px;
  711. text-align: left;
  712. font-size: 12px;
  713. z-index: 100;
  714. font-family: 'calibri';
  715. color: #dfdcdc; /* font color */
  716. text-transform: capitalize;
  717. }
  718.  
  719. /* ----------------------SEASON TWO BOXES END---------------------- */
  720.  
  721. </style>
  722. </head>
  723.  
  724. <body>
  725.  
  726. <!--TOPBAR-->
  727.  
  728. <div class="topbar">
  729.  
  730. <!--TOPBAR LINKS-->
  731. <div class="topbar-link">
  732. <a href="/">home</a>
  733. <a href="/navigation">nav</a>
  734. <a href="/plot">plot</a>
  735. <a href="/ask">ask</a>
  736. <a href="http://jacktherph.tumblr.com">credit</a> <!--DO NOT TOUCH-->
  737. </div>
  738. </div>
  739. <!--END TOPBAR DIV-->
  740.  
  741. <!--TAB DIV-->
  742.  
  743. <div class="tab">
  744. <button class="tablinks" onclick="openCity(event, 'before')" id="defaultOpen">Before...</button>
  745. <button class="tablinks" onclick="openCity(event, 'season1')">Season One</button>
  746. <button class="tablinks" onclick="openCity(event, 'season2')">Season Two</button>
  747. </div>
  748.  
  749. <!--END TAB DIV-->
  750.  
  751. <!-------------------------BEFORE SECTION BEGINS--------------------->
  752.  
  753. <div id="before" class="tabcontent">
  754. <div class="before-section">
  755.  
  756. <!--BEFORE TITLE BOX-->
  757.  
  758. <div class="before-title-box">
  759. <div class="before-title"><h2>BEFORE...</h2></div></div>
  760.  
  761. <!--BEFORE TITLE ENDS-->
  762.  
  763. <!--BEFORE SUMMARY-->
  764.  
  765. <div class="before-summary-box">
  766. <div class="before-summary">
  767. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus quam, luctus et orci sed, vestibulum dapibus risus. Nulla turpis felis, placerat sed condimentum sit amet, condimentum in ante. Vivamus posuere imperdiet volutpat. Vestibulum non augue enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi metus risus, elementum vitae luctus quis, molestie quis lacus. Mauris porttitor ut augue nec pellentesque. Sed ultrices ligula a nulla tempus, eget bibendum mi ullamcorper. Aliquam eros dui, porttitor luctus est vel, dictum accumsan risus. Sed eu faucibus lectus.
  768.  
  769. <p>Aenean quis rutrum sapien. Mauris in pharetra mi. Etiam ligula orci, venenatis viverra massa vel, luctus gravida ligula. Donec vulputate vulputate nulla. Vestibulum ultricies convallis nunc, nec dapibus libero accumsan vel. Suspendisse quis est ac libero pellentesque aliquet at in leo. Aliquam auctor finibus dolor, quis eleifend nisi euismod ut. Nulla malesuada euismod magna eu laoreet. Phasellus eu purus ut enim fringilla venenatis. Etiam ullamcorper odio eget ipsum fermentum mollis.
  770.  
  771. <p>Aliquam dapibus orci ut quam gravida, aliquet hendrerit lorem rutrum. Morbi sodales, risus in viverra vehicula, ipsum sapien laoreet augue, id molestie neque orci nec neque. Cras congue turpis id facilisis ullamcorper. Praesent ultricies id odio in efficitur. Phasellus tortor nisi, tristique volutpat pharetra id, dignissim at ipsum. Nullam nunc augue, volutpat in mi nec, imperdiet lacinia urna. Aliquam erat volutpat. Ut quis iaculis mi. Fusce interdum malesuada congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin porttitor molestie ex in molestie. Nunc at auctor mauris.
  772. </div>
  773. </div>
  774.  
  775. <!--BEFORE SUMMARY ENDS-->
  776.  
  777.  
  778. </div>
  779. </div>
  780.  
  781.  
  782. <!-------------------------BEFORE SECTION ENDS----------------------->
  783.  
  784.  
  785. <!-------------------------SEASON ONE SECTION BEGINS--------------------->
  786.  
  787. <div id="season1" class="tabcontent">
  788. <div class="season1-section">
  789.  
  790. <!--SEASON 1 TITLE BOX-->
  791.  
  792. <div class="season1-title-box">
  793. <div class="season1-title"><h2>SEASON ONE</h2></div></div>
  794.  
  795. <!--SEASON 1 TITLE ENDS-->
  796.  
  797. <!--SEASON 1 SUMMARY-->
  798.  
  799. <div class="season1-summary-box">
  800. <div class="season1-summary">
  801. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus quam, luctus et orci sed, vestibulum dapibus risus. Nulla turpis felis, placerat sed condimentum sit amet, condimentum in ante. Vivamus posuere imperdiet volutpat. Vestibulum non augue enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi metus risus, elementum vitae luctus quis, molestie quis lacus. Mauris porttitor ut augue nec pellentesque. Sed ultrices ligula a nulla tempus, eget bibendum mi ullamcorper. Aliquam eros dui, porttitor luctus est vel, dictum accumsan risus. Sed eu faucibus lectus.
  802.  
  803. <p>Aenean quis rutrum sapien. Mauris in pharetra mi. Etiam ligula orci, venenatis viverra massa vel, luctus gravida ligula. Donec vulputate vulputate nulla. Vestibulum ultricies convallis nunc, nec dapibus libero accumsan vel. Suspendisse quis est ac libero pellentesque aliquet at in leo. Aliquam auctor finibus dolor, quis eleifend nisi euismod ut. Nulla malesuada euismod magna eu laoreet. Phasellus eu purus ut enim fringilla venenatis. Etiam ullamcorper odio eget ipsum fermentum mollis.
  804.  
  805. <p>Aliquam dapibus orci ut quam gravida, aliquet hendrerit lorem rutrum. Morbi sodales, risus in viverra vehicula, ipsum sapien laoreet augue, id molestie neque orci nec neque. Cras congue turpis id facilisis ullamcorper. Praesent ultricies id odio in efficitur. Phasellus tortor nisi, tristique volutpat pharetra id, dignissim at ipsum. Nullam nunc augue, volutpat in mi nec, imperdiet lacinia urna. Aliquam erat volutpat. Ut quis iaculis mi. Fusce interdum malesuada congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin porttitor molestie ex in molestie. Nunc at auctor mauris.
  806. </div>
  807. </div>
  808.  
  809. <!--SEASON 1 SUMMARY ENDS-->
  810.  
  811. <!--SEASON 1 EVENTS-->
  812.  
  813. <div class="season1-event-title-box">
  814. <div class="season1-event-title"><h1>EVENTS</h1></div></div>
  815.  
  816. <div class="season1-events">
  817. <div class="row">
  818.  
  819. <div class="column"> <div class="season1-event-navbox" style="background-image:url('https://imgur.com/qz0y7tB.png')">
  820. <div class="season1-event-text"><div style="padding-top: 40px;" ><a href="/LINK-HERE">The <br>Winter Festival</a></div></div>
  821. </div>
  822. </div>
  823.  
  824. <div class="column"> <div class="season1-event-navbox" style="background-image:url('https://imgur.com/Li9wfga.png')">
  825. <div class="season1-event-text"><div style="padding-top: 40px;"><a href="/LINK-HERE">The <br>New <br>Year</a></div></div>
  826. </div>
  827. </div>
  828.  
  829.  
  830. </div>
  831. </div>
  832.  
  833. <!--SEASON 1 EVENTS ENDS-->
  834.  
  835.  
  836. <!--SEASON 1 PLOTS-->
  837.  
  838. <div class="season1-plots-title-box">
  839. <div class="season1-plots-title"><h1>PLOT DROPS</h1></div></div>
  840.  
  841. <div class="season1-plots">
  842. <div class="season1-plots-navbox">
  843. <img src="https://imgur.com/J0ediGG.png" align="left;">
  844. <div class="season1-plots-text">
  845. <p><a href="/LINK-HERE"><h3>In a State of Amity</h3></a>
  846. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat tellus a libero facilisis aliquet. Donec dolor lacus, elementum et rutrum non, feugiat in eros. Nullam sed est tempor, rutrum mauris id, vulputate felis. Ut non velit quis leo laoreet gravida quis nec magna. Duis urna elit, faucibus id eleifend ac, blandit sit amet eros. Nam id ex a dui facilisis luctus. Pellentesque imperdiet metus dolor, eget dignissim ipsum rhoncus quis. Praesent rhoncus justo sed pellentesque aliquet. In sit amet velit elementum ex mattis ultrices et in diam. Cras a efficitur lacus. Quisque posuere semper sapien luctus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sem quis justo finibus scelerisque.
  847. </div>
  848. </div>
  849.  
  850. <div class="season1-plots-navbox" div style="padding-top: 200px;">
  851. <img src="https://imgur.com/mrEqyyq.png">
  852. <div class="season1-plots-text">
  853. <p><a href="/LINK-HERE"><h3>An Effort to Disturb the Peace</h3></a>
  854. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat tellus a libero facilisis aliquet. Donec dolor lacus, elementum et rutrum non, feugiat in eros. Nullam sed est tempor, rutrum mauris id, vulputate felis. Ut non velit quis leo laoreet gravida quis nec magna. Duis urna elit, faucibus id eleifend ac, blandit sit amet eros. Nam id ex a dui facilisis luctus. Pellentesque imperdiet metus dolor, eget dignissim ipsum rhoncus quis. Praesent rhoncus justo sed pellentesque aliquet. In sit amet velit elementum ex mattis ultrices et in diam. Cras a efficitur lacus. Quisque posuere semper sapien luctus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sem quis justo finibus scelerisque.
  855. </div>
  856. </div>
  857.  
  858. <div class="season1-plots-navbox" div style="padding-top: 400px;">
  859. <img src="https://imgur.com/s3bEDJ9.png">
  860. <div class="season1-plots-text">
  861. <p><a href="/LINK-HERE"><h3>A Storm is Brewing</h3></a>
  862. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat tellus a libero facilisis aliquet. Donec dolor lacus, elementum et rutrum non, feugiat in eros. Nullam sed est tempor, rutrum mauris id, vulputate felis. Ut non velit quis leo laoreet gravida quis nec magna. Duis urna elit, faucibus id eleifend ac, blandit sit amet eros. Nam id ex a dui facilisis luctus. Pellentesque imperdiet metus dolor, eget dignissim ipsum rhoncus quis. Praesent rhoncus justo sed pellentesque aliquet. In sit amet velit elementum ex mattis ultrices et in diam. Cras a efficitur lacus. Quisque posuere semper sapien luctus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sem quis justo finibus scelerisque.
  863. </div>
  864. </div>
  865.  
  866. <div class="season1-plots-navbox" div style="padding-top: 600px;">
  867. <img src="https://imgur.com/8vhGPgM.png">
  868. <div class="season1-plots-text">
  869. <p><a href="/LINK-HERE"><h3>Torn Asunder</h3></a>
  870. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat tellus a libero facilisis aliquet. Donec dolor lacus, elementum et rutrum non, feugiat in eros. Nullam sed est tempor, rutrum mauris id, vulputate felis. Ut non velit quis leo laoreet gravida quis nec magna. Duis urna elit, faucibus id eleifend ac, blandit sit amet eros. Nam id ex a dui facilisis luctus. Pellentesque imperdiet metus dolor, eget dignissim ipsum rhoncus quis. Praesent rhoncus justo sed pellentesque aliquet. In sit amet velit elementum ex mattis ultrices et in diam. Cras a efficitur lacus. Quisque posuere semper sapien luctus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sem quis justo finibus scelerisque.
  871. </div>
  872. </div>
  873.  
  874.  
  875.  
  876. </div>
  877.  
  878. <!--SEASON 1 PLOTS ENDS-->
  879.  
  880. </div>
  881. </div>
  882.  
  883. <!-------------------------SEASON ONE SECTION ENDS--------------------->
  884.  
  885.  
  886. <!-------------------------SEASON TWO SECTION BEGINS--------------------->
  887.  
  888. <div id="season2" class="tabcontent">
  889. <div class="season2-section">
  890.  
  891.  
  892. <!--SEASON 2 TITLE BOX-->
  893.  
  894. <div class="season2-title-box">
  895. <div class="season2-title"><h2>SEASON TWO</h2></div></div>
  896.  
  897. <!--SEASON 2 TITLE ENDS-->
  898.  
  899. <!--SEASON 2 SUMMARY-->
  900.  
  901. <div class="season2-summary-box">
  902. <div class="season2-summary">
  903. <p>Aenean quis rutrum sapien. Mauris in pharetra mi. Etiam ligula orci, venenatis viverra massa vel, luctus gravida ligula. Donec vulputate vulputate nulla. Vestibulum ultricies convallis nunc, nec dapibus libero accumsan vel. Suspendisse quis est ac libero pellentesque aliquet at in leo. Aliquam auctor finibus dolor, quis eleifend nisi euismod ut. Nulla malesuada euismod magna eu laoreet. Phasellus eu purus ut enim fringilla venenatis. Etiam ullamcorper odio eget ipsum fermentum mollis.
  904.  
  905. <p>Aliquam dapibus orci ut quam gravida, aliquet hendrerit lorem rutrum. Morbi sodales, risus in viverra vehicula, ipsum sapien laoreet augue, id molestie neque orci nec neque. Cras congue turpis id facilisis ullamcorper. Praesent ultricies id odio in efficitur. Phasellus tortor nisi, tristique volutpat pharetra id, dignissim at ipsum. Nullam nunc augue, volutpat in mi nec, imperdiet lacinia urna. Aliquam erat volutpat. Ut quis iaculis mi. Fusce interdum malesuada congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin porttitor molestie ex in molestie. Nunc at auctor mauris.
  906. </div>
  907. </div>
  908.  
  909. <!--SEASON 2 SUMMARY ENDS-->
  910.  
  911. <!--SEASON 2 EVENTS-->
  912.  
  913. <div class="season2-event-title-box">
  914. <div class="season2-event-title"><h1>EVENTS</h1></div></div>
  915.  
  916. <div class="season2-events">
  917. <div class="row">
  918.  
  919. <div class="column"> <div class="season2-event-navbox" style="background-image:url('https://imgur.com/xKkeGTX.png')">
  920. <div class="season2-event-text"><div style="padding-top: 30px;"><a href="/LINK-HERE">Festival <br>of Moon <br>and Tide</a></div></div>
  921. </div>
  922. </div>
  923.  
  924. <div class="column"> <div class="season2-event-navbox" style="background-image:url('https://imgur.com/vCE0dld.png')">
  925. <div class="season2-event-text"><div style="padding-top: 40px;"><a href="/LINK-HERE">The Fighting Pits</a></div></div>
  926. </div>
  927. </div>
  928.  
  929. <div class="column"> <div class="season2-event-navbox" style="background-image:url('https://imgur.com/X0kJRrO.png')">
  930. <div class="season2-event-text"><div style="padding-top: 40px;"><a href="/LINK-HERE">The Coronation</a></div></div>
  931. </div>
  932. </div>
  933.  
  934.  
  935. </div>
  936. </div>
  937.  
  938. <!--SEASON 2 EVENTS ENDS-->
  939.  
  940.  
  941. <!--SEASON 2 PLOTS-->
  942.  
  943. <div class="season2-plots-title-box">
  944. <div class="season2-plots-title"><h1>PLOT DROPS</h1></div></div>
  945.  
  946. <div class="season2-plots">
  947. <div class="season2-plots-navbox">
  948. <img src="https://imgur.com/5zaeGFY.png" align="left;">
  949. <div class="season2-plots-text">
  950. <p><a href="/LINK-HERE"><h3>Ashes in Their Eyes</h3></a>
  951. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat tellus a libero facilisis aliquet. Donec dolor lacus, elementum et rutrum non, feugiat in eros. Nullam sed est tempor, rutrum mauris id, vulputate felis. Ut non velit quis leo laoreet gravida quis nec magna. Duis urna elit, faucibus id eleifend ac, blandit sit amet eros. Nam id ex a dui facilisis luctus. Pellentesque imperdiet metus dolor, eget dignissim ipsum rhoncus quis. Praesent rhoncus justo sed pellentesque aliquet. In sit amet velit elementum ex mattis ultrices et in diam. Cras a efficitur lacus. Quisque posuere semper sapien luctus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sem quis justo finibus scelerisque.
  952. </div>
  953. </div>
  954.  
  955. <div class="season2-plots-navbox" div style="padding-top: 200px;">
  956. <img src="https://imgur.com/EULt4gU.png">
  957. <div class="season2-plots-text">
  958. <p><a href="/LINK-HERE"><h3>The Wanderer</h3></a>
  959. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat tellus a libero facilisis aliquet. Donec dolor lacus, elementum et rutrum non, feugiat in eros. Nullam sed est tempor, rutrum mauris id, vulputate felis. Ut non velit quis leo laoreet gravida quis nec magna. Duis urna elit, faucibus id eleifend ac, blandit sit amet eros. Nam id ex a dui facilisis luctus. Pellentesque imperdiet metus dolor, eget dignissim ipsum rhoncus quis. Praesent rhoncus justo sed pellentesque aliquet. In sit amet velit elementum ex mattis ultrices et in diam. Cras a efficitur lacus. Quisque posuere semper sapien luctus mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo sem quis justo finibus scelerisque.
  960. </div>
  961. </div>
  962.  
  963.  
  964.  
  965.  
  966. </div>
  967.  
  968. <!--SEASON 2 PLOTS ENDS-->
  969.  
  970. </div>
  971. </div>
  972.  
  973. <!-------------------------SEASON TWO SECTION ENDS--------------------->
  974.  
  975.  
  976. </div>
  977. </div>
  978.  
  979. <!--------------------TAB SCRIPT--------------------->
  980.  
  981. <script>
  982. function openCity(evt, cityName) {
  983. var i, tabcontent, tablinks;
  984. tabcontent = document.getElementsByClassName("tabcontent");
  985. for (i = 0; i < tabcontent.length; i++) {
  986. tabcontent[i].style.display = "none";
  987. }
  988. tablinks = document.getElementsByClassName("tablinks");
  989. for (i = 0; i < tablinks.length; i++) {
  990. tablinks[i].className = tablinks[i].className.replace(" active", "");
  991. }
  992. document.getElementById(cityName).style.display = "block";
  993. evt.currentTarget.className += " active";
  994. }
  995.  
  996. // Get the element with id="defaultOpen" and click on it
  997. document.getElementById("defaultOpen").click();
  998. </script>
  999.  
  1000. </body>
  1001. </html>
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!