API tools faq
paste
drunkblushed

reality by drunkblushed

drunkblushed
Feb 16th, 2020 (edited)
9,431
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.79 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♡ REALITY BY DRUNKBLUSHED ♡
  4.  
  5. — do not combine with other themes.
  6. — do not take copy or take parts of this theme.
  7. — do not remove credits and redistribute as your own.
  8.  
  9.  
  10. -->
  11.  
  12. <html>
  13. <head>
  14.  
  15. <meta name="color:background" content="#e7e7e7"/>
  16. <meta name="color:posts" content="#f3f3f3"/>
  17. <meta name="color:container" content="#eaeaea"/>
  18. <meta name="color:borders" content="#dadada"/>
  19. <meta name="color:accent" content="#d6dcdf"/>
  20. <meta name="color:accent 2" content="#e7c5bb"/>
  21. <meta name="color:phone" content="#3c3c3c"/>
  22. <meta name="color:bold" content="#dfac9d"/>
  23. <meta name="color:italic" content="#98aab0"/>
  24. <meta name="color:text" content="#444444"/>
  25. <meta name="color:link" content="#7e92a2"/>
  26. <meta name="color:permalink" content="#444444"/>
  27. <meta name="color:permalink bg" content="#c8d1d4"/>
  28.  
  29. <meta name="image:background" content=""/>
  30. <meta name="image:left image" content="https://via.placeholder.com/280x190"/>
  31. <meta name="image:right image" content="https://via.placeholder.com/180x200"/>
  32. <meta name="image:icon" content="https://via.placeholder.com/50x50"/>
  33.  
  34. <meta name="text:main title" content="REALITY REALITY REALITY"/>
  35. <meta name="text:side description" content="Consisting of four members, Mamamoo debuted in 2014 under Rainbow Bridge World, and has become a group who is unstoppably releasing back-to-back popular songs."/>
  36. <meta name="text:stats" content"ACCEPTING APPS!" />
  37. <meta name="text:sidelink title1" content="link one" />
  38. <meta name="text:sidelink url1" content="/" />
  39. <meta name="text:sidelink title2" content="link two" />
  40. <meta name="text:sidelink url2" content="/" />
  41. <meta name="text:sidelink title3" content="link three" />
  42. <meta name="text:sidelink url3" content="/" />
  43. <meta name="text:sidelink title4" content="link four" />
  44. <meta name="text:sidelink url4" content="/" />
  45.  
  46. <title>{title}</title>
  47.  
  48.  
  49. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  50.  
  51. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  52.  
  53. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  54. <script>
  55. $(document).ready(function(){
  56. $('.video iframe').each(function(){
  57. var scale = $(this).parents('.video').width() / 500;
  58. $(this).attr({
  59. width: Math.floor($(this).attr('width') * scale),
  60. height: Math.floor($(this).attr('height') * scale)
  61. });
  62. });
  63. });
  64. </script>
  65.  
  66. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  67. <script>
  68. (function($){
  69. $(document).ready(function(){
  70. $("[title]").style_my_tooltips();
  71. });
  72. })(jQuery);
  73. </script>
  74.  
  75.  
  76. <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
  77.  
  78. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  79.  
  80. <!-------MUSIC PLAYER BY GLENTHEMES------->
  81. <script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>
  82.  
  83. <style type="text/css">
  84.  
  85. /*----------------- FONTS -----------------*/
  86.  
  87. @font-face { font-family: "creo"; src: url('https://dl.dropboxusercontent.com/s/uk7fcayvza8gd9t/Creo-ExtraBold.ttf') ;}
  88.  
  89.  
  90. /*----------------- TEXT STYLES -----------------*/
  91.  
  92. body{
  93. background-color: {color:background};
  94. font-family: 'Montserrat', sans-serif;
  95. color:{color:text};
  96. letter-spacing:1px;
  97. color:{color:text};
  98. font-size:9px;
  99. font-weight:500;
  100. background-image:url({image:background});
  101. }
  102.  
  103. a:link, a:active, a:visited{
  104. color: {color:Link};
  105. text-decoration:none;
  106. -webkit-transition: all 0.2s linear;
  107. -moz-transition: all 0.2s linear;
  108. transition: all 0.2s linear;
  109. text-transform:uppercase;
  110. }
  111.  
  112. a:hover {
  113. color:{color:Link Hover};
  114. -webkit-transition: all 0.2s linear;
  115. -moz-transition: all 0.2s linear;
  116. transition: all 0.2s linear;
  117. }
  118.  
  119. b,bold,strong{
  120. color:{color:bold};
  121. text-transform:uppercase;
  122. }
  123.  
  124. em,i,italic{
  125. color:{color:italic};
  126. }
  127.  
  128. big{
  129. font-size:15px;
  130. font-family: 'Montserrat', sans-serif;
  131. }
  132.  
  133. small,sup, sub{
  134. font-size:9px;
  135. }
  136.  
  137. h1{font-family: "creo";
  138. letter-spacing:1px;
  139. padding:0px;
  140. text-align:center;
  141. font-size: 20px;
  142. text-transform:uppercase;
  143. line-height: 120%;
  144. color:{color:bold};}
  145.  
  146. h2{font-family: "creo";
  147. letter-spacing:1px;
  148. text-align:center;
  149. font-size: 22px;
  150. text-transform:uppercase;
  151. line-height: 120%;
  152. color:{color:accent};}
  153.  
  154. .posttitle{
  155. font-family: "creo";
  156. letter-spacing:1px;
  157. text-align:center;
  158. font-size: 24px;
  159. text-transform:uppercase;
  160. line-height: 120%;
  161. -webkit-text-stroke: 1px {color:bold};
  162. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  163. }
  164.  
  165. blockquote{
  166. margin-left:0px;
  167. padding-left:15px;
  168. border-left: 1px solid {color:borders};
  169. width:95%;
  170. }
  171.  
  172.  
  173. .p { padding-top: 5px;}
  174. .ol, ul { margin-left: 30px; padding: 5px; }
  175. .ul { list-style-type: square; }
  176.  
  177. ::-webkit-scrollbar-thumb {
  178. display: none;
  179. }
  180.  
  181. ::-webkit-scrollbar {
  182. display: none;
  183. }
  184.  
  185. #s-m-t-tooltip {
  186. z-index: 999999999999999999;
  187. background: #fff;
  188. font-size: 7.5px;
  189. line-height: 13px;
  190. letter-spacing: 1.5px;
  191. text-transform: uppercase;
  192. color: {color:text};
  193. font-weight:900;
  194. background-color:{color:posts};
  195. border:1px solid {color:borders};
  196. max-width: 150px;
  197. word-wrap: break-word;
  198. padding: 2px 5px 2px 6px;
  199. display: block;
  200. margin: 24px 14px 7px 12px;
  201. -webkit-transition: all 0.2s linear;
  202. -moz-transition: all 0.2s linear;
  203. transition: all 0.2s linear;
  204. }
  205.  
  206. ::-moz-selection { background: {color:accent}; }
  207. ::selection { background: {color:accent}; }
  208.  
  209. /*----------------- CONTAINERS & POSTS -----------------*/
  210.  
  211. #entries{
  212. padding:20px;
  213. z-index:99;
  214. margin: auto;
  215. left:0px;
  216. top:0px;
  217. bottom:0px;
  218. right:0px;
  219. width:250px;
  220. position:absolute;
  221. height:540px;
  222. overflow-y:scroll;
  223. background-color: {color:phone};
  224. overflow-x:hidden;
  225. border-radius:15px;
  226. border:15px solid {color:phone};
  227. }
  228.  
  229. #container {
  230. margin: auto;
  231. left:0px;
  232. top:20px;
  233. bottom:0px;
  234. right:0px;
  235. position:absolute;
  236. width:300px;
  237. height:570px;
  238. overflow:auto;
  239. color:{color:text};
  240. z-index:999;
  241. -webkit-animation: fadeEffect 0.7s;
  242. animation: fadeEffect 0.7s;
  243. border-radius:0px 0px 10px 10px;
  244. background-color:{color:container};
  245. }
  246.  
  247. #post {
  248. font-size:9px;
  249. background-color:{color:posts};
  250. padding:15px;
  251. width:250px;
  252. z-index:99;
  253. margin-top:20px;
  254. margin-bottom:40px;
  255. margin-left:10px;
  256. line-height:160%;
  257. letter-spacing:1px;
  258. border-radius:10px;
  259. }
  260.  
  261. #post .tags {position:relative;
  262. text-align:left;
  263. color:{color:link};
  264. padding-top:10px;
  265. font-size:6.5px;
  266. letter-spacing:2px;
  267. font-family: 'Montserrat', sans-serif;
  268. text-transform:uppercase;
  269. -webkit-transition: all 0.2s linear;
  270. -moz-transition: all 0.2s linear;
  271. transition: all 0.2s linear;
  272. line-height:120%;
  273. margin-top:5px;
  274. }
  275.  
  276. #post .tags a{
  277. color:{color:link};
  278. }
  279.  
  280. #post img{
  281. max-width:250px;
  282. height:auto;
  283. }
  284.  
  285.  
  286. #post:hover .tags {position:relative;
  287. text-align:left;opacity:1;
  288. color:{color:link}; width:auto;
  289. text-transform:uppercase;-webkit-transition: all 0.2s linear;
  290. -moz-transition: all 0.2s linear;
  291. transition: all 0.2s linear;}
  292. .tags a {color:{color:text};text-transform:uppercase;}
  293.  
  294. .tags a:hover {color:{color:link hover};text-transform:uppercase;}
  295.  
  296.  
  297. .info{
  298. background:{color:permalink bg};
  299. position:relative;
  300. padding:12px;
  301. margin-top:20px;
  302. margin-bottom:0px;
  303. text-transform:uppercase;
  304. letter-spacing:2px;
  305. color:{color:permalink};
  306. font-size:8.5px;
  307. line-height:100%;
  308. border-radius:5px;
  309. }
  310.  
  311. .info span{
  312. text-align:left;
  313. padding-left:-20px;
  314. text-transform:uppercase;
  315. margin-top:2px;
  316. padding-right:5px;
  317. }
  318.  
  319. .info rb{
  320. right:0%;
  321. position:absolute;
  322. padding-right:0px;
  323. margin-top:-1px;
  324. }
  325.  
  326. .info b{
  327. font-weight:900;
  328. color:{color:permalink};
  329. }
  330.  
  331. .info a{
  332. margin-left:0px;
  333. font-size:8.5px;
  334. color: {color:permalink};
  335. }
  336.  
  337.  
  338. /*----------------- CUSTOMIZATIONS -----------------*/
  339.  
  340. #leftwindow{
  341. width:315px;
  342. height:300px;
  343. padding:0px;
  344. background-color:{color:posts};
  345. margin:auto;
  346. position:fixed;
  347. left:0px;
  348. top:310px;
  349. bottom:0px;
  350. right:600px;
  351. border-radius:15px;
  352. -webkit-box-shadow: -9px 10px 22px -21px rgba(0,0,0,0.75);
  353. -moz-box-shadow: -9px 10px 22px -21px rgba(0,0,0,0.75);
  354. box-shadow: -9px 10px 22px -21px rgba(0,0,0,0.75);
  355. -webkit-transition: all 0.2s linear;
  356. -moz-transition: all 0.2s linear;
  357. transition: all 0.2s linear;
  358. }
  359.  
  360. #leftwindow:hover{
  361. transform: scale(1.1);
  362. -webkit-transition: all 0.2s linear;
  363. -moz-transition: all 0.2s linear;
  364. transition: all 0.2s linear;
  365. z-index:9999;
  366. }
  367.  
  368. #browserbig{
  369. background-color:{color:accent 2};
  370. padding:5px;
  371. width:auto;
  372. border-radius:15px 15px 0px 0px;
  373. }
  374.  
  375. .dots{
  376. font-size:10px;
  377. margin:5px; color:{color:posts};}
  378.  
  379. .comp{
  380. font-size:10px;
  381. margin:5px; text-align:right; color:{color:posts};}
  382.  
  383. #rightwindow{
  384. width:230px;
  385. height:380px;
  386. padding:0px;
  387. background-color:{color:posts};
  388. margin:auto;
  389. position:fixed;
  390. left:525px;
  391. top:230px;
  392. bottom:0px;
  393. right:0px;
  394. border-radius:15px;
  395. -webkit-box-shadow: 9px 10px 22px -21px rgba(0,0,0,0.75);
  396. -moz-box-shadow: 9px 10px 22px -21px rgba(0,0,0,0.75);
  397. box-shadow: 9px 10px 22px -21px rgba(0,0,0,0.75);
  398. -webkit-transition: all 0.2s linear;
  399. -moz-transition: all 0.2s linear;
  400. transition: all 0.2s linear;
  401. }
  402.  
  403. #rightwindow img{
  404. width:180px;
  405. height:200px;
  406. border-radius:10px;
  407. margin-top:45px;
  408. margin-left:30px;
  409. background-color:{color:accent};
  410. }
  411.  
  412. #rightwindow:hover{
  413. transform: scale(1.1);
  414. -webkit-transition: all 0.2s linear;
  415. -moz-transition: all 0.2s linear;
  416. transition: all 0.2s linear;
  417. }
  418.  
  419. #stats{
  420. font-family:"creo";
  421. font-size:14px;
  422. position:fixed;
  423. margin-top:15px;
  424. margin-left:30px;
  425. color:{color:italic};
  426. width:180px;
  427. text-align:center;
  428. word-spacing:0px;
  429. overflow:hidden;
  430. letter-spacing:2.5px;
  431. font-weight:bold;
  432. }
  433.  
  434.  
  435. .blinking{
  436. animation:blinkingText 1.2s infinite;
  437. }
  438. @keyframes blinkingText{
  439. 0%{ color: {color:italic}; }
  440. 49%{ color: {color:italic}; }
  441. 60%{ color: transparent; }
  442. 99%{ color:transparent; }
  443. 100%{ color: {color:italic}; }
  444. }
  445.  
  446. @import "compass/css3";
  447.  
  448. .wave1fill{
  449. fill:{color:accent};
  450. width: 1000px;
  451. height: 675px;
  452. }
  453.  
  454.  
  455. #wave1{
  456. margin:auto;
  457. right:0px;
  458. top:-35px;
  459. left:0px;
  460. bottom:0px;
  461. width: 1000px;
  462. height:675px;
  463. overflow: hidden;
  464. position:fixed;
  465. }
  466.  
  467. #notif{
  468. position:fixed;
  469. top:-480px;
  470. right:0px;
  471. left:640px;
  472. bottom:0px;
  473. margin:auto;
  474. border-radius:15px;
  475. width:250px;
  476. height:50px;
  477. padding:10px;
  478. background-color:{color:posts};
  479. opacity:0.8;
  480. line-height:150%;
  481. -webkit-transition: all 0.2s linear;
  482. -moz-transition: all 0.2s linear;
  483. transition: all 0.2s linear;
  484. }
  485.  
  486. #notif img{
  487. width:50px;
  488. height:50px;
  489. border-radius:50%;
  490. float:left;
  491. margin-right:10px;
  492. }
  493.  
  494. #notif:hover{
  495. transform: scale(1.1);
  496. opacity:0.9;
  497. -webkit-transition: all 0.2s linear;
  498. -moz-transition: all 0.2s linear;
  499. transition: all 0.2s linear;
  500. }
  501.  
  502. #spotify{
  503. position:fixed;
  504. top:-310px;
  505. right:0px;
  506. left:570px;
  507. bottom:0px;
  508. margin:auto;
  509. border-radius:15px;
  510. width:200px;
  511. height:68px;
  512. background-color:{color:posts};
  513. opacity:0.8;
  514. -webkit-transition: all 0.2s linear;
  515. -moz-transition: all 0.2s linear;
  516. transition: all 0.2s linear;
  517. }
  518.  
  519. #spotify:hover{
  520. transform: scale(1.1);
  521. opacity:0.9;
  522. -webkit-transition: all 0.2s linear;
  523. -moz-transition: all 0.2s linear;
  524. transition: all 0.2s linear;
  525. }
  526.  
  527. .sideimage {position:fixed; width:280px; height:150px; background-color:{color:accent}; border-radius:15px; margin:18px;display:block;}
  528.  
  529. .sideimage img {width:280px; height:190px; position:fixed; border-radius:15px; margin-top:-40px; }
  530.  
  531. .description {width:280px; height:75px; line-height:200%; margin-top:180px; margin-left:18px; display:block; font-size:9px; overflow:hidden;}
  532.  
  533. #maintitle{
  534. font-family:"creo";
  535. font-size:74px;
  536. position:fixed;
  537. margin:auto;
  538. left:0px;
  539. right:660px;
  540. bottom:0px;
  541. top:-280px;
  542. -webkit-text-stroke:1.5px {color:bold};
  543. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  544. text-shadow:3px 3px {color:posts};
  545. width:300px;
  546. height:250px;
  547. text-align:right;
  548. word-spacing:-3px;
  549. line-height:100%;
  550. padding:10px;
  551. letter-spacing:2px;
  552. }
  553.  
  554. #bar{
  555. position:fixed;
  556. top:-570px;
  557. bottom:0px;
  558. right:0px;
  559. left:0px;
  560. margin: auto;
  561. width:90px;
  562. height:25px;
  563. border-radius:8px;
  564. background-color:{color:phone};
  565. z-index:9999999999999999999999999999999;
  566. }
  567.  
  568. #phone{
  569. position:fixed;
  570. top:-560px;
  571. bottom:0px;
  572. right:0px;
  573. left:0px;
  574. margin: auto;
  575. width:270px;
  576. height:5px;
  577. background-color:{color:container};
  578. padding:10px 15px;
  579. z-index:9999999999999999999999999999;
  580. font-size:9px;
  581. line-height:110%;
  582. letter-spacing:2.5px;
  583. border-radius:15px 15px 0px 0px;
  584. text-transform:uppercase;
  585. }
  586.  
  587. .phone{
  588. float:right;
  589. }
  590.  
  591. #phone span{font-size:10px;}
  592.  
  593. #phone .material-icons{font-size:11px; color:{color:text}; display: inline-block; margin-top:-5px; text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;}
  594.  
  595.  
  596.  
  597. /*----------------- NAVIGATION & PAGINATION -----------------*/
  598.  
  599. #sidelink{
  600. position:fixed;
  601. width:280px;
  602. height:50px;
  603. margin-left:30px;
  604. margin-top:15px;
  605. z-index:999999999999999999999999999;
  606. text-align:left;
  607. }
  608.  
  609. #sidelink span{
  610. width:21px;
  611. height:21px;
  612. border-radius:15px;
  613. background-color:{color:accent 2};
  614. color:{color:text};
  615. font-size:21px;
  616. float:left;
  617. padding:10px;
  618. text-align:center;
  619. margin-right:5px;
  620. }
  621.  
  622. #sidelink a:hover span{
  623. transform: scale(1.2);
  624. -webkit-transition: all 0.2s linear;
  625. -moz-transition: all 0.2s linear;
  626. transition: all 0.2s linear;
  627. }
  628.  
  629.  
  630. #pagination {
  631. font-family: 'Montserrat', sans-serif;
  632. font-size:10px;
  633. font-weight:900;
  634. width:180px;
  635. color:{color:accent};
  636. text-align:center;
  637. margin-left:30px;
  638. }
  639.  
  640. #pagination a{
  641. display:inline-block;
  642. color:{color:link};
  643. padding:7px 10px 5px 10px;
  644. }
  645.  
  646.  
  647. /*----------------- ASK POSTS -----------------*/
  648.  
  649. .question {
  650. padding:15px;
  651. background-color:{color:container};
  652. color:{color:text};
  653. margin-top:40px;
  654. margin-left:0px;
  655. width:220px;
  656. margin-bottom:20px;
  657. border-radius:10px;
  658. text-align:center;
  659. }
  660.  
  661. .asker img {
  662. position:absolute;
  663. border-radius:50px;
  664. margin-left:-40px;
  665. margin-right:40px;
  666. margin-top:-10px;
  667. border:5px solid {color:bold};
  668. }
  669.  
  670. .asker {
  671. padding-top:6px;
  672. background-color:{color:posts};
  673. padding:5px;
  674. color:{color:bold};
  675. font-size:16px;
  676. letter-spacing:1.5px;
  677. margin-left:23%;
  678. margin-top:5px;
  679. display:inline;
  680. width:auto;
  681. position:absolute;
  682. margin-bottom:10px;
  683. text-transform:uppercase;
  684. font-family:"creo";
  685. }
  686.  
  687. .asker a{
  688. color:{color:bold};
  689. margin-top:-5px;
  690. }
  691.  
  692.  
  693. /*----------------- CHAT POSTS -----------------*/
  694.  
  695. .answer span,.convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}.answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:{color:container};color:{color:text};left:3px}.me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid {color:container};border-bottom-right-radius:1em .5em}.answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:{color:background};color:{color:text}}.them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:background};border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  696. .asked p {
  697. text-align: left;
  698. margin: 0 0px 10px 0px;
  699. padding: 0;
  700. color:{color:text};
  701. font-size: 12px;
  702. line-height: 0px;
  703. }
  704. .footerright .viasrc {
  705. float: left;
  706. }
  707. .asked a {
  708. margin:0;padding:0;
  709. }
  710. .user_4{background-color:{color:container};color{color:text}}.user_4::after{border-color:{color:container}}.user_6{background-color:{color:container};color{color:text}}.user_6::after{border-color:{color:container}}.user_5{background-color:{color:background};color:{color:text}}.user_5::after{border-color:{color:link}}.user_3{background-color:{color:container};color{color:text}}.user_3::after{border-color:{color:container}}.user_7{background-color:{color:container};color{color:text}}.user_7::after{border-color:{color:container}}.user_8{background-color:{color:container};color{color:text}}.user_8::after{border-color:{color:container}}.user_9{background-color:{color:container};color{color:text}}.user_9::after{border-color:{color:container}}
  711. .convo {
  712. overflow: hidden;
  713. list-style-type: none;
  714. padding: 0;
  715. margin: 0;
  716. }
  717.  
  718. /*----------------- PERMALINK PAGE -----------------*/
  719. ol.notes {
  720. width:300px;
  721. padding: 0px;
  722. margin: 0px 0px;
  723. list-style-type: none;
  724. margin-left:5px;
  725. margin-top:-10px;
  726. font-size:9px;}
  727.  
  728. ol.notes li.note {
  729. padding: 10px;
  730. }
  731.  
  732. ol.notes li.note img.avatar {
  733. vertical-align: -4px;
  734. margin-right: 10px;
  735. width: 16px;
  736. height: 16px;
  737. }
  738.  
  739. ol.notes li.note .answer_content {
  740. font-weight: normal;
  741. }
  742.  
  743. ol.notes li.note blockquote {
  744. border-color: {color:posts};
  745. padding: 4px 10px;
  746. margin: 10px 0px 0px 25px;
  747. }
  748.  
  749. ol.notes li.note blockquote a {
  750. text-decoration: none;}
  751.  
  752.  
  753.  
  754.  
  755.  
  756. /*----------------- CREDITS / DO NOT TOUCH! that means you can't change the sizing, color, placement, and general appearance of the credit. -----------------*/
  757. #credits{
  758. position:fixed;
  759. bottom:10px;
  760. right:15px;
  761. width:36px;
  762. height:36px;
  763. text-align:center;
  764. }
  765.  
  766. #credits a{
  767. font-weight:bold;
  768. font-family:"creo";
  769. width:36px;
  770. height:36px;
  771. padding:0px;
  772. display:inline-block;
  773. -webkit-text-fill-color: {color:posts};
  774. background-color:{color:bold};
  775. font-size:18px;
  776. border-radius:50%;
  777.  
  778. }
  779.  
  780. #credits span{
  781. padding:5px;
  782. padding-top:10px;
  783. padding-right:5px;
  784. }
  785.  
  786. #credits a:hover{
  787. font-family:"creo";
  788. }
  789.  
  790. .pulse a:hover{
  791. animation: pulse 1s infinite;
  792. animation-timing-function: linear;
  793. }
  794.  
  795. @keyframes pulse {
  796. 0% { transform: scale(1); }
  797. 50% { transform: scale(1.3);
  798. 100% { transform: scale(1); }
  799. }
  800. }
  801.  
  802. /*-------MUSIC PLAYER BY GLENTHEMES-------*/
  803. :root {
  804. --Circle-Size:50px;
  805. --Progress-Border-Size:2px;
  806. --Progress-Empty:#eee;
  807. --Progress-Fill:{color:bold};
  808. --Player-Background:{color:accent 2};
  809. --Play-Pause-Buttons-Size:20px;
  810. --Play-Pause-Buttons-Color:#111;
  811. --Player-Text-Margin:9.5px;
  812.  
  813. --Song-Name-Font-Size:9.5px;
  814. --Song-Name-Color:{color:bold};
  815.  
  816. --Artist-Name-Font-Size:9.5px;
  817. --Artist-Name-Color:#888;
  818. }
  819.  
  820. #glenplayer07 {
  821. position:absolute;
  822. margin-top:10px;
  823. margin-left:10px;
  824. z-index:99;
  825. }
  826.  
  827. .flamingo {
  828. display:flex;
  829. align-items:center;
  830. }
  831.  
  832. .circleofdeath {
  833. width:var(--Circle-Size);
  834. height:var(--Circle-Size);
  835. border-radius:100%;
  836. overflow:hidden;
  837. }
  838.  
  839. .tinfoil {
  840. width:var(--Circle-Size);
  841. height:var(--Circle-Size);
  842. background:var(--Progress-Empty);
  843. border-radius:100%;
  844. }
  845.  
  846. .oven {
  847. background:var(--Progress-Fill);
  848. }
  849.  
  850. .oliveoil {
  851. width:100%;
  852. height:100%;
  853. }
  854.  
  855. .crust {
  856. position:absolute;
  857. top:0;
  858. display:flex;
  859. align-items:center;
  860. justify-content:center;
  861. width:var(--Circle-Size);
  862. height:var(--Circle-Size);
  863. }
  864.  
  865. .cherry {
  866. display:flex;
  867. align-items:center;
  868. justify-content:center;
  869. width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  870. height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
  871. background:var(--Player-Background);
  872. border-radius:100%;
  873. cursor:pointer;
  874. z-index:1;
  875. }
  876.  
  877. .music-controls .material-icons {
  878. font-size:var(--Play-Pause-Buttons-Size);
  879. color:var(--Play-Pause-Buttons-Color);
  880. }
  881.  
  882. .pausee {display:none;}
  883.  
  884. .beff {display:none;}
  885. .aff {display:block;}
  886.  
  887. .music-info {
  888. margin-left:var(--Player-Text-Margin);
  889. line-height:1em;
  890. }
  891.  
  892. .song-name {
  893. font-family: 'Montserrat', sans-serif;
  894. font-size:var(--Song-Name-Font-Size);
  895. text-transform:uppercase;
  896. font-weight:bold;
  897. color:{color:bold};
  898. color:var(--Song-Name-Color);
  899. }
  900.  
  901. .artist-name {
  902. margin-top:3px;
  903. font-family: 'Montserrat', sans-serif;
  904. font-size:var(--Artist-Name-Font-Size);
  905. letter-spacing:0.3px;
  906. color:var(--Artist-Name-Color);
  907. }
  908.  
  909. {CustomCSS}
  910. </style>
  911.  
  912. <link rel="shortcut icon" href="{Favicon}">
  913. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />
  914.  
  915.  
  916. </head>
  917.  
  918. <body>
  919.  
  920. <div id="wave1">
  921. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1046 675.3" xml:space="preserve" class="wave1fill">
  922. <path d="M1050,684.3c-5.51-50.91-13.36-83.29-34.23-129.38S960.55,468,915.87,450c-22.8-9.18-47.68-12.3-69.34-24.25-34.58-19.08-55.93-58-68.47-97.53S759.9,246.9,746.6,207.67C710.34,100.73,613.53,20.57,508,10.12c-47.17-4.67-97.63,4.8-134,37.44-28.26,25.39-45.29,61.92-66.68,94.14a355.13,355.13,0,0,1-90.9,93.91c-42.58,30-91.92,50.22-127.61,89.22-39.35,43-57.07,103.47-68.12,162.58A1014.19,1014.19,0,0,0,4.07,684Z" transform="translate(-4 -9)"/></svg>
  923. </div>
  924.  
  925. <div id="phone"> 4:20PM
  926. <div class="phone">
  927. <i class="material-icons">wifi</i>
  928. <i class="material-icons">signal_cellular_alt</i>
  929. <i class="material-icons">battery_full</i>
  930. </div>
  931. </div>
  932.  
  933. <div id="bar"></div>
  934.  
  935.  
  936. <div id="notif">
  937. <img src="{image:icon}">
  938. <b>DRUNKBLUSHED</b><br/>
  939. this is a sample notif. if you like this theme, please consider donating to my ko-fi! thank u ♥
  940. </div>
  941.  
  942.  
  943. <div id="spotify">
  944. <!-------MUSIC PLAYER BY GLENTHEMES------->
  945. <div id="glenplayer07">
  946. <div class="flamingo">
  947. <div class="circleofdeath">
  948. <div class="tinfoil">
  949. <div class="oliveoil"></div>
  950. </div>
  951. <div class="crust">
  952. <div class="cherry">
  953. <div class="music-controls">
  954. <i class="material-icons playy">play_arrow</i>
  955. <i class="material-icons pausee">pause</i>
  956. </div>
  957. </div><!--cherry-->
  958. </div><!--crust-->
  959. </div><!--circleofdeath-->
  960.  
  961. <div class="music-info">
  962. <div class="song-name">REALITY</div>
  963. <div class="artist-name">mamamoo</div>
  964. </div><!--music-info-->
  965. </div><!--flamingo-->
  966. </div><!--glenplayer07-->
  967.  
  968. <audio id="audio" src="https://dl.dropbox.com/s/g2g4f2qtcntdwv5/MAMAMOO%20%28%EB%A7%88%EB%A7%88%EB%AC%B4%29%20-%20rEALITY%20-%20Color%20Coded%20%28Han%20Rom%20Eng%29.mp3" type="audio"></audio>
  969. <!----end music player---->
  970. </div>
  971.  
  972. <div id="leftwindow">
  973. <div id="browserbig">
  974. <div class="dots">
  975. <span class="th th-circle"></span>
  976. <span class="th th-circle"></span>
  977. <span class="th th-circle"></span>
  978. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  979. <span class="th th-minus"></span>&nbsp;
  980. <span class="th th-cross"></span>
  981. </div></div>
  982.  
  983. <div class="sideimage"><img src="{image:left image}" draggable="false"></div>
  984.  
  985. <div class="description">{text:side description}</div>
  986.  
  987. </div>
  988.  
  989. <div id="rightwindow">
  990. <div id="browserbig">
  991. <div class="comp">
  992. <span class="th th-minus"></span>&nbsp;
  993. <span class="th th-cross"></span></div></div>
  994.  
  995. <div id="stats">
  996. <span class="blinking">{text:stats}</span>
  997. </div>
  998.  
  999. <img src="{image:right image}">
  1000.  
  1001. <div id="sidelink">
  1002. <a href="{text:sidelink url1}" title="{text:sidelink title1}"><span class="th th-home-o"></span></a>
  1003. <a href="{text:sidelink url2}" title="{text:sidelink title2}"><span class="th th-envelope-o"></span></a>
  1004. <a href="{text:sidelink url3}" title="{text:sidelink title3}"><span class="th th-star-o"></span></a>
  1005. <a href="{text:sidelink url4}" title="{text:sidelink title4}"><span class="th th-worldwide-o"></span></a>
  1006. </div>
  1007.  
  1008. {block:Pagination}
  1009. <div id="pagination">
  1010. <div style="margin-top:65px;margin-bottom:10px;">
  1011. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><span class="th th-chevron-left"></span></a>{/block:PreviousPage}
  1012. {block:JumpPagination length="3"}
  1013. {block:CurrentPage}<a><span class="current_page">{PageNumber}</span></a>{/block:CurrentPage}
  1014. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  1015. {block:NextPage}<a href="{NextPage}" class="jump_page"><span class="th th-chevron-right"></span></a>{/block:NextPage}
  1016. </div></div>
  1017. {/block:Pagination}
  1018.  
  1019. </div>
  1020.  
  1021. <!-------------------------------POSTS------------------------------->
  1022. <div id="container">
  1023.  
  1024. {block:Posts}
  1025.  
  1026. <div id="post">
  1027.  
  1028. {block:text}
  1029. {block:Title}
  1030. <div class="posttitle">{Title}</div>
  1031. {/block:Title}
  1032. {Body}
  1033. {/block:text}
  1034.  
  1035. {block:Link}
  1036. <div class="posttitle">
  1037. <a href="{URL}">{Name}</a>
  1038. </div>
  1039. {block:Description}{Description}{/block:Description}
  1040. {/block:Link}
  1041.  
  1042. {block:Photo}
  1043. <center>
  1044. {LinkOpenTag}
  1045. <a href="{permalink}">
  1046. <img src="{PhotoURL-400}" alt="{PhotoAlt}" width="250"></a>
  1047. {LinkCloseTag}
  1048. </center>
  1049. {block:Caption}{Caption}{/block:Caption}
  1050. {block:ContentSource}
  1051. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1052. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1053. {/block:SourceLogo}
  1054. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1055. {/block:ContentSource}
  1056. {block:ReblogParentURL}
  1057. <!-- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1058. {/block:ReblogParentURL}
  1059. {/block:Photo}
  1060.  
  1061. {block:Photoset}
  1062. <div style="z-index:99999999999999999999;">{Photoset}</div>
  1063. {block:Caption}{Caption}{/block:Caption}
  1064. {/block:Photoset}
  1065.  
  1066. {block:Quote}
  1067. <h1>{Quote}</h1>
  1068. {block:Source}
  1069. <center>- {Source}</center>
  1070. {/block:Source}
  1071. {/block:Quote}
  1072.  
  1073. {block:Chat}
  1074. {block:Title}
  1075. <h1>{Title}</h1>{/block:Title}<br>
  1076. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  1077. {Line}</li>{/block:Lines}</ul>
  1078. {/block:Chat}
  1079.  
  1080. {block:Audio}
  1081. {block:AlbumArt}
  1082. <img src="{AlbumArtURL}" width="60" align="left" style="margin-right:10px; border-radius:50%;" />{/block:AlbumArt}
  1083. <br/>
  1084. {block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  1085. {block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  1086. {/block:ExternalAudio}<b>Played:</b> {PlayCount} times
  1087. <span class="audio">{AudioPlayerGrey}<br></span>
  1088. {block:Caption}{Caption}{/block:Caption}
  1089. {/block:Audio}
  1090.  
  1091. {block:Video}
  1092. <div class="video">{Video-500}</div>
  1093. {block:Caption}{Caption}{/block:Caption}
  1094. {/block:Video}
  1095.  
  1096. {block:Answer}
  1097. <div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div>
  1098. <div class="question">{Question}</div>
  1099. {Answer}{/block:Answer}
  1100.  
  1101. {block:IndexPage}
  1102. <div class="info">
  1103. {block:Date}
  1104. <span><a href="{Permalink}" title="{TimeAgo}">
  1105. <b>{ShortMonth} {DayOfMonthWithZero}</b></a>
  1106. {block:NoteCount}with
  1107. <b><a href="{Permalink}">{NoteCountWithLabel}</b></a>{/block:NoteCount}</span>
  1108. {/block:Date}
  1109. <rb>
  1110. <span>
  1111.  
  1112. {block:RebloggedFrom}
  1113. <a href="{reblogparenturl}" title="via"><span class="th th-share-o"></span></a>{/block:RebloggedFrom}
  1114.  
  1115. {block:ContentSource}
  1116. <a href="{SourceURL}" title="source"><span class="th th-push-pin-o"></span></a>{/block:ContentSource}
  1117.  
  1118. <a href="{ReblogURL}" title="reblog" target="_blank" class="reblog"><span class="th th-reload"></span></a></span></rb>
  1119. </div>
  1120.  
  1121. <div class="tags">{block:HasTags}
  1122. {block:Tags}<a href="{TagURL}">#<font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
  1123. {/block:Tags}
  1124. {/block:HasTags}</div>
  1125. {/block:IndexPage}
  1126.  
  1127.  
  1128. {block:PermalinkPage}
  1129. <div class="info">
  1130. {block:Date}<span>
  1131. <a href="{Permalink}">
  1132. <b>{ShortMonth} {DayOfMonthWithZero}</b></a> with <b><a href="{Permalink}">{NoteCountWithLabel}</b></a></span>
  1133. {/block:Date}
  1134. <span>
  1135. </span>
  1136. </div>
  1137.  
  1138. <div class="tags">{block:HasTags}
  1139. {block:Tags}<a href="{TagURL}">#<font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
  1140. {/block:Tags}
  1141. {/block:HasTags}</div>
  1142. {/block:PermalinkPage}
  1143.  
  1144.  
  1145. </div><!----POST END---->
  1146.  
  1147. {block:PostNotes}
  1148. {PostNotes}
  1149. {/block:PostNotes}
  1150. {/block:Posts}
  1151.  
  1152. </div><!--END DEFAULT-->
  1153.  
  1154.  
  1155. <div id="entries">
  1156.  
  1157. <div id="maintitle">{text:main title}</div>
  1158.  
  1159.  
  1160. </div><!----ENTRIES END---->
  1161. </div>
  1162.  
  1163. <div id="credits">
  1164. <div class="pulse">
  1165. <a href="https://drunkblushed.tumblr.com/" title="made by dana">
  1166. <span class="th th-heart-1-o"></a></div></div>
  1167.  
  1168.  
  1169. </body>
  1170.  
  1171. </html>
Advertisement
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!