Advertisement
southcodes

BIAS PAGE #1: joy .scroll ver.

Jan 8th, 2017
289
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.43 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6.  
  7. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  8.  
  9. <style type="text/css">
  10.  
  11. iframe#tumblr_controls{
  12.     white-space:nowrap!important;
  13.     -webkit-filter:invert(60%)!important;
  14.     -moz-filter:invert(60%)!important;
  15.     -ms-filter:invert(60%)!important;
  16.     -o-filter:invert(60%)!important;
  17.     filter:invert(60%)!important;
  18.     top:10px!important;
  19.     right:10px!important;
  20.     opacity:.3!important;
  21.     position:fixed!important;}
  22.  
  23. ::-webkit-scrollbar{
  24.     height:2px;
  25.     width:4px;
  26.     background:inherit;
  27.     margin-right:10px;
  28. }
  29.  
  30. ::-webkit-scrollbar-thumb{
  31.     margin-right:10px;
  32.     background:#ddd;
  33.     border-radius:2px;
  34.     -webkit-border-radius:2px;}
  35.    
  36. .tmblr-iframe {
  37.     margin:10px;
  38.     opacity:.5;
  39.     -moz-transition-duration: 0.2s;
  40.     -o-transition-duration: 0.2s;
  41.     -webkit-transition-duration: 0.2s;q
  42.     transition-duration: 0.2s;
  43. }
  44.  
  45. .tmblr-iframe:hover{
  46.     opacity:.8;
  47.     -moz-transition-duration: 0.6s;
  48.     -o-transition-duration: 0.6s;
  49.     -webkit-transition-duration: 0.6s;q
  50.     transition-duration: 0.6s;
  51. }
  52.  
  53. #s-m-t-tooltip{
  54.     max-width:300px;
  55.     margin-top:25px;
  56.     margin-left:15px;
  57.     z-index:999999;
  58.     letter-spacing:1px;
  59.     text-transform:uppercase;
  60.     font-size:8px;
  61.     border: solid 1px #dcdee2;
  62.     background-color:#fcfcfc;
  63.     color:#818284;
  64.     padding:1px 3px 1px 3px;
  65. }
  66.  
  67. body {
  68.     font-family:Open Sans; /* font family of all the text */
  69.     font-size:11px; /* font size  of all the text */
  70.     color:#3d3e3f; /* font color */
  71.     background:#fcfcfc; /* background color */
  72.     letter-spacing:1px;
  73. }
  74.  
  75. a, a:visited{
  76.     text-decoration:none;
  77.     color:#000;
  78. }
  79.  
  80. a:hover {
  81.     color:#000;
  82. }
  83.  
  84. .container {
  85.     width:736px;
  86.     position:absolute;
  87.     left:50%;
  88.     top:50%;
  89.     -webkit-transform: translateX(-50%) translateY(-50%);
  90.     -moz-transform: translateX(-50%) translateY(-50%);
  91.     -ms-transform: translateX(-50%) translateY(-50%);
  92.     transform: translateX(-50%) translateY(-50%);
  93. }
  94.  
  95. .title {
  96.     font-weight:bold;
  97.     display:inline-block;
  98.     margin:0 0 0px 6px;
  99.     font-size:20px;
  100. }
  101.  
  102. .links {
  103.     font-style:italic;
  104.     display:inline-block;
  105.     float:right;
  106.     margin:10px 2px 0 0;
  107. }
  108.  
  109. .links a{
  110.     color:#000;
  111.     padding:4px;
  112. }
  113.  
  114. .boxes {
  115.     border-radius:3px;
  116.     background:white; /* entire box background color */
  117.     width:736px;
  118.     height:405px;
  119.     border: solid 1px #e9e9e9;
  120.     overflow:scroll;
  121. }
  122.  
  123. .box {
  124.     display:inline-block;
  125.     padding: 25px;
  126.     width:130px;
  127.     vertical-align:top;
  128. }
  129.  
  130. .box img{
  131.     width:130px;
  132.     height:130px;
  133. }
  134.  
  135. .info {
  136.     margin-top:-5px;
  137. }
  138.  
  139. .name {
  140.     border:solid 1px #f1f1f1;
  141.     background:#fafafa;
  142.     font-weight:bold;
  143.     padding:4px;
  144.     text-transform:uppercase;
  145.     text-align:center;
  146. }
  147.  
  148. .group {
  149.     padding:2px;
  150.     text-align:center;
  151.     margin-top:3px;
  152.     text-transform:uppercase;
  153.     font-size:9px;
  154. }
  155.  
  156. .cred {
  157.     position:fixed;
  158.     right:10px;
  159.     bottom:10px;
  160.     font-size:11px;
  161.     color:#000;
  162. }
  163.  
  164.  
  165. </style>
  166. </head>
  167.  
  168. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  169. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  170. <script>
  171. (function($){
  172. $(document).ready(function(){
  173. $("a[title]").style_my_tooltips({
  174. tip_follows_cursor:true,
  175. tip_delay_time:30,
  176. tip_fade_speed:300,
  177. attribute:"title"
  178. });
  179. });
  180. })(jQuery);
  181. </script>
  182.  
  183. <body>
  184.  
  185.  
  186. <div class="container">
  187.  
  188. <!-- TOP INFO -->
  189.  
  190. <div class="title">title</div> <!-- PAGE TITLE -->
  191.  
  192. <div class="links">
  193.     <a href="/">home</a>
  194.     <a href="/ask">ask</a>
  195.     <a href="https://www.tumblr.com/">dash</a>
  196. </div>
  197.  
  198. <!------------ START BOXES  --------->
  199.  
  200. <div class="boxes">
  201.  
  202.  
  203. <!--           start box            -->
  204.  
  205.  
  206. <div class="box">
  207.     <a href="/"><img src="IMAGE URL"/></a>
  208.    
  209.     <div class="info">
  210.     <div class="name">
  211.         <a href="/">BIAS NAME</a>
  212.     </div>
  213.     <div class="group">
  214.         <a href="/">GROUP NAME</a>
  215.     </div>
  216.     </div>
  217. </div>
  218.  
  219.  
  220. <!--           end box            -->
  221.  
  222.  
  223.    
  224.    
  225.    
  226. </div>
  227.  
  228. <!------------ END BOXES  --------->
  229.  
  230. </div>
  231. <div class="cred"><a href="http://southcodes.tumblr.com/" title="southcodes">×</a></div>
  232. </body>
  233. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement