API tools faq
paste
littlemisswhoever

girlnamedryan - Biography

littlemisswhoever
Apr 29th, 2021
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- nuclearthemes on tumblr || thanks for using my code! -->
  4. <!-- consider supporting me on ko-fi >> https://ko-fi.com/cameroni -->
  5.  
  6. <!--
  7. || CREDITS ||
  8.  
  9. • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  10. • Fonts from Google >> https://fonts.google.com/
  11. • Icons from Font Awesome >> https://fontawesome.com/
  12. • Placeholders from Unsplash >> https://unsplash.com/
  13. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  14.  
  15. -->
  16.  
  17. <html>
  18.  
  19. <head>
  20.  
  21. <title>{Name} / title</title> <!-- page title -->
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Varta:400,400i,700,700i|Rancho:400,400i,700,700i" rel="stylesheet">
  28.  
  29. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  30.  
  31. <style type="text/css">
  32.  
  33. * {margin:0; padding:0;}
  34.  
  35. /* ----------------------------------------------------------------------- */
  36. /* --------------------------- tumblr controls --------------------------- */
  37.  
  38. .tmblr-iframe {
  39. filter: invert(100%);
  40. -o-filter: invert(100%);
  41. -moz-filter: invert(100%);
  42. -ms-filter: invert(100%);
  43. -webkit-filter: invert(100%);
  44. opacity: 0.2;
  45. position: fixed;
  46. right: 5px;
  47. top: 5px;
  48. transform: scale(0.7,0.7);
  49. transform-origin: 100% 0%;
  50. -ms-transform-origin: 100% 0%;
  51. -webkit-transform-origin: 100% 0%;
  52. transition: 0.4s;
  53. -o-transition: 0.4s;
  54. -moz-transition: 0.4s;
  55. -ms-transition: 0.4s;
  56. -webkit-transition: 0.4s;
  57. white-space: nowrap;
  58. }
  59.  
  60. .tmblr-iframe:hover {
  61. opacity: 1;
  62. }
  63.  
  64. /* ----------------------------------------------------------------------- */
  65. /* --------------------------- custom tooltips --------------------------- */
  66.  
  67. .tippy-tooltip.custom-theme {
  68. background-color: #54ffd4;
  69. border-radius: 0;
  70. color: #212121;
  71. font-family: inherit;
  72. font-size: inherit;
  73. text-align: center;
  74. }
  75.  
  76. /* ----------------------------------------------------------------------- */
  77. /* -------------------- custom selection & scrollbar --------------------- */
  78.  
  79. ::-moz-selection {background: #ff75b4; color: #ffffff;}
  80. ::selection {background: #ff75b4; color: #ffffff;}
  81.  
  82. ::-webkit-scrollbar-thumb
  83. {background: #7ee3ed; border: 5px solid #fff; border-radius: 10px;}
  84. ::-webkit-scrollbar-track
  85. {background: #ff75b4; border: 7px solid #ffffff;}
  86. ::-webkit-scrollbar
  87. {width: 15px;}
  88.  
  89. /* ----------------------------------------------------------------------- */
  90. /* ----------------------------- page layout ----------------------------- */
  91.  
  92. body {
  93. background: #ffffff; /* background color */
  94. color: #212121; /* text color */
  95. font-family: Varta; /* font */
  96. font-size: 15px; /* font size */
  97. text-align: justify; /* text align */
  98. }
  99.  
  100. #header { /* top header */
  101. background-image: linear-gradient(to bottom right, #7ee3ed, #54ffd4);
  102. height: 130px;
  103. margin: 40px auto;
  104. overflow: visible;
  105. width: 900px;
  106. }
  107.  
  108. #container { /* content container */
  109. height: 700px;
  110. margin: 0 auto 50px auto;
  111. width: 900px;
  112. }
  113.  
  114. /* ----------------------------------------------------------------------- */
  115. /* --------------------------- header content ---------------------------- */
  116.  
  117. #headerpic { /* icon */
  118. border-radius: 100%;
  119. float: left;
  120. margin: 15px;
  121. width: 100px;
  122. transition: 0.4s;
  123. -moz-transition: 0.4s;
  124. -ms-transition: 0.4s;
  125. -o-transition: 0.4s;
  126. -webkit-transition: 0.4s;
  127. }
  128.  
  129. #headerpic:hover {
  130. cursor: cell;
  131. transform: rotate(-10deg) scale(0.75);
  132. -moz-transform: rotate(-10deg) scale(0.75);
  133. -ms-transform: rotate(-10deg) scale(0.75);
  134. -o-transform: rotate(-10deg) scale(0.75);
  135. -webkit-transform: rotate(-10deg) scale(0.75);
  136. transition: 0.4;
  137. -moz-transition: 0.4s;
  138. -ms-transition: 0.4s;
  139. -o-transition: 0.4s;
  140. -webkit-transition: 0.4s;
  141. }
  142.  
  143. .dropbtn { /* dropdown menu button */
  144. background-color: #ffffff;
  145. border: none;
  146. border-radius: 100%;
  147. color: #7ee3ed;
  148. cursor: help;
  149. font-size: 17px;
  150. outline: none;
  151. padding: 15px;
  152. transition: 0.4s;
  153. -moz-transition: 0.4s;
  154. -ms-transition: 0.4s;
  155. -o-transition: 0.4s;
  156. -webkit-transition: 0.4s;
  157. width: 45px;
  158. }
  159.  
  160. .dropbtn:hover, .dropbtn:focus { /* dropdown menu button hover */
  161. background-color: #ff75b4;
  162. color: #ffffff;
  163. transform: rotate(-90deg);
  164. -moz-transform: rotate(-90deg);
  165. -ms-transform: rotate(-90deg);
  166. -o-transform: rotate(-90deg);
  167. -webkit-transform: rotate(-90deg);
  168. transition: 0.4;
  169. -moz-transition: 0.4s;
  170. -ms-transition: 0.4s;
  171. -o-transition: 0.4s;
  172. -webkit-transition: 0.4s;
  173. }
  174.  
  175. .dropdown { /* dropdown box */
  176. display: inline-block;
  177. float: right;
  178. margin: 42px;
  179. position: relative;
  180. }
  181.  
  182. .dropdown-content { /* dropdown content */
  183. display: none;
  184. background-color: #ffffff;
  185. border: 5px solid #ff75b4;
  186. border-radius: 20px;
  187. overflow: auto;
  188. position: absolute;
  189. text-align: center;
  190. transform: translateX(-55px);
  191. -moz-transform: translateX(-55px);
  192. -ms-transform: translateX(-55px);
  193. -o-transform: translateX(-55px);
  194. -webkit-transform: translateX(-55px);
  195. width: 150px;
  196. z-index: 1;
  197. }
  198.  
  199. .dropdown-content a { /* dropdown content links */
  200. color: #212121;
  201. display: block;
  202. padding: 12px 16px;
  203. text-decoration: none;
  204. text-transform: uppercase;
  205. transition: 0.4s;
  206. -moz-transition: 0.4s;
  207. -ms-transition: 0.4s;
  208. -o-transition: 0.4s;
  209. -webkit-transition: 0.4s;
  210. }
  211.  
  212. .dropdown a:hover { /* dropdown content links hover */
  213. background-color: #ff75b4;
  214. color: #ffffff;
  215. transition: 0.4s;
  216. -moz-transition: 0.4s;
  217. -ms-transition: 0.4s;
  218. -o-transition: 0.4s;
  219. -webkit-transition: 0.4s;
  220. }
  221.  
  222. .show {
  223. display: block;
  224. }
  225.  
  226. /* ----------------------------------------------------------------------- */
  227. /* ------------------------------- content ------------------------------- */
  228.  
  229. #leftcontent { /* container for all left content */
  230. float: left;
  231. height: 700px;
  232. width: 720px;
  233. }
  234.  
  235. #picbar { /* container for pictures on the right */
  236. float: right;
  237. height: 700px;
  238. overflow: none;
  239. width: 160px;
  240. }
  241.  
  242. .sidepics { /* pictures */
  243. border-radius: 20px;
  244. margin-bottom: 20px;
  245. transition: 0.4s;
  246. -moz-transition: 0.4s;
  247. -ms-transition: 0.4s;
  248. -o-transition: 0.4s;
  249. -webkit-transition: 0.4s;
  250. width: 100%;
  251. }
  252.  
  253. .sidepics:hover { /* pictures hover */
  254. cursor: cell;
  255. transform: scale(0.75);
  256. -moz-transform: scale(0.75);
  257. -ms-transform: scale(0.75);
  258. -o-transform: scale(0.75);
  259. -webkit-transform: scale(0.75);
  260. transition: 0.4;
  261. -moz-transition: 0.4s;
  262. -ms-transition: 0.4s;
  263. -o-transition: 0.4s;
  264. -webkit-transition: 0.4s;
  265. }
  266.  
  267. #aboutcontainer { /* container for about and icons */
  268. float: left;
  269. height: 120px;
  270. width: 313px;
  271. }
  272.  
  273. #about { /* about section (text!) */
  274. border: 1px solid #54ffd4;
  275. border-bottom: none;
  276. border-radius: 20px 20px 0px 0px;
  277. height: 60px;
  278. padding: 20px;
  279. text-align: center;
  280. width: calc(100% - 40px);
  281. width: -moz-calc(100% - 40px);
  282. width: -webkit-calc(100 - 40px);
  283. }
  284.  
  285. #iconbar { /* about section (icon bar!) */
  286. background-image: linear-gradient(to bottom right, #7ee3ed, #54ffd4);
  287. border: 1px solid #54ffd4;
  288. border-top: none;
  289. border-radius: 0px 0px 20px 20px;
  290. height: 60px;
  291. width: 100%;
  292. }
  293.  
  294. .socials { /* icon bar icons */
  295. display: inline-block;
  296. color: #ffffff;
  297. font-size: 24px;
  298. height: 45px;
  299. padding-top: 15px;
  300. text-align: center;
  301. transition: 0.4s;
  302. -moz-transition: 0.4s;
  303. -ms-transition: 0.4s;
  304. -o-transition: 0.4s;
  305. -webkit-transition: 0.4s;
  306. width: 60px;
  307. }
  308.  
  309. .socials:hover { /* icon bar icons hover */
  310. color: #ff75b4;
  311. transition: 0.4s;
  312. -moz-transition: 0.4s;
  313. -ms-transition: 0.4s;
  314. -o-transition: 0.4s;
  315. -webkit-transition: 0.4s;
  316. }
  317.  
  318. #facts { /* facts section */
  319. border: 1px solid #54ffd4;
  320. border-radius: 20px;
  321. float: right;
  322. height: 140px;
  323. line-height: 24px;
  324. margin-left: 20px;
  325. padding: 10px;
  326. width: 350px;
  327. }
  328.  
  329. #left { /* left column in facts section */
  330. border-right: 1px dashed #ff75b4;
  331. float: left;
  332. font-style: italic;
  333. font-weight: bold;
  334. margin-right: 50px;
  335. padding-right: 50px;
  336. text-transform: uppercase;
  337. }
  338.  
  339. #bio { /* bio section */
  340. border: 1px solid #54ffd4;
  341. border-radius: 20px;
  342. float: left;
  343. height: 475px;
  344. margin-top: 20px;
  345. overflow: auto;
  346. padding: 20px;
  347. -moz-overflow-style: none;
  348. -ms-overflow-style: none;
  349. -o-overflow-style: none;
  350. }
  351.  
  352.  
  353. #bio img {
  354. float:left;
  355. margin-right:12px;
  356. margin-bottom:12px;
  357. }
  358.  
  359.  
  360. #bio::-webkit-scrollbar {
  361. display: none;
  362. }
  363.  
  364. /* ----------------------------------------------------------------------- */
  365. /* -------------------------------- text --------------------------------- */
  366.  
  367. h1 { /* header title */
  368. color: #ffffff;
  369. float: left;
  370. font-family: Rancho;
  371. font-size: 2.5em;
  372. font-weight: normal;
  373. margin-top: 45px;
  374. }
  375.  
  376. h2 { /* about section title */
  377. font-family: Varta;
  378. font-size: 1.5em;
  379. font-weight: normal;
  380. text-transform: uppercase;
  381. }
  382.  
  383. a {
  384. color: #7ee3ed; /* link color */
  385. text-decoration: none;
  386. transition: 0.4s;
  387. -moz-transition: 0.4s;
  388. -ms-transition: 0.4s;
  389. -o-transition: 0.4s;
  390. -webkit-transition: 0.4s;
  391. }
  392.  
  393. a:hover {
  394. color: #ff75b4; /* link hover color */
  395. transition: 0.4s;
  396. -moz-transition: 0.4s;
  397. -ms-transition: 0.4s;
  398. -o-transition: 0.4s;
  399. -webkit-transition: 0.4s;
  400. }
  401.  
  402. b { /* bold text */
  403. color: #ff75b4;
  404. }
  405.  
  406. /* ----------------------------------------------------------------------- */
  407. /* ----------------------------- responsive ------------------------------ */
  408.  
  409. @media only screen and (max-width: 1024px){
  410. #header, #container {width: 90%;}
  411. #container, #leftcontent, #picbar {height: 880px;}
  412. #leftcontent {width: 75%;}
  413. #aboutcontainer, #facts {float: none;}
  414. #aboutcontainer {margin: 0px auto 60px auto;}
  415. #facts {margin: auto; width: 295px;}
  416. #left {margin-right: 30px; padding-right: 30px;}
  417. .sidepics {margin-bottom: 80px;}
  418. }
  419.  
  420. @media only screen and (max-width: 750px){
  421. #leftcontent {width: 70%;}
  422. #picbar {width: 25%;}
  423. }
  424.  
  425. @media only screen and (max-width: 550px){
  426. #header {height: 80px; margin-bottom: 20px;}
  427. #headerpic {width: 50px;}
  428. h1 {font-size: 2em; margin-top: 25px;}
  429. #leftcontent {width: 100%;}
  430. #picbar {height: 100px; margin: 20px 0px; width: 100%;}
  431. #left {margin-right: 50px; padding-right: 50px;}
  432. .sidepics {display: inline; margin: 0px 2px; width: 23%;}
  433. .dropdown {margin: 18px 10px;}
  434. .socials {width: 19%;}
  435.  
  436. #aboutcontainer {
  437. width: calc(100% - 2px);
  438. width: -moz-calc(100% - 2px);
  439. width: -webkit-calc(100 - 2px);
  440. }
  441.  
  442. #facts {
  443. width: calc(100% - 22px);
  444. width: -moz-calc(100% - 22px);
  445. width: -webkit-calc(100 - 22px);
  446. }
  447.  
  448. .dropdown-content {
  449. transform: translateX(-110px);
  450. -moz-transform: translateX(-110px);
  451. -ms-transform: translateX(-110px);
  452. -o-transform: translateX(-110px);
  453. -webkit-transform: translateX(-110px);
  454. }
  455. }
  456.  
  457. /* ----------------------------------------------------------------------- */
  458. /* ------------------------------- credits ------------------------------- */
  459.  
  460. #credit {
  461. background-color: #ffffff;
  462. color: #7ee3ed;
  463. bottom: 0;
  464. font-size: 20px;
  465. font-style: italic;
  466. margin: 10px;
  467. padding: 10px 0px;
  468. position: fixed;
  469. right: 0;
  470. text-align: center;
  471. transition: 0.4s;
  472. -moz-transition: 0.4s;
  473. -ms-transition: 0.4s;
  474. -o-transition: 0.4s;
  475. -webkit-transition: 0.4s;
  476. width: 40px;
  477. }
  478.  
  479. #credit:hover {
  480. background-color: #7ee3ed;
  481. color: #ffffff;
  482. transition: 0.4s;
  483. -moz-transition: 0.4s;
  484. -ms-transition: 0.4s;
  485. -o-transition: 0.4s;
  486. -webkit-transition: 0.4s;
  487. }
  488.  
  489. /* ----------------------------------------------------------------------- */
  490.  
  491. </style>
  492.  
  493. </head>
  494.  
  495. <body>
  496.  
  497. <!--------------------------- START MAIN CONTENT---------------------------->
  498.  
  499. <!-- start header -->
  500.  
  501. <div id="header">
  502.  
  503. <!-- header image -->
  504.  
  505. <a href="/">
  506. <img id="headerpic" title="{Ryan Montgomery}" src="https://i.imgur.com/6EK7aWU.jpg">
  507. </a>
  508.  
  509. <!-- header title -->
  510.  
  511. <h1>>> the baddie</h1>
  512.  
  513. <!-- header dropdown menu -->
  514.  
  515. <div class="dropdown">
  516.  
  517. <!-- dropdown menu button -->
  518.  
  519. <button onclick="myFunction()" class="dropbtn" title="show links">
  520. <i class="fas fa-ellipsis-v"></i>
  521. </button>
  522.  
  523. <!-- dropdown menu links -->
  524.  
  525. <div id="myDropdown" class="dropdown-content">
  526.  
  527. <a href="/">home</a>
  528. <a href="/navi">navi</a>
  529. <a href="www.fuckscollege.tumblr.com">fckcollege</a>
  530. <a href="/writings">threads</a>
  531.  
  532. </div>
  533.  
  534. </div>
  535.  
  536. </div>
  537.  
  538. <!-- end header -->
  539.  
  540. <!-- start container -->
  541.  
  542. <div id="container">
  543.  
  544. <!-- start text content -->
  545.  
  546. <div id="leftcontent">
  547.  
  548. <!-- about -->
  549.  
  550. <div id="aboutcontainer">
  551.  
  552. <!-- about section -->
  553.  
  554. <div id="about">
  555.  
  556.  
  557. </a>
  558.  
  559. <h2>
  560. hi! my name is <span style="color:#ff75b4">ryan</span>
  561. </h2>
  562.  
  563. <i>21 years old • female (she/her) • <s>undecided</s> </i>
  564.  
  565. </div>
  566.  
  567. <!-- social media icons -->
  568.  
  569. <div id="iconbar">
  570.  
  571. <a href="/" title="instagram">
  572. <div class="socials">
  573. <i class="fab fa-instagram"></i>
  574. </div>
  575. </a>
  576.  
  577. <a href="/" title="twitter">
  578. <div class="socials">
  579. <i class="fab fa-twitter"></i>
  580. </div>
  581. </a>
  582.  
  583. <a href="https://8tracks.com/xadumbhuman/ryan-montgomery-the-baddie" title="spotify">
  584. <div class="socials">
  585. <i class="fab fa-spotify"></i>
  586. </div>
  587. </a>
  588.  
  589.  
  590. </a>
  591.  
  592. </div>
  593.  
  594. </div>
  595.  
  596. <!-- facts -->
  597.  
  598. <div id="facts">
  599.  
  600. <!-- left column -->
  601.  
  602. <div id="left">
  603.  
  604. reading...
  605. <br>
  606. playing...
  607. <br>
  608. studying...
  609. <br>
  610. eating...
  611. <br>
  612. thinking about...
  613. <br>
  614. listening to...
  615.  
  616. </div>
  617.  
  618. <!-- right column -->
  619.  
  620. <div id="right">
  621.  
  622. -
  623. <br>
  624. -
  625. <br>
  626. -
  627. <br>
  628. -
  629. <br>
  630. -
  631. <br>
  632. -
  633.  
  634. </div>
  635.  
  636. </div>
  637.  
  638. <!-- bio -->
  639.  
  640. <div id="bio">
  641.  
  642. <img src="https://i.imgur.com/UmUuemL.png">This is where you can put a whole bunch of text. This block has automatic overflow, so you don't have to worry about writing too much. You can also add <b>bold text here</b> or <i>italic text</i>. You can even put <a href="">links</a> here if you'd like!
  643.  
  644. <br><br>
  645.  
  646. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  647.  
  648. <br><br>
  649.  
  650. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  651.  
  652. <br><br>
  653.  
  654. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Netus et malesuada fames ac turpis. Blandit aliquam etiam erat velit. Tempor orci dapibus ultrices in iaculis nunc sed. In eu mi bibendum neque egestas congue quisque egestas. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Varius duis at consectetur lorem donec. Dolor purus non enim praesent elementum facilisis leo vel. Ipsum faucibus vitae aliquet nec. Sit amet purus gravida quis blandit. Semper quis lectus nulla at volutpat diam ut venenatis tellus. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Quisque sagittis purus sit amet volutpat consequat mauris. Diam maecenas sed enim ut sem. Pharetra magna ac placerat vestibulum lectus. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Eleifend donec pretium vulputate sapien nec sagittis.
  655.  
  656. </div>
  657.  
  658. </div>
  659.  
  660. <!-- end text content -->
  661.  
  662. <!-- start pictures bar -->
  663.  
  664. <div id="picbar">
  665.  
  666. <img class="sidepics" src="https://i.imgur.com/MXhJCRM.jpg">
  667. <img class="sidepics" src="https://i.imgur.com/INNw3IQ.jpg">
  668. <img class="sidepics" src="https://i.imgur.com/GBvmX5c.jpg">
  669. <img class="sidepics" src="https://i.imgur.com/u5eHHSv.jpg">
  670.  
  671. </div>
  672.  
  673. <!-- end pictures bar -->
  674.  
  675. </div>
  676.  
  677. <!-- end container -->
  678.  
  679. <!---------------------------- END MAIN CONTENT----------------------------->
  680.  
  681. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  682.  
  683. <a id="credit" target="blank" title="by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  684.  
  685. <script src="https://unpkg.com/popper.js@1"></script>
  686. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  687. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  688.  
  689. <script>
  690. function myFunction() {
  691. document.getElementById("myDropdown").classList.toggle("show");
  692. }
  693.  
  694. window.onclick = function(event) {
  695. if (!event.target.matches('.dropbtn')) {
  696. var dropdowns = document.getElementsByClassName("dropdown-content");
  697. var i;
  698.  
  699. for (i = 0; i < dropdowns.length; i++) {
  700. var openDropdown = dropdowns[i];
  701. if (openDropdown.classList.contains('show')) {
  702. openDropdown.classList.remove('show');
  703. }
  704. }
  705. }
  706. }
  707.  
  708. tippy('[title]', {
  709. theme: 'custom',
  710. arrow: false,
  711. delay: [200, 0],
  712. zIndex: 9999999999,
  713. maxWidth: 300,
  714.  
  715. content(reference) {
  716. const title = reference.getAttribute('title');
  717. reference.removeAttribute('title');
  718. return title;
  719. },
  720. });
  721. </script>
  722.  
  723. </body>
  724.  
  725. </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!