Advertisement
jhxy

page 001; argo navis

Sep 6th, 2014
2,172
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.10 KB | None | 0 0
  1. <html>
  2.  
  3. <!--
  4. argo navis theme by jordyn
  5. please don't remove the credit
  6. have a rad day
  7.  
  8. if you don't know much about html (ie how to make things bold, lists and what have you) you can write and format whatever you want to write for your 'about' section in a tumblr textpost and then click the little <html> thing in the textpost editor and copy and paste that code into the indicated field :)
  9.  
  10. don't forget to put your url into the thingy that says YOURURLHERE (command+F 'yoururlhere' and replace it with your url so that your askbox works)
  11.  
  12. -->
  13.  
  14. <head>
  15. <script type="text/javascript"
  16. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  17.  
  18. <script>
  19.  
  20.  
  21.  
  22. $(document).ready(function() {
  23.  
  24. //
  25.  
  26.  
  27.  
  28. //When you click on a link with class of poplight and the href starts with a #
  29.  
  30. $('a.poplight[href^=#]').click(function() {
  31.  
  32. var popID = $(this).attr('rel'); //Get Popup Name
  33.  
  34. var popURL = $(this).attr('href'); //Get Popup href to define size
  35.  
  36.  
  37.  
  38. //Pull Query & Variables from href URL
  39.  
  40. var query= popURL.split('?');
  41.  
  42. var dim= query[1].split('&');
  43.  
  44. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  45.  
  46.  
  47.  
  48. //Fade in the Popup and add close button
  49.  
  50. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://static.tumblr.com/y23a4b0/hjDnbf2yq/screen_shot_2014-09-05_at_5.16.01_pm.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  51.  
  52.  
  53. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  54.  
  55. var popMargTop = ($('#' + popID).height() + 80) / 2;
  56.  
  57. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  58.  
  59.  
  60.  
  61. //Apply Margin to Popup
  62.  
  63. $('#' + popID).css({
  64.  
  65. 'margin-top' : -popMargTop,
  66.  
  67. 'margin-left' : -popMargLeft
  68.  
  69. });
  70.  
  71.  
  72.  
  73. //Fade in Background
  74.  
  75. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  76.  
  77. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  78.  
  79.  
  80.  
  81. return false;
  82.  
  83. });
  84.  
  85.  
  86.  
  87. //Close Popups and Fade Layer
  88.  
  89. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  90.  
  91. $('#fade , .popup_block').fadeOut(function() {
  92.  
  93. $('#fade, a.close').remove(); //fade them both out
  94.  
  95. });
  96.  
  97. return false;
  98.  
  99. });
  100.  
  101.  
  102.  
  103.  
  104.  
  105. });
  106.  
  107. </script>
  108. <link href='http://fonts.googleapis.com/css?family=Allura|Reenie+Beanie|Nothing+You+Could+Do|Homemade+Apple|Cinzel+Decorative|Cedarville+Cursive|Meddon|Seaweed+Script' rel='stylesheet' type='text/css'>
  109. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  110.  
  111. <style type="text/css">
  112. body {
  113. font-family:Didot;
  114. font-size:10px;
  115. letter-spacing:2px;
  116. color:#888;
  117. }
  118. a {
  119. text-decoration:none;
  120. color:#222;
  121. }
  122. h2 {
  123. font-family:'Cinzel Decorative';
  124. font-size:20px;
  125. }
  126. #popup_name3 p a, #popup_name1 p a{
  127. width:200px;
  128. border:1px solid #ccc;
  129. display:inline-block;
  130. padding:10px;
  131. font-size:12px;
  132. text-align:center;
  133. margin-bottom:10px;
  134. word-spacing:40px;
  135. box-shadow:2px 2px 2px #fff inset;
  136. -moz-transition-duration: 0.5s;
  137. -o-transition-duration: 0.5s;
  138. -webkit-transition-duration: 0.5s;
  139. transition-duration: 0.5s;
  140. }
  141. #popup_name3 p a:hover, #popup_name1 p a:hover{
  142. background-color:rgba(136,136,136,0.5);
  143. color:rgba(255,255,255,1);
  144. box-shadow:1px 1px 4px #999 inset;
  145. -moz-transition-duration: 0.5s;
  146. -o-transition-duration: 0.5s;
  147. -webkit-transition-duration: 0.5s;
  148. transition-duration: 0.5s;
  149. }
  150. .link {
  151. height:250px;
  152. overflow:scroll;
  153. }
  154. .container {
  155. width:800px;
  156. height:600px;
  157. overflow:hidden;
  158. border:1px solid #ccc;
  159. background: #fff url(http://chandra.harvard.edu/graphics/constellations/argonavis_hev2.jpg) no-repeat top center;
  160. background-size:cover;
  161. margin-right:auto;
  162. margin-left:auto;
  163. margin-top:100px;
  164. }
  165. .circwrap {
  166. z-index:1;
  167. width:810px;
  168. border-radius:50%;
  169. height:800px;
  170. margin-top:239px;
  171. background-color:rgba(255, 255, 255, 0.7);
  172. margin-left:-3px;
  173. }
  174. .circle {
  175. width:820px;
  176. border-radius:50%;
  177. height:800px;
  178. text-align:center;
  179. margin-top:90px;
  180. margin-left:78px;
  181. transform: rotate(-31deg) scale(1.3);
  182. z-index:99;
  183. }
  184. .container .circle li {
  185. position:absolute;
  186. font-size: 15px;
  187. width: 6em;
  188. height: 17em;
  189. transform-origin: 100% 100%;
  190. overflow: hidden;
  191. left: 50%;
  192. top: 50%;
  193. margin-top: -310px;
  194. z-index:100;
  195. margin-left: -135px;
  196. }
  197. .container .circle li a {
  198. display: block;
  199. font-size: 1.18em;
  200. color:#8888;
  201. opacity:0.8;
  202. height: 12.5em;
  203. width: 12.5em;
  204. position: absolute;
  205. z-index:100;
  206. bottom: -7.25em;
  207. right: -7.25em;
  208. margin-top:40px;
  209. border-radius: 50%;
  210. text-decoration: none;
  211. padding-top: 60px;
  212. padding:30px;
  213. text-align: center;
  214. transform: skew(-50deg) rotate(-60deg) scale(1);
  215. transition: opacity 0.3s, color 0.3s;
  216. }
  217. .container .circle li:first-child {
  218. transform: rotate(8deg) skew(50deg);
  219. }
  220.  
  221. .container .circle li:nth-child(2) {
  222. transform: rotate(38deg) skew(50deg);
  223. }
  224.  
  225. .container .circle li:nth-child(3) {
  226. transform: rotate(76deg) skew(50deg)
  227. }
  228.  
  229. .container .circle li:nth-child(4) {
  230. transform: rotate(110deg) skew(50deg);
  231. }
  232.  
  233. .container .circle li:nth-child(5) {
  234. transform: rotate(150deg) skew(50deg);
  235. }
  236. .container .circle li:nth-child(6) {
  237. transform: rotate(178deg) skew(50deg);
  238. }
  239. li a i {
  240. padding:10px;
  241. border-radius:50%;
  242. -moz-transition-duration: 0.5s;
  243. -o-transition-duration: 0.5s;
  244. -webkit-transition-duration: 0.5s;
  245. transition-duration: 0.5s;
  246. z-index:100;
  247. }
  248. li a i:hover {
  249. color: transparent;
  250. text-shadow: #222 0 0 5px;
  251. -moz-transition-duration: 0.5s;
  252. -o-transition-duration: 0.5s;
  253. -webkit-transition-duration: 0.5s;
  254. transition-duration: 0.5s;
  255. }
  256. #fade {
  257. display: none;
  258. background: #000;
  259. position: fixed;
  260. left: 0;
  261. top: 0;
  262. width: 100%;
  263. height: 100%;
  264. opacity: .80;
  265. z-index: 9999;
  266. }
  267.  
  268. .popup_block{
  269. display: none;
  270. background: #FFFFFF;
  271. padding: 30px;
  272. float: left;
  273. position: fixed;
  274. top: 50%;
  275. left: 50%;
  276. z-index: 99999;
  277. opacity:0.8;
  278. height:300px;
  279. text-align:center;
  280. }
  281.  
  282. img.btn_close {
  283. float: right;
  284. margin: -55px -55px 0 0;
  285. height:20px;
  286. width:20px;
  287. }
  288.  
  289. *html #fade {
  290. position: absolute;
  291. }
  292.  
  293. *html .popup_block {
  294. position: absolute;
  295. }
  296. .faq {
  297. height:200px;
  298. overflow-y:scroll;
  299. width:300px;
  300. padding-left:10px;
  301. padding-right:5px;
  302. }
  303. .faq p {
  304. font-size:10px;
  305. }
  306. .about {
  307. height:220px;
  308. overflow-y:scroll;
  309. }
  310. #popup_name2 {
  311. height:auto;
  312. }
  313. ::-webkit-scrollbar {
  314. width: 5px;
  315. }
  316.  
  317. ::-webkit-scrollbar-track {
  318. background-color:#fff;
  319. }
  320.  
  321. ::-webkit-scrollbar-thumb {
  322. border:1px solid #ccc;
  323. background-color:#ccc;
  324. }
  325. .question {
  326. font-size:25px;
  327. color:#444;
  328. text-align:left;
  329. background-color:#ccc;
  330. padding:15px;
  331. }
  332. .answer {
  333. font-size:10px;
  334. color:#888;
  335. text-align:right;
  336. }
  337. .credit {
  338. margin-top:150px;
  339. display:block;
  340. height:5px;
  341. width:5px;
  342. }
  343. </style>
  344. </head>
  345.  
  346. <body>
  347. <div class="container">
  348. <div class="circwrap">
  349.  
  350. <div class="circle">
  351. <div class="nav-wrapper" id="nav-wrapper">
  352. <ul>
  353. <li><a href="/"><i class="fa fa-home"></i></a></li>
  354. <li><a href="#?w=500" rel="popup_name" class="poplight"><i class="fa fa-info-circle"></i></a></li>
  355. <li><a href="#?w=500" rel="popup_name1" class="poplight"><i class="fa fa-bars"></i></a></li>
  356. <li><a href="#?w=600" rel="popup_name2" class="poplight"><i class="fa fa-paper-plane-o"></i></a></li>
  357. <li><a href="#?w=500" rel="popup_name3" class="poplight"><i class="fa fa-tags"></i></a></li>
  358. <li><a href="http://tumblr.com/dashboard"><i class="fa fa-tachometer"></i></a></li>
  359. </ul>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364.  
  365. <div id="popup_name" class="popup_block">
  366. <h2>About</h2>
  367. <div class="about">
  368.  
  369. <!-- EDIT YOUR ABOUT SECTION HERE-->
  370.  
  371. <p>this is your about section ain't that swell. you can add more text and it will just scroll as you can see</p>
  372. <p>
  373. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet erat libero. Nullam eu iaculis tellus, eu volutpat turpis. Donec malesuada ex at quam varius, vitae gravida tellus iaculis. Integer et velit interdum, dignissim nibh nec, molestie lectus. In dignissim vestibulum mi at dictum. Ut leo leo, semper a tellus ac, euismod laoreet libero. Mauris ultrices purus at pellentesque malesuada. Nullam sodales tempor mauris a elementum. Praesent venenatis id mi a egestas. Aliquam dictum felis et lorem mollis bibendum vitae id quam.
  374.  
  375. Morbi elementum, magna vitae ullamcorper luctus, metus lorem tempus nisl, ut commodo turpis tortor ut odio. Proin quis risus eu enim sollicitudin dictum ac in ante. Curabitur lacinia, mi eget accumsan malesuada, metus tellus malesuada diam, nec dictum lectus tellus nec ex. In egestas erat non leo hendrerit, ut mollis turpis lobortis. Curabitur et enim et augue consectetur ultrices. Fusce mattis risus scelerisque, rutrum dolor nec, pulvinar velit. In id purus porttitor, congue nunc sed, sagittis nunc. Fusce nec volutpat sapien.
  376.  
  377. <!--ABOUT SECTION ENDS-->
  378.  
  379. </p>
  380. </div>
  381. </div>
  382. <div id="popup_name1" class="popup_block">
  383. <h2>Links</h2>
  384. <p class="link">
  385.  
  386. <!-- EDIT YOUR LINKS SECTION HERE-->
  387.  
  388. <a href="#">fireworks</a>
  389. <a href="#">styrofoam</a>
  390. <a href="#">gathering</a>
  391. <a href="#">your</a>
  392. <a href="#">storm</a>
  393. <a href="#">you</a>
  394. <a href="#">shivering</a>
  395. <a href="#">talk</a>
  396. <a href="#">space</a>
  397. </p>
  398.  
  399. <!--LINKS SECTION ENDS-->
  400.  
  401. </div>
  402. <div id="popup_name2" class="popup_block">
  403. <h2>FAQ</h2>
  404. <table>
  405. <tr>
  406. <td><div class="askbox">
  407. <iframe frameborder="0"
  408. height="250"
  409. id="ask_form"
  410. scrolling="no"
  411. src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com"
  412. width="100%">
  413. </iframe>
  414. </div></td>
  415. <td>
  416. <div class="faq">
  417. <!-- EDIT YOUR FAQ HERE
  418. how to add more questions:
  419. - copy and paste this bit:
  420. <p class="question">
  421. how many of these can i have?
  422. </p>
  423. <p class="answer">
  424. the limit does not exist.
  425. </p>
  426.  
  427. and you done!!!
  428. -->
  429. <p class="question">
  430. how many of these can i have?
  431. </p>
  432. <p class="answer">
  433. the limit does not exist.
  434. </p>
  435. <p class="question">
  436. how do i add more?
  437. </p>
  438. <p class="answer">
  439. copy and paste the question answer thingies in the code yay
  440. </p>
  441. <p class="question">
  442. how is school going?
  443. </p>
  444. <p class="answer">
  445. no.
  446. </p>
  447. <p class="question">
  448. what do you want to do when you're older?
  449. </p>
  450. <p class="answer">
  451. no.
  452. </p>
  453. <p class="question">
  454. my, my, haven't you gotten tall?
  455. </p>
  456. <p class="answer">
  457. no.
  458. </p>
  459.  
  460. <!--FAQ SECTION ENDS-->
  461.  
  462. </div>
  463. </td>
  464. </tr>
  465. </table>
  466. </div>
  467. <div id="popup_name3" class="popup_block">
  468. <h2>Tags</h2>
  469. <p class="link">
  470.  
  471. <!-- EDIT YOUR TAGS SECTION HERE-->
  472.  
  473. <a href="#">fireworks</a>
  474. <a href="#">styrofoam</a>
  475. <a href="#">gathering</a>
  476. <a href="#">your</a>
  477. <a href="#">storm</a>
  478. <a href="#">you</a>
  479. <a href="#">shivering</a>
  480. <a href="#">talk</a>
  481. <a href="#">space</a>
  482.  
  483. <!--TAGS SECTION ENDS-->
  484. </p>
  485. </div>
  486.  
  487.  
  488. <div class="credit">
  489. <a href="http://jhxythemes.tumblr.com"><img style="height:50px; width:50px;"src="https://38.media.tumblr.com/690d59d5b30ad0628ab75ac7794c6ab9/tumblr_n9vk8a9IHR1r1bumeo1_100.png"></a></div>
  490. </body>
  491.  
  492. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement