API tools faq
paste
Advertisement
dylanohelps

Character Masterlist #5

dylanohelps
Jun 17th, 2013
5,872
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----------------------
  4.  
  5. CHARACTER MASTERLIST #5 by JAKEHELPS
  6. #1: Do not redistribute & claim as your own.
  7. #2: Do not remove the credit.
  8.  
  9. ---------------------------->
  10.  
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12. <head>
  13. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  14.  
  15. <title>{Title}</title>
  16. <link rel="descriptioncut icon" href="{Favicon}" />
  17.  
  18. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
  21.  
  22. <link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
  23.  
  24.  
  25. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26. <script type="text/javascript">
  27. $(function(){
  28. $("#vertical div.wrap").hover(function(){
  29. $(this).stop().animate({top:"-260px"},{queue:false,duration:300});
  30. }, function() {
  31. $(this).stop().animate({top:"0px"},{queue:false,duration:300});
  32. });
  33. });
  34.  
  35. $(document).ready(function() {
  36. $('.type-1').click(function() {
  37. $('.character-type-1').fadeTo('slow', 1);
  38. $('.character-type-2').fadeTo('slow', 0.1);
  39. $('.character-type-3').fadeTo('slow', 0.1);
  40. });
  41. $('.type-2').click(function() {
  42. $('.character-type-2').fadeTo('slow', 1);
  43. $('.character-type-1').fadeTo('slow', 0.1);
  44. $('.character-type-3').fadeTo('slow', 0.1);
  45. });
  46. $('.type-3').click(function() {
  47. $('.character-type-3').fadeTo('slow', 1);
  48. $('.character-type-1').fadeTo('slow', 0.1);
  49. $('.character-type-2').fadeTo('slow', 0.1);
  50. });
  51. $('.type-4').click(function() {
  52. $('.character-type-1').fadeTo('slow', 1);
  53. $('.character-type-2').fadeTo('slow', 1);
  54. $('.character-type-3').fadeTo('slow', 1);
  55. });
  56. });
  57.  
  58.  
  59. </script>
  60.  
  61. </head>
  62. <style type="text/css">
  63. body {
  64. padding: 0;
  65. margin: 0;
  66. list-style: none;
  67. background-color: #FFFFFF;
  68. background-attachment: fixed;
  69. background-image:url('http://i93.photobucket.com/albums/l78/andrew_jason12/black_lozenge.png');
  70. margin-bottom: 50px;
  71. }
  72.  
  73.  
  74. .title {
  75. text-align:center;
  76. font-family: fjalla one;
  77. font-size: 26px;
  78. color: #FFFFFF;
  79. letter-spacing: 10px;
  80. text-transform: uppercase;
  81. margin-bottom: 20px;
  82. }
  83.  
  84. ::-webkit-scrollbar-thumb:vertical {
  85. height:10px;
  86. background-color: #303030; }
  87.  
  88. ::-webkit-scrollbar-thumb:horizontal {
  89. height:30px;
  90. background-color: #303030; }
  91.  
  92. ::-webkit-scrollbar {
  93. height: 10px;
  94. width: 4px;
  95. background-color: #505050; }
  96.  
  97. .clear {
  98. clear: both;
  99. }
  100.  
  101. #vertical {
  102. margin:50px auto;
  103. width:920px;
  104. margin-bottom: 60px;
  105. }
  106.  
  107. #vertical div.element {
  108. margin-right: 5px;
  109. margin-top: 5px;
  110. float: left;
  111. width: 220px;
  112. height: 260px;
  113. border: 1px solid #303030;
  114. position: relative;
  115. overflow: hidden;
  116. }
  117.  
  118. .wrap {
  119. display: block;
  120. height: 390px;
  121. width: 220px;
  122. position: absolute;
  123. top: 0;
  124. }
  125.  
  126. .portrait img {
  127. display: block;
  128. height: 260px;
  129. width: 220px;
  130. background-color: #202020;
  131. }
  132.  
  133. .description {
  134. display: block;
  135. height: 260px;
  136. width: 220px;
  137. background-color: #202020;
  138. font-family: cambria;
  139. font-size: 12px;
  140. color: #CCCCCC;
  141. padding: 5px;
  142. overflow: auto;
  143. }
  144.  
  145. .description a {
  146. display: block;
  147. padding: 5px;
  148. color: #FFFFFF;
  149. background-color: #303030;
  150. text-decoration: none;
  151. text-align: center;
  152. margin-top: 10px;
  153. margin-bottom: 20px;
  154. }
  155.  
  156. .navigation {
  157. text-align: center;
  158. margin-bottom: 20px;
  159. }
  160.  
  161. .navigation a {
  162. padding: 10px 20px;
  163. background-color: #303030;
  164. border: 1px solid #202020;
  165. font-family: cambria;
  166. font-size: 12px;
  167. color: #CCCCCC;
  168. margin-right: 5px;
  169. text-decoration: none;
  170. cursor: pointer;
  171. }
  172.  
  173.  
  174.  
  175.  
  176. </style>
  177. <body>
  178. <div id="vertical" class="clear">
  179. <div class="title">Characters</div>
  180. <div class="navigation">
  181. <a href="#">Home</a>
  182. <a href="#">Contact</a>
  183. <a class="type-1">Open</a>
  184. <a class="type-2">Closed</a>
  185. <a class="type-3">Reserved</a>
  186. <a class="type-4">All</a>
  187. <a href="http://jakehelps.tumblr.com">&copy;</a>
  188. </div>
  189.  
  190. <!------ TYPE 1 ------>
  191. <div class="character-type-1">
  192. <div class="element">
  193. <div class="wrap">
  194. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Victoria-s-Secret-Photoshoot-candice-swanepoel-23730771-760-1024.png" /></div>
  195. <div class="description">
  196. this is where the description goes
  197. <a href="#">Character Profile</a>
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. <!------ TYPE 2 ------>
  203. <div class="character-type-2">
  204. <div class="element">
  205. <div class="wrap">
  206. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Candice-Swanepoel-pics-1920-x-1200.png" /></div>
  207. <div class="description">
  208. this is where the description goes
  209. <a href="#">Character Profile</a>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. <!------ TYPE 3 ------>
  215. <div class="character-type-3">
  216. <div class="element">
  217. <div class="wrap">
  218. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/CandiceSwanepoelforOttoCataloguephotoshoot201112.png" /></div>
  219. <div class="description">
  220. this is where the description goes
  221. <a href="#">Character Profile</a>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. <!------ TYPE 1 ------>
  227. <div class="character-type-1">
  228. <div class="element">
  229. <div class="wrap">
  230. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Victoria-s-Secret-Photoshoot-candice-swanepoel-23730771-760-1024.png" /></div>
  231. <div class="description">
  232. this is where the description goes
  233. <a href="#">Character Profile</a>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. <!------ TYPE 2 ------>
  239. <div class="character-type-2">
  240. <div class="element">
  241. <div class="wrap">
  242. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Candice-Swanepoel-pics-1920-x-1200.png" /></div>
  243. <div class="description">
  244. this is where the description goes
  245. <a href="#">Character Profile</a>
  246. </div>
  247. </div>
  248. </div>
  249. </div>
  250. <!------ TYPE 3 ------>
  251. <div class="character-type-3">
  252. <div class="element">
  253. <div class="wrap">
  254. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/CandiceSwanepoelforOttoCataloguephotoshoot201112.png" /></div>
  255. <div class="description">
  256. this is where the description goes
  257. <a href="#">Character Profile</a>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. <!------ TYPE 1 ------>
  263. <div class="character-type-1">
  264. <div class="element">
  265. <div class="wrap">
  266. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Victoria-s-Secret-Photoshoot-candice-swanepoel-23730771-760-1024.png" /></div>
  267. <div class="description">
  268. this is where the description goes
  269. <a href="#">Character Profile</a>
  270. </div>
  271. </div>
  272. </div>
  273. </div>
  274. <!------ TYPE 2 ------>
  275. <div class="character-type-2">
  276. <div class="element">
  277. <div class="wrap">
  278. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Candice-Swanepoel-pics-1920-x-1200.png" /></div>
  279. <div class="description">
  280. this is where the description goes
  281. <a href="#">Character Profile</a>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <!------ TYPE 3 ------>
  287. <div class="character-type-3">
  288. <div class="element">
  289. <div class="wrap">
  290. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/CandiceSwanepoelforOttoCataloguephotoshoot201112.png" /></div>
  291. <div class="description">
  292. this is where the description goes
  293. <a href="#">Character Profile</a>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <!------ TYPE 1 ------>
  299. <div class="character-type-1">
  300. <div class="element">
  301. <div class="wrap">
  302. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Victoria-s-Secret-Photoshoot-candice-swanepoel-23730771-760-1024.png" /></div>
  303. <div class="description">
  304. this is where the description goes
  305. <a href="#">Character Profile</a>
  306. </div>
  307. </div>
  308. </div>
  309. </div>
  310. <!------ TYPE 2 ------>
  311. <div class="character-type-2">
  312. <div class="element">
  313. <div class="wrap">
  314. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/Candice-Swanepoel-pics-1920-x-1200.png" /></div>
  315. <div class="description">
  316. this is where the description goes
  317. <a href="#">Character Profile</a>
  318. </div>
  319. </div>
  320. </div>
  321. </div>
  322. <!------ TYPE 3 ------>
  323. <div class="character-type-3">
  324. <div class="element">
  325. <div class="wrap">
  326. <div class="portrait"><img src="http://i93.photobucket.com/albums/l78/andrew_jason12/CandiceSwanepoelforOttoCataloguephotoshoot201112.png" /></div>
  327. <div class="description">
  328. this is where the description goes
  329. <a href="#">Character Profile</a>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335.  
  336.  
  337.  
  338.  
  339.  
  340. </body>
  341. </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!