API tools faq
paste
drunkblushed

young & alive by drunkblushed

drunkblushed
Aug 12th, 2020 (edited)
2,156
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.66 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ♡ YOUNG AND ALIVE 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.  
  16.  
  17. <meta name="color:background" content="#e7e7e7"/>
  18. <meta name="color:container" content="#f0f0f0"/>
  19. <meta name="color:posts" content="#e7e7e7"/>
  20. <meta name="color:accent" content="#93ad9d"/>
  21. <meta name="color:title" content="#93ad9d"/>
  22. <meta name="color:bold" content="#93ad9d"/>
  23. <meta name="color:italic" content="#93ad9d"/>
  24. <meta name="color:text" content="#3c3c3c"/>
  25. <meta name="color:link" content="#93ad9d"/>
  26. <meta name="color:borders" content="#f0f0f0"/>
  27. <meta name="color:permalink" content="#3c3c3c"/>
  28. <meta name="color:permalink bg" content="#93ad9d"/>
  29.  
  30. <meta name="image:background" content=""/>
  31. <meta name="image:header" content="https://via.placeholder.com/800x315"/>
  32. <meta name="image:graphic" content="https://via.placeholder.com/200x270"/>
  33. <meta name="image:icon" content="https://via.placeholder.com/50x50"/>
  34. <meta name="image:leftpost" content="https://via.placeholder.com/140x90"/>
  35. <meta name="image:rightpost" content="https://via.placeholder.com/140x90"/>
  36.  
  37. <meta name="text:main title" content="young & alive"/>
  38. <meta name="text:url" content"drunkblushed" />
  39. <meta name="text:stats" content"name. age. timezone." />
  40. <meta name="text:side description" content="lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"/>
  41. <meta name="text:link 1 url" content="link 1 url" />
  42. <meta name="text:link 1 title" content="link 1 title" />
  43. <meta name="text:link 2 url" content="link 2 url" />
  44. <meta name="text:link 2 title" content="link 2 title" />
  45. <meta name="text:link 3 url" content="link 3 url" />
  46. <meta name="text:link 3 title" content="link 3 title" />
  47. <meta name="text:link 4 url" content="link 4 url" />
  48. <meta name="text:link 4 title" content="link 4 title" />
  49. <meta name="text:link 5 url" content="link 5 url" />
  50. <meta name="text:link 5 title" content="link 5 title" />
  51. <meta name="text:link 6 url" content="link 6 url" />
  52. <meta name="text:link 6 title" content="link 6 title" />
  53. <meta name="text:link 7 url" content="link 7 url" />
  54. <meta name="text:link 7 title" content="link 7 title" />
  55. <meta name="text:link 8 url" content="link 8 url" />
  56. <meta name="text:link 8 title" content="link 8 title" />
  57.  
  58. <title>{title}</title>
  59.  
  60. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  61.  
  62. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  63.  
  64. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  65. <script>
  66. $(document).ready(function(){
  67. $('.video iframe').each(function(){
  68. var scale = $(this).parents('.video').width() / 500;
  69. $(this).attr({
  70. width: Math.floor($(this).attr('width') * scale),
  71. height: Math.floor($(this).attr('height') * scale)
  72. });
  73. });
  74. });
  75. </script>
  76.  
  77. <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  78. <script>
  79. (function($){
  80. $(document).ready(function(){
  81. $("[title]").style_my_tooltips();
  82. });
  83. })(jQuery);
  84. </script>
  85.  
  86.  
  87. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  88.  
  89.  
  90. <link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
  91.  
  92. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  93.  
  94. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  95.  
  96. <style type="text/css">
  97.  
  98. /*----------------- FONTS -----------------*/
  99.  
  100. @font-face { font-family: "creo"; src: url('https://dl.dropboxusercontent.com/s/uk7fcayvza8gd9t/Creo-ExtraBold.ttf') ;}
  101.  
  102. @font-face { font-family: "fonty"; src: url('https://dl.dropboxusercontent.com/s/unqlsh1wqx2by26/Abiland.otf') ;}
  103.  
  104. /*----------------- TEXT STYLES -----------------*/
  105.  
  106. body{
  107. background-color:{color:background};font-family: 'Montserrat', sans-serif;color:{color:text};letter-spacing:1px;color:{color:text};font-size:9px;font-weight:500; background-image:url({image:background});
  108. }
  109.  
  110. a:link, a:active, a:visited{color: {color:Link};text-decoration:none;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;transition: all 0.2s linear;text-transform:uppercase;font-weight:bold;
  111. }
  112.  
  113. a:hover {color:{color:Link Hover};-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;transition: all 0.2s linear;
  114. }
  115.  
  116. b,bold,strong{color:{color:bold};text-transform:uppercase;
  117. }
  118.  
  119. em,i,italic{color:{color:italic};
  120. }
  121.  
  122. big{font-size:15px;font-family: 'Montserrat', sans-serif;
  123. }
  124.  
  125. small,sup, sub{font-size:9px;
  126. }
  127.  
  128. h1{font-family: "creo";padding:20px;
  129. letter-spacing:1px;padding:20px 20px 5px;text-align:center;font-size: 24px;text-transform:uppercase;line-height: 120%;color:{color:accent};}
  130.  
  131. h2{font-family: "creo";padding:10px 15px 5px;letter-spacing:1px;text-align:center;font-size: 16px;text-transform:uppercase;line-height: 120%;color:{color:accent};}
  132.  
  133. h3{font-family:"montserrat"; font-size:10px; text-align:left; font-weight:900; color:{color:text};}
  134.  
  135. .posttitle{
  136. font-family: "creo";
  137. padding:20px 20px 5px;
  138. letter-spacing:1px;
  139. text-align:center;
  140. font-size: 24px;
  141. text-transform:uppercase;
  142. line-height: 120%;
  143. -webkit-text-stroke: 1px {color:accent};
  144. -webkit-text-fill-color: rgba(0, 0, 0, 0);
  145. }
  146.  
  147. blockquote{
  148. margin-left:0px;
  149. padding-left:15px;
  150. border-left: 1px solid {color:borders};
  151. width:95%;
  152. }
  153.  
  154. blockquote img{
  155. max-width:250px;
  156. }
  157.  
  158.  
  159. .p { padding-top: 5px;}
  160. .ol, ul { margin-left: 30px; padding: 5px; }
  161. .ul { list-style-type: square; }
  162.  
  163. ::-webkit-scrollbar-thumb {
  164. display: none;
  165. }
  166.  
  167. ::-webkit-scrollbar {
  168. display: none;
  169. }
  170.  
  171. #s-m-t-tooltip {
  172. z-index: 999999999999999999;
  173. background: #fff;
  174. font-size: 8px;
  175. line-height: 13px;
  176. letter-spacing: 1.5px;
  177. text-transform: uppercase;
  178. color: {color:text};
  179. font-weight:900;
  180. background-color:{color:posts};
  181. border:1px solid {color:borders};
  182. border-radius:5px;
  183. max-width: 150px;
  184. word-wrap: break-word;
  185. padding: 2px 5px 2px 6px;
  186. display: block;
  187. margin: 24px 14px 7px 12px;
  188. -webkit-transition: all 0.2s linear;
  189. -moz-transition: all 0.2s linear;
  190. transition: all 0.2s linear;
  191. }
  192.  
  193. ::-moz-selection { background: {color:accent}; }
  194. ::selection { background: {color:accent}; }
  195.  
  196. /*----------------- CONTAINERS & POSTS -----------------*/
  197.  
  198. #container{
  199. padding:30px;
  200. z-index:99;
  201. margin: auto;
  202. left:0px;
  203. top:0px;
  204. bottom:0px;
  205. right:0px;
  206. width:650px;
  207. position:absolute;
  208. height:420px;
  209. overflow-y:scroll;
  210. background-color: {color:container};
  211. overflow-x:hidden;
  212. border-radius:15px;
  213. }
  214.  
  215. #entries {
  216. margin: auto;
  217. left:-305px;
  218. top:0px;
  219. bottom:0px;
  220. right:0px;
  221. position:absolute;
  222. width:350px;
  223. height:530px;
  224. overflow:auto;
  225. color:{color:text};
  226. z-index:999;
  227. background-color:transparent;
  228. border-radius:15px;
  229. }
  230.  
  231. #post {
  232. font-size:9px;
  233. background-color:{color:posts};
  234. padding:0px;
  235. width:300px;
  236. z-index:99;
  237. margin-top:0px;
  238. margin-left:0px;
  239. line-height:160%;
  240. letter-spacing:1px;
  241. border-radius:15px 15px 0px 0px;
  242. }
  243.  
  244. #post .caption{
  245. padding:15px 20px;
  246. }
  247.  
  248. #post .caption blockquote img{
  249. max-width:260px;
  250. }
  251.  
  252. #post .caption img{
  253. max-width:260px;
  254. }
  255.  
  256. #tags {position:relative;
  257. text-align:left;
  258. color:{color:link};
  259. padding-top:10px;
  260. font-size:6.5px;
  261. letter-spacing:2px;
  262. font-family: 'Montserrat', sans-serif;
  263. text-transform:uppercase;
  264. -webkit-transition: all 0.2s linear;
  265. -moz-transition: all 0.2s linear;
  266. transition: all 0.2s linear;
  267. line-height:130%;
  268. margin-top:0px;
  269. margin-bottom:40px;
  270. width:300px;
  271. }
  272.  
  273. #tags a{
  274. color:{color:text};
  275. }
  276.  
  277. #tags span{
  278. font-size:7.5px;
  279. color:{color:bold};
  280. }
  281.  
  282. #post img{
  283. max-width:300px;
  284. height:auto;
  285. }
  286.  
  287.  
  288.  
  289. #info{
  290. background:{color:permalink bg};
  291. position:relative;
  292. padding:15px;
  293. margin-top:0px;
  294. margin-bottom:0px;
  295. text-transform:uppercase;
  296. letter-spacing:1px;
  297. color:{color:permalink};
  298. font-size:8px;
  299. line-height:100%;
  300. width:270px;
  301. border-radius:0px 0px 15px 15px;
  302. }
  303.  
  304. #info span{
  305. text-align:left;
  306. padding-left:-20px;
  307. text-transform:uppercase;
  308. margin-top:2px;
  309. padding-right:5px;
  310. font-size:8px;
  311. }
  312.  
  313. #info rb{
  314. right:0%;
  315. position:absolute;
  316. padding-right:0px;
  317. margin-top:-1px;
  318. margin-right:8px;
  319. }
  320.  
  321. #info b{
  322. font-weight:900;
  323. color:{color:permalink};
  324. }
  325.  
  326. #info a{
  327. margin-left:0px;
  328. font-size:8px;
  329. color: {color:permalink};
  330. }
  331.  
  332.  
  333. .photoset-grid {
  334. grid-gap: 3px;
  335. overflow: hidden;
  336. border-radius:15px 15px 0px 0px;
  337. }
  338.  
  339. .photoset-grid img {
  340. max-width:100%;
  341. }
  342.  
  343. .photopost{
  344. border-radius:15px 15px 0px 0px;
  345. }
  346.  
  347. .photopost img{
  348. max-width:300px;
  349. }
  350.  
  351. /*----------------- CUSTOMIZATIONS -----------------*/
  352.  
  353. #stats{
  354. font-family:"montserrat";
  355. font-size:8.5px;
  356. position:fixed;
  357. margin:auto; bottom:0px; top:215px; left:200px; right:0px;
  358. color:{color:text};
  359. width:190px;
  360. height:10px;
  361. text-align:center;
  362. word-spacing:0px;
  363. overflow:hidden;
  364. letter-spacing:2.5px;
  365. font-weight:bold;
  366. z-index:999;
  367. }
  368.  
  369. .description {width:190px; height:95px; line-height:225%; margin:auto; bottom:0px; top:350px; left:200px; right:0px; display:block; font-size:7px; overflow:hidden; position:fixed; text-transform:uppercase; text-align:justify; letter-spacing:1.5px;}
  370.  
  371. .blinking{
  372. animation:blinkingText 1.2s infinite;
  373. }
  374. @keyframes blinkingText{
  375. 0%{ color: {color:italic}; }
  376. 49%{ color: {color:italic}; }
  377. 60%{ color: transparent; }
  378. 99%{ color:transparent; }
  379. 100%{ color: {color:italic}; }
  380. }
  381.  
  382.  
  383. #tophalf {position:absolute; width:800px; height:315px; margin:auto; top:0px; left:0px; display:block; background-color:{color:accent}; background-image:url('{image:header}');}
  384.  
  385. #tophalf img {width:300px; height:350px; border-radius:0px 0px 0px 250px;}
  386.  
  387. #graphic {position:fixed; height:270px; width:200px; margin:auto; bottom:0px; top:-120px; left:340px; right:0px; display:inline-block; z-index:9999999; }
  388.  
  389. #graphic img {width:200px; height:270px;}
  390.  
  391.  
  392.  
  393. #maintitle{font-family:"fonty";font-size:46px;position:fixed;margin:auto;top:-450px; bottom:0px; left:335px; right:0px;width:330px;height:20px;text-align:center;letter-spacing:0px;line-height:100%;z-index:9999;color:{color:title};
  394. }
  395.  
  396.  
  397. #leftpost{
  398. width:140px;height:140px;border-radius:15px;padding-top:5px;padding-bottom:5px;position:fixed;margin:auto;top:-70px;left:150px;right:0px;bottom:0px;background-color:{color:posts};transform:rotate(-5deg);z-index:999; font-size:7.5px; -webkit-font-smoothing: subpixel-antialiased;
  399. }
  400.  
  401. #leftpost .instaicon{width:20px;height:20px;display:block;border-radius:50%;margin-left:5px;margin-bottom:5px; float:left; margin-right:5px;
  402. }
  403.  
  404. #leftpost .instaicon img{width:20px;height:20px;border-radius:50%;
  405. }
  406.  
  407. #leftpost img{width:140px;height:90px;
  408. }
  409.  
  410. #leftpost p{margin-left:8px;margin-top:5px;font-size:4px;margin-right:5px;
  411. }
  412.  
  413. #rightpost{width:140px;height:140px;border-radius:15px;padding-top:5px;padding-bottom:5px;position:fixed;margin:auto;top:-170px;left:520px;right:0px;bottom:0px;background-color:{color:posts};transform:rotate(5deg);z-index:999; font-size:7.5px; -webkit-font-smoothing: subpixel-antialiased;
  414. }
  415.  
  416. #rightpost .instaicon{width:20px;height:20px;display:block;border-radius:50%;margin-left:5px;margin-bottom:5px; float:left; margin-right:5px;
  417. }
  418.  
  419. #rightpost .instaicon img{width:20px;height:20px;border-radius:50%;
  420. }
  421.  
  422. #rightpost img{width:140px;height:90px;
  423. }
  424.  
  425. #rightpost p{margin-left:8px;margin-top:5px;font-size:4px;margin-right:5px;
  426. }
  427.  
  428. #favorite{width:30px;height:10px;position:fixed;margin:auto;top:-320px;bottom:0px;left:90px;right:0px;z-index:99999999999;
  429. }
  430.  
  431. .favorite{width:20px;height:10px;padding:10px;background-color:{color:bold};color:#f3f3f3; border-radius:10px;text-align:center;text-transform:uppercase;font-size:9.5px;letter-spacing:2px;font-weight:bold;
  432. }
  433.  
  434. .favorite::after{content: " ";position: absolute;top: 100%;left: 50%;margin-top:20px;border-width: 5px;border-style: solid;border-color: {color:bold} transparent transparent transparent;
  435. }
  436.  
  437. .favorite span{color:white; font-size:16px; margin-top:-3px;}
  438.  
  439.  
  440. #comment{width:30px;height:10px;position:fixed;margin:auto;top:60px;bottom:0px;left:580px;right:0px;z-index:99999999999;
  441. }
  442.  
  443. .comment{width:20px;height:10px;padding:10px;background-color:{color:bold};color:#f3f3f3; border-radius:10px;text-align:center;text-transform:uppercase;font-size:9.5px;letter-spacing:2px;font-weight:bold;
  444. }
  445.  
  446. .comment::after{content: " ";position: absolute;bottom: 100%;left: 50%;margin-top:20px;border-width: 5px;border-style: solid;border-color: transparent transparent {color:bold} transparent;
  447. }
  448.  
  449. .comment span{color:white; font-size:16px; margin-top:-3px;}
  450.  
  451. /*----------------- TABS STYLING -----------------*/
  452.  
  453. .tabcontent {
  454. margin: auto;
  455. left:-355px;
  456. top:0px;
  457. bottom:0px;
  458. right:0px;
  459. position:absolute;
  460. width:305px;
  461. height:430px;
  462. overflow:auto;
  463. color:{color:text};
  464. z-index:999;
  465. background-color:transparent;
  466. border-radius:15px;
  467. -webkit-animation: fadeEffect 0.8s;
  468. animation: fadeEffect 0.8s;
  469. }
  470.  
  471.  
  472. @-webkit-keyframes fadeEffect {
  473. from {opacity: 0.1;}
  474. to {opacity: .9;}
  475. }
  476.  
  477. @keyframes fadeEffect {
  478. from {opacity: 0.1;}
  479. to {opacity: .9;}
  480. }
  481.  
  482. .tabsclose {
  483. font-size:14px;
  484. padding:3px;
  485. color:{color:italic};
  486. margin-top:-10px;
  487. margin-right:-10px;
  488. position:fixed;
  489. z-index:9999999999999999999999999;
  490. }
  491.  
  492. .tabdesc{
  493. margin-top:130px;
  494. width:270px;
  495. height:110px;
  496. padding:15px;
  497. background-color:{color:posts};
  498. border-radius:15px;
  499. overflow:auto;
  500. }
  501.  
  502. .tabdesc span{
  503. font-size:15px;
  504. font-family:"montserrat";
  505. font-weight:bold;
  506. color:{color:bold};
  507. float:left;
  508. padding:10px 5px 0px 0px;
  509. }
  510.  
  511. .tabdesc p{
  512. margin-top:5px;
  513. margin-bottom:-5px;
  514. }
  515.  
  516. #tablink{
  517. position:fixed;
  518. width:300px;
  519. height:100px;
  520. margin-left:0px;
  521. margin-top:0px;
  522. z-index:999999999999999999999999999;
  523. text-align:left;
  524. }
  525.  
  526. #tablink a{
  527. background-color:{color:posts};
  528. color:{color:accent};
  529. width:50px;
  530. height:50px;
  531. padding:0px;
  532. display:inline-block;
  533. border-radius:50%;
  534. font-size:20px;
  535. margin:0px 10px 10px 0px;
  536. margin-right:20px;
  537. text-align:center;
  538. }
  539.  
  540. #tablink span{
  541. padding:5px;
  542. padding-top:15px;
  543. padding-right:5px;
  544. }
  545.  
  546. #tablink a:hover{
  547. border-radius:50%;
  548. background-color:{color:accent};
  549. color:{color:posts};
  550. }
  551.  
  552. #tabmuses{
  553. position:fixed;
  554. width:300px;
  555. height:115px;
  556. overflow:auto;
  557. margin-left:0px;
  558. margin-top:47px;
  559. z-index:999999999999999999999999999;
  560. text-align:left;
  561. }
  562.  
  563. #tabmuses img{
  564. width:50px;
  565. height:50px;
  566. margin:0px 10px 10px 0px;
  567. margin-right:20px;
  568. border-radius:50%;
  569. }
  570.  
  571. /*----------------- NAVIGATION & PAGINATION -----------------*/
  572.  
  573. #tabs{
  574. width:120px;
  575. height:20px;
  576. font-size:8px;
  577. z-index:99999999999999999;
  578. position:fixed;
  579. text-transform:uppercase;
  580. text-align:left;
  581. letter-spacing:2px;
  582. word-spacing:10px;
  583. font-weight:none;
  584. display:block;
  585. margin:auto;
  586. top:210px;
  587. bottom:0px;
  588. left:570px;
  589. right:0px;
  590. }
  591.  
  592. #tabs a{
  593. color:{color:bold};
  594. padding:7px;
  595. display:inline-block;
  596. border-radius:15px;
  597. background-color:{color:posts};
  598. width:90px;
  599. margin:4px;
  600. }
  601.  
  602. #tabs span{
  603. width:10px;
  604. height:10px;
  605. padding:5px;
  606. font-size:10px;
  607. background-color:{color:bold};
  608. border-radius:50%;
  609. margin-right:10px;
  610. color:{color:posts};
  611. }
  612.  
  613. #tabs a:hover{
  614. background-color:{color:bold};
  615. color:{color:posts};
  616. }
  617.  
  618. #pagination {
  619. font-family: 'roboto', sans-serif;
  620. font-size:10px;
  621. font-weight:900;
  622. width:300px;
  623. color:{color:accent};
  624. margin-left:0px;
  625. text-align:center;
  626. }
  627.  
  628. #pagination a{
  629. display:inline-block;
  630. color:{color:link};
  631. padding:7px 10px 5px 10px;
  632. background-color:{color:posts};
  633. border-radius:50%;
  634. }
  635.  
  636. #pagination a:hover{
  637. color:{color:pagination Hover};}
  638.  
  639.  
  640.  
  641. /*----------------- ASK POSTS -----------------*/
  642.  
  643. .question {
  644. padding:15px;
  645. background-color:{color:bold};
  646. color:{color:posts};
  647. margin-top:0px;
  648. margin-left:0px;
  649. width:270px;
  650. height:auto;
  651. margin-bottom:0px;
  652. border-radius:15px 15px 0px 0px;
  653. text-align:left;
  654. }
  655.  
  656. .asker img{
  657. border-radius:50%;
  658. float:left;
  659. margin-right:15px;
  660. }
  661.  
  662. .asker {
  663. color:{color:posts};
  664. font-size:12px;
  665. letter-spacing:1.5px;
  666. display:inline;
  667. position:relative;
  668. margin-top:15px;
  669. text-transform:uppercase;
  670. font-family:"montserrat";
  671. width:270px;
  672. line-height:100%;
  673. font-weight:bold;
  674. }
  675.  
  676. .asker a{
  677. color:{color:posts};
  678. margin-top:5px;
  679. }
  680.  
  681.  
  682. /*----------------- CHAT POSTS -----------------*/
  683.  
  684. .answer span,.convo li{margin:0 0 10px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}
  685.  
  686. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:{color:container};color:{color:text};left:10px}
  687.  
  688.  
  689. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:10px;float:right;background-color:{color:background};color:{color:text}}
  690.  
  691.  
  692. .answer{overflow:hidden}
  693. .asked p {
  694. text-align: left;
  695. margin: 0 0px 10px 0px;
  696. padding: 0;
  697. color:{color:text};
  698. font-size: 12px;
  699. line-height: 0px;
  700. }
  701. .footerright .viasrc {
  702. float: left;
  703. }
  704. .asked a {
  705. margin:0;padding:0;
  706. }
  707. .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}}
  708. .convo {
  709. overflow: hidden;
  710. list-style-type: none;
  711. padding: 0;
  712. margin: 0;
  713. }
  714.  
  715. /*----------------- PERMALINK PAGE -----------------*/
  716. ol.notes {
  717. width:300px;
  718. padding: 0px;
  719. margin: 0px 0px;
  720. list-style-type: none;
  721. margin-top:-10px;
  722. font-size:9px;}
  723.  
  724. ol.notes li.note {
  725. padding: 10px;
  726. }
  727.  
  728. ol.notes li.note img.avatar {
  729. vertical-align: -4px;
  730. margin-right: 10px;
  731. width: 16px;
  732. height: 16px;
  733. }
  734.  
  735. ol.notes li.note .answer_content {
  736. font-weight: normal;
  737. }
  738.  
  739. ol.notes li.note blockquote {
  740. border-color: {color:posts};
  741. padding: 4px 10px;
  742. margin: 10px 0px 0px 25px;
  743. }
  744.  
  745. ol.notes li.note blockquote a {
  746. text-decoration: none;}
  747.  
  748. .audiodetails{
  749. width:150px;
  750. position:relative;
  751. height:50px;
  752. display:block;
  753. margin-left:110px;
  754. margin-top:-75px;
  755. }
  756.  
  757. .audiobutton{
  758. width:30px;
  759. height:35px;
  760. overflow:hidden;
  761. position:relative;
  762. margin-top:-43px;
  763. margin-left:40px;
  764. z-index:999;
  765. }
  766.  
  767.  
  768. /*----------------- CREDITS / DO NOT TOUCH! -----------------*/
  769.  
  770. #credits{
  771. position:fixed;
  772. bottom:10px;
  773. right:15px;
  774. width:36px;
  775. height:36px;
  776. text-align:center;
  777. }
  778.  
  779. #credits a{
  780. font-weight:bold;
  781. font-family:"creo";
  782. width:36px;
  783. height:36px;
  784. padding:0px;
  785. display:inline-block;
  786. -webkit-text-fill-color: {color:posts};
  787. background-color:{color:bold};
  788. font-size:18px;
  789. border-radius:50%;
  790.  
  791. }
  792.  
  793. #credits span{
  794. padding:5px;
  795. padding-top:10px;
  796. padding-right:5px;
  797. }
  798.  
  799. #credits a:hover{
  800. font-family:"creo";
  801. }
  802.  
  803. .pulse a:hover{
  804. animation: pulse 1s infinite;
  805. animation-timing-function: linear;
  806. }
  807.  
  808. @keyframes pulse {
  809. 0% { transform: scale(1); }
  810. 50% { transform: scale(1.3);
  811. 100% { transform: scale(1); }
  812. }
  813.  
  814. {CustomCSS}
  815. </style>
  816.  
  817. <link rel="shortcut icon" href="{Favicon}">
  818. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />
  819.  
  820.  
  821. </head>
  822.  
  823. <body>
  824.  
  825. <div id="tabsDefault" class="tabcontent" style="overflow:auto;">
  826. {block:Posts}
  827.  
  828. <div id="post">
  829.  
  830. {block:text}
  831. {block:Title}
  832. <div class="posttitle">{Title}</div>
  833. {/block:Title}
  834. <div class="caption">{Body}</div>
  835. {/block:text}
  836.  
  837. {block:Link}
  838. <div class="posttitle">
  839. <a href="{URL}">{Name}</a>
  840. </div>
  841. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  842. {/block:Link}
  843.  
  844. {block:Photo}
  845. {LinkOpenTag}
  846. <a href="{permalink}">
  847. <img src="{PhotoURL-400}" alt="{PhotoAlt}" class="photopost" width="300px;"></a>
  848. {LinkCloseTag}
  849. </center>
  850. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  851. {block:ContentSource}
  852. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  853. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  854. {/block:SourceLogo}
  855. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  856. {/block:ContentSource}
  857. {block:ReblogParentURL}
  858. <!-- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  859. {/block:ReblogParentURL}
  860. {/block:Photo}
  861.  
  862. {block:Photoset}
  863. <div style="z-index:99999999999999999999;">
  864. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  865. </div>
  866. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  867. {/block:Photoset}
  868.  
  869. {block:Quote}
  870. <h1>{Quote}</h1>
  871. {block:Source}
  872. <div style="padding: 20px 20px 10px; text-align:center;">- {Source}</div>
  873. {/block:Source}
  874. {/block:Quote}
  875.  
  876. {block:Chat}
  877. {block:Title}
  878. <h1>{Title}</h1>{/block:Title}<br>
  879. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  880. {Line}</li>{/block:Lines}</ul>
  881. {/block:Chat}
  882.  
  883. {block:Audio}
  884. {block:AlbumArt}
  885. <img src="{AlbumArtURL}" width="70" height="70" style="border-radius:50%; padding:20px; position:relative;" />
  886. {/block:AlbumArt}
  887.  
  888. <div class="audiodetails">
  889. {block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  890. {block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  891. {/block:ExternalAudio}<b>Played:</b> {PlayCount} times</div>
  892. <div class="audiobutton">{AudioPlayerGrey}<br></div>
  893. {block:Caption}<div class="caption"><br/>{Caption}</div>{/block:Caption}
  894. {/block:Audio}
  895.  
  896. {block:Video}
  897. <div class="video">{Video-500}</div>
  898. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  899. {/block:Video}
  900.  
  901. {block:Answer}
  902. <div class="question">
  903. <div class="asker">
  904. <img src="{AskerPortraitURL-30}" float="left">{Asker}</div>
  905. <br/>{Question}</div>
  906. <div class="caption">{Answer}</div>{/block:Answer}
  907.  
  908.  
  909.  
  910.  
  911. </div><!----POST END---->
  912.  
  913.  
  914.  
  915. {block:IndexPage}
  916. <div id="info">
  917. {block:Date}
  918. <span><a href="{Permalink}" title="{TimeAgo}">
  919. <b>{ShortMonth} {DayOfMonthWithZero}</b></a>
  920. {block:NoteCount} &nbsp; <span class="th th-heart-1-o"></span>
  921. <b><a href="{Permalink}">{NoteCountWithLabel}</b></a>{/block:NoteCount}</span>{/block:Date}
  922. <rb>
  923. <span>
  924.  
  925. {block:RebloggedFrom}
  926. <a href="{reblogparenturl}" title="via"><span class="th th-share-o"></span></a>{/block:RebloggedFrom}
  927.  
  928. {block:ContentSource}
  929. <a href="{SourceURL}" title="source"><span class="th th-push-pin-o"></span></a>{/block:ContentSource}
  930.  
  931. <a href="{ReblogURL}" title="reblog" target="_blank" class="reblog">REBLOG</a></span></rb>
  932. </div>
  933. {/block:IndexPage}
  934.  
  935.  
  936.  
  937. {block:PermalinkPage}
  938. <div id="info">
  939. {block:Date}<span>
  940. <a href="{Permalink}">
  941. <b>{ShortMonth} {DayOfMonthWithZero}</b></a> with <b><a href="{Permalink}">{NoteCountWithLabel}</b></a></span>
  942. {/block:Date}
  943. <span>
  944. </span>
  945. </div>
  946. {/block:PermalinkPage}
  947.  
  948. {block:IndexPage}
  949. <div id="tags">{block:HasTags}
  950. {block:Tags}<span class="th th-hashtag"></span> <a href="{TagURL}"><font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
  951. {/block:Tags}
  952. {/block:HasTags}</div>
  953. {/block:IndexPage}
  954.  
  955. {block:PermalinkPage}
  956. <div id="tags">{block:HasTags}
  957. {block:Tags}<a href="{TagURL}">#<font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
  958. {/block:Tags}
  959. {/block:HasTags}</div>
  960. {/block:PermalinkPage}
  961.  
  962. {block:PostNotes}
  963. {PostNotes}
  964. {/block:PostNotes}
  965. {/block:Posts}
  966.  
  967. {block:Pagination}
  968. <div id="pagination">
  969. <div style="margin-top:50px;margin-bottom:10px;">
  970. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><span class="th th-chevron-left"></span></a>{/block:PreviousPage}
  971. {block:JumpPagination length="3"}
  972. {block:CurrentPage}<a><span class="current_page">{PageNumber}</span></a>{/block:CurrentPage}
  973. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  974. {block:NextPage}<a href="{NextPage}" class="jump_page"><span class="th th-chevron-right"></span></a>{/block:NextPage}
  975. </div></div>
  976. {/block:Pagination}
  977. </div>
  978.  
  979. <!----------------------NAVIGATION TAB---------------------->
  980. <div id="tabsNavigate" class="tabcontent" style="display:none; overflow:hidden;">
  981.  
  982. <div id="tablink">
  983. <a href="{text:link 1 url}" title="{text:link 1 title}">
  984. <span class="th th-leaf-1"></span></a>
  985.  
  986. <a href="{text:link 2 url}" title="{text:link 2 title}">
  987. <span class="th th-cloud-3"></span></a>
  988.  
  989. <a href="{text:link 3 url}" title="{text:link 3 title}">
  990. <span class="th th-folder-3"></span></a>
  991.  
  992. <a href="{text:link 4 url}" title="{text:link 4 title}">
  993. <span class="th th-idea"></span></a>
  994.  
  995. <a href="{text:link 5 url}" title="{text:link 5 title}">
  996. <span class="th th-star"></span></a>
  997.  
  998. <a href="{text:link 6 url}" title="{text:link 6 title}">
  999. <span class="th th-push-pin"></span></a>
  1000.  
  1001. <a href="{text:link 7 url}" title="{text:link 7 title}">
  1002. <span class="th th-paper-plane"></span></a>
  1003.  
  1004. <a href="{text:link 8 url}" title="{text:link 8 title}">
  1005. <span class="th th-flash"></span></a>
  1006.  
  1007. </div>
  1008.  
  1009.  
  1010. <div class="tabdesc">
  1011.  
  1012. <span>FAQ</span><p>lorem ipsum, you can put your text here. it doesn't matter how long because this overflows! lorem ipsum, you can put your text here. it doesn't matter how long because this overflows! lorem ipsum, you can put your text here. it doesn't matter how long because this overflows! </p>
  1013.  
  1014. <br/>
  1015.  
  1016. <span>RULES</span><p>lorem ipsum, you can put your text here. it doesn't matter how long because this overflows! lorem ipsum, you can put your text here. it doesn't matter how long because this overflows! lorem ipsum, you can put your text here. it doesn't matter how long because this overflows! </p>
  1017. </div>
  1018.  
  1019. <div id="tabmuses">
  1020. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1021.  
  1022. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1023.  
  1024. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1025.  
  1026. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1027.  
  1028. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1029.  
  1030. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1031.  
  1032. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1033.  
  1034. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1035.  
  1036. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1037.  
  1038. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1039.  
  1040. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1041.  
  1042. <a href="/musepage" title="name. age. fc."><img src="https://via.placeholder.com/50x50/"></a>
  1043. </div>
  1044.  
  1045.  
  1046. </div><!--END NAVIGATION-->
  1047.  
  1048.  
  1049. <!-------------------------------CONTAINER------------------------------->
  1050. <div id="container">
  1051.  
  1052. <div id="tabs">
  1053. <a href="/"><span class="th th-home"></span>REFRESH</a>
  1054.  
  1055. <a href="/ask"><span class="th th-chat-bubble"></span>MESSAGE</a>
  1056.  
  1057. <a href="#" class="tablink tabsact" onclick="openCity(event, 'tabsNavigate');"><span class="th th-worldwide"></span>NAVIGATE</a>
  1058. </div>
  1059.  
  1060. <div id="tophalf"></div>
  1061.  
  1062. <div id="graphic"><img src="{image:graphic}" draggable="false"></div>
  1063.  
  1064. <div id="maintitle">{text:main title}</div>
  1065.  
  1066. <div id="stats">{text:stats}</div>
  1067.  
  1068. <div class="description">{text:side description}</div>
  1069.  
  1070. <div id="favorite">
  1071. <div class="favorite"><span class="th th-heart-1"></span></div>
  1072. </div>
  1073.  
  1074. <div id="comment">
  1075. <div class="comment"><span class="th th-chat-bubble"></span></div>
  1076. </div>
  1077.  
  1078. <div id="leftpost">
  1079. <img src="{image:icon}" class="instaicon" />
  1080. <div style="margin-top:5px; text-transform:lowercase;">{text:url}</div>
  1081.  
  1082. <div style="margin-top:-6px; color:{color:accent}; font-size:5px; text-align:right; margin-right:5px;">
  1083. <span class="th th-circle"></span>
  1084. <span class="th th-circle"></span>
  1085. <span class="th th-circle"></span>
  1086. </div>
  1087.  
  1088. <img src="{image:leftpost}" draggable="false" />
  1089. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et orci ac erat sodales dapibus. Vivamus semper. </p>
  1090. </div>
  1091.  
  1092. <div id="rightpost">
  1093. <img src="{image:icon}" class="instaicon" />
  1094. <div style="margin-top:5px; text-transform:lowercase;">{text:url}</div>
  1095.  
  1096. <div style="margin-top:-6px; color:{color:accent}; font-size:5px; text-align:right; margin-right:5px;">
  1097. <span class="th th-circle"></span>
  1098. <span class="th th-circle"></span>
  1099. <span class="th th-circle"></span>
  1100. </div>
  1101.  
  1102. <img src="{image:rightpost}" draggable="false" />
  1103. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et orci ac erat sodales dapibus. Vivamus hendrerit semper. </p>
  1104. </div>
  1105.  
  1106. </div><!----container END---->
  1107. </div>
  1108.  
  1109. <div id="credits">
  1110. <div class="pulse">
  1111. <a href="https://drunkblushed.tumblr.com/" title="made by dana">
  1112. <span class="th th-heart-1-o"></a></div></div>
  1113.  
  1114.  
  1115. </body>
  1116.  
  1117. <script>
  1118. function gatherData(images, arr) {
  1119. for (let i = 0; i < images.length; i++) {
  1120. let currentData = {
  1121. "width": images[i].getAttribute('data-width'),
  1122. "height": images[i].getAttribute('data-height'),
  1123. "low_res": images[i].getAttribute('data-lowres'),
  1124. "high_res": images[i].getAttribute('data-highres')
  1125. };
  1126. arr.push(currentData);
  1127. }
  1128. }
  1129. function getIndex(elem) {
  1130. let i = 0;
  1131. while( (elem = elem.previousElementSibling) != null ) i++;
  1132. return i;
  1133. }
  1134. function lightbox(elem) {
  1135. let currentPhotoset = elem.parentNode;
  1136. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1137. let data = [];
  1138. gatherData(photosetPhotos, data);
  1139. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1140. }
  1141. </script>
  1142.  
  1143. <script>
  1144. function openCity(evt, cityName) {
  1145. var i, tabcontent, tablinks;
  1146. tabcontent = document.getElementsByClassName("tabcontent");
  1147. for (i = 0; i < tabcontent.length; i++) {
  1148. tabcontent[i].style.display = "none";
  1149. }
  1150. tablinks = document.getElementsByClassName("tablinks");
  1151. for (i = 0; i < tablinks.length; i++) {
  1152. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1153. }
  1154. document.getElementById(cityName).style.display = "block";
  1155. evt.currentTarget.className += " active";
  1156. }
  1157.  
  1158. // Get the element with id="defaultOpen" and click on it
  1159. document.getElementById("defaultOpen").click();
  1160. </script>
  1161.  
  1162. </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!