API tools faq
paste
Advertisement
fatalst

character page 1

fatalst
May 18th, 2016
525
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- ***** FATALST'S CHARACTER PAGE ***** -->
  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: #000000; /*BACKGROUND*/
  16. color: white;
  17. font-family: Helvetica, sans-serif;
  18. }
  19.  
  20. ::-webkit-scrollbar {
  21. width: 2px;
  22. height: 2px;
  23. }
  24.  
  25. ::-webkit-scrollbar-button {
  26. width: 0px;
  27. height: 0px;
  28. }
  29.  
  30. ::-webkit-scrollbar-thumb {
  31. background: #bad8eb;
  32. border: 0px none #ffffff;
  33. border-radius: 0px;
  34. }
  35.  
  36. ::-webkit-scrollbar-thumb:hover {
  37. background: #bad8eb;
  38. }
  39.  
  40. ::-webkit-scrollbar-thumb:active {
  41. background: #000000;
  42. }
  43.  
  44. ::-webkit-scrollbar-track {
  45. background: #000000;
  46. border: 0px none #ffffff;
  47. border-radius: 0px;
  48. }
  49.  
  50. ::-webkit-scrollbar-track:hover {
  51. background: #000000;
  52. }
  53.  
  54. ::-webkit-scrollbar-track:active {
  55. background: #000000;
  56. }
  57.  
  58. ::-webkit-scrollbar-corner {
  59. background: transparent;
  60. }
  61.  
  62. /*PAGE HEADER*/
  63. #header{
  64. color: #bad8eb;
  65. margin: auto;
  66. margin-top: -10px;
  67. width: 100%;
  68. height: 100px;
  69. border-bottom: #bad8eb solid 2px;
  70. position: fixed;
  71. background-color: black; /*HEADER BACKGROUND COLOR*/
  72. z-index: 10;
  73. margin-left: -10px;
  74. margin-right: -10px;
  75. }
  76.  
  77. #content{
  78. padding-top: 70px;
  79. }
  80.  
  81. /*PAGE TITLE*/
  82. #title{
  83. font-size: 16px;
  84. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/LOWERCASE, DELETE THIS LINE*/
  85. text-decoration: none;
  86. font-style: none;
  87. text-align: center;
  88. margin-top: 30px;
  89. letter-spacing: 2px;
  90. }
  91.  
  92. /*PAGE LINKS*/
  93. #links{
  94. font-size: 8px;
  95. text-transform: none;
  96. text-decoration: none;
  97. font-style: none;
  98. text-align: center;
  99. margin-top: 10px;
  100. }
  101.  
  102. a:link, a:visited{
  103. text-decoration: none;
  104. font-style: none;
  105. color: #dcecf5; /*LINK COLOR*/
  106. }
  107.  
  108. a:hover, a:active{
  109. color: #bad8eb; /*LINK HOVER COLOR*/
  110. text-decoration: underline;
  111. }
  112.  
  113. /*CHARACTER BOXES*/
  114. .tab{
  115. margin: auto;
  116. width: 595px;
  117. margin-top: 50px;
  118. vertical-align: top;
  119. border: white solid .5px;
  120. padding: 20px;
  121. background-color: black; /*BOX BACKGROUND COLOR*/
  122. box-shadow: 5px 5px 5px #888888;
  123. }
  124.  
  125. .desc{
  126. padding-left: 20px;
  127. font-size: 10px;
  128. height: 127px;
  129. display: inline-block;
  130. width: 350px;
  131. float: center;
  132. }
  133.  
  134. .name{
  135. padding: 0px;
  136. margin-top: -15px;
  137. margin-bottom: 3px;
  138. }
  139.  
  140. .bio{
  141. margin-top: 0px;
  142. height: 110px;
  143. overflow: scroll;
  144. font-size: 11px;
  145. background-color: black; /*BIO BACKGROUND COLOR*/
  146. color: white; /*BIO FONT COLOR*/
  147. padding: 5px;
  148. line-height: 12px;
  149. }
  150.  
  151. .pic{
  152. width: 215px;
  153. height: 147px;
  154. display: inline-block;
  155. float: center;
  156. }
  157.  
  158. img{
  159. width: 220px;
  160. height: 147px;
  161. }
  162.  
  163. /*CHARACTER NAME*/
  164. h1{
  165. font-size: 12px;
  166. text-align: center;
  167. padding-bottom: 5px;
  168. margin: 0px;
  169. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/UPPERCASE, DELETE THIS LINE*/
  170. border-bottom: #bad8eb solid 1px;
  171. margin-bottom: 5px;
  172. letter-spacing: 1.5px;
  173. font-weight: normal;
  174. }
  175.  
  176. /*DETAIL HEADER*/
  177. h2{
  178. text-transform: lowercase; /*IF YOU WANT CAPITALIZATION/UPPERCASE, DELETE THIS LINE*/
  179. text-decoration: none;
  180. font-style: italic;
  181. font-size: 10px;
  182. text-align: center;
  183. padding: 0;
  184. margin-top: 0;
  185. margin-bottom: 0;
  186. font-weight: normal;
  187. letter-spacing: 1.5px;
  188. }
  189.  
  190. /*SECTION HEADER*/
  191. h3{
  192. text-transform: lowercase; /*IF YOU WANT CAPITALIZATION/UPPERCASE, DELETE THIS LINE*/
  193. text-decoration: none;
  194. font-style: italic;
  195. font-size: 12px;
  196. margin-top: 10px;
  197. margin-bottom: 10px;
  198. text-align: center;
  199. font-weight: normal;
  200. color: white;
  201. letter-spacing: 2px;
  202. padding: 5px;
  203. border-top: #bad8eb solid 1px;
  204. border-bottom: #bad8eb solid 1px;
  205. }
  206.  
  207. /*CHARACTER LINK*/
  208. .tag{
  209. text-transform: lowercase;
  210. text-decoration: none;
  211. font-style: italic;
  212. font-size: 8px;
  213. margin-top: 0;
  214. margin-bottom: 0;
  215. font-weight: normal;
  216. letter-spacing: 1.5px;
  217. }
  218.  
  219. /*PARAGRAPH STYLING*/
  220. p{
  221. text-transform: lowercase; /*IF YOU WANT CAPITALIZATION/UPPERCASE, DELETE THIS LINE*/
  222. font-size: 11px;
  223. padding: 1px;
  224. margin-top: 3px;
  225. margin-bottom: 0;
  226. }
  227.  
  228. /*BOLD STYLING*/
  229. b{
  230. text-transform: uppercase; /*IF YOU WANT CAPITALIZATION/LOWERCASE, DELETE THIS LINE*/
  231. color: #bad8eb;
  232. }
  233.  
  234. /*QUOTE STYLING*/
  235. .ital{
  236. text-transform: lowercase; /*IF YOU WANT CAPITALIZATION/UPPERCASE, DELETE THIS LINE*/
  237. text-align: justify;
  238. letter-spacing: 1px;
  239. font-size: 10px;
  240. font-style: italic;
  241. }
  242.  
  243. /*BUTTON STYLING*/
  244. #buttons{
  245. margin: auto;
  246. margin-top: 20px;
  247. width: 100%;
  248. text-align: center;
  249. }
  250.  
  251. .btn{
  252. vertical-align: block;
  253. text-align: center;
  254. float: center;
  255. background-color: #2b2b2b;
  256. border: none;
  257. margin: 2px;
  258. text-decoration: none;
  259. border: #bad8eb solid 1px;
  260. color: white;
  261. }
  262.  
  263. .active{
  264. background-color: #dcecf5;
  265. color: black;
  266. }
  267. /*BUTTON STYLING END*/
  268.  
  269. #punk{
  270. font-size: 8px;
  271. color: #bad8eb;
  272. width: 25px;
  273. height: 25px;
  274. float: right;
  275. }
  276.  
  277. </style>
  278.  
  279. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  280.  
  281. <script>
  282.  
  283. $( document ).ready(function() {
  284.  
  285. var $items = $('.tab');
  286. var $btns = $('.btn').click(function() {
  287. if (this.id == 'all') {
  288. $items.show();
  289. } else {
  290. var $el = $('.' + this.id).show();
  291. $items.not($el).hide();
  292. }
  293. $btns.removeClass('active');
  294. $(this).addClass('active');
  295. });
  296.  
  297. });
  298.  
  299. </script>
  300.  
  301. </head>
  302. <body>
  303.  
  304. <div id="header">
  305. <div id="title">characters</div>
  306. <div id="links">
  307. <a href="/">home</a> | <a href="/code">other codes</a> | <a href="http://pastebin.com/ahaiEewk">pastebin</a>
  308. </div>
  309.  
  310. <div id="buttons">
  311. <!--
  312. ADDING NEW 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="BUTTON_ID">BUTTON TITLE</button>
  319. </div>
  320.  
  321. </div>
  322.  
  323. <div id="content">
  324.  
  325. <div class="tab pc">
  326. <div class="pic">
  327. <img src="http://i.imgur.com/ahcb58d.jpg"/>
  328. </div>
  329. <div class="desc">
  330. <div class="name">
  331. <h1>selene shepard <span class="tag"><a href="/tagged/selene shepard">/tag</a></span></h1>
  332. <h2>mass effect</h2>
  333. <h2>status: alive</h2>
  334. </div>
  335. <div class="bio">
  336. <span class="ital">"Shepard picks fights - it's in her nature, to seek conflict, that dangerous thirst to draw blood - and she doesn't explain it, doesn't feel the need to make excuses for anything. Shepard doesn't make excuses."</span>
  337. <h3>general</h3>
  338. <p>
  339. <b>names:</b> selene shepard, shepard, shep, lola
  340. </p>
  341. <p>
  342. <b>AGE:</b> 29, 31 (mass effect 3)
  343. </p>
  344. <p>
  345. <b>birthplace:</b> los angeles, california
  346. </p>
  347. <p>
  348. <b>class:</b> infiltrator
  349. </p>
  350. <p>
  351. <b>ALIGNMENT:</b> True Neutral / "Undecided"
  352. </p>
  353. <p>
  354. <b>ROMANCE:</b> garrus
  355. </p>
  356. <p>
  357. <b>family:</b> sofia shepard (mother, deceased); ignacio shepard (father, deceased)
  358. </p>
  359. <h3>physical</h3>
  360. <p>
  361. <b>HEIGHT:</b> 6' 3''
  362. </p>
  363. <p>
  364. <b>eye color:</b> brown
  365. </p>
  366. <p>
  367. <b>hair:</b> black, long and thick, not very well-maintained and usually in a bun or braid
  368. </p>
  369. <p>
  370. <b>ethnicity:</b> chicana
  371. </p>
  372. <p>
  373. <b>scars:</b> one on her eyebrow, acid scars on her back and calf, several stab and bullet scars, knife scars on arms and legs, dog bite on shin, one stab scar on her palm, scarred knuckles, scarred knees, her back is pretty messed up tbh
  374. </p>
  375. <p>
  376. <b>characteristics:</b> freckles, cybernetics revealed under her skin at certain points, a large cross and flowers tattoo on her back
  377. </p>
  378. <p>
  379. <b>SKILLS:</b> incredibly accurate aim, hand-to-hand, knife fighting, walking silently, a lot of stamina, intimidating others, and fighting dirty.
  380. </p>
  381. <h3>mental</h3>
  382. <p>
  383. <b>PERSONALITY:</b> vigilant, aggressive, direct, self-reliant, loyal, cynical, messy, predatory, focused, tough, undisciplined, resourceful, self-critical, frustrated, and dominant.
  384. </p>
  385. <p>
  386. <b>LIKES:</b> coffee, sniper rifles, working out, getting ripped, oversized sweatshirts, sleeping in strange places, taking risks, winning, sparring, trash talking during firefights, and #Justice.
  387. </p>
  388. <p>
  389. <b>DISLIKES:</b> feeling vulnerable, betrayal, being afraid, leaving people behind, feeling helpless, being controlled, the cold, most authority, her mistakes, pumpkin, cinnamon, and thresher maws.
  390. </p>
  391. <h3>backstory</h3>
  392. <p>
  393. <b>Earthborn / Sole Survivor</b>
  394. </p>
  395. <p>
  396. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis arcu sit amet leo fringilla, ac cursus dolor mattis. Duis sit amet ante ante. Ut ut vulputate diam, aliquam sollicitudin tortor. Aenean finibus eleifend elit, id ultricies nibh faucibus ac. Donec quis sem lacus. Suspendisse non sem tortor. Phasellus arcu mauris, auctor vel pretium in, rhoncus et orci. Duis convallis erat purus, eget ornare dolor auctor consequat. Etiam lobortis nisl quis risus gravida, ut maximus ligula volutpat. Vivamus vitae ipsum sagittis, tristique est sit amet, venenatis quam. Vivamus finibus eleifend neque, non bibendum purus commodo sit amet. Donec egestas fermentum dictum. Donec scelerisque feugiat rutrum. Maecenas ac fringilla ipsum, vitae scelerisque tortor. Nunc in neque id metus congue suscipit.
  397. </p>
  398. <p>
  399. <b>mass effect 1</b>
  400. </p>
  401. <p>
  402. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis arcu sit amet leo fringilla, ac cursus dolor mattis. Duis sit amet ante ante. Ut ut vulputate diam, aliquam sollicitudin tortor. Aenean finibus eleifend elit, id ultricies nibh faucibus ac. Donec quis sem lacus. Suspendisse non sem tortor. Phasellus arcu mauris, auctor vel pretium in, rhoncus et orci. Duis convallis erat purus, eget ornare dolor auctor consequat. Etiam lobortis nisl quis risus gravida, ut maximus ligula volutpat. Vivamus vitae ipsum sagittis, tristique est sit amet, venenatis quam. Vivamus finibus eleifend neque, non bibendum purus commodo sit amet. Donec egestas fermentum dictum. Donec scelerisque feugiat rutrum. Maecenas ac fringilla ipsum, vitae scelerisque tortor. Nunc in neque id metus congue suscipit.
  403. </p>
  404. <h3>other</h3>
  405. <p>
  406. <b>languages:</b> english, spanish, basic mandarin, basic russian
  407. </p>
  408. <p>
  409. <b>fun facts:</b> uses the unmodified widow like a badass (or asshole, whichever); learns to knit during and after the war and keeps knitting people hats; is literally so dirty and messy and doesn't know the words "clean clothes"; drinks the most disgusting coffee ever, with way too much sugar and cream and usually lukewarm; didn't pass her ged until after lying her way into basic training; has been arrested several time as a kid and no one knows because her file was sealed
  410. </p>
  411. <p>
  412. <b>CHOICES:</b> rachni queen saved, kirrahe survived, kaidan died at virmire, council saved, anderson nominated, squad and crew survived suicide mission, destroyed heretic geth, killed morinth, preserved collector base, saved maelon's research, cured the genophage, saved the rachni queen, conrad alive, cease-fire between geth and qurians, control ending
  413. </p>
  414. <p>
  415. <b>TROPES:</b> The Berserker, the atoner, good is not nice, Ineffectual Loner, hurting hero, The Paranoiac, The Quiet One, mr. vice guy, face of a thug, jerk with a heart of gold, and creepy good.
  416. </p>
  417. <p>
  418. <b>playlist:</b> beggin for thread (banks); hold me down (halsey); smother (daughter); glory days (2:54); which witch (florence + the machine); long way down (robert delong)
  419. </p>
  420. <p>
  421. <b>FC:</b> Nancy "Fancy" Gomez
  422. </p>
  423. </div>
  424. </div>
  425. </div>
  426.  
  427. <!--
  428. TO USE THE BUTTONS:
  429. when filling out character boxes, where it says <div class="tab">, put after tab the id tag you wrote for the button
  430. at the top. (EX. <div class="tab pc"> for a player character)
  431. -->
  432. <div class="tab BUTTON_ID">
  433. <div class="pic">
  434. <img src="IMAGE LINK"/>
  435. </div>
  436. <div class="desc">
  437. <div class="name">
  438. <h1>CHARACTER NAME <span class="tag"><a href="TAG LINK">/tag</a></span></h1>
  439. <h2>MEDIA</h2>
  440. <h2>status</h2>
  441. </div>
  442. <div class="bio">
  443. <span class="ital">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet metus nunc, nec volutpat."</span>
  444.  
  445. <h3>HEADER TITLE</h3>
  446.  
  447. NOT USING ANY TAG
  448.  
  449. <p>USING A PARAGRAPH TAG</p>
  450.  
  451. <b>USING A BOLD TAG</b>
  452.  
  453. </div>
  454. </div>
  455. </div>
  456.  
  457.  
  458. <!-- please don't touch this!! -->
  459. <div id="punk">
  460. <a href="https://www.fatalst.tumblr.com">&copy;</a>
  461. </div>
  462. </div>
  463.  
  464. </body>
  465. </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!