API tools faq
paste
Advertisement
lostmemento

→ Gravity - All in One Page (Modern Ver)

lostmemento
Apr 25th, 2014
887
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.08 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <!--------------------------------------------
  4. Gravity (All In One Page) - Modern Ver
  5. MADE BY: http://lostmemento.tumblr.com (lmthemes)
  6. ---------------------------------------------
  7.  
  8. TERMS OF USAGE:
  9. - DO NOT REMOVE THE CREDIT
  10. - DO NOT REDISTRIBUTE
  11. - DO NOT CLAIM AS YOUR OWN
  12. - DO NOT USE AS A BASE
  13.  
  14. --------------------------------------------->
  15.  
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  21. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  22.  
  23. <script type="text/javascript" src="http://static.tumblr.com/bkd4m5b/bHXn2g6ev/1.8.2.jquery.min.js"></script>
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Oswald|Six+Caps' rel='stylesheet' type='text/css'>
  26.  
  27.  
  28. <script>
  29. $().ready(function() {
  30. $("[title]").style_my_tooltips({
  31. tip_follows_cursor: "on", //on/off
  32. tip_delay_time: 80 //milliseconds
  33. });
  34. });
  35. </script>
  36.  
  37.  
  38.  
  39. <style type="text/css">
  40.  
  41. body{line-height: 110%; margin:0px; padding:0px;
  42. font-size: 11px;
  43. font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  44. background-color: #fbfbfb;
  45. color: #000;}
  46.  
  47. a {text-decoration: none;
  48. transition-duration: 0.6s;
  49. -moz-transition-duration: 0.6s;
  50. -webkit-transition-duration: 0.6s;
  51. -o-transition-duration: 0.6s;}
  52.  
  53. a:-webkit-any-link {text-decoration: none;}
  54.  
  55. img {margin-bottom: -2px;}
  56.  
  57. ::-webkit-scrollbar-thumb {background-color: #fff; height: auto; border: 3px solid rgba(0, 0, 0, 0.9);}
  58. ::-webkit-scrollbar {background-color: #fff; height:10px; width:12px; border: 5px solid rgba(0, 0, 0, 0.9);}
  59.  
  60. #s-m-t-tooltip{position:absolute; z-index:90000; display:inline-block; word-wrap: break-word; word-break: break-all; line-height: 120%; padding: 6px 10px;
  61. background-color: #000;
  62. color: #fff;
  63. border: 1px solid #fff;
  64. font-size: 8px;
  65. text-transform: uppercase;
  66. letter-spacing: 1px;}
  67.  
  68.  
  69. #mid {width: 500px; margin: auto;}
  70. #cont {display: table; position: fixed; height: 100%; width: 500px; top: -20px; }
  71. #container {display: table-cell; vertical-align: middle; }
  72.  
  73. .til {text-align: right; padding: 40px; line-height: 90%; height: 20px;
  74. letter-spacing: 3px;
  75. background-color: #000;
  76. color: #fff;
  77. font-family: 'Six Caps';
  78. font-size: 30px;}
  79.  
  80. .cpb, .cpc span {background-color: #000;}
  81. #cp a {color: #fff;}
  82. .cpb:before {background-color: #000;}
  83. #cp:hover .cpc {margin-left: -20px;}
  84.  
  85. .sp-slideshow {position: relative; width: 450px; height: 450px;}
  86.  
  87. .sp-content {position: relative;width: 100%;height: 100%; overflow: hidden;
  88. border: 25px solid #fff;
  89. background-color:#fff; }
  90.  
  91. .sp-parallax-bg {-webkit-background-size: cover; -moz-background-size: cover; background-size: cover; position: absolute;top: 0;left: 0;width: 450px; height: 450px; overflow: hidden;
  92. /***********************************************************
  93. REPLACE THE BACKGROUND IMAGE BETWEEN THE 's
  94. ***********************************************************/
  95. background: url('http://static.tumblr.com/bkd4m5b/AYrn43okr/ph.png') repeat-x scroll 0 0;}
  96.  
  97. .sp-slideshow input[type=radio] {position: absolute; bottom: 0px; left: 250px; z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}
  98.  
  99. .sp-slideshow input[type=radio] + label {position: absolute; top: 0px; left: 0px; display: block;z-index: 1000; height: 164px; -webkit-transition: background-color linear 0.1s; -moz-transition: background-color linear 0.1s;-o-transition: background-color linear 0.1s;-ms-transition: background-color linear 0.1s;transition: background-color linear 0.1s; cursor: pointer; padding: 1px 4px;
  100. background-color: #000;
  101. font-size: 8px;
  102. text-transform: uppercase;
  103. letter-spacing:1px;
  104. border-bottom: 1px solid #fff;
  105. color: #fff;}
  106.  
  107. .sp-slideshow input[type=radio]:checked + label {padding: 1px 8px; margin-left: -8px;
  108. border-bottom: 1px solid #fff;
  109. background-color: #000;}
  110.  
  111. .sp-selector-1, .button-label-1 {visibility: hidden;} .sp-selector-2, .button-label-2 {margin-left: 0px;} .sp-selector-3, .button-label-3 {margin-left: 0px; margin-top: 167px;} .sp-selector-4, .button-label-4 {margin-left: 0px; margin-top: 334px;} .sp-selector-5, .button-label-5 {margin-left: 36px;}
  112.  
  113. .sq {position: absolute; top: -35px;left: 369px; width: 110px;}
  114. .sq a {display: inline-block; z-index: 1000; margin-left: -2px; padding: 6px 9px;
  115. background-color: #fff;
  116. font-size: 8px;
  117. text-transform: uppercase;
  118. letter-spacing:1px;
  119. color: #000;}
  120.  
  121. .sq a:hover {
  122. background-color: #000;
  123. color: #fff;}
  124.  
  125. .sp-slideshow input[type=radio] + label:hover {padding: 1px 8px; margin-left: -8px;
  126. background-color: #000;
  127. color: #000; }
  128.  
  129. .sp-arrow {display: none}
  130.  
  131. #tt {text-align: right; line-height: 90%; width: 300px; border: 0px; position: absolute; margin-left: -150px; margin-top: -34px;
  132. background-color: #000;
  133. color: #fff;
  134. font-family: 'Six Caps';
  135. font-size: 30px;
  136. letter-spacing: 3px;}
  137.  
  138. .sp-slideshow input[type=radio]:checked ~ .sp-content {-webkit-transition: background-position linear 0.6s, background-color linear 0.8s;-moz-transition: background-position linear 0.6s, background-color linear 0.8s;-o-transition: background-position linear 0.6s, background-color linear 0.8s;-ms-transition: background-position linear 0.6s, background-color linear 0.8s;transition: background-position linear 0.6s, background-color linear 0.8s;}
  139.  
  140. .sp-slideshow input[type=radio]:checked ~ .sp-content .sp-parallax-bg {-webkit-transition: background-position linear 0.7s;-moz-transition: background-position linear 0.7s;-o-transition: background-position linear 0.7s;-ms-transition: background-position linear 0.7s;transition: background-position linear 0.7s;}
  141.  
  142. .sp-slider {position: relative;left: 0; width: 500%;height: 100%;list-style: none; margin: 0;padding: 0;-webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s;transition: left ease-in 0.8s; }
  143.  
  144. .sp-slider > li { height:100%; padding: 0px; width: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float:left; text-align:center; opacity:0.4; -webkit-transition:opacity ease-in 0.4s 0.8s; -moz-transition:opacity ease-in 0.4s 0.8s; -o-transition:opacity ease-in 0.4s 0.8s; -ms-transition:opacity ease-in 0.4s 0.8s; transition:opacity ease-in 0.4s 0.8s; }
  145.  
  146. input.sp-selector-1:checked ~ .sp-content .sp-slider {left: 0;} input.sp-selector-2:checked ~ .sp-content .sp-slider {left: -100%;} input.sp-selector-3:checked ~ .sp-content .sp-slider {left: -200%;} input.sp-selector-4:checked ~ .sp-content .sp-slider {left: -300%;} input.sp-selector-5:checked ~ .sp-content .sp-slider {left: -400%;}
  147.  
  148. input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child, input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2), input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3), input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4), input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){opacity: 1;}
  149.  
  150. .tpbox {width: 430px; height: 430px; margin-top: 0px; padding: 10px; display: table;
  151. background-color: rgba(0, 0, 0, 0.8);}
  152.  
  153. .tpt {position: absolute; bottom: 10px; text-align: left; line-height: 110%;
  154. font-family: 'Six Caps';
  155. font-size: 24px;
  156. color: #fff;
  157. letter-spacing: 5px;}
  158.  
  159. .tpc {vertical-align: middle; display: table-cell; width: 430px;}
  160.  
  161. .tc_a, .tc_l, .tc_b {padding: 20px; text-align: justify; margin: 0px 40px; max-height: 300px; overflow: auto;
  162. background-color: #fff;}
  163.  
  164. .tc_a {max-height: 145px;}
  165. .abt li {list-style: square;}
  166.  
  167. h4 {font-weight: normal; margin: 25px 0px; margin-bottom: 4px;
  168. color: #000;
  169. font-family: 'Oswald';
  170. font-size: 12px;
  171. letter-spacing: 2px;}
  172.  
  173. #ourl {margin-bottom: 5px; padding: 10px 0px; padding-top: 0px;
  174. background-color: transparent;
  175. color: #aaa;
  176. font-size: 8px;
  177. letter-spacing: 1px;}
  178.  
  179. .ou {color: #ddd;}
  180. .ou:hover {color: #fff;}
  181.  
  182. .tc_l, .tc_b {background-color: transparent; padding: 0px; text-align: center;}
  183.  
  184. .tc_l {margin: 0px 40px; overflow-x: hidden; text-align: left; padding-right: 2px; margin-left: 50px;}
  185. .tc_l a {padding: 10px; width: 142px; display: inline-block; margin: 0px -2px; margin-bottom: 2px;
  186. color: #fff;
  187. text-align: left;
  188. font-family: 'Oswald';
  189. font-size: 10px;
  190. background-color: #000;}
  191.  
  192. .tc_l a:hover {
  193. background-color: #fff;
  194. color: #000;}
  195.  
  196. .lb {display: inline-block; margin-right: 5px; padding: 6px 8px; vertical-align: middle;
  197. background-color: #000;
  198. color: #fff;
  199. font-family: calibri;
  200. font-size: 9px;
  201. letter-spacing: 1px;}
  202.  
  203. .tc_l a:nth-of-type(odd) {margin-right: 4px;}
  204. .tc_b a:nth-of-type(odd) {margin-right: 2px;}
  205.  
  206. .tc_b a {display: inline-block; padding: 10px; width: 145px; text-align: left; margin-bottom: 2px; overflow: hidden;
  207. color: #000;
  208. background-color: #fff;}
  209.  
  210. .tc_b a:hover {
  211. background-color: #000;
  212. color: #fff;}
  213.  
  214. .pers {display: inline-block; vertical-align: middle; overflow: hidden; max-width: 118px;
  215. font-family: 'Oswald';
  216. font-size: 9px;
  217. letter-spacing: 1px;
  218. text-transform: uppercase;}
  219.  
  220. li .tpbox .tc_b img {display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 5px;}
  221.  
  222. #fl a {letter-spacing: 2px; text-align: center;}
  223.  
  224. input[type=checkbox] {position:absolute; opacity:0;}
  225.  
  226. h2 {text-align:left; z-index:9999; display: block; margin-bottom: 2px; font-weight: normal; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; padding: 10px; text-align: left;
  227. font-family: 'Oswald';
  228. color: #fff;
  229. font-size: 10px;
  230. background-color: #000;}
  231.  
  232. .tc_l label {cursor:pointer; position:relative; display:block; text-align: left; z-index:9999;
  233. font-family: 'Oswald'; }
  234.  
  235. .tc_l label .lb {vertical-align: 0px;}
  236. .tc_l td {vertical-align: top;}
  237.  
  238. #lsub {max-height:0; overflow:hidden; transition: max-height 0.8s ease;}
  239.  
  240. #lsub a {margin: 2px 0px; display: block; width: 130px;
  241. font-family: calibri;
  242. background-color: #fff;
  243. color: #000;
  244. font-size:10px;
  245. border-left: 10px solid #fff;}
  246.  
  247. #lsub a:hover {padding-left: 15px; width: 125px;
  248. border-left: 10px solid #000;}
  249.  
  250. .tc_l #lsub a:nth-of-type(odd) {margin-right: 0px;}
  251.  
  252. input[type=checkbox]:checked + h2, input[type=checkbox]:hover + h2 {transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;
  253. background-color: #fff; color: #000;}
  254.  
  255. input[type=checkbox]:checked ~ h2 ~ #lsub {max-height:500px; z-index:9999;}
  256.  
  257.  
  258. </style>
  259. </head>
  260. <body>
  261.  
  262.  
  263. <div id="mid"><div id="cont"><div id="container" style="margin-top: 20px;">
  264. <div class="sp-slideshow">
  265. <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" /> <label for="button-1" class="button-label-1"></label>
  266. <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" /> <label for="button-2" class="button-label-2" title="about"></label>
  267. <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> <label for="button-3" class="button-label-3" title="links"></label>
  268. <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> <label for="button-4" class="button-label-4" title="blogroll"></label>
  269.  
  270.  
  271. <div class="sp-content"> <div class="sp-parallax-bg"></div>
  272.  
  273. <ul class="sp-slider clearfix">
  274.  
  275.  
  276. <li><div class="tpbox" style="margin-top: 0px; background-color: transparent;"></div></li>
  277.  
  278.  
  279. <!-------------------
  280. START ABOUT
  281. -------------------->
  282. <li><div class="tpbox"><div class="tpc">
  283.  
  284. <div class="tc_a">
  285. <!---------------------------------
  286. WRITE YOUR ABOUT ME BELOW
  287. ----------------------------------->
  288. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec viverra odio, vitae elementum lorem. Curabitur faucibus viverra pretium. Curabitur quis nibh lacinia, gravida diam non, interdum nisi. Quisque posuere fringilla sapien, eget vehicula tortor tincidunt sed. Maecenas justo velit, euismod sed sem ut, vestibulum congue ante. Integer lobortis ipsum adipiscing, posuere massa et, ultricies urna. Aenean elementum porta auctor. In hac habitasse platea dictumst. Quisque accumsan nunc lacinia volutpat blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  289. <!---------------------------------
  290. WRITE YOUR ABOUT ME ABOVE
  291. ----------------------------------->
  292. </div>
  293. <div style="position: absolute; margin-left: 40px; margin-top: 40px;"><span class="tpt">ABOUT</span></div>
  294. </div></div></li>
  295. <!-------------------
  296. END ABOUT
  297. -------------------->
  298.  
  299.  
  300. <!-------------------
  301. START LINKS
  302. -------------------->
  303. <li><div class="tpbox"><div class="tpc">
  304. <div class="tc_l">
  305.  
  306. <a href="http://"><div class="lb" style="padding: 6px 11px;">I</div>LINK 1</a>
  307. <a href="http://" style="width: 140px"><div class="lb" style="padding: 6px 10px;">II</div>LINK 2</a><br>
  308. <table cellpading="0" cellspacing="0" style="text-align: left; margin-left: -1px;"><tr><td width="142px">
  309. <input type="checkbox" id="01">
  310. <h2><label for="01"><div class="lb">III</div> MOVIE LINKS</label></h2>
  311. <div id="lsub">
  312. <a href="/tagged/">kiss kiss bang bang</a>
  313. <a href="/tagged/">the dark knight</a>
  314. <a href="/tagged/">life aquatic with steve zissou</a>
  315. <a href="/tagged/">kiss kiss bang bang</a>
  316. <a href="/tagged/">the dark knight</a>
  317. <a href="/tagged/">life aquatic with steve zissou</a>
  318. </div>
  319. </td>
  320.  
  321. <td width="142px" style="padding-left: 3px;">
  322. <input type="checkbox" id="02">
  323. <h2><label for="02"><div class="lb">IV</div> MOVIE LINKS</label></h2>
  324. <div id="lsub">
  325. <a href="/tagged/">kiss kiss bang bang</a>
  326. <a href="/tagged/">the dark knight</a>
  327. <a href="/tagged/">life aquatic with steve zissou</a>
  328. </div>
  329.  
  330.  
  331. </td>
  332. </tr></table>
  333.  
  334. </div>
  335. <div style="position: absolute; margin-left: 50px; margin-top: 40px;"><span class="tpt">LINKS</span></div>
  336. </div></div></li>
  337. <!-------------------
  338. END LINKS
  339. -------------------->
  340.  
  341.  
  342.  
  343. <!-------------------
  344. START BLOGROLL
  345. -------------------->
  346. {block:Following}
  347. <li><div class="tpbox"><div class="tpc">
  348. <div class="tc_b">
  349. {block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}"> <div class="pers">{FollowedName}</div></a>{/block:Followed}
  350. </div>
  351. <div style="position: absolute; margin-left: 40px; margin-top: 40px;"><span class="tpt">BLOGROLL</span></div>
  352. </div></div></li>
  353. {/block:Following}
  354. <!-------------------
  355. END BLOGROLL
  356. -------------------->
  357. </ul></div></div>
  358.  
  359. <div style="position: relative; z-index: 10000; margin-top: 60px;">
  360. <div class="sq"><a href="/">BACK</a> <a href="http://tumblr.com">DASHBOARD</a></div></div></div>
  361.  
  362.  
  363.  
  364.  
  365. </body>
  366. </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!