API tools faq
paste
silvercybermen

All In One Page 01: Lunar

silvercybermen
Jan 31st, 2015
1,243
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.20 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. <head>
  4.  
  5. <!---
  6.  
  7. All In One Page 01: Lunar by lunecerise aka romulvs
  8.  
  9. -keep credit intact
  10. -don't steal any code
  11. -don't use as a basecode
  12. -just don't steal stuff bruh pls
  13.  
  14. --->
  15.  
  16.  
  17. <title>lunar</title> <!--- TITLE --->
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600|Roboto:400,100,300' rel='stylesheet' type='text/css'>
  21. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  22.  
  23.  
  24. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  25. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("[title]").style_my_tooltips({
  30. tip_follows_cursor:true,
  31. tip_delay_time:1,
  32. tip_fade_speed:100,
  33. attribute:"title"
  34. });
  35. });
  36. })(jQuery);
  37. </script>
  38.  
  39. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  40. <script>
  41. $(document).ready(function(){
  42. $('a[href^="#"]').on('click',function (e) {
  43. e.preventDefault();
  44.  
  45. var target = this.hash,
  46. $target = $(target);
  47.  
  48. $('html, body').stop().animate({
  49. 'scrollTop': $target.offset().top
  50. }, 900, 'swing', function () {
  51. window.location.hash = target;
  52. });
  53. });
  54. });
  55. </script>
  56.  
  57. <script type="text/javascript">
  58. $(window).scroll(function() {
  59. if ($(this).scrollTop() > 500) {
  60. $( "#arrow" ).css('opacity','1');
  61. } else {
  62. console.log('there');
  63. $( "#arrow" ).css('opacity','0');
  64. }
  65. });
  66.  
  67. </script>
  68.  
  69. <script>
  70. $('a[href^="#"]').click(function(event) {
  71. var id = $(this).attr("href");
  72. var target = $(id).offset().top;
  73. $('html, body').animate({scrollTop:target}, 500);
  74. event.preventDefault();
  75. });
  76.  
  77. function getTargetTop(elem){
  78. var id = elem.attr("href");
  79. var offset = 60;
  80. return $(id).offset().top - offset;
  81. }
  82. $(window).scroll(function(e){
  83. isSelected($(window).scrollTop())
  84. });
  85. var sections = $('a[href^="#"]');
  86. function isSelected(scrolledTo){
  87. var threshold = 100;
  88. var i;
  89. for (i = 0; i < sections.length; i++) {
  90. var section = $(sections[i]);
  91. var target = getTargetTop(section);
  92. if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
  93. sections.removeClass("active");
  94. section.addClass("active");
  95. }
  96. };
  97. }
  98. </script>
  99.  
  100. <style type="text/css">
  101.  
  102. /*scrollbar*/
  103. ::-webkit-scrollbar {background:transparent; width:5px;}
  104. ::-webkit-scrollbar-thumb {background:transparent; border-left:2px #bae2bd solid; width:3px;}
  105. ::-webkit-scrollbar-track {background:transparent; width:5px;}
  106. ::-webkit-scrollbar-corner {background:transparent; height:5px; width:5px;}
  107.  
  108. /*text selection*/
  109. ::selection {background-color:#A2C8D3;color:white;text-shadow:none;}
  110. ::-moz-selection {background-color:#A2C8D3;color:white;text-shadow:none;}
  111. ::-o-selection {background-color:#A2C8D3;color:white;text-shadow:none;}
  112.  
  113. #s-m-t-tooltip {
  114. max-width:300px;
  115. padding: 5px 7px;
  116. margin:10px;
  117. background-color:#fff;
  118. font-family:calibri;
  119. font-size:8px;
  120. border:double #eeeeee;
  121. font-style:bold;
  122. letter-spacing:1px;
  123. text-transform:uppercase;
  124. color:#000;
  125. z-index:10000000000000000000000000000000000000000000000000000000000000;
  126. -moz-transition-duration: 0.3s;
  127. -webkit-transition-duration: 0.3s;
  128. -o-transition-duration: 0.3s;
  129. }
  130.  
  131. *, body, a, a:hover, a:active { cursor:url(https://31.media.tumblr.com/4b32a8c60c9e7a01890827f616c6ed74/tumblr_inline_n7563jM9Gt1qcs1bb.png), auto;}
  132.  
  133. html {height:100%;width:100%;}
  134. body {
  135. background-color:#fff;
  136. font-family:'Roboto', sans-serif;
  137. background:#fff url(https://farm6.staticflickr.com/5479/10566885854_8f4b0088a1_k.jpg) no-repeat fixed center;/*edit background here*/
  138. background-size:cover;
  139. left:0;
  140. top:0;
  141. right:0;
  142. bottom:0;
  143. width:100%;
  144. height:100%;
  145. overflow-x:hidden;
  146. margin:0;
  147. }
  148.  
  149. a {
  150. color:#bae2db;
  151. outline:none;
  152. -moz-outline:none;
  153. text-decoration:none;
  154. transition:0.5s ease-in-out;
  155. -webkit-transition:0.5s ease-in-out;
  156. -moz-transition:0.5s ease-in-out;
  157. -ms-transition:0.5s ease-in-out;
  158. -o-transition:0.5s ease-in-out;
  159. }
  160.  
  161. a:hover {color:#000087;}
  162. a:active {-moz-outline:none;}
  163.  
  164. h1 {font-size:14px;text-transform:uppercase;}
  165. h1:first-letter {font-size:16px;}
  166.  
  167. #cover {
  168. top:0;
  169. left:0;
  170. height:100%;
  171. width:100%;
  172. background-size:100% 100%;
  173. position:fixed;
  174. margin-bottom:10px;
  175. }
  176.  
  177. #section1 {
  178. background:#fff url(https://38.media.tumblr.com/5033c40f542749191a361f201a772dc0/tumblr_n201x7855V1svrh8zo3_1280.jpg) no-repeat fixed center;/*edit about section here*/
  179. height:100%;
  180. width:100%;
  181. background-size:cover;
  182. margin-top:20px;
  183. padding:10px 0;
  184. left:0;
  185. right:0;
  186. position:absolute;
  187. }
  188.  
  189. #section2 {
  190. background:#fff url(https://farm6.staticflickr.com/5556/14708010283_bff41bd784_o_d.jpg) no-repeat fixed center;/*edit tags section here*/
  191. left:0;
  192. right:0;
  193. margin-top:20px;
  194. margin-bottom:20px;
  195. height:100%;
  196. padding:10px 0;
  197. width:100%;
  198. background-size:cover;
  199. position:absolute;
  200. }
  201.  
  202. #section3 {
  203. background:#fff url(https://farm6.staticflickr.com/5595/15140191858_129e28be62_o_d.jpg) no-repeat fixed center;/*edit faq section here*/
  204. left:0;
  205. right:0;
  206. margin-top:20px;
  207. margin-bottom:20px;
  208. height:100%;
  209. width:100%;
  210. padding:10px 0;
  211. background-size:cover;
  212. position:absolute;
  213. }
  214.  
  215. #section4 {
  216. background:#fff url(http://static.tumblr.com/3dkvxpf/Qz5n9m21e/wave-384385_1920.jpg) no-repeat fixed center;/*edit blogroll section here*/
  217. left:0;
  218. right:0;
  219. margin-top:20px;
  220. height:100%;
  221. padding:10px 0;
  222. width:100%;
  223. background-size:cover;
  224. position:absolute;
  225. }
  226.  
  227. #breaker {width:100%;height:100%;}
  228.  
  229. #title {
  230. font-size:100px;
  231. font-family:Times;
  232. font-style:italic;
  233. font-weight:lighter;
  234. color:#fff;
  235. letter-spacing:-8px;
  236. width:700px;
  237. margin-top:120px;
  238. margin-left:auto;
  239. margin-right:auto;
  240. margin-bottom:10px;
  241. text-align:left;
  242. }
  243.  
  244. #desc {
  245. width:400px;
  246. height:auto;
  247. font-size:10px;
  248. font-family:'Roboto', sans-serif;
  249. text-align:justify;
  250. margin-top:-10px;
  251. margin-left:auto;
  252. margin-right:auto;
  253. color:#fff;
  254. }
  255.  
  256. #circont {
  257. margin:auto;
  258. text-align:center;
  259. width:86px;
  260. height:100px;
  261. }
  262.  
  263. .roll, .links {
  264. width:790px;
  265. height:300px;
  266. margin-left:auto;
  267. margin-right:auto;
  268. overflow-x:hidden;
  269. overflow-y:scroll;
  270. padding:10px;
  271. border:3px solid #fff;
  272. margin-top:-30px;
  273. margin-bottom:10px;
  274. }
  275.  
  276. .roll img {
  277. width:40px;
  278. height:40px;
  279. display:inline-block;
  280. padding:5px;
  281. border:solid 1px #fff;
  282. margin:6px;
  283. float:left;
  284. }
  285.  
  286. #column {
  287. display:inline-block;
  288. margin:3px;
  289. width:240px;
  290. height:auto;
  291. padding:0 5px;
  292. float:left;
  293. overflow-x:hidden;
  294. text-align:justify;
  295. }
  296.  
  297. #column a {
  298. display:inline-block;
  299. padding:5px;
  300. width:290px;
  301. text-transform:uppercase;
  302. color:#aaa;
  303. font-size:9px;
  304. letter-spacing:1px;
  305. background-color:rgba(0,0,0,0.5);
  306. }
  307.  
  308. #column a:hover {color:#fff;}
  309. #column a:after {
  310. content: "";
  311. margin-left: -300px;
  312. display: block;
  313. width: 100%;
  314. margin-top:5px;
  315. margin-bottom:-5px;
  316. height: 1px;
  317. background-color: #fff;
  318. transition:0.5s ease-in-out;
  319. -webkit-transition:0.5s ease-in-out;
  320. -moz-transition:0.5s ease-in-out;
  321. -ms-transition:0.5s ease-in-out;
  322. -o-transition:0.5s ease-in-out;}
  323. #column a:hover:after {margin-left: -5px;}
  324.  
  325. #arrow {
  326. opacity:1;
  327. text-align:center;
  328. position:fixed;
  329. left:0px;
  330. bottom:0px;
  331. padding:10px 13px;
  332. background:rgba(255,255,255,0.2);
  333. transition:0.5s ease-in-out;
  334. -webkit-transition:0.5s ease-in-out;
  335. -moz-transition:0.5s ease-in-out;
  336. -ms-transition:0.5s ease-in-out;
  337. -o-transition:0.5s ease-in-out;
  338. }
  339. #arrow a {color:rgba(0,0,0,0.5);}
  340. #arrow:hover {background:rgba(255,255,255,0.4);}
  341. #arrow:hover a {color:#000;}
  342.  
  343. nav {
  344. -webkit-backface-visibility: hidden;
  345. z-index: 5;
  346. position: fixed;
  347. top: 5%;
  348. left: 0px;
  349. right: 0px;
  350. margin: auto;
  351. text-align:center;
  352. width: auto;
  353. height:20px;
  354. opacity: 0.75;
  355. }
  356.  
  357. nav li {
  358. height: 20px;
  359. margin: 10px 0px;
  360. padding:0 20px;
  361. list-style: none;
  362. display:inline-block;
  363. }
  364.  
  365. nav a {
  366. display: inline-block;
  367. padding:5px;
  368. text-indent: -9999px;
  369. border-radius: 100%;
  370. -moz-border-radius: 100%;
  371. -webkit-border-radius: 100%;
  372. background-color: transparent;
  373. border: 3px solid #fff;
  374. transition: all 0.3s ease;
  375. position: relative;
  376. left: 0px;
  377. top: 0px;
  378. margin:0 20px 0 0;
  379. transition:0.5s ease-in-out;
  380. -webkit-transition:0.5s ease-in-out;
  381. -moz-transition:0.5s ease-in-out;
  382. -ms-transition:0.5s ease-in-out;
  383. -o-transition:0.5s ease-in-out;
  384. }
  385. nav a:hover, nav a.active {background-color: #fff;}
  386.  
  387. #credit, #credit a {
  388. text-decoration:none;
  389. position:fixed;
  390. bottom:4px;
  391. right:4px;
  392. padding:5px 4px;
  393. font-family: helvetica;
  394. text-transform:uppercase;
  395. color:#bbb;
  396. font-size:9px;
  397. -moz-transition-duration:0.3s;
  398. -webkit-transition-duration:0.3s;
  399. -o-transition-duration:0.3s;
  400. -ms-transition-duration:0.3s;
  401. }
  402. #credit:hover {background-color:transparent;}
  403. #credit:hover, #credit a:hover {
  404. text-decoration:none;
  405. font-family: helvetica;
  406. color:#000;
  407. background-color:#fff;
  408. text-shadow:#aaa 2px 2px 0.2em;
  409. -moz-transition-duration:0.4s;
  410. -webkit-transition-duration:0.4s;
  411. -o-transition-duration:0.4s;
  412. -ms-transition-duration:0.4s;
  413. }
  414.  
  415. </style>
  416. </head>
  417. <body>
  418. <div id="top"></div>
  419. <div id="circont">
  420. <nav>
  421. <ul>
  422. <a href="/" title="home"></a>
  423. <a href="#section1" title="about"></a>
  424. <a href="#section2" title="links"></a>
  425. <a href="#section3" title="faq"></a>
  426. <a href="#section4" title="blogroll"></a>
  427. </ul>
  428. </nav>
  429. </div>
  430. <div id="cover">
  431. <div id="title" style="text-align:center; width:100%; margin-top:170px;">
  432. <!--- TITLE --->
  433. nightcall
  434.  
  435. <div style="margin-top:-18px;"><svg height="10" width="500">
  436. <line x1="0" y1="5" x2="500" style="stroke:#fff; stroke-width:3px"></line>
  437. </svg></div>
  438.  
  439. </div>
  440. <div id="desc" style="text-transform:uppercase; text-align:center; margin-top:-10px">
  441. <!--- DESCRIPTION GOES HERE --->
  442. I'm gonna show you where it's dark, but have no fear.
  443.  
  444. </div>
  445. </div>
  446.  
  447. <div id="breaker"></div>
  448.  
  449. <div id="section1">
  450. <div id="title">about;</div>
  451. <div id="desc">
  452.  
  453. <!--- ABOUT STUFF GOES HERE --->
  454. >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  455. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum.
  456. </div>
  457. </div>
  458.  
  459. <div id="breaker"></div>
  460.  
  461. <div id="section2">
  462. <div id="title" style="margin-bottom:10px">atlas —</div>
  463. <div class="links">
  464.  
  465. <!--- FOR EVERY NEW SECTION OF LINKS MAKE A NEW COLUMN DIV --->
  466.  
  467. <div id="column">
  468. <a href="/">i</a>
  469. <a href="/">ii</a>
  470. <a href="/">link</a>
  471. <a href="/">link</a>
  472. <a href="/">link</a>
  473. <a href="/">link</a>
  474. <a href="/">link</a>
  475. <a href="/">link</a>
  476. <a href="/">link</a>
  477. <a href="/">link</a>
  478. <a href="/">link</a>
  479. <a href="/">link</a>
  480. </div>
  481.  
  482. <div id="column">
  483. <a href="/">i</a>
  484. <a href="/">ii</a>
  485. <a href="/">link</a>
  486. <a href="/">link</a>
  487. <a href="/">link</a>
  488. <a href="/">link</a>
  489. <a href="/">link</a>
  490. <a href="/">link</a>
  491. <a href="/">link</a>
  492. <a href="/">link</a>
  493. <a href="/">link</a>
  494. <a href="/">link</a>
  495. </div>
  496.  
  497. <div id="column">
  498. <a href="/">i</a>
  499. <a href="/">ii</a>
  500. <a href="/">link</a>
  501. <a href="/">link</a>
  502. <a href="/">link</a>
  503. <a href="/">link</a>
  504. <a href="/">link</a>
  505. <a href="/">link</a>
  506. <a href="/">link</a>
  507. <a href="/">link</a>
  508. <a href="/">link</a>
  509. <a href="/">link</a>
  510. </div>
  511.  
  512. </div>
  513. </div>
  514.  
  515. <div id="breaker"></div>
  516.  
  517. <div id="section3">
  518. <div id="title">faq.</div>
  519. <div style="width:610px; margin-left:auto; margin-right:auto">
  520. <div id="desc" style="float:left; height:235px; overflow-x:hidden; overflow-y:scroll; width:300px; padding:15px 5px; border-top:1px solid #fff;">
  521.  
  522. <!--- FAQ STUFF GOES HERE --->
  523.  
  524. <h1>
  525. Q: your hesitation speaks to me
  526. </h1>
  527. <p>
  528. A: louder than a million words per minute
  529. </p>
  530.  
  531. <h1>Q: Lorem ipsum dolor sit amet</h1>
  532. <p>A: consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  533.  
  534. <h1>Q: Duis aute irure dolor in reprehenderit </h1>
  535. <p>A: in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  536.  
  537. <h1>Q: Curabitur pretium tincidunt lacus. </h1>
  538. <p>A: Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.</p>
  539. </div>
  540.  
  541. <!--- MAKE SURE TO REPLACE YOURURL WITH YOUR URL --->
  542.  
  543. <div style="float:right;"><iframe frameborder="0" scrolling="yes" width="100%" height="255" src="http://www.tumblr.com/ask_form/YOURURL.tumblr.com" style="background-color:transparent; overflow:hidden; border-bottom:1px solid #fff; padding-bottom:13px" id="ask_form" ></iframe></div>
  544.  
  545. </div>
  546. </div>
  547.  
  548. <div id="breaker"></div>
  549.  
  550.  
  551. <!--- BLOGROLL // DO NOT EDIT BC WHY WOULD YOU EVEN DO THAT HONESTLY --->
  552. <div id="section4">
  553. <div id="title" style="margin-bottom:10px">blogroll!</div>
  554. <div class="roll">
  555. {block:Following}
  556. {block:Followed}
  557.  
  558. <a href="{FollowedURL}" target="_blank" title="{FollowedName}"><img src="{FollowedPortraitURL-40}"> </a>
  559.  
  560. {/block:Followed}
  561. {/block:Following}
  562. </div>
  563. </div>
  564.  
  565.  
  566.  
  567.  
  568. <div id="circont"><div id="arrow"><a href="#top" title="back to top"><i class="fa fa-chevron-up"></i></a></div></div>
  569.  
  570. <div id="credit"><a href="http://lunecerise.co.vu" title="lunecerise">LC</a></div>
  571.  
  572.  
  573.  
  574. </body>
  575. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!