Advertisement
xariaaaa

[THEME] ʟᴜɴᴀʀ ᴘʀɪɴᴄᴇss

Apr 28th, 2016
148
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.56 KB | None | 0 0
  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. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!-- ʙᴀsᴇ ʙʏ ᴇɴᴛᴇʀᴘʀɪᴢᴇʀ. ᴛʜᴇᴍᴇ ʙʏ ᴀʀɪᴀsʀᴘʜ ᴘʟᴇᴀsᴇ ᴅᴏ ɴᴏᴛ sᴛᴇᴀʟ ɪᴛ! ᴇᴅɪᴛɪɴɢ ɪs ᴀʟᴏᴡᴇᴅ, ʙᴜᴛ ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛɪɴɢ ɪɴᴛᴀᴄᴛ. -->
  9.  
  10. <style type="text/css">
  11.  
  12. /* GASARA */
  13. @font-face { font-family: "gasara"; src: url('https://dl.dropbox.com/s/9mird7ef2oyhzbc/gasara.ttf'); }
  14.  
  15. /* BEBAS NEUE */
  16. @font-face { font-family: "bebas neue"; src: url('https://dl.dropboxusercontent.com/u/67800931/bebasneue.otf'); }
  17.  
  18. /* SIGNARITA */
  19. @font-face{ font-family:"signarita"; src: url('https://dl.dropboxusercontent.com/s/gc29howy3wio7t8/signarita%20zhai%20rhianne.ttf?dl=1');}
  20.  
  21. ::selection {
  22. background:transparent;
  23. color:#000000;
  24. text-shadow: 0px 0px 1px #d4c6ff;
  25. }
  26.  
  27. ::-moz-selection {
  28. background:transparent;
  29. color:#dcdcdc;
  30. text-shadow: 0px 0px 1px #ffe7e7;
  31. }
  32.  
  33. ::-webkit-selection {
  34. background:transparent;
  35. color:#dcdcdc;
  36. text-shadow: 0px 0px 1px #ffe7e7;
  37. }
  38.  
  39. ::-webkit-scrollbar-thumb {
  40. background-color: #ffe7e7;
  41. border: 3px solid #f6f7fb;
  42. height:auto;
  43. border-bottom:none;
  44. }
  45.  
  46. ::-webkit-scrollbar {
  47. height:9px;
  48. width:9px;
  49. background-color: #ffe7e7;
  50. border:4px solid #f6f7fb;
  51. }
  52.  
  53. body {
  54. background: #f6f7fb;
  55. background-image: url(http://i.imgur.com/xBr93JC.png);
  56. background-repeat: no-repeat;
  57. background-attachment: fixed;
  58. background-position: bottom right;
  59. margin:0px;
  60. }
  61.  
  62. a {
  63. color: #ffd3d3;
  64. text-decoration:none;
  65. outline:none;
  66. -moz-outline-style:none;
  67. -moz-transition:all ease-in-out 0.7s;
  68. -webkit-transition:all ease-in-out 0.7s;
  69. -o-transition:all ease-in-out 0.7s;
  70. transition:all ease-in-out 0.7s;
  71. }
  72.  
  73. a:hover {
  74. color: #ffe7e7;
  75. -moz-transition:all ease-in-out 0.7s;
  76. -webkit-transition:all ease-in-out 0.7s;
  77. -o-transition:all ease-in-out 0.7s;
  78. transition:all ease-in-out 0.7s;
  79. }
  80.  
  81. img {
  82. max-width: 240px;
  83. height: auto;
  84. border:none;
  85. opacity: 0.3;
  86. -moz-transition:all ease-in-out 0.7s;
  87. -webkit-transition:all ease-in-out 0.7s;
  88. -o-transition:all ease-in-out 0.7s;
  89. transition:all ease-in-out 0.7s;
  90. }
  91.  
  92. img:hover {
  93. border:none;
  94. opacity: 0.9;
  95. -moz-transition:all ease-in-out 0.7s;
  96. -webkit-transition:all ease-in-out 0.7s;
  97. -o-transition:all ease-in-out 0.7s;
  98. transition:all ease-in-out 0.7s;
  99. }
  100.  
  101. blockquote {
  102. margin-left: 10px;
  103. padding-left: 5px;
  104. border-left: 1px solid #ffd3d3;
  105. }
  106.  
  107. blockquote blockquote {
  108. margin-left: 10px;
  109. padding-left: 5px;
  110. border-left: 1px solid #ffd3d3;
  111. }
  112.  
  113. blockquote img {
  114. max-width: 200px;
  115. height: auto;
  116. }
  117.  
  118. blockquote blockquote img {
  119. max-width: 150px;
  120. height: auto;
  121. }
  122.  
  123. h2 {
  124. font-family: "Bebas Neue";
  125. font-size: 25px;
  126. letter-spacing: 1px;
  127. color: #ffd3d3;
  128. }
  129.  
  130. pre, code {
  131. font-family: "Gasara";
  132. font-size: 8px;
  133. line-height: 10px;
  134. white-space:pre-wrap;
  135. word-wrap:break-word;
  136. text-align: justify;
  137. background-color: #efefef;
  138. padding: 5px;
  139. border: 1px solid #ffe7e7;
  140. }
  141.  
  142. /* POSTS */
  143.  
  144. #entries {
  145. width: 260px;
  146. height: 100%;
  147. float: left;
  148. margin-top: 20px;
  149. margin-left: 100px;
  150. }
  151.  
  152. #post {
  153. background-color: #ffffff;
  154. border: 1px solid #ffe7e7;
  155. width: 250px;
  156. padding: 10px;
  157. margin-bottom: 30px;
  158. font-family: "Calibri";
  159. font-size: 10px;
  160. color: #cdcdcd;
  161. text-align: justify;
  162. }
  163.  
  164. #post b, #post i {
  165. font-family: "Gasara";
  166. font-size: 8px;
  167. color: #ffd3d3;
  168. line-height: 10px;
  169. letter-spacing: 1px;
  170. font-weight: normal;
  171. text-transform: none;
  172. }
  173.  
  174. .posttitle {
  175. font-family: "Bebas Neue";
  176. font-size: 25px;
  177. color: #ffd3d3;
  178. line-height: 30px;
  179. text-align: justify;
  180. }
  181.  
  182.  
  183. .photopost img {
  184. width: 245px;
  185. height: auto;
  186. -moz-transition:all ease-in-out 0.7s;
  187. -webkit-transition:all ease-in-out 0.7s;
  188. -o-transition:all ease-in-out 0.7s;
  189. transition:all ease-in-out 0.7s;
  190. }
  191.  
  192. .photosetpost, .video {
  193. width: 250px;
  194. height: auto;
  195. opacity: 0.3;
  196. -moz-transition:all ease-in-out 0.7s;
  197. -webkit-transition:all ease-in-out 0.7s;
  198. -o-transition:all ease-in-out 0.7s;
  199. transition:all ease-in-out 0.7s;
  200. }
  201.  
  202. .photosetpost:hover, .video:hover {
  203. opacity: 0.9;
  204. -moz-transition:all ease-in-out 0.7s;
  205. -webkit-transition:all ease-in-out 0.7s;
  206. -o-transition:all ease-in-out 0.7s;
  207. transition:all ease-in-out 0.7s;
  208. }
  209.  
  210. .quote {
  211. font-family: "Bebas Neue";
  212. font-size: 30px;
  213. line-height: 35px;
  214. color: #ffd3d3;
  215. text-align: justify;
  216. letter-spacing: -1px;
  217. }
  218.  
  219. .source {
  220. font-family: "Gasara";
  221. font-size: 8px;
  222. color: #cdcdcd;
  223. text-align: right;
  224. }
  225.  
  226. .asker {
  227. font-size: 25px;
  228. font-family: "signarita";
  229. text-align: right;
  230. color: #ffd3d3;
  231. margin-bottom: -50px;
  232. margin-top: -25px;
  233. }
  234.  
  235. .question {
  236. font-family: "Gasara";
  237. font-size: 8px;
  238. line-height: 11px;
  239. }
  240. /* Audio */
  241. .audio {
  242. padding: 0;
  243. }
  244.  
  245. .audio_container {
  246. overflow: hidden;
  247. position: relative;
  248. width: 100px;
  249. }
  250.  
  251. .soundcloud_audio_player {
  252. width: 100%;
  253. }
  254.  
  255. .tumblr_audio_player {
  256. width: 100%;
  257. }
  258.  
  259. /* SIDEBAR */
  260.  
  261. #wrapper {
  262. position: fixed;
  263. float: left;
  264. left: 400px;
  265. bottom: 50px;
  266. width: 300px;
  267. height: 200px;
  268. }
  269.  
  270. .title {
  271. height: 50px;
  272. width: 230px;
  273. color: #ffd3d3;
  274. text-align: center;
  275. font-family: "Bebas Neue";
  276. font-size: 50px;
  277. letter-spacing: -3px;
  278. }
  279.  
  280. .friends {
  281. margin-top: -90px;
  282. margin-left: 205px;
  283. height: 50px;
  284. width: 50px;
  285. }
  286.  
  287. .friends img {
  288. opacity: 1 !important;
  289. }
  290.  
  291. .friends a:hover {
  292. letter-spacing: -3px !important;
  293. }
  294.  
  295. .desc {
  296. margin-top: 40px;
  297. height: auto;
  298. width: 260px;
  299. margin-left: 10px;
  300. font-family: "Calibri";
  301. font-size: 12px;
  302. color: #cdcdcd;
  303. line-height: 15px;
  304. text-align: justify;
  305. }
  306.  
  307. .linkwrap {
  308. width: 280px;
  309. height: 20px;
  310. margin-top: 0px;
  311. margin-left: 10px;
  312. display: inline-block;
  313. font-family: "Bebas Neue";
  314. color: #ffe3e3;
  315. font-size: 22px;
  316. letter-spacing: -1px;
  317. }
  318.  
  319. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  320.  
  321. /* fontawesome */
  322. [class*="fontawesome-"]:before {
  323. font-family: 'FontAwesome', sans-serif;
  324. }
  325.  
  326. .melody {
  327. overflow: hidden;
  328. position:absolute;
  329. height: 20px;
  330. width: 20px;
  331. top: 95px;
  332. left: 235px;
  333. }
  334.  
  335. .reverberate {
  336. position:absolute;
  337. height: 14px;
  338. width: 14px;
  339. margin-top: 0px;
  340. margin-left: 0px;
  341. padding: 18px;
  342. font-size: 13px;
  343. font-style: normal;
  344. color: #000;
  345. -webkit-transition: opacity .7s linear;
  346. -webkit-transition: all .7s ease-in-out;
  347. -moz-transition: all .7s ease-in-out;
  348. -o-transition: all .7s ease-in-out;
  349. }
  350.  
  351. .melody:hover .reverberate {
  352. margin-top: -50px;
  353. }
  354.  
  355. .harmony {
  356. overflow: hidden;
  357. position:absolute;
  358. height: 50px;
  359. width: 20px;
  360. margin-top: 50px;
  361. margin-left: 15px;
  362. -webkit-transition: opacity .7s linear;
  363. -webkit-transition: all .7s ease-in-out;
  364. -moz-transition: all .7s ease-in-out;
  365. -o-transition: all .7s ease-in-out;
  366. }
  367.  
  368. .melody:hover .harmony {
  369. margin-top: 5px;
  370. }
  371.  
  372. .rhythm {
  373. position:absolute;
  374. height: 20px;
  375. width: 20px;
  376. margin-top: 0px;
  377. margin-left: 0px;
  378. }
  379.  
  380. #info {
  381. font-family: "gasara";
  382. font-size: 8px;
  383. text-align: center;
  384. }
  385.  
  386. /* POP UP */
  387.  
  388. *html #fade {
  389. position: absolute;
  390. }
  391. #fade {
  392. display: none;
  393. background: #ffffff;
  394. position: fixed;
  395. left: 0;
  396. top: 0;
  397. width: 100%;
  398. height: 100%;
  399. opacity: 0;
  400. z-index: 9999;
  401. }
  402.  
  403. *html .popup_block {
  404. position: absolute;
  405. }
  406.  
  407. .popup_block{
  408. background-color: #ffffff;
  409. background-image: url('http://i.imgur.com/gdcGlV8.png');
  410. background-attachment: fixed;
  411. background-position: bottom right;
  412. background-repeat: no-repeat;
  413. display: none;
  414. position: fixed;
  415. float: left;
  416. left: 275px;
  417. top: 55%;
  418. height: 100%;
  419. padding: 5px;
  420. z-index: 9999999999;
  421. overflow-y: auto;
  422. text-align: center;
  423. font-size: 10px;
  424. font-family: "Calibri";
  425. color: #cdcdcd;
  426. border: 1px solid #ffd3d3;
  427. }
  428.  
  429. .popup_block a {
  430. font-size: 13px;
  431. color: #ffd3d3;
  432. }
  433.  
  434. .popup_block img {
  435. opacity: 1 !important;
  436. }
  437.  
  438. .popuptit {
  439. font-family: "Bebas Neue";
  440. font-size: 30px;
  441. text-align: center;
  442. color: #ffdd3d3;
  443. }
  444.  
  445. .data {
  446. font-family: "Gasara";
  447. font-size: 10px;
  448. text-align: right;
  449. }
  450.  
  451. /* Hover Title Style */
  452.  
  453. #s-m-t-tooltip{
  454. max-width:250px;
  455. margin-top:15px;
  456. margin-left: 15px;
  457. padding-left: 4px;
  458. padding-right: 4px;
  459. z-index: 9999999;
  460. background-color: #ffffff;
  461. color: black;
  462. font-family: "gasara";
  463. font-size:8px;
  464. letter-spacing:0px;
  465. text-transform:uppercase;
  466. text-align:center;
  467. line-height: 14px;
  468. border-left: 3px solid #ffd3d3;
  469. box-shadow:1px 1px 3px rgba(0,0,0,.1);
  470. }
  471. </style>
  472.  
  473. <!-- POP UP SCRIPT -->
  474. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  475. <script>
  476. $(document).ready(function() {
  477.  
  478. $('a.poplight[href^=#]').click(function() {
  479. var popID = $(this).attr('rel');
  480. var popURL = $(this).attr('href');
  481. var query= popURL.split('?');
  482. var dim= query[1].split('&');
  483. var popWidth = dim[0].split('=')[1];
  484. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  485. var popMargTop = ($('#' + popID).height() + 80) / 2;
  486. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  487.  
  488. $('#' + popID).css({
  489. 'margin-top' : -popMargTop,
  490. 'margin-left' : -popMargLeft
  491. });
  492. $('body').append('<div id="fade"></div>');
  493. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
  494. return false;
  495. });
  496. $('a.close, #fade').live('click', function() {
  497. $('#fade , .popup_block').fadeOut(function() {
  498. $('#fade, a.close').remove();
  499. });
  500. return false;
  501. });
  502. });
  503. </script>
  504.  
  505.  
  506. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  507. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  508. <script>
  509. (function($){
  510. $(document).ready(function(){
  511. $("[title],a[title],img[title]").style_my_tooltips({
  512. tip_follows_cursor:true,
  513. tip_delay_time:100,
  514. tip_fade_speed:300,
  515. attribute:"title"
  516. });
  517. });
  518. })(jQuery);
  519. </script>
  520.  
  521. </head>
  522. <body>
  523.  
  524. <div id="inbox" class="popup_block">
  525. <div class="popuptit">INBOX !!</div>
  526. <iframe frameborder="0" scrolling="no" width="100%" height="300" src="https://www.tumblr.com/ask_form/advchoa.tumblr.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]-->
  527. <br />
  528. </div>
  529.  
  530. <div id="submit" class="popup_block">
  531. <div class="popuptit">SUBMIT !!</div>
  532. <iframe frameborder="0" scrolling="no" width="100%" height="400" src="https://www.tumblr.com/submit_form/advchoa.tumblr.com" style="background-color:transparent; overflow:hidden;" id="submit_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  533. <br />
  534. </div>
  535.  
  536. <div id="profile" class="popup_block">
  537. <div class="popuptit">PROFILE !!</div>
  538. <img src="http://i.imgur.com/W33eLh8.gif" />
  539. <div class="data">
  540. FILE #038620162
  541. SUBJECT #086258
  542. </div>
  543. <b>NAME</b>: Park Cho Ah<br />
  544. <b>AGE</b>: Twenty Two (22)<br />
  545. <b>OCCUPATION</b>: Unknown<br />
  546. <b>HEIGHT</b>: 163CM<br />
  547. <b>WEIGHT</b>: Unknown<br />
  548. <a href="/dulcis/sweet">MORE</a>
  549. </div>
  550.  
  551. <div id="powers" class="popup_block">
  552. <div class="popuptit">POWERS !!</div>
  553. <img src="http://i.imgur.com/uCqE68R.gif" />
  554. <div class="data">
  555. FILE #038620162
  556. SUBJECT #086258
  557. </div>
  558. <b>NAME</b>: Park Lun Ah<br />
  559. <b>ABILITIES</b>: Light Manipulation<br />
  560. <b>STRENGHTS</b>: <br />
  561. <b>WEAKNESSES</b>: <br />
  562. <a href="/dulcis/sour">MORE</a>
  563. </div>
  564.  
  565. <div id="links" class="popup_block">
  566. <div class="popuptit">LINKS !!</div>
  567. </div>
  568.  
  569. <div id="wrapper">
  570. <div class="title"><a href="/">pastel pink lips</a></div>
  571. <div class="friends"><a href=""><img src="http://i.imgur.com/vOZi3sb.gif" /></a></div>
  572. <div class="desc">
  573. My light is frowned upon, though it’s no different from normal light. It can cure and cause wounds, it can bring happiness or sorows. Am I a monster?
  574. </div>
  575. <div class="linkwrap">
  576. <a href="#?w=300" rel="inbox" class="poplight">INBOX</a> !!
  577. <a href="#?w=300" rel="submit" class="poplight">SUBMIT</a> !!
  578. <a href="#?w=300" rel="profile" class="poplight">PROFILE</a> !!
  579. <a href="#?w=300" rel="powers" class="poplight">POWERS</a> !!
  580. </div>
  581.  
  582. <div class="melody">
  583. <div class="reverberate">
  584. <span class="fontawesome-music"></span>
  585. </div><!--reverberate-->
  586. <div class="harmony">
  587. <div class="rhythm">
  588. <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/8w4lvb80aw/Excessive_Love_Jessi_Solo_.mp3&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
  589. </div><!--rhythm-->
  590. </div><!--harmony-->
  591. </div><!--melody-->
  592. </div>
  593.  
  594. <div id="entries">
  595. {block:Posts}
  596. <div id="post">
  597.  
  598. <!-- TEXT POSTS -->
  599. {block:Text}
  600. <div class="posttitle">{block:Title}{Title}{/block:Title}</div>
  601. {Body}
  602. {/block:Text}
  603.  
  604. <!-- PHOTO POSTS -->
  605. {block:Photo}
  606. <div class="photopost">{LinkOpenTag}<img src="{PhotoURL-250}">{LinkCloseTag}
  607. {block:Caption}{Caption}{/block:Caption}</div>
  608. {/block:Photo}
  609.  
  610. <!-- PHOTOSET POSTS -->
  611. {block:Photoset}
  612. <div class="photosetpost">{Photoset-250} {block:Caption}{Caption}{/block:Caption}</div>
  613. {/block:Photoset}
  614.  
  615. <!-- QUOTE POSTS -->
  616. {block:Quote}
  617. <div class="quote">{Quote}</div>
  618. <div class="source">{block:Source} —{Source}{/block:Source}</div>
  619. {/block:Quote}
  620.  
  621. <!-- LINK POSTS -->
  622. {block:Link}
  623. <div class="posttitle">a href="{URL}" {Target}>{Name}</a></div>
  624. {block:Description}{Description}{/block:Description}
  625. {/block:Link}
  626.  
  627. <!-- CHAT POSTS -->
  628. {block:Chat}
  629. <div class="posttile">{block:Title}{Title}{/block:Title}</div>
  630. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  631. {/block:Chat}
  632.  
  633.  
  634. <!-- ASK POST -->
  635. {block:Answer}
  636. <div class="asker">{Asker}</div>
  637. <div class="question">{Question}</div>
  638. {Answer}
  639. {/block:Answer}
  640.  
  641. <!-- AUDIO POST -->
  642. {block:Audio}
  643. <div class="audioContainer">
  644. {block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}
  645. </div>
  646. {block:Caption}{Caption}{/block:Caption}
  647. {/block:Audio}
  648.  
  649. <!-- VIDEO POST -->
  650. {block:Video}
  651. <div class="video">{Video-250}</div>
  652. {block:Caption}{Caption}{/block:Caption}
  653. {/block:Video}
  654.  
  655. <!-- POST PERMA -->
  656. <div id="info">
  657. {block:Date}{TimeAgo}{/block:Date} // <a href="{Permalink}">
  658. {NoteCountWithLabel}</a><br />
  659. {block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  660. </div>
  661.  
  662. {block:PostNotes}{PostNotes}{/block:PostNotes}
  663. {/block:Posts}
  664. </div>
  665.  
  666. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement