API tools faq
paste
Petra1999

NETWORK PAGE 01 | cloudythms.tumblr.com

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