API tools faq
paste
Advertisement
itriedokay

Winter

itriedokay
Aug 7th, 2014
646
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.20 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.  
  6. <!-----TERMS OF USE
  7.  
  8. 1. DO NOT use this as a base code. I learned javascript and jquery for this if you dare use this as a base code I will end you.
  9.  
  10. 2. DO NOT redistribute. Do you know how hard learning jquery is?? I mean probably not that hard but still this is my work so don't pass it off as yours.
  11.  
  12. 3. DO NOT remove the credit. I worked hard on this I think i deserve my name on it. You can move it somewhere else on the theme but REmove it and refer to the threat in term one.
  13.  
  14. --->
  15.  
  16.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  17.   <title>{title}</title>
  18.  
  19.   <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
  20.  
  21.  
  22. <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  23. <style type='text/css'>
  24.  
  25. ::-webkit-scrollbar-thumb:vertical {
  26.     background-color:#75D1FF; /*scroll bar vertical colour, change with hex codes */
  27.     height:30px; /*dont touch*/
  28.     }
  29.  
  30. ::-webkit-scrollbar-thumb:horizontal {
  31.     background-color:#75D1FF; /*scroll bar horizontal colour, change with hex codes */
  32.     height:7px!important; /*height of scroll bar, change if you want*/
  33.     }
  34.  
  35. ::-webkit-scrollbar {
  36.     background-color:#fff; /*background of scroll bar*/
  37.     height:5px;
  38.     width:7px; /*width of scroll bar, change if you feel like it */
  39.     }
  40.  
  41. ::selection {
  42.     background: #000; /*background of text when you highlight it*/
  43.     color: #fff; /*color of text when you highlight*/
  44. }
  45.  
  46.  
  47. #left { /*this is the section on the left*/
  48.     height:100%; /*don't touch this*/
  49.     width:50%; /*or this*/
  50.     background:#ffffff; /*background colour of the left section*/
  51.     position:absolute; /*don't do it*/
  52.     top:0; /*no*/
  53.     left:0;/*dont*/
  54.     overflow-x:hidden;/*do not*/
  55.     background-image:url(""); /*if you want the background of this section to be an image*/
  56.     background-repeat:repeat;/*if you want image to repeat, if you dont want to, put no-repeat*/
  57.     /*additional background options -->
  58.     background-size: cover/contain/NUMBERpx; (chose one)
  59.     background-attachment:fixed; (stops background from scrolling)
  60.     (remove whats in the brackets)
  61.     */
  62. }
  63.  
  64. #right { /*this is the section on the right */
  65.     left:50%; /*do not touch*/
  66.     width:50%; /*stop it*/
  67.     height:100%; /*dont*/
  68.     background:#b0ecff; /*background colour of this section*/
  69.     /*for more background options, see above*/
  70.     position:absolute; /*don't touch*/
  71.     top:0; /*no*/
  72.     overflow-x:hidden; /*nO*/
  73.    
  74. }
  75.  
  76. #aboutimg, #navimg {
  77.     height:200px; /*i strongly suggest you DONT touch this but i mean it only changes the size of the buttons you click*/
  78.     width:200px; /* same goes with this*/
  79.     background-image:url("http://static.tumblr.com/wm6ssjg/Z7dn9trz4/blue.jpg"); /*image of the about button*/
  80.     background-size:cover; /*you can change this or delete it if you want a repeating image, if not dont touch*/
  81.     position:absolute; /*dont touch*/
  82.     z-index:1; /*this too*/
  83.     top:50px; /*no*/
  84.     left:50%; /*nope*/
  85.     margin-left:-110px; /*if you change width, divide by 2, add 10, make it into a negative, if image not centered try another number */
  86.     float:left; /*dont*/
  87.     border-radius:200px; /*this makes it into a circle, if you dont want a circle delete this */
  88.     border:#b0ecff solid 10px; /*colour and size of the border of the about button*/
  89. }
  90.  
  91. #navimg {
  92.     background-image:url("http://static.tumblr.com/wm6ssjg/vmin9trtm/white.jpg"); /*image on the navigation button */
  93.     border:#fefefe solid 10px; /*colour and size of the border of the navigation button */
  94. }
  95.  
  96. /*font used for titles, you can change it just make sure you change all of the font-family codes too */
  97. @font-face {
  98.     font-family:"panic at the disco is really great";
  99.     src: url('http://static.tumblr.com/wm6ssjg/NgAn7j35g/moon_flower.ttf');
  100. }
  101. #abouttitle {
  102.     display:inline-block; /*no*/
  103.     opacity:1; /*dont*/
  104.     position:absolute; /*non*/
  105.     font-family:"panic at the disco is really great";  /*if you want to change the font, change this. also great band though*/
  106.     top:300px; /*nein*/
  107.     left:50%; /*nah*/
  108.     margin-left:-200px; /*nooo*/
  109.     width:400px; /*dont touch it*/
  110.     height:100px; /*no*/
  111.     text-align:center; /*no*/
  112.     z-index:2; /*no*/
  113. }
  114.  
  115. #abouttitle p {
  116.     font-size:100px; /*size of font*/
  117.     margin-top:0px; /*dont touch this*/
  118.     text-shadow:4px 4px 0px #000; /*colour of text shadow */
  119.     color:#b0ecff; /* colour of text*/
  120. }
  121.  
  122. #about { /*just dont touch any of this*/
  123.     display:none;
  124.     position:absolute;
  125.     width:auto;
  126.     left:50%;
  127.     margin-left:-300px;
  128.     top:320px;
  129.     height:auto;
  130.    
  131. }
  132.  
  133. #aboutpic img{ /*dont any of touch this either*/
  134.     width:150px;
  135.     height:150px;
  136.     display:inline-block;
  137.     float:left;
  138.     margin:0px 0px 0px 20px;
  139.     position:absolute;
  140. }
  141.  
  142. #aboutdetails {
  143.     position:absolute;
  144.     width:100px;
  145.     height:100px;
  146.     font-size:12px;
  147.     padding:10px;
  148.     background:rgba(255,255,255,.7); /* this is the only thing you should touch, this is the colour of your basic information that appears when you hover over the about to get colour codes go to colorpicker.com*/
  149.     margin:15px 35px;
  150.     opacity:0;
  151.     -webkit-transition: .2s linear opacity;
  152. }
  153.  
  154. #ab:hover #aboutdetails { /*dont touch any*/
  155.     opacity:1;
  156.     -webkit-transition: .2s linear opacity;
  157. }
  158.  
  159. #aboutdesc {
  160.     display:inline-block; /*dont touch*/
  161.     width:350px; /*dont touch*/
  162.     height:130px; /*dont touch*/
  163.     background:#fefefe; /*background of the about box*/
  164.     border:10px solid #fafafa; /*colour and size of the border*/
  165.     padding:0px 10px 0px 10px;/*dont touch*/
  166.     overflow:scroll;/*put hidden if you have a short about*/
  167.     font-size:12px; /*font size in the about*/
  168.     margin-left:170px; /*dont touch*/
  169. }
  170.  
  171. #askfaq {
  172.     margin: 20px 0px 20px 20px; /*dont touch this*/
  173. }
  174.  
  175. #faqbox {
  176.     margin-bottom:50px; /*dont touch*/
  177.     background:#fefefe; /*background of the faq box*/
  178. }
  179.  
  180. #faqtitle {
  181.     width:100%; /*dont touch*/
  182.     background:black; /*background of faq title */
  183.     color:white; /*title colour*/
  184.     font-size:50px;
  185.     text-align:center; /*dont touch*/
  186.     font-family:"panic at the disco is really great"; /*if you want to change the font, change this. no really p!atd is so good*/
  187.     margin-bottom:0px; /*dont touch*/
  188. }
  189.  
  190. #faq {
  191.     display:inline-block;
  192.     width:518px;
  193.     height:auto;
  194.     padding:10px;
  195.     font-size:15px;
  196.     margin-top:-50px;
  197.     /*dont touch any of the above*/
  198.     border:1px solid #DFDFDF; /*border of faq box*/
  199. }
  200.  
  201. #faq p {
  202.     margin-top:0px; /*no*/
  203. }
  204.  
  205. #faq a { /*links in the faq*/
  206.     padding:2px; /*no*/
  207.     text-shadow: 2px 1px 2px #008AE6; /*colour of text-shadow*/
  208.     text-decoration:none; /*google before you touch*/
  209.     color:black; /*link colour*/
  210.     display:inline; /*no*/
  211.     -webkit-transition:.2s linear text-shadow; /*i advice you to not but if you know what you're doing go ahead*/
  212.  
  213. }
  214.  
  215. #faq a:hover {
  216.     text-shadow: 2px 1px 0px #99D0F5; /*text shadow for the link, you dont need this */
  217.     -webkit-transition:.2s linear text-shadow; /*same thing*/
  218.  
  219. }
  220.  
  221. .question {
  222.     font-size:25px; /*font-size of the question*/
  223.     margin-bottom:10px; /*probably dont touch this*/
  224.     letter-spacing:-1px; /* space between letters */
  225.     text-shadow:1px 1px 0px black; /*text shadow for the question, again this is optional */
  226.     color:#94DBFF; /*colour of the question */
  227.     font-style:italic; /*this makes the question italicized, delete if you dont want it*/
  228. }
  229.  
  230. .answer {
  231.     border-left: 5px solid #94DBFF; /*colour of the border left*/
  232.     padding:5px 5px 5px 10px; /*probably dont touch it google if you do */
  233.     background:#F8FDFF; /*background of the anaswer, completely optional*/
  234. }
  235.  
  236. #asktitle {
  237.     width:100%; /*please dont*/
  238.     background:black; /*bckground of the ask box title*/
  239.     color:white; /*colour of the font*/
  240.     font-size:45px; /* font size of the ask box title*/
  241.     text-align:center; /*if you want the text to be on the left, replace with left if you want text on the right, replace with right*/
  242.     font-family:"panic at the disco is really great"; /*if you want to change the font, change this. bittersweet is a relly good song*/
  243. }
  244.  
  245. /*NAVIGATION */
  246.  
  247. #navititle {
  248.     display:inline-block;
  249.     opacity:1;
  250.     position:absolute;
  251.     font-family:"panic at the disco is really great"; /*if you want to change the font, change this. dallon tho. but srsly touch nothing else*/
  252.     top:300px;
  253.     left:50%;
  254.     margin-left:-200px;
  255.     width:400px;
  256.     height:100px;
  257.     text-align:center;
  258.     z-index:2;
  259. }
  260. #navititle p {
  261.     font-size:100px; /*font-size of nav title*/
  262.     margin-top:0px; /*dont*/
  263.     text-shadow:4px 4px 0px #fff; /*text shadow again optional*/
  264. }
  265. #navi { /*touch nOTHING*/
  266.     opacity:1;
  267.     position:relative;
  268.     width:1010px;
  269.     left:50%;
  270.     margin-left:-505px;
  271.     padding:10px;
  272.     top:320px;
  273.     height:auto;
  274.     display:none;
  275. }
  276.  
  277. #tagbox {
  278.     width:200px;
  279.     height:auto;
  280.     position:relative;
  281.     display:inline-block;
  282.     float:left;
  283.     margin:0px 25px 50px 25px;
  284.     /*touch nothing above this*/
  285.     background:#f0f0f0; /*background of the tag box*/
  286. }
  287.  
  288. #tagtitle {
  289.     padding:5px;
  290.     margin-bottom:0px;
  291.     font-size:20px;
  292.     /*do not touch the above*/
  293.     background:black; /*background of the title*/
  294.     color:white; /*font colour*/
  295.     font-style:italic; /*this makes it italic, delete if you dont want */
  296. }
  297.  
  298. #tags { /*no*/
  299.     width:180px;
  300.     height:auto;
  301.     padding:5px;
  302. }
  303.  
  304. #tags a{
  305.     margin-bottom:2px;
  306.     width:180px;
  307.     padding:5px;
  308.     display:inline-block;
  309.     -webkit-transition:.4s linear background;
  310.     /*touch none of the above*/
  311.     text-decoration:none; /*google before touch*/
  312.     color:black; /*font colour of the tags*/
  313.     background:white; /*background of the actual tags*/
  314. }
  315.  
  316. #tags a:hover {
  317.     background:#b1d7e5; /*background colour on hover*/
  318.     -webkit-transition:.4s linear background; /*no*/
  319. }
  320.  
  321. #blogrollcont { /*dont*/
  322.     display:inline-block;
  323.     position:relative;
  324.     width:1000px;
  325. }
  326.  
  327. #blogroll {
  328.     width:720px;
  329.     max-height:360px !important;
  330.     margin:0 auto;
  331.     padding:10px;
  332.     overflow-y:scroll;
  333.     /*touch none of the above*/
  334.     background:white; /*background of blog roll*/
  335. }
  336.  
  337. #blogroll ul { /*dont touch*/
  338.     list-style: none;
  339. }
  340.  
  341. #blogroll li { /*dont touch*/
  342.     float: left;
  343.     margin: 0px 5px 5px 5px;
  344. }
  345.  
  346. #blogrolltitle {
  347.     width:100%; /*no*/
  348.     background:black; /* background of the title */
  349.     color:white; /*font colour*/
  350.     font-size:50px; /*font-size*/
  351.     text-align:center; /*right =right, left=left */
  352.     font-family:"panic at the disco is really great"; /*if you change font change this, bredon urie has a voice of an angel*/
  353. }
  354.  
  355. #blogroll img {
  356.     -webkit-transition:.4s linear all;
  357.     border:5px solid #f0f0f0; /*change colour if you want*/
  358.     border-radius:0px;
  359. }
  360.  
  361. #blogroll img:hover {
  362.     -webkit-transition:.4s linear all;
  363.     border:5px solid #4fd5ff; /*change colour on hover if you want */
  364.     border-radius:48px; /*makes circle on hover, delete if you dont want */
  365. }
  366.  
  367. #returnbuttons { /*no*/
  368.     bottom:0px;
  369.     height:40px;
  370.     left:0px;
  371.     position:fixed;
  372.     width:100%;
  373.     text-align:center;
  374. }
  375.  
  376. #returnbuttons a { /*also no*/
  377.     display:inline-block;
  378.     width:15px;
  379.     height:15px;
  380.     border-radius:50px;
  381.     -webkit-transition: .2s linear background;
  382.     margin:3px;
  383. }
  384.  
  385. #returnbuttons a:hover {
  386.     -webkit-transition: .2s linear background;
  387. }
  388.  
  389. .dashlink {
  390.     border:5px solid #33D6FF; /*colour of dashboard link*/
  391. }
  392.  
  393. .dashlink:hover {
  394.     background:#33D6FF; /*colour of dashboard link*/
  395. }
  396.  
  397. .homelink {
  398.     border:5px solid #000; /*colour of home page link*/
  399. }
  400.  
  401. .homelink:hover {
  402.     background:#000; /*colour of home page link*/
  403. }
  404.  
  405. .themelink {
  406.     border:5px solid #fff; /*colour of theme credit link*/
  407. }
  408.  
  409. .themelink:hover {
  410.     background:#fff; /*colour of theme credit link*/
  411. }
  412.  
  413. #s-m-t-tooltip{ /*i suggest you dont touch*/
  414.   max-width:300px;
  415.   z-index:999999;
  416.   margin:-5px 0px 0px 10px;
  417.   padding:5px;
  418.   font-size:10px;
  419.   line-height:8px;
  420.   letter-spacing:1px;
  421.   word-wrap:break-word;
  422.   color: #fff;
  423.   background:#000;
  424.   font-family:arial;
  425. }
  426.  
  427. </style>
  428.  
  429. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  430. <script>
  431. (function($){
  432. $(document).ready(function(){
  433. $("[title]").style_my_tooltips();
  434. });
  435. })(jQuery);
  436. </script>
  437.  
  438. <!----DO NOT TOUCH THE JAV ---->
  439.  
  440. <script type='text/javascript'>//<![CDATA[
  441. $(window).load(function(){
  442. $('#aboutimg').toggle(function () {
  443.    $('#left').animate({
  444.        width: "100%"
  445.    });
  446. }, function () {
  447.    $('#left').animate({
  448.        width: "50%"
  449.    });
  450. });
  451.  
  452. $('#navimg').toggle(function () {
  453.    $('#left').animate({
  454.        width: "0%"
  455.    });
  456. }, function () {
  457.    $('#left').animate({
  458.        width: "50%"
  459.    });
  460. });
  461.  
  462. $('#aboutimg').toggle(function () {
  463.    $('#right').animate({
  464.        width: "00%",
  465.        left: "100%"
  466.    });
  467. }, function () {
  468.    $('#right').animate({
  469.        width: "50%",
  470.        left: "50%"
  471.    });
  472.  
  473. });
  474.  
  475. $('#aboutimg').toggle(function () {
  476.    $('#aboutimg').animate({
  477.        top: "10px"
  478.    });
  479. }, function () {
  480.    $('#aboutimg').animate({
  481.        top: "50px"
  482.    });
  483. });
  484.  
  485. $('#aboutimg').toggle(function () {
  486.    $('#abouttitle').animate({
  487.        top: "200px"
  488.    });
  489. }, function () {
  490.    $('#abouttitle').animate({
  491.        top: "300px"
  492.    });
  493. });
  494.  
  495. $('#navimg').toggle(function () {
  496.    $('#right').animate({
  497.        width: "100%",
  498.        left: "0%"
  499.    });
  500. }, function () {
  501.    $('#right').animate({
  502.        width: "50%",
  503.        left: "50%"
  504.    });
  505.  
  506. });
  507.  
  508. $('#navimg').toggle(function () {
  509.    $('#navimg').animate({
  510.        top: "10px"
  511.    });
  512. }, function () {
  513.    $('#navimg').animate({
  514.        top: "50px"
  515.    });
  516. });
  517.  
  518. $('#navimg').toggle(function () {
  519.    $('#navititle').animate({
  520.        top: "200px"
  521.    });
  522. }, function () {
  523.    $('#navititle').animate({
  524.        top: "300px"
  525.    });
  526. });
  527.  
  528. $('#navimg').click( function() {
  529.    $('#navi').fadeToggle();
  530.   });
  531.  
  532. $('#aboutimg').click( function() {
  533.    $('#about').fadeToggle();
  534.   });
  535.  
  536. $('#aboutimg').click( function() {
  537.    $('#returnbuttons').fadeToggle();
  538.   });
  539.  
  540. $('#navimg').click( function() {
  541.    $('#returnbuttons').fadeToggle();
  542.   });
  543.  
  544. });//]]>  
  545.  
  546. </script>
  547.  
  548.  
  549. </head>
  550. <body>
  551. <!---ABOUT--->
  552.  
  553. <div id="left">
  554.     <div id="aboutimg"></div>
  555.     <div id="abouttitle">
  556.         <p>About</p>
  557.     </div>
  558.    
  559.    
  560.    
  561.     <div id="about">
  562.         <div id="ab">
  563.             <div id="aboutpic"><img src="PUT AN IMAGE URL YOU WANT NEXT TO THE ABOUT HERE"></div>
  564.             <div id="aboutdetails">
  565.                 you can <br>
  566.                 put <br>
  567.                 whatever you <br>
  568.                 want here
  569.             </div>
  570.    
  571.             <div id="aboutdesc">
  572.                 <p>
  573. THIS IS WHERE YOU PUT YOUR ABOUT. MAKE IT LONG OR SHORT. IT DOESNT MATTER ITS ABOUT YOU GO CRAY
  574.                 </p>
  575.             </div>
  576.            
  577.             <div id="askfaq">
  578.                 <div id="faqbox">
  579.                     <div id="faqtitle">
  580.                         <p>FAQ TITLE</p>
  581.                     </div>
  582.                     <div id="faq">
  583.                         <p class="question">QUESTION?</p>
  584.                         <p class="answer">ANSWER.</p>
  585.                         <p class="question">QUESTION?</p>
  586.                         <p class="answer">ANSWER.</p>
  587.                         <p class="question">QUESTION?</p>
  588.                         <p class="answer">ANSWER.</p>
  589.                        
  590.                     </div>
  591.                 </div>
  592.                 <div id="asktitle">
  593.                     <center>ASK TITLEcenter>
  594.                 </div>
  595.                
  596.                 <div id="askbox">
  597.                     <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/ajdblaieugblaieurbgler.tumblr/YOURURLHERE.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  598.                 </div>
  599.                
  600.             </div>
  601.          
  602.         </div>
  603.     </div>
  604. </div>
  605.  
  606. <!---NAVIGATION--->
  607.  
  608. <div id="right">
  609.     <div id="navimg"></div>
  610.     <div id="navititle">
  611.         <p>Navigation</p>
  612.     </div>
  613.     <div id="navi">
  614.        
  615. <div id="tagbox">
  616.     <div id="tagtitle">title</div>
  617.     <div id="tags">
  618.         <a href="/">tag</a>
  619.         <a href="/">tag</a>
  620.         <a href="/">tag</a>
  621.         <a href="/">tag</a>
  622.         <a href="/">tag</a>
  623.     </div>
  624. </div>
  625.        
  626. <div id="tagbox">
  627.     <div id="tagtitle">title</div>
  628.     <div id="tags">
  629.         <a href="/">tag</a>
  630.         <a href="/">tag</a>
  631.         <a href="/">tag</a>
  632.         <a href="/">tag</a>
  633.         <a href="/">tag</a>
  634.     </div>
  635. </div>
  636.        
  637. <div id="tagbox">
  638.     <div id="tagtitle">title</div>
  639.     <div id="tags">
  640.         <a href="/">tag</a>
  641.         <a href="/">tag</a>
  642.         <a href="/">tag</a>
  643.         <a href="/">tag</a>
  644.         <a href="/">tag</a>
  645.     </div>
  646. </div>
  647.  
  648.        
  649. <div id="tagbox">
  650.     <div id="tagtitle">title</div>
  651.     <div id="tags">
  652.         <a href="/">tag</a>
  653.         <a href="/">tag</a>
  654.         <a href="/">tag</a>
  655.         <a href="/">tag</a>
  656.         <a href="/">tag</a>
  657.     </div>
  658. </div>
  659.  
  660. <div id="blogrollcont">
  661. <div id="blogroll">
  662. <div id="blogrolltitle">BLOGROLL</div>
  663. {block:Following}
  664.         <ul>
  665.             {block:Followed}
  666.             <li>
  667.                 <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-48}"/></a>
  668.             </li>
  669.             {/block:Followed}
  670.         </ul>
  671.         {/block:Following}
  672. </div>
  673. </div>
  674. </div>
  675. </div>    
  676. </div>
  677. </div>
  678.  
  679. <div id="returnbuttons">
  680.     <a href="http://tumblr.com" title="Dashboard" class="dashlink"></a>
  681.     <a href="/" title="Home" class="homelink"></a>
  682.     <a href="http://lunaticthemes.tumblr.com/" title="Theme" class="themelink"></a>
  683. </div>
  684.  
  685. </body>
  686.  
  687.  
  688. </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!