API tools faq
paste
Petra1999

ABOUT 01 | cloudythms.tumblr.com

Petra1999
Sep 13th, 2018
1,951
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 18.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><link rel="shortcut icon" href="{Favicon}"/><meta name="viewport" content="width=device-width, initial-scale=1.0">
  2.  
  3.  <!-----------------------------------------------------------------------
  4.  
  5.  
  6.        {   cloudythms
  7.                     about page 01    }
  8.          
  9.  
  10.                        by
  11.             cloudythms.tumblr.com
  12.       contact me if you have questions!
  13.  
  14.  
  15. ......  rules  ......
  16.  
  17. * edit as much as you want
  18. * do not remove the credit
  19. * do not steal parts of my codes
  20. * do not redistribute or use as base
  21.  
  22.  
  23. ......  guide  ......
  24.  
  25. > HOW TO SEARCH
  26.   1. Make sure you have already clicked somewhere in the code
  27.   2. Press Ctrl and F
  28.   3. A little "search for" window should open
  29.  
  30. > ADDING CONTENT:
  31.   Search for "edit from here",
  32.   you will be working between that line and "to here".
  33.   Follow the guide there.
  34.  
  35. > CHANGING THE TEXT ON THE TAB IN YOUR BROWSER:
  36.   Search for "page title",
  37.   follow the guide there.
  38.  
  39. > CHANGING THE COLORS/SIZES:
  40.  Search for "variables",
  41.  follow the guide there.
  42.  
  43. > CHANGING THE BACKGORUND IMAGE:
  44.  Search for "background image",
  45.  replace the image url.
  46.  Remove the whole line if you don't want a bg image.
  47.  
  48. > SHOWING TUMBLR CONTROLS:
  49.   (Tumblr controls are the buttons on the top right corner
  50.   of blogs, like the follow, block, dashboard button etc.)
  51.   By default, my page themes have the tumblr controls hidden.
  52.   If you want them to show, search for "hide tumblr controls"
  53.   and delete the line below it.
  54.  
  55.  
  56.  
  57. ......  credits  ......
  58.  
  59. icon font:          honeybee @themehive
  60. fonts:              fonts.google.com
  61. tumblr controls:    @cyantists
  62. smoothscroll:       @zacharyfury
  63. tooltips:           @tutorial-baby
  64.  
  65. full credits:       cloudythms.tumblr.com/credits
  66.  
  67.  
  68. ---------------------------------------------------------------------->
  69.  
  70.  
  71. <!-- Page Title
  72. (Text that appears on the tab / browser window)
  73. Change the text between <title> and </title>.
  74. Write {Title} to let your blogtitle show. -->
  75. <title>
  76. about
  77. </title>
  78.  
  79.  
  80.  
  81.  
  82. <!-- Variables
  83.  
  84. COLORS:
  85. Only change the color codes (after the : and before the ;)
  86. Make sure there is one # before the hex code.
  87. Example: --color-accent:#efefef;
  88. You can also use "black" and "white".
  89. Example: --color-background:white;
  90. Get hex color codes here:
  91. https://htmlcolorcodes.com/color-picker/
  92.  
  93. OTHERS:
  94. For the sizes, it should look like this: --fontSize:12px;
  95. Change the number to your liking.
  96. Example (smaller font): --fontSize:10px;
  97. Example (bigger font): --fontSize:13px;
  98. Make sure the : and px; are still there.
  99.  
  100. --> <style>:root {
  101.    
  102.     --fontSize:13px;
  103.    
  104.     --color-background:white; /* ignore if you have a bg image */
  105.     --color-contentBackground:#fafafa;
  106.     --color-borders:lightgray;
  107.     --color-text:black;
  108.     --color-accent:#E9B674;
  109.    
  110. }</style>
  111.  
  112.  
  113.  
  114.  
  115. <!-- ---------------------------------------------------------------- -->
  116. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  117. <!-- ---------------------------------------------------------------- -->
  118. <style type="text/css">
  119.  
  120.        
  121. /* hide tumblr controls
  122. (delete the line below if you want the controls to show) */
  123. body > iframe:first-child { display: none !important; }
  124.  
  125.        
  126. /* ****************************** BASICS ****************************** */
  127.  
  128. body {
  129.     padding:3%;
  130.     font-family:'Lora', sans-serif;
  131.     font-size:var(--fontSize, 12px);
  132.     color:var(--color-text,black);
  133.     background:var(--color-background,white);
  134.     -webkit-background-size:cover;
  135.     -o-background-size:cover;
  136.     background-size:cover;
  137.    
  138.    
  139.     /* background image */
  140.    
  141.     background-image:url('https://pixabay.com/get/eb3cb3062af4093ed1534705fb0938c9bd22ffd41cb2174991f3c379af/rock-2929208_1920.jpg');
  142.    
  143.    
  144. }
  145.  
  146.  
  147. .center {
  148.     position: absolute;
  149.     top:50%;
  150.     left:50%;
  151.     -ms-transform: translateX(-50%) translateY(-50%);
  152.     -webkit-transform: translate(-50%,-50%);
  153.     -moz-transform: translate(-50%,-50%);
  154.       -o-transform: translate(-50%,-50%);
  155.          transform: translate(-50%,-50%);
  156. }
  157.  
  158. a, a:hover{
  159.     color:var(--color-text,black);
  160. }
  161.  
  162. a, a:focus {
  163.     outline: 0;
  164.     text-decoration:none;
  165. }
  166.  
  167. /* selections */
  168. ::-moz-selection {
  169.   background: rgba(0,0,0,0.3);
  170.   color: white;
  171. }
  172. ::selection {
  173.   background: rgba(0,0,0,0.3);
  174.   color: white;
  175. }
  176. ::-moz-selection {
  177.   background: rgba(0,0,0,0.3);
  178.   color: white;
  179. }
  180.  
  181. /* custom scrollbar */
  182. main ::-webkit-scrollbar-thumb:vertical {
  183. background-color:rgba(0,0,0,0.2);
  184. height:100px;
  185. -webkit-border-radius:15px;
  186.         border-radius:15px;
  187. }
  188. main ::-webkit-scrollbar-thumb:horizontal {
  189. background-color:rgba(0,0,0,0.2);
  190. height:100px !important;
  191. }
  192. main ::-webkit-scrollbar {
  193. height:10px;
  194. width:10px;
  195. background-color:transparent;
  196. }
  197.  
  198. /* tumblr controls */
  199.  iframe.tmblr-iframe {
  200.     z-index:99999999999999!important;
  201.     top:0!important;
  202.     right:0!important;
  203.     opacity:0.3;
  204.         filter:invert(1) contrast(150%);
  205.         -webkit-filter:invert(1) contrast(150%);
  206.         -o-filter:invert(1) contrast(150%);
  207.         -moz-filter:invert(1) contrast(150%);
  208.         -ms-filter:invert(1) contrast(150%);
  209.     transform:scale(0.65);
  210.     transform-origin:100% 0;
  211.     -webkit-transform:scale(0.65);
  212.     -webkit-transform-origin:100% 0;
  213.     -o-transform:scale(0.65);
  214.     -o-transform-origin:100% 0;
  215.     -moz-transform:scale(0.65);
  216.     -moz-transform-origin:100% 0;
  217.     -ms-transform:scale(0.65);
  218.     -ms-transform-origin:100% 0;
  219.      transition:1s ease;
  220.      -o-transition:1s ease;
  221.      -moz-transition:1s ease;
  222.      -webkit-transition:1s ease;
  223.  }
  224. iframe.tmblr-iframe:hover {
  225.     opacity:0.6!important;}
  226. .tmblr-iframe--app-cta-button {
  227.     display: none!important;
  228. }
  229.  
  230. /* ************************** LAYOUT ************************** */
  231.  
  232.  
  233. main {
  234.     height:500px;
  235.     width:900px;
  236.     max-height:90vh;
  237.     max-width:90vw;
  238.     position:relative;
  239.     border:1px solid var(--color-borders);
  240.     -webkit-border-radius:5px;
  241.             border-radius:5px;
  242.     background:var(--color-contentBackground,white);
  243.    
  244.     display:-ms-grid;
  245.    
  246.     display:grid;
  247.     grid-gap:0 0;
  248.     -ms-grid-rows:auto;
  249.     -ms-grid-columns:25% 0 auto 0 10%;
  250.         grid-template:
  251.         "left middle right" auto
  252.         / 25% auto 10%;
  253.        
  254.        
  255.     -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.05);
  256.     box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.05);
  257.    
  258. }
  259.  
  260. .left, .middle, .right {
  261.    
  262. }
  263.  
  264. .left {
  265.     -ms-grid-row:1;
  266.     -ms-grid-column:1;
  267.     grid-area:left;
  268.     border-right:1px solid var(--color-borders) !important;
  269.     overflow-y:auto;
  270. }
  271. .middle {
  272.     -ms-grid-row:1;
  273.     -ms-grid-column:3;
  274.     grid-area:middle;
  275.     overflow-y:auto;
  276. }
  277. .right {
  278.     -ms-grid-row:1;
  279.     -ms-grid-column:5;
  280.     grid-area:right;
  281.     border-left:1px solid var(--color-borders) !important;
  282. }
  283.  
  284. h1 {
  285.     position:absolute;
  286.     top:0;
  287.     left:5%;
  288.     -webkit-transform:translateY(-80%);
  289.        -moz-transform:translateY(-80%);
  290.         -ms-transform:translateY(-80%);
  291.          -o-transform:translateY(-80%);
  292.             transform:translateY(-80%);
  293.     line-height:100%;
  294.     margin:0;
  295.     z-index:-1;
  296.     letter-spacing: 0.05em;
  297.     word-spacing: 0.3em;
  298.     font-family:'Allura';
  299.     font-size:4em;
  300.     color:var(--color-text);
  301. }
  302.  
  303.  
  304.  
  305.  
  306. /* ************************** LEFT ************************** */
  307.  
  308.  
  309. .left {
  310.     border: 2em solid transparent;
  311.     padding-right: 2em;
  312. }
  313.  
  314. .fact {
  315.     display:block;
  316.     font-weight: bold;
  317.     border-bottom: 1px solid var(--color-borders);
  318.     padding-bottom: 0.3em;
  319.     padding-left:1em;
  320. }
  321.  
  322. .value, .value-bar {
  323.     display:block;
  324.     margin-bottom:1.1em;
  325.     margin-top: 0.5em;
  326.     text-align: right;
  327.     padding-right: 1em;
  328.     font-style: italic;
  329. }
  330.  
  331.  
  332. .value-bar, .value-bar span {
  333.     height:0.95em;
  334. }
  335. .value-bar {
  336.     width:70%;
  337.     position: relative;
  338.     margin:0.9em auto 2em auto;
  339. }
  340. .value-bar span {
  341.     background:var(--color-accent);
  342.     position:absolute;
  343.     top:0;
  344.     left:0;
  345.     -webkit-border-radius: 7px;
  346.             border-radius: 7px;
  347. }
  348.  
  349. /* ************************** MIDDLE ************************** */
  350.  
  351.  
  352. .middle {
  353.     padding-right: 2em;
  354.     border: 3em solid transparent;
  355. }
  356.  
  357. .middle b {
  358.     color:var(--color-accent);
  359. }
  360. .middle i {
  361.     opacity:0.6;
  362. }
  363. .middle u {
  364.     text-decoration:none;
  365.     border-bottom:1px dashed;
  366. }
  367.  
  368. .middle ol, .middle ul {
  369.     margin: 1.5em 0;
  370. }
  371. .middle li {
  372.     margin: 0.5em;
  373. }
  374.  
  375. .middle a {
  376.     text-decoration:none;
  377.     border-bottom:1px dotted var(--color-text);
  378.     -webkit-transition:0.3s ease;
  379.     -o-transition:0.3s ease;
  380.     -moz-transition:0.3s ease;
  381.     transition:0.3s ease;
  382. }
  383. .middle a:hover {
  384.     opacity:0.6;
  385.     color:var(--color-accent);
  386. }
  387.  
  388. .middle p {
  389.     text-align:justify;
  390.     line-height: 170%;
  391.     letter-spacing: 0.01em;
  392. }
  393.  
  394. .middle h2 {
  395.     text-align:center;
  396.     margin: 1.5em 0;
  397. }
  398. .middle h2:before, .middle h2:after {
  399.     content:'';
  400.     display:block;
  401.     margin:0.3em auto;
  402.     width:60%;
  403.     height:1px;
  404.     background-image: -webkit-gradient(linear,
  405.     left top, right top,
  406.     from(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  407.     background-image: -webkit-linear-gradient(left,
  408.     rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  409.     background-image: -moz-linear-gradient(left,
  410.     rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  411.     background-image: -o-linear-gradient(left,
  412.     rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  413.     background-image: linear-gradient(to right,
  414.     rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  415. }
  416.  
  417.  
  418. /* ************************** RIGHT ************************** */
  419.  
  420. .right {
  421.     overflow: hidden;
  422.     display:-webkit-box;
  423.     display:-webkit-flex;
  424.     display:-moz-box;
  425.     display:-ms-flexbox;
  426.     display:flex;
  427.     -webkit-box-orient: vertical;
  428.     -webkit-box-direction: normal;
  429.     -webkit-flex-flow: column nowrap;
  430.        -moz-box-orient: vertical;
  431.        -moz-box-direction: normal;
  432.         -ms-flex-flow: column nowrap;
  433.             flex-flow: column nowrap;
  434.     -webkit-box-pack: space-evenly;
  435.     -webkit-justify-content: space-evenly;
  436.        -moz-box-pack: space-evenly;
  437.         -ms-flex-pack: space-evenly;
  438.             justify-content: space-evenly;
  439.     -webkit-box-align: center;
  440.     -webkit-align-items: center;
  441.        -moz-box-align: center;
  442.         -ms-flex-align: center;
  443.             align-items: center;
  444.     border: 2em solid transparent;
  445.     padding-left: 2em;
  446. }
  447.  
  448. .right a {
  449.     display:block;
  450.     margin:1.2em 0;
  451.     text-align:center;
  452.     color:var(--color-accent);
  453. }
  454.  
  455. .right a .th {
  456.     font-size: 1.5em;
  457.     -webkit-transition:color 0.3s ease-in-out,
  458.                 -webkit-transform 0.3s ease-out;
  459.     transition:color 0.3s ease-in-out,
  460.                 -webkit-transform 0.3s ease-out;
  461.     -o-transition:color 0.3s ease-in-out,
  462.                 -o-transform 0.3s ease-out;
  463.     -moz-transition:color 0.3s ease-in-out,
  464.                 transform 0.3s ease-out,
  465.                 -moz-transform 0.3s ease-out;
  466.     transition:color 0.3s ease-in-out,
  467.                 transform 0.3s ease-out;
  468.     transition:color 0.3s ease-in-out,
  469.                 transform 0.3s ease-out,
  470.                 -webkit-transform 0.3s ease-out,
  471.                 -moz-transform 0.3s ease-out,
  472.                 -o-transform 0.3s ease-out;
  473.    
  474. }
  475.  
  476. .right a:hover .th {
  477.     color:var(--color-borders);
  478.     -webkit-transform:rotate(-30deg);
  479.        -moz-transform:rotate(-30deg);
  480.         -ms-transform:rotate(-30deg);
  481.          -o-transform:rotate(-30deg);
  482.             transform:rotate(-30deg);
  483.    
  484. }
  485.  
  486.  
  487. </style>
  488. </head>
  489. <!-- ---------------------------------------------------------------- -->
  490. <!-- ------------------------ HTML - S T A R T ---------------------- -->
  491. <!-- ---------------------------------------------------------------- -->
  492. <body><main class="center">
  493.  
  494.  
  495. <!-- edit from here -->
  496.  
  497.  
  498.             <!--- title ---->
  499.             <h1>about me</h1>
  500.    
  501.    
  502.    
  503. <!------------- left ------------->
  504. <section class="left">
  505.  
  506.  
  507.     <div class="fact">name</div>
  508.     <div class="value">alana</div>
  509.    
  510.     <div class="fact">pronouns</div>
  511.     <div class="value">she/they</div>
  512.    
  513.     <div class="fact">birthday</div>
  514.     <div class="value">17.07.</div>
  515.    
  516.     <div class="fact">project</div>
  517.     <div class="value-bar"><span style="width:40%"></span></div>
  518.    
  519.     <div class="fact">skill</div>
  520.     <div class="value-bar"><span style="width:80%"></span></div>
  521.    
  522.     <div class="fact">fact</div>
  523.     <div class="value">value</div>
  524.  
  525.  
  526.  
  527. </section>
  528.  
  529.  
  530.  
  531. <!------------- middle -----------
  532.  
  533. Formatting:
  534.  
  535.    <p>paragraph</p>
  536.    line break: <br>
  537.    
  538.    <b>bold text</b>
  539.    <i>italic text</i>
  540.    <u>underline text</u>
  541.    <a href="LINK">link</a>
  542.    
  543.    ordered list:
  544.    <ol>
  545.        <li>list item</li>
  546.        <li>list item</li>
  547.    </ol>
  548.    
  549.    unordered list:
  550.    <ul>
  551.        <li>list item</li>
  552.        <li>list item</li>
  553.    </ul>
  554.    
  555. -->
  556. <section class="middle">
  557.    
  558.    
  559. <p>
  560. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vulputate leo justo, rhoncus <b>pharetra</b> mi hendrerit in. Praesent ullamcorper, justo ut rutrum commodo, elit ex <i>lobortis</i> dolor, sed vulputate lectus justo vitae ante. Proin vulputate eu nibh id tempor. Donec <u>lacinia</u> facilisis maximus. Nulla et ligula nunc. Proin vulputate eu nibh id tempor. Suspendisse condimentum eleifend lorem, eu egestas lacus tempor varius. Quisque quis <a href="#">pharetra</a> ex. Duis vulputate nisl lacus, mollis varius neque iaculis non.
  561. </p>
  562.  
  563. <p>
  564. Fusce lacus massa, convallis ac ullamcorper finibus, posuere vitae lectus. Duis aliquet gravida magna non bibendum. Nullam purus dolor, aliquam sed odio et, placerat sodales leo. Suspendisse luctus sollicitudin sodales.
  565. </p>
  566.  
  567. <h2>lorem ipsum</h2>
  568.  
  569. <p>
  570. Phasellus sapien tellus, pellentesque nec risus eget, hendrerit pellentesque elit. Fusce molestie, dui eu cursus sodales, turpis erat pellentesque lacus, at tempus eros odio non dolor. Cras ultricies diam sed nibh semper, blandit tincidunt sapien sollicitudin. Proin quam magna, vulputate sit amet lectus id, sollicitudin fringilla nulla. Phasellus eget erat faucibus, gravida arcu sed, feugiat nunc. Nunc feugiat vehicula lorem pharetra gravida. Donec varius ac nibh nec fermentum.
  571. </p>
  572.  
  573. <ul>
  574.     <li>list item</li>
  575.     <li>list item</li>
  576.     <li>list item</li>
  577.     <li>list item</li>
  578.     <li>list item</li>
  579. </ul>
  580.  
  581. <p>
  582. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vulputate leo justo, rhoncus pharetra mi hendrerit in. Praesent ullamcorper, justo ut rutrum commodo, elit ex lobortis dolor, sed vulputate lectus justo vitae ante. Proin vulputate eu nibh id tempor. Donec lacinia facilisis maximus. Nulla et ligula nunc. Suspendisse condimentum eleifend lorem, eu egestas lacus tempor varius. Quisque quis pharetra ex. Duis vulputate nisl lacus, mollis varius neque iaculis non.
  583. </p>
  584.    
  585.    
  586.    
  587.    
  588.    
  589. </section>
  590.  
  591.  
  592.  
  593. <!------------- right -----------
  594. more icons at: https://themehive.co/honeybee -->
  595. <section class="right">
  596.  
  597.  
  598.     <a href="LINK"
  599.    target="_blank"><span class="th th-instagram"></span></a>
  600.    
  601.     <a href="LINK"
  602.    target="_blank"><span class="th th-pinterest"></span></a>
  603.    
  604.     <a href="LINK"
  605.    target="_blank"><span class="th th-snapchat"></span></a>
  606.    
  607.     <a href="LINK"
  608.    target="_blank"><span class="th th-twitter"></span></a>
  609.    
  610.     <a href="LINK"
  611.    target="_blank"><span class="th th-youtube"></span></a>
  612.    
  613.     <a href="LINK"
  614.    target="_blank"><span class="th th-spotify"></span></a>
  615.    
  616.     <a href="LINK"
  617.    target="_blank"><span class="th th-pencil"></span></a>
  618.    
  619.  
  620. </section>
  621.  
  622. <!--  to here -->
  623. </main>
  624. <div style="height:100px"></div>
  625.  
  626.  
  627.  
  628. <!-- ---------- credit ---------- -->
  629. <!-- credit link. you may move but not remove. -->
  630. <link href="https://static.tumblr.com/tpbx7ye/yiLpc9kpz/cloudythms.css" rel="stylesheet"><style>#credit { opacity:0.3; } credit, #credit a, #credit a:before { color: var(--color-contentBackground,white) !important; }</style>
  631. <div id="credit"><a href="https://cloudythms.tumblr.com/">
  632. <i class="far fa-copyright"></i></a></div>
  633.  
  634.  
  635. <!-- -------------------------- SCRIPTS ---------------------------- -->
  636.    
  637. <!-- jQuery
  638. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
  639.  
  640. <!-- Fonts -->
  641. <link href="https://fonts.googleapis.com/css?family=Karla|Lora:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
  642. <link href="https://fonts.googleapis.com/css?family=Allura&amp;subset=latin-ext" rel="stylesheet">
  643.  
  644. <!-- FontAwesome -->
  645. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  646.  
  647. <!-- Linearicons -->
  648. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  649.  
  650. <!-- Honeybee -->
  651. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  652.  
  653. <!-- Smooth Scroll-->
  654. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  655.  
  656. <!-- no tumblr redirect links-->
  657. <script>
  658. $(document).ready(function(){
  659. //remove tumblr redirects script by magnusthemes@tumblr
  660. $('a[href*="t.umblr.com/redirect"]').each(function(){
  661.   var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  662.   var replaceURL = decodeURIComponent(originalURL);
  663.   $(this).attr("href", replaceURL);
  664. });
  665. });
  666. </script>
  667.    
  668. <!-- Tooltips -->
  669. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  670. <script>
  671. (function($){
  672. $(document).ready(function(){
  673. $("a[title]").style_my_tooltips({
  674. tip_follows_cursor:true,
  675. tip_delay_time:30, /* put a higher number for more delay */
  676. tip_fade_speed:400, /* put a higher number for a slower fade */
  677. attribute:"title"
  678. });
  679. });
  680. })(jQuery);
  681. </script>
  682. <style>
  683. .tooltip{display: inline;
  684. position: relative;}
  685. #s-m-t-tooltip {
  686.     max-width:300px;
  687.     border-radius: 0px;
  688.     padding:3px 4px 5px 4px;
  689.     margin:20px 7px -2px 20px;
  690.     background-color:var(--color-background,white);
  691.     border:1px solid #E0E0E0;
  692.     border-radius: 5px;
  693.     font-size:0.8em;
  694.     letter-spacing:0.5px;
  695.     text-transform:uppercase;
  696.     color:var(--color-text,black);
  697.     z-index:9999999999999999;
  698. }
  699. </style>
  700.  
  701. </body>
  702. </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!