API tools faq
paste
pegasusthemes

page 18 // elara

pegasusthemes
Jun 20th, 2020 (edited)
1,449
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-- ELARA by @venusthms / @leejordan
  5.  
  6. -------------------------------------------------------------------------
  7.  
  8. - do no redistribute any part of this theme or remove the credit
  9. - terms of use: venusthms.tumblr.com/terms
  10.  
  11. - icons https://feathericons.com/
  12. - filter tutorial: @magnusthemes
  13. - more credits https://venusthms.tumblr.com/credits
  14. - message me if you encounter any problems with this page
  15.  
  16. ------------------------------------------------------------------------>
  17.  
  18. <!----- tab title ----->
  19. <title>Members</title><link rel="shortcut icon" href="{Favicon}">
  20.  
  21. <!----- scripts: no need to edit ----->
  22. <meta name="viewport" content="width=device-width, initial-scale=1">
  23. <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Scada:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><link href="//venusthms.github.io/pages/credit/venus.css" rel="stylesheet">
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//venusthms.github.io/pages/credit/color.js"></script><script src="//venusthms.github.io/pages/feather.js"></script><script src="//venusthms.github.io/pages/elara/description.js"></script>
  26.  
  27. <link href="http://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" /><script src="http://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script><script>!function(t){t(document).ready(function(){t("a[title]").style_my_tooltips({tip_follows_cursor:!0,tip_delay_time:200,tip_fade_speed:300})})}(jQuery);</script>
  28.  
  29. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script><script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script><script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script><script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script><script src="//venusthms.github.io/pages/elara/grid.js"></script>
  30.  
  31. <style type="text/css">
  32.  
  33. /* change colors */
  34. :root {
  35. --background: #fff;
  36. --text: #222!important;
  37.  
  38. --links: #222;
  39. --links-hover: #b5c4d9;
  40.  
  41. --filter-selected: #b5c4d9;
  42. --filter-hover: #b5c4d9;
  43.  
  44. --items: #fafafa;
  45. --border: #f6f6f6;
  46.  
  47. --icons: #444;
  48. --description: #fff;
  49. }
  50.  
  51.  
  52. /* tumblr controls */
  53. iframe.tmblr-iframe {
  54. z-index:99999999999999!important;
  55. top:0!important;
  56. right:0!important;
  57. opacity:0.4;
  58. /* delete invert(1) from here */
  59. filter:invert(1) contrast(150%);
  60. -webkit-filter:invert(1) contrast(150%);
  61. -o-filter:invert(1) contrast(150%);
  62. -moz-filter:invert(1) contrast(150%);
  63. -ms-filter:invert(1) contrast(150%);
  64. /* to here if your blog has a dark background */
  65. transform:scale(0.65);
  66. transform-origin:100% 0;
  67. -webkit-transform:scale(0.65);
  68. -webkit-transform-origin:100% 0;
  69. -o-transform:scale(0.65);
  70. -o-transform-origin:100% 0;
  71. -moz-transform:scale(0.65);
  72. -moz-transform-origin:100% 0;
  73. -ms-transform:scale(0.65);
  74. -ms-transform-origin:100% 0;}
  75.  
  76. /* font */
  77. body {font-family: 'Scada';font-size: 11px;}
  78.  
  79. /* cursor */
  80. .button, .long, a {cursor:pointer;}
  81.  
  82. /* borders */
  83. .intro p, .item {border:1px solid var(--border)}
  84. .stat1, .stat2, .stat3 {border-bottom:1px solid var(--border)}
  85. .item .url {border-top: 1px solid var(--border)}
  86.  
  87. /* header*/
  88. .intro {text-align: left}
  89.  
  90. .intro h1:after {content:"";height: 1px;width:15px;top: -3px}
  91. .intro a {margin-right:5px}
  92.  
  93. .intro p {background:var(--items);padding:7px 10px;max-width:220px}
  94.  
  95. .filters ul li:first-of-type {font-weight:bold}
  96.  
  97. /*items*/
  98. .item {width: 250px;height: auto;}
  99. .item img {width:125px;height:125px}
  100. .top {height:125px}
  101.  
  102. .desc, .item .url {text-align: left}
  103. .stat1, .stat2, .stat3 {padding: 0 5px 0 20px}
  104. .top span svg {width:12px;height:12px;margin-right:8px}
  105.  
  106. .desc {background: var(--description);line-height:17px}
  107. .desc a {text-decoration:underline}
  108.  
  109. .long {height: 70px;} /*length after which text gets cut off*/
  110. .long:after {content: '. . . ';} /*text after cut out*/
  111.  
  112.  
  113. </style>
  114. <link href="//venusthms.github.io/pages/elara/style.css" rel="stylesheet">
  115. </head>
  116. <body>
  117.  
  118. <!----- header starts ----->
  119. <header><div class="intro">
  120.  
  121. <!--title-->
  122. <h1>Members</h1>
  123.  
  124. <!--links-->
  125. <a href="/">index</a>
  126. <a href="/ask">contact</a>
  127. <a href="/">Link</a>
  128. <!--copy & paste as needed-->
  129.  
  130. <!--description-->
  131. <p>
  132. Description here.
  133. </p>
  134.  
  135. <!--filters start-->
  136. <div class="filters">
  137.  
  138. <!--filter group starts-->
  139. <!--remove exclusive (after option-set) if you want to be able to select multiple filters from this group-->
  140. <ul class="filter option-set exclusive" data-filter-group="group1">
  141.  
  142. <!--title-->
  143. <li>Title:</li>
  144.  
  145. <!--filters-->
  146. <!--filtername needs a dot (.) at the beginning-->
  147. <li><a href="#" data-filter-value="" class="selected">All</a></li>
  148. <li><a href="#" data-filter-value=".filtername1">Filter 1</a></li>
  149. <li><a href="#" data-filter-value=".filtername2">Filter 2</a></li>
  150. <!--copy & paste as needed-->
  151.  
  152. </ul>
  153. <!--filter group ends-->
  154. <!--copy & paste as needed-->
  155.  
  156. </div>
  157. <!--filters ends-->
  158.  
  159. </div></header>
  160. <!----- header ends ----->
  161.  
  162. <!----- grid starts ----->
  163. <div class="grid-container"><div class="grid">
  164.  
  165. <!--- how to edit the filters:
  166.  
  167. - replace filter here with the filter names you set above (without .)
  168. - <li><a href="#" data-filter-value=".FILTERNAME">Filter 1</a></li>
  169. - make sure to not delete item (before the filters) though
  170.  
  171. --->
  172.  
  173. <!--item starts-->
  174. <div class="item filter here">
  175.  
  176. <!--top starts-->
  177. <div class="top">
  178.  
  179. <!--image-->
  180. <img src="https://i.imgur.com/58Y3Uqa.png" />
  181.  
  182. <!--stats-->
  183. <span class="stat1"><i data-feather="user"></i>Stat One</span>
  184. <span class="stat2"><i data-feather="heart"></i>Stat Two</span>
  185. <span class="stat3"><i data-feather="star"></i>Stat three</span>
  186.  
  187. </div>
  188. <!--top ends-->
  189.  
  190. <!--description-->
  191. <!--delete cut-off if you don't want longer descriptions to be cut-off-->
  192. <div class="desc cut-off"><p>
  193. Description here.
  194. </p></div>
  195.  
  196. <!--url-->
  197. <div class="url"><span>
  198. <a href="/">@url here</a>
  199. </span></div>
  200.  
  201. </div>
  202. <!-- item ends-->
  203. <!--copy & paste as needed-->
  204.  
  205. </div>
  206. <!----- grid ends ----->
  207.  
  208. <!----- credit: do not edit or remove ----->
  209. <a href="https://venusthms.tumblr.com/" title="venusthms">
  210. <div class="venus-icon"></div>
  211. </a>
  212. <script>feather.replace()</script>
  213. </body>
  214. </html>
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!