API tools faq
paste
Advertisement
heavenlydoctor

Solaris

heavenlydoctor
Jan 19th, 2015
668
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.87 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!---all in one page by eurhipides. okay you know the drill, dont steal, dont use as a base, yada yada yada. if you have any questions visit me at elisionthemes.tumblr.com. this is pretty easy to edit if you have basic css/html experience and I put in instructions to help just in case. have fun! code responsibly.--->
  5.  
  6. <title>navigation</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.  
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  11.  
  12. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  13.  
  14. <script>
  15.  
  16. (function($){
  17.  
  18. $(document).ready(function(){
  19.  
  20. $("a[title]").style_my_tooltips({
  21.  
  22. tip_follows_cursor:true,
  23.  
  24. tip_delay_time:100,
  25.  
  26. tip_fade_speed:300,
  27.  
  28. attribute:"title"
  29.  
  30. });
  31.  
  32. });
  33.  
  34. })(jQuery);
  35.  
  36. </script>
  37.  
  38. <script>
  39. $(document).ready(function(){
  40. $(".t.abt, .back.a").click(function(){
  41. $('.one, .aboutab').toggleClass('movetop');
  42. });
  43. });
  44. </script>
  45.  
  46. <script>
  47. $(document).ready(function(){
  48. $(".t.lnk, .back.l").click(function(){
  49. $('.one, .linkstab').toggleClass('movebottom');
  50. });
  51. });
  52. </script>
  53.  
  54. <script>
  55. $(document).ready(function(){
  56. $(".t.br, .back.b").click(function(){
  57. $('.one, .brtab').toggleClass('movetop');
  58. });
  59. });
  60. </script>
  61.  
  62. <script>
  63. $(document).ready(function(){
  64. $(".t.msg, .back.m").click(function(){
  65. $('.one, .msgtab').toggleClass('movebottom');
  66. });
  67. });
  68. </script>
  69.  
  70. <link href='http://fonts.googleapis.com/css?family=Raleway:200,400' rel='stylesheet' type='text/css'>
  71.  
  72. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  73.  
  74. <style type="text/css">
  75.  
  76. #s-m-t-tooltip {
  77. max-width:150px;
  78. padding:5px 8px;
  79. margin:20px 14px 7px 10px;
  80. background-color:#fff;
  81. font-family:Calibri;
  82. font-size:10px;
  83. line-height:11px;
  84. letter-spacing:1px;
  85. text-transform:uppercase;
  86. color:#777;
  87. border:1px solid #ddd;
  88. z-index:99999999;
  89. }
  90.  
  91. ::-webkit-scrollbar {
  92. height:2px;
  93. width:2px;
  94. background-color: transparent;
  95. }
  96.  
  97. ::-webkit-scrollbar-thumb {
  98. background-color: #777; /*change scrollbar color*/
  99. height:auto;
  100. border-bottom:none;
  101. }
  102.  
  103. ::selection {
  104. background-color: #000;
  105. color: #fff;
  106. }
  107.  
  108. body {
  109. background-color: #f5f5f5;
  110. font-family:arial;
  111. font-size:12px;
  112. }
  113.  
  114.  
  115. a {
  116. text-decoration: none;
  117. color: #000; /*change link color*/
  118. }
  119.  
  120. a:hover {
  121. text-decoration: none;
  122. color:#aaa; /*change link hover color*/
  123. }
  124.  
  125. .con {
  126. width:500px;
  127. height:500px;
  128. position:fixed;
  129. left:0;
  130. right:0;
  131. top:0;
  132. bottom:0;
  133. margin:auto;
  134. color:#777; /*change text color*/
  135. }
  136.  
  137. .one {
  138. -webkit-transition: 0.65s;
  139. -moz-transition: 0.65s;
  140. transition: 0.65s;
  141. }
  142.  
  143. .one .t {
  144. position:relative;
  145. width:340px;
  146. margin:30px auto;
  147. font-size:40px;
  148. font-family:'Raleway', sans-serif;
  149. font-weight:200;
  150. text-transform:uppercase;
  151. color:#777; /*change tab title color*/
  152. letter-spacing:3px;
  153. text-align:center;
  154. cursor:pointer;
  155. padding:20px;
  156. }
  157.  
  158. .t:hover {
  159. color:#ccc; /*change tab title hover color*/
  160. }
  161.  
  162. /*do not edit*/
  163. .one.movetop {
  164. margin-top:250px;
  165. -webkit-transform: rotateX(-90deg);
  166. -moz-transform: rotateX(-90deg);
  167. -webkit-transition: 0.7s;
  168. -moz-transition: 0.7s;
  169. transition: 0.7s;
  170. }
  171.  
  172. .one.movebottom {
  173. margin-top:-250px;
  174. -webkit-transform: rotateX(90deg);
  175. -moz-transform: rotateX(90deg);
  176. -webkit-transition: 0.7s;
  177. -moz-transition: 0.7s;
  178. transition: 0.7s;
  179. }
  180.  
  181. .brtab, .aboutab {
  182. padding:40px;
  183. box-sizing:border-box;
  184. margin-top:-250px;
  185. -webkit-transform: rotateX(90deg);
  186. -moz-transform: rotateX(90deg);
  187. -webkit-transition: 0.6s;
  188. -moz-transition: 0.6s;
  189. transition: 0.6s;
  190. }
  191.  
  192. .brtab.movetop, .aboutab.movetop {
  193. margin-top:0px;
  194. -webkit-transform: rotateX(0deg);
  195. -moz-transform: rotateX(0deg);
  196. -webkit-transition: 0.7s;
  197. -moz-transition: 0.7s;
  198. transition: 0.7s;
  199. }
  200.  
  201. .msgtab, .linkstab {
  202. padding:40px;
  203. box-sizing:border-box;
  204. margin-top:250px;
  205. -webkit-transform: rotateX(-90deg);
  206. -moz-transform: rotateX(-90deg);
  207. -webkit-transition: 0.6s;
  208. -moz-transition: 0.6s;
  209. transition: 0.6s;
  210. }
  211.  
  212. .msgtab.movebottom, .linkstab.movebottom {
  213. margin-top:0px;
  214. -webkit-transform: rotateX(0deg);
  215. -moz-transform: rotateX(0deg);
  216. -webkit-transition: 0.7s;
  217. -moz-transition: 0.7s;
  218. transition: 0.7s;
  219. }
  220. /*okay now u can edit*/
  221.  
  222. .msgtab, .brtab, .linkstab, .aboutab, .one {
  223. background:#fff;/*change tabs background color*/
  224. width:500px;
  225. height:500px;
  226. border:1px solid #ddd; /*change tabs border color*/
  227. position:absolute;
  228. }
  229.  
  230. #top {
  231. position:absolute;
  232. top:20px;
  233. left:20px;
  234. right:20px;
  235. padding:20px;
  236. padding-bottom:40px;
  237. height:80px;
  238. }
  239.  
  240. .i {
  241. padding:10px;
  242. border-bottom:1px solid #ddd; /*change info border (about tab) color*/
  243. font-size:8px;
  244. text-transform:uppercase;
  245. letter-spacing:1px;
  246. margin:5px 0px;
  247. }
  248.  
  249. .desc {
  250. position:absolute;
  251. bottom:55px;
  252. left:30px;
  253. padding:0px 20px;
  254. right:50px;
  255. height:275px;
  256. line-height:17px;
  257. overflow:auto;
  258. font-size:10px;
  259. text-transform:uppercase;
  260. letter-spacing:1px;
  261. }
  262.  
  263. .back {
  264. font-size:10px;
  265. letter-spacing:1px;
  266. text-transform:uppercase;
  267. position:absolute;
  268. bottom:20px;
  269. left:40px;
  270. color:#777; /*change back button color*/
  271. }
  272.  
  273. .back:hover {
  274. color:#777; /*change back button hover color*/
  275. }
  276.  
  277. .tags {
  278. height:200px;
  279. overflow:auto;
  280. width:150px;
  281. display:inline-block;
  282. margin:5px 25px;
  283. }
  284.  
  285. .tagt {
  286. font-size:10px;
  287. letter-spacing:1px;
  288. padding:5px;
  289. border-bottom:1px solid #ddd; /*change tag title border color*/
  290. text-transform:uppercase;
  291. }
  292.  
  293. .tag {
  294. border-bottom:1px solid #f2f2f2; /*change tag border color*/
  295. padding:7px;
  296. display:block;
  297. font-size:8px;
  298. text-transform:uppercase;
  299. letter-spacing:2px;
  300. color:#bbb; /*change tag color*/
  301. }
  302.  
  303. .tag:hover {
  304. border-bottom:1px solid #ddd; /*change tag hover border color*/
  305. color:#777; /*change tag hover color*/
  306. }
  307.  
  308. .ask {
  309. font-size:10px;
  310. letter-spacing:1px;
  311. text-transform:uppercase;
  312. line-height:15px;
  313. text-align:center;
  314. }
  315.  
  316. .credit {
  317. position:fixed;
  318. padding:5px 7px;
  319. bottom:10px;
  320. right:10px;
  321. background:#f5f5f5; /*change credit link background color, this is the only thing on the credit you can touch unless you explicitly ask me.*/
  322. }
  323.  
  324. </style>
  325. </head>
  326. <body>
  327.  
  328. <div class="con">
  329. <div class="one">
  330. <div class="t abt">about</div>
  331. <div class="t lnk">links</div>
  332. <div class="t br">blogroll</div>
  333. <div class="t msg">message</div>
  334. </div>
  335.  
  336. <div class="aboutab">
  337. <div id="top">
  338. <div style="display:table; position:absolute; top:10px; height:81px; width:410px">
  339. <div style="display:table-cell;height:100%; vertical-align:middle">
  340. <div class="i"><b>location:</b> place</div>
  341. <div class="i"><b>name:</b> name here</div>
  342. <div class="i"><b>age:</b> age here</div>
  343. </div>
  344. </div>
  345. </div>
  346. <div class="desc">
  347.  
  348. <!------change description. remember to wrap each paragraph in <p> and </p> tags as shown below--->
  349. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius dui sed purus fringilla, vitae feugiat ex finibus. Maecenas sagittis eros ut felis commodo, ut mattis risus tempus. Donec a purus tincidunt, rhoncus nisi ut, tempor risus. Aenean tincidunt venenatis libero vitae tincidunt. In vel sollicitudin felis. Fusce libero mi, dictum a ante vitae, volutpat pharetra metus. Ut vel eros placerat, finibus nibh in, cursus justo.</p>
  350. <p>Maecenas hendrerit pharetra nibh ac vulputate. Etiam vel libero nibh. Quisque tempor sed neque in aliquet. Nunc congue diam id nisi tincidunt, eu pulvinar risus placerat. Sed nisl velit, imperdiet eget blandit in, cursus sed quam. Suspendisse eu erat eu metus pretium porta. Sed in tortor eros. Donec euismod in sem eget malesuada. Duis eget dignissim orci. Aliquam volutpat urna augue, vitae vestibulum diam suscipit non.</p>
  351. <!----end description--->
  352.  
  353. </div>
  354. <a class="back a" href="javascript:;">back</a>
  355. </div>
  356.  
  357. <div class="linkstab">
  358.  
  359. <div style="height:100%; overflow:auto">
  360.  
  361. <div class="tags">
  362.  
  363. <!---to add a new tags section copy and paste from here--->
  364. <div class="tagt">tag title</div>
  365. <a class="tag" href="">tag</a>
  366. <a class="tag" href="">tag</a>
  367. <a class="tag" href="">tag</a>
  368. <a class="tag" href="">tag</a>
  369. <a class="tag" href="">tag</a>
  370. </div>
  371. <!----to here--->
  372.  
  373. <div class="tags">
  374. <div class="tagt">tag title</div>
  375. <a class="tag" href="">tag</a>
  376. <a class="tag" href="">tag</a>
  377. <a class="tag" href="">tag</a>
  378. <a class="tag" href="">tag</a>
  379. <a class="tag" href="">tag</a>
  380. <a class="tag" href="">tag</a>
  381. <a class="tag" href="">tag</a>
  382. </div>
  383.  
  384. <div class="tags">
  385. <div class="tagt">tag title</div>
  386. <a class="tag" href="">tag</a>
  387. <a class="tag" href="">tag</a>
  388. <a class="tag" href="">tag</a>
  389. <a class="tag" href="">tag</a>
  390. <a class="tag" href="">tag</a>
  391. <a class="tag" href="">tag</a>
  392. <a class="tag" href="">tag</a>
  393. </div>
  394.  
  395. <div class="tags">
  396. <div class="tagt">tag title</div>
  397. <a class="tag" href="">tag</a>
  398. <a class="tag" href="">tag</a>
  399. <a class="tag" href="">tag</a>
  400. <a class="tag" href="">tag</a>
  401. <a class="tag" href="">tag</a>
  402. <a class="tag" href="">tag</a>
  403. <a class="tag" href="">tag</a>
  404. </div>
  405.  
  406. </div>
  407.  
  408.  
  409. <a class="back l" href="javascript:;">back</a>
  410. </div>
  411.  
  412. <div class="brtab">
  413. <div style="height:100%; overflow:auto">
  414.  
  415. {block:Following}{block:Followed}
  416. <div style="display:inline-block; margin:7px">
  417. <a target="_blank" href='{FollowedURL}' title='{FollowedName}'><img src='{FollowedPortraitURL-40}'></a>
  418. </div>
  419. {block:Followed}{/block:Following}
  420.  
  421. <a class="back b" href="javascript:;">back</a>
  422. </div>
  423. </div>
  424.  
  425. <div class="msgtab">
  426. <div style="height:100%; overflow:auto" class="ask">
  427.  
  428. <p><b>questions about everything?</b><br>
  429. here are answers that satisfy your curiosity. <a href="link">link</a>, <u>underline</u>, <b>bold</b> and <i>italics</i>.</p>
  430.  
  431. <!---to add a new question copy and paste from here--->
  432. <p><b>here is a question</b><br>
  433. here is an answer.</p>
  434. <!---to here--->
  435.  
  436. <p><b>here is a question</b><br>
  437. here is an answer.</p>
  438.  
  439. <!---remember to change YOURURL to your actual url WITHOUT .tumblr.com--->
  440. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/eurhipides.tumblr.com" style="overflow:auto; margin-top:30px" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  441.  
  442. <a class="back m" href="javascript:;">back</a>
  443. </div>
  444. </div>
  445.  
  446.  
  447. </div>
  448. <a class="credit" href="http://astraeus.co.vu" title="eurhipides">©</a>
  449.  
  450.  
  451. </body>
  452. </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!