API tools faq
paste
Advertisement
Petra1999

NETWORK THEME 01 | cloudythms.tumblr.com

Petra1999
Apr 2nd, 2017
525
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.83 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.            THEME 04
  10.                NETWORK THEME }
  11.            
  12.          
  13.   =>   https://cloudythms.tumblr.com/
  14.                - visit me if you have questions!
  15.  
  16.  
  17.  
  18.           == RULES ==
  19. - You may move, but not remove the credit
  20. - Leave this comment
  21. - Edit the rest as much as you want
  22. - Do not redistribute without permission / use as base
  23. - Do not claim as your own
  24.  
  25.  
  26.    If you're looking for the right place to
  27.    paste CSS code, simply Ctrl+F for "exampleclass"!
  28.  
  29.  
  30. ---------------------------------------------------------------------->
  31.  
  32.  
  33. <meta name="text:Network Name" content="Network Name"/>
  34. <meta name="text:Network Tag" content="networktag"/>
  35. <meta name="text:Blog URL" content="yoururlhere"/>
  36.  
  37.  
  38. <title>{text:Network Name}</title>
  39.  
  40. <link rel="shortcut icon" href="{Favicon}"/>
  41.  
  42.  
  43.  
  44.  
  45.  
  46. <!-- ----------------------- DO NOT EDIT THIS CODE  --------------------- -->
  47.        
  48.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  49.     <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' />
  50.    
  51.    
  52. <!-- --------------------------- TOOLTIPS -------------------------- -->
  53.  
  54. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  55. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  56. <script>
  57.     (function($){
  58.     $(document).ready(function(){
  59.     $("a[title]").style_my_tooltips({
  60.     tip_follows_cursor:true,
  61.      
  62.     /* Change your tooltip times here. */
  63.     tip_delay_time:30, /* put a higher number for more delay */
  64.     tip_fade_speed:400, /* put a higher number for a slower fade */
  65.     /* recommended: delay:10-100 fade:200-600 */
  66.      
  67.     attribute:"title"
  68.     });
  69.     });
  70.     })(jQuery);
  71. </script>
  72. <style>
  73.     .tooltip{
  74.         display: inline;
  75.         position: relative;
  76.     }
  77.     #s-m-t-tooltip {
  78.         max-width:300px;
  79.         border-radius: 0px;
  80.         padding:3px 4px 5px 4px;
  81.         margin:20px 7px -2px 20px;
  82.         background-color:#ffffff;
  83.         border:1px solid #E0E0E0;
  84.         border-radius: 5px 5px 5px 5px;
  85.         -moz-border-radius: 5px 5px 5px 5px;
  86.         -webkit-border-radius: 5px 5px 5px 5px;
  87.         font-family:calibri;
  88.         font-size:10px;
  89.         letter-spacing:1px;
  90.         text-transform:uppercase;
  91.         color:#000;
  92.         z-index:999999999999999999999999999999999999;
  93.     }
  94. </style>
  95. <!-- tumblr controls -->
  96. <style>
  97. iframe.tmblr-iframe {
  98.     z-index:99999999999999!important;
  99.     top:0!important;
  100.     right:0!important;
  101.     opacity:0.4;
  102.         filter:invert(1) contrast(150%);
  103.         -webkit-filter:invert(1) contrast(150%);
  104.         -o-filter:invert(1) contrast(150%);
  105.         -moz-filter:invert(1) contrast(150%);
  106.         -ms-filter:invert(1) contrast(150%);
  107.     transform:scale(0.65);
  108.     transform-origin:100% 0;
  109.     -webkit-transform:scale(0.65);
  110.     -webkit-transform-origin:100% 0;
  111.     -o-transform:scale(0.65);
  112.     -o-transform-origin:100% 0;
  113.     -moz-transform:scale(0.65);
  114.     -moz-transform-origin:100% 0;
  115.     -ms-transform:scale(0.65);
  116.     -ms-transform-origin:100% 0;
  117. }
  118. iframe.tmblr-iframe:hover {
  119.     opacity:0.6!important;
  120. }
  121. </style>
  122. <!-- ---------------------------------------------------------------- -->
  123. <!-- ----------------------- C S S - S T A R T ---------------------- -->
  124. <!-- ---------------------------------------------------------------- -->
  125. <style type="text/css">
  126.        
  127. /* ****************************** BASICS ****************************** */
  128.  
  129.     body {
  130.         padding:3%;
  131.         font-family:Open Sans, sans-serif;
  132.         font-size:11px;
  133.         color:black;
  134.     }
  135.    
  136.     .center {
  137.         position: absolute;
  138.         top:50%;
  139.         left:50%;
  140.         padding:15px;
  141.         -ms-transform: translateX(-50%) translateY(-50%);
  142.         -webkit-transform: translate(-50%,-50%);
  143.         transform: translate(-50%,-50%);
  144.     }
  145.    
  146.     blockquote{
  147.        border-left:2px solid #d3d3d3;
  148.        padding-left:10px;
  149.        margin-left:10px;
  150.     }
  151.        
  152.            
  153.     /* no ugly dotted border */
  154.     a, a:focus {
  155.         outline: 0;
  156.         text-decoration:none;
  157.         color:#d3b1d1;
  158.         font-weight:bold;
  159.     }
  160.    
  161.     /* <hr> style (divider) */
  162.     hr{
  163.         border: 0;
  164.         height: 1px;
  165.         background-image: linear-gradient(to right,
  166.             rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  167.     }
  168.    
  169.    
  170.     /* text selection style */
  171.     ::selection {
  172.       background: #d3d3d3;
  173.     }
  174.     ::-moz-selection {
  175.       background: #d3d3d3;
  176.     }
  177.    
  178.    
  179.      
  180.        
  181. /* ****************************** NAVIGATION ****************************** */
  182.  
  183.  
  184.     #title{
  185.         font-size:15px;
  186.         letter-spacing:1px;
  187.         text-transform:lowercase;
  188.         font-weight:bold;
  189.     }
  190.    
  191.     #navi {
  192.         margin-top:-10px;
  193.         font-size:11px;
  194.         text-transform:lowercase;
  195.     }
  196.    
  197.     #navi a, #navi a:visited, #navi a:link, #navi a:active {
  198.         color:black;
  199.         text-decoration:none;
  200.         letter-spacing:1px;
  201.         padding-right:10px;
  202.         font-weight:normal;
  203.        
  204.         transition: all 0.2s ease-in-out;
  205.         -webkit-transition: all 0.2s ease-in-out; /* Chrome & Safari */
  206.        -moz-transition: all 0.2s ease-in-out; /* Firefox */
  207.         -o-transition: all 0.2s ease-in-out; /* Opera */
  208.     }
  209.    
  210.     #navi a:hover {
  211.         text-decoration:underline;
  212.         cursor:help;
  213.     }
  214.        
  215.                
  216. /* ************************** EVERYTHING ELSE ************************** */
  217.  
  218.     #showinfo {
  219.         font-weight:bold;
  220.     }
  221.    
  222.     #info {
  223.         display:block;
  224.     }
  225.  
  226.     #apply {
  227.         display:none;
  228.     }
  229.    
  230.     #members {
  231.         display:none;
  232.     }
  233.        
  234.     #wrapper {
  235.         display:block;
  236.         width:702px;
  237.     }
  238.    
  239.     .category {
  240.         margin-bottom:30px;
  241.     }
  242.    
  243.     .category h1 {
  244.         padding-left:10px;
  245.         font-size:12px;
  246.         letter-spacing:1px;
  247.     }
  248.    
  249.     .category h2 {
  250.         margin-top:30px;
  251.         padding-left:10px;
  252.         font-size:10px;
  253.         letter-spacing:1px;
  254.     }
  255.    
  256.     #members a {
  257.         color:black;
  258.         display:inline-block;
  259.         font-weight:normal;
  260.     }
  261.    
  262.     .member {
  263.         width:200px;
  264.         height:32px;
  265.         background-color:#fff;
  266.         padding:10px;
  267.         margin:5px;
  268.        
  269.         border-radius: 7px 7px 7px 7px;
  270.         -moz-border-radius: 7px 7px 7px 7px;
  271.         -webkit-border-radius: 7px 7px 7px 7px;
  272.         border: 1px solid #eee;
  273.        
  274.         -webkit-transition-duration: 0.2s;
  275.         transition-duration: 0.2s;
  276.         -webkit-transition-delay: 0s;
  277.         transition-delay: 0s;
  278.         -webkit-transition-timing-function: linear;
  279.         transition-timing-function: linear;
  280.     }
  281.    
  282.     .member:hover {
  283.         background-color:#f7f7f7;
  284.         border-color:#eee;
  285.     }
  286.    
  287.     .member img {
  288.         vertical-align:middle;
  289.         float:left;
  290.        
  291.         border-radius: 3px 3px 3px 3px;
  292.         -moz-border-radius: 3px 3px 3px 3px;
  293.         -webkit-border-radius: 3px 3px 3px 3px;
  294.         border: 0px solid #000000;
  295.     }
  296.    
  297.     .member .info {
  298.         float:left;
  299.         padding-left:5px;
  300.     }
  301.    
  302.     .member .info br {
  303.         display: block;
  304.         margin-top:-10px;
  305.         content: " ";
  306.     }
  307.    
  308.     .member b { /* url */
  309.         color:black;
  310.     }
  311.    
  312.     .member p { /* name, age, pronouns */
  313.         display:inline-block;
  314.         font-style:italic;
  315.     }
  316.    
  317.     .c {
  318.         clear:both;
  319.     }
  320.        
  321.        
  322. /* ******************************* MORE ******************************* */
  323.  
  324.  
  325.     #c1 b { color:#d3b1d1; }
  326.     #c2 b { color:#7ab3c9; }
  327.  
  328.     /* add your own CSS code here */
  329.      
  330.     .exampleclass{
  331.         color:black;
  332.     }
  333.  
  334.  
  335. </style>
  336.  
  337. <script>
  338.    
  339. $( document ).ready(function() {
  340.    
  341.      $("#showinfo").css("font-weight", "bold");
  342.    
  343.     $("#showinfo").click(function(){
  344.         $("#showinfo").css("font-weight", "bold");
  345.         $("#info").css("display", "block");
  346.         $("#showapply").css("font-weight", "normal");
  347.         $("#apply").css("display", "none");
  348.         $("#showmembers").css("font-weight", "normal");
  349.         $("#members").css("display", "none");
  350.     });
  351.    
  352.     $("#showapply").click(function(){
  353.         $("#showapply").css("font-weight", "bold");
  354.         $("#apply").css("display", "block");
  355.         $("#showinfo").css("font-weight", "normal");
  356.         $("#info").css("display", "none");
  357.         $("#showmembers").css("font-weight", "normal");
  358.         $("#members").css("display", "none");
  359.     });
  360.    
  361.     $("#showmembers").click(function(){
  362.         $("#showmembers").css("font-weight", "bold");
  363.         $("#members").css("display", "block");
  364.         $("#showapply").css("font-weight", "normal");
  365.         $("#apply").css("display", "none");
  366.         $("#showinfo").css("font-weight", "normal");
  367.         $("#info").css("display", "none");
  368.     });
  369.    
  370. });
  371.  
  372.  
  373.    
  374. </script>
  375. </head>
  376. <body>
  377.    
  378.     <p id="title">{text:Network Name}</p>
  379.    
  380.    
  381.     <div id="navi">
  382.         <a id="showinfo">info</a>
  383.         <a id="showmembers">members</a>
  384.         <a id="showapply">apply</a>
  385.         <a href="https://www.tumblr.com/tagged/{text:Network Tag}"
  386.         target="_blank" style="cursor:pointer;">#{text:Network Tag}</a>
  387.     </div>
  388.    
  389. <div id="wrapper" class="center">
  390.  
  391. <div id="info">
  392.  
  393.         <div class="category">
  394.         <h1>network info</h1>
  395.         <p style="padding-left:10px;">Lorem <a href="#">ipsum</a> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  396.         <h2>a smaller heading</h2>
  397.         <p style="padding-left:10px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  398.     </div>
  399.  
  400. </div>
  401.  
  402.  
  403.  
  404.    
  405. <div id="apply">
  406.  
  407.         <div class="category">
  408.         <h1>apply</h1>
  409.         <p style="padding-left:10px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  410.         <br>
  411.         <p style="padding-left:10px;"><iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{text:Blog URL}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  412.        
  413.     </div>
  414.  
  415. </div>
  416.    
  417.    
  418.    
  419.    
  420.    
  421.  
  422. <div id="members">
  423.    
  424.     <div class="category" id="c1">
  425.     <h1>category name</h1>
  426.        
  427.         <a class="member" href="BLOGURL">
  428.             <img src="https://placehold.it/32/efcbed/efcbed">
  429.             <div class="info">
  430.             <b>url</b><br>
  431.             <p>name&emsp;age&emsp;pronouns</p>
  432.             </div><div class="c"></div>
  433.         </a>
  434.        
  435.         <a class="member" href="BLOGURL">
  436.             <img src="https://placehold.it/32/efcbed/efcbed">
  437.             <div class="info">
  438.             <b>url</b><br>
  439.             <p>name&emsp;age&emsp;pronouns</p>
  440.             </div><div class="c"></div>
  441.         </a>
  442.        
  443.         <a class="member" href="BLOGURL">
  444.             <img src="https://placehold.it/32/efcbed/efcbed">
  445.             <div class="info">
  446.             <b>url</b><br>
  447.             <p>name&emsp;age&emsp;pronouns</p>
  448.             </div><div class="c"></div>
  449.         </a>
  450.        
  451.         <a class="member" href="BLOGURL">
  452.             <img src="https://placehold.it/32/efcbed/efcbed">
  453.             <div class="info">
  454.             <b>url</b><br>
  455.             <p>name&emsp;age&emsp;pronouns</p>
  456.             </div><div class="c"></div>
  457.         </a>
  458.        
  459.         <a class="member" href="BLOGURL">
  460.             <img src="https://placehold.it/32/efcbed/efcbed">
  461.             <div class="info">
  462.             <b>url</b><br>
  463.             <p>name&emsp;age&emsp;pronouns</p>
  464.             </div><div class="c"></div>
  465.         </a>
  466.        
  467.         <a class="member" href="BLOGURL">
  468.             <img src="https://placehold.it/32/efcbed/efcbed">
  469.             <div class="info">
  470.             <b>url</b><br>
  471.             <p>name&emsp;age&emsp;pronouns</p>
  472.             </div><div class="c"></div>
  473.         </a>
  474.        
  475.     </div>
  476.    
  477.     <div class="category" id="c2">
  478.     <h1>category name</h1>
  479.        
  480.         <a class="member" href="BLOGURL">
  481.             <img src="https://placehold.it/32/a8dbf4/a8dbf4">
  482.             <div class="info">
  483.             <b>url</b><br>
  484.             <p>name&emsp;age&emsp;pronouns</p>
  485.             </div><div class="c"></div>
  486.         </a>
  487.        
  488.         <a class="member" href="BLOGURL">
  489.             <img src="https://placehold.it/32/a8dbf4/a8dbf4">
  490.             <div class="info">
  491.             <b>url</b><br>
  492.             <p>name&emsp;age&emsp;pronouns</p>
  493.             </div><div class="c"></div>
  494.         </a>
  495.        
  496.         <a class="member" href="BLOGURL">
  497.             <img src="https://placehold.it/32/a8dbf4/a8dbf4">
  498.             <div class="info">
  499.             <b>url</b><br>
  500.             <p>name&emsp;age&emsp;pronouns</p>
  501.             </div><div class="c"></div>
  502.         </a>
  503.        
  504.         <a class="member" href="BLOGURL">
  505.             <img src="https://placehold.it/32/a8dbf4/a8dbf4">
  506.             <div class="info">
  507.             <b>url</b><br>
  508.             <p>name&emsp;age&emsp;pronouns</p>
  509.             </div><div class="c"></div>
  510.         </a>
  511.        
  512.         <a class="member" href="BLOGURL">
  513.             <img src="https://placehold.it/32/a8dbf4/a8dbf4">
  514.             <div class="info">
  515.             <b>url</b><br>
  516.             <p>name&emsp;age&emsp;pronouns</p>
  517.             </div><div class="c"></div>
  518.         </a>
  519.        
  520.         <a class="member" href="BLOGURL">
  521.             <img src="https://placehold.it/32/a8dbf4/a8dbf4">
  522.             <div class="info">
  523.             <b>url</b><br>
  524.             <p>name&emsp;age&emsp;pronouns</p>
  525.             </div><div class="c"></div>
  526.         </a>
  527.        
  528.     </div>
  529.        
  530.         </div>
  531. </div>
  532.  
  533.  
  534.    
  535. <!-- please don't touch this. thank you. -->
  536. <div style="position:fixed;bottom:10px;right:15px;font-size:12px;opacity:0.9;">
  537. <a href="https://cloudythms.tumblr.com/" title="theme by cloudythms"
  538. style="text-decoration:none;">☁</a></div>
  539. <!-- theme by https://cloudythms.tumblr.com/ -->
  540.  
  541.  
  542.        
  543. </body>
  544. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!