API tools faq
paste
alydae

network ii

alydae
Feb 26th, 2017 (edited)
4,762
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.33 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. NETWORK II
  7. by alydae
  8.  
  9. released: february 26, 2017
  10. last updated: september 10, 2023
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. if you want to add filters to this page, go to
  17. http://enchantedthemes.tumblr.com/networks/filters
  18.  
  19. thank you for using!!!
  20.  
  21. -->
  22.  
  23. <title>members</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!-- scripts - DO NOT TOUCH -->
  27.  
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  29.  
  30. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:200,
  37. tip_fade_speed:300
  38. }
  39. );
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
  45. <script>
  46. $(window).load(function () {
  47. $('#content').masonry({
  48. itemSelector : ".box",
  49. });
  50. });
  51. </script>
  52.  
  53. <!-- custom font -->
  54.  
  55. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  56.  
  57. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  58.  
  59.  
  60. <style type="text/css">
  61.  
  62. @keyframes fadein {
  63. from { opacity:0; }
  64. to { opacity:1; }
  65. }
  66.  
  67. @-moz-keyframes fadein {
  68. from { opacity:0; }
  69. to { opacity:1; }
  70. }
  71.  
  72. @-webkit-keyframes fadein {
  73. from { opacity:0; }
  74. to { opacity:1; }
  75. }
  76.  
  77. @-ms-keyframes fadein {
  78. from { opacity:0; }
  79. to { opacity:1; }
  80. }
  81.  
  82. @-o-keyframes fadein {
  83. from { opacity:0; }
  84. to { opacity:1; }
  85. }
  86.  
  87. /*-- selection --*/
  88.  
  89. ::-moz-selection { background:var(--accent); color:var(--title); }
  90. ::selection { background:var(--accent); color:var(--title); }
  91.  
  92. /*-- scrollbar --*/
  93.  
  94. ::-webkit-scrollbar {
  95. width:2px;
  96. height:2px;
  97. }
  98.  
  99. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  100.  
  101. /*-- tooltips --*/
  102.  
  103. #s-m-t-tooltip {
  104. color:var(--text);
  105. background-color:var(--background);
  106. font-size:calc(var(--font-size) - 2px);
  107. font-family:'Open Sans', helvetica, sans-serif;
  108. letter-spacing:1px;
  109. text-transform:uppercase;
  110. text-align:center;
  111. position:absolute;
  112. padding:0px 5px 0px 5px;
  113. margin-top:30px;
  114. border:1px solid var(--borders);
  115. z-index:999999;
  116. }
  117.  
  118. /*-- tumblr controls --*/
  119.  
  120. .tmblr-iframe, .iframe-controls–desktop {
  121. display:none!important;
  122. }
  123.  
  124. /*-- change all variables here --*/
  125.  
  126. :root {
  127. --background:#fff;
  128. --accent:#fafafa;
  129. --text:#666;
  130. --links:#444;
  131. --links-hover:#bad1e7;
  132. --title:#222;
  133. --borders:#eee;
  134. --font-size:10px;
  135. }
  136.  
  137. /*-- general customisation --*/
  138.  
  139. body {
  140. color:var(--text);
  141. background-color:var(--accent);
  142. font-style:normal;
  143. font-family:'Open Sans', helvetica, sans-serif;
  144. font-size:var(--font-size);
  145. font-weight:400;
  146. text-decoration:none;
  147. line-height:180%;
  148. -moz-osx-font-smoothing: grayscale;
  149. -webkit-font-smoothing: antialiased;
  150. font-smoothing: antialiased;
  151. -webkit-animation: fadein 1.5s;
  152. -moz-animation: fadein 1.5s;
  153. -o-animation: fadein 1.5s;
  154. animation: fadein 1.5s;
  155. }
  156.  
  157. a, .links i {
  158. text-decoration:none;
  159. color:var(--links);
  160. transition-duration: 0.6s;
  161. -moz-transition-duration: 0.6s;
  162. -webkit-transition-duration: 0.6s;
  163. -o-transition-duration: 0.6s
  164. }
  165.  
  166. a:hover, .links i:hover {
  167. color:var(--links-hover);
  168. cursor:pointer;
  169. transition-duration: 0.6s;
  170. -moz-transition-duration: 0.6s;
  171. -webkit-transition-duration: 0.6s;
  172. -o-transition-duration: 0.6s
  173. }
  174.  
  175. b, strong { font-weight:700;color:var(--title); }
  176. i, em { font-style:italic; }
  177.  
  178. /*-- header --*/
  179.  
  180. #topbar {
  181. position:fixed;
  182. top:0;
  183. width:100vw;
  184. height:80px;
  185. background:var(--background);
  186. border-bottom:1px solid var(--borders);
  187. z-index:99999;
  188. }
  189.  
  190. .icon {
  191. height:50px;
  192. width:50px;
  193. margin:0px auto;
  194. padding:15px;
  195. }
  196.  
  197. .icon img { height:50px; width:50px; }
  198.  
  199. .title {
  200. margin-top:-50px;
  201. margin-left:calc(50% - 150px);
  202. text-align:left;
  203. text-transform:uppercase;
  204. font-size:calc(var(--font-size) + 4px);
  205. font-weight:bold;
  206. letter-spacing:1px;
  207. color:var(--title);
  208. }
  209.  
  210. .links {
  211. margin-top:-17.5px;
  212. margin-left:calc(50% + 65px);
  213. }
  214.  
  215. .links a {
  216. display:inline;
  217. padding-right:10px;
  218. font-size:calc(var(--font-size) + 2px);
  219. }
  220.  
  221. /*-- members --*/
  222.  
  223. #content {
  224. position:relative;
  225. margin:155px auto 75px auto;
  226. width:calc((250px + 20px + 2px) * 3);
  227. /* ((box width + 2*margin + 2*border width) * number of columns) */
  228. }
  229.  
  230. .box {
  231. position:block;
  232. margin:10px;
  233. height:45px; /* box height */
  234. width:250px; /* box width */
  235. float:left;
  236. background:var(--background);
  237. border:1px solid var(--borders);
  238. }
  239.  
  240. .box h1 {
  241. margin-top:-43px;
  242. padding-left:70px;
  243. position:relative;
  244. text-transform:uppercase;
  245. text-align:left;
  246. font-weight:600;
  247. font-size:calc(var(--font-size) + 1px);
  248. color:var(--title);
  249. }
  250.  
  251. .box img {
  252. width:45px; /* icon height */
  253. height:45px; /* icon width */
  254. }
  255.  
  256. .box:hover .overlay { opacity:1; }
  257.  
  258. .sub {
  259. position:relative;
  260. margin-left:70px;
  261. margin-top:-10px;
  262. font-style:italic;
  263. text-transform:lowercase;
  264. padding-right:5px;
  265. white-space:nowrap;
  266. overflow:hidden;
  267. text-overflow:ellipsis;
  268. }
  269.  
  270. .show {
  271. position:absolute;
  272. margin-top:-40px;
  273. margin-left:45px;
  274. height:45px;
  275. width:205px;
  276. text-align:center;
  277. line-height:45px;
  278. opacity:0;
  279. background-color:var(--background);
  280. transition-duration: 0.6s;
  281. -moz-transition-duration: 0.6s;
  282. -webkit-transition-duration: 0.6s;
  283. -o-transition-duration: 0.6s
  284. }
  285.  
  286. .box:hover .show {
  287. opacity:1;
  288. margin-top:-40px;
  289. transition-duration: 0.6s;
  290. -moz-transition-duration: 0.6s;
  291. -webkit-transition-duration: 0.6s;
  292. -o-transition-duration: 0.6s
  293. }
  294.  
  295. /*-- credit - DO NOT TOUCH --*/
  296.  
  297. .credit a {
  298. font-size:10px;
  299. bottom:15px;
  300. right:20px;
  301. position:fixed;
  302. text-transform:uppercase;
  303. }
  304.  
  305. </style>
  306. </head>
  307.  
  308.  
  309. <body>
  310.  
  311. <div id="topbar">
  312. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want. -->
  313. <div class="icon"><img src="{PortraitURL-128}"/></div>
  314. <div class="title">members</div> <!-- title -->
  315. <div class="links">
  316. <!-- this is where your header links are. feel free to add more. to change the icon, go to https://fontawesome.com/icons. -->
  317. <a href="/" title="index"><i class="fas fa-home"></i></a>
  318. <a href="/ask" title="message"><i class="fas fa-envelope"></i></a>
  319. <a href="/" title="link"><i class="fas fa-bars"></i></a>
  320. <!-- do not remove this one!!! -->
  321. <a href="https://enchantedthemes.tumblr.com" title="theme"><i class="fas fa-code"></i></a>
  322. </div>
  323.  
  324. </div>
  325.  
  326.  
  327. <div id="content">
  328.  
  329. <!-- BOX CUSTOMISATION
  330.  
  331. template:
  332. <div class="box">
  333. <img src=""/>
  334. <h1>name</h1>
  335. <div class="sub">subtitle</div>
  336. <div class="show"><a href="">@username</a></div>
  337. </div>
  338.  
  339. if you do not want the text on hover, just delete these lines.
  340. <div class="show"><a href="">@username</a></div>
  341.  
  342. -->
  343.  
  344. <div class="box">
  345. <img src=""/>
  346. <h1>name</h1>
  347. <div class="sub">subtitle</div>
  348. <div class="show"><a href="">@username</a></div>
  349. </div>
  350.  
  351. <div class="box">
  352. <img src=""/>
  353. <h1>name</h1>
  354. <div class="sub">subtitle</div>
  355. <div class="show"><a href="">@username</a></div>
  356. </div>
  357.  
  358. <div class="box">
  359. <img src=""/>
  360. <h1>name</h1>
  361. <div class="sub">subtitle</div>
  362. <div class="show"><a href="">@username</a></div>
  363. </div>
  364.  
  365.  
  366. </div>
  367.  
  368.  
  369. <!-- credit - DO NOT TOUCH -->
  370.  
  371. <div class="credit">
  372. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  373. </div>
  374.  
  375.  
  376. </body>
  377. </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!