API tools faq
paste
bychloethemes

All-In-One Page 1 - by Chloe

bychloethemes
May 21st, 2015
1,031
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. All-In-One about page - Made by Chloe | @bychloethemes
  6. don't be a douche and delete the credit
  7. -->
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function() {
  11. $(".trigger").click(function() {
  12. $(".menu").toggleClass("active");
  13. });
  14. });
  15. </script>
  16. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  17. <script>
  18. (function($){
  19. $(document).ready(function(){
  20. $("[title]").style_my_tooltips({
  21. tip_follows_cursor:true,
  22. tip_delay_time:200,
  23. tip_fade_speed:300
  24. }
  25. );
  26. });
  27. })(jQuery);
  28. </script>
  29. <script type="text/javascript"
  30. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  31. <script>
  32. $(document).ready(function() {
  33. //
  34. $('a.poplight[href^=#]').click(function() {
  35. var popID = $(this).attr('rel'); //Get Popup Name
  36. var popURL = $(this).attr('href'); //Get Popup href to define size
  37. var query= popURL.split('?');
  38. var dim= query[1].split('&');
  39. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  40. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><i class="fa fa-times"></i></a>');
  41. var popMargTop = ($('#' + popID).height() + 80) / 2;
  42. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  43. //Apply Margin to Popup
  44. $('#' + popID).css({
  45. 'margin-top' : -popMargTop,
  46. 'margin-left' : -popMargLeft
  47. });
  48. $('body').append('<div id="fade"></div>');
  49. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  50. return false;
  51. });
  52. $('a.close').live('click', function() {
  53. $('#fade , .popup_block').fadeOut(function() {
  54. $('').remove(); //fade them both out
  55. });
  56. return false;
  57. });
  58. });
  59. </script>
  60. <title>Nav Page</title>
  61. <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  62. <link rel="shortcut icon" href="{Favicon}">
  63. <style type="text/css">
  64. *,
  65. *:before,
  66. *:after {
  67. -moz-box-sizing: border-box;
  68. box-sizing: border-box;
  69. margin: 0;
  70. padding: 0;
  71. }
  72.  
  73. html,
  74. body {
  75. height: 100%;
  76. overflow: hidden;
  77. }
  78.  
  79. body {
  80. background: #eee url('http://i.cubeupload.com/ta8Kp1.png') repeat; /*This is where your background is, it currently tiles*/
  81. }
  82. .picpic {
  83. position: absolute;
  84. top: 0;
  85. right: 0;
  86. bottom: 0;
  87. left: 0;
  88. margin: auto;
  89. width:600px;
  90. height:600px;
  91. display: block;
  92. background:white;
  93. overflow: hidden;
  94. border-radius: 50%;
  95. box-shadow: 0 0 8px rgba(0,0,0,0.4);
  96. border: 10px solid white;
  97. }
  98. .picpic img{
  99. max-width: 600px;
  100. left:-10px;
  101. top:-10px;
  102. position: relative;
  103. }
  104. #s-m-t-tooltip{
  105. max-width:300px;
  106. margin:15px;
  107. padding:2px 8px;
  108. border:1px solid #DDD;
  109. border-radius:4px;
  110. background:#FFF;
  111. color:#AAA;
  112. z-index:999999;
  113. font-size:12px;
  114. font-style:italic;
  115. text-transform:lowercase;
  116. box-shadow:2px 2px 4px rgba(0,0,0,.6);
  117. }
  118. .absolute-center,
  119. .menu,
  120. .menu .btn .fa,
  121. .menu .btn.trigger .line {
  122. position: absolute;
  123. top: 50%;
  124. left: 50%;
  125. -webkit-transform: translateX(-50%) translateY(-50%);
  126. -ms-transform: translateX(-50%) translateY(-50%);
  127. transform: translateX(-50%) translateY(-50%);
  128. }
  129. .menu {
  130. width: 5em;
  131. height: 5em;
  132. }
  133.  
  134. .menu .btn {
  135. position: absolute;
  136. top: 0;
  137. left: 0;
  138. width: 100%;
  139. height: 100%;
  140. border-radius: 50%;
  141. /*background: rgba(238, 221, 204, 0.9);*/
  142. background: rgba(255,255,255,1);
  143. box-shadow: 0 0 8px rgba(0,0,0,0.9);
  144. opacity: 0;
  145. z-index: -10;
  146. cursor: pointer;
  147. -webkit-transition: opacity 0.5s, z-index 0.3s, -webkit-transform 0.5s;
  148. transition: opacity 0.5s, z-index 0.3s, transform 0.5s;
  149. -webkit-transform: translateX(0);
  150. -ms-transform: translateX(0);
  151. transform: translateX(0);
  152. }
  153.  
  154. .menu .btn-icon {
  155. width: 60%;
  156. height: 60%;
  157. }
  158.  
  159. .menu .btn .fa {
  160. font-size: 1.4em;
  161. color:#7c7670;
  162. -webkit-transition: color 0.3s;
  163. transition: color 0.3s;
  164. }
  165.  
  166. .menu .btn:hover .fa { color: #3b3b3b; }
  167.  
  168. .menu .btn.trigger {
  169. opacity: 1;
  170. z-index: 100;
  171. cursor: pointer;
  172. -webkit-transition: -webkit-transform 0.3s;
  173. transition: transform 0.3s;
  174. }
  175.  
  176. .menu .btn.trigger {
  177. -webkit-transform: scale(0.7);
  178. -ms-transform: scale(0.7);
  179. transform: scale(0.7);
  180. }
  181.  
  182. .menu .btn.trigger:hover .line { background-color: #3b3b3b; }
  183.  
  184. .menu .btn.trigger:hover .line:before,
  185. .menu .btn.trigger:hover .line:after { background-color: #3b3b3b; }
  186.  
  187. .menu .btn.trigger .line {
  188. width: 60%;
  189. height: 6px;
  190. background: #7c7670;
  191. border-radius: 6px;
  192. -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
  193. transition: background-color 0.3s, height 0.3s, top 0.3s;
  194. }
  195.  
  196. .menu .btn.trigger .line:before,
  197. .menu .btn.trigger .line:after {
  198. content: "";
  199. display: block;
  200. position: absolute;
  201. left: 0;
  202. width: 100%;
  203. height: 6px;
  204. background: #7c7670;
  205. border-radius: 6px;
  206. -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
  207. transition: background-color 0.3s, transform 0.3s;
  208. }
  209.  
  210. .menu .btn.trigger .line:before {
  211. top: -12px;
  212. -webkit-transform-origin: 15% 100%;
  213. -ms-transform-origin: 15% 100%;
  214. transform-origin: 15% 100%;
  215. }
  216.  
  217. .menu .btn.trigger .line:after {
  218. top: 12px;
  219. -webkit-transform-origin: 25% 30%;
  220. -ms-transform-origin: 25% 30%;
  221. transform-origin: 25% 30%;
  222. }
  223.  
  224. .menu .rotater {
  225. position: absolute;
  226. top: 0;
  227. left: 0;
  228. width: 100%;
  229. height: 100%;
  230. -webkit-transform-origin: 50% 50%;
  231. -ms-transform-origin: 50% 50%;
  232. transform-origin: 50% 50%;
  233. }
  234.  
  235. .menu.active .btn-icon {
  236. opacity: 1;
  237. z-index: 50;
  238. }
  239.  
  240. .menu.active .trigger .line {
  241. height: 0px;
  242. top: 45%;
  243. }
  244.  
  245. .menu.active .trigger .line:before {
  246. -webkit-transform: rotate(45deg);
  247. -ms-transform: rotate(45deg);
  248. transform: rotate(45deg);
  249. width: 110%;
  250. }
  251.  
  252. .menu.active .trigger .line:after {
  253. -webkit-transform: rotate(-45deg);
  254. -ms-transform: rotate(-45deg);
  255. transform: rotate(-45deg);
  256. width: 110%;
  257. }
  258.  
  259.  
  260. /* horrible things are happening here
  261. for some reason nth-child(1) is always busy and elements starting from 2 */
  262.  
  263. .rotater:nth-child(1) {
  264. -webkit-transform: rotate(-15deg);
  265. -ms-transform: rotate(-15deg);
  266. transform: rotate(-15deg);
  267. }
  268.  
  269. .menu.active .rotater:nth-child(1) .btn-icon {
  270. -webkit-transform: translateX(-3em) rotate(15deg);
  271. -ms-transform: translateX(-3em) rotate(15deg);
  272. transform: translateX(-3em) rotate(15deg);
  273. }
  274.  
  275. .rotater:nth-child(2) {
  276. -webkit-transform: rotate(45deg);
  277. -ms-transform: rotate(45deg);
  278. transform: rotate(45deg);
  279. }
  280.  
  281. .menu.active .rotater:nth-child(2) .btn-icon {
  282. -webkit-transform: translateX(-3em) rotate(-45deg);
  283. -ms-transform: translateX(-3em) rotate(-45deg);
  284. transform: translateX(-3em) rotate(-45deg);
  285. }
  286.  
  287. .rotater:nth-child(3) {
  288. -webkit-transform: rotate(105deg);
  289. -ms-transform: rotate(105deg);
  290. transform: rotate(105deg);
  291. }
  292.  
  293. .menu.active .rotater:nth-child(3) .btn-icon {
  294. -webkit-transform: translateX(-3em) rotate(-105deg);
  295. -ms-transform: translateX(-3em) rotate(-105deg);
  296. transform: translateX(-3em) rotate(-105deg);
  297. }
  298.  
  299. .rotater:nth-child(4) {
  300. -webkit-transform: rotate(165deg);
  301. -ms-transform: rotate(165deg);
  302. transform: rotate(165deg);
  303. }
  304.  
  305. .menu.active .rotater:nth-child(4) .btn-icon {
  306. -webkit-transform: translateX(-3em) rotate(-165deg);
  307. -ms-transform: translateX(-3em) rotate(-165deg);
  308. transform: translateX(-3em) rotate(-165deg);
  309. }
  310.  
  311. .rotater:nth-child(5) {
  312. -webkit-transform: rotate(225deg);
  313. -ms-transform: rotate(225deg);
  314. transform: rotate(225deg);
  315. }
  316.  
  317. .menu.active .rotater:nth-child(5) .btn-icon {
  318. -webkit-transform: translateX(-3em) rotate(-225deg);
  319. -ms-transform: translateX(-3em) rotate(-225deg);
  320. transform: translateX(-3em) rotate(-225deg);
  321. }
  322.  
  323. .rotater:nth-child(6) {
  324. -webkit-transform: rotate(285deg);
  325. -ms-transform: rotate(285deg);
  326. transform: rotate(285deg);
  327. }
  328.  
  329. .menu.active .rotater:nth-child(6) .btn-icon {
  330. -webkit-transform: translateX(-3em) rotate(-285deg);
  331. -ms-transform: translateX(-3em) rotate(-285deg);
  332. transform: translateX(-3em) rotate(-285deg);
  333. }
  334.  
  335. .rotater:nth-child(7) {
  336. -webkit-transform: rotate(345deg);
  337. -ms-transform: rotate(345deg);
  338. transform: rotate(345deg);
  339. }
  340.  
  341. .menu.active .rotater:nth-child(7) .btn-icon {
  342. -webkit-transform: translateX(-3em) rotate(-345deg);
  343. -ms-transform: translateX(-3em) rotate(-345deg);
  344. transform: translateX(-3em) rotate(-345deg);
  345. }
  346. /*Popups*/
  347. #fade { /*--Transparent background layer--*/
  348. display: none; /*--hidden by default--*/
  349. background: rgba(0,0,0,0.8);
  350. position: absolute;
  351. top: 0;
  352. right: 0;
  353. bottom: 0;
  354. left: 0;
  355. margin: auto;
  356. width: 580px;
  357. height: 580px;
  358. border-radius: 50%;
  359. opacity: .80;
  360. z-index: 9999;
  361. }
  362. .popup_block{
  363. display: none; /*--hidden by default--*/
  364. float: left;
  365. font-size: 12px;
  366. position: fixed;
  367. top: 50%;
  368. left: 50%;
  369. z-index: 99999;
  370. color: white;
  371. font-family: 'consolas';
  372. /*--CSS3 Rounded Corners--*/
  373. -webkit-border-radius: 10px;
  374. -moz-border-radius: 10px;
  375. border-radius: 10px;
  376. min-height: 300px;
  377. max-height:450px;
  378. padding: 40px;
  379. }
  380. .popup_block h1 {
  381. margin: 0;
  382. padding: 0;
  383. font-size: 25px;
  384. text-transform: uppercase;
  385. text-align: center;
  386. }
  387. .popup_block a {
  388. color:#fff;
  389. text-decoration:none;
  390. }
  391. .popup_block a:hover {
  392. color:#fff;
  393. text-decoration:underline;
  394. }
  395. a.close {
  396. position: fixed;
  397. top: 0;
  398. right: 0;
  399. bottom: 0;
  400. left: -15px;
  401. margin: auto;
  402. width: 1px;
  403. height:20px;
  404. padding-top:480px;
  405. font-size: 25px;
  406. text-decoration: none;
  407. color: white;
  408. z-index:999;
  409. }
  410. /*--Making IE6 Understand Fixed Positioning--*/
  411. *html .popup_block {
  412. position: absolute;
  413. }
  414. /*EndPopups*/
  415. ul.blogroll {
  416. text-align:center;
  417. list-style-type:none;
  418. padding:0px 0px 0px 5px;
  419. margin:0;
  420. width:100%;
  421. overflow-y:scroll;
  422. max-height:330px;
  423. z-index:9999;
  424. }
  425. ul.blogroll li {
  426. border-radius:50%;
  427. border:5px solid white;
  428. margin: 5px;
  429. display:inline-block;
  430. overflow:hidden;
  431. height:58px;
  432. width:58px;
  433. background:rgba(255,255,255,0.7);
  434. }
  435. h2 {
  436. margin-top:5px;
  437. margin-bottom:5px;
  438. text-align:left;
  439. border-bottom:1px solid white;
  440. font-size:15px;
  441. text-transform:uppercase;
  442. }
  443. ul.tags {
  444. text-align:center;
  445. list-style-type:none;
  446. padding:0;
  447. margin:5px 0 0 0;
  448. }
  449. ul.tags li {
  450. display:inline-block;
  451. width:90px;
  452. margin:5px;
  453. font-size:14px;
  454. }
  455. ul.links {
  456. text-align:center;
  457. list-style-type:none;
  458. padding:0;
  459. margin:5px 0 0 0;
  460. }
  461. ul.links li {
  462. display:inline-block;
  463. width:140px;
  464. margin:5px;
  465. font-size:14px;
  466. }
  467. .credit {
  468. background:white;
  469. width:21px;
  470. height:19px;
  471. color: black;
  472. position:fixed;
  473. bottom: 10px;
  474. left: 10px;
  475. line-height: 15px;
  476. font-size:12px;
  477. font-family: 'consolas';
  478. text-transform: uppercase;
  479. padding:3px;
  480. overflow: hidden;
  481. -webkit-transition: all 0.5s ease-in-out;
  482. -moz-transition: all 0.5s ease-in-out;
  483. -o-transition: all 0.5s ease-in-out;
  484. transition: all 0.5s ease-in-out;
  485. }
  486. .credit:hover {
  487. width:115px;
  488. -webkit-transition: all 0.5s ease-in-out;
  489. -moz-transition: all 0.5s ease-in-out;
  490. -o-transition: all 0.5s ease-in-out;
  491. transition: all 0.5s ease-in-out;
  492. }
  493. .credit a {
  494. color:black;
  495. text-decoration: none;
  496. }
  497. .credit .mine {
  498. opacity:0;
  499. visibility: none;
  500. -webkit-transition: all 0.5s ease-in-out 0.5s;
  501. -moz-transition: all 0.5s ease-in-out 0.5s;
  502. -o-transition: all 0.5s ease-in-out 0.5s;
  503. transition: all 0.5s ease-in-out 0.5s;
  504. }
  505. .credit:hover .mine {
  506. opacity: 1;
  507. visibility: visible;
  508. -webkit-transition: all 0.5s ease-in-out 0.5s;
  509. -moz-transition: all 0.5s ease-in-out 0.5s;
  510. -o-transition: all 0.5s ease-in-out 0.5s;
  511. transition: all 0.5s ease-in-out 0.5s;
  512. }
  513. </style>
  514. </head>
  515. <body>
  516. <div class="picpic">
  517. <!--this is where the circle image is. if you wish to replace this make sure it is a perfect square and a minimum of 600x600px or it wont work-->
  518. <img src="http://3.1m.yt/ghxBVcea.jpg">
  519. </div>
  520. <div class="menu">
  521. <div class="btn trigger">
  522. <span class="line"></span>
  523. </div>
  524. <div class="icons">
  525. <div class="rotater">
  526. <a href="/" title="home"><div class="btn btn-icon">
  527. <i class="fa fa-home"></i>
  528. </div></a>
  529. </div>
  530. <div class="rotater">
  531. <a href="#?w=400" rel="02" class="poplight" title="ask"><div class="btn btn-icon">
  532. <i class="fa fa-envelope"></i>
  533. </div></a>
  534. </div>
  535. <div class="rotater">
  536. <a href="#?w=400" rel="03" class="poplight" title="about"><div class="btn btn-icon">
  537. <i class="fa fa-pencil"></i>
  538. </div></a>
  539. </div>
  540. <div class="rotater">
  541. <a href="#?w=520" rel="04" class="poplight" title="blogroll"><div class="btn btn-icon">
  542. <i class="fa fa-th"></i>
  543. </div></a>
  544. </div>
  545. <div class="rotater">
  546. <a href="#?w=400" rel="05" class="poplight" title="tags"><div class="btn btn-icon">
  547. <i class="fa fa-tags"></i>
  548. </div></a>
  549. </div>
  550. <div class="rotater">
  551. <a href="#?w=400" rel="06" class="poplight" title="links"><div class="btn btn-icon">
  552. <i class="fa fa-link"></i>
  553. </div></a>
  554. </div>
  555. </div>
  556. </div>
  557. <div class="credit">
  558. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
  559. </div>
  560. </body>
  561. <div id="02" class="popup_block" style="text-align:center;">
  562. <h1>Ask</h1>
  563. You can put a short message here.
  564. <iframe id="ask_form" style="background-color: transparent; overflow: hidden;margin-top:5px;" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" frameborder="0" scrolling="no" width="100%" height="230"></iframe>
  565. </div></div>
  566. <div id="03" class="popup_block" style="text-align:center;">
  567. <h1>About</h1>
  568. Her you can put all about you.
  569. <br>This makes the text on a new line
  570. <p>This makes it all fancy new line plus stuff that doesn't really make a difference.</p>
  571. </div></div>
  572. <div id="04" class="popup_block" style="text-align:center;">
  573. <h1>Blogroll</h1>
  574. {block:Following}
  575. <ul class="blogroll">
  576. {block:Followed} <li>
  577. <a href="{FollowedURL}" title="{FollowedTitle}"><img src="{FollowedPortraitURL-48}"></a>
  578. </li>{/block:Followed}
  579. </ul>
  580. {/block:Following}
  581. </div></div>
  582. <div id="05" class="popup_block" style="text-align:center">
  583. <!--if you want 2 links in a row change the ul class to "links" instead of tags-->
  584. <h1>Tags</h1>
  585. <h2>section 1</h2>
  586. <ul class="tags">
  587. <li><a href="">#tag1.1</a></li>
  588. <li><a href="">#tag2.1</a></li>
  589. <li><a href="">#tag3.1</a></li>
  590. <li><a href="">#tag4.1</a></li>
  591. <li><a href="">#tag5.1</a></li>
  592. <li><a href="">#tag6.1</a></li>
  593. </ul>
  594. <h2>section 2</h2>
  595. <ul class="tags">
  596. <li><a href="">#tag1.2</a></li>
  597. <li><a href="">#tag2.2</a></li>
  598. <li><a href="">#tag3.2</a></li>
  599. <li><a href="">#tag4.2</a></li>
  600. <li><a href="">#tag5.2</a></li>
  601. <li><a href="">#tag6.2</a></li>
  602. </ul>
  603. <h2>section 3</h2>
  604. <ul class="tags">
  605. <li><a href="">#tag1.3</a></li>
  606. <li><a href="">#tag2.3</a></li>
  607. <li><a href="">#tag3.3</a></li>
  608. <li><a href="">#tag4.3</a></li>
  609. <li><a href="">#tag5.3</a></li>
  610. <li><a href="">#tag6.3</a></li>
  611. </ul>
  612. </div></div>
  613. <div id="06" class="popup_block" style="text-align:center">
  614. <!--if you want 3 links in a row change the ul class to "tags" instead of links-->
  615. <h1>Links</h1>
  616. <h2>Favourites</h2>
  617. <ul class="links">
  618. <li><a href="">favourite 1</a></li>
  619. <li><a href="">favourite 2</a></li>
  620. <li><a href="">favourite 3</a></li>
  621. <li><a href="">favourite 4</a></li>
  622. <li><a href="">favourite 5</a></li>
  623. <li><a href="">favourite 6</a></li>
  624. </ul>
  625. <h2>Other links</h2>
  626. <ul class="links">
  627. <li><a href="">other link 1</a></li>
  628. <li><a href="">other link 2</a></li>
  629. <li><a href="">other link 3</a></li>
  630. <li><a href="">other link 4</a></li>
  631. <li><a href="">other link 5</a></li>
  632. <li><a href="">other link 6</a></li>
  633. </ul>
  634. </div></div>
  635. </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!