API tools faq
paste
Advertisement
xariaaaa

[THEME] ᴍɪʟᴇᴀɢᴇ

xariaaaa
Jun 21st, 2016
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.94 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. <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. /* GASARA */
  12. @font-face { font-family: "gasara"; src: url('https://dl.dropbox.com/s/9mird7ef2oyhzbc/gasara.ttf'); }
  13.  
  14. /* ASPEX */
  15. @font-face { font-family: "aspex"; src: url('https:/dl.dropboxusercontent.com/s/yeeehszy65j0cfk/ASPEX_0.TTF') }
  16.  
  17. *, body, a {cursor: url(http://31.media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;}
  18.  
  19. a:hover {cursor: url(http://i.imgur.com/IepP2.jpg), auto;}
  20.  
  21.  
  22. ::-webkit-scrollbar-thumb {
  23. height: auto;
  24. background-color: #aa806a;
  25. }
  26.  
  27. ::-webkit-scrollbar {
  28. height:9px;
  29. width:4px;
  30. background-color: #b9bbc2;
  31. }
  32.  
  33. body {
  34. background: #b9bbc2;
  35. background-image: url('http://i.imgur.com/SSumt6I.png');
  36. background-attachment: fixed;
  37. background-repeat: no-repeat;
  38. background-position: bottom right;
  39. }
  40.  
  41. a {
  42. text-decoration:none;
  43. outline:none;
  44. -moz-outline-style:none;
  45. color: #aa806a;
  46. }
  47.  
  48. img {
  49. border:none;
  50. }
  51.  
  52. blockquote, blockquote blockqute, .answer img {
  53. border-left: 1px solid #aa806a;
  54. padding-left:5px;
  55. margin-left: 5px;
  56. }
  57.  
  58. blockquote img, blockqute blockquote img {
  59. opacity: 0.3;
  60. -webkit-filter: grayscale(100%);
  61. -webkit-transition: opacity 0.7s linear;
  62. -webkit-transition: all 0.7s ease-out;
  63. -moz-transition: all 0.7s ease-out;
  64. transition: all 0.7s ease-out;
  65. }
  66.  
  67. blockquote img:hover, blockqute blockquote img:hover, .answer img:hover, #post img {
  68. opacity: 0.8;
  69. -webkit-filter: grayscale(30%);
  70. -webkit-transition: opacity 0.7s linear;
  71. -webkit-transition: all 0.7s ease-out;
  72. -moz-transition: all 0.7s ease-out;
  73. transition: all 0.7s ease-out;
  74. }
  75.  
  76. blockquote img {
  77. max-width: 240px;
  78. height: auto;
  79. }
  80.  
  81. blockquote blockquote img {
  82. max-width: 180px;
  83. height: auto;
  84. }
  85.  
  86. h1, h2, h3 {
  87. font-family: "Aspex";
  88. font-size: 20px;
  89. color: #aa806a;
  90. font-weight: 500;
  91. text-transform: uppercase;
  92. letter-spacing: 1px;
  93. line-height: 28px;
  94. text-align: justify;
  95. }
  96.  
  97. pre, code {
  98. font-family: "Gasara";
  99. font-size: 8px;
  100. line-height: 12px;
  101. letter-spacing: 1px;
  102. text-align: center;
  103. background-color: #b9bbc2;
  104. padding: 10px;
  105. white-space:pre-wrap;
  106. word-wrap:break-word;
  107. }
  108.  
  109.  
  110. /* ENTRIES */
  111. #entries {
  112. width: 260px;
  113. height: 100%;
  114. float: left;
  115. margin-top: -20px;
  116. margin-left: 50px;
  117. padding: 20px;
  118. background-color: #b4abaf;
  119. border: 10px double #b9bbc2;
  120. }
  121.  
  122. #post {
  123. width: 250px;
  124. margin-top: 35px;
  125. font-family: "Calibri";
  126. font-size: 10px;
  127. color: #010101;
  128. text-align: justify;
  129. }
  130.  
  131. #post b {
  132. font-family: "Aspex";
  133. font-size: 12px;
  134. letter-spacing: -1px;
  135. }
  136.  
  137. #post i {
  138. font-family: "Gasara";
  139. font-size: 8px;
  140. letter-spacing: 1px;
  141. }
  142.  
  143. .posttitle {
  144. font-family: "Aspex";
  145. font-size: 23px;
  146. letter-spacing: -2px;
  147. line-height: 36px;
  148. color: #010101;
  149. font-weight: 300;
  150. text-transform: uppercase;
  151. }
  152.  
  153. .photopost img, .photosetimg {
  154. opacity: 0.3;
  155. -webkit-filter: grayscale(100%);
  156. -webkit-transition: opacity 0.7s linear;
  157. -webkit-transition: all 0.7s ease-out;
  158. -moz-transition: all 0.7s ease-out;
  159. transition: all 0.7s ease-out;
  160. }
  161.  
  162. .photopost img:hover, .photosetimg:hover {
  163. opacity: 0.8;
  164. -webkit-filter: grayscale(30%);
  165. -webkit-transition: opacity 0.7s linear;
  166. -webkit-transition: all 0.7s ease-out;
  167. -moz-transition: all 0.7s ease-out;
  168. transition: all 0.7s ease-out;
  169. }
  170.  
  171. .quote {
  172. font-family: "Aspex";
  173. font-size: 30px;
  174. line-height: 35px;
  175. text-align: justify;
  176. }
  177.  
  178. .source {
  179. font-family: "Gasara";
  180. font-size: 8px;
  181. text-align: right;
  182. }
  183.  
  184. .chatpost b {
  185. text-transform: uppercase;
  186. font-size: 8px !important;
  187. letter-spacing: 1px !important;
  188. }
  189.  
  190. .asker {
  191. text-transform: uppercase;
  192. font-family: "Aspex";
  193. font-size: 15px;
  194. text-align: center;
  195. border-bottom: 1px dotted #b9bbc2;
  196. }
  197.  
  198. .question {
  199. font-size: 8px;
  200. font-family: "Calibri";
  201. text-transform: uppercase;
  202. text-align: justify;
  203. background-color: #b9bbc2;
  204. padding: 10px;
  205. }
  206.  
  207.  
  208. /* Audio */
  209. .audioplayer {
  210. width: 27px;
  211. height: 27px;
  212. padding-bottom: 3px;
  213. z-index: 99999;
  214. left: 0px;
  215. top: 0px;
  216. }
  217.  
  218. .soundcloud_audio_player {
  219. width: 100%;
  220. }
  221.  
  222. .tumblr_audio_player {
  223. width: 100%;
  224. }
  225.  
  226. #postperma {
  227. margin-top: 5px;
  228. margin-bottom: 10px;
  229. margin-left:10px;
  230. width: 240px;
  231. color: #b9bbc2;
  232. padding: 5px;
  233. text-align: center;
  234. }
  235.  
  236. .pperma {
  237. margin-right: 30px;
  238. display: inline-block;
  239. height: 7px;
  240. width: 7px;
  241. padding: 3px;
  242. background-color: #aa806a;
  243. -webkit-transition: opacity 0.5s linear;
  244. -webkit-transition: all 0.5s ease-out;
  245. -moz-transition: all 0.5s ease-out;
  246. transition: all 0.5s ease-out;
  247. }
  248.  
  249. .pperma:hover {
  250. border-radius: 50%;
  251. -webkit-transition: opacity 0.5s linear;
  252. -webkit-transition: all 0.5s ease-out;
  253. -moz-transition: all 0.5s ease-out;
  254. transition: all 0.5s ease-out;
  255. }
  256.  
  257. #pageperma {
  258. margin-top: 20px;
  259. width: 250px;
  260. }
  261.  
  262. .permatitle {
  263. font-family: "Aspex";
  264. font-size: 10px;
  265. text-align: center;
  266. }
  267.  
  268. .permatitle:first-letter {
  269. font-size: 13px;
  270. }
  271.  
  272. .permatags {
  273. font-family: "Gasara";
  274. font-size: 8px;
  275. text-align: justify;
  276. }
  277.  
  278. .postnotes {
  279. font-family: "Gasara";
  280. font-size :8px;
  281. text-align: justify;
  282. line-height: 12px;
  283. }
  284.  
  285. .postnotes img {
  286. display: none;
  287. }
  288.  
  289. /* SIDEBAR */
  290. #sidewrap {
  291. height: 300px;
  292. width: 300px;
  293. position: fixed;
  294. float: left;
  295. left: 400px;
  296. bottom: 20px;
  297. }
  298.  
  299. .sideimg {
  300. height: 300px;
  301. width: 120px;
  302. margin-left: 0px;
  303. margin-top: 0px;
  304. background-color: #b4abaf;
  305. padding: 3px;
  306. }
  307.  
  308. .sideimg img {
  309. height: 300px;
  310. width: 120px;
  311. }
  312.  
  313. .sidetitle {
  314. font-family: "Aspex";
  315. font-size: 30px;
  316. color: #b4abaf;
  317. text-shadow: 1px 1px 2px #b4abaf;
  318. width: 280px;
  319. text-align: justify;
  320. height: 32px;
  321. margin-top: -290px;
  322. margin-left: 130px;
  323. }
  324.  
  325. .sidedesc {
  326. width: 160px;
  327. height: auto;
  328. margin-top: 0px;
  329. margin-left: 130px;
  330. font-family: "Calibri";
  331. color: #010101;
  332. text-transform: uppercase;
  333. font-size: 10px;
  334. text-align: justify;
  335. border: 3px solid #b4abaf;
  336. padding: 5px;
  337. }
  338.  
  339. .sidedesc img {
  340. height: 12px;
  341. width: auto;
  342. }
  343.  
  344. .sidelink {
  345. margin-left: 140px;
  346. margin-top: 5px;
  347. margin-bottom: 5px;
  348. height: 45px;
  349. width: 160px;
  350. text-align: center;
  351. }
  352.  
  353. .sidelink a {
  354. display: inline-block;
  355. margin-right: 5px;
  356. }
  357.  
  358. .sidelink img {
  359. height: 45px;
  360. width: 45px;
  361. transform: rotate(0deg);
  362. }
  363.  
  364. .sidehover {
  365. height: 15px;
  366. width: 200px;
  367. margin-top: 5px;
  368. margin-bottom: 5px;
  369. margin-left: 131px;
  370. }
  371.  
  372. .sshover {
  373. display: inline-block;
  374. margin-right: 14px;
  375. height: 10px;
  376. width: 20px;
  377. background-color: #b4abaf;
  378. }
  379.  
  380. #credit {
  381. position: fixed;
  382. float: left;
  383. left: 5px;
  384. bottom: 5px;
  385. }
  386. #s-m-t-tooltip{
  387. max-width: 200px;
  388. margin-top: 15px;
  389. margin-left: 15px;
  390. padding: 5px;
  391. border-left: 1px solid #aa806a;
  392. border-bottom: 1px dotted #aa806a;
  393. z-index:9999999999999999999999;
  394. background-color:#e5e5e5;
  395. color: #010101;
  396. font-family: 'Gasara';
  397. text-align:justify;
  398. font-size: 8px;
  399. letter-spacing: 1px;
  400. text-transform:uppercase;
  401. box-shadow: 0px 0px 10px #aa806a;
  402. -webkit-animation: wobble 700ms;
  403. }
  404.  
  405. @keyframes wobble {
  406. 0% {
  407. -webkit-transform: translateX(0%);
  408. -ms-transform: translateX(0%);
  409. transform: translateX(0%);}
  410.  
  411. 15% {
  412. -webkit-transform: translateX(-25%) rotate(-5deg);
  413. -ms-transform: translateX(-25%) rotate(-5deg);
  414. transform: translateX(-25%) rotate(-5deg);
  415. }
  416.  
  417. 30% {
  418. -webkit-transform: translateX(20%) rotate(3deg);
  419. -ms-transform: translateX(20%) rotate(3deg);
  420. transform: translateX(20%) rotate(3deg);
  421. }
  422.  
  423. 45% {
  424. -webkit-transform: translateX(-15%) rotate(-3deg);
  425. -ms-transform: translateX(-15%) rotate(-3deg);
  426. transform: translateX(-15%) rotate(-3deg);
  427. }
  428.  
  429. 60% {
  430. -webkit-transform: translateX(10%) rotate(2deg);
  431. -ms-transform: translateX(10%) rotate(2deg);
  432. transform: translateX(10%) rotate(2deg);
  433. }
  434.  
  435. 75% {
  436. -webkit-transform: translateX(-5%) rotate(-1deg);
  437. -ms-transform: translateX(-5%) rotate(-1deg);
  438. transform: translateX(-5%) rotate(-1deg);
  439. }
  440.  
  441. 100% {
  442. -webkit-transform: translateX(0%);
  443. -ms-transform: translateX(0%);
  444. transform: translateX(0%);
  445. }
  446. }
  447.  
  448. .wobble {
  449. -webkit-animation-name: wobble;
  450. animation-name: wobble;
  451. }
  452.  
  453.  
  454. @-webkit-keyframes bounce {
  455. 0% {-webkit-transform: scale(1);}
  456. 50% {-webkit-transform: scale(1.20);}
  457. 70% {-webkit-transform: scale(.9);}
  458. 100% {-webkit-transform: scale(1);}}
  459.  
  460. {CustomCSS}
  461. </style>
  462. <!-- S-M-T-TOOLTIP JAVA -->
  463.  
  464. <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
  465. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  466. <script>
  467. (function($){
  468. $(document).ready(function(){
  469. $("[title]").style_my_tooltips();
  470. });
  471. })(jQuery);
  472. </script>
  473. </head>
  474. <body>
  475.  
  476. <div id="sidewrap">
  477. <div class="sideimg">
  478. <img src="http://i.imgur.com/ny3Viql.gif" />
  479. </div>
  480. <div class="sidetitle">MILEAGE</div>
  481.  
  482. <div class="sidehover">
  483. <a href="/" title="Go back!"><div class="sshover"></div></a>
  484. <a href="/ask" title="Inbox!"><div class="sshover"></div></a>
  485. <a href="#" title="Under Co."><div class="sshover"></div></a>
  486. <a href="#" title="Under co."><div class="sshover"></div></a>
  487. <a href="#" title="Under Co."><div class="sshover"></div></a>
  488. </div>
  489.  
  490. <div class="sidedesc">
  491. Sweet and a bit of sour, maybe the perfect mix between beautiful and kind. It's all up to a there; where everything turns into dust and her red lips kiss his.
  492. </div>
  493.  
  494. <div class="sidelink">
  495. <a href="" title="http://btlcollective.tumblr.com/"><img src="http://i.imgur.com/H0KSHnG.png" /></a>
  496. <a href="http://originalites.tumblr.com/" title=""><img src="http://i.imgur.com/zwKWlUh.png" /></a>
  497. <a href="#" title="Under Co!"><img src="http://i.imgur.com/49oDo8m.png" /></a>
  498. </div>
  499.  
  500. <div class="sidedesc">
  501. What kind of movement can prove to you her grace? What about her charming smile? What about the delicate touches?
  502. </div>
  503.  
  504. <div class="sidehover">
  505. <a title="OC / Literate / SFW"><div class="sshover"></div></a>
  506. <a title="Not affiliated with Krystal Jung or SM Ent."><div class="sshover"></div></a>
  507. <a title="Youtuber muse, feel free to approach her as such!"><div class="sshover"></div></a>
  508. <a title="Selective follow, please don't force me in interactions!"><div class="sshover"></div></a>
  509. <a title="Plotting is always welcomed. Most replies will be written preest."><div class="sshover"></div></a>
  510. </div>
  511. </div>
  512.  
  513. <div id="entries">
  514. {block:Posts}
  515. <div id="post">
  516.  
  517. <!-- TEXT POSTS -->
  518. {block:Text}
  519. <div class="posttitle">{block:Title}{Title}{/block:Title}</div>
  520. {Body}
  521. {/block:Text}
  522.  
  523. <!-- PHOTO POSTS -->
  524. {block:Photo}
  525. <div class="photopost"><center><img src="{PhotoURL-250}"></center>
  526. {block:Caption}{Caption}{/block:Caption}</div>
  527. {/block:Photo}
  528.  
  529. <!-- PHOTOSET POSTS -->
  530. {block:Photoset}
  531. <div class="photosetpost">
  532. <div class="photosetimg"><center>{Photoset-250}</center></div>
  533. <p>{block:Caption}{Caption}{/block:Caption}</p>
  534. </div>
  535. {/block:Photoset}
  536.  
  537. <!-- QUOTE POSTS -->
  538. {block:Quote}
  539. <div class="quote">{Quote}</div>
  540. <div class="source">{block:Source} —{Source}{/block:Source}</div>
  541. {/block:Quote}
  542.  
  543. <!-- LINK POSTS -->
  544. {block:Link}
  545. <div class="posttitle">a href="{URL}" {Target}>{Name}</a></div>
  546. {block:Description}{Description}{/block:Description}
  547. {/block:Link}
  548.  
  549. <!-- CHAT POSTS -->
  550. {block:Chat}
  551. <div class="posttitle">{block:Title}{Title}{/block:Title}</div>
  552. <div class="chatpost">{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}</div>
  553.  
  554. {/block:Chat}
  555.  
  556.  
  557. <!-- ASK POST -->
  558. {block:Answer}
  559. <div class="asker">{Asker}</div>
  560. <div class="question">{Question}</div>
  561. <div class="answer">{Answer}</div>
  562. {/block:Answer}
  563.  
  564. <!-- AUDIO POST -->
  565. {block:Audio}
  566. {block:AudioPlayer}
  567. <div class="audioplayer">{AudioPlayer}</div>
  568. {/block:AudioPlayer}
  569. <div style="margin-left: 30px; margin-top: -20px; float: left; text-transform: uppercase;">
  570. {block:TrackName}<b>{TrackName}{/block:TrackName}</b>
  571. {block:Artist}BY {Artist}{/block:Artist}
  572. </div>
  573. {block:Caption}{Caption}{/block:Caption}
  574. {/block:Audio}
  575.  
  576. <!-- VIDEO POST -->
  577. {block:Video}
  578. <div class="video">{Video-250}</div>
  579. {block:Caption}{Caption}{/block:Caption}
  580. {/block:Video}
  581.  
  582. <!-- POST PERMA -->
  583.  
  584. {block:IndexPage}
  585. <div id="postperma">
  586. <a href="{Permalink}" title="{block:HasTags}{block:Tags} #{Tag}; {/block:Tags}{/block:HasTags}"><div class="pperma"></div></a>
  587. <a href="{Permalink}" title="{block:Date}{DayOfMonth}/{MonthNumber}/{Year}{/block:Date}"><div class="pperma"></div></a>
  588. <a href="{Permalink}" title="{NoteCount}"><div class="pperma"></div></a>
  589. <a href="{ReblogURL}" title="Reblog it?"><div class="pperma"></div></a>
  590. </div>
  591. {/block:IndexPage}
  592.  
  593. {block:PermalinkPage}
  594. <div id="pageperma">
  595. <div class="permatitle">
  596. Posted On: {block:Date}{DayOfMonth}/{MonthNumber}/{Year}{/block:Date} with {NoteCountWithLabel}!
  597. </div>
  598.  
  599. <div class="permatags">
  600. {block:HasTags}{block:Tags} #<a href="/tagged/{Tag}">{Tag}</a>, {/block:Tags}{/block:HasTags}
  601. </div>
  602. </div>
  603.  
  604. <div class="postnotes">
  605. {block:PostNotes}
  606. {PostNotes}{/block:PostNotes}
  607. {/block:Posts}
  608. </div>
  609. {/block:PermalinkPage}
  610.  
  611.  
  612. </div><!-- END OF POSTS -->
  613. {/block:Posts}
  614. </div><!-- END OF ENTRIES -->
  615.  
  616. <div id="credit"><a title="Theme by chrvstn, optimized for chrome, 1368 x 768. Please don't steal!">♕</a></div>
  617. </body></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!