API tools faq
paste
Advertisement
cleuron

light liliac

cleuron
Apr 24th, 2014
879
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!---MEMBER PAGE NETWORK BY DAENSO @ TUMBLR
  5. don't rediscribute or duplicate
  6. keep the credit intact--->
  7.  
  8. <head>
  9. <title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. <meta name="description" content="{MetaDescription}" />
  13.  
  14. <style type="text/css">
  15.  
  16. body {
  17. font-family:arial;
  18. font-size:9px;
  19.  
  20. }
  21.  
  22. a {
  23. text-decoration:none;
  24.  
  25. }
  26.  
  27. #container {
  28. margin:140px auto auto auto;
  29. }
  30.  
  31. #containertitle {
  32. width:470px;
  33. border-bottom:3px double #dddddd;
  34. line-height:8px;
  35. padding-left:5px;
  36.  
  37. }
  38.  
  39. #title {
  40. font-size:40px;
  41. color:#cccccc;
  42. padding:8px 0px 11px 0px;
  43. text-align:left;
  44. letter-spacing:6px;
  45. font-family:'brannboll fet';
  46.  
  47. }
  48.  
  49. @font-face {font-family:Brannboll Fet; src:url(http://static.tumblr.com/9wzbixa/3mHmj2g3g/brannbollfet.ttf);}
  50.  
  51. .conticon {
  52. width:80px;
  53. height:80px;
  54. margin:6px 6px 6px 6px;
  55.  
  56. }
  57.  
  58. #icone {
  59. width:80px;
  60. height:80px;
  61. border:2px solid #ffffff;
  62. background: #c0c0ff;
  63. overflow:hidden;
  64. position:relative;
  65. z-index:9;
  66. box-shadow:2px 2px 2px #eeeeee;
  67.  
  68. }
  69.  
  70. #icone:hover {
  71. -webkit-transition: all 0.8s ease-out;
  72. -moz-transition: all 0.8s ease-out;
  73. transition: all 0.8s ease-out;
  74. position:relative;
  75. overflow-y:auto;
  76. z-index:99;
  77.  
  78. }
  79.  
  80. #icone img {
  81. width:80px;
  82. height:80px;
  83. -webkit-transition: all 0.8s ease-out;
  84. -moz-transition: all 0.8s ease-out;
  85. transition: all 0.8s ease-out;
  86.  
  87. }
  88.  
  89. #icone:hover img {
  90. opacity:0;
  91. width:80px;
  92. height:0px;
  93. margin-top:-30px;
  94. -webkit-transition: all 0.8s ease-out;
  95. -moz-transition: all 0.8s ease-out;
  96. transition: all 0.8s ease-out;
  97. z-index:99;
  98.  
  99. }
  100.  
  101. #s-m-t-tooltip {
  102. max-width:200px;
  103. margin-top:25px;
  104. margin-left:20px;
  105. padding-left:1px;
  106. padding-right:1px;
  107. padding-bottom:1px;
  108. padding-top:1px;
  109. z-index:999;
  110. background-color:#ffffff;
  111. color:#cccccc;
  112. font-family:helvetica;
  113. font-size:9px;
  114. letter-spacing:1px;
  115. text-transform:lowercase;
  116. line-height:12px;
  117. border:1px solid #dddddd;
  118. box-shadow: 1px 1px 1px #dddddd;
  119.  
  120. }
  121.  
  122. iframe#tumblr_controls {top:2px!important; right:2px!important; position:fixed!important;-webkit-transition: opacity 0.5s linear;opacity: 0.5;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}
  123.  
  124. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.5s linear;opacity: 0.8;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}
  125.  
  126. ::-webkit-scrollbar {
  127. width:3px;
  128. height:3px;
  129.  
  130. }
  131.  
  132. ::-webkit-scrollbar-track-piece {
  133. background-color:#ffffff;
  134.  
  135. }
  136.  
  137. ::-webkit-scrollbar-thumb {
  138. background-color: #bcbcc4;
  139.  
  140. }
  141.  
  142. #hoverpage {
  143. -webkit-transition: all 0.8s ease-out;
  144. -moz-transition: all 0.8s ease-out;
  145. transition: all 0.8s ease-out;
  146. height:80px;
  147. z-index:9;
  148.  
  149. }
  150.  
  151. #icone:hover #hoverpage {
  152. background-color:#c0c0ff;
  153.  
  154. }
  155.  
  156. #linke {
  157. text-align:center;
  158. font-size:8px;
  159. color:#ffffff;
  160. text-transform:uppercase;
  161. font-family:helvetica;
  162.  
  163. }
  164.  
  165.  
  166. #navbox {
  167. width:200px;
  168. height:auto;
  169. background:;
  170. position:float;
  171. margin-top:0px;
  172. margin-left:350px;
  173. }
  174.  
  175. #box1{
  176. height:20px;
  177. width:20px;
  178. display:inline-block;
  179. position:absolute;
  180. margin-left:0px;
  181. overflow:hidden;
  182. background:#c0c0ff;
  183. border:1px solid #c0c0ff;
  184. -webkit-transition: all 0.5s ease-out;
  185. -moz-transition: all 0.5s ease-out;
  186. transition: all 0.5s ease-out;
  187. border-radius:20px;
  188. }
  189.  
  190. #box1:hover {
  191. background:#eeeeee;
  192. }
  193.  
  194. #box2{
  195. height:20px;
  196. width:20px;
  197. display:inline-block;
  198. position:absolute;
  199. margin-left:0px;
  200. margin-left:28px;
  201. overflow:hidden;
  202. background:#c0c0ff;
  203. border:1px solid #c0c0ff;
  204. -webkit-transition: all 0.5s ease-out;
  205. -moz-transition: all 0.5s ease-out;
  206. transition: all 0.5s ease-out;
  207. border-radius:20px;
  208. }
  209.  
  210. #box2:hover {
  211. background:#eeeeee;
  212. }
  213.  
  214. .icon {
  215. -webkit-transition: all 0.5s ease-out;
  216. -moz-transition: all 0.5s ease-out;
  217. transition: all 0.5s ease-out;
  218. }
  219.  
  220. .icon img{
  221. padding:5px;
  222. }
  223.  
  224. .desc {
  225. text-align:left;
  226. color:#ffffff;
  227. padding-left:2px;
  228. }
  229.  
  230. </style>
  231. </head>
  232.  
  233. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  234. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  235. <script>
  236. (function($){
  237. $(document).ready(function(){
  238. $("[title],a[title],img[title]").style_my_tooltips({
  239. tip_follows_cursor:true,
  240. tip_delay_time:100,
  241. tip_fade_speed:250,
  242. attribute:"title"
  243. });
  244. });
  245. })(jQuery);
  246. </script>
  247.  
  248. <body>
  249. <table id="container" cellpadding="0" cellspacing="0">
  250.  
  251. <tr><td colspan="5">
  252. <div id="containertitle"><div id="title">members<!--your title here-->
  253.  
  254. <div id="navbox">
  255.  
  256. <div id="box1">
  257. <div style="margin-top:1px;"><div class="icon"><a href="http://daenso.tumblr.com" title="theme" ><img src="http://i.imgur.com/D1iuJwq.png" /></a></div></div></div>
  258.  
  259. <div id="box2">
  260. <div style="margin-top:1px;"><div class="icon"><a href="/" title="back" ><img src="http://i.imgur.com/1gzOJjY.png" /></a></div></div></div>
  261. </div>
  262. </div>
  263. </div>
  264. <br>
  265. </td></tr>
  266. <!--first row--><tr>
  267.  
  268. <!--you have to modify this part of the code: below-->
  269. <!--if you want to duplicate a row you just have to copy/past it after the first two from the ! "first row" to "first row end"-->
  270.  
  271. <td><div class="conticon">
  272. <div id="icone">
  273. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  274. <div id="hoverpage">
  275. <a href="http://daenso.tumblr.com/" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  276. <div class="desc">
  277. <b>role:</b> role
  278. <br><b>name:</b> name
  279. <br><b>tweet:</b> @
  280. <br><b>blog:</b>
  281. </div>
  282.  
  283. </div>
  284. </div>
  285. </div></td>
  286.  
  287. <td><div class="conticon">
  288. <div id="icone">
  289. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  290. <div id="hoverpage">
  291. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  292. <div class="desc">
  293. <b>role:</b>
  294. <br><b>name:</b>
  295. <br><b>tweet:</b>
  296. <br><b>blog:</b>
  297. </div>
  298.  
  299. </div>
  300. </div>
  301. </div></td>
  302.  
  303. <td><div class="conticon">
  304. <div id="icone">
  305. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  306. <div id="hoverpage">
  307. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  308. <div class="desc">
  309. <b>role:</b>
  310. <br><b>name:</b>
  311. <br><b>tweet:</b>
  312. <br><b>blog:</b>
  313. </div>
  314.  
  315. </div>
  316. </div>
  317. </div></td>
  318.  
  319. <td><div class="conticon">
  320. <div id="icone">
  321. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  322. <div id="hoverpage">
  323. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  324. <div class="desc">
  325. <b>role:</b>
  326. <br><b>name:</b>
  327. <br><b>tweet:</b>
  328. <br><b>blog:</b>
  329. </div>
  330.  
  331. </div>
  332. </div>
  333. </div></td>
  334.  
  335. <td><div class="conticon">
  336. <div id="icone">
  337. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  338. <div id="hoverpage">
  339. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  340. <div class="desc">
  341. <b>role:</b>
  342. <br><b>name:</b>
  343. <br><b>tweet:</b>
  344. <br><b>blog:</b>
  345. </div>
  346.  
  347. </div>
  348. </div>
  349. </div></td>
  350.  
  351. <!--first row end-->
  352. <!--second row-->
  353.  
  354. <tr><td><div class="conticon">
  355. <div id="icone">
  356. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  357. <div id="hoverpage">
  358. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  359. <div class="desc">
  360. <b>role:</b>
  361. <br><b>name:</b>
  362. <br><b>tweet:</b>
  363. <br><b>blog:</b>
  364. </div>
  365.  
  366. </div>
  367. </div>
  368. </div></td>
  369.  
  370. <td><div class="conticon">
  371. <div id="icone">
  372. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  373. <div id="hoverpage">
  374. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  375. <div class="desc">
  376. <b>role:</b>
  377. <br><b>name:</b>
  378. <br><b>tweet:</b>
  379. <br><b>blog:</b>
  380. </div>
  381.  
  382. </div>
  383. </div>
  384. </div></td>
  385.  
  386. <td><div class="conticon">
  387. <div id="icone">
  388. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  389. <div id="hoverpage">
  390. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  391. <div class="desc">
  392. <b>role:</b>
  393. <br><b>name:</b>
  394. <br><b>tweet:</b>
  395. <br><b>blog:</b>
  396. </div>
  397.  
  398. </div>
  399. </div>
  400. </div></td>
  401.  
  402. <td><div class="conticon">
  403. <div id="icone">
  404. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  405. <div id="hoverpage">
  406. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  407. <div class="desc">
  408. <b>role:</b>
  409. <br><b>name:</b>
  410. <br><b>tweet:</b>
  411. <br><b>blog:</b>
  412. </div>
  413.  
  414. </div>
  415. </div>
  416. </div></td>
  417.  
  418. <td><div class="conticon">
  419. <div id="icone">
  420. <img src="http://i.imgur.com/DpdefjX.png"/><!--here goes your icon-->
  421. <div id="hoverpage">
  422. <a href="LINK BLOG HERE" title="YOUR BLOG NAME"><div id="linke">name</div></a><!--here your link and name-->
  423. <div class="desc">
  424. <b>role:</b>
  425. <br><b>name:</b>
  426. <br><b>tweet:</b>
  427. <br><b>blog:</b>
  428. </div>
  429.  
  430. </div>
  431. </div>
  432. </div></td>
  433.  
  434. </tr>
  435.  
  436. <!--second row end-->
  437. <!--to add other rows just copy one whole row and past it below before table-->
  438.  
  439. </table>
  440.  
  441. </body>
  442. </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!