API tools faq
paste
Petra1999

SOCIAL MEDIA PAGE 01 revamp | cloudythms.tumblr.com

Petra1999
Aug 16th, 2018
13,141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 26.86 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.                     social media 01
  8.              (revamp)                      }
  9.          
  10.  
  11.                        by
  12.             cloudythms.tumblr.com
  13.       contact me if you have questions!
  14.  
  15.  
  16. ......  rules  ......
  17.  
  18. * edit as much as you want
  19. * do not remove the credit
  20. * do not steal parts of my codes
  21. * do not redistribute or use as base
  22.  
  23.  
  24. ......  guide  ......
  25.  
  26. > HOW TO SEARCH
  27.   1. Make sure you have already clicked somewhere in the code
  28.   2. Press Ctrl and F
  29.   3. A little "search for" window should open
  30.  
  31. > ADDING CONTENT:
  32.   Search for "edit from here",
  33.   you will be working between that line and "to here".
  34.   After the "to here" line there's a template to copy.
  35.   Follow the guide there.
  36.  
  37. > CHANGING THE TEXT ON THE TAB IN YOUR BROWSER:
  38.   Search for "page title",
  39.   follow the guide there.
  40.  
  41. > CHANGING HEADER TITLE/LINKS:
  42.   Search for "edit header here",
  43.   follow the guide there.
  44.  
  45. > CHANGING THE COLORS/SIZES:
  46.   Search for "variables",
  47.   follow the guide there.
  48.   If you don't want the default social media colors,
  49.   search for "overwrite colors",
  50.   follow the guide there.
  51.  
  52. > SHOWING TUMBLR CONTROLS:
  53.   (Tumblr controls are the buttons on the top right corner
  54.   of blogs, like the follow, block, dashboard button etc.)
  55.   By default, my page themes have the tumblr controls hidden.
  56.   If you want them to show, search for "hide tumblr controls"
  57.   and delete the line below it.
  58.  
  59.  
  60.  
  61. ......  credits  ......
  62.  
  63. svg icons:          flaticon.com
  64. icon font:          fontawesome
  65. fonts:              fonts.google.com
  66. tumblr controls:    @cyantists
  67. smoothscroll:       @zacharyfury
  68. tooltips:           @tutorial-baby
  69. full credits:       cloudythms.tumblr.com/credits
  70.  
  71.  
  72. ......  list of icons  ......
  73.  
  74. ao3      
  75. behance        
  76. deviantart    
  77. deviantart2  
  78. eighttracks    
  79. facebook      
  80. googleplus  
  81. instagram    
  82. instagram2    
  83. linkedin      
  84. listography  
  85. pinterest    
  86. redbubble    
  87. reddit      
  88. skype        
  89. snapchat      
  90. soundcloud
  91. spotify    
  92. telegram    
  93. tumblr    
  94. tumblr2  
  95. twitter
  96. weheartit
  97. youtube
  98. youtube2
  99.  
  100. brush
  101. business
  102. camera
  103. chat
  104. dollar
  105. email
  106. euro
  107. heart
  108. images
  109. internet
  110. link
  111. messenger
  112. movie
  113. music
  114. palette
  115. phone
  116. shop
  117. star
  118.  
  119.  
  120.  
  121. ---------------------------------------------------------------------->
  122.  
  123.  
  124. <!-- Page Title
  125. (Text that appears on the tab / browser window)
  126. Change the text between <title> and </title>.
  127. Write {Title} to let your blogtitle show. -->
  128. <title>
  129. social media
  130. </title>
  131.  
  132.  
  133.  
  134.  
  135. <!-- Variables
  136.  
  137. COLORS:
  138. Only change the color codes (after the : and before the ;)
  139. Make sure there is one # before the hex code.
  140. Example: --color-accent:#efefef;
  141. You can also use "black" and "white".
  142. Example: --color-background:white;
  143. Get hex color codes here:
  144. https://htmlcolorcodes.com/color-picker/
  145.  
  146. OTHERS:
  147. For the sizes, it should look like this: --fontSize:12px;
  148. Change the number to your liking.
  149. Example (smaller font): --fontSize:10px;
  150. Example (bigger font): --fontSize:13px;
  151. Make sure the : and px; are still there.
  152.  
  153. -->
  154. <style>
  155. :root {
  156.    
  157.     --fontSize:12px;
  158.    
  159.     --linkSize:60px;
  160.    
  161.     --color-background:white;
  162.     --color-text:black;
  163.    
  164.     --color-defaultLinkLight:#e0e0e0;
  165.     --color-defaultLinkDark:#303030;
  166.    
  167. }</style>
  168.  
  169.  
  170.  
  171.  
  172. <!-- ---------------------------------------------------------------- -->
  173. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  174. <!-- ---------------------------------------------------------------- -->
  175. <style type="text/css">
  176.  
  177.        
  178. /* hide tumblr controls
  179. (delete the line below if you want the controls to show) */
  180. body > iframe:first-child { display: none !important; }
  181.  
  182.        
  183. /* ****************************** BASICS ****************************** */
  184.  
  185. body {
  186.     padding:3%;
  187.     font-family:'Karla','Open Sans', sans-serif;
  188.     font-size:var(--fontSize, 12px);
  189.     color:var(--color-text,black);
  190.     background:var(--color-background,white);
  191. }
  192.  
  193. #wrapper {
  194.     display:block;
  195.     width: 80%;
  196.     max-width: 500px;
  197. }
  198.  
  199. .center {
  200.     position: absolute;
  201.     top:25vh;
  202.     left:50%;
  203.     -ms-transform: translateX(-50%) translateY(0%);
  204.     -webkit-transform: translate(-50%,0%);
  205.     -moz-transform: translate(-50%,0%);
  206.       -o-transform: translate(-50%,0%);
  207.          transform: translate(-50%,0%);
  208. }
  209.  
  210. a, a:hover{
  211.     color:var(--color-link,black);
  212. }
  213.  
  214. a, a:focus {
  215.     outline: 0;
  216.     text-decoration:none;
  217. }
  218.  
  219. /* selections */
  220. ::-moz-selection {
  221.   background: rgba(0,0,0,0.3);
  222.   color: white;
  223. }
  224. ::selection {
  225.   background: rgba(0,0,0,0.3);
  226.   color: white;
  227. }
  228. ::-moz-selection {
  229.   background: rgba(0,0,0,0.3);
  230.   color: white;
  231. }
  232.  
  233. /* custom scrollbar */
  234. ::-webkit-scrollbar-thumb:vertical {
  235. background-color:rgba(0,0,0,0.2);
  236. height:100px;
  237. -webkit-border-radius:15px;
  238.         border-radius:15px;
  239. }
  240. ::-webkit-scrollbar-thumb:horizontal {
  241. background-color:rgba(0,0,0,0.2);
  242. height:100px !important;
  243. }
  244. ::-webkit-scrollbar {
  245. height:10px;
  246. width:10px;
  247. background-color:transparent;
  248. }
  249.  
  250. /* tumblr controls */
  251.  iframe.tmblr-iframe {
  252.     z-index:99999999999999!important;
  253.     top:0!important;
  254.     right:0!important;
  255.     opacity:0.3;
  256.         filter:invert(1) contrast(150%);
  257.         -webkit-filter:invert(1) contrast(150%);
  258.         -o-filter:invert(1) contrast(150%);
  259.         -moz-filter:invert(1) contrast(150%);
  260.         -ms-filter:invert(1) contrast(150%);
  261.     transform:scale(0.65);
  262.     transform-origin:100% 0;
  263.     -webkit-transform:scale(0.65);
  264.     -webkit-transform-origin:100% 0;
  265.     -o-transform:scale(0.65);
  266.     -o-transform-origin:100% 0;
  267.     -moz-transform:scale(0.65);
  268.     -moz-transform-origin:100% 0;
  269.     -ms-transform:scale(0.65);
  270.     -ms-transform-origin:100% 0;
  271.      transition:1s ease;
  272.      -o-transition:1s ease;
  273.      -moz-transition:1s ease;
  274.      -webkit-transition:1s ease;
  275.  }
  276. iframe.tmblr-iframe:hover {
  277.     opacity:0.6!important;}
  278. .tmblr-iframe--app-cta-button {
  279.     display: none!important;
  280. }
  281.  
  282. /***************************** loading *****************************/
  283.  
  284. #loader-wrapper {
  285.     position: fixed;
  286.     top: 0;
  287.     left:0;
  288.     width: 100%;
  289.     height: 100%;
  290.     background: var(--color-background,white);
  291.     z-index: 9999999999999990;
  292.     display: -webkit-box;
  293.     display: -webkit-flex;
  294.     display: -moz-box;
  295.     display: -ms-flexbox;
  296.     display: flex;
  297.     -webkit-box-pack: center;
  298.     -webkit-justify-content: center;
  299.        -moz-box-pack: center;
  300.         -ms-flex-pack: center;
  301.             justify-content: center;
  302.     -webkit-box-align: center;
  303.     -webkit-align-items: center;
  304.        -moz-box-align: center;
  305.         -ms-flex-align: center;
  306.             align-items: center;
  307. }
  308.  
  309. #loader {
  310.     z-index: 9999999999999991;
  311. }
  312.  
  313. .loaded #loader {
  314.     opacity: 0;
  315.     transition: all 0.3s ease-out;
  316.     -webkit-transition: all 0.3s ease-out;
  317.     -moz-transition: all 0.3s ease-out;
  318.     -o-transition: all 0.3s ease-out;
  319. }
  320.  
  321. .loaded #loader-wrapper {
  322.     visibility: hidden;
  323.     opacity: 0;
  324.     transition: opacity 0.3s 0.3s ease-out, visibility 0.3s 0.6s;
  325.     -webkit-transition: opacity 0.3s 0.3s ease-out, visibility 0.3s 0.6s;
  326.     -moz-transition: opacity 0.3s 0.3s ease-out, visibility 0.3s 0.6s;
  327.     -o-transition: opacity 0.3s 0.3s ease-out, visibility 0.3s 0.6s;
  328. }
  329.  
  330. .no-js #loader-wrapper {
  331.     display: none;
  332. }
  333.  
  334. .spinner {
  335.   margin: 0;
  336.   text-align: center;
  337. }
  338.  
  339. .spinner > div {
  340.   width: 12px;
  341.   height: 12px;
  342.   background-color: #efefef;
  343.   -webkit-border-radius: 100%;
  344.           border-radius: 100%;
  345.   margin:0 5px;
  346.   display: inline-block;
  347.   -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  348.   -moz-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  349.     -o-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  350.        animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  351. }
  352. .spinner .bounce1 {
  353.   -webkit-animation-delay: -0.32s;
  354.   -moz-animation-delay: -0.32s;
  355.     -o-animation-delay: -0.32s;
  356.        animation-delay: -0.32s;
  357. }
  358. .spinner .bounce2 {
  359.   -webkit-animation-delay: -0.16s;
  360.   -moz-animation-delay: -0.16s;
  361.     -o-animation-delay: -0.16s;
  362.        animation-delay: -0.16s;
  363. }
  364. @-webkit-keyframes sk-bouncedelay {
  365.   0%, 80%, 100% { -webkit-transform: scale(0) }
  366.   40% { -webkit-transform: scale(1.0) }
  367. }
  368. @-moz-keyframes sk-bouncedelay {
  369.   0%, 80%, 100% {
  370.     -webkit-transform: scale(0);
  371.     -moz-transform: scale(0);
  372.          transform: scale(0);
  373.   } 40% {
  374.     -webkit-transform: scale(1.0);
  375.     -moz-transform: scale(1.0);
  376.          transform: scale(1.0);
  377.   }
  378. }
  379. @-o-keyframes sk-bouncedelay {
  380.   0%, 80%, 100% {
  381.     -webkit-transform: scale(0);
  382.     -o-transform: scale(0);
  383.        transform: scale(0);
  384.   } 40% {
  385.     -webkit-transform: scale(1.0);
  386.     -o-transform: scale(1.0);
  387.        transform: scale(1.0);
  388.   }
  389. }
  390. @keyframes sk-bouncedelay {
  391.   0%, 80%, 100% {
  392.     -webkit-transform: scale(0);
  393.     -moz-transform: scale(0);
  394.       -o-transform: scale(0);
  395.          transform: scale(0);
  396.   } 40% {
  397.     -webkit-transform: scale(1.0);
  398.     -moz-transform: scale(1.0);
  399.       -o-transform: scale(1.0);
  400.          transform: scale(1.0);
  401.   }
  402. }
  403.  
  404.  
  405.  
  406. /* ************************** HEADER ************************** */
  407.  
  408. header {
  409.     margin-bottom:5vh;
  410.     text-align: center;
  411. }
  412.  
  413. header h1 {
  414.     margin-bottom:0;
  415.     font-weight: normal;
  416. }
  417.  
  418. nav {
  419.    
  420. }
  421.  
  422. nav a {
  423.     color:var(--color-text,black);
  424.     display:inline-block;
  425.     margin-right:5px;
  426.     border-bottom:1px solid transparent;
  427. }
  428.  
  429. nav a:hover {
  430.     color:var(--color-text,black);
  431.     border-bottom:1px solid;
  432. }
  433.  
  434.  
  435.  
  436. /* ************************** CONTENT ************************** */
  437.  
  438. main {
  439.    
  440. }
  441.  
  442. section {
  443.     display:-webkit-box;
  444.     display:-webkit-flex;
  445.     display:-moz-box;
  446.     display:-ms-flexbox;
  447.     display:flex;
  448.     -webkit-box-orient: horizontal;
  449.     -webkit-box-direction: normal;
  450.     -webkit-flex-flow: row wrap;
  451.        -moz-box-orient: horizontal;
  452.        -moz-box-direction: normal;
  453.         -ms-flex-flow: row wrap;
  454.             flex-flow: row wrap;
  455.     -webkit-box-pack: center;
  456.     -webkit-justify-content: center;
  457.        -moz-box-pack: center;
  458.         -ms-flex-pack: center;
  459.             justify-content: center;
  460.     -webkit-align-content: center;
  461.         -ms-flex-line-pack: center;
  462.             align-content: center;
  463.     -webkit-box-align: end;
  464.     -webkit-align-items: flex-end;
  465.        -moz-box-align: end;
  466.         -ms-flex-align: end;
  467.             align-items: flex-end;
  468. }
  469. section a {
  470.     display:-webkit-inline-box;
  471.     display:-webkit-inline-flex;
  472.     display:-moz-inline-box;
  473.     display:-ms-inline-flexbox;
  474.     display:inline-flex;
  475.     width:var(--linkSize, 50px);
  476.     height:var(--linkSize, 50px);
  477.     -webkit-border-radius: 30%;
  478.             border-radius: 30%;
  479.     margin: 5px 10px 5px 0;
  480. }
  481. section a:after {
  482.     width:var(--linkSize, 50px);
  483.     height:var(--linkSize, 50px);
  484.     content:'';
  485.     position:absolute;
  486.     background:rgba(255,255,255,0.5);
  487.     -webkit-transition:0.2s ease;
  488.     -o-transition:0.2s ease;
  489.     -moz-transition:0.2s ease;
  490.     transition:0.2s ease;
  491. }
  492. section a:after {
  493.     opacity:0.4; /* 0   = no overlay
  494.                     0.5 = 50% opacity
  495.                    ...
  496.                     1   = full overlay  */
  497. }
  498. section a:hover:after {
  499.     opacity:0;   /* 0   = no overlay on hover
  500.                     0.5 = 50% opacity on hover
  501.                    ...
  502.                     1   = full overlay on hover */
  503. }
  504. section a img {
  505.     position:relative;
  506.     display:block;
  507.     width:40%;
  508.     height:40%;
  509.     margin:auto;
  510. }
  511. section a.bigger img {
  512.     width:50%;
  513.     height:50%;
  514. }
  515. section a.smaller img {
  516.     width:30%;
  517.     height:30%;
  518. }
  519. section a.black {
  520.     background:var(--color-defaultLinkLight, #e0e0e0);
  521. }
  522. section a.white {
  523.     background:var(--color-defaultLinkDark, #303030);
  524. }
  525. section a.white img {
  526.     filter: invert(1);
  527.     -webkit-filter: invert(1);
  528. }
  529.  
  530. /* ************************** ICONS ************************** */
  531. :root {
  532. /* social media colors collected by cloudythms */
  533. --android:#68B545;
  534. --ao3:#911111;
  535. --behance:#0057FF;
  536. --deviantart:#05cc46;
  537. --deviantartOld:#54675A;
  538. --eighttracks:#3e546e;
  539. --facebook:#3C5A9A;
  540. --googleplus:#F63E28;
  541. --instagram1:#8B3FB1;
  542. --instagram2:#E83D61;
  543. --instagram3:#DA4E58;
  544. --instagramOld:#517FA4;
  545. --linkedin:#0173B2;
  546. --listography:#c12aca;
  547. --pinterest:#CB2027;
  548. --redbubble:#E41421;
  549. --reddit:#FF1A00;
  550. --skype:#00AFF0;
  551. --snapchat:#FFE100;
  552. --soundcloud:#FB5F00;
  553. --spotify:#9BD44E;
  554. --telegram:#2DA6DF;
  555. --tumblr:#2A445F;
  556. --twitter:#21A5DF;
  557. --weheartit:#ff4477;
  558. --youtube:#cd1f20;
  559. }
  560.  
  561.  
  562.  
  563. /* overwrite colors
  564.  
  565. if you don't want the default social media colors
  566. (blue for facebook, lightblue for twitter, etc)
  567. then delete the following code */
  568.  
  569. /* FROM HERE */
  570.  
  571. .ao3            { background:var(--ao3) !important; }
  572. .behance        { background:var(--behance) !important; }
  573. .deviantart     { background:var(--deviantart) !important; }
  574. .deviantart2    { background:var(--deviantartOld) !important; }
  575. .eighttracks    { background:var(--eighttracks) !important; }
  576. .facebook       { background:var(--facebook) !important; }
  577. .googleplus     { background:var(--googleplus) !important; }
  578. .instagram      { background:var(--instagram3) !important; }
  579. .instagram2     { background:var(--instagramOld) !important; }
  580. .linkedin       { background:var(--linkedin) !important; }
  581. .listography    { background:var(--listography) !important; }
  582. .pinterest      { background:var(--pinterest) !important; }
  583. .redbubble      { background:var(--redbubble) !important; }
  584. .reddit         { background:var(--reddit) !important; }
  585. .skype          { background:var(--skype) !important; }
  586. .snapchat       { background:var(--snapchat) !important; }
  587. .soundcloud     { background:var(--soundcloud) !important; }
  588. .spotify        { background:var(--spotify) !important; }
  589. .telegram       { background:var(--telegram) !important; }
  590. .tumblr         { background:var(--tumblr) !important; }
  591. .twitter        { background:var(--twitter) !important; }
  592. .weheartit      { background:var(--weheartit) !important; }
  593. .youtube        { background:var(--youtube) !important; }
  594.  
  595. .youtube2       { background:var(--youtube) !important; }
  596. .tumblr2        { background:var(--tumblr) !important; }
  597.  
  598. /* TO HERE */
  599.  
  600.  
  601.  
  602. </style>
  603. </head>
  604. <!-- ---------------------------------------------------------------- -->
  605. <!-- ------------------------ HTML - S T A R T ---------------------- -->
  606. <!-- ---------------------------------------------------------------- -->
  607. <body>
  608. <!-- ---------------------------- loading  -------------------------- -->
  609. <div id="loader-wrapper">
  610.    <div id="loader">
  611.        <div class="spinner">
  612.          <div class="bounce1"></div>
  613.          <div class="bounce2"></div>
  614.          <div class="bounce3"></div>
  615.        </div>
  616.    </div>
  617. </div>
  618. <div id="wrapper" class="center">
  619. <header>
  620.  
  621.  
  622.  
  623.  
  624.  
  625. <!--- edit header here
  626. you can change the title and link texts.
  627. you can also add or remove links. just copy-paste or delete. ---->
  628.  
  629. <h1>my social media</h1>
  630. <nav>
  631.     <a href="/">home</a>
  632.     <a href="/ask">ask</a>
  633.     <a href="/archive">archive</a>
  634. </nav>
  635.  
  636.    
  637.    
  638.    
  639.    
  640.    
  641. </header><main>
  642. <!-- ----------------------- EDIT FROM HERE ------------------------- -->
  643. <section>
  644.  
  645.  
  646. <a class="ao3 white" title="ao3"
  647. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  648.  
  649. <a class="behance white bigger" title="behance"
  650. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  651.  
  652. <a class="deviantart white" title="deviantart"
  653. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  654.  
  655. <a class="eighttracks white" title="eighttracks"
  656. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  657.  
  658. <a class="facebook white" title="facebook"
  659. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  660.  
  661. <a class="googleplus white" title="googleplus"
  662. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  663.  
  664. <a class="instagram white" title="instagram"
  665. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  666.  
  667. <a class="linkedin white" title="linkedin"
  668. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  669.  
  670. <a class="listography white" title="listography"
  671. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  672.  
  673. <a class="pinterest white" title="pinterest"
  674. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  675.  
  676. <a class="redbubble white" title="redbubble"
  677. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  678.  
  679. <a class="reddit white" title="reddit"
  680. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  681.  
  682. <a class="skype white" title="skype"
  683. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  684.  
  685. <a class="snapchat black" title="snapchat"
  686. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  687.  
  688. <a class="soundcloud white bigger" title="soundcloud"
  689. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  690.  
  691. <a class="spotify white" title="spotify"
  692. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  693.  
  694. <a class="telegram white" title="telegram"
  695. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  696.  
  697. <a class="tumblr white" title="tumblr"
  698. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  699.  
  700. <a class="twitter black" title="twitter"
  701. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  702.  
  703. <a class="weheartit white" title="weheartit"
  704. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  705.  
  706. <a class="youtube white" title="youtube"
  707. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  708.  
  709.  
  710.  
  711.  
  712. <a class="brush white" title="custom links"
  713. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  714.  
  715. <a class="business white" title="custom links"
  716. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  717.  
  718. <a class="camera white" title="custom links"
  719. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  720.  
  721. <a class="chat black" title="custom links"
  722. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  723.  
  724. <a class="dollar white" title="custom links"
  725. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  726.  
  727. <a class="email white" title="custom links"
  728. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  729.  
  730. <a class="euro white" title="custom links"
  731. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  732.  
  733. <a class="heart black" title="custom links"
  734. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  735.  
  736. <a class="images white" title="custom links"
  737. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  738.  
  739. <a class="internet white" title="custom links"
  740. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  741.  
  742. <a class="link white" title="custom links"
  743. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  744.  
  745. <a class="messenger white" title="custom links"
  746. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  747.  
  748. <a class="movie black" title="custom links"
  749. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  750.  
  751. <a class="music white" title="custom links"
  752. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  753.  
  754. <a class="palette white" title="custom links"
  755. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  756.  
  757. <a class="phone white" title="custom links"
  758. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  759.  
  760. <a class="star black" title="custom links"
  761. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  762.  
  763. <a class="shop white bigger" title="custom links"
  764. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  765.  
  766.  
  767.  
  768. </section>
  769. <!-- -------------------------- TO HERE -----------------------------
  770.  
  771.  
  772.  
  773.    *** how to add links: ***
  774.    
  775. 1. copy the following block of code and
  776.   paste it between "edit from here" and "to here"
  777. 2. change "facebook" to any social media name or extra icon
  778.   (you can see which icons exist at the start of the code.
  779.   you can also add your own icons at the end of the code.)
  780. 3. change "white" to "black" if you want your icon to be black
  781. 4. add " bigger" after "white"/"black" if you icon image seems
  782.   a bit to small, and " smaller" if it seems to big.
  783. 5. change the title text to anything you want. that is the text
  784.   that shows on hover.
  785.  
  786.  
  787.    *** link template: ***
  788.    
  789. <a class="facebook white" title="my facebook profile"
  790. href="LINK_TO_YOUR_PROFILE_HERE"><img></a>
  791.  
  792.  
  793.  
  794.  
  795.  
  796. --><div style="height:100px"></div></main></div>
  797.  
  798.  
  799. <!-- ---------- credit ---------- -->
  800. <!-- credit link. you may move but not remove. -->
  801. <link href="https://static.tumblr.com/tpbx7ye/yiLpc9kpz/cloudythms.css" rel="stylesheet"><style>#credit { opacity:0.5; }</style>
  802. <div id="credit"><a href="https://cloudythms.tumblr.com/">
  803. <i class="far fa-copyright"></i></a></div>
  804.  
  805.  
  806. <!-- -------------------------- SCRIPTS ---------------------------- -->
  807.    
  808. <!-- jQuery -->
  809. <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>
  810.  
  811. <!-- Fonts -->
  812. <link href="https://fonts.googleapis.com/css?family=Fira+Mono|Lora|Open+Sans|Roboto|Roboto+Mono|Roboto+Slab|Karla&amp;subset=latin-ext" rel="stylesheet">
  813.  
  814. <!-- FontAwesome -->
  815. <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">
  816.  
  817. <!-- Smooth Scroll -->
  818. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  819.  
  820. <!-- no tumblr redirect links -->
  821. <script>
  822. $(document).ready(function(){
  823. //remove tumblr redirects script by magnusthemes@tumblr
  824. $('a[href*="t.umblr.com/redirect"]').each(function(){
  825.   var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  826.   var replaceURL = decodeURIComponent(originalURL);
  827.   $(this).attr("href", replaceURL);
  828. });
  829. });
  830. </script>
  831.    
  832. <!-- Tooltips -->
  833. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  834. <script>
  835. (function($){
  836. $(document).ready(function(){
  837. $("a[title]").style_my_tooltips({
  838. tip_follows_cursor:true,
  839. tip_delay_time:30, /* put a higher number for more delay */
  840. tip_fade_speed:400, /* put a higher number for a slower fade */
  841. attribute:"title"
  842. });
  843. });
  844. })(jQuery);
  845. </script>
  846. <style>
  847. .tooltip{display: inline;
  848. position: relative;}
  849. #s-m-t-tooltip {
  850.     max-width:300px;
  851.     border-radius: 0px;
  852.     padding:3px 4px 5px 4px;
  853.     margin:20px 7px -2px 20px;
  854.     background-color:var(--color-background,white);
  855.     border:1px solid #E0E0E0;
  856.     border-radius: 5px;
  857.     font-size:1em;
  858.     letter-spacing:0.5px;
  859.     text-transform:lowercase;
  860.     color:var(--color-text,black);
  861.     z-index:9999999999999999;
  862. }
  863. </style>
  864.  
  865.  
  866. <!-- Icons -->
  867. <script>$(document).ready(function(){
  868.  
  869.  
  870. /*  S O C I A L   M E D I A  */
  871. $(".ao3 img").attr("src",
  872. "https://image.flaticon.com/icons/svg/16/16941.svg");
  873. $(".behance img").attr("src",
  874. "https://image.flaticon.com/icons/svg/733/733594.svg");
  875. $(".deviantart img").attr("src",
  876. "https://image.flaticon.com/icons/svg/220/220793.svg");
  877. $(".deviantart2 img").attr("src",
  878. "https://image.flaticon.com/icons/svg/152/152850.svg");
  879. $(".eighttracks img").attr("src",
  880. "https://image.flaticon.com/icons/svg/100/100483.svg");
  881. $(".facebook img").attr("src",
  882. "https://image.flaticon.com/icons/svg/34/34304.svg");
  883. $(".googleplus img").attr("src",
  884. "https://image.flaticon.com/icons/svg/299/299411.svg");
  885. $(".instagram img").attr("src",
  886. "https://image.flaticon.com/icons/svg/87/87390.svg");
  887. $(".instagram2 img").attr("src",
  888. "https://image.flaticon.com/icons/svg/48/48898.svg");
  889. $(".linkedin img").attr("src",
  890. "https://image.flaticon.com/icons/svg/34/34227.svg");
  891. $(".listography img").attr("src",
  892. "https://image.flaticon.com/icons/svg/61/61739.svg");
  893. $(".pinterest img").attr("src",
  894. "https://image.flaticon.com/icons/svg/152/152817.svg");
  895. $(".redbubble img").attr("src",
  896. "https://image.flaticon.com/icons/svg/34/34627.svg");
  897. $(".reddit img").attr("src",
  898. "https://image.flaticon.com/icons/svg/34/34103.svg");
  899. $(".skype img").attr("src",
  900. "https://image.flaticon.com/icons/svg/34/34020.svg");
  901. $(".snapchat img").attr("src",
  902. "https://image.flaticon.com/icons/svg/220/220790.svg");
  903. $(".soundcloud img").attr("src",
  904. "https://image.flaticon.com/icons/svg/33/33649.svg");
  905. $(".spotify img").attr("src",
  906. "https://image.flaticon.com/icons/svg/152/152756.svg");
  907. $(".telegram img").attr("src",
  908. "https://image.flaticon.com/icons/svg/152/152827.svg");
  909. $(".tumblr img").attr("src",
  910. "https://image.flaticon.com/icons/svg/34/34316.svg");
  911. $(".tumblr2 img").attr("src",
  912. "https://image.flaticon.com/icons/svg/220/220379.svg");
  913. $(".twitter img").attr("src",
  914. "https://image.flaticon.com/icons/svg/34/34238.svg");
  915. $(".weheartit img").attr("src",
  916. "https://image.flaticon.com/icons/svg/48/48970.svg");
  917. $(".youtube img").attr("src",
  918. "https://image.flaticon.com/icons/svg/33/33265.svg");
  919. $(".youtube2 img").attr("src",
  920. "https://image.flaticon.com/icons/svg/33/33671.svg");
  921.  
  922.  
  923. /*  E X T R A S  */
  924. $(".brush img").attr("src",
  925. "https://image.flaticon.com/icons/svg/353/353001.svg");
  926. $(".business img").attr("src",
  927. "https://image.flaticon.com/icons/svg/17/17185.svg");
  928. $(".camera img").attr("src",
  929. "https://image.flaticon.com/icons/svg/34/34231.svg");
  930. $(".chat img").attr("src",
  931. "https://image.flaticon.com/icons/svg/121/121922.svg");
  932. $(".dollar img").attr("src",
  933. "https://image.flaticon.com/icons/svg/70/70030.svg");
  934. $(".email img").attr("src",
  935. "https://image.flaticon.com/icons/svg/121/121923.svg");
  936. $(".euro img").attr("src",
  937. "https://image.flaticon.com/icons/svg/70/70046.svg");
  938. $(".heart img").attr("src",
  939. "https://image.flaticon.com/icons/svg/121/121729.svg");
  940. $(".images img").attr("src",
  941. "https://image.flaticon.com/icons/svg/34/34239.svg");
  942. $(".internet img").attr("src",
  943. "https://image.flaticon.com/icons/svg/61/61437.svg");
  944. $(".link img").attr("src",
  945. "https://image.flaticon.com/icons/svg/61/61353.svg");
  946. $(".messenger img").attr("src",
  947. "https://image.flaticon.com/icons/svg/121/121916.svg");
  948. $(".movie img").attr("src",
  949. "https://image.flaticon.com/icons/svg/34/34414.svg");
  950. $(".music img").attr("src",
  951. "https://image.flaticon.com/icons/svg/34/34072.svg");
  952. $(".palette img").attr("src",
  953. "https://image.flaticon.com/icons/svg/352/352970.svg");
  954. $(".phone img").attr("src",
  955. "https://image.flaticon.com/icons/svg/121/121942.svg");
  956. $(".shop img").attr("src",
  957. "https://image.flaticon.com/icons/svg/61/61571.svg");
  958. $(".star img").attr("src",
  959. "https://image.flaticon.com/icons/svg/121/121726.svg");
  960.  
  961.    
  962. /*  C U S T O M  */
  963. $(".example img").attr("src",
  964. "IMAGELINK");
  965.  
  966. /*  TO ADD ICONS:
  967.  
  968. Copy the two lines above, and paste them again below.
  969.  
  970. Change "example" to whatever you want - remember the word.
  971. (Don't use any special characters).
  972.  
  973. Then replace "IMAGELINK" with the image url you want to use.
  974.     you can find icons here:
  975.     https://www.flaticon.com/
  976.     for this theme you want to use filled out black icons.
  977.     (they are automatically inverted)
  978.  
  979. Then you can use your icon like any other.
  980.        
  981. */
  982.    
  983. });</script>
  984.  
  985.  
  986.  
  987. <!-- finish loading -->
  988. <script>
  989. $(document).ready(function() {
  990.         $('body').addClass('loaded');
  991. });
  992. </script>
  993.  
  994. </body>
  995. </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!