API tools faq
paste
Advertisement
fatalst

character page 2 (no pictures)

fatalst
May 18th, 2016
362
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  
  5. <!-- ***** FATALST'S CHARACTER PAGE 2 (NO PICTURES) ***** -->
  6. <!-- ***** PLEASE DO NOT DELETE CREDIT ***** -->
  7.  
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <title>{TITLE}</title>
  10. <link rel="alternate" type="application/rss+xml" href="{rss}">
  11.  
  12. <style type="text/css">
  13.  
  14. body{
  15. background-color: #ffffff; /*BACKGROUND*/
  16. color: #000000;
  17. font-family: Helvetica, sans-serif;
  18. text-align: center;
  19. }
  20.  
  21. ::-webkit-scrollbar {
  22. width: 2px;
  23. height: 2px;
  24. }
  25.  
  26. ::-webkit-scrollbar-button {
  27. width: 0px;
  28. height: 0px;
  29. }
  30.  
  31. ::-webkit-scrollbar-thumb {
  32. background: #99ff99;
  33. border: 0px none #ffffff;
  34. border-radius: 0px;
  35. }
  36.  
  37. ::-webkit-scrollbar-thumb:hover {
  38. background: #99ff99;
  39. }
  40.  
  41. ::-webkit-scrollbar-thumb:active {
  42. background: #ffffff;
  43. }
  44.  
  45. ::-webkit-scrollbar-track {
  46. background: #ffffff;
  47. border: 0px none #ffffff;
  48. border-radius: 0px;
  49. }
  50.  
  51. ::-webkit-scrollbar-track:hover {
  52. background: #ffffff;
  53. }
  54.  
  55. ::-webkit-scrollbar-track:active {
  56. background: #ffffff;
  57. }
  58.  
  59. ::-webkit-scrollbar-corner {
  60. background: transparent;
  61. }
  62.  
  63. /*PAGE HEADER*/
  64. #header{
  65. color: #000000;
  66. left: 10%;
  67. top: 15%;
  68. margin-bottom: 10px;
  69. margin-left: 10px;
  70. height: auto;
  71. width: 150px;
  72. position: fixed;
  73. padding: 10px;
  74. border: #000000 1px solid;
  75. border-radius: 15px;
  76. }
  77.  
  78. #content{
  79. padding-top: 10px;
  80. margin-left: 30%;
  81. width: auto;
  82. }
  83.  
  84. /*PAGE TITLE*/
  85. #title{
  86. font-size: 20px;
  87. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/LOWERCASE, DELETE THIS LINE*/
  88. text-decoration: none;
  89. font-style: oblique;
  90. text-align: center;
  91. padding-bottom: 5px;
  92. }
  93.  
  94. /*PAGE LINKS*/
  95. #links{
  96. font-size: 12px;
  97. text-transform: none;
  98. text-decoration: none;
  99. font-style: oblique;
  100. text-align: center;
  101. margin-top: 5px;
  102. }
  103.  
  104. a:link, a:visited{
  105. text-decoration: none;
  106. font-style: none;
  107. color: #99ff99; /*LINK COLOR*/
  108. }
  109.  
  110. a:hover, a:active{
  111. color: #33ff33; /*LINK HOVER COLOR*/
  112. text-decoration: underline;
  113. }
  114.  
  115. /*CHARACTER BOXES*/
  116. .tab{
  117. width: 350px;
  118. height: 450px;
  119. margin-top: 60px;
  120. margin-right: 60px;
  121. display: inline-block;
  122. vertical-align: top;
  123. border: #000000 solid 1px;
  124. padding: 10px;
  125. background-color: #ffffff; /*BOX BACKGROUND COLOR*/
  126. border-radius: 15px;
  127. }
  128.  
  129. .desc{
  130. font-size: 10px;
  131. height: auto;
  132. display: inline-block;
  133. width: 300px;
  134. float: center;
  135. }
  136.  
  137. .name{
  138. margin-bottom: 5px;
  139. }
  140.  
  141. .bio{
  142. margin-top: 10px;
  143. height: 340px;
  144. overflow: scroll;
  145. font-size: 11px;
  146. background-color: #ffffff; /*BIO BACKGROUND COLOR*/
  147. padding: 5px;
  148. line-height: 12px;
  149. }
  150.  
  151. /*CHARACTER NAME*/
  152. h1{
  153. font-size: 16px;
  154. text-align: center;
  155. margin-bottom: 5px;
  156. letter-spacing: 2px;
  157. font-style: oblique;
  158. font-weight: normal;
  159. padding-bottom: 5px;
  160. border-bottom: #000000 1px solid;
  161. }
  162.  
  163. /*DETAIL HEADER*/
  164. h2{
  165. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/LOWERCASE, DELETE THIS LINE*/
  166. text-decoration: none;
  167. font-style: none;
  168. font-size: 11px;
  169. text-align: center;
  170. padding: 1px;
  171. margin-top: 0;
  172. margin-bottom: 0;
  173. margin-right: 5px;
  174. padding-right: 5px;
  175. font-weight: normal;
  176. }
  177.  
  178. /*SECTION HEADER*/
  179. h3{
  180. text-decoration: underline;
  181. font-size: 14px;
  182. margin-top: 10px;
  183. margin-bottom: 10px;
  184. text-align: center;
  185. font-weight: normal;
  186. color: #000000;
  187. letter-spacing: 2px;
  188. font-style: oblique;
  189. padding: 5px;
  190. }
  191.  
  192. /*CHARACTER LINK*/
  193. .tag{
  194. text-transform: lowercase; /*IF YOU WANT CAPITALIZATION/UPPERCASE, DELETE THIS LINE*/
  195. text-decoration: none;
  196. font-style: none;
  197. font-size: 10px;
  198. margin-top: 0;
  199. margin-bottom: 0;
  200. font-weight: normal;
  201. letter-spacing: 1.5px;
  202. }
  203.  
  204. /*PARAGRAPH STYLING*/
  205. p{
  206. font-size: 10px;
  207. padding: 1px;
  208. margin-top: 3px;
  209. margin-bottom: 3px;
  210. }
  211.  
  212. /*BOLD STYLING*/
  213. b{
  214. color: #99ff99;
  215. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/LOWERCASE, DELETE THIS LINE*/
  216. }
  217.  
  218. /*QUOTE STYLING*/
  219. .quote{
  220. text-align: center;
  221. letter-spacing: 1px;
  222. font-size: 11px;
  223. font-style: oblique;
  224. text-transform: lowercase;
  225. }
  226.  
  227. /*BUTTON STYLING*/
  228. #buttons{
  229. margin-top: 10px;
  230. text-align: center;
  231. }
  232.  
  233. .btn{
  234. vertical-align: block;
  235. text-align: center;
  236. float: center;
  237. background-color: #ffffff;
  238. border: none;
  239. margin: 2px;
  240. text-decoration: none;
  241. color: #000000;
  242. width: 100px;
  243. font-style: oblique;
  244. }
  245.  
  246. .active{
  247. background-color: #ffffff;
  248. color: #99ff99;
  249. text-decoration: underline;
  250. font-weight: bold;
  251. }
  252. /*BUTTON STYLING ENDS*/
  253.  
  254. #punk{
  255. font-size: 8px;
  256. width: 25px;
  257. height: 25px;
  258. top: 97%;
  259. left: 1%;
  260. position: fixed;
  261. }
  262.  
  263. </style>
  264.  
  265. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  266.  
  267. <script>
  268.  
  269. $( document ).ready(function() {
  270.  
  271. var $items = $('.tab');
  272. var $btns = $('.btn').click(function() {
  273. if (this.id == 'all') {
  274. $items.show();
  275. } else {
  276. var $el = $('.' + this.id).show();
  277. $items.not($el).hide();
  278. }
  279. $btns.removeClass('active');
  280. $(this).addClass('active');
  281. });
  282.  
  283. });
  284.  
  285. </script>
  286. </head>
  287.  
  288. <body>
  289. <div id="header">
  290. <!-- TITLE -->
  291. <div id="title">characters</div>
  292.  
  293. <!-- CUSTOM LINKS, UNLIMITED NUMBER -->
  294. <div id="links">
  295. <a href="/code">other codes</a> . <a href="http://pastebin.com/LwQMCD5y">pastebin</a> . <a href="/">link</a>
  296. </div>
  297.  
  298. <div id="buttons">
  299. <!--
  300. ADDING NEW/MODIFYING BUTTONS:
  301. copy and paste <button class="btn" id="">[insert title here]</button> and insert the id name (with no spaces)
  302. and the category title to replace "[insert title here]"
  303. -->
  304. <button class="active btn" id="tab">show all</button>
  305. <button class="btn" id="pc">player characters</button>
  306. <button class="btn" id="me">mass effect</button>
  307. <button class="btn" id="oc">ocs</button>
  308. <button class="btn" id="but">button</button>
  309. </div>
  310. </div>
  311.  
  312. <div id="content">
  313.  
  314. <!--
  315. TO USE THE BUTTONS:
  316. when filling out character boxes, where it says <div class="tab BUTTON_ID">, replace BUTTON_ID with the
  317. id tag you wrote for the button at the top. (EX. <div class="tab pc"> for a player character)
  318. -->
  319. <div class="tab BUTTON_ID">
  320. <div class="desc">
  321. <div class="name">
  322. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  323. <h2>mass effect</h2>
  324. <h2>status: alive</h2>
  325. </div>
  326. <div class="bio">
  327. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  328.  
  329. <h3>HEADER TITLE</h3>
  330.  
  331. NOT USING ANY TAG
  332.  
  333. <p>USING A PARAGRAPH TAG</p>
  334.  
  335. <p>USING A PARAGRAPH TAG</p>
  336. <b>USING A BOLD TAG</b>
  337.  
  338. <p>Sed molestie pretium nisi ac malesuada. Morbi pellentesque lobortis iaculis. Praesent lacinia leo vestibulum, tristique lacus feugiat, mollis quam. Donec vel velit at lacus aliquam ultrices eu a nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ac vestibulum augue. Quisque id imperdiet enim.</p>
  339.  
  340. <p>Quisque sed elementum eros, sit amet ultricies elit. Aenean porttitor augue ac diam ultrices, non placerat augue fermentum. Donec scelerisque, urna vel elementum aliquet, lacus ligula ullamcorper augue, tincidunt efficitur metus augue sed sem. Donec auctor dui varius erat euismod, non fermentum diam aliquam. Duis eu turpis at lacus auctor sodales quis id nisi. Aliquam mollis efficitur orci ac aliquam. Aenean pretium, turpis ut lobortis elementum, quam libero dignissim velit, eu posuere ligula velit vitae nulla. Aenean tincidunt dolor orci, nec maximus augue consectetur id.</p>
  341.  
  342. <p>Integer congue accumsan efficitur. Donec id ligula tincidunt, venenatis neque sed, laoreet sapien. Cras ut maximus velit. Mauris turpis tellus, maximus in elit ut, bibendum ornare enim. Suspendisse posuere pellentesque placerat. Etiam ut feugiat lacus, non fringilla quam. Suspendisse a tristique tortor, at consectetur erat. Sed sed odio consequat orci ornare vulputate pharetra id erat. Etiam sed justo sed risus semper suscipit. Sed gravida enim lorem, at luctus ipsum tristique vel. Etiam dui neque, vestibulum iaculis tellus id, accumsan mattis nisl. Donec a commodo urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur dignissim, erat eget faucibus sodales, nisl tellus luctus sem, at pellentesque elit arcu eu nisl. Integer dapibus volutpat felis.</p>
  343.  
  344. </div>
  345. </div>
  346. </div>
  347.  
  348. <div class="tab BUTTON_ID">
  349. <div class="desc">
  350. <div class="name">
  351. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  352. <h2>mass effect</h2>
  353. <h2>status: alive</h2>
  354. </div>
  355. <div class="bio">
  356. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  357.  
  358. <h3>HEADER TITLE</h3>
  359.  
  360. NOT USING ANY TAG
  361.  
  362. <p>USING A PARAGRAPH TAG</p>
  363.  
  364. <p>USING A PARAGRAPH TAG</p>
  365. <b>USING A BOLD TAG</b>
  366.  
  367. <p>Sed molestie pretium nisi ac malesuada. Morbi pellentesque lobortis iaculis. Praesent lacinia leo vestibulum, tristique lacus feugiat, mollis quam. Donec vel velit at lacus aliquam ultrices eu a nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ac vestibulum augue. Quisque id imperdiet enim.</p>
  368.  
  369. <p>Quisque sed elementum eros, sit amet ultricies elit. Aenean porttitor augue ac diam ultrices, non placerat augue fermentum. Donec scelerisque, urna vel elementum aliquet, lacus ligula ullamcorper augue, tincidunt efficitur metus augue sed sem. Donec auctor dui varius erat euismod, non fermentum diam aliquam. Duis eu turpis at lacus auctor sodales quis id nisi. Aliquam mollis efficitur orci ac aliquam. Aenean pretium, turpis ut lobortis elementum, quam libero dignissim velit, eu posuere ligula velit vitae nulla. Aenean tincidunt dolor orci, nec maximus augue consectetur id.</p>
  370.  
  371. <p>Integer congue accumsan efficitur. Donec id ligula tincidunt, venenatis neque sed, laoreet sapien. Cras ut maximus velit. Mauris turpis tellus, maximus in elit ut, bibendum ornare enim. Suspendisse posuere pellentesque placerat. Etiam ut feugiat lacus, non fringilla quam. Suspendisse a tristique tortor, at consectetur erat. Sed sed odio consequat orci ornare vulputate pharetra id erat. Etiam sed justo sed risus semper suscipit. Sed gravida enim lorem, at luctus ipsum tristique vel. Etiam dui neque, vestibulum iaculis tellus id, accumsan mattis nisl. Donec a commodo urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur dignissim, erat eget faucibus sodales, nisl tellus luctus sem, at pellentesque elit arcu eu nisl. Integer dapibus volutpat felis.</p>
  372.  
  373. </div>
  374. </div>
  375. </div>
  376.  
  377. <div class="tab BUTTON_ID">
  378. <div class="desc">
  379. <div class="name">
  380. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  381. <h2>mass effect</h2>
  382. <h2>status: alive</h2>
  383. </div>
  384. <div class="bio">
  385. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  386.  
  387. <h3>HEADER TITLE</h3>
  388.  
  389. NOT USING ANY TAG
  390.  
  391. <p>USING A PARAGRAPH TAG</p>
  392.  
  393. <p>USING A PARAGRAPH TAG</p>
  394. <b>USING A BOLD TAG</b>
  395.  
  396. <p>Sed molestie pretium nisi ac malesuada. Morbi pellentesque lobortis iaculis. Praesent lacinia leo vestibulum, tristique lacus feugiat, mollis quam. Donec vel velit at lacus aliquam ultrices eu a nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ac vestibulum augue. Quisque id imperdiet enim.</p>
  397.  
  398. <p>Quisque sed elementum eros, sit amet ultricies elit. Aenean porttitor augue ac diam ultrices, non placerat augue fermentum. Donec scelerisque, urna vel elementum aliquet, lacus ligula ullamcorper augue, tincidunt efficitur metus augue sed sem. Donec auctor dui varius erat euismod, non fermentum diam aliquam. Duis eu turpis at lacus auctor sodales quis id nisi. Aliquam mollis efficitur orci ac aliquam. Aenean pretium, turpis ut lobortis elementum, quam libero dignissim velit, eu posuere ligula velit vitae nulla. Aenean tincidunt dolor orci, nec maximus augue consectetur id.</p>
  399.  
  400. <p>Integer congue accumsan efficitur. Donec id ligula tincidunt, venenatis neque sed, laoreet sapien. Cras ut maximus velit. Mauris turpis tellus, maximus in elit ut, bibendum ornare enim. Suspendisse posuere pellentesque placerat. Etiam ut feugiat lacus, non fringilla quam. Suspendisse a tristique tortor, at consectetur erat. Sed sed odio consequat orci ornare vulputate pharetra id erat. Etiam sed justo sed risus semper suscipit. Sed gravida enim lorem, at luctus ipsum tristique vel. Etiam dui neque, vestibulum iaculis tellus id, accumsan mattis nisl. Donec a commodo urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur dignissim, erat eget faucibus sodales, nisl tellus luctus sem, at pellentesque elit arcu eu nisl. Integer dapibus volutpat felis.</p>
  401.  
  402. </div>
  403. </div>
  404. </div>
  405.  
  406. <div class="tab BUTTON_ID">
  407. <div class="desc">
  408. <div class="name">
  409. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  410. <h2>mass effect</h2>
  411. <h2>status: alive</h2>
  412. </div>
  413. <div class="bio">
  414. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  415.  
  416. <h3>HEADER TITLE</h3>
  417.  
  418. NOT USING ANY TAG
  419.  
  420. <p>USING A PARAGRAPH TAG</p>
  421.  
  422. <p>USING A PARAGRAPH TAG</p>
  423. <b>USING A BOLD TAG</b>
  424.  
  425. <p>Sed molestie pretium nisi ac malesuada. Morbi pellentesque lobortis iaculis. Praesent lacinia leo vestibulum, tristique lacus feugiat, mollis quam. Donec vel velit at lacus aliquam ultrices eu a nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ac vestibulum augue. Quisque id imperdiet enim.</p>
  426.  
  427. <p>Quisque sed elementum eros, sit amet ultricies elit. Aenean porttitor augue ac diam ultrices, non placerat augue fermentum. Donec scelerisque, urna vel elementum aliquet, lacus ligula ullamcorper augue, tincidunt efficitur metus augue sed sem. Donec auctor dui varius erat euismod, non fermentum diam aliquam. Duis eu turpis at lacus auctor sodales quis id nisi. Aliquam mollis efficitur orci ac aliquam. Aenean pretium, turpis ut lobortis elementum, quam libero dignissim velit, eu posuere ligula velit vitae nulla. Aenean tincidunt dolor orci, nec maximus augue consectetur id.</p>
  428.  
  429. <p>Integer congue accumsan efficitur. Donec id ligula tincidunt, venenatis neque sed, laoreet sapien. Cras ut maximus velit. Mauris turpis tellus, maximus in elit ut, bibendum ornare enim. Suspendisse posuere pellentesque placerat. Etiam ut feugiat lacus, non fringilla quam. Suspendisse a tristique tortor, at consectetur erat. Sed sed odio consequat orci ornare vulputate pharetra id erat. Etiam sed justo sed risus semper suscipit. Sed gravida enim lorem, at luctus ipsum tristique vel. Etiam dui neque, vestibulum iaculis tellus id, accumsan mattis nisl. Donec a commodo urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur dignissim, erat eget faucibus sodales, nisl tellus luctus sem, at pellentesque elit arcu eu nisl. Integer dapibus volutpat felis.</p>
  430.  
  431. </div>
  432. </div>
  433. </div>
  434.  
  435.  
  436. <!-- please don't touch this!! -->
  437. <div id="punk">
  438. <a href="https://www.fatalst.tumblr.com">&copy;</a>
  439. </div>
  440. </div>
  441.  
  442. </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!