API tools faq
paste
Advertisement
b0rn-to-be-wild

Page: JOKER (vol.3)

b0rn-to-be-wild
Dec 21st, 2013
311
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----
  4.  
  5. ©borntobewildcodes.tumblr.com | JOKER (vol.3)
  6.  
  7. + Do not redistribute this page or remove the credits.
  8. + Edit as long as you keep the credits intact
  9. + Contact us if you have any questions or concerns.
  10. + If you want a custom theme you can commission us.
  11. + Thanks for using our page, we hope that you enjoy it.
  12.  
  13.  
  14. Other credits:
  15.  
  16. - Joker background - unknown
  17. - Joker icons - promo art
  18.  
  19. - Google fonts
  20. - Font Awesome icons
  21. - Jquery
  22. - Style my tooltips by Malihu
  23.  
  24. ---->
  25.  
  26. <html>
  27. <head>
  28.  
  29. <title>{Title}</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32.  
  33. </style>
  34. <style type="text/css">
  35.  
  36. /* ---------------------------- GENERAL ----------------------------- */
  37.  
  38. /* -------- BASICS ------- */
  39.  
  40.  
  41. body {
  42. margin: 0;
  43. padding: 0;
  44. width: 100%;
  45. height: 100%;
  46. font-family: Helvetica;
  47. font-size: 12px;
  48. line-height: 17px;
  49. color:#eee;
  50. background-color: #fff;
  51. background-image: url('http://i58.tinypic.com/kf18yc.jpg');
  52. background-attachment: fixed;
  53. background-repeat: repeat;
  54. }
  55.  
  56. /* Fix */
  57.  
  58. iframe, img, embed, object, video {
  59. max-width: 100%;
  60. border: none;
  61. }
  62.  
  63. input, textarea, select, a { outline: none; }
  64.  
  65. /* Paragraph */
  66.  
  67. p {margin-top: 5px; margin-bottom: 5px;}
  68.  
  69. <--ses-->
  70. small{font-size: 90%;}
  71.  
  72. big{font-size: 110%;}
  73.  
  74. /* blogtitle */
  75.  
  76. h1{
  77. margin: 0;
  78. margin-top: 10px;
  79. margin-bottom: 10px;
  80. color:#fff;
  81. font-family:'Great Vibes';
  82. font-size: 20px;
  83. line-height:25px;
  84. font-weight: normal;
  85. }
  86.  
  87. /* Captions */
  88.  
  89. h2 {
  90. font-family: Helvetica;
  91. font-size: 12px;
  92. line-height: 17px;
  93. color: #222;
  94. background-color: #fff;
  95. font-weight: normal;
  96. }
  97.  
  98. /* Links */
  99.  
  100. a {
  101. color: #A08A61;
  102. text-decoration:none;
  103. }
  104.  
  105. a:hover {
  106. color: #222;
  107. -webkit-transition: all .3s;
  108. -moz-transition: all .3s;
  109. -o-transition: all .3s;
  110. -ms-transition: all .3s;
  111. transition: all .3s;
  112. }
  113.  
  114. ul, ol, li {
  115. margin: 5px 10px;
  116. padding: 0px;
  117. }
  118.  
  119. /* Bold and italic */
  120.  
  121. b, strong {
  122. color: #555;
  123. }
  124.  
  125. i, em {
  126. color: #bbb;
  127. }
  128.  
  129. ul {
  130. margin: 0px;
  131. padding: 0px;
  132. }
  133.  
  134. a img {
  135. border: 0px;
  136. }
  137.  
  138. small {
  139. font-size: 90%;
  140. }
  141.  
  142. big {
  143. font-size: 110%;
  144. }
  145.  
  146. /* Selection */
  147.  
  148. ::-moz-selection {
  149. background: #81765A;
  150. color: #fff;
  151. }
  152.  
  153. ::selection {
  154. background: #81765A;
  155. color: #fff;
  156. }
  157.  
  158. /* Webkit scrollbar */
  159.  
  160. ::-webkit-scrollbar {
  161. width: 9px;
  162. height: 0px;
  163. }
  164.  
  165. ::-webkit-scrollbar-button:start:decrement,
  166. ::-webkit-scrollbar-button:end:increment {
  167. height: 0px;
  168. display: block;
  169. background-color: #ffffff;
  170. }
  171.  
  172. ::-webkit-scrollbar-track-piece {
  173. background-color: #ffffff;
  174. }
  175.  
  176. ::-webkit-scrollbar-thumb:vertical {
  177. height: 0px;
  178. background-color: #000000;
  179. border:4px solid #ffffff;
  180. }
  181.  
  182. /* Tumblr controls */
  183.  
  184. .iframe-controls--desktop {
  185. right: 35px!important;
  186. top: 5px!important;
  187. margin-top:auto;
  188. opacity: .9!important;
  189. position:fixed!important;
  190. white-space:nowrap!important;
  191. filter: invert(1);
  192. -webkit-filter: invert(1);
  193. -moz-filter: invert(1);
  194. -o-filter: invert(1);
  195. -ms-filter: invert(1);
  196. z-index: 10000!important;
  197. }
  198.  
  199. /* Tooltips */
  200.  
  201. #s-m-t-tooltip {
  202. max-width: 250px;
  203. margin: 10px;
  204. padding: 5px;
  205. color: #eee;
  206. font-size: 12px;
  207. line-height: 15px;
  208. background: #000;
  209. border:1px solid #888;
  210. z-index: 10000;
  211. }
  212.  
  213. /*-- CONTAINER --*/
  214.  
  215. #container {
  216. position:absolute;
  217. top: 50%;
  218. left: 50%;
  219. width: 535px;
  220. height: 535px;
  221. -webkit-transform: translateX(-50%) translateY(-50%);
  222. -moz-transform: translateX(-50%) translateY(-50%);
  223. -ms-transform: translateX(-50%) translateY(-50%);
  224. transform: translateX(-50%) translateY(-50%);
  225. border:1px solid #000;
  226. background:#fff;
  227. overflow:hidden;
  228. }
  229.  
  230. /* Menu */
  231.  
  232. #menu {
  233. position:fixed;
  234. margin:0px;
  235. width: 514px;
  236. height: 40px;
  237. padding:10px;
  238. line-height:30px;
  239. color:#bbb;
  240. font-family:"Cinzel";
  241. font-size:25px;
  242. text-align:center;
  243. background:#222;
  244. border:1px solid #000;
  245. }
  246.  
  247. #title{
  248. float:left;
  249. margin:0px;
  250. height:20px;
  251. line-height:20px;
  252. padding:10px;
  253. color:#eee;
  254. font-size:30px;
  255. background:#eee;
  256. color:#000;
  257. }
  258.  
  259. #menu a {
  260. float:right;
  261. padding:2px;
  262. color:#777;
  263. }
  264.  
  265. #menu i {
  266. font-size:13px;
  267. padding:5px;
  268. color:#eee;
  269. }
  270.  
  271. #menu a:hover, #menu a:hover i{
  272. color:#849C33;
  273. }
  274.  
  275. /*-- PANELS --*/
  276.  
  277. #containerin{
  278. position:fixed;
  279. margin-top:62px;
  280. width: 535px;
  281. height: 474px;
  282. overflow:hidden;
  283. overflow-y:auto;
  284. }
  285.  
  286. .panel {
  287. width:120px;
  288. height:120px;
  289. margin:5px 15px;
  290. }
  291.  
  292. /* Poster */
  293.  
  294. .poster {
  295. width:120px;
  296. height:120px;
  297. background-color:#fff;
  298. }
  299.  
  300. .poster img {
  301. display:block;
  302. width:100px;
  303. height:100px;
  304. padding:9px;
  305. border:1px solid #000;
  306. -webkit-transition:opacity 0.3s linear;
  307. -webkit-transition:all 0.3s linear;
  308. -moz-transition:all 0.3s linear;
  309. transition:all 0.3s linear;
  310. }
  311.  
  312. .panel:hover .poster img{
  313. -webkit-filter: grayscale(100%);
  314. -webkit-transform: scale(1.2);
  315. -moz-transform: scale(1.2);
  316. -o-transform: scale(1.2);
  317. transform: scale(1.2);
  318. }
  319.  
  320. /* info */
  321.  
  322. .info {
  323. position:absolute;
  324. margin:0px;
  325. width:100px;
  326. height:100px;
  327. padding:10px;
  328. font-family:Verdana;
  329. font-size:11px;
  330. line-height:14px;
  331. color:#000;
  332. background:#fff;
  333. text-align:center;
  334. z-index:1000;
  335. opacity:0;
  336. }
  337.  
  338. .panel:hover .info {
  339. opacity:.9;
  340. -webkit-transition: all 0.5s ease-out;
  341. -moz-transition: all 0.5s ease-out;
  342. transition: all 0.5s ease-out;
  343. }
  344.  
  345. /* Info name */
  346.  
  347. .name {
  348. margin:5px;
  349. font-family:"Cinzel";
  350. font-size:12px;
  351. padding:3px 6px;
  352. text-align:center;
  353. color:#eee;
  354. background:#000;
  355. }
  356.  
  357. /* info link */
  358.  
  359. .info a{
  360. color:#AB4A4B;
  361. }
  362.  
  363. /*-- CREDIT --*/
  364.  
  365. #credit {
  366. position:fixed;
  367. right: 10px;
  368. width:25px;
  369. height:25px;
  370. top: 5px;
  371. z-index: 100000;
  372. }
  373.  
  374. #credit img{
  375. border: 1px solid {color:Borders};
  376. }
  377.  
  378. #credit img:hover{
  379. border: 1px solid {color:Hover};
  380. }
  381.  
  382. /* --------------------------- Custom CSS -------------------------- */
  383.  
  384. {CustomCSS}
  385.  
  386. </style>
  387.  
  388. <!--Google fonts-->
  389.  
  390. <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Cinzel|Poiret+One|Montez|Cinzel" rel="stylesheet">
  391.  
  392. <!-- Font awesome -->
  393.  
  394. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  395.  
  396. <!--Jquery-->
  397.  
  398. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  399. <script type="text/javascript" src="https://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  400.  
  401. <!-- Style my tooltips -->
  402.  
  403. <script src="jquery.style-my-tooltips.js"></script>
  404. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  405. <script>
  406. (function($){
  407. $(document).ready(function(){
  408. $("a[title]").style_my_tooltips({
  409. tip_follows_cursor:true,
  410. tip_delay_time: 90,
  411. tip_fade_speed: 600,
  412. attribute:"title"
  413. });
  414. });
  415. })(jQuery);
  416. </script>
  417.  
  418. <meta charset="utf-8">
  419.  
  420. </head>
  421.  
  422. <body>
  423.  
  424. <div id="container">
  425.  
  426. <div id="menu">
  427. <div id="title"> Title </div>
  428. <a href="https://www.tumblr.com/dashboard" title="Dashboard"><i class="fa fa-tumblr fa"></i></a>
  429. <a href="/archive" title="Archive"><i class="fa fa-history fa"></i></a>
  430. <a href="/submit" title="Submit"><i class="fa fa-pencil fa"></i></a>
  431. <a href="/ask" title="Ask"><i class="fa fa-envelope fa"></i></a>
  432. <a href="/" title="Index"><i class="fa fa-home fa"></i></a>
  433. </div>
  434. <!--End menu-->
  435.  
  436. <div id="containerin">
  437.  
  438. <table id="all" border="0" cellpadding="0" cellspacing="20">
  439.  
  440. <!-- 1st column-->
  441.  
  442. <!-- 1st panel -->
  443. <td><div class="panel">
  444. <div class="poster">
  445. <div class="info">
  446. <!-- name/title-->
  447. <div class="name"> Name </div>
  448.  
  449. <!--- description -->
  450. add description <br>
  451.  
  452. <a href=""> link </a>
  453.  
  454. </div>
  455. <!-- end info -->
  456.  
  457. <!-- image url -->
  458. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  459. </div>
  460. <!--End poster-->
  461.  
  462. </div></td>
  463. <!--end 1st panel-->
  464.  
  465.  
  466. <!-- 2nd panel -->
  467. <td><div class="panel">
  468. <div class="poster">
  469. <div class="info">
  470. <!-- name/title-->
  471. <div class="name"> Name </div>
  472.  
  473. <!--- description -->
  474. add description <br>
  475.  
  476. <a href=""> link </a>
  477.  
  478. </div>
  479. <!-- end info -->
  480.  
  481. <!-- image url -->
  482. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  483. </div>
  484. <!--End poster-->
  485.  
  486. </div></td>
  487. <!--end 2nd panel-->
  488.  
  489.  
  490. <!-- 3rd panel -->
  491. <td><div class="panel">
  492. <div class="poster">
  493. <div class="info">
  494. <!-- name/title-->
  495. <div class="name"> Name </div>
  496.  
  497. <!--- description -->
  498. add description <br>
  499.  
  500. <a href=""> link </a>
  501.  
  502. </div>
  503. <!-- end info -->
  504.  
  505. <!-- image url -->
  506. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  507. </div>
  508. <!--End poster-->
  509.  
  510. </div></td>
  511. <!--end 3rd panel-->
  512.  
  513.  
  514. <tr><!--end first column-->
  515.  
  516.  
  517. <!-- 2nd column-->
  518.  
  519. <!-- 4th panel -->
  520. <td><div class="panel">
  521. <div class="poster">
  522. <div class="info">
  523. <!-- name/title-->
  524. <div class="name"> Name </div>
  525.  
  526. <!--- description -->
  527. add description <br>
  528.  
  529. <a href=""> link </a>
  530.  
  531. </div>
  532. <!-- end info -->
  533.  
  534. <!-- image url -->
  535. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  536. </div>
  537. <!--End poster-->
  538.  
  539. </div></td>
  540. <!--end 4th panel-->
  541.  
  542.  
  543. <!-- 5th panel -->
  544. <td><div class="panel">
  545. <div class="poster">
  546. <div class="info">
  547. <!-- name/title-->
  548. <div class="name"> Name </div>
  549.  
  550. <!--- description -->
  551. add description <br>
  552.  
  553. <a href=""> link </a>
  554.  
  555. </div>
  556. <!-- end info -->
  557.  
  558. <!-- image url -->
  559. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  560. </div>
  561. <!--End poster-->
  562.  
  563. </div></td>
  564. <!--end 5th panel-->
  565.  
  566.  
  567. <!-- 6th panel -->
  568. <td><div class="panel">
  569. <div class="poster">
  570. <div class="info">
  571. <!-- name/title-->
  572. <div class="name"> Name </div>
  573.  
  574. <!--- description -->
  575. add description <br>
  576.  
  577. <a href=""> link </a>
  578.  
  579. </div>
  580. <!-- end info -->
  581.  
  582. <!-- image url -->
  583. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  584. </div>
  585. <!--End poster-->
  586.  
  587. </div></td>
  588. <!--end 6th panel-->
  589.  
  590.  
  591. <tr><!--end second column-->
  592.  
  593.  
  594.  
  595. <!-- 3rd column-->
  596.  
  597. <!-- 7th panel -->
  598. <td><div class="panel">
  599. <div class="poster">
  600. <div class="info">
  601. <!-- name/title-->
  602. <div class="name"> Name </div>
  603.  
  604. <!--- description -->
  605. add description <br>
  606.  
  607. <a href=""> link </a>
  608.  
  609. </div>
  610. <!-- end info -->
  611.  
  612. <!-- image url -->
  613. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  614. </div>
  615. <!--End poster-->
  616.  
  617. </div></td>
  618. <!--end 7th panel-->
  619.  
  620.  
  621. <!-- 8th panel -->
  622. <td><div class="panel">
  623. <div class="poster">
  624. <div class="info">
  625. <!-- name/title-->
  626. <div class="name"> Name </div>
  627.  
  628. <!--- description -->
  629. add description <br>
  630.  
  631. <a href=""> link </a>
  632.  
  633. </div>
  634. <!-- end info -->
  635.  
  636. <!-- image url -->
  637. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  638. </div>
  639. <!--End poster-->
  640.  
  641. </div></td>
  642. <!--end 8th panel-->
  643.  
  644.  
  645. <!-- 8th panel -->
  646. <td><div class="panel">
  647. <div class="poster">
  648. <div class="info">
  649. <!-- name/title-->
  650. <div class="name"> Name </div>
  651.  
  652. <!--- description -->
  653. add description <br>
  654.  
  655. <a href=""> link </a>
  656.  
  657. </div>
  658. <!-- end info -->
  659.  
  660. <!-- image url -->
  661. <img width="120px" src="http://i64.tinypic.com/6z82h0.jpg">
  662. </div>
  663. <!--End poster-->
  664.  
  665. </div></td>
  666. <!--end 9th panel-->
  667.  
  668. <!-- end third column-->
  669.  
  670.  
  671. <!-- to add more columns: 1) add <tr> under <!-- end third column--"> 2) copy everything from <!-- 3rd column--> <!-- end third column--"> 3) paste it under <tr>
  672. -->
  673.  
  674. </table>
  675.  
  676. </div>
  677. <!--End containerin-->
  678.  
  679. </div>
  680. <!--End container-->
  681.  
  682. <!-- CREDIT (do not remove) -->
  683.  
  684. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page JOKER by @borntobewildcodes"><img src="http://i57.tinypic.com/301g6eg.jpg"></a></div>
  685.  
  686. </body>
  687. </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!