API tools faq
paste
Advertisement
xariaaaa

[THEME] ʀᴀʏ ʟɪ

xariaaaa
Mar 26th, 2016
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!---- ᴘʟᴇᴀsᴇ ᴅᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ!
  5. ᴘᴏsᴛs ʙʏ ɢᴀʟᴀxɪᴀs-ᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  6. ʙᴀsᴇ ʙʏ ᴀɴᴢᴇʟɪᴄ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  7. ᴛʜᴇᴍᴇ ʙʏ xᴠᴏᴜɴᴀ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ---->
  8.  
  9. <head>
  10.  
  11. <title>{Title}</title>
  12. {block:Description}
  13. <meta name="description" content="{MetaDescription}" />
  14. {/block:Description}
  15. <link rel="shortcut icon" href="{Favicon}" />
  16. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  17.  
  18.  
  19. <!-- Pop Up 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. <style type="text/css">
  50. /* ASPEX */
  51. @font-face{ font-family: "aspex"; src: url('https:/dl.dropboxusercontent.com/s/yeeehszy65j0cfk/ASPEX_0.TTF')
  52. }
  53. /* GASARA */
  54. @font-face { font-family: "gasara"; src: url('https://dl.dropbox.com/s/9mird7ef2oyhzbc/gasara.ttf'); }
  55.  
  56. /* DARLESTON */
  57. @font-face { font-family: "darleston"; src: url('https://dl.dropboxusercontent.com/s/pon2nz49g2gofuu/Darleston.otf') }
  58.  
  59.  
  60. *, body, a {cursor: url(http://i.imgur.com/2qleX.jpg), auto;}
  61.  
  62. a:hover {cursor: url(http://i.imgur.com/IepP2.jpg), auto;}
  63.  
  64. ::selection {
  65. background:transparent;
  66. color:#000000;
  67. text-shadow: 0px 0px 1px #ffdcf6;
  68. }
  69.  
  70. ::-moz-selection {
  71. background:transparent;
  72. color:#000000;
  73. text-shadow: 0px 0px 1px #ffdcf6;
  74. }
  75.  
  76. ::-webkit-selection {
  77. background:transparent;
  78. color:#000000;
  79. text-shadow: 0px 0px 1px #ffdcf6;
  80. }
  81.  
  82.  
  83.  
  84. /* THEME SPECIALS */
  85.  
  86. ::-webkit-scrollbar-thumb {
  87. background-color: #ffdcf6;
  88. border: 3px solid #eaeaea;
  89. height:auto;
  90. border-bottom:none;
  91. }
  92.  
  93. ::-webkit-scrollbar {
  94. height:9px;
  95. width:9px;
  96. background-color: #ffdcf6;
  97. border:4px solid #eaeaea;
  98. }
  99.  
  100. /* BODY */
  101. body {
  102. background-image:url({image:background image});
  103. background-repeat:no-repeat;
  104. background-attachment: fixed;
  105. background-color: #f4efed;
  106. background-position: bottom right;
  107. margin: 0;
  108. }
  109.  
  110. a:link, a:visited, a:active {
  111. text-decoration: none;
  112. color: #ffdcf6;
  113. -moz-transition:all ease-in-out 0.7s;
  114. -webkit-transition:all ease-in-out 0.7s;
  115. -o-transition:all ease-in-out 0.7s;
  116. transition:all ease-in-out 0.7s;
  117. }
  118.  
  119. a:hover {
  120. color: #ffdcf6;
  121. }
  122.  
  123. small, sub, sup, code {
  124. font-family:trebuchet ms;
  125. font-size:9px;
  126. letter-spacing: 1;
  127. line-height: 100%;
  128. margin-top: 10px !important;
  129. line-height: 90%;
  130. }
  131.  
  132. pre, code {
  133. width:100%;
  134. font-family: "Gasara";
  135. font-size: 8px;
  136. text-align:center;
  137. text-transform: uppercase;
  138. white-space:pre-wrap;
  139. word-wrap:break-word;
  140. padding:3px;
  141. }
  142.  
  143. blockquote {
  144. margin-left:5px;
  145. width:90%;
  146. padding-left:5px;
  147. border-left: solid 1px #ffdcf6;
  148. overflow:hidden;
  149. }
  150.  
  151. blockquote blockquote {
  152. margin-left: 10px;
  153. width: 85%;
  154. text-align: justify;
  155. border-left: solid 1px #ffdcf6;
  156. padding: 5px;
  157. overflow: hidden;
  158. }
  159.  
  160. blockquote img {
  161. max-width:210px !important;
  162. opacity: .5;
  163. overflow:hidden;
  164. }
  165.  
  166. blockquote blockquote img {
  167. max-width:180px !important;
  168. opacity: .5;
  169. overflow:hidden;
  170. }
  171.  
  172. blockquote img:hover {
  173. opacity: 0.9;
  174.  
  175. }
  176.  
  177. blockquote blockquote img:hover {
  178. opacity: 0.9;
  179. }
  180.  
  181. .alignment {
  182. position: relative;
  183. margin-left: 150px;
  184. margin-top: 10px;
  185. height: 100%;
  186. height: auto !important;
  187. min-height: 100%;
  188. width:250px;
  189. }
  190.  
  191. /* QUOTES */
  192.  
  193. #quote {
  194. color: #ffdcf6;
  195. font-family:'trebuchet ms';
  196. font-size:11px;
  197. font-style:italic;
  198. }
  199.  
  200. #source {
  201. font-family:'Gasara';
  202. font-size:10px;
  203. letter-spacing:1px;
  204. text-align:right;
  205. text-transform:uppercase;
  206. }
  207.  
  208. /* CONTENT WRAPPER */
  209.  
  210. #wrapper {
  211. width: 270px;
  212. height: auto;
  213. float: right;
  214. right: 150px;
  215. top: 20px;
  216. position: relative;
  217. }
  218. /* BLOG POSTS */
  219.  
  220. .posts {
  221. width:250px;
  222. font-family:'trebuchet ms';
  223. font-size:9px;
  224. letter-spacing: 1;
  225. line-height: 100%;
  226. color: black;
  227. text-align: justify;
  228. word-wrap:break-word;
  229. background-color: #eaeaea;
  230. padding: 10px;
  231. margin-bottom: 20px;
  232. -moz-transition:all ease-in-out 0.7s;
  233. -webkit-transition:all ease-in-out 0.7s;
  234. -o-transition:all ease-in-out 0.7s;
  235. transition:all ease-in-out 0.7s;
  236. }
  237.  
  238. .postinfo {
  239. width:250px;
  240. font-family:'trebuchet ms';
  241. font-size:9px;
  242. letter-spacing: 1;
  243. line-height: 100%;
  244. color: black;
  245. text-align: justify;
  246. word-wrap:break-word;
  247. margin-top: -15px;
  248. background-color: #eaeaea;
  249. padding: 10px;
  250. -moz-transition:all ease-in-out 0.7s;
  251. -webkit-transition:all ease-in-out 0.7s;
  252. -o-transition:all ease-in-out 0.7s;
  253. transition:all ease-in-out 0.7s;
  254. }
  255.  
  256. .posts img:hover, #photoset:hover {
  257. -moz-transition:all ease-in-out 0.7s;
  258. -webkit-transition:all ease-in-out 0.7s;
  259. -o-transition:all ease-in-out 0.7s;
  260. transition:all ease-in-out 0.7s;
  261. -webkit-filter: grayscale(0%) !important;
  262. opacity: 1;
  263. }
  264.  
  265. .posts img, #photoset {
  266. max-width:250px;.
  267. -webkit-filter: grayscale(100%);
  268. opacity: .5;
  269. -moz-transition:all ease-in-out 0.7s;
  270. -webkit-transition:all ease-in-out 0.7s;
  271. -o-transition:all ease-in-out 0.7s;
  272. transition:all ease-in-out 0.7s;
  273. }
  274.  
  275. .photopost img {
  276. max-width: 250px !important;
  277. -webkit-filter: grayscale(100%);
  278. -moz-transition:all ease-in-out 0.7s;
  279. -webkit-transition:all ease-in-out 0.7s;
  280. -o-transition:all ease-in-out 0.7s;
  281. transition:all ease-in-out 0.7s;
  282. }
  283.  
  284. .photopost img:hover {
  285. opacity: 0.9;
  286. -webkit-filter: grayscale(0%);
  287. -moz-transition:all ease-in-out 0.7s;
  288. -webkit-transition:all ease-in-out 0.7s;
  289. -o-transition:all ease-in-out 0.7s;
  290. transition:all ease-in-out 0.7s;
  291. }
  292.  
  293. .posts img, #photoset {
  294. max-width: 250px !important;
  295. opacity: .5;
  296. height: auto;
  297. -webkit-filter: grayscale(100%);
  298. -moz-transition:all ease-in-out 0.7s;
  299. -webkit-transition:all ease-in-out 0.7s;
  300. -o-transition:all ease-in-out 0.7s;
  301. transition:all ease-in-out 0.7s;
  302. }
  303.  
  304. .posts img:hover {
  305. opacity: 0.9;
  306. -webkit-filter: grayscale(0%);
  307. -moz-transition:all ease-in-out 0.7s;
  308. -webkit-transition:all ease-in-out 0.7s;
  309. -o-transition:all ease-in-out 0.7s;
  310. transition:all ease-in-out 0.7s;
  311. }
  312.  
  313. .video {
  314. max-width: 250px !important;
  315. opacity: .5;
  316. -webkit-filter: grayscale(100%);
  317. -moz-transition:all ease-in-out 0.7s;
  318. -webkit-transition:all ease-in-out 0.7s;
  319. -o-transition:all ease-in-out 0.7s;
  320. transition:all ease-in-out 0.7s;
  321. }
  322.  
  323. .video:hover {
  324. opacity: 0.9;
  325. -webkit-filter: grayscale(0%);
  326. -moz-transition:all ease-in-out 0.7s;
  327. -webkit-transition:all ease-in-out 0.7s;
  328. -o-transition:all ease-in-out 0.7s;
  329. transition:all ease-in-out 0.7s;
  330. }
  331.  
  332.  
  333. .postnotes {
  334. width:250px;
  335. font-family: 'tinytots';
  336. font-size: 8px;
  337. letter-spacing: 1;
  338. line-height: 100%;
  339. color: black;
  340. text-align: left;
  341. text-transform: uppercase;
  342. word-wrap:break-word;
  343. background-color: #eaeaea;
  344. padding: 10px;
  345. -moz-transition:all ease-in-out 0.7s;
  346. -webkit-transition:all ease-in-out 0.7s;
  347. -o-transition:all ease-in-out 0.7s;
  348. transition:all ease-in-out 0.7s;
  349. }
  350.  
  351. .postnotes img {
  352. display:none;
  353.  
  354. }
  355.  
  356. .postperma {
  357. width:268px;
  358. margin-top: -18px;
  359. margin-bottom: 20px;
  360. font-family: "gasara";
  361. font-size: 8px;
  362. color: black;
  363. text-transform: uppercase;
  364. text-align:center;
  365. line-height:100%;
  366. background-color: #eaeaea;
  367. padding:1px;
  368. -moz-transition:all ease-in-out 0.7s;
  369. -webkit-transition:all ease-in-out 0.7s;
  370. -o-transition:all ease-in-out 0.7s;
  371. transition:all ease-in-out 0.7s;
  372.  
  373. }
  374.  
  375. .postperma a {
  376. color: {color:permalink link};
  377. -moz-transition:all ease-in-out 0.7s;
  378. -webkit-transition:all ease-in-out 0.7s;
  379. -o-transition:all ease-in-out 0.7s;
  380. transition:all ease-in-out 0.7s;
  381.  
  382. }
  383.  
  384. .postperma a:hover {
  385. color: {color:hover link};
  386. -moz-transition:all ease-in-out 0.7s;
  387. -webkit-transition:all ease-in-out 0.7s;
  388. -o-transition:all ease-in-out 0.7s;
  389. transition:all ease-in-out 0.7s;
  390.  
  391. }
  392.  
  393. #posttitle {
  394. font-family:'bebas neue';
  395. font-size:20px;
  396. letter-spacing:1px;
  397. line-height:16px;
  398. text-transform:uppercase;
  399. text-align:center;
  400. }
  401.  
  402. #permtitle {
  403. font-family: 'gasara';
  404. color: #eaeaea;
  405. font-size: 8px;
  406. padding: 5px;
  407. margin-top: 5px;
  408. text-align: center;
  409. text-transform: uppercase;
  410. }
  411.  
  412. #odd {
  413. padding:2px;
  414. font-family:'trebuchet ms';
  415. font-size:9px;
  416. color:{color:Odd Text};
  417. background-color: {color:Odd Background};
  418. }
  419.  
  420. #even {
  421. padding:2px;
  422. font-family:trebuchet ms;
  423. font-size:9px;
  424. color:{color:Even Text};
  425. background-color: {color:Even Background};
  426. }
  427.  
  428. #tags {
  429. font-family: 'gasara';
  430. font-size: 8px;
  431. text-transform: uppercase;
  432. letter-spacing: 1;
  433. line-height: 100%;
  434. }
  435.  
  436.  
  437. /* AUDIO */
  438.  
  439. .album {
  440. background-repeat: no-repeat;
  441. background-position: center;
  442. position: absolute;
  443. width: 86px;
  444. height: 86px;
  445. background-size: 60px;
  446. overflow: hidden;
  447. background-color: #eaeaea;
  448. -moz-transition:all ease-in-out 0.7s;
  449. -webkit-transition:all ease-in-out 0.7s;
  450. -o-transition:all ease-in-out 0.7s;
  451. transition:all ease-in-out 0.7s;
  452. }
  453.  
  454. .album img {
  455. width: 86px;
  456. height: 86px;
  457. overflow: hidden;
  458. -moz-transition:all ease-in-out 0.7s;
  459. -webkit-transition:all ease-in-out 0.7s;
  460. -o-transition:all ease-in-out 0.7s;
  461. transition:all ease-in-out 0.7s;
  462. -webkit-filter: grayscale(100%);
  463. opacity:.5;
  464. }
  465.  
  466. .album img:hover {
  467. -moz-transition:all ease-in-out 0.7s;
  468. -webkit-transition:all ease-in-out 0.7s;
  469. -o-transition:all ease-in-out 0.7s;
  470. transition:all ease-in-out 0.7s;
  471. -webkit-filter: grayscale(0%) !important;
  472. opacity: 0.9;
  473. }
  474.  
  475. .player {
  476. width: 10px;
  477. height: 11px;
  478. overflow: hidden;
  479. padding: 4px 21px 21px 4px;
  480. margin-top: 27px;
  481. margin-left: 26px;
  482. position: absolute;
  483. background-color: #fff;
  484. opacity: 0.5;
  485. z-index: 10;
  486. -webkit-transition: all 0.4s linear;
  487. -moz-transition: all 0.4s linear;
  488. -o-transition: all 0.4s linear;
  489. -moz-border-radius: 30px;
  490. -webkit-border-radius: 30px;
  491. border-radius: 30px;
  492. }
  493.  
  494. .album:hover .player {
  495. opacity: 0.5;
  496. }
  497.  
  498. .track {
  499. margin-left: 90px;
  500. min-height: 80px;
  501. max-height: 100px;
  502. overflow: auto;
  503. font-family: "Gasara";
  504. font-size: 8px;
  505. padding: 3px;
  506. color: black;
  507. text-transform: uppercase;
  508. letter-spacing: 1px;
  509. background: #eaeaea;
  510. }
  511.  
  512.  
  513. /* QUESTION */
  514.  
  515. #ask {
  516. max-width:250px;
  517. background-color: white;
  518. }
  519.  
  520. .as {
  521. min-height: auto;
  522. padding: 5px;
  523. padding-bottom:8px;
  524. background-color: white;
  525. }
  526.  
  527. .aske {
  528. margin-top: 5px;
  529. font-family: "Darleston";
  530. font-size: 50px;
  531. line-height: 55px;
  532. text-align: center;
  533. border-bottom: solid 1px #ffdcf6;
  534. text-transform: none;
  535. color: #ffdcf6;
  536. }
  537.  
  538. .que {
  539. font-family: "Gasara";
  540. font-size: 8px;
  541. text-align: justify;
  542. color: black;
  543. }
  544.  
  545. .ans {
  546. font-family: trebuchet ms;
  547. font-size: 9px;
  548. color: black;
  549. }
  550.  
  551. /* SIDEBAR START */
  552. #sidebarcont {
  553. left: 100px;
  554. bottom: 35px;
  555. height: 550px;
  556. width: 400px;
  557. position: fixed;
  558. }
  559.  
  560. .yoona {
  561. margin-left: 10px;
  562. margin-top: 0px;
  563. height: 550px;
  564. width: 245px;
  565. z-index: 99;
  566. }
  567.  
  568. .yoona img {
  569. z-index: 99;
  570. }
  571.  
  572. .soshi {
  573. margin-top: -540px;
  574. margin-left: -30px;
  575. height: 85px;
  576. width: 85px;
  577. border-radius: 50%;
  578. border: 5px solid #ffffff;
  579. -moz-transition:all 0.5s ease-in-out;
  580. -webkit-transition:all 0.5s ease-in-out;
  581. -o-transition:all 0.5s ease-in-out;
  582. transition:all 0.5s ease-in-out;
  583. }
  584.  
  585. .soshi img {
  586. position: fixed;
  587. border-radius: 50%;
  588. height: 85px;
  589. width: 85px;
  590. z-index: 10;
  591. }
  592.  
  593. .circle1 {
  594. margin-top: -80px;
  595. margin-left: 0px;
  596. height: 150px;
  597. width: 150px;
  598. border-radius: 50%;
  599. border: 5px solid #ffffff;
  600. }
  601.  
  602. .circle1 img {
  603. position: fixed;
  604. border-radius: 50%;
  605. width: 148px;
  606. height: 148px;
  607. z-index: -10 !important;
  608. }
  609.  
  610. .title {
  611. margin-top: -150px;
  612. margin-left: 220px;
  613. width: 200px;
  614. height: 50px;
  615. font-family: "Darleston";
  616. font-size: 40px;
  617. letter-spacing: 0px;
  618. color: #ffdcf6;
  619. text-shadow: -1px 1px 0px #ffcdf2;
  620. }
  621.  
  622. .description {
  623. width: 100px;
  624. height: 190px;
  625. margin-top: -10px;
  626. margin-left: 220px;
  627. padding: 5px;
  628. background-color: #ffdcf6;
  629. font-family: "Gasara";
  630. font-size: 8px;
  631. line-height: 11px;
  632. letter-spacing: 1px;
  633. }
  634.  
  635. .links {
  636. z-index: 999999999999999999;
  637. height: 200px;
  638. width: 20px;
  639. margin-top: -200px;
  640. margin-left: 340px;
  641. }
  642.  
  643. .link {
  644. height: 32px;
  645. width: 16px;
  646. background-color: #ffdcf6;
  647. margin-bottom: 10px;
  648. margin-left: 2px;
  649. }
  650.  
  651. .circle2 {
  652. margin-top: 50px;
  653. margin-left: 150px;
  654. border-radius: 50%;
  655. height: 150px;
  656. width: 150px;
  657. border: 5px solid #ffffff;
  658. }
  659.  
  660. .circle2 img {
  661. position: fixed;
  662. border-radius: 50%;
  663. width: 148px;
  664. height: 148px;
  665. z-index: -10 !important;
  666. }
  667.  
  668. .bf {
  669. margin-top: -200px;
  670. margin-left: 250px;
  671. height: 85px;
  672. width: 85px;
  673. border-radius: 50%;
  674. border: 5px solid white;
  675. opacity: 0;
  676. -moz-transition:all 0.5s ease-in-out;
  677. -webkit-transition:all 0.5s ease-in-out;
  678. -o-transition:all 0.5s ease-in-out;
  679. transition:all 0.5s ease-in-out;
  680. }
  681.  
  682. .bf img {
  683. border-radius: 50%;
  684. height: 85px;
  685. width: 85px;
  686. z-index: 9;
  687. }
  688.  
  689. .soshi:hover, .bf:hover. popupfrnd img:hover {
  690. opacity: 0;
  691. transform: scale(0);
  692. transform: rotate(360deg);
  693. -moz-transition:all 0.5s ease-in-out;
  694. -webkit-transition:all 0.5s ease-in-out;
  695. -o-transition:all 0.5s ease-in-out;
  696. transition:all 0.5s ease-in-out;
  697. }
  698.  
  699. /* Hover Title Style */
  700.  
  701. #s-m-t-tooltip{
  702. max-width:250px;
  703. margin-top:25px;
  704. margin-left:15px;
  705. padding-left:4px;
  706. padding-right:4px;
  707. z-index:9999999999999999999;
  708. background-color: #e8e8e8;
  709. color: #a1a1a1;
  710. font-family: "Gasara";
  711. font-size:8px;
  712. letter-spacing:0px;
  713. text-transform:uppercase;
  714. text-align:center;
  715. line-height:14px;
  716. border-left: 1px dotted #13bea6;
  717. border-bottom: 1px dotted #ffc2ff;
  718. box-shadow:1px 1px 3px rgba(0,0,0,.1);
  719. border-radius: 0px 0px 0px 30px
  720. -webkit-animation-duration: 1s;
  721. animation-duration: 1s;
  722. -webkit-animation-name: wobble;
  723. animation-name: wobble;
  724. }
  725.  
  726. @keyframes wobble {
  727. 0% { transform: translateX(0%); }
  728. 15% { transform: translateX(-25%) rotate(-5deg); }
  729. 30% { transform: translateX(20%) rotate(3deg); }
  730. 45% { transform: translateX(-15%) rotate(-3deg); }
  731. 60% { transform: translateX(10%) rotate(2deg); }
  732. 75% { transform: translateX(-5%) rotate(-1deg); }
  733. 100% { transform: translateX(0%); }
  734. }
  735.  
  736. #fade {
  737. display: none;
  738. background: #fff;
  739. position: fixed; left: 0; top: 0;
  740. width: 100%; height: 100%;
  741. opacity: 0;
  742. z-index: 9999;
  743. }
  744. .popup_block{
  745. display: none;
  746. background: #eaeaea;
  747. padding: 20px;
  748. border-left: 1px dotted #ffdcf6;
  749. border-top: 1px dotted #ffdcf6;
  750. border-radius: 50px 0px 0px 0px;
  751. float: left;
  752. font-size: 12px;
  753. position: fixed;
  754. top: 52.5%;
  755. left: 58%;
  756. height: 500px;
  757. z-index: 99999;
  758. font-family: "Gasara";
  759. font-size: 8px;
  760. color: #000000;
  761. line-height: 10px;
  762. overflow-y: auto;
  763. text-align: justify;
  764. }
  765.  
  766. .popup_block img {
  767. margin-top: -20px;
  768. }
  769. img.btn_close {
  770. opacity: 0;
  771. float: right;
  772. margin: -5px -5px 0 0;
  773. }
  774.  
  775. *html #fade {
  776. position: absolute;
  777. }
  778. *html .popup_block {
  779. position: absolute;
  780. }
  781.  
  782. .poptit {
  783. font-family: "Darleston";
  784. font-size: 50px;
  785. color: #ffdcf6;
  786. line-height: 55px;
  787. letter-spacing: 1px;
  788. text-align: center;
  789. }
  790.  
  791. .poplink {
  792. margin-top: 5px;
  793. height: 280px;
  794. width: 260px;
  795. overflow-y: auto;
  796. font-family: "Gasara";
  797. font-size: 8px;
  798. line-height: 12px;
  799. color: #ffdcf6;
  800. text-align: center;
  801. }
  802.  
  803. .poplink a {
  804. background-color: #f4efed;
  805. padding: 7px 2px 2px 2px;
  806. height: 15px;
  807. width: 115px;
  808. margin-left: 5px;
  809. margin-right: 5px;
  810. margin-bottom: 5px;
  811. display: inline-block;
  812. color: #ffdcf6;
  813. }
  814.  
  815. .popfrnd {
  816. display: inline-block;
  817. text-align: center;
  818. }
  819.  
  820. .popfrnd img {
  821. height: 76px;
  822. width: 76px;
  823. margin-right: 5px;
  824. border-radius: 50%;
  825. border: 5px solid #ffffff;
  826. }
  827.  
  828. #hd {
  829. position: fixed;
  830. left: 10px;
  831. bottom: 10px;
  832. opacity: 1;
  833. -moz-transition:all 0.5s ease-in-out;
  834. -webkit-transition:all 0.5s ease-in-out;
  835. -o-transition:all 0.5s ease-in-out;
  836. transition:all 0.5s ease-in-out;
  837. }
  838.  
  839. #hd img {
  840. height: 70px;
  841. width: 70px;
  842. }
  843.  
  844. #hd:hover {
  845. transform: rotate(360deg);
  846. opacity: 0;
  847. -moz-transition:all 0.5s ease-in-out;
  848. -webkit-transition:all 0.5s ease-in-out;
  849. -o-transition:all 0.5s ease-in-out;
  850. transition:all 0.5s ease-in-out;
  851. }
  852. </style>
  853. <script type="text/javascript"
  854. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  855. <script>
  856. $(document).ready(function() {
  857. //
  858. $('a.poplight[href^=#]').click(function() {
  859. var popID = $(this).attr('rel'); //Get Popup Name
  860. var popURL = $(this).attr('href'); //Get Popup href to define size
  861. var query= popURL.split('?');
  862. var dim= query[1].split('&');
  863. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  864. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tooltip-CloseButton.png" class="btn_close" title="escape" alt="escape" /></a>');
  865. var popMargTop = ($('#' + popID).height() + 80) / 2;
  866. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  867. //Apply Margin to Popup
  868. $('#' + popID).css({
  869. 'margin-top' : -popMargTop,
  870. 'margin-left' : -popMargLeft
  871. });
  872. $('body').append('<div id="fade"></div>');
  873. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  874. return false;
  875. });
  876. $('a.close, #fade').live('click', function() {
  877. $('#fade , .popup_block').fadeOut(function() {
  878. $('#fade, a.close').remove(); //fade them both out
  879. });
  880. return false;
  881. });
  882. });
  883. </script>
  884. </head>
  885. <body>
  886.  
  887. <div id="sosh" class="popup_block">
  888. <img src="http://i.imgur.com/zN3DXgx.png" /><br />
  889. Girls' Generation officially debuted on August 5, 2007 with its debut single <a href="/tagged/- ; era:itnw .">Into the new world</a> and subsequently gained some attention with their self-titled debut album. However, it was not until 2009 that they rose to prominence with the single <a href="/tagged/- ; era:gee ."></a>, which claimed the top spot on KBS's Music Bank for a record-breaking nine consecutive weeks and was named the most popular song of the 2000s decade by Melon. The group solidified their place in the South Korean music industry with follow-up singles <a href="/tagged/- ; era:genie .">Tell Me Your Wish (Genie)</a>, <a href="/tagged/- ; era:oh! .">Oh!</a>, and <a href="/tagged/- ; era:rdr .">Run Devil Run</a> from late 2009 to early 2010.
  890. <div class="poptit">Discography</div>
  891. <div class="poplink">
  892. <a href="/tagged/- ; era:itnw .">Into The New World</a><a href="/tagged/- ; era:gg .">Girls' Generation</a><br />
  893. <a href="/tagged/- ; era:kissingu .">Kissing You</a><a href="/tagged/- ; era:gee .">Gee</a><br />
  894. <a href="/tagged/- ; era:genie .">Tell me your wish (genie)</a><a href="/tagged/- ; era:oh! .">Oh!</a><br />
  895. <a href="/tagged/- ; era:rdr .">Run Devil Run</a><a href="/tagged/- ; era:hoot .">Hoot</a><br />
  896. <a href="/tagged/- ; era:boys .">The Boys</a><a href="/tagged/- ; era:mrtaxi .">Mr. Taxi</a><br />
  897. <a href="/tagged/- ; era:igab .">I Got A Boy</a><a href="/tagged/- ; era:mrmr .">Mr.Mr.</a><br />
  898. <a href="/tagged/- ; era:cmiyc .">Catch Me If You Can</a><a href="/tagged/- ; era:party .">Party</a><br />
  899. <a href="/tagged/- ; era:lionheart .">Lionheart</a><a href="/tagged/- ; era:deoksugung .">Deoksugung Walkway</a><br />
  900. <!--<a href="/tagged/- ; era: ."></a><a href="/tagged/- ; era: ."></a><br /> -->
  901. </div>
  902. <div class="poptit">Members</div><br />
  903. <div class="popfrnd">
  904. <a href="/tagged/- ; taeyeon ."><img src="http://i.imgur.com/NvVGfAN.gif" /></a>
  905. <a href="/tagged/- ; jessica ."><img src="http://i.imgur.com/rrEVdxl.gif" /></a>
  906. <a href="/tagged/- ; sunny ."><img src="http://i.imgur.com/GgdV2xI.gif" /></a><br />
  907. <a href="/tagged/- ; tiffany ."><img src="http://i.imgur.com/t78du3M.gif" /></a>
  908. <a href="/tagged/- ; hyoyeon ."><img src="http://i.imgur.com/ubVi8Sr.gif" /></a>
  909. <a href="/tagged/- ; yuri ."><img src="http://i.imgur.com/BY52GN9.gif" /></a><br />
  910. <a href="/tagged/- ; sooyoung ."><img src="http://i.imgur.com/BdexzTV.gif" /></a>
  911. <a href="/tagged/- ; seohyun ."><img src="http://i.imgur.com/N2xk0eZ.gif" /></a>
  912. </div>
  913. </div>
  914. <div id="boyf" class="popup_block">
  915. this is the popup
  916. </div>
  917.  
  918.  
  919. <!-- SIDEBAR START -->
  920. <div id="sidebarcont">
  921. <div class="yoona"><img src="http://i.imgur.com/8ChwuwT.png" /></div>
  922. <div class="soshi">
  923. <a href="#?w=250" rel="sosh" class="poplight" title="Years later, still together."><img src="http://i.imgur.com/gerV6mG.gif" /></a>
  924. </div>
  925. <div class="circle1">
  926. <img src="http://i.imgur.com/NZTStev.gif" />
  927. </div>
  928.  
  929. <div class="title">Love of rain,</div>
  930. <div class="description">this is the descr</div>
  931. <div class="links">
  932. <a href="" title=""><div class="link"></div></a>
  933. <a href="" title=""><div class="link"></div></a>
  934. <a href="" title=""><div class="link"></div></a>
  935. <a href="" title=""><div class="link"></div></a>
  936. <a href="" title=""><div class="link"></div></a>
  937. </div>
  938. <div class="circle2">
  939. <img src="http://i.imgur.com/wwUPOlZ.gif" />
  940. </div>
  941. <div class="bf">
  942. <a href="#?w=250" rel="boyf" class="poplight" title="Waiting, always waiting."><img src="http://i.imgur.com/fWti0vP.gif" /></a>
  943. </div>
  944. </div>
  945.  
  946. <!-- SIDEBAR END -->
  947.  
  948. <!-- POST START -->
  949. <div id="wrapper">
  950. <div class="alignment">
  951. <div class="autopagerize_page_element" >
  952.  
  953. {block:Posts}
  954. <div class="posts">
  955.  
  956. {block:ContentSource}
  957. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  958. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  959. {/block:SourceLogo}
  960. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  961.  
  962. <!-- {ReblogParentURL}{block:ReblogParentLogo}<img src="{BlackLogoURL}"
  963. width="{LogoWidth}" height="{LogoHeight}" alt="{ReblogParentTitle}" />
  964. {/block:ReblogParentLogo}
  965. {block:NoReblogParentLogo}{ReblogParentLink}{/block:NoReblogParentLogo} -->
  966. {/block:ContentSource}
  967.  
  968.  
  969. <!-- PHOTO POSTS -->
  970.  
  971. {block:Photo}
  972. {LinkOpenTag}
  973. <div class="photopost">
  974. <img src="{PhotoURL-250}">
  975. </div>
  976. {LinkCloseTag}
  977. {block:ifShowCaptions}
  978. {block:Caption}
  979. {Caption}
  980. {/block:Caption}
  981. {/block:ifShowCaptions}
  982. {/block:photo}
  983.  
  984.  
  985.  
  986.  
  987. <!-- PHOTOSET POSTS -->
  988.  
  989. {block:Photoset}
  990. <div id="photoset">
  991. {Photoset-250}
  992. </div>
  993. {block:ifShowCaptions}
  994. {block:Caption}
  995. {Caption}
  996. {/block:Caption}
  997. {/block:ifShowCaptions}
  998. {/block:Photoset}
  999.  
  1000.  
  1001. <!-- VIDEO POSTS -->
  1002. <div class="video">
  1003.  
  1004. {block:Video}
  1005. {Video-250}
  1006. {block:ifShowCaptions}
  1007. {block:Caption}
  1008. {Caption}
  1009. {/block:Caption}
  1010. {/block:ifShowCaptions}
  1011. {/block:Video}
  1012. </div>
  1013.  
  1014. <!-- AUDIO POSTS -->
  1015. {block:Audio}<div class="album">{block:AudioPlayer}<div class="player">{AudioPlayerWhite}</div>{/block:AudioPlayer}
  1016.  
  1017. {block:AlbumArt}{block:IndexPage}<img src="{AlbumArtURL}">{/block:IndexPage}{block:PermalinkPage}<img src="{AlbumArtURL}">{/block:PermalinkPage}{/block:AlbumArt}</div>
  1018.  
  1019. <div class="track">{block:TrackName}Title: {TrackName}<br>{/block:TrackName}{block:Artist}Artist: {Artist}<br>{/block:Artist}{block:Album}Album:
  1020. {Album}{/block:Album}</div>
  1021.  
  1022. {block:ifShowCaptions}{block:Indexpage}{block:Caption}{Caption}{/block:Caption}{/block:Indexpage}{/block:ifShowCaptions}
  1023.  
  1024. {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  1025. {/block:Audio}
  1026.  
  1027.  
  1028. <!-- QUOTE POSTS -->
  1029. {block:Quote}
  1030. <div id="quote">{Quote}</div>
  1031. {block:Source}<div id="source">— {Source}</div>{/block:Source}
  1032. {/block:Quote}
  1033.  
  1034.  
  1035. <!-- TEXT POSTS -->
  1036. {block:Text}
  1037. {block:Title}
  1038. <div id="posttitle">{Title}</div>
  1039. {/block:Title}
  1040. {Body}
  1041. {/block:Text}
  1042.  
  1043.  
  1044. <!-- QUESTION POSTS -->
  1045. {block:Answer}
  1046. <div id="ask">
  1047. <div class="as">
  1048. <div class="aske">{Asker}</div>
  1049. <div class="que">{Question}</div>
  1050. </div>
  1051. </div>
  1052. <div class="ans">{Answer}</div>
  1053. {/block:Answer}
  1054.  
  1055. <!-- CHAT POSTS -->
  1056. {block:Chat}
  1057. {block:Title}
  1058. <div id="posttitle">{Title}</div><br />
  1059. {/block:Title}
  1060. {block:Lines}<div id="{Alt}">
  1061. {block:Label}<b>{Label}</b>{/block:Label} {Line}</br></div>
  1062. {/block:Lines}
  1063. {/block:Lines}
  1064. {/block:Chat}
  1065.  
  1066. <!-- LINK POSTS -->
  1067. {block:Link}
  1068. <a href="{URL}"> <div id="posttitle">{Name}</div></a>
  1069. {block:Description}
  1070. {Description}
  1071. {/block:Description}
  1072. {/block:Link}
  1073. </div>
  1074.  
  1075. {block:IndexPage}
  1076. <div class="postperma">
  1077. {block:Date}Posted <a href="{Permalink}">{TimeAgo}{/block:Date}</a> with
  1078. {NoteCountWithLabel}<br> {block:ifShowTags}{block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}{/block:ifShowTags}</div>
  1079. {/block:IndexPage}
  1080.  
  1081. {block:PermaLinkPage}
  1082. <div class="postinfo">
  1083. <center>
  1084. <div id="permtitle">Posted on: {Month} {DayofMonth}, {Year}<br> {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</div>
  1085. {block:RebloggedFrom}
  1086. <div id="tags">Via:
  1087. <a href="{ReblogParentURL}">{ReblogParentName}</a> ||
  1088. Source: <a href="{ReblogRootURL}">{ReblogRootName}</a></div>
  1089. {/block:RebloggedFrom}
  1090. </center>
  1091. <br>
  1092. {block:HasTags}
  1093. <div id="tags">{block:Tags}#<a href="{TagURL}">{Tag}</a> &nbsp; {/block:Tags} </div>
  1094. {/block:HasTags}
  1095. </div>
  1096.  
  1097. {block:PostNotes}<div class="postnotes"><div style="margin-left: -20px;">{PostNotes}</div></div>{/block:PostNotes}
  1098. {/block:PermalinkPage}
  1099.  
  1100. {/block:Posts}
  1101.  
  1102. </div>
  1103. </div>
  1104. </div>
  1105. </div>
  1106. <!-- POST END -->
  1107. <div id="hd"><a href="http://hd-rp.tumblr.com/"><img src="http://41.media.tumblr.com/c925eaddb813048766091ee4e6156005/tumblr_o3c0jauIQ71v9f9aio2_250.png" /></a></div>
  1108. </body>
  1109. </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!