API tools faq
paste
Advertisement
dylanohelps

Character Masterlist #2

dylanohelps
May 1st, 2013
3,008
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--------
  4.  
  5. CHARACTER MASTERLIST #2 - JAKEHELPS
  6. #1: Don't remove the credit.
  7. #2: Don't redistribute and claim as your own.
  8. #3: Customize as you like!
  9.  
  10. © Copyright 2013 - Jake Miller Helps | Tumblr
  11.  
  12. --------->
  13.  
  14. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  15.  
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}" />
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  20.  
  21. <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  22.  
  23. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  24. <script type="text/javascript">
  25.  
  26. $(document).ready(function() {
  27. $('.type-1').click(function() {
  28. $('.character-type-1').fadeTo('slow', 1);
  29. $('.character-type-2').fadeTo('slow', 0.1);
  30. $('.character-type-3').fadeTo('slow', 0.1);
  31. });
  32. $('.type-2').click(function() {
  33. $('.character-type-2').fadeTo('slow', 1);
  34. $('.character-type-1').fadeTo('slow', 0.1);
  35. $('.character-type-3').fadeTo('slow', 0.1);
  36. });
  37. $('.type-3').click(function() {
  38. $('.character-type-3').fadeTo('slow', 1);
  39. $('.character-type-1').fadeTo('slow', 0.1);
  40. $('.character-type-2').fadeTo('slow', 0.1);
  41. });
  42. $('.type-4').click(function() {
  43. $('.character-type-1').fadeTo('slow', 1);
  44. $('.character-type-2').fadeTo('slow', 1);
  45. $('.character-type-3').fadeTo('slow', 1);
  46. });
  47. });
  48.  
  49. </script>
  50.  
  51.  
  52. </head>
  53. <style type="text/css">
  54. body {
  55. padding: 0;
  56. margin: 0;
  57. list-style: none;
  58. background-color: #000000;
  59. background-image:url('http://i93.photobucket.com/albums/l78/andrew_jason12/binding_dark.png');
  60. background-attachment: fixed;
  61. margin-bottom: 50px;
  62. }
  63.  
  64. a {
  65. text-decoration: none;
  66. color: black;
  67. }
  68.  
  69. ::-webkit-scrollbar-thumb:vertical {
  70. height:10px;
  71. background-color: #505050; }
  72.  
  73. ::-webkit-scrollbar-thumb:horizontal {
  74. height:30px;
  75. background-color: #505050; }
  76.  
  77. ::-webkit-scrollbar {
  78. height: 10px;
  79. width: 5px;
  80. background-color: #FFFFFF; }
  81.  
  82. #heaven {
  83. display: block;
  84. position: fixed;
  85. width: 100%;
  86. height: 70px;
  87. background-color: #202020;
  88. }
  89.  
  90. .main-title {
  91. font-family: 'quicksand';
  92. font-size: 24px;
  93. color: #FFFFFF;
  94. float: left;
  95. margin-left: 60px;
  96. margin-top: 20px;
  97. opacity: 1;
  98. }
  99.  
  100. .navigation {
  101. float: right;
  102. margin-right: 60px;
  103. margin-top: 25px;
  104. }
  105.  
  106. .navigation a {
  107. font-family: 'roboto condensed';
  108. font-size: 11px;
  109. color: #FFFFFF;
  110. padding: 15px 30px;
  111. text-transform: uppercase;
  112. margin-left: -5px;
  113. -webkit-transition: all 0.2s ease-in-out;
  114. -moz-transition: all 0.2s ease-in-out;
  115. -o-transition: all 0.2s ease-in-out;
  116. -ms-transition: all 0.2s ease-in-out;
  117. transition: all 0.2s ease-in-out;
  118. }
  119.  
  120. .navigation a:hover {
  121. background-color: #FFFFFF;
  122. color: #202020;
  123. }
  124.  
  125. #sidebar {
  126. display: inline-block;
  127. position: fixed;
  128. background-color: #101010;
  129. width: 150px;
  130. height: 700px;
  131. margin-left: 100px;
  132. float: left;
  133. text-align: center;
  134. margin-top: 70px;
  135. }
  136.  
  137. .sidelinks a {
  138. display: block;
  139. font-family: 'roboto condensed';
  140. font-size: 12px;
  141. color: #FFFFFF;
  142. padding: 5px 20px;
  143. text-transform: uppercase;
  144. margin-top: 5px;
  145. -webkit-transition: all 0.2s ease-in-out;
  146. -moz-transition: all 0.2s ease-in-out;
  147. -o-transition: all 0.2s ease-in-out;
  148. -ms-transition: all 0.2s ease-in-out;
  149. transition: all 0.2s ease-in-out;
  150. }
  151.  
  152. .sidelinks a:hover {
  153. color: #202020;
  154. background-color: #FFFFFF;
  155. cursor: pointer;
  156. }
  157.  
  158. #content {
  159. display: inline-block;
  160. float: right;
  161. margin-right: 100px;
  162. margin-top: 120px;
  163. margin-bottom: 60px;
  164. width: 916px;
  165. height: auto;
  166. padding: 10px;
  167. }
  168.  
  169. .info {
  170. display: inline-block;
  171. float: left;
  172. text-align: center;
  173. margin-right: 3px;
  174. }
  175.  
  176. .cname {
  177. font-family: 'roboto condensed';
  178. font-size: 11px;
  179. color: #FFFFFF;
  180. text-transform: uppercase;
  181. text-align: center;
  182. width: 220px;
  183. height: auto;
  184. padding: 3px;
  185. background-color: #292929;
  186. margin-bottom: 3px;
  187. }
  188.  
  189. .info img {
  190. background-color: #101010;
  191. width: 200px;
  192. height: 350px;
  193. border: 3px solid #101010;
  194. }
  195.  
  196.  
  197. </style>
  198. <body>
  199. <div id="heaven">
  200. <div class="main-title">Character Masterlist</div>
  201. <div class="navigation">
  202. <a href="/">Index</a>
  203. <a href="/ask">Contact</a>
  204. <a href="#">Link 1</a>
  205. <a href="#">Link 2</a>
  206. <a href="http://jakehelps.tumblr.com">Credit</a>
  207. </div>
  208. </div>
  209. <div id="sidebar">
  210. <div class="sidelinks">
  211. <a class="type-1">Reserved</a>
  212. <a class="type-2">Open</a>
  213. <a class="type-3">Closed</a>
  214. <a class="type-4">All</a>
  215. </div>
  216. </div>
  217.  
  218. <div id="content">
  219. <!------- CHARACTER 1 -------->
  220. <div class="info">
  221. <div class="character-type-1">
  222. <div class="cname">Brandon Gates</div>
  223. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/2.png" /></a>
  224. </div>
  225. </div>
  226. <!------- CHARACTER 2 -------->
  227. <div class="info">
  228. <div class="character-type-2">
  229. <div class="cname">Grant Yamagishi</div>
  230. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/4.png" /></a>
  231. </div>
  232. </div>
  233. <!------- CHARACTER 3 -------->
  234. <div class="info">
  235. <div class="character-type-3">
  236. <div class="cname">Claudia Morgenstar</div>
  237. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/3.png" /></a>
  238. </div>
  239. </div>
  240. <!------- CHARACTER 2 -------->
  241. <div class="info">
  242. <div class="character-type-2">
  243. <div class="cname">Claire Anthomistro</div>
  244. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/5.png" /></a>
  245. </div>
  246. </div>
  247. <!------- CHARACTER 1 -------->
  248. <div class="info">
  249. <div class="character-type-1">
  250. <div class="cname">Denise Richardson</div>
  251. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/6.png" /></a>
  252. </div>
  253. </div>
  254. <!------- CHARACTER 2 -------->
  255. <div class="info">
  256. <div class="character-type-2">
  257. <div class="cname">Tyler Polaris</div>
  258. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/8.png" /></a>
  259. </div>
  260. </div>
  261. <!------- CHARACTER 3 -------->
  262. <div class="info">
  263. <div class="character-type-3">
  264. <div class="cname">Trisha Wright</div>
  265. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/9.png" /></a>
  266. </div>
  267. </div>
  268. <!------- CHARACTER 1 -------->
  269. <div class="info">
  270. <div class="character-type-1">
  271. <div class="cname">Donatella Blitzen</div>
  272. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/7.png" /></a>
  273. </div>
  274. </div>
  275. <!------- CHARACTER 3 -------->
  276. <div class="info">
  277. <div class="character-type-3">
  278. <div class="cname">Tristan Huntervale</div>
  279. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/10.png" /></a>
  280. </div>
  281. </div>
  282. <!------- CHARACTER 2 -------->
  283. <div class="info">
  284. <div class="character-type-2">
  285. <div class="cname">Patrick Westburn</div>
  286. <a href="#"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/11.png" /></a>
  287. </div>
  288. </div>
  289. </div>
  290.  
  291.  
  292.  
  293. </body>
  294. </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!