API tools faq
paste
Petra1999

TAG PAGE 01 | cloudythms.tumblr.com

Petra1999
Jun 26th, 2018
3,136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.33 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">
  2. <head>
  3.  
  4. <!-----------------------------------------------------------------------
  5.  
  6.  
  7.  
  8.   {   cloudythms
  9.            TAG PAGE 01   }
  10.            
  11.          
  12.   =>   https://cloudythms.tumblr.com/
  13.                - visit me if you have questions!
  14.  
  15.  
  16.  
  17.           == RULES ==
  18. - You may move, but not remove the credit
  19. - Leave this comment
  20. - Edit the rest as much as you want
  21. - Do not redistribute without permission / use as base
  22. - Do not claim as your own
  23.  
  24.  
  25.    If you're looking for the right place to
  26.    paste CSS code, simply Ctrl+F for "exampleclass"!
  27.    
  28.    
  29. HOW TO EDIT:
  30.     Scroll down until you see "edit here".
  31.     Choose one of the types (subtags, text, blockquote)
  32.     and copy and paste it how often you need it,
  33.     then change your texts and links.
  34.    
  35. IMAGE SIZE:
  36.     500 x 250
  37.     If you want to use a different size,
  38.     you have to change the code.
  39.    
  40. CHANGING THE ACCENT COLOR:
  41.     Find every instance of "color:red;" and change it to your liking.
  42.     Get color codes here: https://htmlcolorcodes.com/color-picker/
  43.     Use the one that starts with #
  44.     Example: "color:#ffffff;" for white.
  45.  
  46.  
  47. ---------------------------------------------------------------------->
  48.  
  49. <!-- Text that appears on the tab / browser window -->
  50. <title>Tags</title>
  51.  
  52. <link rel="shortcut icon" href="{Favicon}"/>
  53.  
  54.  
  55. <!-- ------------------ DO NOT EDIT THIS CODE  --------------------- -->
  56.        
  57. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  58. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300|Roboto:400,700,500,300|Lato:400,700,300|Montserrat:400,700|Source+Sans+Pro:400,300,700' rel='stylesheet' type='text/css' />
  59.    
  60.    
  61.    
  62. <!-- --------------------------- TOOLTIPS -------------------------- -->
  63.  
  64. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  65. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  66. <script>
  67.     (function($){
  68.     $(document).ready(function(){
  69.     $("a[title]").style_my_tooltips({
  70.     tip_follows_cursor:true,
  71.      
  72.     /* Change your tooltip times here. */
  73.     tip_delay_time:30, /* put a higher number for more delay */
  74.     tip_fade_speed:400, /* put a higher number for a slower fade */
  75.     /* recommended: delay:10-100 fade:200-600 */
  76.      
  77.     attribute:"title"
  78.     });
  79.     });
  80.     })(jQuery);
  81. </script>
  82. <style>
  83.     .tooltip{
  84.         display: inline;
  85.         position: relative;
  86.     }
  87.     #s-m-t-tooltip {
  88.         max-width:300px;
  89.         border-radius: 0px;
  90.         padding:3px 4px 5px 4px;
  91.         margin:20px 7px -2px 20px;
  92.         background-color:#ffffff;
  93.         border:1px solid #E0E0E0;
  94.         border-radius: 5px 5px 5px 5px;
  95.         -moz-border-radius: 5px 5px 5px 5px;
  96.         -webkit-border-radius: 5px 5px 5px 5px;
  97.         font-family:calibri;
  98.         font-size:10px;
  99.         letter-spacing:1px;
  100.         text-transform:uppercase;
  101.         color:#000;
  102.         z-index:999999999999999999999999999999999999;
  103.     }
  104. </style>
  105.  
  106.  
  107. <!-- ---------------------------------------------------------------- -->
  108. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  109. <!-- ---------------------------------------------------------------- -->
  110. <style type="text/css">
  111.        
  112. /* ****************************** BASICS ****************************** */
  113.  
  114. body {
  115.     padding:3%;
  116.     font-family:Open Sans, sans-serif;
  117.     font-size:11px;
  118.     color:black;
  119. }
  120.  
  121. .center {
  122.     position: absolute;
  123.     top:50%;
  124.     left:50%;
  125.     padding:15px;
  126.     -ms-transform: translateX(-50%) translateY(-50%);
  127.     -webkit-transform: translate(-50%,-50%);
  128.     transform: translate(-50%,-50%);
  129. }
  130.  
  131. a, a:focus {
  132.     outline: 0;
  133.     text-decoration:none;
  134.     font-weight:bold;
  135.    
  136.     cursor:help; /* remove if you want a normal cursor on links */
  137. }
  138.  
  139. ::selection {
  140.   background: #d3d3d3;
  141. }
  142. ::-moz-selection {
  143.   background: #d3d3d3;
  144. }
  145.  
  146. body > iframe:first-child { display: none !important; } /* tumblr */
  147.  
  148.  
  149.            
  150. /* ************************** EVERYTHING ELSE ************************** */
  151.  
  152.  
  153. #wrapper {
  154.     display:block;
  155.     width:750px;
  156. }
  157.  
  158. h1, h1 a {
  159.     font-size:20px;
  160.     letter-spacing:1px;
  161.     text-transform:lowercase;
  162.     font-weight:bold;
  163.     color:red; /* title color */
  164.    
  165.     -webkit-transition-duration: 0.1s;
  166.     transition-duration: 0.1s;
  167.     -webkit-transition-delay: 0s;
  168.     transition-delay: 0s;
  169.     -webkit-transition-timing-function: linear;
  170.     transition-timing-function: linear;
  171. }
  172.  
  173. h1 a:hover {
  174.     color:black; /* title hover color */
  175.     border-bottom:1px solid red; /* title hover underline */
  176. }
  177.  
  178. .link {
  179.     overflow:hidden;
  180.     margin-bottom:30px; /* margin between links */
  181. }
  182.  
  183. .link img{
  184.     width:500px;
  185.     height:250px;
  186. }
  187.  
  188. .m{
  189.     width:500px;
  190.     float:left;
  191. }
  192.  
  193. .overlay{
  194.     width:500px;
  195.     height:250px;
  196.     background-color:white;
  197.     opacity:0;
  198.     position:absolute;
  199.    
  200.     -webkit-transition-duration: 0.2s;
  201.     transition-duration: 0.2s;
  202.     -webkit-transition-delay: 0s;
  203.     transition-delay: 0s;
  204.     -webkit-transition-timing-function: linear;
  205.     transition-timing-function: linear;
  206. }
  207.  
  208. .m:hover > .overlay {
  209.     opacity:0.5; /* overlay opacity
  210.                     0..no overlay
  211.                     1..100% opacity   */
  212. }
  213.  
  214. .lr {
  215.     height:250px;
  216.     float:right;
  217.     width:244px;
  218.     padding:20px;
  219.     text-align:left; /* text alignment (left or right or justify) */
  220.    
  221.     -webkit-box-sizing: border-box;
  222.     -moz-box-sizing: border-box;
  223.     box-sizing: border-box;
  224. }
  225.  
  226. .lr b, .lr b a, .lr b a:visited {
  227.     font-size:18px; /* tag title size */
  228.     color:black; /* tag title color */
  229.    
  230.     -webkit-transition-duration: 0.1s;
  231.     transition-duration: 0.1s;
  232.     -webkit-transition-delay: 0s;
  233.     transition-delay: 0s;
  234.     -webkit-transition-timing-function: linear;
  235.     transition-timing-function: linear;
  236. }
  237.  
  238. .lr b a:hover {
  239.     color:red; /* tag title hover color */
  240.     border-bottom:1px solid black;
  241. }
  242.  
  243. .lr p a, p a:visited {
  244.     color:red; /* link color */
  245.    
  246.     -webkit-transition-duration: 0.1s;
  247.     transition-duration: 0.1s;
  248.     -webkit-transition-delay: 0s;
  249.     transition-delay: 0s;
  250.     -webkit-transition-timing-function: linear;
  251.     transition-timing-function: linear;
  252. }
  253.  
  254. .lr p a:hover {
  255.     color:black; /* link hover color */
  256.     border-bottom:1px solid red; /* link hover underline */
  257. }
  258.  
  259. ul {
  260.     margin-left:-30px;
  261. }
  262.  
  263. li, li a {
  264.     color:black; /* subtag color */
  265.     font-weight:normal;
  266.     letter-spacing:0.5px;
  267.     line-height:170%;
  268.     list-style:none;
  269.    
  270.     -webkit-transition-duration: 0.1s;
  271.     transition-duration: 0.1s;
  272.     -webkit-transition-delay: 0s;
  273.     transition-delay: 0s;
  274.     -webkit-transition-timing-function: linear;
  275.     transition-timing-function: linear;
  276. }
  277.  
  278. li a:hover{
  279.     color:red; /* subtag hover color */
  280. }
  281.    
  282. blockquote{
  283.    border-left:2px solid #d3d3d3;
  284.    padding-left:10px;
  285.    margin-left:0px;
  286.    text-align:justify !important;
  287. }
  288.  
  289.  
  290.  
  291.  
  292. /* delete this if you don't want
  293.    every 2nd tag on the other side */
  294.        
  295. .link:nth-child(even) .m{
  296.     float:right;
  297. }
  298. .link:nth-child(even) .lr{
  299.     text-align:right;
  300. }
  301.  
  302.  
  303.    
  304.    
  305. /* ******************************* MORE ******************************* */
  306.  
  307. /* add your own CSS code here */
  308.  
  309. .exampleclass{
  310.     color:black;
  311. }
  312.  
  313.  
  314. </style>
  315. </head>
  316. <body>
  317.    
  318. <div id="wrapper" class="center">
  319.  
  320. <div><h1>
  321. <a href="/">↩ title</a> <!-- title -->
  322. </h1> </div>
  323.    
  324. <div class="links" style="max-height:575px;">
  325.  
  326.  
  327.     <!--- EDIT HERE ---->
  328.    
  329.    
  330.    
  331.     <!------------- start of link ------------->
  332.     <div class="link">
  333.         <a class="m" href="/tagged/tag"> <!-- link -->
  334.             <div class="overlay"></div>
  335.             <img src="https://via.placeholder.com/500x250"> <!-- image -->
  336.         </a>
  337.         <div class="lr">
  338.             <b><a href="/tagged/tag"># tag</a></b><br> <!-- link, tag -->
  339.             <p><ul>
  340.                 <li>— <a href="/tagged/tag">example tag</a></li>
  341.                 <li>— <a href="/tagged/tag">example tag</a></li>
  342.                 <li>— <a href="/tagged/tag">example tag</a></li>
  343.                 <li>— <a href="/tagged/tag">example tag</a></li>
  344.                 <li>— <a href="/tagged/tag">example tag</a></li>
  345.                 <li>— <a href="/tagged/tag">example tag</a></li>
  346.                 <li>— <a href="/tagged/tag">example tag</a></li>
  347.             </ul></p>
  348.         </div>
  349.     </div>
  350.     <!------------- end of link ------------->
  351.    
  352.    
  353.    
  354.     <!------------- start of link ------------->
  355.     <div class="link">
  356.         <a class="m" href="/tagged/tag"> <!-- link -->
  357.             <div class="overlay"></div>
  358.             <img src="https://via.placeholder.com/500x250"> <!-- image -->
  359.         </a>
  360.         <div class="lr">
  361.             <b><a href="/tagged/tag"># tag</a></b><br> <!-- link, tag -->
  362.             <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a>
  363.             adipiscing elit, sed do eiusmod tempor incididunt ut labore
  364.             et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  365.             exercitation.
  366.             </p>
  367.         </div>
  368.     </div>
  369.     <!------------- end of link ------------->
  370.    
  371.    
  372.    
  373.     <!------------- start of link ------------->
  374.     <div class="link">
  375.         <a class="m" href="/tagged/tag"> <!-- link -->
  376.             <div class="overlay"></div>
  377.             <img src="https://via.placeholder.com/500x250"> <!-- image -->
  378.         </a>
  379.         <div class="lr">
  380.             <b><a href="/tagged/tag"># tag</a></b><br> <!-- link, tag -->
  381.             <p><blockquote>
  382.             Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  383.             sed do eiusmod tempor incididunt ut labore et dolore
  384.             magna aliqua. Ut enim ad minim veniam.
  385.             </blockquote></p>
  386.         </div>
  387.     </div>
  388.     <!------------- end of link ------------->
  389.    
  390.    
  391.    
  392.    
  393.    
  394. <div style="height:100px"></div>
  395. </div>
  396. </div>
  397.  
  398. <!-- please don't touch this. thank you. -->
  399. <div style="position:fixed;bottom:10px;right:15px;font-size:12px;opacity:0.9;"><a href="https://cloudythms.tumblr.com/" title="theme by cloudythms"
  400. style="text-decoration:none;color:gray">☁</a></div>
  401. <!-- theme by https://cloudythms.tumblr.com/ -->
  402.        
  403. </body>
  404. </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!