API tools faq
paste
Fucking_Aj

Ask Layout #3 - Pink

Fucking_Aj
Jan 26th, 2015
327
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.59 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!--
  4. ╭╮╱╱╱╱╱╱╭╮╱╱╱╭╮╭╮
  5. ┃┃╱╱╱╱╱╱┃┃╱╱╭╯╰┫┃
  6. ┃╰━┳━┳╮╭┫╰━╮╰╮╭┫╰━┳━━┳╮╭┳━━┳━━╮
  7. ┃╭╮┃╭┫┃┃┃╭╮┃╱┃┃┃╭╮┃┃━┫╰╯┃┃━┫━━┫
  8. ┃╰╯┃┃┃╰╯┃┃┃┃╱┃╰┫┃┃┃┃━┫┃┃┃┃━╋━━┃
  9. ╰━━┻╯╰━━┻╯╰╯╱╰━┻╯╰┻━━┻┻┻┻━━┻━━╯
  10.  
  11. -->
  12.  
  13. <html lang="en">
  14. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15. <html xmlns="http://www.w3.org/1999/xhtml">
  16. <head>
  17.  
  18. <script type="text/javascript"
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script>
  21. $(document).ready(function() {
  22. //
  23. $('a.poplight[href^=#]').click(function() {
  24. var popID = $(this).attr('rel'); //Get Popup Name
  25. var popURL = $(this).attr('href'); //Get Popup href to define size
  26. var query= popURL.split('?');
  27. var dim= query[1].split('&');
  28. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  29. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  30. var popMargTop = ($('#' + popID).height() + 80) / 2;
  31. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  32. //Apply Margin to Popup
  33. $('#' + popID).css({
  34. 'margin-top' : -popMargTop,
  35. 'margin-left' : -popMargLeft
  36. });
  37. $('body').append('<div id="fade"></div>');
  38. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  39. return false;
  40. });
  41. $('a.close, #fade').live('click', function() {
  42. $('#fade , .popup_block').fadeOut(function() {
  43. $('#fade, a.close').remove(); //fade them both out
  44. });
  45. return false;
  46. });
  47. });
  48. </script>
  49.  
  50. <script type="text/javascript"
  51. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  52. <link href='http://fonts.googleapis.com/css?family=Give+You+Glory' rel='stylesheet' type='text/css'>
  53. <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
  54. <link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'>
  55. <style type="text/css">
  56.  
  57. .popup_block{
  58. display:none;
  59. background:#fff;
  60. padding:20px;
  61. border:1px solid #eee; /* if you want a solid white pop-up, delete this */
  62. float:left;
  63. position:fixed;
  64. top:50%;left:50%;
  65. z-index: 9999999899999999999999999999999;
  66. -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  67. -moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  68. box-shadow: 0px 0px 20px #000; /* delete for solid white */
  69. }
  70.  
  71. *html #fade {position: absolute;}
  72. *html .popup_block {position: absolute;}
  73. #fade {
  74. display:none;
  75. position:fixed;
  76. left:0px;
  77. top:0px;
  78. width:100%;
  79. height:100%;
  80. z-index:99999999989999999999989999999999989999999;
  81. background:#000; /* change to #fff for solid white */
  82. opacity:0.5; /* change to opacity:1; */
  83. }
  84. iframe#tumblr_controls {right:2px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.05;-webkit-transition: all 0.8s ease-out;-moz-
  85.  
  86. transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  87.  
  88. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 0.8;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  89.  
  90. p {
  91. margin:0px;
  92. margin-top:0px;
  93. }
  94.  
  95.  
  96. body {
  97. padding: 0px;
  98. margin: 0px;
  99. color:{color:text};
  100. font-family: calibri;
  101. line-height:14px;
  102. font-size:11px;
  103. background-color: {color:Background};
  104. background-image:url(http://media.tumblr.com/8613c0a7fc87070377707023abcd0caa/tumblr_inline_na2o5ix0IM1qge1qb.png);
  105. background-attachment: fixed;
  106. background-repeat: repeat;
  107. }
  108.  
  109.  
  110. a:link, a:active, a:visited{
  111. text-decoration: none;
  112. -webkit-transition: color 0.3s ease-out;
  113. -moz-transition: color 0.3s ease-out;
  114. transition: color 0.3s ease-out;
  115. color:{color:link};
  116. }
  117.  
  118. a:hover {
  119. text-decoration: none;
  120. font-style:;
  121. color: {color:Hover};
  122. }
  123.  
  124. div#center{
  125. margin:auto;
  126. position:relative;
  127. width:1000px;
  128. background-color:;
  129. overflow:auto;
  130. overflow-y:hidden;
  131. }
  132.  
  133.  
  134.  
  135.  
  136. /*CUSTOMIZE SIDEBAR HERE*/
  137. #sidebar{
  138. position:fixed !important;
  139. width:570px;
  140. background:white;
  141. height:290px;
  142. padding:10px;
  143. z-index:999999;
  144. margin-top:150px;
  145. margin-left:135px;
  146. text-align:center;
  147. border:1px solid #F8E0EC;
  148. }
  149.  
  150. #im{
  151. position:fixed;
  152. margin-top:-225px;
  153. margin-left:-60px;
  154. opacity:.8;
  155. }
  156. #im img{
  157. width:150px;
  158. }
  159. #le{
  160. position:fixed;
  161. width:260px;
  162. padding:5px;
  163. padding-bottom:11px;
  164. background:white;
  165. margin-top:130px;
  166. margin-left:695px;
  167. z-index:1;
  168. border:1px solid #F8E0EC;
  169. -WEBKIT-TRANSFORM: ROTATE(20DEG);
  170. -MOZ-TRANSFORM: ROTATE(20DEG);
  171. -O-TRANSFORM: ROTATE(20DEG);
  172. }
  173. #le img{
  174. width:260px;
  175. z-index:1;
  176. }
  177.  
  178. #blogtitle{
  179. position:fixed;
  180. font-size:37px;
  181. font-family: 'Loved by the King', cursive;
  182. z-index:9999999;
  183. color:#F6CED8;
  184. margin-top:133px;
  185. margin-left:320px;
  186. text-transform:uppercase;
  187. -webkit-transition: all .7s ease;
  188. -moz-transition: all .7s ease;
  189. -o-transition: all .7s ease;
  190. transition: all .7s ease;
  191. }
  192. #blogtitle:hover{
  193. letter-spacing:4px;
  194. -webkit-transition: all .7s ease;
  195. -moz-transition: all .7s ease;
  196. -o-transition: all .7s ease;
  197. transition: all .7s ease;
  198. }
  199. #cd{
  200. position:fixed;
  201. width:200px;
  202. height:40px;
  203. border:1px solid #F6CED8;
  204. padding:10px;
  205. margin-top:20px;
  206. margin-left:15px;
  207. overflow:hidden;
  208. z-index:9;
  209. background:white;
  210. -webkit-transition: all .7s ease;
  211. -moz-transition: all .7s ease;
  212. -o-transition: all .7s ease;
  213. transition: all .7s ease;
  214. }
  215. #cd:hover{
  216. width:543px;
  217. height:100px;
  218. margin-left:3px;
  219. -webkit-transition: all .7s ease;
  220. -moz-transition: all .7s ease;
  221. -o-transition: all .7s ease;
  222. transition: all .7s ease;
  223. }
  224. #cd2{
  225. position:fixed;
  226. width:200px;
  227. height:40px;
  228. border:1px solid #F6CED8;
  229. padding:10px;
  230. margin-top:20px;
  231. margin-left:315px;
  232. background:white;
  233. overflow:hidden;
  234. -webkit-transition: all .7s ease;
  235. -moz-transition: all .7s ease;
  236. -o-transition: all .7s ease;
  237. transition: all .7s ease;
  238. }
  239. #cd2:hover{
  240. width:545px;
  241. height:100px;
  242. margin-left:-0px;
  243. z-index:99;
  244. -webkit-transition: all .7s ease;
  245. -moz-transition: all .7s ease;
  246. -o-transition: all .7s ease;
  247. transition: all .7s ease;
  248. }
  249. #ab{
  250. position:fixed;
  251. width:440px;
  252. height:20px;
  253. border:1px solid #F6CED8;
  254. padding:10px;
  255. margin-top:100px;
  256. line-height:20px;
  257. margin-left:55px;
  258. z-index:2;
  259. background:white;
  260. -webkit-transition: all .7s ease;
  261. -moz-transition: all .7s ease;
  262. -o-transition: all .7s ease;
  263. transition: all .7s ease;
  264. }
  265. </style>
  266.  
  267. {/block:IndexPage}
  268.  
  269.  
  270. <title>Any questions?</title>
  271.  
  272. <link rel="shortcut icon" href="http://media.tumblr.com/tumblr_m230lpzA3A1qfamg6.png" />
  273. <meta name="viewport" content="width=820" />
  274. </head>
  275.  
  276. <body>
  277. <BODY onselectstart="return false;" ondragstart="return false;">
  278. <div class="wrapper">
  279. <div class="header">
  280. </div>
  281.  
  282. <div id="cage">
  283. <div id="center">
  284. <div id="le"><a href="/"><img src="https://41.media.tumblr.com/d1679f9ef6c67c3a2577bb006f4eca1b/tumblr_nik8v2BkXQ1ttevluo2_400.jpg" width=100%></a></div>
  285.  
  286. <div id="blogtitle">Ask me anything</div>
  287. <!--STUFF THAT GOES INTO THE SIDEBAR-->
  288. <div id="sidebar">
  289. <center>
  290. <div style="font-size:22px; font-family:georgia; font-style:italic; color:#F6CED8;">About me</div><p>
  291. <a href="/" style="font-size:11px; font-family:consolas; text-transform:uppercase;color:#F6CED8; line-height:18px;">home</a> &middot <a href="/" style="font-size:11px; font-family:consolas; text-transform:uppercase;color:#F6CED8; line-height:18px;">link</a> &middot <a href="/" style="font-size:11px; font-family:consolas; text-transform:uppercase;color:#F6CED8; line-height:18px;">link</a> &middot <a href="http://tumblr.com/dashboard" style="font-size:11px; font-family:consolas; text-transform:uppercase;color:#F6CED8; line-height:18px;">dashboard</a>
  292. <div style="background:#f1f1f1;padding:4px; border:1px solid #e1e1e1; width:556px; height:110px;">write your stuff stuff here. aka about u m8. Ex: Hi I'm AJ, I'm a brunette and a female. I like bands like: Bring me the Horizon, A Day to Remember, Of Mice & Men, Mayday Parade, The Amity Affliction and way way more. I am a Virgo and its description is exactly me. I laugh at everything I see and I do the same with crying. Stuff like that aight?? Try to make it half way or so :)</div>
  293.  
  294. <div id="cd"> <div style="font-size:28px; line-height:30px; font-family:georgia; font-style:italic; color:#F6CED8; margin-top:5px">Will Do:</div><br>&middot type what you will do</div>
  295.  
  296.  
  297. <div id="cd2"> <div style="font-size:28px; line-height:30px; font-family:georgia; font-style:italic; color:#F6CED8; margin-top:5px">Won't Do:</div><br>&middot type what you not will do</div>
  298. <div id="ab"><a href="#?w=300" rel="box1" class="poplight" style="color:#F6CED8;font-size:22px; font-family:georgia; font-style:italic;">ask me now!</a></div>
  299. <div id="im"><img src="https://38.media.tumblr.com/4274c9be3b0ea72d7e5402ece58c813d/tumblr_mkfxnkzgJ61rmsibzo1_500.gif"></div>
  300. </center>
  301. </div>
  302. <!------------------------------------->
  303.  
  304.  
  305. </body>
  306. <div id="box1" class="popup_block">
  307. <iframe frameborder="0" height="300" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  308. </div></div>
  309. <div style="position:fixed; padding:5px; bottom:6px; right:6px; border:3px solid #F6CED8; border-radius:100%; width:16px; background:white; height:16px;"><a href="http://mufflinq.tumblr.com" title="theme by aj"><img src="http://i12.photobucket.com/albums/a213/superkate_2468/favicon-10.png" style="left:-5px; top:-4px; "></a></div>
  310. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!