API tools faq
paste
themesbydoori

Lukewarm

themesbydoori
Feb 19th, 2022 (edited)
1,264
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.45 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Page ⎾LUKEWARM⏌ by sheathemes @ tumblr
  11.  
  12. - TERMS -
  13.  
  14. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  15. II. Do NOT take any part of my code to use for your personal designs
  16. III. Do NOT claim any part of my code as your own
  17. IV. NO redistrubuting of any of my code
  18. V. Editing is allowed. As long as it's NOT being claimed as your own
  19.  
  20. CREDITS
  21.  
  22. > Tippy.js: https://atomiks.github.io/tippyjs/
  23.  
  24. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  25.  
  26. > Icons: https://phosphoricons.com/
  27.  
  28. !-->
  29.  
  30. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  31. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  32.  
  33. <head>
  34.  
  35. <!------------Smooth Scroll Script------------>
  36. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  37. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  38. <!------------Smooth Scroll Script------------>
  39.  
  40. <!--------------Custom Fonts-------------->
  41. <link rel="preconnect" href="https://fonts.googleapis.com">
  42. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  43. <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,500&family=Mukta:wght@400;500;700&display=swap" rel="stylesheet">
  44. <!--------------Custom Fonts-------------->
  45.  
  46. <!----------------Homelinks Icons---------------->
  47. <script src="https://unpkg.com/phosphor-icons"></script>
  48. <!----------------Homelinks Icons---------------->
  49.  
  50.     <title>{Title}</title>
  51.     <link rel="shortcut icon" href="{Favicon}">
  52.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  53.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  54.     <meta name="viewport" content="width=device-width, initial-scale=1">
  55.  
  56. <style type="text/css">
  57.  
  58. /*------
  59.  
  60. CUSTOMIZATION OPTIONS HERE. HERE YOU CAN GE EVERYTHING FROM THE COLORS TO THE OVERALL FONT SIZE TO YOUR LIKING!
  61.  
  62. ------ */
  63.  
  64. :root {
  65.     /*------ Change the font size here------ */
  66.     --main-font-size: 14px;
  67.    
  68.     /*------ Change the colors here------ */
  69.     --accent: #fcca85;
  70.     --accented-text: #ffffff;
  71.     --main-background: #fbfbfb;
  72.     --text: #888888;
  73.     --bold: #280f0d;
  74.     --italic: #000000;
  75.     --main-links: #00000;
  76.     --link-hover: #B08E72;
  77.     --scrollbar: #fcca85;
  78.     --text-selection-background: #fcca85;
  79.     --text-selection: #000000;
  80.     --tooltip: #000000;
  81.     --tooltip-background: #fcca85;
  82.     --about-background: #ffffff;
  83.     --post-borders: #f6f6f6;
  84.    
  85.     /*----------
  86.     Percentage bars here. You edit here. Make sure to use the percentage. It's required in order for it to work
  87.     ----------*/
  88.     --skill-percentage-one: 25%;
  89.     --skill-percentage-two: 65%;
  90.     --skill-percentage-three: 40%;
  91. }
  92.  
  93. /*----------FADE-IN ANIMATION----------*/
  94.  
  95. @keyframes fadein {
  96.     from {opacity:0;}
  97.     to {opacity:1;}
  98. }
  99.  
  100. @-moz-keyframes fadein { /* Firefox */
  101.     from {opacity:0;}
  102.     to {opacity:1;}
  103. }
  104.  
  105. @-webkit-keyframes fadein { /* Safari and Chrome */
  106.     from {opacity:0;}
  107.     to {opacity:1;}
  108. }
  109.  
  110. @-o-keyframes fadein { /* Opera */
  111.     from {opacity:0;}
  112.     to {opacity: 1;}
  113. }
  114.  
  115. /*----------TUMBLR CONTROLS----------*/
  116.  
  117. iframe#tumblr_controls, .iframe-controls--desktop {
  118.     right: 10px !important;
  119.     top: 25px !important;
  120.     position: fixed !important;
  121.     z-index: 99999999999999999999 !important;
  122.     -webkit-filter: invert(100%);
  123.     -moz-filter: invert(100%);
  124.     -o-filter: invert(100%);
  125.     -webkit-transition: opacity 0.4s linear;opacity: 0.4;
  126.     -webkit-transition: all 0.8s ease-out;
  127.     -moz-transition: all 0.8s ease-out;
  128.     transition: all 0.8s ease-out;
  129.     display: none;
  130. }
  131.  
  132. /*----------SCROLLBAR----------*/
  133.  
  134. ::-webkit-scrollbar {
  135.     width: 12px;
  136.     height: 6px;
  137. }
  138. ::-webkit-scrollbar-button {
  139.     width: 0px;
  140.     height: 0px;
  141. }
  142. ::-webkit-scrollbar-thumb {
  143.     background-color: var(--scrollbar);
  144.     border-radius: 20px;
  145.     border: 2px solid var(--about-background);
  146. }
  147.  
  148. ::-webkit-scrollbar-track {
  149.     background: var(--post-borders);
  150.     border: 8px solid var(--post-borders);
  151.     border-radius: 20px;
  152. }
  153.  
  154. ::-webkit-scrollbar-corner {
  155.     background: transparent;
  156. }
  157.  
  158. /*----------TOOLTIPS----------*/
  159.  
  160. .tippy-tooltip.custom-theme {
  161.     background-color: var(--tooltip-background);
  162.     color: var(--tooltip);
  163.     text-align:center;
  164.     font-weight: 700;
  165. }
  166.  
  167. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  168.   fill: var(--tooltip-background);
  169. }
  170.  
  171. /*----------TEXT SELECTION----------*/
  172. ::selection {
  173.     background: var(--text-selection-background);
  174.     color: var(--text-selection);
  175. }
  176.  
  177. ::-moz-selection {
  178.     background: var(--text-selection-background);
  179.     color: var(--text-selection);
  180. }
  181.  
  182. ::-webkit-selection {
  183.     background: var(--text-selection-background);
  184.     color: var(--text-selection);
  185. }
  186.  
  187. /*----------THEME BASICS----------*/
  188.  
  189. body {
  190.     margin: 0;
  191.     padding: 0;
  192.     box-sizing: border-box;
  193.     display: flex;
  194.     justify-content: center;
  195.     align-items: center;
  196.     min-height: 100vh;
  197.     color: var(--main-font-color);
  198.     font-family: 'Mukta', sans-serif;
  199.     font-weight: 400;
  200.     line-height: 180%;
  201.     font-size: var(--main-font-size);
  202.     background: var(--main-background) url("") center; /*Add a background image between the quotations*/
  203.     background-attachment: fixed;
  204.     background-repeat: repeat;
  205.     -webkit-font-smoothing: antialiased;
  206.     -moz-osx-font-smoothing: grayscale;
  207.     animation: fadein 2.5s;
  208.     -moz-animation: fadein 2.5s;
  209.     -webkit-animation: fadein 2.5s;
  210.     -o-animation: fadein  2.5s;
  211. }
  212.  
  213. b,strong {
  214.     color:var(--bold);
  215.     font-weight: 700;
  216. }
  217.  
  218. i,em {
  219.     color:var(--italic);
  220. }
  221.  
  222. small,sub,sup {
  223.     font-size: calc(var(--main-font-size) - 0.5px);
  224. }
  225.  
  226. h1,h2,h3 {
  227.     font-weight: 700;
  228.     font-size: 1.3em;
  229.     color: var(--bold);
  230. }
  231.  
  232. h4,h5,h6 {
  233.     font-weight: 700;
  234.     font-size: 1.2em;
  235.     color: var(--bold);
  236. }
  237.  
  238. a {
  239.     color: var(--main-links);
  240.     text-decoration:none;
  241.     -moz-transition-duration: 0.5s;
  242.     -o-transition-duration: 0.5s;
  243.     -webkit-transition-duration: 0.5s;
  244.     transition-duration: 0.5s;
  245. }
  246.  
  247. a:hover {
  248.     color: var(--link-hover);
  249.     -moz-transition-duration: 0.5s;
  250.     -o-transition-duration: 0.5s;
  251.     -webkit-transition-duration: 0.5s;
  252.     transition-duration: 0.5s;
  253. }
  254.  
  255. /*----------MAIN CONTAINER----------*/
  256.  
  257. .about-container {
  258.     width: 980px;
  259.     height: 670px;
  260.     display: flex;
  261.     padding: 40px;
  262.     background-color: var(--about-background);
  263. }
  264.  
  265. /*----------ABOUT THE BLOGGER SECTION----------*/
  266.  
  267. .about-section {
  268.     width: 630px;
  269.     padding: 10px 40px;
  270.     box-sizing: border-box;
  271.     overflow: auto;
  272. }
  273.  
  274. .about-title {
  275.     font-size: 1.6em;
  276.     font-family: 'Barlow', sans-serif;
  277.     font-weight: 700;
  278.     margin-bottom: 30px;
  279.     text-transform: uppercase;
  280.     letter-spacing: 2px;
  281. }
  282.  
  283. /*----------SKILLS / STATS----------*/
  284.  
  285. .skills-content {
  286.     margin-top: 40px;
  287. }
  288.  
  289. .skills-content p {
  290.     color: var(--main-links);
  291.     font-weight: 700;
  292. }
  293.  
  294. .skill-cont, .image-content {
  295.     margin-top: 30px;
  296. }
  297.  
  298. .skill {
  299.     background-color: var(--post-borders);
  300.     padding: 0;
  301.     box-sizing: border-box;
  302.     border-radius: 10px;
  303. }
  304.  
  305. .skill-set {
  306.     background-color: var(--accent);
  307.     width: 100%;
  308.     height: 10px;
  309.     border-radius: 10px;
  310.     transition: 0.6s;
  311. }
  312.  
  313. /*----------IMAGE GALLERY----------*/
  314.  
  315. .image-section img {
  316.     width: 100px;
  317.     height: 100px;
  318. }
  319.  
  320. .image-section {
  321.     margin-top: 40px;
  322.     display: grid;
  323.     justify-content: center;    
  324.     gap: 10px;
  325.     grid-template-columns: repeat(4, 100px);
  326. }
  327.  
  328. .image-one {
  329.     grid-column: 1;
  330.     grid-row: 1;
  331. }
  332.  
  333. .image-two {
  334.     grid-column: 2;
  335.     grid-row: 1;
  336. }
  337.  
  338. .image-five {
  339.     grid-column: 3 / 5;
  340.     grid-row: 1 / 3;
  341. }
  342.  
  343. .image-five img {
  344.     width: 210px;
  345.     height: 210px;
  346. }
  347.  
  348. .image-six {
  349.     grid-column: 1 / 3;
  350.     grid-row: 3 / 5;
  351. }
  352.  
  353. .image-six img {
  354.     width: 210px;
  355.     height: 210px;
  356. }
  357.  
  358. /*----------SIDEBAR----------*/
  359.  
  360. #about-sidebar {
  361.     width: 350px;
  362. }
  363.  
  364. .image-cont {
  365.     width: 350px;
  366.     height: 390px;
  367. }
  368.  
  369. .image-cont img {
  370.     width: 100%;
  371.     height: auto;
  372. }
  373.  
  374. .blogger-info {
  375.     margin: 0;
  376.     padding: 20px 0 0;
  377.     list-style-type: none;
  378.     box-sizing: border-box;
  379. }
  380.  
  381. .blogger-info b {
  382.     border: 1px solid var(--post-borders);
  383.     padding: 5px 10px;
  384.     margin-right: 10px;
  385.     border-radius: 5px;
  386. }
  387.  
  388. .blogger-info li {
  389.     margin: 20px 0;
  390. }
  391.  
  392. /*----------NAVIGATION----------*/
  393.  
  394. .nav-bar {
  395.     padding-left: 35px;
  396.     display: flex;
  397.     justify-content: space-between;
  398.     align-items: center;
  399.     flex-direction: column;
  400. }
  401.  
  402. .nav-portrait img {
  403.     width: 50px;
  404.     height: 50px;
  405.     border-radius: 50%;
  406. }
  407.  
  408. .morelinks a {
  409.     display: block;
  410.     margin: 50px 0;
  411. }
  412.  
  413. .morelinks a:last-child {
  414.     margin-bottom: 0;
  415. }
  416.  
  417. .morelinks i {
  418.     font-size: 25px;
  419. }
  420.  
  421. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  422.  
  423. #bottom {
  424.     bottom: 40px;
  425.     position: fixed;
  426.     right: 40px;
  427.     z-index: 99;
  428.     display: flex;
  429. }
  430.  
  431. .ph-copyright {
  432.     padding: 3px;
  433.     font-size: 22px;
  434.     width: 22px;
  435.     height: 22px;
  436.     background-color: var(--accent);
  437.     color: var(--accented-text);
  438.     border-radius: 5px;
  439.     margin: 0 2px;
  440. }
  441.  
  442. </style>
  443.  
  444.  
  445. </head>
  446.  
  447. <body>
  448.  
  449. <section class="about-container">
  450.     <aside id="about-sidebar">
  451.         <div class="image-cont">
  452.             <!------SIDEBAR IMAGE ------>
  453.             <img src="https://static.tumblr.com/uh2chis/yWSr7kni3/jessica-felicio-qs9zx5uns14-unsplash.png">
  454.             <!------SIDEBAR IMAGE ------>
  455.         </div>
  456.         <ul class="blogger-info">
  457.             <li><b>Name</b> name here</li> <!------NAME HERE------>
  458.             <li><b>Pronouns</b> pronouns here</li> <!------PRONOUNS HERE------>
  459.             <li><b>Age</b> age here</li> <!------AGE HERE------>
  460.             <li><b>location</b> location here</li> <!------LOCATION HERE------>
  461.             <li><b>Occupation</b> occupation here</li> <!------OCCUPATION HERE------>
  462.         </ul>
  463.     </aside>
  464.     <article class="about-section">
  465.             <!----------------ABOUT ME SECTION START---------------->
  466.         <section class="about-content">
  467.             <div class="about-title">About the blogger</div> <!------ABOUT TITLEE------>
  468.             <div class="about-bio">
  469.            
  470.             <!------IF YOU WANT TO ADD ANOTHER PARAGRAPH, JUST COPY THIS CODE:
  471.            
  472.            <p>this is where you write your paragraph</p>
  473.            
  474.            and paste it below.
  475.            
  476.            ------>
  477. <p>
  478. <!------EDIT ABOUT ME BELOW------>
  479. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed arcu sapien. Vestibulum ornare, lectus et pulvinar semper, odio nisl pharetra dui, sit amet feugiat leo nibh et libero. Nulla id nibh tincidunt, commodo urna efficitur, laoreet mauris. Aliquam mollis neque a purus rhoncus facilisis. Quisque sed lorem finibus, eleifend nulla at, commodo nisl. Integer vitae eros purus. Nulla facilisi. Praesent nibh est, lobortis et lacinia quis, sollicitudin id mi. Praesent mattis nisl id mauris dignissim, in eleifend purus interdum. Duis arcu metus, dictum sed hendrerit vel, ullamcorper eget nisl. Fusce tempus elit a porta congue. Duis cursus sed justo quis commodo. Morbi nunc nisl, sagittis in semper viverra, hendrerit ut ex.
  480. <!------EDIT ABOUT ME ABOVE------>
  481. <p>
  482.  
  483. <p>
  484. <!------EDIT ABOUT ME BELOW------>
  485. Nullam commodo feugiat aliquet. Integer tristique et velit quis venenatis. In placerat lacus sed urna porttitor, sit amet pharetra libero lobortis. Phasellus sit amet mauris eleifend, auctor velit ut, aliquam ante. Vivamus pharetra risus id ipsum sagittis, ac efficitur nunc commodo. Suspendisse dignissim erat non augue efficitur, vitae fermentum massa pretium. Quisque cursus dapibus tellus.
  486. <!------EDIT ABOUT ME ABOVE------>
  487. </p>
  488.             </div>
  489.         </section>
  490.         <!----------------ABOUT ME SECTION END---------------->
  491.        
  492.     <!----------------SKILLS START---------------->
  493.     <section class="skills-content">
  494.         <div class="about-title">Skills</div> <!------Edit skill 1 title------>
  495.             <section class="skill-cont">
  496.                 <section class="skill">
  497.                 <section class="skill-set" style="width:var(--skill-percentage-one);"></section>
  498.                 </section>
  499.             </section>
  500.             <p>Skill one</p>
  501.            
  502.             <section class="skill-cont">
  503.                 <section class="skill">
  504.                 <section class="skill-set" style="width:var(--skill-percentage-two);"></section>
  505.                 </section>
  506.             </section>
  507.             <p>Skill two</p> <!------Edit skill 2 title------>
  508.            
  509.             <section class="skill-cont">
  510.                 <section class="skill">
  511.                 <section class="skill-set" style="width:var(--skill-percentage-three);"></section>
  512.                 </section>
  513.             </section>
  514.             <p>Skill three</p> <!------Edit skill 3 title------>
  515.     </section>
  516.     <!----------------SKILLS END---------------->
  517.    
  518.     <!----------------IMAGE GALLERY START---------------->    
  519.     <section class="image-content">
  520.         <div class="about-title">Image Gallery</div>
  521.         <div class="image-section">
  522.             <div class="image-one">
  523.             <!----------EDIT FIRST IMAGE BETWEEN QUOTATION---------->  
  524.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  525.             <!----------EDIT FIRST IMAGE BETWEEN QUOTATION---------->      
  526.             </div>
  527.            
  528.             <div class="image-two">
  529.             <!----------EDIT SECOND IMAGE BETWEEN QUOTATION---------->  
  530.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  531.              <!----------EDIT SECOND IMAGE BETWEEN QUOTATION---------->    
  532.             </div>
  533.             <div class="image-three">
  534.             <!----------EDIT THIRD IMAGE BETWEEN QUOTATION---------->
  535.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  536.             <!----------EDIT THIRD IMAGE BETWEEN QUOTATION---------->    
  537.             </div>
  538.            
  539.             <div class="image-four">
  540.             <!----------EDIT FOURTH IMAGE BETWEEN QUOTATION---------->
  541.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  542.             <!----------EDIT FOURTH IMAGE BETWEEN QUOTATION---------->  
  543.             </div>
  544.            
  545.             <div class="image-five">
  546.             <!----------EDIT FIFTH IMAGE BETWEEN QUOTATION---------->
  547.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  548.             <!----------EDIT FIFTH IMAGE BETWEEN QUOTATION---------->    
  549.             </div>
  550.            
  551.             <div class="image-six">
  552.             <!----------EDIT SIXTH IMAGE BETWEEN QUOTATION---------->
  553.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  554.             <!----------EDIT SIXTH IMAGE BETWEEN QUOTATION---------->    
  555.             </div>
  556.             <div class="image-seven">
  557.             <!----------EDIT SEVENTH IMAGE BETWEEN QUOTATION---------->
  558.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  559.             <!----------EDIT SEVENTH IMAGE BETWEEN QUOTATION---------->    
  560.             </div>
  561.            
  562.             <div class="image-eight">
  563.             <!----------EDIT EIGTH IMAGE BETWEEN QUOTATION---------->
  564.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  565.             <!----------EDIT EIGTH IMAGE BETWEEN QUOTATION---------->  
  566.             </div>
  567.            
  568.             <div class="image-nine">
  569.             <!----------EDIT NINTH IMAGE BETWEEN QUOTATION---------->
  570.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  571.             <!----------EDIT NINTH IMAGE BETWEEN QUOTATION---------->  
  572.             </div>
  573.            
  574.             <div class="image-ten">
  575.             <!----------EDIT TENTH IMAGE BETWEEN QUOTATION---------->
  576.             <img src="https://static.tumblr.com/uh2chis/88yr7kxlm/jessica-felicio-qs9zx5uns14-unsplash__1_.png">
  577.             <!----------EDIT TENTH IMAGE BETWEEN QUOTATION---------->    
  578.             </div>
  579.            
  580.         </div>
  581.     </section>
  582.     <!----------------IMAGE GALLERY END---------------->    
  583.     </article>
  584.    
  585.    
  586.     <nav class="nav-bar">
  587.     <div class="nav-portrait"><img src="{PortraitURL-96}"></div>
  588.         <div class="morelinks">
  589.             <a href="/" title="home"><i class="ph-house"></i></a>
  590.             <a href="/ask" title="inbox"><i class="ph-question"></i></a>
  591.             <a href="/archive" title="archive"><i class="ph-calendar"></i></a>
  592.             <a href="/submit" title="submit"><i class="ph-envelope-simple"></i></a>
  593.             <!----------Links you can edit---------->
  594.             <a href="/" title="link 1 title here"><i class="ph-airplane-tilt"></i></a>
  595.             <a href="/" title="link 2 title here"><i class="ph-butterfly"></i></a>
  596.             <a href="/" title="link 3 title here"><i class="ph-cloud"></i></a>
  597.             <!----------Links you can edit---------->
  598.         </div>
  599.     </nav>
  600. </section>
  601.  
  602. <footer id="bottom">
  603. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  604.  <a href="https://sheathemes.tumblr.com" target="_blank" title="sheathemes"><i class="ph-copyright"></i></a>  
  605. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  606. </footer>
  607.  
  608. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  609.  
  610. <!-----------Tooltips Script----------->
  611. <script src="https://unpkg.com/popper.js@1"></script>
  612. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  613. <!-----------Tooltips Script----------->
  614.  
  615. <script>
  616.     $(document).ready(function(){
  617.         tippy('a[title]', {
  618.             theme: 'custom',
  619.             arrow: tippy.roundArrow,
  620.             zIndex: 9999999999,
  621.             placement: 'auto',
  622.             maxWidth: 300,
  623.             content(reference) {
  624.                 const title = reference.getAttribute('title');
  625.                 reference.removeAttribute('title'); return title; },
  626.            
  627.         });
  628.     });
  629. </script>
  630. </body>
  631. </html> <!---------------------------END--------------------------->
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!