API tools faq
paste
Advertisement
lostmemento

→ Gravity - All in One Page

lostmemento
Apr 25th, 2014
5,364
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.80 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <!--------------------------------------------
  4. Gravity (All In One Page)
  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{margin:0px; padding:0px; line-height: 110%;
  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 {height: auto;
  58. background-color: #fff;
  59. border: 3px solid rgba(0, 0, 0, 0.9);}
  60.  
  61. ::-webkit-scrollbar {height:10px; width:12px;
  62. background-color: #fff;
  63. border: 5px solid rgba(0, 0, 0, 0.9);}
  64.  
  65. #s-m-t-tooltip{position:absolute; z-index:90000; display:inline-block; padding: 6px 10px; word-wrap: break-word; word-break: break-all; line-height: 120%;
  66. background-color: #000;
  67. color: #fff;
  68. border: 1px solid #fff;
  69. font-size: 8px;
  70. text-transform: uppercase;
  71. letter-spacing: 1px;}
  72.  
  73.  
  74. #mid {width: 500px; margin: auto;}
  75. #cont {display: table; height: 100%; position: fixed; width: 500px; top: -20px;}
  76. #container {display: table-cell; vertical-align: middle;}
  77.  
  78. .til {text-align: right; line-height: 90%; height: 20px;
  79. background-color: #000;
  80. color: #fff;
  81. font-family: 'Six Caps';
  82. padding: 40px;
  83. font-size: 30px;
  84. letter-spacing: 3px;}
  85.  
  86. .cpb, .cpc span {background-color: #000;}
  87. #cp a {color: #fff;}
  88. .cpb:before {background-color: #000;}
  89. #cp:hover .cpc {margin-left: -20px;}
  90.  
  91. .sp-slideshow {position: relative; width: 450px; height: 450px;}
  92.  
  93. .sp-content {position: relative; width: 100%;height: 100%; overflow: hidden;
  94. border: 25px solid #fff;
  95. background-color:#fff;}
  96.  
  97. .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;
  98. /***********************************************************
  99. REPLACE THE BACKGROUND IMAGE BETWEEN THE 's
  100. ***********************************************************/
  101. background: url('http://static.tumblr.com/bkd4m5b/AYrn43okr/ph.png') repeat-x scroll 0 0;}
  102.  
  103. .sp-slideshow input[type=radio] {position: absolute; bottom: 0px; left: 250px; width: 9px;height: 9px;z-index: 1001;cursor: pointer;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);opacity: 0;}
  104.  
  105.  
  106. /*********************************************************
  107. !!!! CSS CODE !!!!
  108. REPLACE BELOW WITH CORRESPONDING NAV CSS CODE
  109. TO CHANGE NAV STYLE
  110. *********************************************************/
  111. .sp-slideshow input[type=radio] + label {position: absolute; top: -35px; left: 394px;width: 6px; height: 6px;display: block;z-index: 1000; -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;
  112. background-color: #000; border: 1px solid #fff;}
  113.  
  114. .sp-slideshow input[type=radio]:checked + label {
  115. background-color: #fff;
  116. border: 1px solid #fff;}
  117.  
  118. .sp-selector-1, .button-label-1 {margin-left: -36px;} .sp-selector-2, .button-label-2 {margin-left: -18px;} .sp-selector-3, .button-label-3 {margin-left: 0px;} .sp-selector-4, .button-label-4 {margin-left: 18px;} .sp-selector-5, .button-label-5 {margin-left: 36px;}
  119.  
  120. .sq {position: absolute; top: -35px;left: 422px; width: 50px;}
  121. .sq a {width: 6px; height: 6px; display: inline-block; z-index: 1000; margin-left: 8px;
  122. background-color: #000;
  123. border: 1px solid #fff;
  124. color: #fff; }
  125.  
  126. .sq a:hover, .sp-slideshow input + label:hover {
  127. background-color: #fff;
  128. color: #fff;}
  129.  
  130. .sp-arrow {display: none}
  131.  
  132. #tt {text-align: right; letter-spacing: 3px; line-height: 90%; width: 300px; border: 0px; position: absolute; margin-left: -235px; margin-top: -34px;
  133. background-color: #000;
  134. color: #fff;
  135. font-family: 'Six Caps';
  136. font-size: 30px;}
  137.  
  138. /*********************************************************
  139. REPLACE ABOVE WITH CORRESPONDING NAV CSS CODE
  140. TO CHANGE NAV STYLE
  141. !!!! CSS CODE !!!!
  142. *********************************************************/
  143.  
  144. .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;}
  145.  
  146. .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;}
  147.  
  148. .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; }
  149.  
  150. .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; }
  151.  
  152. 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%;}
  153.  
  154. 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;}
  155.  
  156. .tpbox {width: 430px; height: 430px; margin-top: 0px; padding: 10px; display: table;
  157. background-color: rgba(0, 0, 0, 0.8);}
  158.  
  159. .tpt {text-align: left; line-height: 110%; letter-spacing: 5px; position: absolute; bottom: 10px;
  160. color: #fff;
  161. font-family: 'Six Caps';
  162. font-size: 24px; }
  163.  
  164. .tpc {vertical-align: middle; display: table-cell; width: 430px;}
  165.  
  166. .tc_a, .tc_l, .tc_b {padding: 20px; text-align: justify; margin: 0px 40px; max-height: 300px; overflow: auto;
  167. background-color: #fff;}
  168.  
  169. .tc_a {max-height: 145px;}
  170. .abt li {list-style: square;}
  171.  
  172. h4 {letter-spacing: 2px; margin: 25px 0px; margin-bottom: 4px; font-weight: normal;
  173. color: #000;
  174. font-family: 'Oswald';
  175. font-size: 12px; }
  176.  
  177. #ourl {margin-bottom: 5px; padding: 10px 0px; padding-top: 0px; letter-spacing: 1px;
  178. background-color: transparent;
  179. color: #aaa;
  180. font-size: 8px;}
  181.  
  182. .ou {color: #ddd;}
  183. .ou:hover {color: #fff;}
  184.  
  185. .tc_l, .tc_b {background-color: transparent; padding: 0px; text-align: center;}
  186.  
  187. .tc_l {margin: 0px 40px; overflow-x: hidden; text-align: left; padding-right: 2px; margin-left: 50px;}
  188. .tc_l a {padding: 10px; width: 142px; display: inline-block; margin: 0px -2px; margin-bottom: 2px; text-align: left;
  189. color: #fff;
  190. font-family: 'Oswald';
  191. font-size: 10px;
  192. background-color: #000;}
  193.  
  194. .tc_l a:hover {background-color: #fff; 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; padding: 10px; text-align: left; font-weight: normal; transition-duration: 0.6s; -moz-transition-duration: 0.6s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s;
  227. color: #fff;
  228. font-family: 'Oswald';
  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-size:10px;
  242. font-family: calibri;
  243. background-color: #fff;
  244. color: #000;
  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-bottom: 20px;">
  264.  
  265. <div class="til"></div>
  266.  
  267. <div class="sp-slideshow">
  268. <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" /> <label for="button-1" class="button-label-1" id="tt">
  269. <!---------------------------------
  270. REPLACE YOUR TITLE BELOW
  271. ----------------------------------->
  272.  
  273. G R A V I T Y
  274.  
  275. <!---------------------------------
  276. REPLACE YOUR TITLE ABOVE
  277. ----------------------------------->
  278. </label>
  279.  
  280.  
  281. <!---------------------------------------------------------
  282. ***** HTML CODE *****
  283. REPLACE BELOW WITH CORRESPONDING NAV HTML CODE
  284. TO CHANGE NAV STYLE
  285. ---------------------------------------------------------->
  286.  
  287. <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" /> <label for="button-2" class="button-label-2" title="about"></label>
  288. <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> <label for="button-3" class="button-label-3" title="links"></label>
  289. <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> <label for="button-4" class="button-label-4" title="blogroll"></label>
  290. <div class="sq"><a href="/" title="back">&nbsp;</a> <a href="http://tumblr.com" title="dashboard">&nbsp;</a></div>
  291.  
  292. <!---------------------------------------------------------
  293. REPLACE ABOVE WITH CORRESPONDING NAV HTML CODE
  294. TO CHANGE NAV STYLE
  295. ***** HTML CODE *****
  296. ---------------------------------------------------------->
  297.  
  298. <div class="sp-content"><div class="sp-parallax-bg"></div>
  299. <ul class="sp-slider clearfix">
  300. <li><div class="tpbox" style="margin-top: 0px; background-color: transparent;"></div></li>
  301.  
  302.  
  303. <!-------------------
  304. START ABOUT
  305. -------------------->
  306. <li><div class="tpbox"><div class="tpc">
  307.  
  308. <div class="tc_a">
  309. <!---------------------------------
  310. WRITE YOUR ABOUT ME BELOW
  311. ----------------------------------->
  312. 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.
  313. <!---------------------------------
  314. WRITE YOUR ABOUT ME ABOVE
  315. ----------------------------------->
  316. </div>
  317. <div style="position: absolute; margin-left: 40px; margin-top: 40px;"><span class="tpt">ABOUT</span></div>
  318. </div></div></li>
  319. <!-------------------
  320. END ABOUT
  321. -------------------->
  322.  
  323.  
  324. <!-------------------
  325. START LINKS
  326. -------------------->
  327. <li><div class="tpbox"><div class="tpc">
  328. <div class="tc_l">
  329.  
  330. <a href="http://"><div class="lb" style="padding: 6px 11px;">I</div>LINK 1</a>
  331. <a href="http://" style="width: 140px"><div class="lb" style="padding: 6px 10px;">II</div>LINK 2</a><br>
  332. <table cellpading="0" cellspacing="0" style="text-align: left; margin-left: -1px;"><tr><td width="142px">
  333. <input type="checkbox" id="01">
  334. <h2><label for="01"><div class="lb">III</div> MOVIE LINKS</label></h2>
  335. <div id="lsub">
  336. <a href="/tagged/">kiss kiss bang bang</a>
  337. <a href="/tagged/">the dark knight</a>
  338. <a href="/tagged/">life aquatic with steve zissou</a>
  339. <a href="/tagged/">kiss kiss bang bang</a>
  340. <a href="/tagged/">the dark knight</a>
  341. <a href="/tagged/">life aquatic with steve zissou</a>
  342. </div>
  343. </td>
  344.  
  345. <td width="142px" style="padding-left: 3px;">
  346. <input type="checkbox" id="02">
  347. <h2><label for="02"><div class="lb">IV</div> TV LINKS</label></h2>
  348. <div id="lsub">
  349. <a href="/tagged/">agents of shield</a>
  350. <a href="/tagged/">hannibal</a>
  351. <a href="/tagged/">parks and rec</a>
  352. </div>
  353.  
  354.  
  355. </td>
  356. </tr></table>
  357.  
  358. </div>
  359. <div style="position: absolute; margin-left: 50px; margin-top: 40px;"><span class="tpt">LINKS</span></div>
  360. </div></div></li>
  361. <!-------------------
  362. END LINKS
  363. -------------------->
  364.  
  365.  
  366.  
  367. <!-------------------
  368. START BLOGROLL
  369. -------------------->
  370. {block:Following}
  371. <li><div class="tpbox"><div class="tpc">
  372. <div class="tc_b">
  373. {block:Followed}<a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}"> <div class="pers">{FollowedName}</div></a>{/block:Followed}
  374. </div>
  375. <div style="position: absolute; margin-left: 40px; margin-top: 40px;"><span class="tpt">BLOGROLL</span></div>
  376. </div></div></li>
  377. {/block:Following}
  378. <!-------------------
  379. END BLOGROLL
  380. -------------------->
  381.  
  382.  
  383.  
  384. </ul></div></div>
  385. </div></div></div></div></body>
  386. </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!