API tools faq
paste
Advertisement
harreyeh

all-in-one 1a

harreyeh
Feb 26th, 2014
133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.21 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. ᴀʟʟ-ɪɴ-ᴏɴᴇ ᴘᴀɢᴇ ᴛʜᴇᴍᴇ 1A ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
  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. <sript src="http://static.tumblr.com/ssqfxic/Nvgn1ltn0/style.css"></sript>
  47. <script src="//use.edgefonts.net/karla.js"></script>
  48. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  49.  
  50.  
  51. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  52. <script>
  53. $(document).ready(function(){
  54. $(".question").click(function(){
  55. $(".answer").slideToggle("fast");
  56. });
  57. });
  58. </script>
  59.  
  60. <script>
  61. $(document).ready(function(){
  62. $(".more").click(function(){
  63. $(".writing").slideToggle("slow");
  64. });
  65. });
  66. </script>
  67.  
  68. <style>
  69. div#qTip {
  70. padding: 4px;
  71. display:none;
  72. min-width:50px;
  73. text-align: justify;
  74. position: absolute;
  75. font-size:10px;
  76. line-height:9px;
  77. font-family:helvetica;
  78. z-index: 1000;
  79. background-color:#fff;
  80. color: black;
  81. letter-spacing: 1px;
  82. }
  83. </style>
  84. <style type="text/css">
  85.  
  86.  
  87. /*---
  88.  
  89. STYLINGGGGGGG!!!!
  90.  
  91. use colorpicker.com to find the html codes for colors
  92.  
  93. ---*/
  94.  
  95. .title {
  96. -webkit-text-fill-color: transparent;
  97. background: -webkit-linear-gradient(transparent, transparent), top url(http://25.media.tumblr.com/f238231da85ab1c06d254778cb44181b/tumblr_myuky959FK1qf2um7o1_500.png);/*here you can change the pattern/image in the text */
  98. background: -o-linear-gradient(transparent, transparent);
  99. -webkit-background-clip: text;
  100. -webkit-background-clip: text;
  101. }
  102.  
  103. .toplinks a:hover{
  104. box-shadow:0px 50px #99ddee inset;
  105. /*--- color when you hover over the icons */
  106. }
  107.  
  108. .toplinks a span{
  109. color: #719DAB;
  110. /*---- color of the text in the hover box -----*/
  111. }
  112.  
  113. #title {
  114. color:#ddd;
  115. /*--- page title color ---*/
  116. }
  117.  
  118.  
  119. /*-------- tags list colors -------*/
  120. .tags a{
  121. color:#737373;
  122. }
  123.  
  124. .tags a:hover{
  125. color:black;
  126. background:#ddeeee;
  127. }
  128.  
  129. .divider {
  130. color:white;
  131. background:lightblue;
  132. /* ---make this the same color as the one below!!! --*/
  133. }
  134.  
  135. #line {
  136. border-bottom:2px solid lightblue;
  137. }
  138.  
  139.  
  140. /*---- about section -----*/
  141.  
  142. #about img{
  143. border:10px solid lightblue;
  144. background:#ddeeee;
  145. }
  146.  
  147. .info {
  148. background:#eee;
  149. border-left:10px solid lightblue;
  150. }
  151.  
  152. .info:hover{
  153. box-shadow:600px 0px lightblue inset;}
  154.  
  155. .more {
  156. background:lightblue;}
  157.  
  158.  
  159.  
  160. /*--------- dont edit much below this unless you're confident ----*/
  161.  
  162. ::-webkit-scrollbar {background-color:#fff; border:2px solid #fff;height:5px; width:5px;}
  163. ::-webkit-scrollbar-thumb:vertical {background-color:black; height:40px;}
  164. ::-webkit-scrollbar-thumb:horizontal {background-color:black; height:8px!important}
  165.  
  166. body {
  167. background-image:url(http://i.imgur.com/1LqHc9n.png);
  168. margin:auto;
  169. padding: 0;
  170. position:absolute;
  171. }
  172.  
  173. a {
  174. text-decoration:none;
  175. outline:none;
  176. color:gray; /*change link colors here */
  177. -webkit-transition: all 0.5s ease-in-out;
  178. -moz-transition: all 0.5s ease-in-out;
  179. -o-transition: all 0.5s ease-in-out;
  180. }
  181.  
  182. a:hover {
  183. color:#eee; /*change link hover color */
  184. -webkit-transition: all 0.5s ease-in-out;
  185. -moz-transition: all 0.5s ease-in-out;
  186. -o-transition: all 0.5s ease-in-out;
  187. }
  188.  
  189. #maincontainer {
  190. margin-top:40px;
  191. padding:80px;
  192. padding-left:20px;
  193. padding-right:20px;
  194. padding-bottom:50px;
  195. width:600px;
  196. margin-left:200px;
  197. height:400px;
  198. }
  199.  
  200. #top {
  201. position:fixed;
  202. margin-top:-160px;
  203. padding-top:120px;
  204. padding-bottom:20px;
  205. margin-bottom:-150px;
  206. background:white;
  207. width:600px;
  208. height:100px;
  209. }
  210.  
  211.  
  212. #stuff{
  213. margin-top:100px;
  214. }
  215.  
  216. .title {
  217. font-family: helvetica;
  218. text-transform:lowercase;
  219. font-weight: bold;
  220. width:420px;
  221. opacity:1;
  222. font-size:100px;
  223. text-align:left;
  224. float:left;
  225. letter-spacing:-5px;
  226. color:white;
  227. }
  228.  
  229.  
  230. .toplinks {
  231. margin-top:40px;
  232. }
  233.  
  234. .toplinks a{
  235. height:40px;
  236. display:inline-block;
  237. }
  238.  
  239. .toplinks a span{
  240. height: auto;
  241. width:70px;
  242. line-height: 20px;
  243. padding: 10px;
  244. left: 50%;
  245. margin-left: 50px;
  246. font-family: 'Alegreya SC', Georgia, serif;
  247. font-weight: 400;
  248. font-style: italic;
  249. font-size: 14px;
  250. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  251. text-align: center;
  252. position: absolute;
  253. pointer-events: none;
  254. background:white;
  255. bottom: 100px;
  256. opacity: 0;
  257. box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  258. transition: all 0.3s ease-in-out;
  259. }
  260.  
  261. .toplinks a span:before,
  262. .toplinks a span:after{
  263. content: '';
  264. position: absolute;
  265. bottom: -10px;
  266. left: 50%;
  267. margin-left: -9px;
  268. width: 0;
  269. height: 0;
  270. border-left: 10px solid transparent;
  271. border-right: 10px solid transparent;
  272. border-top: 10px solid rgba(0,0,0,0.1);
  273. }
  274.  
  275. .toplinks a span:after{
  276. bottom: -10px;
  277. margin-left: -10px;
  278. border-top: 10px solid #fff;
  279. }
  280.  
  281. .toplinks a:hover span{
  282. opacity: 0.9;
  283. bottom: 90px;
  284. }
  285.  
  286. .toplinks img{
  287. width:30px;
  288. padding:5px;
  289. -webkit-filter: invert(40%);
  290. -webkit-transition: all 0.5s ease-in-out;
  291. -moz-transition: all 0.5s ease-in-out;
  292. -o-transition: all 0.5s ease-in-out;
  293. }
  294.  
  295. .toplinks img:hover{
  296. -webkit-filter: invert(100%);
  297. -webkit-transition: all 0.5s ease-in-out;
  298. -moz-transition: all 0.5s ease-in-out;
  299. -o-transition: all 0.5s ease-in-out;
  300. }
  301.  
  302. #categories {
  303. font-family:helvetica;
  304. letter-spacing:1px;
  305. font-size:10px;
  306. padding-left:30px;
  307. }
  308.  
  309. #categories a{
  310. cursor:help;
  311. }
  312.  
  313. #link1, #link2, #link3, #link4, #link5{
  314. width:600px;
  315. margin-left:0px;
  316. margin-top:20px;
  317. font-family:helvetica;
  318. font-size:9px;
  319. letter-spacing:1px;
  320. text-align:center;
  321. line-height:150%;
  322. }
  323. .showhide_element {
  324. display:none;
  325. }
  326. #title {
  327. font-family:'helvetica neue';
  328. text-transform:uppercase;
  329. font-weight:lighter;
  330. letter-spacing:5px;
  331. font-size:25px;
  332. padding-left:0px;
  333. font-style:italic;
  334. text-align:left;
  335. margin-bottom:10px;
  336. margin-top:-15px;
  337.  
  338. }
  339. /*---- TAGS LIST ---*/
  340.  
  341. .tags {
  342. width:100%;
  343. }
  344. .tags a{
  345. padding:5px;
  346. padding-top:7px;
  347. padding-bottom:7px;
  348. margin-bottom:10px;
  349. font-size:12px;
  350. display:inline-block;
  351. font-family:'karla' sans-serif;
  352. font-weight:light;
  353. overflow:hidden;
  354. text-transform:uppercase;
  355. text-align:center;
  356. vertical-align:text-top;
  357. width:127px;
  358. -webkit-transition: all 0s ease-in-out;
  359. -moz-transition: all 0s ease-in-out;
  360. -o-transition: all 0s ease-in-out;
  361. }
  362.  
  363. .tags a:hover{
  364. color:black;
  365. background:#ddeeee;
  366. -webkit-transition: all 0s ease-in-out;
  367. -moz-transition: all 0s ease-in-out;
  368. -o-transition: all 0s ease-in-out;
  369. }
  370.  
  371. .divider {
  372. padding:5px;
  373. font-size:14px;
  374. font-family:'helvetica neue';
  375. font-weight:lighter;
  376. width:200px;
  377. letter-spacing:1px;
  378. text-align:left;
  379. border-top-right-radius:10px;
  380. padding-bottom:0px;
  381. display:block;
  382. text-transform:uppercase;
  383. }
  384.  
  385. #line{
  386. width:100%;
  387. margin-bottom:10px;
  388.  
  389. }
  390.  
  391. /* ------ ABOUT ------*/
  392.  
  393. #about {
  394. width:100%;
  395. text-align:left;
  396. font-family:arial;
  397. font-size:10px;
  398. padding:5px;
  399.  
  400. }
  401.  
  402. #about img{
  403. width:200px;
  404. float:right;
  405. border-radius:50%;
  406. padding:5px;
  407. }
  408.  
  409. .info {
  410. width:480px;
  411. font-size:10px;
  412. padding:3px;
  413. margin-bottom:5px;
  414. font-family:'karla';
  415. -webkit-transition: all 1s ease-in-out;
  416. -moz-transition: all 1s ease-in-out;
  417. -o-transition: all 1s ease-in-out;
  418. }
  419.  
  420. .info em{
  421. font-family:helvetica;
  422. font-style:normal;
  423. }
  424.  
  425. .info:hover{
  426. -webkit-transition: all 0s ease-in-out;
  427. -moz-transition: all 0s ease-in-out;
  428. -o-transition: all 0s ease-in-out;
  429.  
  430. }
  431.  
  432. .more{
  433. background:lightblue;
  434. padding:10px;
  435. cursor:help;
  436. }
  437.  
  438. .writing{
  439. display:none;
  440. }
  441.  
  442.  
  443. /*----- FAQ -----*/
  444.  
  445.  
  446. .question {
  447. width:95%;
  448. padding-top:2px;
  449. padding-bottom:2px;
  450. padding-left:5%;
  451. cursor:help;
  452. font-size:11px;
  453. font-family:'karla';
  454. text-transform:uppercase;
  455. color:#000;
  456. letter-spacing:0px;
  457. text-align:left;
  458. margin-bottom:5px;
  459. }
  460.  
  461. .answer{
  462. padding-left:20px;
  463. text-align:left;
  464. border-bottom:1px solid #ddd;
  465. padding-bottom:10px;
  466. padding-top:6px;
  467. font-family:helvetica;
  468. font-style:italic;
  469. font-size:10px;
  470. letter-spacing:0px;
  471. margin-bottom:10px;
  472. display:none;
  473. }
  474.  
  475. /*---- BLOGROLL ----*/
  476.  
  477. #follower a{
  478. color:#000;}
  479.  
  480. #follower em{
  481. color:#eee;}
  482.  
  483. #follower a{
  484. text-decoration: none;
  485. font-size:10px;
  486. font-family:'karla';
  487. display:block;
  488. letter-spacing:1px;
  489. text-transform:uppercase;
  490. font-style:italic;
  491. text-align:center;
  492. width:175px;
  493. padding:6px;
  494. margin-left:10px;
  495. float:left;
  496. margin-bottom:3px;
  497. -webkit-transition:opacity 0.8s linear;
  498. -webkit-transition:all 0.3s ease-out;
  499. -moz-transition:all 0.3s ease-out;
  500. transition:all 0.3s ease-out;
  501. }
  502.  
  503. #follower:hover{
  504. -webkit-transition:opacity 0.8s linear;
  505. -webkit-transition:all 0.3s ease-out;
  506. -moz-transition:all 0.3s ease-out;
  507. transition:all 0.3s ease-out;
  508. }
  509.  
  510. #follower:hover a{
  511. color:#eee;
  512. }
  513.  
  514. #follower em{
  515. font-size:8px;
  516. font-family:helvetica;
  517. text-transform:uppercase;
  518. }
  519.  
  520. #follower{
  521. height:48px;
  522. width:190px;
  523. float:left;
  524. overflow:hidden;
  525. }
  526.  
  527.  
  528.  
  529. #credit {
  530. position:fixed;
  531. right:0px;
  532. bottom:0px;
  533. padding:4px;
  534. width:15px;
  535. text-transform:none;
  536. font-family: helvetica;
  537. font-weight:none;
  538. letter-spacing:1px;
  539. margin-bottom:3px;
  540. font-size:9px;
  541. margin-right:3px;
  542. border:1px solid;
  543. opacity:0.7;
  544. border-color:#bbb;
  545. background: #fff;
  546. -moz-transition-duration:1s;
  547. -webkit-transition-duration:1s;
  548. -o-transition-duration:1s;
  549. }
  550.  
  551. #credit:hover {
  552. opacity:1;
  553. width:15px;
  554. background:black;
  555. -moz-transition-duration:0.5s;
  556. -webkit-transition-duration:0.5s;
  557. -o-transition-duration:0.5s;
  558. }
  559.  
  560.  
  561. </style>
  562.  
  563.  
  564. </head>
  565.  
  566. <!----- DONT TOUCH THIS!!!! ------->
  567.  
  568.  
  569. <div id="credit">
  570. <a href="http://hardziam.tumblr.com">HZ</a>
  571. </div>
  572.  
  573.  
  574. <!----- DONT TOUCH THIS!!!! ------->
  575.  
  576. <div id="mainContainer">
  577. <div id="top">
  578. <div class="title">navigate.</div>
  579.  
  580.  
  581. <div class="toplinks">
  582.  
  583. <a href="#" onClick="showLinks('link3');return false;" >
  584. <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_female3-128.png">
  585. <span>about</span></a>
  586.  
  587. <a href="#" onClick="showLinks('link1');return false;">
  588. <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/link-128.png">
  589. <span>links</span></a>
  590.  
  591. <a href="#" onClick="showLinks('link2');return false;" >
  592. <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/copy-128.png">
  593. <span>blogroll</span></a>
  594.  
  595. <a href="#" onClick="showLinks('link4');return false;" >
  596. <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/message-128.png">
  597. <span>ask/faq</span></a>
  598. </div>
  599.  
  600. <div id="categories">
  601. quick links:
  602. <a href="/">home</a>,
  603. <a href="/ask">ask</a>,
  604. <a href="/archive">archive</a>
  605. </div>
  606. </div>
  607.  
  608.  
  609.  
  610. <div id="stuff">
  611.  
  612.  
  613. <div id="link1" class="showhide_element">
  614.  
  615. <div id="title">tags</div>
  616. <div class="tags">
  617. <div class="divider">one direction</div>
  618. <div id="line"></div>
  619. <a href="/tagged/">TAG</a>
  620.  
  621. <!------ COPY AND PASTE THIS WHOLE THING TO MAKE A NEW SECTION
  622. <div class="divider">other</div>
  623. <div id="line"></div>
  624. <a href="/tagged/">TAG</a>
  625. ----->
  626. </div>
  627. </div>
  628.  
  629. <div id="link2" class="showhide_element">
  630. <div id="title">people i follow</div>
  631. <div id="followarea">
  632. {block:Following}
  633. {block:Followed}
  634. <div id="follower">
  635. <a href="{FollowedURL}">
  636. <img src="{FollowedPortraitURL-48}" align="left"><br>{FollowedName}<br><em>{FollowedTitle}</em>
  637. </a>
  638. </div>
  639. {/block:Followed}
  640. {/block:Following}
  641. </div>
  642. </div>
  643.  
  644. <div id="link3" class="showhide_element">
  645. <div id="title">profile</div>
  646. <div id="about">
  647. <img src="http://24.media.tumblr.com/1a1d27ee9843862d4f979099657af652/tumblr_mz8hkaE7e01s8jb3wo1_500.png">
  648. <div class="info">NAME: <em>Zsuzsanna</em></div>
  649. <div class="info">AGE: <em>Seventeen</em></div>
  650. <div class="info">LOCATION: <em>Dubai, UAE</em></div>
  651. <div class="info">LIKES: <em>Teen Wolf, Criminal Minds, crying.</em></div>
  652. <div class="info">DISLIKES: <em>doing anything that requires moving</em></div>
  653.  
  654. <div class="more">READ MORE</div>
  655.  
  656. <div class="writing">
  657. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  658.  
  659. </div>
  660. </div>
  661. </div>
  662.  
  663. <div id="link4" class="showhide_element">
  664. <div id="title">faq/ask</div>
  665.  
  666. <div class="question">1. do you follow back?</div>
  667. <div class="answer">no, but if you ask me to check out your blog i'd be happy to.</div>
  668.  
  669. <div class="question">2. can you check out my blog?</div>
  670. <div class="answer">sure! just ask.</div>
  671.  
  672. <div class="question">3. where are the links for.....?</div>
  673. <div class="answer">just check the tags section of this page!</div>
  674.  
  675. <div class="question">4. where are you from?</div>
  676. <div class="answer">new zealand.</div>
  677.  
  678. <iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/hardziam.tumblr.com" width="100%">
  679.  
  680. </div>
  681.  
  682. </div>
  683. </div>
  684. </div>
  685. </div>
  686. </body>
  687. </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!