API tools faq
paste
phntms

PAGE #2 :: JOLT

phntms
Jul 27th, 2016
2,649
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.58 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--PAGE #02 JOLT by @nonspace.
  5. Don't steal.
  6. Don't claim as your own.
  7. Don't use as base.
  8. Editing for personal use is fine!
  9. -->
  10.  
  11. <title>{Title}</title>
  12.  
  13. <link rel="icon" type="image/png" href="{Favicon}">
  14.  
  15. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  16.  
  17. <style type="text/css">
  18.  
  19. /*GENERAL BODY STYLES*/
  20.  
  21. body {
  22. background: url('http://i.imgur.com/bfdvvIw.png');
  23. }
  24.  
  25. b {
  26. color: #000;
  27. text-transform: uppercase;
  28. font-size: 9px;
  29. }
  30.  
  31. a {
  32. text-decoration: none;
  33. color: #f0c600;
  34. letter-spacing: 3px;
  35. font-family: arial;
  36. }
  37.  
  38. a:hover {
  39. color: #ffd200;
  40. e-o-transition:.5s;
  41. -ms-transition:.5s;
  42. -moz-transition:.5s;
  43. -webkit-transition:.5s;
  44. transition:.5s;
  45. }
  46.  
  47. h2, h3 {
  48. font-size: 9px;
  49. text-transform: uppercase;
  50. font-weight: bold;
  51. color: #000;
  52. }
  53.  
  54. #container {
  55. font-family: arial;
  56. }
  57.  
  58. /*HEADER*/
  59.  
  60. .h0 {
  61. color: #f8f8f8;
  62. position: relative;
  63. text-transform: uppercase;
  64. text-align: center;
  65. margin: -10px auto 0px;
  66. font-size: 15px;
  67. font-weight: normal;
  68. background: #000;
  69. width: 600px;
  70. padding: 35px 0px 25px 0px;
  71. letter-spacing: 10px;
  72. }
  73.  
  74. .h0 a {
  75. color: #fff;
  76. font-size: 11px;
  77. padding: 5px;
  78. }
  79.  
  80. .h0 a:hover {
  81. color: #ffd200;
  82. e-o-transition:.5s;
  83. -ms-transition:.5s;
  84. -moz-transition:.5s;
  85. -webkit-transition:.5s;
  86. transition:.5s;
  87. }
  88.  
  89. .desc {
  90. font-size: 9px;
  91. margin: 20px 50px 0px;
  92. padding: 0px 0px;
  93. letter-spacing: 0px;
  94. text-transform: uppercase;
  95. font-family: arial;
  96. line-height: 15px;
  97. }
  98.  
  99. .desc b {
  100. color: #ffd200;
  101. font-size: 11px;
  102. font-weight: bold;
  103. letter-spacing: 4px;
  104. }
  105.  
  106. /*CHARACTER ENTRIES*/
  107.  
  108. article {
  109. background: #fff;
  110. position: relative;
  111. width: 600px;
  112. margin: 0 auto;
  113. font-size: 11px;
  114. text-align: justify;
  115. line-height: 14px;
  116. padding: 10px 0px 20px 0px;
  117. }
  118.  
  119. .c1 {
  120. padding: 0px 50px;
  121. width: 500px;
  122. margin: 20px 0px 10px 0px;
  123. }
  124.  
  125. h1 /*CHARACTER NAME*/{
  126. letter-spacing: 2px;
  127. font-size: 10px;
  128. font-weight: normal;
  129. color: #000;
  130. padding: 7px 0px;
  131. text-transform: uppercase;
  132. background-color: #ffd200;
  133. width: 500px;
  134. text-align: center;
  135. margin: 0px;
  136. }
  137.  
  138. h2 /*CHARACTER HEADLINE LEFT SIDE*/{
  139. text-align: left;
  140. }
  141.  
  142. h3 /*CHARACTER HEADLINE RIGHT SIDE*/{
  143. text-align: right;
  144. }
  145.  
  146. /*CHARACTER LINKS*/
  147.  
  148. .menu {
  149. background: #f8f8f8;
  150. width: 100%;
  151. padding: 5px 0px 5px 0px;
  152. }
  153.  
  154. .menu a {
  155. color: #000;
  156. padding: 1px 4px 1px 4px;
  157. font-size: 11px;
  158. text-align: center;
  159. }
  160.  
  161. .menu a:hover {
  162. color: #ffd200;
  163. }
  164.  
  165. /*CHARACTER IMAGES*/
  166.  
  167. .iconleft {
  168. width:100px;
  169. display: inline-block;
  170. float: left;
  171. margin: 10px 0px 0px 0px;
  172. }
  173.  
  174. .iconleft img {
  175. width: 100px;
  176. }
  177.  
  178. .iconright {
  179. width:100px;
  180. display: inline-block;
  181. margin: 10px 0px 0px -0px;
  182. float: right;
  183. }
  184.  
  185. .iconright img {
  186. width: 100px;
  187. }
  188.  
  189. /*CHARACTER TEXT*/
  190.  
  191. .textright, .textleft {
  192. height: 100px;
  193. overflow-y: hidden;
  194. overflow-x: hidden;
  195. width: 380px;
  196. }
  197.  
  198. .textright:hover, .textleft:hover {
  199. overflow-y: scroll;
  200. }
  201.  
  202. .textright {
  203. margin: 10px 5px 0px 110px;
  204. padding-right: 10px;
  205. }
  206.  
  207. .textleft {
  208. margin: 10px 5px 0px 5px;
  209. padding-right: 7px;
  210. }
  211.  
  212. /*SCROLLBAR STYLES*/
  213.  
  214. article ::-webkit-scrollbar {
  215. width: 5px;
  216. }
  217.  
  218. article ::-webkit-scrollbar-track {
  219. color: #f8f8f8;
  220. opacity: 0.5;
  221. }
  222. article ::-webkit-scrollbar-thumb {
  223. background: #f8f8f8;
  224. }
  225.  
  226. /*FOOTER*/
  227.  
  228. footer {
  229. background: #000;
  230. width: 600px;
  231. text-align: center;
  232. margin: 0px auto;
  233. padding: 15px 0;
  234. }
  235.  
  236. footer a {
  237. color: #f8f8f8;
  238. letter-spacing: 5px;
  239. padding:5px 10px;
  240. text-transform: uppercase;
  241. text-align: center;
  242. font-size: 8px;
  243. }
  244.  
  245. </style>
  246. <body>
  247.  
  248. <div id="container">
  249.  
  250. <div class="h0">
  251.  
  252. <!--YOUR HEADLINE-!-->
  253. Character List
  254.  
  255. <div class="desc">
  256.  
  257. <!--YOUR DESCRPTION-!-->
  258. Optional Description. <b>bold text</b> Lorem ipsum dolor sit amet,
  259. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  260.  
  261. <!--NAVIGATION-->
  262. <p /><a href="/" title="RETURN"><i class="fa fa-reply" aria-hidden="true"></i></a>
  263. <a href="/ask"><i class="fa fa-envelope" aria-hidden="true"></i></a>
  264.  
  265. </div>
  266.  
  267. </div>
  268.  
  269. <article>
  270.  
  271. <!--CHARACTER ENTRIES BEGIN HERE-!-->
  272.  
  273. <!--LEFT!-->
  274.  
  275. <div class="c1">
  276.  
  277. <h1>LAST, FIRST. OCCUPATION</h1>
  278.  
  279.  
  280. <!--CHARACTER LINKS-!-->
  281. <center>
  282. <div class="menu">
  283. <a href="/tagged/TAG" title="#NAME"><i class="fa fa-user" aria-hidden="true"></i></a>
  284. <a href="/tagged/INFO" title="#INFO"><i class="fa fa-book" aria-hidden="true"></i></a>
  285. <a href="/tagged/HEADCANONS" title="#HEADCANONS"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></a>
  286. <a href="/tagged/PICTURES" title="#PICTURES"><i class="fa fa-camera" aria-hidden="true"></i></a>
  287. <a href="/tagged/WRITING" title="#WRITING"><i class="fa fa-pencil" aria-hidden="true"></i></a>
  288. </div>
  289. </center>
  290.  
  291. <!--IMAGE AND TEXT-!-->
  292. <div class="iconleft"><img src="http://placehold.it/100x100"></div>
  293. <div class="textright">
  294. <h2><span class="fa fa-terminal" aria-hidden="true"></span>
  295. AGE. TITLE. ROMANTIC/SEXUAL ORIENTATION.</h2>
  296. Lorem ipsum dolor sit amet, consectetur <b>bold text</b> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <a href="">link</a> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  297. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  298.  
  299. </div>
  300. </div>
  301.  
  302. <!--RIGHT-!-->
  303.  
  304. <div class="c1">
  305.  
  306. <h1>LAST, FIRST. OCCUPATION</h1>
  307.  
  308. <!--CHARACTER LINKS-!-->
  309. <center>
  310. <div class="menu">
  311. <a href="/tagged/TAG" title="#NAME"><i class="fa fa-user" aria-hidden="true"></i></a>
  312. <a href="/tagged/INFO" title="#INFO"><i class="fa fa-book" aria-hidden="true"></i></a>
  313. <a href="/tagged/HEADCANONS" title="#HEADCANONS"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></a>
  314. <a href="/tagged/PICTURES" title="#PICTURES"><i class="fa fa-camera" aria-hidden="true"></i></a>
  315. <a href="/tagged/WRITING" title="#WRITING"><i class="fa fa-pencil" aria-hidden="true"></i></a>
  316. </div>
  317. </center>
  318.  
  319. <!--IMAGE AND TEXT-!-->
  320. <div class="iconright"><img src="http://placehold.it/100x100"></div>
  321. <div class="textleft">
  322. <h3><span class="fa fa-terminal" aria-hidden="true"></span>
  323. OR ANYTHING ELSE YOU WANT TO PUT HERE LIKE SOME HEADLINE.</h3>
  324. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  325. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  326.  
  327. </div>
  328. </div>
  329.  
  330. <!--LEFT-!-->
  331.  
  332. <div class="c1">
  333.  
  334. <h1>LAST, FIRST. OCCUPATION</h1>
  335.  
  336. <!--CHARACTER LINKS-!-->
  337. <center>
  338. <div class="menu">
  339. <a href="/tagged/TAG" title="#NAME"><i class="fa fa-user" aria-hidden="true"></i></a>
  340. <a href="/tagged/INFO" title="#INFO"><i class="fa fa-book" aria-hidden="true"></i></a>
  341. <a href="/tagged/HEADCANONS" title="#HEADCANONS"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></a>
  342. <a href="/tagged/PICTURES" title="#PICTURES"><i class="fa fa-camera" aria-hidden="true"></i></a>
  343. <a href="/tagged/WRITING" title="#WRITING"><i class="fa fa-pencil" aria-hidden="true"></i></a>
  344. </div>
  345. </center>
  346.  
  347. <!--IMAGE AND TEXT-!-->
  348. <div class="iconleft"><img src="http://placehold.it/100x100"></div>
  349. <div class="textright">
  350. <h2><span class="fa fa-terminal" aria-hidden="true"></span>
  351. YOU CAN ALSO TAKE AWAY THE TERMINAL THING IF YOU WANT.</h2>
  352. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  353. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  354.  
  355. </div>
  356. </div>
  357.  
  358. <!--RIGHT-!-->
  359.  
  360. <div class="c1">
  361.  
  362. <h1>LAST, FIRST. OCCUPATION</h1>
  363.  
  364. <!--CHARACTER LINKS-!-->
  365. <center>
  366. <div class="menu">
  367. <a href="/tagged/TAG" title="#NAME"><i class="fa fa-user" aria-hidden="true"></i></a>
  368. <a href="/tagged/INFO" title="#INFO"><i class="fa fa-book" aria-hidden="true"></i></a>
  369. <a href="/tagged/HEADCANONS" title="#HEADCANONS"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></a>
  370. <a href="/tagged/PICTURES" title="#PICTURES"><i class="fa fa-camera" aria-hidden="true"></i></a>
  371. <a href="/tagged/WRITING" title="#WRITING"><i class="fa fa-pencil" aria-hidden="true"></i></a>
  372. </div>
  373. </center>
  374.  
  375. <!--IMAGE AND TEXT-!-->
  376. <div class="iconright"><img src="http://placehold.it/100x100"></div>
  377. <div class="textleft">
  378. <h3><span class="fa fa-terminal" aria-hidden="true"></span>
  379. More headline</h3>
  380. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  381. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  382.  
  383. </div>
  384. </div>
  385.  
  386. <!--LEFT-!-->
  387.  
  388. <div class="c1">
  389.  
  390. <h1>LAST, FIRST. OCCUPATION</h1>
  391.  
  392. <!--CHARACTER LINKS-!-->
  393. <center>
  394. <div class="menu">
  395. <a href="/tagged/TAG" title="#NAME"><i class="fa fa-user" aria-hidden="true"></i></a>
  396. <a href="/tagged/INFO" title="#INFO"><i class="fa fa-book" aria-hidden="true"></i></a>
  397. <a href="/tagged/HEADCANONS" title="#HEADCANONS"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></a>
  398. <a href="/tagged/PICTURES" title="#PICTURES"><i class="fa fa-camera" aria-hidden="true"></i></a>
  399. <a href="/tagged/WRITING" title="#WRITING"><i class="fa fa-pencil" aria-hidden="true"></i></a>
  400. </div>
  401. </center>
  402.  
  403. <!--IMAGE AND TEXT-!-->
  404. <div class="iconleft"><img src="http://placehold.it/100x100"></div>
  405. <div class="textright">
  406. <h2><span class="fa fa-terminal" aria-hidden="true"></span>
  407. YOU CAN ALSO TAKE AWAY THE TERMINAL THING IF YOU WANT.</h2>
  408. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  409. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  410.  
  411. </div>
  412. </div>
  413.  
  414. <!--END OF CHARACTER ENTRIES-!-->
  415.  
  416. </div>
  417.  
  418. </article>
  419.  
  420. <!--FOOTER-!-->
  421.  
  422. <footer><a href="http://nonspace.tumblr.com/tagged/nnspc codes"><i class="fa fa-copyright" aria-hidden="true"></i> nonspace</a></footer>
  423.  
  424.  
  425. </div>
  426. </body>
  427. </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!