API tools faq
paste
Advertisement
likesmagic

soulmate by @gloriapritchetts

likesmagic
Jun 5th, 2024
857
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  5.  
  6. <!--
  7. NPF images fix v3.0 by @glenthemes [2021]
  8. 💌 git.io/JRBt7
  9. --->
  10. <script src="//npf-images-v3.github.io/script.js"></script>
  11. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  12. <style tmblr-npf>
  13. :root {
  14. --NPF-Caption-Spacing:1em;
  15. --NPF-Image-Spacing:4px;
  16. }
  17. </style>
  18. <script src="https://unpkg.com/phosphor-icons"></script>
  19. <link rel="preconnect" href="https://fonts.googleapis.com">
  20. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  21. <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Karla:ital,wght@0,200..800;1,200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Varela+Round&display=swap" rel="stylesheet">
  22.  
  23. <script src="//pull.cappuccicons.com/cpf.js"></script>
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  25. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  26.  
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  30. <meta charset="utf-8">
  31. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32.  
  33. <!---
  34.  
  35. ♡ CODE BY GLORIAPRITCHETTS ♡
  36. rules and credits @ gloriapritchetts.tumblr.com/themes
  37.  
  38. --->
  39.  
  40. <meta name="image:sidebar" content="https://placehold.co/150x150/EEE/31343C"/>
  41.  
  42. <meta name="color:background" content="#0f0f0f"/>
  43. <meta name="color:posts" content="#121212"/>
  44. <meta name="color:text" content="#fff"/>
  45. <meta name="color:accent" content="#64bffa"/>
  46. <meta name="color:borders" content="#181818"/>
  47. <meta name="color:gradient 1" content="#64bffa"/>
  48. <meta name="color:gradient 2" content="#c7e6f7"/>
  49.  
  50. <meta name="select:font" content="karla"/>
  51. <meta name="select:font" content="roboto"/>
  52. <meta name="select:font" content="quicksand"/>
  53. <meta name="select:font" content="nunito"/>
  54. <meta name="select:font" content="poppins"/>
  55. <meta name="select:font" content="abeezee"/>
  56. <meta name="select:font" content="montserrat"/>
  57. <meta name="select:font" content="varela round"/>
  58.  
  59. <meta name="select:border radius" content="0px"/>
  60. <meta name="select:border radius" content="5px"/>
  61. <meta name="select:border radius" content="10px"/>
  62.  
  63. <meta name="text:link 1 url" content="/"/>
  64. <meta name="text:link 1 title" content="about"/>
  65. <meta name="text:link 2 url" content="/"/>
  66. <meta name="text:link 2 title" content="gifs"/>
  67. <meta name="text:link 3 url" content="/"/>
  68. <meta name="text:link 3 title" content="links"/>
  69.  
  70. <meta name="text:tracking" content="tracking"/>
  71. <meta name="text:description" content="this looks best at two lines"/>
  72.  
  73. <meta name="text:name" content="name"/>
  74. <meta name="text:age" content="age"/>
  75. <meta name="text:pronouns" content="pronouns"/>
  76. <meta name="text:zodiac" content="zodiac"/>
  77.  
  78. <meta name="text:featured 1 url" content=""/>
  79. <meta name="text:featured 1 title" content=""/>
  80. <meta name="text:featured 1 img link" content=""/>
  81. <meta name="text:featured 2 url" content=""/>
  82. <meta name="text:featured 2 title" content=""/>
  83. <meta name="text:featured 2 img link" content=""/>
  84. <meta name="text:featured 3 url" content=""/>
  85. <meta name="text:featured 3 title" content=""/>
  86. <meta name="text:featured 3 img link" content=""/>
  87.  
  88. <!----- css ----->
  89.  
  90. <style type="text/css">
  91.  
  92. /*----- general -----*/
  93.  
  94. ::-webkit-scrollbar {
  95. width: 3px;
  96. background: {color:background};
  97. border-radius:{select:border radius};
  98. }
  99.  
  100. ::-webkit-scrollbar-thumb {
  101. background: {color:accent};
  102. border-radius:{select:border radius};
  103. }
  104.  
  105. .scrollToTop {
  106. padding:10px;
  107. text-decoration: none;
  108. position:fixed;
  109. top:61px;
  110. right:-5px;
  111. display:none;
  112. }
  113.  
  114. .scrollToTop:hover{
  115. text-decoration:none;
  116. }
  117.  
  118. .scrollToTop i {
  119. font-size:17px;
  120. }
  121.  
  122. body {
  123. font-family: {select:font};
  124. font-size: 13.5px;
  125. color: {color:text};
  126. background-color: {color:background};
  127. line-height: 135%;
  128. word-wrap: break-word;
  129. letter-spacing: 0.3px;
  130. margin: 0;
  131. padding: 0;
  132. }
  133.  
  134. a {
  135. color: {color:accent};
  136. border-bottom:1px solid {color:gradient 1};
  137. font-weight:700;
  138. position: relative;
  139. text-decoration: none;
  140. -webkit-transition: all 0.4s ease;
  141. transition: all 0.4s ease;
  142. -moz-transition: all 0.4s ease;
  143. -o-transition: all 0.4s ease;
  144. }
  145.  
  146. a:hover {
  147. border-bottom:1px solid {color:gradient 2};
  148. font-weight:700;
  149. text-decoration:none;
  150. color:{color:gradient 2};
  151. text-shadow:none;
  152. -webkit-transition: all 0.4s ease;
  153. transition: all 0.4s ease;
  154. -moz-transition: all 0.4s ease;
  155. -o-transition: all 0.4s ease;
  156. }
  157.  
  158. blockquote {
  159. padding: 0 0 0 1.5em;
  160. border-left: 1px solid {color:borders};
  161. margin: 1.5em 0 1.5em 1.5em;
  162. }
  163.  
  164. h1.post-title {
  165. font-size:23px;
  166. color:{color:accent};
  167. text-align:left;
  168. }
  169.  
  170. h1 {
  171. font-size:16px;
  172. color:{color:accent};
  173. text-align:left;
  174. line-height:22px;
  175. border:none;
  176. }
  177.  
  178. h1 a {
  179. font-size:16px;
  180. color:{color:accent};
  181. text-align:left;
  182. line-height:22px;
  183. border:none;
  184. }
  185.  
  186. h1 a:hover {
  187. font-size:16px;
  188. color:{color:accent};
  189. text-align:left;
  190. line-height:22px;
  191. border:none;
  192. }
  193.  
  194. h2 {
  195. font-size:15px;
  196. color:{color:posts};
  197. border-radius:{select:border radius};
  198. padding:10px;
  199. text-align:center;
  200. line-height:22px;
  201. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  202. text-transform:justify;
  203. }
  204.  
  205. h2 a {
  206. font-size:15px;
  207. color:{color:posts};
  208. border:none;
  209. }
  210.  
  211. h2 a:hover {
  212. font-size:15px;
  213. color:{color:posts};
  214. border:none;
  215. }
  216.  
  217. bold, b, strong {
  218. font-weight:bold;
  219. color:{color:accent};
  220. }
  221.  
  222. i, em, italic {
  223. color:{color:accent};
  224. }
  225.  
  226. small, sub, sup {
  227. font-size:13px;
  228. }
  229.  
  230. .tmblr-iframe-compact .tmblr-iframe--unified-controls { z-index: 999999999!important;margin-top: 1em;padding-right:4em;opacity: 0;visibility: hidden;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s; }
  231.  
  232. .controls-button i {
  233. position:absolute;
  234. top: 0px;
  235. left: 0px;
  236. margin-left:-0.5em;
  237. margin-top:-0.5em;
  238. z-index: 1000;
  239. }
  240.  
  241. body.controls-click .tmblr-iframe {
  242. opacity: 1.0;
  243. visibility: visible;
  244. -webkit-transition: all 0.5s;
  245. -moz-transition: all 0.5s;
  246. -ms-transition: all 0.5s;
  247. -o-transition: all 0.5s;
  248. transition: all 0.5s;
  249. }
  250.  
  251. /*----- sidebar -----*/
  252.  
  253. #sidebar {
  254. width: 350px!important;
  255. height:482px;
  256. position: fixed;
  257. top: 120px;
  258. margin-left:-80px!important;
  259. text-align: center;
  260. background:{color:posts};
  261. padding:20px;
  262. border-radius:{select:border radius};
  263. }
  264.  
  265. #side-header {
  266. width:390px;
  267. margin-left:-20px;
  268. margin-top:-20px;
  269. height:100px;
  270. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  271. border-top-left-radius:{select:border radius};
  272. border-top-right-radius:{select:border radius};
  273. }
  274.  
  275. #side-img {
  276. margin-top:1.5em;
  277. margin-left:-0.5em;
  278. width:150px;
  279. height:150px;
  280. object-fit: cover;
  281. border:10px solid {color:posts};
  282. border-radius:100%;
  283. z-index:99999999999!important;
  284. }
  285.  
  286. #side-img img {
  287. width:150px;
  288. height:150px;
  289. border-radius:100%;
  290. }
  291.  
  292. #title2 {
  293. width:100px;
  294. margin-top:-6.7em!important;
  295. margin-left:21.7em;
  296. color:{color:posts};
  297. }
  298.  
  299. #title2 i {
  300. font-size:12px;
  301. margin-right:0.5em;
  302. background:{color:posts};
  303. border-radius:100%;
  304. padding:3px;
  305. }
  306.  
  307. #title3 {
  308. background:{color:posts};
  309. text-transform:uppercase;
  310. text-align:left;
  311. font-size:8px;
  312. letter-spacing:2px;
  313. color:{color:accent};
  314. margin-top:-11.3em;
  315. margin-left:-1.3em;
  316. width:322px;
  317. position:absolute;
  318. border-radius:{select:border radius};
  319. }
  320.  
  321. #hoseok {
  322. position:absolute;
  323. width:300px;
  324. top:115px;
  325. left:137px;
  326. }
  327.  
  328. #hoseok a {
  329. background:{color:accent};
  330. width:70px;
  331. padding:5px;
  332. margin:2px;
  333. border-radius:{select:border radius};
  334. color:{color:posts};
  335. display:inline-block;
  336. }
  337.  
  338. #hoseok a:hover {
  339. background:{color:gradient 2};
  340. }
  341.  
  342. #description {
  343. margin-top:-5.2em;
  344. margin-left:13.5em;
  345. position:absolute;
  346. width:149px;
  347. height:35px;
  348. padding:10px;
  349. text-align:left;
  350. overflow-y:hidden;
  351. background:{color:background};
  352. border-radius:{select:border radius};
  353. }
  354.  
  355. #description2 {
  356. margin-top:-0.4em;
  357. margin-left:0;
  358. position:absolute;
  359. width:330px;
  360. height:18px;
  361. padding:10px;
  362. text-align:center;
  363. overflow-y:hidden;
  364. background:{color:background};
  365. border-radius:{select:border radius};
  366. }
  367.  
  368. #description2 i {
  369. font-size:9px;
  370. padding-left:2px;
  371. padding-right:2px;
  372. }
  373.  
  374. #description2 img {
  375. display:inline-block;
  376. width:90px;
  377. height:90px;
  378. margin-right:5px;
  379. margin-left:5px;
  380. margin-top:5px;
  381. border:3px solid {color:accent};
  382. object-fit: cover;
  383. }
  384.  
  385. #description2 a {
  386. border:none;
  387. }
  388.  
  389. #linkiez {
  390. width: 370px;
  391. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  392. border-radius:{select:border radius};
  393. position: fixed;
  394. height:25px;
  395. top:655px;
  396. margin-left:-20px;
  397. padding:10px;
  398. text-align:center;
  399. }
  400.  
  401. #linkiez a {
  402. margin:1em;
  403. text-align:center;
  404. border-bottom:0px;
  405. color:{color:posts};
  406. -webkit-transition: all 0.4s ease;
  407. transition: all 0.4s ease;
  408. -moz-transition: all 0.4s ease;
  409. -o-transition: all 0.4s ease;
  410. }
  411.  
  412. #linkiez a:hover {
  413. color:{color:gradient 2};
  414. -webkit-transition: all 0.4s ease;
  415. transition: all 0.4s ease;
  416. -moz-transition: all 0.4s ease;
  417. -o-transition: all 0.4s ease;
  418. }
  419.  
  420. #linkiez i {
  421. color:{color:posts};
  422. font-size:22px;
  423. }
  424.  
  425. #joon {
  426. width:165px;
  427. background:{color:background};
  428. padding:10px;
  429. border-radius:{select:border radius};
  430. font-size:15px;
  431. color:{color:accent};
  432. text-align:center;
  433. }
  434.  
  435. #nam {
  436. width:165px;
  437. background:{color:background};
  438. padding:10px;
  439. border-radius:{select:border radius};
  440. font-size:15px;
  441. color:{color:accent};
  442. text-align:center;
  443. }
  444.  
  445. #about {
  446. background:{color:posts};
  447. border-radius:{select:border radius};
  448. border:1px solid {color:borders};
  449. width: 185px;
  450. position: fixed;
  451. height:185px;
  452. top:520px;
  453. margin-left:-20px;
  454. padding:10px;
  455. text-align:left;
  456. }
  457.  
  458. #about li {
  459. list-style-type:none;
  460. margin-top:1em;
  461. margin-bottom:1.4em;
  462. }
  463.  
  464. #about jung {
  465. background:{color:accent};
  466. border-radius:{select:border radius};
  467. padding:5px;
  468. color:{color:posts};
  469. }
  470.  
  471. #about kook {
  472. background:{color:gradient 2};
  473. border-radius:{select:border radius};
  474. padding:5px;
  475. color:{color:posts};
  476. }
  477.  
  478. /*----- header -----*/
  479.  
  480. nav {
  481. text-align:center;
  482. position:fixed;
  483. z-index:99999999999!important;
  484. top:0px;
  485. right:0px;
  486. width:100%;
  487. height:25px;
  488. padding:10px;
  489. }
  490.  
  491. nav a {
  492. text-align:center;
  493. border-bottom:0px solid;
  494. margin: auto 0.95em;
  495. -webkit-transition: all 0.4s ease;
  496. transition: all 0.4s ease;
  497. -moz-transition: all 0.4s ease;
  498. -o-transition: all 0.4s ease;
  499. }
  500.  
  501. nav i {
  502. margin-top:0.1em;
  503. font-size:22px;
  504. color:{color:accent};
  505. -webkit-transition: all 0.4s ease;
  506. transition: all 0.4s ease;
  507. -moz-transition: all 0.4s ease;
  508. -o-transition: all 0.4s ease;
  509. }
  510.  
  511. nav a:hover, nav i:hover {
  512. font-weight:bold;
  513. border-bottom:0px solid;
  514. text-decoration:none;
  515. text-shadow:none;
  516. color:{color:gradient 2};
  517. -webkit-transition: all 0.4s ease;
  518. transition: all 0.4s ease;
  519. -moz-transition: all 0.4s ease;
  520. -o-transition: all 0.4s ease;
  521. }
  522.  
  523. #controlz {
  524. position:fixed;
  525. margin-top:1.5em;
  526. margin-right:1.2em;
  527. top:0px;
  528. right:0px;
  529. }
  530.  
  531. #seokjin {
  532. position:fixed;
  533. width:15px;
  534. height:15px;
  535. padding:10px;
  536. top:0px;
  537. left:-8px;
  538. transition: all .4s ease-in-out;
  539. z-index:9999999999!important;
  540. }
  541.  
  542. #seokjin i {
  543. font-size:21px;
  544. margin-bottom:0.5em;
  545. color:{color:accent};
  546. }
  547.  
  548. #seokjin a:hover, #seokjin i:hover {
  549. text-shadow:none;
  550. color:{color:gradient 2};
  551. }
  552.  
  553. .credit {
  554. position:fixed;
  555. top:40px;
  556. right:5px;
  557. }
  558.  
  559. /*----- posts -----*/
  560.  
  561. main {
  562. position: relative;
  563. width: calc(250px + 540px + 150px);
  564. margin: auto;
  565. }
  566.  
  567. section {
  568. position:relative;
  569. top:50%;
  570. left:50%;
  571. width: 580px;
  572. margin-left: -90px;
  573. margin-top:100px;
  574. padding:20px;
  575. }
  576.  
  577. article {
  578. width: 540px;
  579. position: relative;
  580. margin-bottom:100px!important;
  581. background:{color:posts};
  582. padding:20px;
  583. border-radius:{select:border radius};
  584. }
  585.  
  586. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe { max-width: 100%; }
  587.  
  588. .caption {
  589. margin-top: 1em;
  590. list-style-type: none;
  591. }
  592.  
  593. li {
  594. list-style-type:circle;
  595. }
  596.  
  597. li::marker {
  598. color: {color:accent};
  599. }
  600.  
  601. .text-caption:first-of-type { margin-top: 0; }
  602.  
  603. .user-icon {
  604. display: inline-block;
  605. vertical-align: middle;
  606. width: 1em;
  607. height: 1em;
  608. margin-right: 0.5em;
  609. margin-top:0.45em;
  610. border-radius:100%;
  611. border:2px solid {color:accent};
  612. }
  613.  
  614. .username, .username a {
  615. display: inline-block;
  616. vertical-align: middle;
  617. font-weight: bold;
  618. color:{color:accent};
  619. text-decoration:none;
  620. border-bottom:0px solid;
  621. }
  622.  
  623. .username a:hover {
  624. font-weight: bold;
  625. color:{color:gradient 2};
  626. text-decoration:none;
  627. border-bottom:0px solid;
  628. }
  629.  
  630. .deactive::after {
  631. content: '(deactivated)';
  632. margin-left: 0.5em;
  633. opacity: .25;
  634. color: {color:text};
  635. }
  636.  
  637. p.tmblr-attribution {margin-top: 1em !important;}
  638.  
  639. a.link-wrap {
  640. display: block;
  641. border: 1px solid {color:borders};
  642. }
  643.  
  644. .link { padding: 2em; }
  645.  
  646. .link-host, .link-txt { margin-top: 1.5em; }
  647.  
  648. .npf-link-block {
  649. margin-top: 1.5em;
  650. background-color: inherit;
  651. border: 1px solid inherit;
  652. color: inherit;
  653. }
  654.  
  655. img {
  656. margin: 0;
  657. display: block;
  658. height: auto;
  659. max-width: 100%;
  660. margin-bottom:5px;
  661. border-radius:{select:border radius};
  662. }
  663.  
  664. .photo-slideshow,
  665. .npf_photoset {
  666. border-radius:{select:border radius};
  667. }
  668.  
  669. .vignette, #vignette {opacity: 0;}
  670. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  671.  
  672. .lightbox-image, #tumblr_lightbox img {
  673. box-shadow: none !important;
  674. border-radius: 0 !important;
  675. max-width: none;
  676. }
  677.  
  678. #tumblr_lightbox_caption, .lightbox-caption {
  679. color: #fff !important;
  680. font-family: inherit;
  681. margin-top: 1em !important;
  682. }
  683.  
  684. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  685. margin-left: 0 !important;
  686. margin-right: 0 !important;
  687. }
  688.  
  689. .quote { line-height: 160%; font-size: 1.25em; }
  690.  
  691. .quote p:first-of-type { margin-top: 0; }
  692. .quote p:last-of-type { margin-bottom: 0; }
  693.  
  694. .source { margin-top: 1.5em; }
  695.  
  696. .chat { padding: 0; margin: 0; }
  697. .chat li { list-style-type: none; margin-top: 1em; }
  698. .chat li:first-of-type { margin-top: 0; }
  699. .chatter { font-weight: bold; }
  700.  
  701. p.npf_chat, p.npf_chat b {font-family: inherit;}
  702.  
  703. /*----- asks -----*/
  704.  
  705. .ask-wrap {
  706. background:{color:background};
  707. border-radius:{select:border radius};
  708. text-align:right;
  709. padding:15px;
  710. padding-bottom:1.7em;
  711. }
  712.  
  713. .ask-wrap .asking {
  714. display: inline-block;
  715. margin-left: 0em;
  716. font-weight: bold;
  717. color:{color:accent};
  718. text-transform:justify;
  719. word-spacing:0px;
  720. padding-left:2.5px;
  721. }
  722.  
  723. .asking a {
  724. border-bottom:0px solid;
  725. }
  726.  
  727. .asking a:hover {
  728. color:{color:gradient 2};
  729. border-bottom:0px solid;
  730. }
  731.  
  732. .question { margin-top: 0.5em; }
  733. .question p:first-of-type { margin-top: 0; }
  734. .question p:last-of-type { margin-bottom: 0; }
  735.  
  736. .answer {
  737. margin-top:1em;
  738. display: inline-block;
  739. font-weight: bold;
  740. font-size:13.5px;
  741. color:{color:accent};
  742. text-align:left;
  743. text-transform:justify;
  744. word-spacing:0px;
  745. }
  746.  
  747. .answer a {
  748. border-bottom:0px solid;
  749. }
  750.  
  751. .answer a:hover {
  752. color:{color:gradient 2};
  753. border-bottom:0px solid;
  754. }
  755.  
  756. .answer2 {
  757. margin-top:1em;
  758. font-weight:normal;
  759. text-transform:lowercase;
  760. text-align:left;
  761. font-family: {text:font};
  762. font-size: 13.5px;
  763. color: {color:text};
  764. background:{color:background};
  765. padding:10px;
  766. border-radius:{select:border radius};
  767. }
  768.  
  769. .ask-icon {
  770. display: inline-block;
  771. vertical-align: middle;
  772. width: 1em;
  773. height: 1em;
  774. margin-right: 0.4em;
  775. margin-top:0.4em;
  776. border-radius:100%;
  777. border:2px solid {color:accent};
  778. }
  779.  
  780. /*----- info -----*/
  781.  
  782. .info {
  783. height:21px;
  784. margin-top: 1.3em;
  785. padding:10px;
  786. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  787. border-radius:{select:border radius};
  788. }
  789.  
  790. .info a {
  791. display: inline-block;
  792. vertical-align: middle;
  793. text-transform:lowercase;
  794. font-weight:bold;
  795. color:{color:posts};
  796. border-bottom:0px solid;
  797. }
  798.  
  799. .info a:hover {
  800. text-decoration:none;
  801. color:{color:posts};
  802. text-shadow:none;
  803. border-bottom:0px solid;
  804. }
  805.  
  806. .info i {
  807. color:{color:posts};
  808. font-size:13px;
  809. margin-right:0.5em;
  810. }
  811.  
  812. .pinned {
  813. width:10px;
  814. padding:10px;
  815. height:10px;
  816. top:0px;
  817. right:-40px;
  818. background: {color:posts};
  819. position:absolute;
  820. border-radius:{select:border radius};
  821. z-index:999999!important;
  822. font-size:20px;
  823. color:{color:accent};
  824. text-align:center;
  825. -webkit-transition: all 0.4s ease;
  826. transition: all 0.4s ease;
  827. -moz-transition: all 0.4s ease;
  828. -o-transition: all 0.4s ease;
  829. }
  830.  
  831. .pinned a {
  832. text-decoration:none;
  833. text-shadow:none;
  834. border:none;
  835. }
  836.  
  837. .likeb {
  838. position: relative;
  839. display: inline-block;
  840. height: 1.6em;
  841. margin-bottom: 0px;
  842. margin-top:2px;
  843. }
  844.  
  845. .likeb .like_button iframe {
  846. position: absolute;
  847. top: 0;
  848. left: 0;
  849. bottom: 0;
  850. right: 0;
  851. z-index: 2;
  852. opacity: 0;
  853. }
  854.  
  855. .like_button iframe {width: 100% !important; height: 100% !important;}
  856. .likeb .liked + .actual-button {}
  857. .likeb .liked + .actual-button:after {content: '';}
  858.  
  859. .buttons {
  860. margin-top:-19px;
  861. text-align:right;
  862. }
  863.  
  864. .buttons a {
  865. margin-left:0em;
  866. margin-right:0.4em;
  867. color:{color:posts};
  868. border-bottom:0px solid;
  869. -webkit-transition: all 0.4s ease;
  870. transition: all 0.4s ease;
  871. -moz-transition: all 0.4s ease;
  872. -o-transition: all 0.4s ease;
  873. }
  874.  
  875. .buttons i {
  876. font-size:13px;
  877. margin-right:0.3em;
  878. color:{color:posts};
  879. -webkit-transition: all 0.4s ease;
  880. transition: all 0.4s ease;
  881. -moz-transition: all 0.4s ease;
  882. -o-transition: all 0.4s ease;
  883. }
  884.  
  885. .buttons i:hover, .buttons a:hover {
  886. color:{color:posts};
  887. border-bottom:0px solid;
  888. -webkit-transition: all 0.4s ease;
  889. transition: all 0.4s ease;
  890. -moz-transition: all 0.4s ease;
  891. -o-transition: all 0.4s ease;
  892. }
  893.  
  894. .tags {
  895. word-wrap: break-word;
  896. margin-top:1em!important;
  897. margin-left:0em;
  898. }
  899.  
  900. .tags a {
  901. margin-right:0em;
  902. color:{color:text};
  903. font-weight:normal;
  904. padding-right:0.4em;
  905. border-bottom:0px solid;
  906. }
  907.  
  908. .tags a:hover {
  909. text-decoration:none;
  910. color:{color:gradient 2};
  911. text-shadow:none;
  912. border-bottom:0px solid;
  913. }
  914.  
  915. .tags a:before {
  916. content: '#';
  917. }
  918.  
  919. .tags a:after {
  920. content: ',';
  921. }
  922.  
  923. .tags a:last-child:after {
  924. content: '.';
  925. }
  926.  
  927. .tags b {
  928. color:{color:accent};
  929. margin-right:0.5em;
  930. text-transform:lowercase;
  931. }
  932.  
  933. /*----- notes -----*/
  934.  
  935. .notes { margin-top:-1em; }
  936. .notes a { color:{color:accent}; text-decoration:none;border-bottom:0px solid; }
  937. .notes a:hover { color:{color:gradient 2}; text-decoration:none;border-bottom:0px solid; }
  938.  
  939. ol.notes {
  940. max-width: 100%;
  941. padding: 0;
  942. margin: 2em 0 0 0;
  943. text-align:left;
  944. }
  945.  
  946. ol.notes li.note { padding: 0.3em 0; list-style-type: none; }
  947.  
  948. ol.notes li.note img.avatar {
  949. margin-right: 0.5em;
  950. vertical-align: middle;
  951. display: inline-block;
  952. width: 1em;
  953. height: 1em;
  954. border-radius:100%;
  955. border:3px solid {color:accent};
  956. }
  957.  
  958. /*----- pagination -----*/
  959.  
  960. #page-navigation {text-align: center;}
  961. #page-navigation a, .current-page {margin: 0 0.5em;}
  962. #page-navigation a { border-bottom:none; }
  963.  
  964. /*----- taehyung's military wife -----*/
  965.  
  966. #credit {
  967. position: fixed;
  968. width:20px;
  969. height:20px;
  970. bottom: 20px;
  971. right: 20px;
  972. font-size: 15px;
  973. padding:5px;
  974. }
  975.  
  976. #credit i, #credit a {
  977. color:{color:accent};
  978. border-bottom:0px solid;
  979. }
  980.  
  981. {CustomCSS}
  982.  
  983. /*----- tooltips -----*/
  984.  
  985. .tippy-tooltip.custom-theme {
  986. background-color: {color:accent};
  987. color: {color:posts};
  988. text-align:center;
  989. font-size:12.5px;
  990. }
  991.  
  992. </style>
  993.  
  994. <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes ✻✻✻✻✻✻--> <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet"> <style> .poll-post { --Poll-Question-Font-Size: 16px; --Poll-Option-Background-Color: {color:accent}; --Poll-Option-Corner-Rounding: 18px; --Poll-Option-Border-Size: 0px; --Poll-Option-Border-Color: {color:borders}; --Poll-Option-Padding: 10px; --Poll-Option-Font-Size: 13.5px; --Poll-Option-Spacing: 10px; --Poll-Option-Text-Color: {color:posts}; --Poll-Option-HOVER-Border-Color: none; --Poll-Option-HOVER-Background-Color: {color:gradient 2}; --Poll-Option-HOVER-Text-Color: {color:accent}; --Poll-Option-HOVER-Speed: 0.4s; } </style>
  995.  
  996. </head>
  997.  
  998. <!----- html ----->
  999.  
  1000. <body>
  1001.  
  1002. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  1003. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  1004. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  1005. <script>
  1006. tumblr_npf_audio({
  1007. emptyTitleText: "Untitled track",
  1008. emptyArtistText: "Untitled artist",
  1009. emptyAlbumText: "Untitled album",
  1010.  
  1011. titleLabel: "Track:",
  1012. artistLabel: "Artist:",
  1013. albumLabel: "Album:"
  1014. });
  1015. </script>
  1016. <style edit-npf-audio-player>
  1017. .npf-audio-wrapper {
  1018. --NPF-Audio-Buttons-Size: 1.4rem;
  1019. --NPF-Audio-Buttons-Color: {color:accent};
  1020. --NPF-Audio-Buttons-Spacing: 1.3rem;
  1021. --NPF-Audio-Image-Size: 72px;
  1022. --NPF-Audio-Image-Spacing: 5px;
  1023. }
  1024.  
  1025. .npf-audio-background {
  1026. background-color: {color:background};
  1027. padding: 1.5rem;
  1028. border-radius:{select:border radius};
  1029. margin-top:-0.4em;
  1030. }
  1031.  
  1032. .npf-audio-title-label,
  1033. .npf-audio-artist-label,
  1034. .npf-audio-album-label {
  1035. font-weight: bold;
  1036. color:{color:accent};
  1037. }
  1038.  
  1039. .npf-audio-title,
  1040. .npf-audio-artist,
  1041. .npf-audio-album {
  1042. color: {color:text};
  1043. }
  1044.  
  1045. </style>
  1046.  
  1047. <main>
  1048.  
  1049. <!----- sidebar ----->
  1050.  
  1051. <aside id="sidebar">
  1052.  
  1053. <div id="side-header"></div>
  1054. <div id="title3">&nbsp; www.{Name}.tumblr.com</div>
  1055. <div id="title2"><i class="ph ph-minus"></i><i class="ph ph-x"></i></div>
  1056.  
  1057. <img src="{image:sidebar}" id="side-img">
  1058.  
  1059. <div id="hoseok"><a href="https://tumblr.com/follow/{Name}">follow</a> <a href="https://tumblr.com/message/{Name}">message</a></div>
  1060.  
  1061. <div id="description"><b>#{text:tracking}</b> {text:description}</div>
  1062.  
  1063. <p align="center;"style="text-align:center;font-weight:bold;color:{color:accent};margin-top:1em;font-size:18px;line-height:13px;">about<br><span style="text-transform:uppercase;font-size:8px;letter-spacing:5px;color:{color:gradient 2};">[ {Name} ]</span></p>
  1064. <div id="description2">{text:name} <i class="ph ph-asterisk"></i> {text:age} <i class="ph ph-asterisk"></i> {text:pronouns} <i class="ph ph-asterisk"></i> {text:zodiac}
  1065. </div>
  1066.  
  1067. <p align="center;"style="text-align:center;font-weight:bold;color:{color:accent};margin-top:3.6em;font-size:18px;line-height:13px;">featured<br><span style="text-transform:uppercase;font-size:8px;letter-spacing:5px;color:{color:gradient 2};">[ trending posts ]</span></p>
  1068. <div id="description2"style="height:107px;">
  1069. <a href="{text:featured 1 url}"title="{text:featured 1 title}"><img src="{text:featured 1 img link}"></a>
  1070. <a href="{text:featured 2 url}"title="{text:featured 2 title}"><img src="{text:featured 2 img link}"></a>
  1071. <a href="{text:featured 3 url}"title="{text:featured 3 title}"><img src="{text:featured 3 img link}"></a>
  1072. </div>
  1073.  
  1074. <div id="linkiez">
  1075. <a href="/"title="home"><i class="ph ph-house"></i></a>
  1076. <a href="/ask"title="message"><i class="ph ph-chats"></i></a>
  1077. <a href="/archive"title="archive"><i class="ph ph-archive"></i></a>
  1078. <a href="{text:link 1 url}"title="{text:link 1 title}"><i class="ph ph-user"></i></a>
  1079. <a href="{text:link 2 url}"title="{text:link 2 title}"><i class="ph ph-magic-wand"></i></a>
  1080. <a href="{text:link 3 url}"title="{text:link 3 title}"><i class="ph ph-list"></i></a>
  1081. </div>
  1082.  
  1083. </aside>
  1084.  
  1085. <nav>
  1086.  
  1087. <!----- updates ----->
  1088.  
  1089. <div id="seokjin">
  1090.  
  1091. <!----- taehyung's military wife ----->
  1092.  
  1093. <a href="https://gloriapritchetts.tumblr.com" class="credit"title="by drea"><i class="ph ph-butterfly"style="font-size:20.5px;padding-top:1.2px;"></i></a>
  1094.  
  1095. <a href="#" class="scrollToTop"title="scroll to top"><i class="ph ph-caret-double-up"></i></a>
  1096.  
  1097. </div>
  1098.  
  1099. <div id="controlz">
  1100. <a class="controls-button"title="controls"><i class="ph ph-gear"style="font-size:21px;padding-top:1px;"></i></a>
  1101. </div>
  1102.  
  1103. <div class="utabcontent" style="display:none;">
  1104. <h1>about</h1>
  1105. <div class="bio"style="overflow-y:hidden;">
  1106. <li><kook>name:</kook>&nbsp; {text:name}</li>
  1107. <li><yoongi>age:</yoongi>&nbsp; {text:age} years</li>
  1108. <li><kook>pronouns:</kook>&nbsp; {text:pronouns}</li>
  1109. <li><yoongi>zodiac:</yoongi>&nbsp; {text:zodiac}</li>
  1110. <li><kook>timezone:</kook>&nbsp; {text:timezone}</li>
  1111. <li><yoongi>tracking:</yoongi>&nbsp; {text:tracking}</li>
  1112. </div>
  1113.  
  1114. <h1 style="margin-top:15.3em;">updates</h1>
  1115. <div class="bio"style="overflow-y:hidden;height:145px;">
  1116. <li><kook>status:</kook>&nbsp; {text:status}</li>
  1117. <li><yoongi>working on:</yoongi>&nbsp; {text:working on}</li>
  1118. <li><kook>watching:</kook>&nbsp; {text:watching}</li>
  1119. <li><yoongi>listening to:</yoongi>&nbsp; {text:listening to}</li>
  1120. </div>
  1121.  
  1122. </div>
  1123.  
  1124. </nav>
  1125.  
  1126. <section>
  1127.  
  1128. <!----- POSTS ----->
  1129.  
  1130. {block:Posts}
  1131. <article class="posts" id="{PostID}">
  1132.  
  1133. {block:PinnedPostLabel}
  1134. <div class="pinned">
  1135. <a href="{Permalink}" class="pinned-post"title="pinned post"><div style="margin-left:-0.25em;margin-top:-0.3em!important;"><i class="ph ph-push-pin-simple"></i></a></div>
  1136. </div>
  1137. {/block:PinnedPostLabel}
  1138.  
  1139. {block:Text}
  1140. {block:Title}<h1 class="post-title">{Title}</h1>{/block:Title}
  1141. {block:NotReblog}
  1142. <li class="caption text-caption">
  1143. {Body}
  1144. </li>
  1145. {/block:NotReblog}
  1146. {block:RebloggedFrom}
  1147. {block:Reblogs}
  1148. <li class="caption text-caption">
  1149. <img src="{PortraitURL-64}" class="user-icon">
  1150. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1151. {Body}
  1152. </li>
  1153. {/block:Reblogs}
  1154. {/block:RebloggedFrom}
  1155. {/block:Text}
  1156.  
  1157. {block:Link}
  1158. <a href="{URL}" class="link-wrap">
  1159. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1160. <div class="link">
  1161. <div class="title">{Name}</div>
  1162. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1163. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1164. </div>
  1165. </a>
  1166. {block:Description}
  1167. {block:NotReblog}
  1168. <li class="caption">
  1169. {Description}
  1170. </li>
  1171. {/block:NotReblog}
  1172. {/block:Description}
  1173. {block:RebloggedFrom}
  1174. {block:Reblogs}
  1175. <li class="caption">
  1176. <img src="{PortraitURL-64}" class="user-icon">
  1177. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1178. {Body}
  1179. </li>
  1180. {/block:Reblogs}
  1181. {/block:RebloggedFrom}
  1182. {/block:Link}
  1183.  
  1184. {block:Photo}
  1185. <div class="photo">
  1186. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  1187. </div>
  1188. {block:Caption}
  1189. {block:NotReblog}
  1190. <li class="caption">
  1191. {Caption}
  1192. </li>
  1193. {/block:NotReblog}
  1194. {block:RebloggedFrom}
  1195. {block:Reblogs}
  1196. <li class="caption">
  1197. <img src="{PortraitURL-64}" class="user-icon">
  1198. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1199. {Body}
  1200. </li>
  1201. {/block:Reblogs}
  1202. {/block:RebloggedFrom}
  1203. {/block:Caption}
  1204. {/block:Photo}
  1205.  
  1206. {block:Photoset}
  1207. <div class="photo">{Photoset-700}</div>
  1208. {block:Caption}
  1209. {block:NotReblog}
  1210. <li class="caption">
  1211. {Caption}
  1212. </li>
  1213. {/block:NotReblog}
  1214. {block:RebloggedFrom}
  1215. {block:Reblogs}
  1216. <li class="caption">
  1217. <img src="{PortraitURL-64}" class="user-icon">
  1218. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1219. {Body}
  1220. </li>
  1221. {/block:Reblogs}
  1222. {/block:RebloggedFrom}
  1223. {/block:Caption}
  1224. {/block:Photoset}
  1225.  
  1226. {block:Video}
  1227. <div class="video">{Video-500}</div>
  1228. {block:Caption}
  1229. {block:NotReblog}
  1230. <li class="caption">
  1231. {Caption}
  1232. </li>
  1233. {/block:NotReblog}
  1234. {block:RebloggedFrom}
  1235. {block:Reblogs}
  1236. <li class="caption">
  1237. <img src="{PortraitURL-64}" class="user-icon">
  1238. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1239. {Body}
  1240. </li>
  1241. {/block:Reblogs}
  1242. {/block:RebloggedFrom}
  1243. {/block:Caption}
  1244. {/block:Video}
  1245.  
  1246. {block:Quote}
  1247. <div class="quote">{Quote}</div>
  1248. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1249. {/block:Quote}
  1250.  
  1251. {block:Chat}
  1252. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1253. <ul class="chat">{block:Lines}
  1254. <li>
  1255. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1256. {Line}
  1257. </li>
  1258. {/block:Lines}</ul>
  1259. {/block:Chat}
  1260.  
  1261. {block:Answer}
  1262. <div class="ask-wrap">
  1263. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1264. <div class="asking"><a href="{Permalink}">{Asker}</a> sent:</div>
  1265. <div class="question">{Question}</div>
  1266. </div>
  1267. {block:Answerer}
  1268. <div class="answer"><img src="{AnswererPortraitURL-64}" class="ask-icon"style="margin-right:9px;"><a href="{Permalink}">{Answerer}</a> replied:</div>
  1269. <div class="answer2">{Answer}</div>
  1270. {/block:Answerer}
  1271. {block:NotReblog}
  1272. <li class="caption">
  1273. {Replies}
  1274. </li>
  1275. {/block:NotReblog}
  1276. {block:RebloggedFrom}
  1277. {block:Reblogs}
  1278. <li class="caption">
  1279. <img src="{PortraitURL-64}" class="user-icon">
  1280. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1281. {Body}
  1282. </li>
  1283. {/block:Reblogs}
  1284. {/block:RebloggedFrom}
  1285. {/block:Answer}
  1286.  
  1287. {block:Audio}
  1288. <div class="audiopost">
  1289. <div class="audiobox">
  1290. <div class="button">
  1291. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1292. </div>
  1293. </div>
  1294. {block:AlbumArt}
  1295. <img src="{AlbumArtURL}" class="album-art">
  1296. {/block:AlbumArt}
  1297. <div class="audioinfo">
  1298. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1299. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1300. {block:Album}<li>{Album}</li>{/block:Album}
  1301. </div>
  1302. </div>
  1303. {block:Caption}
  1304. {block:NotReblog}
  1305. <li class="caption">
  1306. {Caption}
  1307. </li>
  1308. {/block:NotReblog}
  1309. {block:RebloggedFrom}
  1310. {block:Reblogs}
  1311. <li class="caption">
  1312. <img src="{PortraitURL-64}" class="user-icon">
  1313. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1314. {Body}
  1315. </li>
  1316. {/block:Reblogs}
  1317. {/block:RebloggedFrom}
  1318. {/block:Caption}
  1319. {/block:Audio}
  1320.  
  1321. {/block:HasTags}
  1322. <!----- info ----->
  1323.  
  1324. {block:Date}
  1325. <div class="info">
  1326. <a href="{Permalink}"title="{TimeAgo}"style="padding-left:7px;margin-top:1px;">{DayOfWeek}</a>
  1327.  
  1328. <!----- buttons ----->
  1329. <div class="buttons">
  1330. {block:NoteCount}<a href="{Permalink}"title="{NoteCountWithLabel}"style="margin-top:0px;"><i class="ph-note-pencil"></i></a>{/block:NoteCount}
  1331. <a href="{ReblogURL}" target="_blank"title="reblog"style="margin-top:-4.5px;"><i class="cp cp-reblog-alt"style="font-size:11px;"></i></a>
  1332. <a class="likeb" href="#"title="like"style="margin-top:2px;">{LikeButton}<span class="actual-button"><i class="ph ph-heart"></i></span></a>
  1333. {block:ContentSource}<a href="{SourceURL}"title="source"style="margin-top:-1.4px!important;"><i class="ph-ph-export"></i></a>{/block:ContentSource}
  1334. </div>
  1335. </div>
  1336. {/block:Date}
  1337.  
  1338. <!----- tags ----->
  1339.  
  1340. {block:HasTags}
  1341. <div class="tags">
  1342. {block:Tags}
  1343. <a href="{TagURL}">{Tag}</a></li>
  1344. {/block:Tags}
  1345. </div>
  1346. {/block:HasTags}
  1347.  
  1348. <!----- notes ----->
  1349.  
  1350. {block:PermalinkPage}{block:Date}
  1351. {block:NoteCount}{block:PostNotes}
  1352. <div class="notes">
  1353. {PostNotes-64}
  1354. </div>
  1355. {/block:PostNotes}{/block:NoteCount}
  1356. {/block:Date}{/block:PermalinkPage}
  1357.  
  1358. </article>
  1359.  
  1360. {/block:Posts}
  1361.  
  1362. <!----- pagination ----->
  1363.  
  1364. {block:Pagination}
  1365. <article id="page-navigation">
  1366. {block:PreviousPage}<a href="{PreviousPage}"title="previous"><i class="ph ph-caret-double-left"></i></a>{/block:PreviousPage}
  1367. {block:NextPage}<a href="{NextPage}"title="forward"><i class="ph ph-caret-double-right"></i></a>{/block:NextPage}
  1368. </article>
  1369. {/block:Pagination}
  1370.  
  1371. </section>
  1372.  
  1373. </main>
  1374.  
  1375. <!----- tooltips ----->
  1376.  
  1377. <script src="https://unpkg.com/popper.js@1"></script>
  1378. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1379. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1380.  
  1381. <script>
  1382.  
  1383. $(document).ready(function(){
  1384.  
  1385. //Check to see if the window is top if not then display button
  1386. $(window).scroll(function(){
  1387. if ($(this).scrollTop() > 100) {
  1388. $('.scrollToTop').fadeIn();
  1389. } else {
  1390. $('.scrollToTop').fadeOut();
  1391. }
  1392. });
  1393.  
  1394. //Click event to scroll to top
  1395. $('.scrollToTop').click(function(){
  1396. $('html, body').animate({scrollTop : 0},800);
  1397. return false;
  1398. });
  1399.  
  1400. });
  1401.  
  1402.  
  1403. tippy('a[title]', {
  1404. theme: 'custom',
  1405. arrow: tippy.round,
  1406. zIndex: 9999999999,
  1407. maxWidth: 300,
  1408.  
  1409. content(reference) {
  1410. const title = reference.getAttribute('title');
  1411. reference.removeAttribute('title');
  1412. return title;
  1413. },
  1414. });
  1415. </script>
  1416.  
  1417. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  1418.  
  1419. <script>
  1420. $(document).ready(function(){
  1421. $('.controls-button').click(function(){
  1422. $('body').toggleClass('controls-click');
  1423. });
  1424. });
  1425. </script>
  1426.  
  1427. </body>
  1428. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!