API tools faq
paste
Advertisement
Guest User

iPhone Theme by Lucyrps

a guest
Jul 4th, 2013
1,552
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--- iPhone theme by lucyrps --->
  5.  
  6. <script type="text/javascript"
  7. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  8. <script>
  9. $(document).ready(function() {
  10. //
  11. $('a.poplight[href^=#]').click(function() {
  12. var popID = $(this).attr('rel'); //Get Popup Name
  13. var popURL = $(this).attr('href'); //Get Popup href to define size
  14. var query= popURL.split('?');
  15. var dim= query[1].split('&');
  16. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  17. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://makeyourowngarments.com/sites/default/files/our_images/black%20X.png" style="width:10px; height:10px;" class="btn_close" title="close" alt="Close" />');
  18. var popMargTop = ($('#' + popID).height() + 80) / 2;
  19. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  20. //Apply Margin to Popup
  21. $('#' + popID).css({
  22. 'margin-top' : -popMargTop,
  23. 'margin-left' : -popMargLeft
  24. });
  25. $('body').append('<div id="fade"></div>');
  26. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  27. return false;
  28. });
  29. $('a.close, #fade').live('click', function() {
  30. $('#fade , .popup_block').fadeOut(function() {
  31. $('#fade, a.close').remove(); //fade them both out
  32. });
  33. return false;
  34. });
  35. });
  36. </script>
  37.  
  38. <head>
  39. <title>{Title}</title>
  40.  
  41.  
  42. <link rel="stylesheet" href="http://static.tumblr.com/thpaaos/DIcklyl4z/reset.css" type="text/css">
  43.  
  44. <!-- Theme CSS -->
  45. <style type="text/css" media="screen">
  46.  
  47. ::-webkit-scrollbar-thumb:vertical {background-color:#000; height:100px; border-radius:10px; }
  48.  
  49. ::-webkit-scrollbar-thumb:horizontal {background-color:#000; height:10px !important; border-radius:10px;}
  50.  
  51. ::-webkit-scrollbar { height:10px;width:4px; background-color:transparent;}
  52.  
  53. @font-face{font-family:gentle;src:url(http://static.tumblr.com/tjy6jor/3kRmlziln/a_gentle_touch.ttf);}
  54.  
  55. body {
  56. background-image:url('http://static.tumblr.com/pv8xlz2/XyTmox7ea/leighphonebg.png');
  57. background-attachment:fixed center center;
  58. background-color:#0e0e0e;
  59. -webkit-font-smoothing: antialiased;
  60. font-size: 11px;
  61. font-family:calibri;
  62. line-height: 24px;
  63. margin: 0;
  64. padding: 0;
  65. }
  66.  
  67. #iphone {
  68. margin-top:-50px;
  69. width:100%;
  70. float:center;
  71. }
  72.  
  73. #iphone img {
  74. max-width:500px;
  75. }
  76.  
  77. #contacts {
  78. position:fixed;
  79. height:418px;
  80. overflow:auto;
  81. width:252px;
  82. background-color:#eeeeee;
  83. margin-top:145px;
  84. margin-left:451px;
  85. }
  86.  
  87. #littleliars {
  88. font-family:calibri;
  89. font-size:25px;
  90. width:233px;
  91. position:fixed;
  92. margin-left:450px;
  93. margin-top:105px;
  94. z-index:999999;
  95. letter-spacing:-1px;
  96. padding:10px;
  97. text-align:center;
  98. color:#eee;
  99. box-shadow:inset 0px 0px 20px #858585;
  100. background-color:#A1B1C7;
  101. text-shadow: 0px 1px 5px #858585, 2px 2px 2px #858585, 2px 2px 2px #eee;
  102. ::-moz-selection { background: #0e0e0e; color: #0e0e0e; text-shadow: none; }
  103. ::selection { background: #5af; color: #0e0e0e; text-shadow: none; }
  104. }
  105.  
  106. .name {
  107. font-family:calibri;
  108. font-size:23px;
  109. letter-spacing:-1px;
  110. margin-top:10px;
  111. margin-left:65px;
  112. width:170px;
  113. line-height:250%;
  114. }
  115.  
  116. .name a {
  117. color:#000;
  118. text-decoration:none;
  119. }
  120.  
  121. #icons {
  122. position:absolute;
  123. margin-top:-580px;
  124. margin-left:7px;
  125. line-height:350%;
  126. height:428px;
  127. }
  128.  
  129. #icons img {
  130. max-width:50px;
  131. border:1px solid;
  132. }
  133.  
  134. .popup_block{
  135. display: none;
  136. background-color:#eee;
  137. padding: 10px;
  138. font-family: "calibri";
  139. line-height: 11px;
  140. border: 1px solid #aaa;
  141. font-size: 12px;
  142. left:1050px;
  143. top:355px;
  144. position: fixed;
  145. z-index: 999999;
  146. }
  147. img.btn_close {
  148. float: right;
  149. margin: -5px -5px 0 0;
  150. }
  151. *html .popup_block {
  152. position: absolute;
  153. margin-top: 200px;
  154. margin-left: 10px;
  155. }
  156.  
  157. #caleb {
  158. background-color:#eee;
  159. position:fixed;
  160. width:100px;
  161. height:200px;
  162. margin-top:20px;
  163. border:1px solid;
  164. z-index:9999;
  165. }
  166.  
  167. #emily {
  168. background-color:#eee;
  169. position:fixed;
  170. width:100px;
  171. height:200px;
  172. border:1px solid;
  173. z-index:9999;
  174. margin-top:20px;
  175. }
  176.  
  177. #ezra {
  178. background-color:#eee;
  179. position:fixed;
  180. width:100px;
  181. height:200px;
  182. border:1px solid;
  183. z-index:9999;
  184. }
  185.  
  186. #hanna {
  187. background-color:#eee;
  188. position:fixed;
  189. width:100px;
  190. height:200px;
  191. border:1px solid;
  192. margin-top:10px;
  193. }
  194.  
  195. #hanna1 {
  196. background-color:#eee;
  197. position:fixed;
  198. width:100px;
  199. height:200px;
  200. border:1px solid;
  201. }
  202.  
  203. #jason {
  204. background-color:#eee;
  205. position:fixed;
  206. width:100px;
  207. height:200px;
  208. border:1px solid;
  209. }
  210.  
  211. #paige {
  212. background-color:#eee;
  213. position:fixed;
  214. width:100px;
  215. height:200px;
  216. border:1px solid;
  217. }
  218.  
  219. #spencer {
  220. background-color:#eee;
  221. position:fixed;
  222. width:100px;
  223. height:200px;
  224. border:1px solid;
  225. }
  226.  
  227. #toby {
  228. background-color:#eee;
  229. position:fixed;
  230. width:100px;
  231. height:200px;
  232. border:1px solid;
  233. }
  234.  
  235. .ship {
  236. position:fixed;
  237. color:#eee;
  238. margin-top:-23px;
  239. margin-left:0px;
  240. font-family:gentle;
  241. width:175px;
  242. font-size:20px;
  243. text-align:center;
  244. text-shadow:1px 1px 1px #000;
  245. }
  246.  
  247. .character {
  248. position:fixed;
  249. z-index:-99;
  250. margin-top:-135px;
  251. margin-left:-170px;
  252. }
  253.  
  254. .character img {
  255. max-width:175px;
  256. }
  257.  
  258. .sub {
  259. position:absolute;
  260. font-size:11px;
  261. margin-top:-40px;
  262. z-index:-9;
  263. }
  264.  
  265. #credit {
  266. margin-left:552px;
  267. margin-top:581px;
  268. z-index:9999;
  269. width:30px;
  270. height:30px;
  271. border-radius:100%;
  272. background-color:transparent;
  273. padding:10px;
  274. position:fixed;
  275. }
  276.  
  277. #credit a {
  278. color:transparent;
  279. font-size:70px;
  280. padding-top:0px;
  281. margin-top:10px;
  282. text-decoration:none;
  283. }
  284.  
  285. .link {
  286. margin-left:-14px;
  287. margin-top:3px;
  288. }
  289.  
  290.  
  291.  
  292. </style>
  293.  
  294. </head>
  295. <body>
  296. <div id="credit"><div class="link"><a href="http://lucyrps.tumblr.com">©</a></div></div>
  297.  
  298. <div id="iphone" style="position:fixed; left:325px;"> <img src="http://static.tumblr.com/tjy6jor/oXSmp8iwy/littleliars.png"> </div>
  299.  
  300. <div id="littleliars">MY LITTLE LIARS</div>
  301. <div id="contacts">
  302.  
  303. <div class="name"><a href="#?w=175" rel="caleb" class="poplight">Caleb Rivers</a><br><div class="sub">The Caleb to my Hanna</div></div>
  304.  
  305. <div class="name"><a href="#?w=175" rel="emily" class="poplight">Emily Fields</a><br><div class="sub">The Emily to my Aria</div></div>
  306.  
  307. <div class="name"><a href="#?w=175" rel="ezra" class="poplight">Ezra Fitz</a><br> <div class="sub">The Ezra to my Aria</div></div>
  308.  
  309. <div class="name"><a href="#?w=175" rel="hanna" class="poplight">Hanna Marin</a><br><div class="sub">The Hanna to my Aria</div></div>
  310.  
  311. <div class="name"><a href="#?w=175" rel="hanna1" class="poplight">Hanna Marin</a><br><div class="sub">The Hanna to my Spencer</div></div>
  312.  
  313. <div class="name"><a href="#?w=175" rel="jason" class="poplight">Jason DiLaurentis</a><br><div class="sub">The Jason to my Aria</div></div>
  314.  
  315. <div class="name"><a href="#?w=175" rel="paige" class="poplight">Paige McCullers</a><br><div class="sub">The Paige to my Emily</div></div>
  316.  
  317. <div class="name"><a href="#?w=175" rel="spencer" class="poplight">Spencer Hastings</a><br><div class="sub">The Spencer to my Aria</div></div>
  318.  
  319. <div class="name"><a href="#?w=175" rel="toby" class="poplight">Toby Cavanaugh</a><br><div class="sub">The Toby to my Spencer</div></div>
  320.  
  321.  
  322. <div id="emily" class="popup_block">
  323. <div class="ship">the emily to my aria</div>
  324. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</center>
  325. <div class="character"><img src="http://static.tumblr.com/tjy6jor/JPzmpa42v/liaremily.png"></div>
  326. </div>
  327.  
  328. <div id="caleb" class="popup_block">
  329. <div class="ship">the caleb to my hanna</div>
  330. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </center>
  331. <div class="character"><br><br><br><img src="http://static.tumblr.com/tjy6jor/yktmpdxpf/haleb.png"></div>
  332. </div>
  333.  
  334. <div id="ezra" class="popup_block">
  335. <div class="ship">the ezra to my aria</div>
  336. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</center>
  337. <div class="character"><img src="http://static.tumblr.com/tjy6jor/DgVmpa3c9/liarezra.png"></div>
  338. </div>
  339.  
  340. <div id="hanna" class="popup_block">
  341. <div class="ship">the hanna to my aria</div>
  342. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</center>
  343. <div class="character"><br><img src="http://static.tumblr.com/tjy6jor/XvTmpa4uy/liarhanna.png"></div>
  344. </div>
  345.  
  346. <div id="hanna1" class="popup_block">
  347. <div class="ship">the hanna to my spencer</div>
  348. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</center>
  349. <div class="character"><br><img src="http://static.tumblr.com/tjy6jor/cA7mpdxaz/spanna.png"></div>
  350. </div>
  351.  
  352. <div id="jason" class="popup_block">
  353. <div class="ship">the jason to my aria</div>
  354. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </center>
  355. <div class="character"><br><img src="http://static.tumblr.com/tjy6jor/L04mpdy8l/jaria.png"></div>
  356. </div>
  357.  
  358. <div id="paige" class="popup_block">
  359. <div class="ship">the paige to my emily</div>
  360. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </center>
  361. <div class="character"><img src="http://static.tumblr.com/tjy6jor/3dNmpa755/liarpaige.png"></div>
  362. </div>
  363.  
  364. <div id="spencer" class="popup_block">
  365. <div class="ship">the spencer to my aria</div>
  366. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</center>
  367. <div class="character"><br><img src="http://static.tumblr.com/tjy6jor/IHompa7hp/liarspencer.png"></div>
  368. </div>
  369.  
  370. <div id="toby" class="popup_block">
  371. <div class="ship">the toby to my spencer</div>
  372. <center>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</center>
  373. <div class="character"><br><img src="http://static.tumblr.com/tjy6jor/wyvmpa7xu/liartoby.png"></div>
  374. </div>
  375.  
  376. <div id="icons">
  377. <img src="http://media.tumblr.com/ebc5466850da19c0f9572029552cb0cd/tumblr_inline_mp3kytwDqN1qz4rgp.png"><br>
  378. <img src="http://media.tumblr.com/2c27b0666738f2fd006a055f4e4e73fc/tumblr_inline_mox49lMVGM1qz4rgp.png"><br>
  379. <img src="http://media.tumblr.com/cf8cd9f87e04b56444d6808785f9f137/tumblr_inline_mlw0kiO7wD1qz4rgp.png"><br>
  380. <img src="http://media.tumblr.com/034597e5610e2b3663104d9f7c177766/tumblr_inline_mp0a863Tyx1qz4rgp.png"><br>
  381. <img src="http://24.media.tumblr.com/9e00b275ea4b0a61986f80515d9350d6/tumblr_mp8g4lHLc01rhttlbo4_250.png"><br>
  382. <img src="http://media.tumblr.com/1987a9820b0a92f5711ff710fd7ed927/tumblr_inline_mpbi7wWWts1qz4rgp.png"><br>
  383. <img src="http://25.media.tumblr.com/364938f897957cf15f1b6f2f3e80653f/tumblr_mnzkbzbbov1r63dmno6_250.png"><br>
  384. <img src="http://24.media.tumblr.com/f4e63ced8394d5573676d0a8ef10c7fe/tumblr_mla6vvJmbO1s2sjgyo3_250.png"><br>
  385. <img src="http://media.tumblr.com/a1d91d1eb5d2369b97274631b90ce1dd/tumblr_inline_mov1mgfnva1qz4rgp.png">
  386.  
  387. </div>
  388. </div>
  389.  
  390.  
  391. </body>
  392. </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!