API tools faq
paste
Advertisement
Guest User

I | -KKAEPSONG THEMES | COMPASS

a guest
Apr 24th, 2015
231
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <title>{Title}</title>
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7. <link rel="shortcut icon" href="{Favicon}" />
  8.  
  9. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  10.  
  11. <script type="text/javascript"
  12. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  13. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  14. <script>
  15. (function($){
  16. $(document).ready(function(){
  17. $("[title]").style_my_tooltips({
  18. tip_follows_cursor:true,
  19. tip_delay_time:300,
  20. tip_fade_speed:300,
  21. }
  22. );
  23. });
  24. })(jQuery);
  25. </script>
  26.  
  27. <style type="text/css">
  28.  
  29. /**SCROLL BAR***/
  30. ::-webkit-scrollbar {
  31. width: 5px;
  32. height: 5px;
  33. background-color: #ffffff;
  34. }
  35.  
  36.  
  37. ::-webkit-scrollbar-thumb {
  38. background-color: #7f7f7f;
  39. height: 5px;
  40. width: 5px;
  41. }
  42.  
  43. ::-webkit-scrollbar-track-piece {
  44. width: 5px;
  45. height: 5px;
  46. border: solid #ffffff 2px;
  47. background-color: #000000;
  48. }
  49. /**SCROLL BAR END***/
  50.  
  51. body {
  52. margin: 0;
  53. padding: 0;
  54. height: 100%;
  55. width: 100%;
  56. word-wrap: break-word;
  57. font-family: courier new;
  58. color: #7f7f7f;
  59. background-color: #fff;
  60. }
  61.  
  62. /**TOOLTIP AKA THE BOX YOU GET WHEN YOU HOVER OVER LINKS***/
  63. #s-m-t-tooltip {
  64. background: #ccc;
  65. z-index: 999999;
  66. padding: 3px;
  67. border: solid 1px #cffeff;
  68. color: #fff;
  69. margin: 15px;
  70. padding: 5px;
  71. font-size: 9px;
  72. text-transform: uppercase;
  73. }
  74.  
  75. /**HIGHLIGHT COLOUR***/
  76. ::selection {
  77. background: #ccc;
  78. color: #cffeff;
  79. }
  80.  
  81. ::-moz-selection {
  82. background: #ccc;
  83. color: #cffeff;
  84. }
  85. /**HIGHLIGHT COLOUR END***/
  86.  
  87. hr {
  88. border: 0;
  89. height: 1px;
  90. background: #333;
  91. background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
  92. background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
  93. background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
  94. background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
  95. margin: 0px 50px;
  96. }
  97.  
  98. h1 {
  99. color: #000000;
  100. font-size: 25px;
  101. text-transform: uppercase;
  102. letter-spacing: 1px;
  103. font-weight: 500;
  104. text-align: center;
  105. margin-top: 25px;
  106. }
  107.  
  108. table {
  109. position: fixed;
  110. width: 100%;
  111. height: 100%;
  112. }
  113.  
  114. tr {
  115. height: 50%;
  116. width: 100%;
  117. }
  118.  
  119. td {
  120. position: relative;
  121. height: 50%;
  122. width: 50%;
  123. }
  124.  
  125.  
  126. #nw {
  127. position: absolute;
  128. height: 100px;
  129. width: 100px;
  130. border-right: 1px solid black;
  131. border-bottom: 1px solid black;
  132. bottom: 0;
  133. right: 0;
  134. transition: all 1s ease-in;
  135. -webkit-transition: all 1s ease-in;
  136. -moz-transition: all 1s ease-in;
  137. -ms-transition: all 1s ease-in;
  138. -o-transition: all 1s ease-in;
  139. }
  140.  
  141. #nw:hover {
  142. height: 100%;
  143. width: 100%;
  144. }
  145.  
  146. #ne {
  147. position: absolute;
  148. height: 100px;
  149. width: 100px;
  150. border-left: 1px solid black;
  151. border-bottom: 1px solid black;
  152. bottom: 0;
  153. left: 0;
  154. transition: all 1s ease-in;
  155. -webkit-transition: all 1s ease-in;
  156. -moz-transition: all 1s ease-in;
  157. -ms-transition: all 1s ease-in;
  158. -o-transition: all 1s ease-in;
  159. }
  160.  
  161. #ne:hover {
  162. height: 100%;
  163. width: 100%;
  164. }
  165.  
  166. #sw {
  167. position: absolute;
  168. height: 100px;
  169. width: 100px;
  170. border-right: 1px solid black;
  171. border-top: 1px solid black;
  172. top: 0;
  173. right: 0;
  174. transition: all 1s ease-in;
  175. -webkit-transition: all 1s ease-in;
  176. -moz-transition: all 1s ease-in;
  177. -ms-transition: all 1s ease-in;
  178. -o-transition: all 1s ease-in;
  179. }
  180.  
  181. #sw:hover {
  182. height: 100%;
  183. width: 100%;
  184. }
  185.  
  186. #se {
  187. position: absolute;
  188. height: 100px;
  189. width: 100px;
  190. border-left: 1px solid black;
  191. border-top: 1px solid black;
  192. top: 0;
  193. left: 0;
  194. transition: all 1s ease-in;
  195. -webkit-transition: all 1s ease-in;
  196. -moz-transition: all 1s ease-in;
  197. -ms-transition: all 1s ease-in;
  198. -o-transition: all 1s ease-in;
  199. }
  200.  
  201. #se:hover {
  202. height: 100%;
  203. width: 100%;
  204. }
  205.  
  206. .container {
  207. width: 100%;
  208. height: 100%;
  209. opacity: 0;
  210. transition: opacity .5s ease-in 0s;
  211. -webkit-transition: opacity .5s ease-in 0s;
  212. -moz-transition: opacity .5s ease-in 0s;
  213. -ms-transition: opacity .5s ease-in 0s;
  214. -o-transition: opacity .5s ease-in 0s;
  215. }
  216.  
  217. .container:hover {
  218. opacity: 1;
  219. transition: opacity 1s ease-in 0.75s;
  220. }
  221.  
  222. .top {
  223. position: absolute;
  224. top: 0;
  225. height: 30%;
  226. width: 100%;
  227. }
  228.  
  229. .nwbox {
  230. position: absolute;
  231. bottom: 0;
  232. margin-top: 30%;
  233. height: 60%;
  234. margin: 5%;
  235. width: 90%;
  236. overflow-x: hidden;
  237. overflow-y: auto;
  238. }
  239.  
  240. .nwbox p {
  241. line-height: 22px;
  242. text-align: justify;
  243. margin: 0px 5px 15px 5px;
  244. }
  245.  
  246. /**DESCRIPTION LINKS***/
  247. .nwbox a {
  248. color: #ccc;
  249. padding: 1px;
  250. border-bottom: 1px solid #7f7f7f;
  251. text-decoration: none;
  252. transition: color 0.5s ease;
  253. -webkit-transition: all 0.5s ease;
  254. -moz-transition: all 0.5s ease;
  255. -ms-transition: all 0.5s ease;
  256. -o-transition: all 0.5s ease;
  257. }
  258.  
  259. .nwbox a:hover {
  260. color: #7f7f7f;
  261. border-bottom: 1px solid #cffeff;
  262. }
  263. /**DESCRIPTION LINKS END***/
  264.  
  265. .nebox {
  266. position: absolute;
  267. bottom: 0;
  268. margin-top: 30%;
  269. height: 60%;
  270. margin: 5%;
  271. width: 90%;
  272. overflow: hidden;
  273. }
  274.  
  275. .swbox {
  276. position: absolute;
  277. bottom: 0;
  278. margin-top: 30%;
  279. height: 60%;
  280. margin: 5%;
  281. width: 90%;
  282. overflow-x: hidden;
  283. overflow-y: auto;
  284. }
  285.  
  286. /**NAVIGATION LINKS***/
  287. .swbox a {
  288. color: #ccc;
  289. padding: 5px;
  290. border-bottom: 1px solid #7f7f7f;
  291. text-decoration: none;
  292. transition: color 0.5s ease;
  293. -webkit-transition: all 0.5s ease;
  294. -moz-transition: all 0.5s ease;
  295. -ms-transition: all 0.5s ease;
  296. -o-transition: all 0.5s ease;
  297. }
  298.  
  299. .swbox a:hover {
  300. color: #7f7f7f;
  301. border-bottom: 1px solid #cffeff;
  302. }
  303.  
  304. .swbox hr {
  305. border: 0;
  306. height: 1px;
  307. background: #7f7f7f;
  308. margin: 5px 75px;
  309. }
  310. /**NAVIGATION LINKS END***/
  311.  
  312. .sebox {
  313. position: absolute;
  314. bottom: 0;
  315. margin-top: 30%;
  316. height: 65%;
  317. margin: 0% 5% 5% 5%;
  318. width: 90%;
  319. overflow-x: hidden;
  320. overflow-y: auto;
  321. }
  322.  
  323. /**BLOGROLL***/
  324. .sebox a {
  325. text-align: justify;
  326. text-decoration: none;
  327. border-bottom: 1px solid #7f7f7f;
  328. transition: all 0.5s ease;
  329. -webkit-transition: all 0.5s ease;
  330. -moz-transition: all 0.5s ease;
  331. -ms-transition: all 0.5s ease;
  332. -o-transition: all 0.5s ease;
  333. }
  334.  
  335. .sebox a:hover {
  336. border-bottom: 1px solid #cffeff;
  337. }
  338.  
  339. .sebox img {
  340. margin: 20px 15px 15px 15px;
  341. padding: 5px 5px 2px 5px;
  342. border-radius: 0%;
  343. transition: border-radius .5s linear 0s;
  344. -webkit-transition: border-radius .5s linear 0s;
  345. -moz-transition: border-radius .5s linear 0s;
  346. -ms-transition: border-radius .5s linear 0s;
  347. -o-transition: border-radius .5s linear 0s;
  348.  
  349. }
  350.  
  351. .sebox img:hover {
  352. border-radius: 100%;
  353. }
  354. /**BLOGROLL END***/
  355.  
  356. #bar {
  357. position: fixed;
  358. top: 0;
  359. left: 0;
  360. width: 100%;
  361. height: 50px;
  362. z-index: 999;
  363.  
  364. }
  365.  
  366. #icons {
  367. margin: 5px;
  368. float: right;
  369. }
  370.  
  371. /**ICONS***/
  372. #icons a {
  373. color: #ccc;
  374. transition: all 1s ease;
  375. -webkit-transition: all 1s ease;
  376. -moz-transition: all 1s ease;
  377. -ms-transition: all 1s ease;
  378. -o-transition: all 1s ease;
  379. }
  380.  
  381. #icons a:hover {
  382. color: #cffeff;
  383. }
  384. /**ICONS END***/
  385.  
  386. </style>
  387. </head>
  388. <body>
  389. <div id="bar"><div id="icons">
  390. <a href="http://-kkaepsong.tumblr.com/" title="credit"><i class="fa fa-compass fa-2x"></i></a>
  391. <a href="/" title="home"><i class="fa fa-home fa-2x"></i></a>
  392. </div></div>
  393.  
  394. <table cellpadding="0" cellspacing="0">
  395. <tr>
  396. <td>
  397. <div id="nw"><div class="container">
  398. <!---DESCRIPTION--->
  399. <div class="top"><h1>here i am</h1><hr></div>
  400. <div class="nwbox"><p>A <a href="http://-kkaepsong.tumblr.com/" title="yehet">journey</a> is a person in itself; <i>no two are alike.</i> And all plans, safeguards, policing, and <b>coercion</b> are <u>fruitless.</u> We find that after <s>years of struggle</s> that we do not take a trip; a trip takes us. Lorem ipsum dolor sit amet, quis platea diam est justo tempor diam, erat dui, vel litora, nam turpis netus. Dapibus lorem fringilla penatibus rutrum ultricies dolor, vestibulum at duis elit metus condimentum, etiam mollis elementum ipsum aliquam, urna quis praesent nibh iaculis, eros sapien sapien luctus mauris commodo sed. Sed nunc eget ante varius elit amet, quam suspendisse, mattis dui platea, maecenas dis sed, ac felis id. Porta mi urna hac et sed suspendisse, consequat ut, et magna magna massa, nulla nam massa arcu. Magna sagittis.</p></div>
  401. </div></div>
  402. </td>
  403. <td>
  404. <div id="ne"><div class="container">
  405. <!---ASKBOX--->
  406. <div class="top"><h1>mailbox</h1><hr></div>
  407. <div class="nebox"><iframe frameborder="0" border="none" height="100%" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/INSERT YOUR TUMBLR URL HERE" width="100%" ></iframe></div>
  408. </div></div>
  409. </td>
  410. </tr>
  411. <tr>
  412. <td>
  413. <div id="sw"><div class="container">
  414. <!---TAGS/LINKS/NAVIGATION--->
  415. <div class="top"><h1>lost?</h1><hr></div>
  416. <div class="swbox">
  417. <center><a href="">would</a> <a href="">you</a> <a href="">look</a> <a href="">at</a> <a href="">that</a>
  418. <hr class="sw">
  419. <br>
  420. <a href="">an</a> <a href="">infinite</a> <a href="">amount</a> <a href="">of</a> <a href="">journeys</a> <a href="">to</a> <a href="">take</a>
  421. <hr class="sw">
  422. <br>
  423. <a href="">as</a> <a href="">many</a> <a href="">links</a> <a href="">as</a> <a href="">you'd</a> <a href="">like</a>
  424. <hr class="sw">
  425. <br>
  426. <a href="">with</a> <a href="">you</a> <a href="">by</a> <a href="">my</a> <a href="">side</a>
  427. <hr class="sw">
  428. </center>
  429. </div>
  430. </div></div>
  431. </td>
  432. <td>
  433. <div id="se"><div class="container">
  434. <!---BLOGROLL--->
  435. <div class="top"><h1>guides</h1><hr></div>
  436. <div class="sebox">
  437. {block:Following}
  438. {block:Followed}
  439. <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}"></a>
  440. {/block:Followed}
  441. {/block:Following}
  442. </div>
  443. </div></div>
  444. </td>
  445. </tr>
  446. </table>
  447.  
  448. </body>
  449. </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!