API tools faq
paste
drunkblushed

juicy by drunkblushed

drunkblushed
Apr 20th, 2020 (edited)
3,942
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.71 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♡ JUICY 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. <title>{title}</title>
  16.  
  17.  
  18. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  19.  
  20. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  21.  
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  23.  
  24. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("[title]").style_my_tooltips();
  29. });
  30. })(jQuery);
  31. </script>
  32.  
  33.  
  34. <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
  35.  
  36. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  37.  
  38. <style type="text/css">
  39.  
  40. /*----------------- TEXT STYLES -----------------*/
  41.  
  42. body{
  43. background-color: #ededed; font-family: 'Montserrat', sans-serif;
  44. color:#474747; letter-spacing:1px; color:#474747; font-size:9px;
  45. font-weight:500; background-image:url();
  46. }
  47.  
  48. a:link, a:active, a:visited{
  49. color: #7e92a2; text-decoration:none; -webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;text-transform:uppercase;
  50. }
  51.  
  52. a:hover {color:;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  53. }
  54.  
  55. b,bold,strong{color:#d4aca0;text-transform:uppercase;
  56. }
  57.  
  58. em,i,italic{color:#98aab0;
  59. }
  60.  
  61.  
  62. ::-webkit-scrollbar-thumb {
  63. display: none;
  64. }
  65.  
  66. ::-webkit-scrollbar {
  67. display: none;
  68. }
  69.  
  70. #s-m-t-tooltip {
  71. z-index: 999999999999999999;background: #fff;font-size: 7.5px;line-height: 13px;letter-spacing: 1.5px;text-transform: uppercase;color: #474747;font-weight:900;background-color:#f3f3f3;border:1px solid #dadada;max-width: 150px;word-wrap: break-word;padding: 2px 5px 2px 6px;display: block;margin: 24px 14px 7px 12px;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  72. }
  73.  
  74. ::-moz-selection { background: #e7d8cf; }
  75. ::selection { background: #e7d8cf; }
  76.  
  77. /*----------------- IPHONE-----------------*/
  78.  
  79. #iphonebase{
  80. padding:20px;z-index:99;margin: auto;left:0px;top:91px;bottom:0px;right:0px;width:175px;position:absolute;height:335px;overflow-y:scroll;background-color: #3c3c3c;overflow-x:hidden;border-radius:15px 15px 0px 0px;border-left:16px solid #3c3c3c;border-right:15px solid #3c3c3c;border-top:15px solid #3c3c3c;
  81. }
  82.  
  83. #screen {
  84. margin: auto;left:0px;top:100px;bottom:0px;right:0px;position:absolute;width:230px;height:380px;overflow:auto;color:#474747;z-index:999;-webkit-animation: fadeEffect 0.7s;animation: fadeEffect 0.7s;border-radius:15px 15px 0px 0px;background-color:#eaeaea;
  85. }
  86.  
  87.  
  88.  
  89. /*----------------- CUSTOMIZATIONS -----------------*/
  90.  
  91. #instagram{width:280px;height:90px;margin: auto;left:585px;top:360px;bottom:0px;right:0px;z-index:9999;display:inline;position:fixed;
  92. }
  93.  
  94. .insta{width:80px;height:80px;display:inline-block;border-radius:10px;overflow:hidden;margin:5px;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  95. }
  96.  
  97. .insta img{width:80px;height:80px;
  98. order-radius:10px;
  99. }
  100.  
  101. .instalikes{width:60px;height:50px;padding:32px 10px;text-align:center;background-color:rgba(256,256,256,0.8);opacity:0;border-radius:10px;font-size:12px;color:#d4aca0;font-weight:bold;
  102. }
  103.  
  104. .instalikes i{font-size:10px;color:#d4aca0;
  105. }
  106.  
  107. .insta:hover .instalikes{opacity:1;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  108. }
  109.  
  110. #snapchat{position:fixed;width:200px;height:180px;margin: auto;left:00px;top:-170px;bottom:0px;right:480px;
  111. }
  112.  
  113. #snapchat img{width:80px;height:150px;border-radius:10px;margin:5px;
  114. }
  115.  
  116. #snapchat p{font-size:7.5px;letter-spacing:2px;color:#474747;margin:5px;margin-bottom:5px;
  117. }
  118.  
  119. #google{position:fixed;width:225px;height:195px;margin: auto;left:540px;top:-130px;bottom:0px;right:0px;z-index:9999;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  120. }
  121.  
  122. #searchbar{width:210px;height:14px;background-color:#f3f3f3;border-radius:10px;padding:8px;padding-top:8px;font-size:11px;box-shadow: 0px 0px 17px -7px rgba(122,122,122,0.5);position:relative;z-index:99;font-weight:bold;color:#d4aca0;
  123. }
  124.  
  125. #results{background-color:#f3f3f3;opacity:0.9;width:200px;height:135px;padding:13px;border-radius:0px 0px 10px 10px;padding-top:25px;overflow:scroll;position:absolute;margin-top:-10px;
  126. }
  127.  
  128. #google:hover #results{height:180px;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  129. }
  130.  
  131. #google:hover{transform:scale(1.1);-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  132. }
  133.  
  134. #results .name{font-size:14px;color:#3c3c3c;letter-spacing:0px;font-weight:bold;margin-top:10px;
  135. }
  136.  
  137. #results .title{font-size:10px;color:{color:#bbb};
  138. }
  139.  
  140. #results .bio{font-size:8.5px;line-height:150%;margin-top:-10px;
  141. }
  142.  
  143. #results img{width:200px;height:80px;border-radius:10px;
  144. }
  145.  
  146. .googlecontrols{float:right;margin:5px;margin-top:0px;font-size:11px;
  147. }
  148.  
  149. .googlecontrols .material-icons{font-size:16px;color:#bbb;
  150. }
  151.  
  152. #stats{font-family:"creo";font-size:14px;position:fixed;margin-top:15px;margin-left:30px;color:#98aab0;width:180px;text-align:center;word-spacing:0px;overflow:hidden;letter-spacing:2.5px;font-weight:bold;
  153. }
  154.  
  155.  
  156. .blinking{
  157. animation:blinkingText 1.2s infinite;
  158. }
  159. @keyframes blinkingText{
  160. 0%{ color: #98aab0; }
  161. 49%{ color: #98aab0; }
  162. 60%{ color: transparent; }
  163. 99%{ color:transparent; }
  164. 100%{ color: #98aab0; }
  165. }
  166.  
  167. @import "compass/css3";
  168.  
  169. .blobfill{fill:#e7d8cf; width: 800px;height:700px;position:absolute;transform:rotate(-15deg);margin-top:28px;margin-left:10px;
  170. }
  171.  
  172.  
  173. #blob{margin:auto;right:0px;top:-20px;left:-10px;bottom:0px;width: 820px;height:500px;overflow: hidden;position:fixed;
  174. }
  175.  
  176. #notif{position:fixed;top:245px;right:540px;left:0px;bottom:0px;margin:auto;border-radius:15px;width:200px;height:30px;padding:10px;background-color:#f3f3f3;opacity:0.8;line-height:150%;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;overflow:auto;font-size:9px;border-bottom:10px solid #f3f3f3;
  177. }
  178.  
  179. #notif img{width:40px;height:40px;border-radius:50%;float:left;margin-right:10px;
  180. }
  181.  
  182. #notif:hover{transform: scale(1.1);opacity:0.9;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;height:55px;
  183. }
  184.  
  185. #notif2{position:fixed;top:385px;right:560px;left:0px;bottom:0px;margin:auto;border-radius:15px;width:220px;height:30px;padding:10px;background-color:#f3f3f3;opacity:0.8;line-height:150%;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;overflow:auto;font-size:9px;border-bottom:10px solid #f3f3f3;
  186. }
  187.  
  188. #notif2 img{width:40px;height:40px;border-radius:50%;float:left;margin-right:10px;
  189. }
  190.  
  191. #notif2:hover{transform: scale(1.1);opacity:0.9;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;height:55px;
  192. }
  193.  
  194.  
  195.  
  196. #spotify{position:fixed;top:170px;right:0px;left:515px;bottom:0px;margin:auto;border-radius:15px;width:200px;height:60px;background-color:#f3f3f3;opacity:0.8;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;overflow:hidden;
  197. }
  198.  
  199. #spotify:hover{transform: scale(1.1);opacity:0.9;-webkit-transition: all 0.2s ;-moz-transition: all 0.2s ;transition: all 0.2s ;
  200. }
  201.  
  202. .songtitle{font-size:12px;color:#d4aca0;margin-top:15px;margin-left:70px;font-weight:bold;
  203. }
  204.  
  205. .songartist{font-size:8.5px;margin-left:70px;margin-top:5px;color:#474747;
  206. }
  207.  
  208. #player{border-radius:10px;position:absolute;
  209. }
  210.  
  211. #player i{width:30px;height:30px;padding:15px;float:left;text-align:center;background-color:#d4aca0;font-size:30px;color:#f3f3f3;
  212. }
  213.  
  214.  
  215. #bar{position:fixed;top:-268px;bottom:0px;right:0px;left:0px;margin: auto;width:80px;height:20px;border-radius:0px 0px 8px 8px;background-color:#3c3c3c;z-index:9999999999999999999999999999999;
  216. }
  217.  
  218. #phone{position:fixed;top:-260px;bottom:0px;right:0px;left:0px;margin: auto;width:205px;height:5px;background-color:transparent;padding:10px 15px;z-index:9999999999999999999999999999;font-size:9px;line-height:110%;letter-spacing:2.5px;border-radius:15px 15px 0px 0px;text-transform:uppercase;
  219. }
  220.  
  221. .phone{
  222. float:right;
  223. }
  224.  
  225. #phone span{font-size:10px;}
  226.  
  227. #phone .material-icons{font-size:11px; color:#fff; display: inline-block; margin-top:-5px; text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;}
  228.  
  229. #homescreen{width:200px; height:200px; position:fixed; margin:auto; left:0px; right:0px; top:0px; bottom:0px; z-index:9999;
  230. }
  231.  
  232. .lock{
  233. font-size:14px; text-shadow: 1px 1px 5px #bbb;text-align:center; margin-bottom:15px;
  234. }
  235.  
  236. .lock i{
  237. color:white;
  238. }
  239.  
  240. .time{
  241. font-size:42px; font-family:arial; color:white; text-shadow: 1px 1px 5px #888; text-align:center; letter-spacing:3px; font-weight:normal;
  242. }
  243.  
  244. .date{
  245. font-size:12px; letter-spacing:1px; color:white; text-shadow: 1px 1px 5px #888;text-align:center;font-family:arial;
  246. }
  247.  
  248.  
  249. /*----------------- NAVIGATION & PAGINATION -----------------*/
  250.  
  251. #sidelink{position:fixed;width:280px;height:60px;margin:auto;
  252. top:90px;left:0px;bottom:0px;right:535px;color:#f3f3f3;z-index:99999;
  253. }
  254.  
  255. #sidelink a{width:24px;height:24px;border-radius:15px;background-color:#d4aca0;color:#f3f3f3;font-size:24px;float:left;padding:12px;text-align:center;margin:8px;
  256. }
  257.  
  258. #sidelink a:hover{
  259. transform:scale(1.2);
  260. }
  261.  
  262. #sidelink span{
  263. color:#f3f3f3;
  264. }
  265.  
  266. #attention{width:230px;height:20px;position:fixed;margin:auto;top:-450px;bottom:0px;left:0px;right:0px;z-index:99999999999;
  267. }
  268.  
  269. .attention{width:210px;height:12px;padding:10px;background-color:#d4aca0;color:#f3f3f3;
  270. border-radius:10px;text-align:center;text-transform:uppercase;font-size:9.5px;letter-spacing:2px;font-weight:bold;
  271. }
  272.  
  273. .attention::after{content: " ";position: absolute;top: 100%;left: 50%;margin-left: -15px;margin-top:-5px;border-width: 15px;border-style: solid;border-color: #d4aca0 transparent transparent transparent;
  274. }
  275.  
  276. .scale-up-center {
  277. -webkit-animation: scale-up-center 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
  278. animation: scale-up-center 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
  279. }
  280.  
  281. @-webkit-keyframes scale-up-center {
  282. 0% {
  283. -webkit-transform: scale(0.8);
  284. transform: scale(0.8);
  285. }
  286. 100% {
  287. -webkit-transform: scale(1);
  288. transform: scale(1);
  289. }
  290. }
  291. @keyframes scale-up-center {
  292. 0% {
  293. -webkit-transform: scale(0.8);
  294. transform: scale(0.8);
  295. }
  296. 100% {
  297. -webkit-transform: scale(1);
  298. transform: scale(1);
  299. }
  300. }
  301.  
  302. /*----------------- CREDITS / DO NOT TOUCH! that means you can't change the sizing, color, placement, and general appearance of the credit. -----------------*/
  303. #credits{position:fixed;bottom:10px;right:15px;width:36px;height:36px;text-align:center;
  304. }
  305.  
  306. #credits a{font-weight:bold; ;width:36px;height:36px;padding:0px;display:inline-block;-webkit-text-fill-color: #f3f3f3;background-color:#d4aca0;font-size:18px;border-radius:50%;
  307. }
  308.  
  309. #credits span{padding:5px;padding-top:10px;padding-right:5px;
  310. }
  311.  
  312. .pulse a:hover{
  313. animation: pulse 1s infinite;
  314. animation-timing-function: ;
  315. }
  316.  
  317. @keyframes pulse {
  318. 0% { transform: scale(1); }
  319. 50% { transform: scale(1.3);
  320. 100% { transform: scale(1); }
  321. }
  322.  
  323. {CustomCSS}
  324. </style>
  325.  
  326. <link rel="shortcut icon" href="{Favicon}">
  327. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />
  328.  
  329.  
  330. </head>
  331.  
  332. <body>
  333.  
  334. <!---MOVING NOTIF---->
  335. <div id="attention">
  336. <div class="scale-up-center">
  337. <div class="attention">you have one notification!</div>
  338. </div></div>
  339.  
  340. <!---BLOB---->
  341. <div id="blob">
  342. <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 488.05 429.63" xml:space="preserve" class="blobfill">
  343. <path d="M413.3,116.4c25.3,23.6,31.9,68.9,53.7,109.4s58.5,76.2,64,114.5-20.1,79.2-51.4,115.3S411.5,523,372.1,525.4s-81.4-24.2-119.8-44.1-73.2-33.2-109.7-55.8S68,370.9,52.1,329.3,42.6,236.5,74,208.9s87.9-31.8,129.7-47.9,69.1-44,104.7-57S387.9,92.8,413.3,116.4Z" transform="translate(-43.72 -95.91)"/></svg>
  344. </div>
  345.  
  346. <!---PHONE BASE---->
  347. <div id="phone">
  348. <div class="phone">
  349. <i class="material-icons">wifi</i>
  350. <i class="material-icons">signal_cellular_alt</i>
  351. <i class="material-icons">battery_full</i>
  352. </div>
  353. </div><div id="bar"></div>
  354.  
  355. <div id="homescreen">
  356. <div class="lock"><i class="th th-closed-lock-o"></i></div>
  357. <div class="time">4:20</div>
  358. <div class="date">Tuesday, April 21</div>
  359. </div>
  360.  
  361. <!---CONNECTION #1---->
  362. <div id="notif">
  363. <img src="https://via.placeholder.com/40">
  364. <b>connection #1</b><br/>
  365. this is a sample notif. if you like this theme, please consider donating to my ko-fi! thank u ♥
  366. </div>
  367.  
  368. <!---CONNECTION #2---->
  369. <div id="notif2">
  370. <img src="https://via.placeholder.com/40">
  371. <b>connection #2</b><br/>
  372. this is a sample notif. if you like this theme, please consider donating to my ko-fi! thank u ♥
  373. </div>
  374.  
  375. <!---SPOTIFY---->
  376. <div id="spotify">
  377. <div id="player"><i class="th th-play"></i>
  378. <div class="songtitle">Song Name</div>
  379. <div class="songartist">Song Artist</div>
  380. </div>
  381. </div>
  382.  
  383. <!---LINKS---->
  384. <div id="sidelink">
  385. <a href="/" title="musings"><span class="th th-user"></span></a>
  386. <a href="/" title="threads"><span class="th th-chat-bubbles"></span></a>
  387. <a href="/" title="visage"><span class="th th-camera"></span></a>
  388. <a href="/" title="board"><span class="th th-pinterest-o"></span></a>
  389. </div>
  390.  
  391.  
  392. <!---INSTAGRAM---->
  393. <div id="instagram">
  394. <!--insta post--><div class="insta" style="background-image:url('https://via.placeholder.com/80');"><div class="instalikes"><i class="th th-heart-1"></i> 15.5K</div></div>
  395.  
  396. <!--insta post--><div class="insta" style="background-image:url('https://via.placeholder.com/80');"><div class="instalikes"><i class="th th-heart-1"></i> 25.3K</div></div>
  397.  
  398. <!--insta post--><div class="insta" style="background-image:url('https://via.placeholder.com/80');"><div class="instalikes"><i class="th th-heart-1"></i> 35.8K</div></div>
  399. </div>
  400.  
  401. <!---SNAPCHAT---->
  402. <div id="snapchat">
  403. <p><b>THEA </b> SENT YOU A SNAP!</p>
  404. <!---snap---><img src="https://via.placeholder.com/80x150">
  405. <!---snap---><img src="https://via.placeholder.com/80x150">
  406. </div>
  407.  
  408. <!---GOOGLE---->
  409. <div id="google">
  410. <!---search word---><div id="searchbar">THEA DELGADO
  411. <div class="googlecontrols">
  412. <i class="material-icons">close</i>&nbsp;
  413. <i class="material-icons">mic</i>
  414. <i class="material-icons">search</i></div>
  415. </div>
  416.  
  417. <div id="results">
  418. <!---result image--><img src="https://via.placeholder.com/200x80">
  419. <!---result name---><div class="name">Thea Delgado</div>
  420. <!---result title---><div class="title">Executive Assistant</div>
  421. <p style="font-size:7px;">SHOWING 1,000 SEARCH RESULTS </p>
  422.  
  423. <!--CHARACTER BIO--->
  424. <div class="bio"><BR/>
  425. in the grandest act of defiance, thea cut off ties with her family. she was so confident that she could be independent and make it without her parents’ help. and yet…she’s stuck at a job she doesn’t like in a city where she knows no one. hopefully, it’s just a bump on the road to success.
  426. </div></div>
  427. </div><!---end google--->
  428.  
  429.  
  430.  
  431. <!----WALLPAPER--->
  432. <div id="screen">
  433. <img src="https://via.placeholder.com/230x380">
  434. </div><!--end screen-->
  435. <div id="iphonebase">
  436. </div><!----end iphone---->
  437.  
  438.  
  439. <!---PLEASE DO NOT TOUCH THIS AT ALL THANKS--->
  440. <div id="credits">
  441. <div class="pulse">
  442. <a href="https://drunkblushed.tumblr.com/" title="made by dana">
  443. <span class="th th-heart-1-o"></a></div></div>
  444. </body>
  445.  
  446. </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!