API tools faq
paste
fatalst

character page 2 (+pictures)

fatalst
May 18th, 2016
376
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  
  5. <!-- ***** FATALST'S CHARACTER PAGE 2 (WITH 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: 160px;
  144. overflow: scroll;
  145. font-size: 11px;
  146. background-color: #ffffff; /*BIO BACKGROUND COLOR*/
  147. padding: 5px;
  148. line-height: 12px;
  149. }
  150.  
  151. .pic{
  152. display: inline-block;
  153. float: center;
  154. margin-right: 25px;
  155. }
  156.  
  157. img{
  158. width: 300px;
  159. height: 180px;
  160. border-radius: 15px;
  161. }
  162.  
  163. /*CHARACTER NAME*/
  164. h1{
  165. font-size: 16px;
  166. text-align: center;
  167. margin-bottom: 5px;
  168. letter-spacing: 2px;
  169. font-style: oblique;
  170. font-weight: normal;
  171. padding-bottom: 5px;
  172. border-bottom: #000000 1px solid;
  173. }
  174.  
  175. /*DETAIL HEADER*/
  176. h2{
  177. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/LOWERCASE, DELETE THIS LINE*/
  178. text-decoration: none;
  179. font-style: none;
  180. font-size: 11px;
  181. text-align: center;
  182. padding: 1px;
  183. margin-top: 0;
  184. margin-bottom: 0;
  185. margin-right: 5px;
  186. padding-right: 5px;
  187. font-weight: normal;
  188. }
  189.  
  190. /*SECTION HEADER*/
  191. h3{
  192. text-decoration: underline;
  193. font-size: 14px;
  194. margin-top: 10px;
  195. margin-bottom: 10px;
  196. text-align: center;
  197. font-weight: normal;
  198. color: #000000;
  199. letter-spacing: 2px;
  200. font-style: oblique;
  201. padding: 5px;
  202. }
  203.  
  204. /*CHARACTER LINK*/
  205. .tag{
  206. text-transform: lowercase; /*IF YOU WANT CAPITALIZATION/UPPERCASE, DELETE THIS LINE*/
  207. text-decoration: none;
  208. font-style: none;
  209. font-size: 10px;
  210. margin-top: 0;
  211. margin-bottom: 0;
  212. font-weight: normal;
  213. letter-spacing: 1.5px;
  214. }
  215.  
  216. /*PARAGRAPH STYLING*/
  217. p{
  218. font-size: 10px;
  219. padding: 1px;
  220. margin-top: 3px;
  221. margin-bottom: 3px;
  222. }
  223.  
  224. /*BOLD STYLING*/
  225. b{
  226. color: #99ff99;
  227. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/LOWERCASE, DELETE THIS LINE*/
  228. }
  229.  
  230. /*QUOTE STYLING*/
  231. .quote{
  232. text-align: center;
  233. letter-spacing: 1px;
  234. font-size: 11px;
  235. font-style: oblique;
  236. text-transform: lowercase;
  237. }
  238.  
  239. /*BUTTON STYLING*/
  240. #buttons{
  241. margin-top: 10px;
  242. text-align: center;
  243. }
  244.  
  245. .btn{
  246. vertical-align: block;
  247. text-align: center;
  248. float: center;
  249. background-color: #ffffff;
  250. border: none;
  251. margin: 2px;
  252. text-decoration: none;
  253. color: #000000;
  254. width: 100px;
  255. font-style: oblique;
  256. }
  257.  
  258. .active{
  259. background-color: #ffffff;
  260. color: #99ff99;
  261. text-decoration: underline;
  262. font-weight: bold;
  263. }
  264. /*BUTTON STYLING ENDS*/
  265.  
  266. #punk{
  267. font-size: 8px;
  268. width: 25px;
  269. height: 25px;
  270. top: 97%;
  271. left: 1%;
  272. position: fixed;
  273. }
  274.  
  275. </style>
  276.  
  277. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  278.  
  279. <script>
  280.  
  281. $( document ).ready(function() {
  282.  
  283. var $items = $('.tab');
  284. var $btns = $('.btn').click(function() {
  285. if (this.id == 'all') {
  286. $items.show();
  287. } else {
  288. var $el = $('.' + this.id).show();
  289. $items.not($el).hide();
  290. }
  291. $btns.removeClass('active');
  292. $(this).addClass('active');
  293. });
  294.  
  295. });
  296.  
  297. </script>
  298. </head>
  299.  
  300. <body>
  301. <div id="header">
  302. <!-- TITLE -->
  303. <div id="title">characters</div>
  304.  
  305. <!-- CUSTOM LINKS, UNLIMITED NUMBER -->
  306. <div id="links">
  307. <a href="/code">other codes</a> . <a href="http://pastebin.com/S78r2RN7">pastebin</a> . <a href="/">link</a>
  308. </div>
  309.  
  310. <div id="buttons">
  311. <!--
  312. ADDING NEW/MODIFYING BUTTONS:
  313. copy and paste <button class="btn" id="">[insert title here]</button> and insert the id name (with no spaces)
  314. and the category title to replace "[insert title here]"
  315. -->
  316. <button class="active btn" id="tab">show all</button>
  317. <button class="btn" id="pc">player characters</button>
  318. <button class="btn" id="me">mass effect</button>
  319. <button class="btn" id="oc">ocs</button>
  320. <button class="btn" id="but">button</button>
  321. </div>
  322. </div>
  323.  
  324. <div id="content">
  325.  
  326. <!-- IMG SIZE IS 300 x 180 -->
  327.  
  328. <!--
  329. TO USE THE BUTTONS:
  330. when filling out character boxes, where it says <div class="tab BUTTON_ID">, replace BUTTON_ID with the
  331. id tag you wrote for the button at the top. (EX. <div class="tab pc"> for a player character)
  332. -->
  333. <div class="tab BUTTON_ID">
  334. <div class="desc">
  335. <div class="name">
  336. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  337. <h2>mass effect</h2>
  338. <h2>status: alive</h2>
  339. </div>
  340. <div class="pic">
  341. <img src="http://i.imgur.com/ahcb58d.jpg"/>
  342. </div>
  343. <div class="bio">
  344. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  345.  
  346. <h3>HEADER TITLE</h3>
  347.  
  348. NOT USING ANY TAG
  349.  
  350. <p>USING A PARAGRAPH TAG</p>
  351.  
  352. <p>USING A PARAGRAPH TAG</p>
  353. <b>USING A BOLD TAG</b>
  354.  
  355. <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>
  356.  
  357. </div>
  358. </div>
  359. </div>
  360.  
  361. <div class="tab BUTTON_ID">
  362. <div class="desc">
  363. <div class="name">
  364. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  365. <h2>mass effect</h2>
  366. <h2>status: alive</h2>
  367. </div>
  368. <div class="pic">
  369. <img src="http://i.imgur.com/ahcb58d.jpg"/>
  370. </div>
  371. <div class="bio">
  372. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  373.  
  374. <h3>HEADER TITLE</h3>
  375.  
  376. NOT USING ANY TAG
  377.  
  378. <p>USING A PARAGRAPH TAG</p>
  379.  
  380. <p>USING A PARAGRAPH TAG</p>
  381. <b>USING A BOLD TAG</b>
  382.  
  383. <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>
  384.  
  385. </div>
  386. </div>
  387. </div>
  388.  
  389. <div class="tab BUTTON_ID">
  390. <div class="desc">
  391. <div class="name">
  392. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  393. <h2>mass effect</h2>
  394. <h2>status: alive</h2>
  395. </div>
  396. <div class="pic">
  397. <img src="http://i.imgur.com/ahcb58d.jpg"/>
  398. </div>
  399. <div class="bio">
  400. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  401.  
  402. <h3>HEADER TITLE</h3>
  403.  
  404. NOT USING ANY TAG
  405.  
  406. <p>USING A PARAGRAPH TAG</p>
  407.  
  408. <p>USING A PARAGRAPH TAG</p>
  409. <b>USING A BOLD TAG</b>
  410.  
  411. <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>
  412.  
  413. </div>
  414. </div>
  415. </div>
  416.  
  417. <div class="tab BUTTON_ID">
  418. <div class="desc">
  419. <div class="name">
  420. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  421. <h2>mass effect</h2>
  422. <h2>status: alive</h2>
  423. </div>
  424. <div class="pic">
  425. <img src="http://i.imgur.com/ahcb58d.jpg"/>
  426. </div>
  427. <div class="bio">
  428. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  429.  
  430. <h3>HEADER TITLE</h3>
  431.  
  432. NOT USING ANY TAG
  433.  
  434. <p>USING A PARAGRAPH TAG</p>
  435.  
  436. <p>USING A PARAGRAPH TAG</p>
  437. <b>USING A BOLD TAG</b>
  438.  
  439. <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>
  440.  
  441. </div>
  442. </div>
  443. </div>
  444.  
  445. <div class="tab BUTTON_ID">
  446. <div class="desc">
  447. <div class="name">
  448. <h1>CHARACTER NAME <span class="tag"><a href="/tagged/">tag</a></span></h1>
  449. <h2>mass effect</h2>
  450. <h2>status: alive</h2>
  451. </div>
  452. <div class="pic">
  453. <img src="http://i.imgur.com/ahcb58d.jpg"/>
  454. </div>
  455. <div class="bio">
  456. <span class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  457.  
  458. <h3>HEADER TITLE</h3>
  459.  
  460. NOT USING ANY TAG
  461.  
  462. <p>USING A PARAGRAPH TAG</p>
  463.  
  464. <p>USING A PARAGRAPH TAG</p>
  465. <b>USING A BOLD TAG</b>
  466.  
  467. <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>
  468.  
  469. </div>
  470. </div>
  471. </div>
  472.  
  473.  
  474. <!-- please don't touch this!! -->
  475. <div id="punk">
  476. <a href="https://www.fatalst.tumblr.com">&copy;</a>
  477. </div>
  478. </div>
  479.  
  480. </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!