API tools faq
paste
Advertisement
spielglocken

Page 03 | Djakarta

spielglocken
Feb 3rd, 2020
5,270
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <link href='https://static.tumblr.com/vr8wztv/KHzpnokhf/cssreset.css' rel='stylesheet' type='text/css'>
  5. <link href="https://dl.dropbox.com/s/68f2yjd33jc4j85/djakarta-v1.css" rel="stylesheet">
  6. <link href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.10.2/css/OverlayScrollbars.min.css" rel="stylesheet">
  7. <link href="https://fonts.googleapis.com/css?family=IBM Plex Mono:300,300i,400,400i,700,700i|Source Sans Pro:300,300i,400,400i,700,700i" rel="stylesheet">
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10.  
  11.  
  12.  
  13. <!--
  14. ===============================================
  15.  
  16.  
  17. Character Page: Djakarta
  18. more @ https://spielglocken.tumblr.com
  19.  
  20. Do not alter or remove credit
  21.  
  22.  
  23. ===============================================
  24. Notes are included below.
  25. -->
  26.  
  27.  
  28.  
  29.  
  30. <!-- don't forget to change this -->
  31. <title>Djakarta</title>
  32. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  33. <meta charset="utf-8"/>
  34. <noscript>
  35. <style type="text/css">
  36. body {opacity:1;}
  37. </style>
  38. </noscript>
  39. <style type="text/css">
  40. :root{
  41. --body-background: 24, 25, 33;
  42. --left-half: 31, 32, 41;
  43. --right-half: 40, 42, 61;
  44.  
  45. --body-text-color: 250, 250, 250;
  46. --right-half-text-color: 247, 187, 161;
  47. --right-half-highlight: 69, 195, 214;
  48. --left-half-highlight: 255, 239, 135;
  49.  
  50. --body-font: 'Source Sans Pro';
  51. --title-font: 'IBM Plex Mono';
  52.  
  53. --container-shadow-opacity: .5;
  54. --name-text-shadow-opacity: .3;
  55. --post-it-shadow-opacity: .5;
  56.  
  57. --view-text: 'View';
  58. /* text when hovering over character name on the right */
  59.  
  60. --view-active-text: 'Viewing';
  61. /* text when a character is displayed */
  62.  
  63. --close-button-text: ' Close';
  64. --container-padding: 60px;
  65. /* this can use other units than px */
  66. }
  67.  
  68. @media(min-width:0px) and (max-width:1023px) {
  69.  
  70. :root{
  71. --container-padding: 10vw;
  72. }
  73. }
  74. @media(min-width:600px) and (max-width:1023px) {
  75. .container.full-screen{
  76. --container-padding: 5vw;
  77. }
  78. }
  79. </style>
  80. </head>
  81. <body>
  82. <!--
  83.  
  84. there are 2 display styles:
  85.  
  86. * contained style (default)
  87. * full-screen style
  88.  
  89. CONTAINED STYLE: leave `<section class="container">` as is
  90.  
  91. FULL SCREEN STYLE: add `full-screen` to `<section class="container">`
  92.  
  93. -->
  94. <section class="container">
  95. <!--
  96.  
  97. this page is divided into 2 sections:
  98.  
  99. `<article class="left">`
  100. the character details go here
  101.  
  102. `<article class="right">`
  103. the character list/buttons go here
  104.  
  105. IMPORTANT:
  106. you only need to edit the details. the character list will be automatically generated for each character. you don't have to edit anything on `article class="right">`.
  107. see below for details.
  108.  
  109. -->
  110. <article class="left">
  111.  
  112. <!--
  113.  
  114. INTRODUCTION
  115. title + subtitle + description
  116.  
  117. -->
  118.  
  119. <!-- begin introduction -->
  120. <div class="initial font lt">
  121. <!-- page title -->
  122. <div class="title cap bold">
  123. Djakarta
  124. </div>
  125.  
  126. <!-- subtitle, optional -->
  127. <div class="subtitle">Subtitle</div>
  128.  
  129. <!-- description goes here -->
  130. <div class="blurb">
  131. Short blurb I attract girls who are very good-looking ages 18 - 22 at least once a day laughing hysterically. Full-contact I am a gentleman first and foremost living on sailboats but only of top shelf stuff, working on my screenplay let's get weird clubbing.
  132. </div>
  133. </div>
  134. <!-- close introduction -->
  135.  
  136.  
  137. <!--
  138.  
  139. CHARACTER DETAILS
  140. each character is wrapped inside a `list-content` element. this element has 2 attributes:
  141.  
  142. * `data-name`
  143. * `data-label`
  144.  
  145. `data-name` is where Character Name goes and `data-label` is the label for the character.
  146. `data-label` is optional, but do NOT remove the attribute entirely if you do not use them. simply leave it empty.
  147. the value you put in `data-name` will be used to generate the list on the right and to display character name at the bottom on the left side (visible when you hover over the list).
  148. the value you put in `data-label` will only be visible on the character list on the right.
  149.  
  150. example:
  151.  
  152. `<div class="list-content" data-name="John Smith" data-label="The Villain Protagonist">` will show
  153.  
  154. `JOHN SMITH` on the left side
  155.  
  156. and
  157.  
  158. `John Smith`
  159. `The Villain Protagonist`
  160.  
  161. on the list on the right.
  162.  
  163. -->
  164.  
  165. <!-- begin character details -->
  166. <div class="list-content" data-name="Jan Novák" data-label="Pojďme vibe Czech!">
  167. <div class="list-content-wrap">
  168.  
  169. <!-- begin image -->
  170. <section class="image-wrap">
  171. <!-- character image goes here. images should be at least 800px in height, and preferably in portrait orientation. -->
  172. <img src="https://via.placeholder.com/800x1250.png" />
  173.  
  174. <!-- begin post-it -->
  175. <div class="post-it stick-middle">
  176. <!--
  177.  
  178. you can put a bullet list/summary of the character's key traits/important information here. this is optional, remove if unnecessary.
  179.  
  180. the post-it has an optional "adhesive tape" element with 3 styles:
  181. 1) stuck to the left
  182. 2) stuck in the middle
  183. 3) stuck to the right.
  184.  
  185. to use them, add the following class to `post-it`:
  186.  
  187. LEFT:
  188. add `stick-left` to `post-it`
  189.  
  190. MIDDLE:
  191. add `stick-middle` to `post-it`
  192.  
  193. RIGHT:
  194. add `stick-right` to `post-it`
  195.  
  196. to disable simply remove the abovementioned class names from the `post-it` element:
  197. `<div class="post-it">`
  198.  
  199. -->
  200.  
  201. <!-- begin post-it content -->
  202. <div class="post-it-wrap">
  203. <!-- list item -->
  204. <li>Gratuitous Czech</li>
  205.  
  206. <!-- add or remove as necessary -->
  207. <li>The Protagonist</li>
  208. <li>Mushrooms</li>
  209. </div>
  210. <!-- close post-it content-->
  211. </div>
  212. <!-- close post-it -->
  213. </section>
  214. <!-- close image -->
  215.  
  216. <!-- begin details -->
  217. <section class="details">
  218.  
  219. <!--
  220.  
  221. #2 CHARACTER INFO
  222. this is a character basic info, displayed as list.
  223.  
  224. -->
  225. <div class="character-data">
  226. <li>
  227. <!-- label -->
  228. <span>Name</span>
  229.  
  230. <!-- info -->
  231. Jan Novák
  232. </li>
  233.  
  234. <!-- add or remove as necessary -->
  235. <li><span>Age</span> [Redacted]</li>
  236. <li><span>Birthdate</span> January 01, [Redacted]</li>
  237. </div>
  238.  
  239. <!--
  240.  
  241. #2 QUOTE/CATCHPHRASE
  242.  
  243. -->
  244. <!-- begin quote -->
  245. <div class="character-quote it">I enjoy I don't really keep a budget I know shirtless pics are a no-no, but I may be somewhat jaded.</div>
  246.  
  247. <!-- close quote -->
  248.  
  249.  
  250. <!--
  251.  
  252. #3 MODULAR CHARACTER INFO
  253. character info, but displayed in modular/grid style. you can display modules in 2 or 3 columns.
  254.  
  255. 2 COLUMNS:
  256. add class `w50` to `<div class="module">`
  257. each module's width is half of the container width.
  258.  
  259. 3 COLUMNS:
  260. add class `w33` to `<div class="module">`
  261. each module's width is one-third of the container width.
  262.  
  263. BORDERS:
  264. you can use borders to separate modules.
  265. for 2-column modules, add `left` to the module that will be on the left side (the first module). for 3-column modules, add `mid` to the module that will be in the middle (the second module).
  266.  
  267. by default, modules only have top borders. if there are elements after these modules and you want to put borders between the last modules and the next section, add class `is-last` to the modules in the last row. for example, if your last row of modules are 2-column ones, you'll add `is-last` to the last 2 modules:
  268.  
  269. `<div class="module w50 left is-last">`
  270. `<div class="module w50 is-last">`
  271.  
  272. if your last row of modules are 3-column, you'll add `is-last` to the last 3 modules.
  273.  
  274. you can use `li` element if your module have more than one thing listed (for example "likes" and "dislikes"):
  275.  
  276. `<div class="module-title cap font">Likes</div>`
  277. `<li>This</li>`
  278. `<li>That</li>`
  279.  
  280.  
  281. -->
  282.  
  283. <!-- begin modular character info -->
  284. <div class="character-data-modular">
  285.  
  286. <!-- begin module -->
  287. <div class="module w33">
  288. <!-- module title -->
  289. <div class="module-title cap font">Enneagram Type</div>
  290.  
  291. <!-- content -->
  292. 9
  293. </div>
  294. <!-- close module -->
  295.  
  296. <!-- add or remove as necessary -->
  297.  
  298. <div class="module w33 mid">
  299. <div class="module-title cap font">MBTI Type</div> INFP
  300. </div>
  301. <div class="module w33">
  302. <div class="module-title cap font">Alignment</div> Chaotic Good
  303. </div>
  304. <div class="module w50 left is-last">
  305. <div class="module-title cap font">Likes</div>
  306. <li>Czechia</li>
  307. <li>Everything Czechia offers</li>
  308. <li>Czechia</li>
  309. <li>Have I mentioned Czechia?</li>
  310. </div>
  311. <div class="module w50 is-last">
  312. <div class="module-title cap font">Dislikes</div>
  313. <li>Other Czechs</li>
  314. <li>The Government&trade;</li>
  315. </div>
  316. </div>
  317. <!-- close modular character info -->
  318.  
  319.  
  320. <!--
  321.  
  322. #4 CHARACTER TRAITS/TAGS
  323.  
  324. use class `character-trait` and `<span>` if you use them as labels (traits)
  325. use class `character-tag` and `<a href="">` if you use them as links (tags)
  326.  
  327. -->
  328.  
  329. <!-- begin character traits/tags -->
  330. <div class="character-trait cap">
  331. <!-- title -->
  332. <div class="character-tag-title font bold">Traits</div>
  333.  
  334. <!-- a label -->
  335. <span>Patriotic</span>
  336.  
  337. <!-- add or remove as necessary -->
  338. <span>Nature lover</span>
  339. <span>Expert haggler</span>
  340. </div>
  341.  
  342. <div class="character-tag cap">
  343. <div class="character-tag-title font bold">Tags</div>
  344. <a href="/tagged/">Character Tag</a>
  345. <a href="/tagged/">Writings</a>
  346. <a href="/tagged/">Moodboards</a>
  347. <a href="/tagged/">Analyses</a>
  348. <a href="/tagged/">Fanworks</a>
  349. <a href="/tagged/">Supplementary Materials</a>
  350. <a href="/tagged/">Shit character says</a>
  351. </div>
  352. <!-- close character traits/tags -->
  353.  
  354.  
  355. <!--
  356.  
  357. #5 CHARACTER BIO
  358. comes with formatted heading tags. use this markup for any wall of text(s).
  359.  
  360. -->
  361.  
  362. <!-- begin character bio -->
  363. <div class="character-bio">
  364. <!-- title -->
  365. <div class="character-bio-title font bold">Biography</div>
  366.  
  367. <!-- content -->
  368. <div class="bio-content">
  369. <!-- character biography goes here -->
  370. <h1>First Heading</h1>
  371. <p>Friendzone I starred in my own reality show my hobbies include you should message me. You will love it skydiving ultramarathons making people mad that means I am wonderful, there's no such thing as a typical Friday night I have an IQ of 140, which means MFA Ayn Rand it's huge. Pics on request I will love you forever I'm a nice guy because I am a paradox my beard I'm a nice guy.</p>
  372.  
  373. <h2>Second Heading</h2>
  374. <p>A fairly successful career in sports organized chaos I'm the last of a dying breed keep up with me. Ages 18 - 22 I grow a creepy mustache every February bald is sexy Ayn Rand Juggalo, laughing hysterically Libertarian everything destructive that I do everything destructive that I do on the first date. For real though I have an IQ of 140, which means looking for a third size 2 I do well dating I will love you forever.</p>
  375.  
  376. <blockquote>I'm the last of a dying breed or so I've been told really only soft drugs. Think about it!</blockquote>
  377.  
  378. <h3>Third heading</h3>
  379. <p>If you have to look it up don't bother on my fetish list crossfit I know shirtless pics are a no-no, but. I am currently addicted to someone to provide for you. Please post your real pictures I live in constant amazement of nature and the universe really only soft drugs you should be clean and intelligent but I only smoke when drinking be my partner in crime.</p>
  380.  
  381. <hr/>
  382.  
  383. <h4>Fourth, fifth heading</h4>
  384. <p>Crossfit if you like I grow a creepy mustache every February my beard. I'm an enormous man-child with morals on my fetish list shooting laughing hysterically, size 2 documentary filmmaker</p>
  385. <ul>
  386. <li>I live in constant amazement of nature</li>
  387. <li>and the universe</li>
  388. <li>Please post your real pictures</li>
  389. </ul>
  390.  
  391. <p>Nubile my deep, manly voice but I only smoke when drinking I'm a nice guy you could say I'm old-fashioned, looking for adventure finishing my novel working on my screenplay</p>
  392.  
  393. <ol>
  394. <li>I'm a nice guy a fairly successful career in sports</li>
  395. <li>you should message me</li>
  396. <li>I should have grown up in the 40s</li>
  397. <li>Unworthy of serious consideration I will tell you.</li>
  398. </ol>
  399. </div>
  400. </div>
  401. <!-- close character bio -->
  402.  
  403.  
  404. <!--
  405.  
  406. #6 RELATED CHARACTERS
  407.  
  408. -->
  409.  
  410. <!-- begin related characters -->
  411. <div class="related-character-wrap">
  412. <!-- section title -->
  413. <div class="related-character-title font bold">Related Characters</div>
  414.  
  415. <!-- begin related character item -->
  416. <div class="related-character">
  417. <!-- character image -->
  418. <img src="https://via.placeholder.com/50x50.png">
  419.  
  420. <!-- character name -->
  421. <div class="related-character-name">Character Name</div>
  422.  
  423. <!-- optional label. remove if unused -->
  424. <div class="related-character-label cap font">Optional Label</div>
  425. </div>
  426. <!-- close related character item -->
  427.  
  428. <!-- add or remove as necessary -->
  429. <div class="related-character">
  430. <img src="https://via.placeholder.com/50x50.png">
  431. <div class="related-character-name">Character Name</div>
  432. <div class="related-character-label cap font">Optional Label</div>
  433. </div>
  434. <div class="related-character">
  435. <img src="https://via.placeholder.com/50x50.png">
  436. <div class="related-character-name">Character Name</div>
  437. <div class="related-character-label cap font">Optional Label</div>
  438. </div>
  439. <div class="related-character">
  440. <img src="https://via.placeholder.com/50x50.png">
  441. <div class="related-character-name">Character Name</div>
  442. <div class="related-character-label cap font">Optional Label</div>
  443. </div>
  444. </div>
  445. <!-- close related characters -->
  446.  
  447.  
  448. <!--
  449.  
  450. #7 CHARACTER MOODBOARD
  451. images can be laid out in 2 or 3 columns:
  452.  
  453. 2 COLUMNS:
  454. add `w50` to `<img />`
  455.  
  456. 3 COLUMNs:
  457. add `w33` to `<img />`
  458.  
  459. this also has an optional color scheme:
  460. `<div class="color-scheme">`
  461.  
  462. a row can have up to 5 color scheme elements. each element has 2 attributes:
  463. * `data-hex`
  464. * `data-hex-label`
  465.  
  466. `data-hex` is the hex code of the color you want to use:
  467. `<div class="color-scheme" data-hex="#000000">`
  468.  
  469. `data-hex-label` is the name of the color (optional):
  470. `<div class="color-scheme" data-hex="#000000" data-hex-label="Black">`
  471.  
  472. !IMPORTANT: leave `data-hex-label` empty if unused, but DO NOT remove the attribute entirely:
  473. `<div class="color scheme" data-hex="#000000" data-hex-label="">`
  474. if you want to hide both the hex code and the label, change the value of `data-display-hex` attribute on `color-scheme-wrap` to `hide`:
  475. `<div class="color-scheme-wrap" data-display-hex="hide">`
  476.  
  477. -->
  478. <!-- begin moodboard -->
  479. <div class="character-moodboard">
  480. <div class="character-moodboard-title cap bold font">Moodboard</div>
  481. <div class="character-moodboard-image-wrap">
  482. <img class="w33" src="https://via.placeholder.com/500x300.png?text=Any+Size+You+Want" />
  483. <img class="w33" src="https://via.placeholder.com/500x300.png?text=Any+Size+You+Want" />
  484. <img class="w33" src="https://via.placeholder.com/500x300.png?text=Any+Size+You+Want" />
  485.  
  486. <img class="w50" src="https://via.placeholder.com/500x500.png?text=Any+Size+You+Want" />
  487. <img class="w50" src="https://via.placeholder.com/500x500.png?text=Any+Size+You+Want" />
  488.  
  489. <img class="w33" src="https://via.placeholder.com/500x700.png?text=Any+Size+You+Want" />
  490. <img class="w33" src="https://via.placeholder.com/500x700.png?text=Any+Size+You+Want" />
  491. <img class="w33" src="https://via.placeholder.com/500x700.png?text=Any+Size+You+Want" />
  492. </div>
  493.  
  494. <!-- begin color scheme -->
  495. <div class="color-scheme-wrap" data-display-hex="display">
  496.  
  497. <div class="color-scheme" data-hex="#262729" data-hex-label=""></div>
  498. <div class="color-scheme" data-hex="#3c3d40" data-hex-label=""></div>
  499. <div class="color-scheme" data-hex="#4f5054" data-hex-label=""></div>
  500. <div class="color-scheme" data-hex="#727378" data-hex-label=""></div>
  501. <div class="color-scheme" data-hex="#999a9e" data-hex-label=""></div>
  502.  
  503. <!-- add or remove as necessary -->
  504.  
  505. </div>
  506. <!-- close color scheme -->
  507. </div>
  508. </section>
  509. <!-- close details -->
  510.  
  511. </div>
  512. </div>
  513. <!-- close character details -->
  514.  
  515. <!-- add or remove as necessary -->
  516. <div class="list-content" data-name="Ivan Petrov" data-label="пиши имя моё на кириллице">
  517. <div class="list-content-wrap">
  518.  
  519. <section class="image-wrap">
  520. <img src="https://via.placeholder.com/800x1250.png" />
  521.  
  522. <!-- a short summary of character traits goes here -->
  523. <div class="post-it stick-right">
  524. <div class="post-it-wrap">
  525. <li>Vodka Drunkenski</li>
  526. <li>Owns a dacha</li>
  527. <li>Swears both eloquently and effectively</li>
  528. </div>
  529. </div>
  530. </section>
  531.  
  532. <section class="details">
  533.  
  534. <div class="character-moodboard">
  535. <div class="color-scheme-wrap" data-display-hex="hide">
  536. <div class="color-scheme" data-hex="#262729" data-hex-label=""></div>
  537. <div class="color-scheme" data-hex="#3c3d40" data-hex-label=""></div>
  538. <div class="color-scheme" data-hex="#4f5054" data-hex-label=""></div>
  539. <div class="color-scheme" data-hex="#727378" data-hex-label=""></div>
  540. <div class="color-scheme" data-hex="#999a9e" data-hex-label=""></div>
  541. </div>
  542. </div>
  543. <div class="character-data">
  544. <li><span>Name</span> Петров, Иван</li>
  545. <li><span>Age</span> 33</li>
  546. <li><span>Birthdate</span> January 01</li>
  547. </div>
  548. <div class="character-quote it">Nothing too complicated Sunday funday rock climbing Myers-Briggs adventures</div>
  549.  
  550. <div class="character-trait cap">
  551. <div class="character-tag-title font bold">Traits</div>
  552. <span>Short-tempered</span>
  553. <span>But tough as nails</span>
  554. <span>Also surprisingly cultured</span>
  555. <span>Because the world runs on stereotypes</span>
  556. <span>Loves his mama</span>
  557. <span>Loves his babulya even more</span>
  558. </div>
  559. <div class="character-tag cap">
  560. <div class="character-tag-title font bold">Tags</div>
  561. <a href="/tagged/">Character Tag</a>
  562. <a href="/tagged/">Writings</a>
  563. <a href="/tagged/">Moodboards</a>
  564. <a href="/tagged/">Analyses</a>
  565. <a href="/tagged/">Fanworks</a>
  566. <a href="/tagged/">Supplementary Materials</a>
  567. <a href="/tagged/">Shit character says</a>
  568. </div>
  569.  
  570. <!-- begin character bio -->
  571. <div class="character-bio">
  572. <!-- title -->
  573. <div class="character-bio-title font bold">Biography</div>
  574. <div class="bio-content">
  575. <p>Using my farmshare On The Road dubstep I know I listed more than 6 things. My cats I don't take myself too seriously food Ethiopian sleeping late, outdoor activities recently moved back stepping outside your comfort zone I'm looking for I value art. Coffee going to shows video games I'm looking for fixing up my house happy hour.</p>
  576.  
  577. <p>Arrested Development outdoorsy I'm really good at knowing the difference between their/there/they're. Thinking about trying yoga as friends sleeping late I don't really like talking about myself honest and direct, Kurosawa chilling at a bar with friends you should message me working at a coffee shop whiskey. I'm pretty laid-back making people laugh video games self-deprecating humor life is short tattoos.</p>
  578. </div>
  579. </div>
  580. <!-- close character bio -->
  581.  
  582. <!-- begin related characters -->
  583. <div class="related-character-wrap">
  584. <!-- section title -->
  585. <div class="related-character-title font bold">Related Characters</div>
  586.  
  587. <!-- begin related character item -->
  588. <div class="related-character">
  589. <img src="https://via.placeholder.com/50x50.png">
  590. <div class="related-character-name">Character Name</div>
  591. <div class="related-character-label cap font">Optional Label</div>
  592. </div>
  593. <div class="related-character">
  594. <img src="https://via.placeholder.com/50x50.png">
  595. <div class="related-character-name">Character Name</div>
  596. <div class="related-character-label cap font">Optional Label</div>
  597. </div>
  598. <div class="related-character">
  599. <img src="https://via.placeholder.com/50x50.png">
  600. <div class="related-character-name">Character Name</div>
  601. <div class="related-character-label cap font">Optional Label</div>
  602. </div>
  603. <div class="related-character">
  604. <img src="https://via.placeholder.com/50x50.png">
  605. <div class="related-character-name">Character Name</div>
  606. <div class="related-character-label cap font">Optional Label</div>
  607. </div>
  608. </div>
  609. <!-- close related characters -->
  610. </section>
  611.  
  612. </div>
  613. </div>
  614.  
  615. <div class="list-content" data-name="Jan Jansen" data-label="Says &ldquo;gezellig&rdquo; all the time">
  616. <section class="image-wrap">
  617. <img src="https://via.placeholder.com/800x1250.png" />
  618. </section>
  619. <section class="details"></section>
  620. </div>
  621.  
  622. <div class="list-content" data-name="John Doe" data-label="I'm just a placeholder person">
  623. <section class="image-wrap">
  624. <img src="https://via.placeholder.com/800x1250.png" />
  625. </section>
  626. <section class="details"></section>
  627. </div>
  628.  
  629. <div class="list-content" data-name="John Doe II" data-label="You can have as many characters as you want (though not advisable)">
  630. <section class="image-wrap">
  631. <img src="https://via.placeholder.com/800x1250.png" />
  632. </section>
  633. <section class="details"></section>
  634. </div>
  635. </article>
  636.  
  637. <!--
  638.  
  639. CHARACTER LIST
  640. this list will automatically be generated. you don't have to edit anything here.
  641.  
  642. -->
  643. <article class="right"></article>
  644. </section>
  645. <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.10.2/js/OverlayScrollbars.min.js"></script>
  646. <script src="https://dl.dropbox.com/s/3riaeu7dwg5ah2v/djakarta-scripts.js"></script>
  647.  
  648.  
  649. <!--
  650. ===============================================
  651.  
  652.  
  653. Credits
  654. -------
  655.  
  656. Scripts:
  657.  
  658. "Overlay Scrollbars"
  659. by Rene Haas
  660. https://kingsora.github.io/OverlayScrollbars/
  661.  
  662. Others:
  663.  
  664. "Placeholder Images"
  665. https://placeholder.com
  666.  
  667.  
  668. ===============================================
  669. -->
  670.  
  671.  
  672. </body>
  673. </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!