API tools faq
paste
Advertisement
sexycullen

104 scroll bar

sexycullen
Nov 7th, 2015
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.87 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  
  7. <!--------------------------------------------
  8. THEME # 104
  9. BY: http://britishrobert.tumblr.com/ (PREV SPUNKHANDSOME)
  10.  
  11. RULES, IMPORTANT: DON'T REMOVE THE CREDIT // DON'T CLAIM AS YOUR OWN // DON'T USE AS A BASE
  12.  
  13. --------------------------------------------->
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  18. <meta name="description" content="" />
  19. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  20.  
  21. <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Kotta+One' rel='stylesheet' type='text/css'>
  26.  
  27. <link href='http://fonts.googleapis.com/css?family=Junge' rel='stylesheet' type='text/css'>
  28.  
  29. <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
  30.  
  31. <script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  32. <script type="text/javascript">
  33. $(document).ready(function(){
  34. $(".links_body").hide();
  35. $(".links_head").click(function(){
  36. $(this).next(".links_body").slideToggle('fast');
  37. }); }); </script>
  38.  
  39.  
  40. <style type="text/css">
  41.  
  42. ::-webkit-scrollbar {background-color: transparent; height:4px; width:3px}
  43. ::-webkit-scrollbar-thumb:vertical {background-color:#000000; height:50px}
  44. ::-webkit-scrollbar-thumb:horizontal {background-color:#FFFFFF; height:8px!important}
  45.  
  46. body {
  47. color: {color:Text};
  48. background-color:#FFFFFF;
  49. }
  50.  
  51. a {
  52. color: #575757;
  53. text-decoration: none;
  54. -moz-transition-duration: 0.5s;
  55. -o-transition-duration: 0.5s;
  56. -webkit-transition-duration: 0.5s;
  57. transition-duration: 0.5s;
  58. }
  59.  
  60. a:hover {
  61. color: #000000;
  62. -moz-transition-duration: 0.5s;
  63. -o-transition-duration: 0.5s;
  64. -webkit-transition-duration: 0.5s;
  65. transition-duration: 0.5s;
  66. }
  67.  
  68. .sidebar {
  69. margin:auto;
  70. top:130px;
  71. margin-left:-60px;
  72. }
  73.  
  74. .part1 {
  75. padding:2px;
  76. top:140px;
  77. margin:auto;
  78. position:relative;
  79. }
  80.  
  81. .table1 {
  82. width:450px;
  83. margin-left:176px;
  84. padding:0px 3px 3px 3px;
  85. border-right: 0px solid #F5F5F5;
  86. }
  87.  
  88. .links1 {
  89. text-transform: uppercase;
  90. letter-spacing: 0px;
  91. font-size:9px;
  92. letter-spacing:1px;
  93. text-align:none;
  94. padding:4px;
  95. line-height:290%;
  96. margin: 5px 0 6px 0;
  97. color:#575757;
  98. border-bottom: 1px solid #F5F5F5;
  99. }
  100.  
  101. .links1 a {
  102. border-bottom: 0px solid #f0f0f0;
  103. padding:3px;
  104. }
  105.  
  106. .links1 a:hover {
  107. letter-spacing:1px;
  108. -moz-transition-duration: 0.5s;
  109. -o-transition-duration: 0.5s;
  110. -webkit-transition-duration: 0.5s;
  111. transition-duration: 0.5s;
  112. }
  113.  
  114. .partt1 {
  115. padding:2px;
  116. top:18px;
  117. margin:auto;
  118. position:fixed;
  119. }
  120.  
  121. .tablee1 {
  122. width:750px;
  123. margin-left:176px;
  124. padding:0px 3px 3px 3px;
  125. border-right: 0px solid #F5F5F5;
  126. }
  127.  
  128. .linkss1 {
  129. text-transform: none;
  130. font-size:11px;
  131. text-align:none;
  132. padding:4px;
  133. line-height:160%;
  134. margin: 5px 0 6px 0;
  135. color:#575757;
  136. border-bottom: 0px solid #F5F5F5;
  137. }
  138.  
  139. .container {
  140. width:1000px;
  141. height:auto;
  142. position:relative;
  143. margin:auto;
  144. top: 3px;
  145. left:1px;
  146. border: 0px solid #f0f0f0;
  147. }
  148.  
  149.  
  150. ul#tabs {
  151. width:1150px;
  152. float:left;
  153. margin-left:1px;
  154. list-style-type: none;
  155. padding: 0;
  156. }
  157.  
  158. .chars {
  159. width:750px;
  160. height:250px;
  161. margin:auto;
  162. position:relative;
  163. margin-top: 140px;
  164. margin-bottom:60px;
  165. margin-left:90px;
  166. padding:35px;
  167. border: 1px solid #F5F5F5;
  168. overflow-y:hidden;
  169. overflow-x:scroll;
  170. }
  171.  
  172. .table:hover .name { margin-top:2px;filter: alpha(opacity = 100);
  173. opacity:100;-webkit-transition: all 0.5s ease-out;
  174. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  175.  
  176. .table:hover .basic { margin-top:-170px;filter: alpha(opacity = 100);
  177. opacity:100;-webkit-transition: all 0.5s ease-out;
  178. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  179.  
  180. .table:hover .image {margin-top:0px;filter: alpha(opacity = 10);
  181. opacity:0;-webkit-transition: all 0.5s ease-out;
  182. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  183.  
  184. .table:hover .name {margin-top:60px;filter: alpha(opacity = 20);
  185. opacity:0;-webkit-transition: all 0.5s ease-out;
  186. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  187.  
  188.  
  189. .table {
  190. width:160px;
  191. height:auto;
  192. position:relative;
  193. margin-left:20px;
  194. margin-bottom:35px;
  195. text-align:center;
  196. margin-top:5px;
  197. top:4px;
  198. display:inline-block;
  199. border: 0px solid #f0f0f0;
  200. }
  201.  
  202. .image {
  203. width:160px;
  204. height:auto;
  205. -webkit-transition:0.7s ease; opacity:100;
  206. border-bottom: 1px solid #f0f0f0;
  207. }
  208.  
  209.  
  210. .name {
  211. width:160px;
  212. font-size:10px;
  213. letter-spacing:1px;
  214. margin-top:160px;
  215. padding-top:5px;
  216. padding-bottom:5px;
  217. text-align:center;
  218. text-transform:uppercase;
  219. font-weight:none;
  220. -webkit-transition:0.7s ease; position:absolute; opacity:100;
  221. }
  222.  
  223. .name a {
  224. padding-top:2px;
  225. padding-bottom:2px;
  226. padding-right:3px;
  227. padding-left:3px;
  228. background-color:#fff;
  229. border-bottom: 2px solid #f0f0f0;
  230. color:#575757;
  231. }
  232.  
  233. .basic {
  234. width:160px;
  235. text-align:justify;
  236. font-size:10px;
  237. line-height:130%;
  238. padding:5px 3px;
  239. margin-top:-170px;
  240. color:#575757;
  241. -webkit-transition:0.7s ease; position:absolute; opacity:0;
  242. }
  243.  
  244. .links_list { margin:0px; padding:0px; width:100%;}
  245. .links_head { width:160px;padding-top:10px; padding-bottom:4px; cursor:pointer; position:relative; margin:1px; text-align:center;
  246. border-bottom:0px solid {color:Sidebar Border};
  247. font-size:10px;
  248. text-transform:uppercase;
  249. letter-spacing:0px;}
  250. .links_body {padding-bottom:10px;padding:5px; text-align:center; display:none;
  251. margin-bottom:4px;
  252. margin-top:5px;
  253. margin-left:0px;
  254. font-size:10px;
  255. text-transform:lowercase;
  256. letter-spacing:0px;
  257. border-bottom:0px dashed {color:Sidebar Border};
  258. }
  259.  
  260. .links_body a {padding:1px;}
  261.  
  262. .links {
  263. letter-spacing: 0px;
  264. font-size:10px;
  265. font-family: calibri;
  266. padding:4px 3px;
  267. margin: 5px 0 6px 0;
  268. color:#262626;
  269. border-bottom: 0px solid #f0f0f0;
  270. }
  271.  
  272. .links a {
  273. padding:3px;
  274. }
  275.  
  276. .info {
  277. padding:4px;
  278. margin:1px;
  279. text-align:justify;
  280. font-size:10px;
  281. font-family: calibri;
  282. color:#000000;
  283. }
  284.  
  285. .credit {
  286. position:fixed;
  287. font-family:calibri;
  288. font-size:8px;
  289. font-weight:normal;
  290. line-height:150%;
  291. letter-spacing:0px;
  292. right:5px;
  293. bottom:20px;
  294. text-transform:uppercase;
  295. text-align:center;
  296. }
  297.  
  298. .credit a {
  299. font-style:normal;
  300. padding:3px;
  301. color:{color:link};
  302. -moz-transition-duration:0.5s;
  303. -webkit-transition-duration:0.5s;
  304. -o-transition-duration:0.5s;
  305. }
  306.  
  307. </style>
  308. </head>
  309. <body>
  310. <div class="container">
  311. <div class="sidebar">
  312. <td>
  313.  
  314. <div class="part1">
  315. <div class="table1">
  316.  
  317. <div class="links1">
  318. <a href="/">back to home</a>
  319. <a href="/dashboard">dashboard</a>
  320. <a href="/">extra</a>
  321. <a href="/">extra</a>
  322. </div>
  323.  
  324. </div>
  325. </div>
  326.  
  327. </div>
  328. </td>
  329.  
  330.  
  331. <div class="chars">
  332.  
  333. <ul id="tabs">
  334.  
  335. <! 1 >
  336. <tr>
  337. <div class="table">
  338.  
  339. <div class="name">
  340. <code><a href="/">NAME HERE</a></code>
  341. </div>
  342. <center>
  343. <img src="http://i.imgur.com/keAspLn.png" class="image">
  344. <div class="basic">
  345. “Meet NAME, but known as NICKNAME. She has YEARS OLD and lives in NY. Only child, parents were demanding, but it was good for HER/HIM. NAME likes taking photos of everything S/HE finds interesting, is HER/HIM biggest hobby and passion. S/HE currently works by making picture books who are interested in HER/HIS work and in a coffee shop near HER/HIS apartment.”
  346. <br><br>
  347. <b>╺ labeled as. </b> the dreamer <br>
  348. <b>╺ orientation. </b> straight <br>
  349. <b>╺ good N bad. </b> insecure <b>&. </b> mature
  350. <br><br>
  351. <a href="/">pictures</a> △ <a href="/">interation</a> △ <a href=""/>verses</a>△ <a href="/">likes</a>
  352. </div>
  353. </div>
  354.  
  355.  
  356.  
  357. <! 2 >
  358. <tr>
  359. <div class="table">
  360.  
  361. <div class="name">
  362. <code><a href="/">NAME HERE</a></code>
  363. </div>
  364. <center><img src="http://i.imgur.com/keAspLn.png" class="image">
  365. <div class="basic">
  366. “Meet NAME, but known as NICKNAME. She has YEARS OLD and lives in NY. Only child, parents were demanding, but it was good for HER/HIM. NAME likes taking photos of everything S/HE finds interesting, is HER/HIM biggest hobby and passion. S/HE currently works by making picture books who are interested in HER/HIS work and in a coffee shop near HER/HIS apartment.”
  367. <br><br>
  368. <b>╺ labeled as. </b> the dreamer <br>
  369. <b>╺ orientation. </b> straight <br>
  370. <b>╺ good N bad. </b> insecure <b>&. </b> mature
  371. <br><br>
  372. <a href="/">pictures</a> △ <a href="/">interation</a> △ <a href=""/>verses</a>△ <a href="/">likes</a>
  373. </div>
  374. </div>
  375.  
  376.  
  377. <! 3 >
  378. <tr>
  379. <div class="table">
  380.  
  381. <div class="name">
  382. <code><a href="/">NAME HERE</a></code>
  383. </div>
  384. <center><img src="http://i.imgur.com/keAspLn.png" class="image">
  385. <div class="basic">
  386. “Meet NAME, but known as NICKNAME. She has YEARS OLD and lives in NY. Only child, parents were demanding, but it was good for HER/HIM. NAME likes taking photos of everything S/HE finds interesting, is HER/HIM biggest hobby and passion. S/HE currently works by making picture books who are interested in HER/HIS work and in a coffee shop near HER/HIS apartment.”
  387. <br><br>
  388. <b>╺ labeled as. </b> the dreamer <br>
  389. <b>╺ orientation. </b> straight <br>
  390. <b>╺ good N bad. </b> insecure <b>&. </b> mature
  391. <br><br>
  392. <a href="/">pictures</a> △ <a href="/">interation</a> △ <a href=""/>verses</a>△ <a href="/">likes</a>
  393. </div>
  394. </div>
  395.  
  396.  
  397. <! 4 >
  398. <tr>
  399. <div class="table">
  400.  
  401. <div class="name">
  402. <code><a href="/">NAME HERE</a></code>
  403. </div>
  404. <center><img src="http://i.imgur.com/keAspLn.png" class="image">
  405. <div class="basic">
  406. “Meet NAME, but known as NICKNAME. She has YEARS OLD and lives in NY. Only child, parents were demanding, but it was good for HER/HIM. NAME likes taking photos of everything S/HE finds interesting, is HER/HIM biggest hobby and passion. S/HE currently works by making picture books who are interested in HER/HIS work and in a coffee shop near HER/HIS apartment.”
  407. <br><br>
  408. <b>╺ labeled as. </b> the dreamer <br>
  409. <b>╺ orientation. </b> straight <br>
  410. <b>╺ good N bad. </b> insecure <b>&. </b> mature
  411. <br><br>
  412. <a href="/">pictures</a> △ <a href="/">interation</a> △ <a href=""/>verses</a>△ <a href="/">likes</a>
  413. </div>
  414. </div>
  415.  
  416.  
  417.  
  418. <! 5 >
  419. <tr>
  420. <div class="table">
  421.  
  422. <div class="name">
  423. <code><a href="/">NAME HERE</a></code>
  424. </div>
  425. <center><img src="http://i.imgur.com/keAspLn.png" class="image">
  426. <div class="basic">
  427. “Meet NAME, but known as NICKNAME. She has YEARS OLD and lives in NY. Only child, parents were demanding, but it was good for HER/HIM. NAME likes taking photos of everything S/HE finds interesting, is HER/HIM biggest hobby and passion. S/HE currently works by making picture books who are interested in HER/HIS work and in a coffee shop near HER/HIS apartment.”
  428. <br><br>
  429. <b>╺ labeled as. </b> the dreamer <br>
  430. <b>╺ orientation. </b> straight <br>
  431. <b>╺ good N bad. </b> insecure <b>&. </b> mature
  432. <br><br>
  433. <a href="/">pictures</a> △ <a href="/">interation</a> △ <a href=""/>verses</a>△ <a href="/">likes</a>
  434. </div>
  435. </div>
  436.  
  437.  
  438. <! 6 >
  439. <tr>
  440. <div class="table">
  441.  
  442. <div class="name">
  443. <code><a href="/">NAME HERE</a></code>
  444. </div>
  445. <center><img src="http://i.imgur.com/keAspLn.png" class="image">
  446. <div class="basic">
  447. “Meet NAME, but known as NICKNAME. She has YEARS OLD and lives in NY. Only child, parents were demanding, but it was good for HER/HIM. NAME likes taking photos of everything S/HE finds interesting, is HER/HIM biggest hobby and passion. S/HE currently works by making picture books who are interested in HER/HIS work and in a coffee shop near HER/HIS apartment.”
  448. <br><br>
  449. <b>╺ labeled as. </b> the dreamer <br>
  450. <b>╺ orientation. </b> straight <br>
  451. <b>╺ good N bad. </b> insecure <b>&. </b> mature
  452. <br><br>
  453. <a href="/">pictures</a> △ <a href="/">interation</a> △ <a href=""/>verses</a>△ <a href="/">likes</a>
  454. </div>
  455. </div>
  456.  
  457. </ul>
  458.  
  459.  
  460.  
  461.  
  462. <div class="credit"><a href="http://britishrobert.tumblr.com/"><u>britishrobert</u></a></div>
  463.  
  464.  
  465. </div>
  466. </div>
  467. </div>
  468.  
  469.  
  470. </body>
  471. </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!