API tools faq
paste
Advertisement
harreyeh

all-in-one 1b

harreyeh
Feb 27th, 2014
217
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.89 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2. <title>{title}</title>
  3. <!--- change the title of the page here --->
  4.  
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <!---
  7.  
  8. ᴀʙᴏᴜᴛ ᴘᴀɢᴇ ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
  9. please don't take off the credit it's really small!!!!
  10.  
  11.  
  12. ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
  13. ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
  14. ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
  15. ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
  16. ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
  17. ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
  18. ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
  19. ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
  20. ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
  21. ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
  22. ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
  23. ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯
  24.  
  25.  
  26. hardziam.tumblr.com // themesbyzsu.tumblr.com
  27.  
  28.  
  29.  
  30.  
  31.  
  32. --->
  33.  
  34. <script>
  35. var current_obj='';
  36.  
  37. function showLinks(objID) {
  38. var obj=document.getElementById(objID);
  39. if (current_obj.style) {
  40. current_obj.style.display='none';
  41. }
  42. obj.style.display='block';
  43. current_obj=obj;
  44. }
  45. </script>
  46. <script src="//use.edgefonts.net/karla.js"></script>
  47. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  48.  
  49.  
  50. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  51. <script>
  52. $(document).ready(function(){
  53. $(".question").click(function(){
  54. $(".answer").slideToggle("fast");
  55. });
  56. });
  57. </script>
  58.  
  59. <style>
  60. div#qTip {
  61. padding: 4px;
  62. display:none;
  63. min-width:50px;
  64. text-align: justify;
  65. position: absolute;
  66. font-size:10px;
  67. line-height:9px;
  68. font-family:helvetica;
  69. z-index: 1000;
  70. background-color:#fff;
  71. color: black;
  72. letter-spacing: 1px;
  73. }
  74. </style>
  75. <style type="text/css">
  76.  
  77. ::-webkit-scrollbar {background-color:black; border:2px solid #fff;height:5px; width:5px;}
  78. ::-webkit-scrollbar-thumb:vertical {background-color:black; border:1px solid #fff; height:40px;}
  79. ::-webkit-scrollbar-thumb:horizontal {background-color:black;border:1px solid #fff; height:8px!important}
  80.  
  81.  
  82.  
  83. body {
  84. background: #fff; /*here you can put in a background */
  85. margin:auto;
  86. padding: 0;
  87. position:absolute;
  88. }
  89.  
  90. a {
  91. text-decoration:none;
  92. outline:none;
  93. color:gray; /*change link colors here */
  94. -webkit-transition: all 0.5s ease-in-out;
  95. -moz-transition: all 0.5s ease-in-out;
  96. -o-transition: all 0.5s ease-in-out;
  97. }
  98.  
  99. a:hover {
  100. color:#eee; /*change link hover color */
  101. -webkit-transition: all 0.5s ease-in-out;
  102. -moz-transition: all 0.5s ease-in-out;
  103. -o-transition: all 0.5s ease-in-out;
  104. }
  105.  
  106. #maincontainer {
  107. margin-top:40px;
  108. padding:80px;
  109. padding-left:20px;
  110. padding-right:20px;
  111. padding-bottom:50px;
  112. width:600px;
  113. margin-left:20%;
  114. height:400px;
  115. }
  116.  
  117. #top {
  118. background:white;
  119. position:fixed;
  120. margin-top:-160px;
  121. padding-top:120px;
  122. width:600px;
  123. height:100px;
  124. }
  125.  
  126. #stuff{
  127. margin-top:100px;
  128.  
  129. }
  130.  
  131. .title {
  132. font-family: helvetica;
  133. text-transform:lowercase;
  134. font-weight: bold;
  135. width:420px;
  136. opacity:1;
  137. font-size:100px;
  138. text-align:left;
  139. float:left;
  140. letter-spacing:-5px;
  141. color:white;
  142. -webkit-text-fill-color: transparent;
  143. background: -webkit-linear-gradient(transparent, transparent), top url(http://25.media.tumblr.com/f238231da85ab1c06d254778cb44181b/tumblr_myuky959FK1qf2um7o1_500.png);/*here you can change the pattern in the text */
  144. background: -o-linear-gradient(transparent, transparent);
  145. -webkit-background-clip: text;
  146. -webkit-background-clip: text;
  147.  
  148. }
  149.  
  150.  
  151. .toplinks {
  152. margin-top:40px;
  153. }
  154.  
  155. .toplinks a{
  156. height:40px;
  157. display:inline-block;
  158. }
  159.  
  160. .toplinks a:hover{
  161. box-shadow:0px 50px #99ddee inset;
  162. }
  163.  
  164. .toplinks img{
  165. width:30px;
  166. padding:5px;
  167. -webkit-filter: invert(40%);
  168. -webkit-transition: all 0.5s ease-in-out;
  169. -moz-transition: all 0.5s ease-in-out;
  170. -o-transition: all 0.5s ease-in-out;
  171. }
  172.  
  173. .toplinks img:hover{
  174. -webkit-filter: invert(100%);
  175. -webkit-transition: all 0.5s ease-in-out;
  176. -moz-transition: all 0.5s ease-in-out;
  177. -o-transition: all 0.5s ease-in-out;
  178. }
  179.  
  180. #categories {
  181. font-family:helvetica;
  182. letter-spacing:1px;
  183. font-size:10px;
  184. padding-left:30px;
  185. }
  186.  
  187. #categories a{
  188. cursor:help;
  189. }
  190.  
  191. #link1, #link2, #link3 {
  192. width:600px;
  193. margin-left:0px;
  194. margin-top:20px;
  195. font-family:helvetica;
  196. font-size:9px;
  197. letter-spacing:1px;
  198. text-align:center;
  199. line-height:150%;
  200. }
  201. .showhide_element {
  202. display:none;
  203. }
  204.  
  205. .links {
  206. width:100%;
  207. }
  208. .links a{
  209. padding:5px;
  210. padding-top:7px;
  211. padding-bottom:7px;
  212. margin-bottom:10px;
  213. font-size:12px;
  214. display:inline-block;
  215. font-family:'karla' sans-serif;
  216. font-weight:light;
  217. overflow:hidden;
  218. color:#737373;
  219. text-transform:uppercase;
  220. text-align:center;
  221. vertical-align:text-top;
  222. width:187px;
  223. -webkit-transition: all 0s ease-in-out;
  224. -moz-transition: all 0s ease-in-out;
  225. -o-transition: all 0s ease-in-out;
  226. }
  227.  
  228. .links a:hover{
  229. color:black;
  230. background:#ddeeee;
  231. -webkit-transition: all 0s ease-in-out;
  232. -moz-transition: all 0s ease-in-out;
  233. -o-transition: all 0s ease-in-out;
  234. }
  235.  
  236. .divider {
  237. width:100%;
  238. padding-top:10px;
  239. padding-bottom:10px;
  240. font-size:20px;
  241. font-family:helvetica;
  242. color:#6699B3;
  243. letter-spacing:-1px;
  244. text-align:center;
  245. margin-bottom:10px;
  246. background:#CEE8F5;
  247. }
  248.  
  249. .divider:first-letter{
  250. color:#4D7E96;
  251. font-style:italic;
  252. }
  253.  
  254.  
  255. /*----- FAQ -----*/
  256.  
  257.  
  258. .question {
  259. width:95%;
  260. padding-top:6px;
  261. padding-bottom:6px;
  262. padding-left:5%;
  263. cursor:help;
  264. font-size:17px;
  265. font-family:helvetica;
  266. color:#6699B3;
  267. letter-spacing:-1px;
  268. text-align:left;
  269. margin-bottom:10px;
  270. background:#CEE8F5;
  271. }
  272.  
  273. .answer{
  274. padding-left:20px;
  275. text-align:left;
  276. padding-bottom:10px;
  277. font-style:italic;
  278. font-size:10px;
  279. letter-spacing:0px;
  280. display:none;
  281. }
  282.  
  283.  
  284.  
  285.  
  286.  
  287. #credit {
  288. position:fixed;
  289. right:0px;
  290. bottom:0px;
  291. padding:4px;
  292. width:15px;
  293. text-transform:none;
  294. font-family: helvetica;
  295. font-weight:none;
  296. letter-spacing:1px;
  297. margin-bottom:3px;
  298. font-size:9px;
  299. margin-right:3px;
  300. border:1px solid;
  301. opacity:0.7;
  302. border-color:#bbb;
  303. background: #fff;
  304. -moz-transition-duration:1s;
  305. -webkit-transition-duration:1s;
  306. -o-transition-duration:1s;
  307. }
  308.  
  309. #credit:hover {
  310. opacity:1;
  311. width:15px;
  312. background:black;
  313. -moz-transition-duration:0.5s;
  314. -webkit-transition-duration:0.5s;
  315. -o-transition-duration:0.5s;
  316. }
  317.  
  318.  
  319. </style>
  320.  
  321.  
  322. </head>
  323.  
  324. <body>
  325. <div id="credit"><a href="http://hardziam.tumblr.com">HZ</a></div>
  326.  
  327. <div id="mainContainer">
  328. <div id="top">
  329. <div class="title">navigate.</div>
  330. <div class="toplinks">
  331. <a href="/" title="go back"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/home-128.png"></a>
  332. <a href="/askk" title="ask/faq"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/message-128.png"></a>
  333. <a href="/archive" title="archive"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/copy-128.png"></a>
  334. <a href="http://themesbyzsu.tumblr.com" title="theme blog"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_female3-128.png"></a>
  335. </div>
  336. <div id="categories">
  337. jump to:
  338. <a href="#" onClick="showLinks('link1');return false;">links</a>,
  339. <a href="#" onClick="showLinks('link2');return false;">tags</a>,
  340. <a href="#" onClick="showLinks('link3');return false;">social</a>,
  341. <a href="#" onClick="showLinks('link4');return false;">ask</a>.
  342. </div>
  343. </div>
  344. <div id="stuff">
  345. <div id="link1" class="showhide_element">
  346. <div class="links">
  347.  
  348. <a href="/info">about me</a>
  349. <a href="/tagged/me">my face</a>
  350. <a href="/ficrecs">fic recs</a>
  351. <a href="/tagged/cutie">friends</a>
  352. <a href="/broll">blogroll</a>
  353. <a href="/readers">fanfic readers</a>
  354. <a href="/tagged/*">creations</a>
  355. <a href="http://themesbyzsu.tumblr.com/tagged/my+theme">themes</a>
  356. <a href="http://themesbyzsu.tumblr.com/tagged/page+theme">pages</a>
  357. </div>
  358. </div>
  359.  
  360. <div id="link2" class="showhide_element">
  361. <div class="links">
  362.  
  363. <div class="divider">one direction</div>
  364. <a href="/tagged/louis">louis tomlinson</a>
  365. <a href="/tagged/harry">harry styles</a>
  366. <a href="/tagged/zayn">zayn malik</a>
  367. <a href="/tagged/niall">niall horan</a>
  368. <a href="/tagged/liam">liam payne</a>
  369. <a href="/tagged/all">all</a>
  370.  
  371. <div class="divider">ships</div>
  372. <a href="/tagged/ziam">ziam</a>
  373. <a href="/tagged/ziall">ziall</a>
  374. <a href="/tagged/larold">larry</a>
  375. <a href="/tagged/narry">narry</a>
  376. <a href="/tagged/lilo">lilo</a>
  377. <a href="/tagged/ot3">ot3</a>
  378.  
  379. <div class="divider">other</div>
  380. <a href="/tagged/tv">shows</a>
  381. <a href="/tagged/movies">movies</a>
  382. <a href="/tagged/music">bands</a>
  383. <a href="/tagged/jams">songs</a>
  384. <a href="/tagged/playlist">playlists</a>
  385. <a href="/tagged/pretty+pictures">pretty things</a>
  386. <a href="/tagged/fics">fic rec tag</a>
  387. <a href="/tagged/2+read">to read</a>
  388. <a href="/tagged/gifset">gifs (for sidebars)</a>
  389. </div>
  390. </div>
  391.  
  392. <div id="link3" class="showhide_element">
  393. <div class="links">
  394. <div class="divider">other sites</div>
  395. <a href="http://instagram.com/zsuzsiem">instagram</a>
  396. <a href="http://8tracks.com/zsumur">8tracks</a>
  397. <a href="http://twitter.com/zsumur">twitter</a>
  398.  
  399. <div class="divider">networks</div>
  400. <a href="http://teamziampg.tumblr.com/">teamziam</a>
  401. <a href="http://theswagulars.tumblr.com">swagulars</a>
  402. <a href="http://theradicalsnetwerk.tumblr.com/">radicals</a>
  403. <a href="http://theziamsquad.tumblr.com">ziamsquad</a>
  404. <a href="http://www.theme-gods.us/">theme gods</a>
  405. <a href="http://whydoesbalognaponyrhyme.tumblr.com/">gaining group</a>
  406.  
  407. </div>
  408. </div>
  409.  
  410. <div id="link4" class="showhide_element">
  411.  
  412. <div class="question">do you follow back?</div>
  413. <div class="answer">no, but if you ask me to check out your blog i'd be happy to.</div>
  414.  
  415. <div class="question">can you check out my blog?</div>
  416. <div class="answer">sure! just ask.</div>
  417.  
  418. <div class="question">where are the links for.....?</div>
  419. <div class="answer">just check the tags section of this page!</div>
  420.  
  421. <div class="question">where are you from?</div>
  422. <div class="answer">new zealand.</div>
  423.  
  424. <iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/hardziam.tumblr.com" width="100%">
  425.  
  426. </div>
  427. </div>
  428. </div>
  429. </div>
  430. </body>
  431. </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!