Advertisement
septims

Checker Page

Nov 17th, 2014
4,885
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.94 KB | None | 0 0
  1. <!--
  2.  
  3. theme by septim
  4.  
  5.  
  6.  
  7. -->
  8.  
  9.  
  10. <!DOCTYPE html>
  11. <head>
  12.  
  13. <title>{Title}</title>
  14.  
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18.  
  19.  
  20.  
  21.  
  22. <!-- jquery -->
  23.  
  24.  
  25. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  26.  
  27. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  28.  
  29. <script>
  30.  
  31. (function($){
  32.  
  33. $(document).ready(function(){
  34.  
  35. $("a[title]").style_my_tooltips({
  36.  
  37. tip_follows_cursor:true,
  38.  
  39. tip_delay_time:30,
  40.  
  41. tip_fade_speed:300,
  42.  
  43. attribute:"title"
  44.  
  45. });
  46.  
  47. });
  48.  
  49. })(jQuery);
  50.  
  51. </script>
  52.  
  53.  
  54. <script>
  55. $(document).ready(function() {
  56. $('#one').click(function() {
  57. $('#about').fadeIn(400);
  58. });
  59. $('#two').click(function() {
  60. $('#links').fadeIn(400);
  61. }); ;
  62. $('#three').click(function() {
  63. $('#message').fadeIn(400);
  64. });
  65. $('#four').click(function() {
  66. $('#roll').fadeIn(400);
  67. });
  68. $('.close').click(function() {
  69. $('#about, #message, #links, #roll').fadeOut(400);
  70. });
  71. });
  72. </script>
  73.  
  74. <!--CSS customization here. -->
  75.  
  76. <style type="text/css">
  77.  
  78. #s-m-t-tooltip{
  79. font-size:8px;
  80. position:absolute;
  81. margin:25px 15px;
  82. letter-spacing:1px;
  83. z-index:9999;
  84. background:black;
  85. color:white;
  86. text-transform:uppercase;
  87. padding:0 4px;
  88. -webkit-transition:all 0.3s;
  89. -moz-transition:all 0.3s;
  90. -ms-transition:all 0.3s;
  91. -o-transition:all 0.3s;
  92. transition:all 0.3s;
  93. }
  94.  
  95.  
  96.  
  97.  
  98. /*scrollbar*/
  99. ::-webkit-scrollbar{height: 5px;
  100. width: 3px;
  101. -webkit-border-radius: 0px;
  102. background-color:transparent}
  103. ::-webkit-scrollbar-thumb{background-color:#ccc;}
  104. ::-webkit-scrollbar-track{background-color:transparent;}
  105.  
  106.  
  107.  
  108.  
  109. b, strong {color:black;}
  110. i, em {color:#ccc;}
  111. u {border-bottom:2px solid #ccc;
  112. text-decoration:none;}
  113.  
  114. a:link, a:active, a:visited {
  115. color:black;
  116. text-decoration:none;
  117. -webkit-transition:all 0.4s;
  118. -moz-transition:all 0.4s;
  119. -ms-transition:all 0.4s;
  120. -o-transition:all 0.4s;
  121. transition:all 0.4s;
  122. }
  123.  
  124. a:hover {color:#eee;
  125. -webkit-transition:all 0.4s;
  126. -moz-transition:all 0.4s;
  127. -ms-transition:all 0.4s;
  128. -o-transition:all 0.4s;
  129. transition:all 0.4s;
  130. }
  131. p {padding:0;}
  132. p:firt-of-type {margin-top:0px}
  133. p:last-of-type {margin-bottom:0px}
  134.  
  135. /*main structure*/
  136. blockquote {padding:5px 0 5px 30px;
  137. border-left:1px solid #eee;
  138. margin:0;
  139. }
  140.  
  141. body {
  142. color:#A7A5A5;
  143. font-family:consolas;
  144. font-size:9px;
  145. text-align:center;
  146. margin:0;
  147. background:white;
  148. line-height:180%}
  149.  
  150.  
  151. #con {width:400px;
  152. padding:9px;
  153. border:1px solid #eee;
  154. position:absolute;
  155. left:50%;
  156. top:50%;
  157. margin-left:-210px;
  158. margin-top:-210px;
  159. height:400px;
  160. }
  161.  
  162. .links {position:absolute;
  163. width:400px;
  164. left:0;
  165. top:0;
  166. margin-top:440px;
  167. text-align:center;
  168. font-size:8px;
  169. text-transform:capitalize;
  170. letter-spacing:1px;
  171. }
  172.  
  173. .links a {margin:0 20px;}
  174.  
  175. .block {width:195px;
  176. height:195px;
  177. /*block background color*/
  178. background:black;
  179. position:relative;
  180. display:block;
  181. float:left;}
  182.  
  183. .block img {width:195px;
  184. height:195px;
  185. display:block;}
  186.  
  187. .h {position:absolute;
  188. width:175px;
  189. height:175px;
  190. padding:10px;
  191. top:0;
  192. z-index:10!important;
  193. display:block;
  194. left:0;
  195. background:rgba(255,255,255,.8);
  196. text-align:center;
  197. font-size:10px;
  198. text-transform:uppercase;
  199. letter-spacing:1px;
  200. cursor:pointer;
  201. overflow-y:auto;
  202. opacity:0;
  203. -webkit-transition:all 0.4s;
  204. -moz-transition:all 0.4s;
  205. -ms-transition:all 0.4s;
  206. -o-transition:all 0.4s;
  207. transition:all 0.4s;
  208. }
  209.  
  210. .block:hover .h {opacity:1;
  211. -webkit-transition:all 0.4s;
  212. -moz-transition:all 0.4s;
  213. -ms-transition:all 0.4s;
  214. -o-transition:all 0.4s;
  215. transition:all 0.4s; }
  216.  
  217. .h span {display:block;
  218. position:absolute;
  219. top:50%;
  220. color:black;
  221. width:calc(100% - 10px);
  222. left:0;
  223. transform: translate(0,-50%);
  224. -webkit-transform: translate(0%,-50%); /** Chrome & Safari **/
  225. -o-transform: translate(0,-50%); /** Opera **/
  226. -moz-transform: translate(0,-50%); /** Firefox **/
  227. }
  228.  
  229. .panel {width:380px;
  230. height:380px;
  231. padding:10px;
  232. text-align:justify;
  233. position:Absolute;
  234. /*panel background*/
  235. background:#eee;
  236. overflow-x:hidden;
  237. overflow-y:auto;
  238. z-index:15;
  239. display:none;
  240. }
  241.  
  242.  
  243.  
  244. #title {
  245. background:#CCC;
  246. text-transform:uppercase;
  247. letter-spacing:3px;
  248. color:white;
  249. font-weight:bold;
  250. padding:5px 15px;
  251. }
  252.  
  253. .quote {font-family:cambria;
  254. font-size:12px;
  255. font-style:italic;
  256. margin:25px;
  257. text-align:center;}
  258.  
  259. .source {font-size:8px;
  260. text-transform:uppercase;
  261. font-family:consolas;
  262. letter-spacing:1px;
  263. margin-top:10px;
  264. font-style:normal;
  265. }
  266.  
  267. .stats {width:120px;
  268. float:left;
  269. font-size:8px;
  270. display:block;
  271. text-transform:uppercase;
  272. letter-spacing:1px;
  273. background:#eee;
  274. }
  275.  
  276. .stats span {display:block;
  277. background:white;
  278. padding:1px 5px;
  279. text-align:right;
  280. margin-top:1px;}
  281.  
  282. .stats img {display:block;
  283. height:100px;
  284. width:100px;
  285. border:10px solid white;}
  286.  
  287. .about {padding:10px;
  288. background:white;
  289. display:block;
  290. margin-left:121px;
  291. }
  292.  
  293.  
  294. .close {float:right;
  295. text-align:right;
  296. cursor:pointer;
  297. }
  298.  
  299.  
  300. #message iframe {display:block;}
  301.  
  302. #links a, #links span {display:inline-block;
  303. background:white;
  304. padding:0 5px;
  305. margin-bottom:1px;
  306. text-transform:uppercase;
  307. letter-spacing:1px;}
  308.  
  309. #links span {background:black;
  310. font-family:cambria;
  311. margin:5px 0;
  312. padding:5px 10px;
  313. color:white;
  314. width:360px;
  315. }
  316. #links a {font-size:8px;
  317. width:176px;
  318. }
  319. #links a:hover {
  320. background:black;
  321. }
  322. .same {width:400px;
  323. padding-top:10px;}
  324. .same img {width:45px!important;
  325. height:45px!important;
  326. padding:0;
  327. -webkit-backface-visibility: hidden;
  328. }
  329.  
  330. .same a {display:inline-block;
  331. float:left;
  332. margin:0px 10px 10px 0!important;
  333. padding:0;
  334. width:45px;
  335. height:45px;
  336. -webkit-filter: grayscale(1);
  337. -moz-filter: grayscale(1);
  338. -ms-filter: grayscale(1);
  339. -o-filter: grayscale(1);
  340. filter: grayscale(1);
  341. }
  342.  
  343. .same a:hover {
  344. -webkit-filter: grayscale(0);
  345. -moz-filter: grayscale(0);
  346. -ms-filter: grayscale(0);
  347. -o-filter: grayscale(0);
  348. filter: grayscale(0);
  349. transform:scale(1.2);
  350. -webkit-transform:scale(1.2);
  351. -moz-transform:scale(1.2);
  352. -ms-transform:scale(1.2);
  353. -o-transform:scale(1.2);
  354. }
  355.  
  356.  
  357.  
  358. </style>
  359.  
  360.  
  361.  
  362. </head>
  363.  
  364. <body>
  365.  
  366. <div id="con">
  367.  
  368. <div id="about" class="panel">
  369. <!--about section-->
  370. <div id="title">About<div class="close">Close</div></div>
  371. <div class="quote">
  372. <!--quote here! :3 -->
  373. “Loneliness becomes an acid that eats away at you.”
  374. <div class="source">Haruki Murakami</div>
  375. </div>
  376. <div class="stats">
  377. <!--about image -->
  378. <img src="http://static.tumblr.com/sas2ex2/NiMne0wcn/screen_shot_2014-10-22_at_10.23.22_am.png">
  379. <!--stats here :) -->
  380. <span>Jane Doe</span>
  381. <span>Eighteen</span>
  382. <span>Atlantis</span>
  383. </div>
  384. <div class="about"><!--about ! write stuff here-->
  385. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Art by <a href="http://soltreis.tumblr.com/" target="_blank">Soltreis</a>
  386. </div>
  387. </div>
  388.  
  389.  
  390.  
  391.  
  392.  
  393. <div id="links" class="panel">
  394. <!--links section-->
  395. <div id="title">Links<div class="close">Close</div></div>
  396.  
  397. <span>Tags</span>
  398. <a href="/tagged/">Photography</a>
  399. <a href="/tagged/">Adventure</a>
  400. <a href="/tagged/">Winter</a>
  401. <a href="/tagged/">Buttons</a>
  402. <a href="/tagged/">Taxidermy</a>
  403. <a href="/tagged/">Mystery</a>
  404.  
  405. <span>Links</span>
  406. <a href="/tagged/">Photography</a>
  407. <a href="/tagged/">Adventure</a>
  408. <a href="/tagged/">Winter</a>
  409. <a href="/tagged/">Buttons</a>
  410. <a href="/tagged/">Taxidermy</a>
  411. <a href="/tagged/">Mystery</a>
  412. <a href="/tagged/">Sounds</a>
  413. <a href="/tagged/">Travel</a>
  414. <a href="/tagged/">Strange Shoes</a>
  415.  
  416. <span>Other</span>
  417. <a href="/tagged/">Photography</a>
  418. <a href="/tagged/">Adventure</a>
  419. <a href="/tagged/">Winter</a>
  420. <a href="/tagged/">Buttons</a>
  421. <a href="/tagged/">Taxidermy</a>
  422. <a href="/tagged/">Mystery</a>
  423. <a href="/tagged/">Sounds</a>
  424. <a href="/tagged/">Travel</a>
  425. <a href="/tagged/">Strange Shoes</a>
  426.  
  427. <span>Other</span>
  428. <a href="/tagged/">Photography</a>
  429. <a href="/tagged/">Adventure</a>
  430. <a href="/tagged/">Winter</a>
  431. <a href="/tagged/">Buttons</a>
  432. <a href="/tagged/">Taxidermy</a>
  433. <a href="/tagged/">Mystery</a>
  434. <a href="/tagged/">Sounds</a>
  435. <a href="/tagged/">Travel</a>
  436. <a href="/tagged/">Strange Shoes</a>
  437.  
  438.  
  439. </div>
  440.  
  441.  
  442.  
  443.  
  444.  
  445.  
  446. <div id="message" class="panel">
  447. <!--message section-->
  448. <div id="title">Message<div class="close">Close</div></div>
  449. <!--message text-->
  450. <p>Please be courteous with your inquiries. Things I'll answer:
  451. <ul>
  452. <li>Questions about the weather</li>
  453. <li>Questions about the time of day</li>
  454. </ul>
  455. </p>
  456. <!--PUT YOUR URL HERE I BEG YOU-->
  457. <p><iframe frameborder="0" height="260" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/URL.tumblr.com" width="100%"> </iframe></p>
  458. </div>
  459.  
  460.  
  461.  
  462.  
  463.  
  464. <div id="roll" class="panel">
  465. <!--blogroll section-->
  466. <div id="title">Blogroll<div class="close">Close</div></div>
  467. <div class="same">
  468. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-128}"></a>{/block:Followed}{/block:Following}
  469. </div>
  470. </div>
  471.  
  472.  
  473.  
  474.  
  475. <!-- squares -->
  476.  
  477.  
  478. <div class="block" style="margin-right:5px;margin-bottom:5px">
  479. <div id="one" class="h">
  480. <span>About</span>
  481. </div>
  482. <!--image one -->
  483. <img src="http://static.tumblr.com/sas2ex2/9oJndynnp/screen_shot_2014-10-09_at_11.37.47_pm.png">
  484. </div>
  485.  
  486. <div class="block" style="margin-left:5px;margin-bottom:5px">
  487. <div id="two" class="h">
  488. <span>Links</span>
  489. </div>
  490. </div>
  491.  
  492. <div class="block" style="margin-right:5px;margin-top:5px">
  493. <div id="three" class="h">
  494. <span>Message</span>
  495. </div>
  496. </div>
  497.  
  498. <div class="block" style="margin-left:5px;margin-top:5px">
  499. <div id="four" class="h">
  500. <span>Blogroll</span>
  501. </div>
  502. <!--image two -->
  503. <img src="http://static.tumblr.com/sas2ex2/Twendynny/screen_shot_2014-10-08_at_8.56.22_am.png"></div>
  504.  
  505.  
  506. <div class="links">
  507. <a href="/">Home.</a>
  508. <a href="/archive">History.</a>
  509. <a href="http://farahmir.tumblr.com" target="_blank" title="septim">Theme.</a>
  510. </div>
  511.  
  512. </div>
  513.  
  514.  
  515.  
  516.  
  517.  
  518.  
  519.  
  520. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement