API tools faq
paste
dylanohelps

Character Masterlist #3

dylanohelps
May 4th, 2013
4,323
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  
  6. <title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}" />
  8.  
  9. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  10.  
  11. <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  12.  
  13. </head>
  14. <style type="text/css">
  15. body {
  16. padding: 0;
  17. margin: 0;
  18. list-style: none;
  19. background-color: #FFFFFF;
  20. background-image:url('http://24.media.tumblr.com/tumblr_ls2e05Cme11r3vazto6_250.jpg');
  21. background-attachment: fixed;
  22. margin-bottom: 50px;
  23. }
  24.  
  25. a {
  26. text-decoration: none;
  27. color: black;
  28. }
  29.  
  30. ::-webkit-scrollbar-thumb:vertical {
  31. height:10px;
  32. background-color: #505050; }
  33.  
  34. ::-webkit-scrollbar-thumb:horizontal {
  35. height:30px;
  36. background-color: #505050; }
  37.  
  38. ::-webkit-scrollbar {
  39. height: 10px;
  40. width: 5px;
  41. background-color: #ba4b56; }
  42.  
  43. #sidebar {
  44. width: 270px;
  45. height: 800px;
  46. position: fixed;
  47. float: left;
  48. margin-left: 80px;
  49. background-color: #202020;
  50. }
  51.  
  52. #sidebar img {
  53. width: 245px;
  54. height: auto;
  55. margin-left: 8px;
  56. margin-top: 150px;
  57. border: 5px solid #FFFFFF;
  58. border-top-left-radius: 80px;
  59. border-bottom-right-radius: 80px;
  60. }
  61.  
  62. .description {
  63. width: 233px;
  64. height: auto;
  65. margin-left: 8px;
  66. padding: 10px;
  67. text-align: center;
  68. font-family: calibri;
  69. font-size: 8px;
  70. color: #FFFFFF;
  71. text-transform: uppercase;
  72. line-height: 100%;
  73. letter-spacing: 1px;
  74. }
  75.  
  76. .links {
  77. width: 254px;
  78. height: auto;
  79. margin-left: 8px;
  80. margin-top: 10px;
  81. }
  82.  
  83. .links a {
  84. display: block;
  85. font-family: trebuchet ms;
  86. font-size: 9px;
  87. color: #FFFFFF;
  88. margin-top: 3px;
  89. background-color: #ba4b56;
  90. text-transform: uppercase;
  91. padding: 10px 30px;
  92. letter-spacing: 1px;
  93. text-align: center;
  94. }
  95.  
  96. #content {
  97. display: inline-block;
  98. width: 900px;
  99. height: auto;
  100. padding: 5px;
  101. margin-left: 400px;
  102. margin-top: 50px;
  103. }
  104.  
  105. .info {
  106. width: 200px;
  107. height: 250px;
  108. padding: 5px;
  109. border: 2px solid #ba4b56;
  110. float: left;
  111. margin-left: 8px;
  112. margin-top: 35px;
  113. }
  114.  
  115. .info img {
  116. width: 50px;
  117. height: 50px;
  118. background-color: #EEEEEE;
  119. border: 3px solid #ba4b56;
  120. margin-left: 75px;
  121. margin-top: -30px;
  122. }
  123.  
  124. .name {
  125. display: block;
  126. font-family: 'roboto condensed';
  127. font-size: 12px;
  128. color: #ba4b56;
  129. text-align: center;
  130. text-transform: uppercase;
  131. border-bottom: 1px solid #ba4b56;
  132. margin-bottom: 2px;
  133. }
  134.  
  135. .general {
  136. display: block;
  137. background-color: #ba4b56;
  138. border: 1px solid #ba4b56;
  139. padding: 5px;
  140. font-family: calibri;
  141. font-size: 8px;
  142. color: #FFFFFF;
  143. text-align: center;
  144. text-transform: uppercase;
  145. }
  146.  
  147. .biography {
  148. width: 200;
  149. height: 160px;
  150. padding: 5px;
  151. border: 1px solid #FFFFFF;
  152. background-color: #202020;
  153. margin-top: 5px;
  154. overflow: auto;
  155. font-family: calibri;
  156. font-size: 8px;
  157. color: #FFFFFF;
  158. text-align: justify;
  159. text-transform: uppercase;
  160. letter-spacing: 1px;
  161. }
  162.  
  163. .credit {
  164. text-align: center;
  165. width: 20px;
  166. height: 20px;
  167. padding: 5px;
  168. border-radius: 20px;
  169. margin-left: 120px;
  170. margin-top: 40px;
  171. font-size: 13px;
  172. background-color: #ba4b56;
  173. }
  174.  
  175.  
  176.  
  177. </style>
  178. <body>
  179. <div id="sidebar">
  180. <img src="http://25.media.tumblr.com/fecedbf52fc014b2d2d61b9cbe9e2060/tumblr_mm70l4plP11qzkm2wo4_250.gif" />
  181. <div class="description">
  182. In here goes the description of your character page, like what's the roleplay about, who are the characters, what are they classifed as, etc.
  183. </div>
  184. <div class="links">
  185. <a href="#">Home</a>
  186. <a href="#">Message</a>
  187. <a href="#">Link 1</a>
  188. <a href="#">Link 2</a>
  189.  
  190. </div>
  191. <div class="credit"><a href="http://jakehelps.tumblr.com">&#x2655;</a></div>
  192. </div>
  193.  
  194. <div id="content">
  195. <!------- CHARACTER BOX ------->
  196. <div class="info">
  197. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/0026_2842941.png" /></a>
  198. <div class="name">Tobias Prescott</div>
  199. <div class="general">19.Harvard Law Student.Bisexual.Logan Lerman</div>
  200. <div class="biography">
  201. Tobias Jacob Prescott is a Harvard Law Student and one of the university's prize pupils they've ever had. Having studying law, acing perfectly on every exam and test he has ever taken, Toby's IQ has gone off the charts according to most of his teachers. He presents academically achieved grade point averages that go beyond the regular and has outstanding leadership qualities that is rare at Harvard because no one like Tobias is willing to teach a class for his free time. Toby knows what he wants, and what he wants, he gets. Having coming from a rich family, Tobias is used to getting things what he wants. But that's where his flaw falls. If he doesn't get what he wants, he becomes manipuative and mischievous in order to acquires what he needs.
  202. </div>
  203. </div>
  204. <!------- CHARACTER BOX ------->
  205. <div class="info">
  206. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/chord-overstreet-sexy-photo-shoot-05.png" /></a>
  207. <div class="name">Bradford Jacobs</div>
  208. <div class="general">21.Barista.Straight.Chord Overstreet</div>
  209. <div class="biography">
  210. Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
  211. </div>
  212. </div>
  213. <!------- CHARACTER BOX ------->
  214. <div class="info">
  215. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/austinbutlerfan1.png" /></a>
  216. <div class="name">Preston Van Houtzen</div>
  217. <div class="general">18.Calvin Klein Model.Bisexual.Austin Butler</div>
  218. <div class="biography">
  219. Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing.
  220. </div>
  221. </div>
  222. <!------- CHARACTER BOX ------->
  223. <div class="info">
  224. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Candice-Swanepoel-Victorias-Secret-Jeans-Photoshoot-12.png" /></a>
  225. <div class="name">Trixie Princeton</div>
  226. <div class="general">20.Business Woman.Straight.Candice Swanepoel</div>
  227. <div class="biography">
  228. Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
  229. </div>
  230. </div>
  231. <!------- CHARACTER BOX ------->
  232. <div class="info">
  233. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/UHQ-Megasized-Taylor-Lautner-TW-Photoshoot-WOW-and-i-m-not-even-on-Team-Jacob-twilight-series-8137248-2069-2560.png" /></a>
  234. <div class="name">Tommy Westbrooks</div>
  235. <div class="general">19.Bartender.Gay.Taylor Lautner</div>
  236. <div class="biography">
  237. Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
  238. </div>
  239. </div>
  240.  
  241. </div>
  242.  
  243.  
  244.  
  245. </body>
  246. </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!