API tools faq
paste
pegasusthemes

page 08 // pholus

pegasusthemes
Jun 8th, 2018 (edited)
1,242
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-- THEME BY @LEEJORDAN / @VENUSTHMS
  5. do not remove the credit
  6.  
  7. -------------------------------------------------------------------------
  8.  
  9. - terms of use: venusthms.tumblr.com/terms
  10.  
  11. - message me if you got any problems or questions about the code
  12.  
  13. - you'll find instructions about customization through out the code
  14.  
  15. - icon font https://suiomi.com/font#_=_
  16.  
  17. - the grid/filter effect was created with the tutorial by @cyantists
  18.  
  19. ---------------------------------------------------------------------->
  20.  
  21.  
  22.  
  23.  
  24. <!---- SCRIPT - DO NOT TOUCH ---->
  25. <title>projects</title> <!--- change tab title here ---->
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Poiret+One|Quicksand|Raleway" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Karla|Lato" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//venusthms.github.io/pages/pholus/style.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  29. <script>$(document).ready(function(){$(".hovern").click(function(){$(".hoverstext").toggle("slow");});});</script><link href="https://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" /><script src="https://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><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="//venusthms.github.io/pages/pholus/filters.js"></script>
  30.  
  31.  
  32.  
  33.  
  34. <style type="text/css">
  35.  
  36. /* tooltips */
  37.  
  38. #s-m-t-tooltip {
  39. max-width: 250px;
  40. margin:24px 14px 7px 12px;
  41. padding:5px 8px;
  42. background: #fff;
  43. border-radius:2px;
  44. font-family: 'Raleway';
  45. letter-spacing: 1px;
  46. font-size:8px;
  47. color:#000;
  48. box-shadow: none;
  49. }
  50.  
  51. /* scrollbar */
  52.  
  53. ::-webkit-scrollbar {
  54. width:5px;
  55. height:17px;
  56. background-color: #F6F6F6;
  57. }
  58. ::-webkit-scrollbar-track {
  59. background-color: #F6F6F6;
  60. }
  61. ::-webkit-scrollbar-thumb {
  62. background-color: #fff;
  63. min-height:24px;
  64. min-width:24px;
  65. }
  66.  
  67. /* selection */
  68.  
  69. ::-moz-selection { background:#eee;color:#000; }
  70. ::selection { background:#eee;color:#000; }
  71.  
  72. /* general */
  73.  
  74. body {
  75. cursor: default;
  76. background: #fafafa; /* page background color*/
  77. font-family: 'karla';
  78. }
  79.  
  80. .item h1, .header h1 { /* headlines */
  81. font-family: 'quicksand';
  82. text-transform: uppercase;
  83. }
  84.  
  85. /* header */
  86.  
  87. .header {
  88. background: #fff;
  89. }
  90.  
  91. .header img { /* image */
  92. border-radius: 5px; /* delete this if you want sharp edges */
  93. }
  94.  
  95. .header h1 { /* title */
  96. font-size: 18px;
  97. color: #000;
  98. }
  99.  
  100. /* filters */
  101.  
  102. .filters {
  103. font-size: 12px;
  104. color: #000;
  105. }
  106.  
  107. .button.selected {
  108. text-decoration: none;
  109. box-shadow: 0 -6px 0 #eaf5ff inset; /* underline of selected filter */
  110. }
  111.  
  112. /* navigation */
  113.  
  114. .menu {
  115. font-size: 12px;
  116. }
  117.  
  118. .hoverstext { /* info hover box */
  119. font-size: 12px;
  120. background: #fff;
  121. }
  122.  
  123. a { /* links */
  124. text-decoration:none;
  125. color: #000;
  126. }
  127.  
  128. a:hover, .hovern:hover, .item a, .hovertext a { /* link hover color */
  129. color: #D5EBFF; /* links hover colour */
  130. }
  131.  
  132. /* Item */
  133.  
  134. .item {
  135. background: #fff;
  136. border-radius: 5px;
  137. }
  138.  
  139. .item h1 { /* item: title */
  140. font-size: 14px;
  141. }
  142.  
  143. .item h2 { /* item: subtitle */
  144. font-size: 12px;
  145. font-weight: normal;
  146. }
  147.  
  148. .subtext { /* item: text*/
  149. font-size: 13px;
  150. }
  151.  
  152. .item b{
  153. box-shadow: 0 -6px 0 #eaf5ff inset; /* underline */
  154. }
  155.  
  156. .hoverstext a, .item a { /* links */
  157. color:#BED7EE;
  158. }
  159.  
  160. /* icons */
  161. /* find more icons at https://themehive.co/font (you need the code from this list https://themehive.co/font/unicode) */
  162.  
  163. .iconone:before {
  164. content: '\e082';
  165. }
  166.  
  167. .icontwo:before {
  168. content: '\e0a0';
  169. }
  170.  
  171. .iconthree:before {
  172. content: '\e12b';
  173. }
  174.  
  175. /* progress bar */
  176.  
  177. .bg {
  178. background: #f6f6f6; /* background colour */
  179. }
  180.  
  181. .bg > span {
  182. background: #D5EBFF; /* fill colour */
  183. }
  184.  
  185.  
  186. </style>
  187.  
  188. </head>
  189. <body>
  190.  
  191. <div class="header">
  192. <img src="{PortraitURL-64}"><h1>title</h1> <!--replace {PortraitURL-64} with an image url if you don't want your icon there -->
  193.  
  194. <!---- filters ------>
  195. <div class="filters">
  196. <div class="button selected" filter="item">everything</div>
  197. <div class="button" filter="filter1">filter one</div>
  198. <div class="button" filter="filter2">filter two</div>
  199. <div class="button" filter="filter3">filter three</div>
  200. </div>
  201.  
  202. <!---- navigation ------>
  203. <div class="menu">
  204. <a href="/">back</a>
  205. <a href="/ask">ask</a>
  206. <a href="/">link</a>
  207. <p title="click me" class="hovern">info</p>
  208. <div class="hoverstext">your info text goes here.</div>
  209.  
  210. </div></div>
  211.  
  212. <div class="grid">
  213.  
  214. <!----------------------------------------------------
  215.  
  216. EDITING ITEMS:
  217.  
  218. - replace filter1/filter2/etc (after 'item') with the filter names you set above (<div class="button" filter="THISISYOURFILTERNAME">filter one</div>)
  219. - do NOT delete 'item'
  220. - replace 25% which what ever percentage you want the progressbar to show
  221.  
  222. ------------------------------------------------------
  223.  
  224. TEMPLATE - copy & paste as needed:
  225.  
  226. <div class="item filter here">
  227. <h1> title</h1><br>
  228. <h2>status: not finished</h2>
  229. <p class="subtext">
  230. <span class="iconone"><b>requested by:</b> example</span>
  231. <span class="icontwo"><b>request date:</b> ex/am</span>
  232. <span class="iconthree"><b>fandom:</b> example</span>
  233. </p>
  234. <div class="bg"><span style="width: 25%"></span></div>
  235. </div>
  236.  
  237. --------------------------------------------------->
  238.  
  239. <div class="item filter2 filter1">
  240. <h1> example icons </h1><br>
  241. <h2>status: not finished</h2>
  242. <p class="subtext">
  243. <span class="iconone"><b>requested by:</b> example</span>
  244. <span class="icontwo"><b>request date:</b> ex/am</span>
  245. <span class="iconthree"><b>fandom:</b> example</span>
  246. </p>
  247. <div class="bg"><span style="width: 25%"></span></div>
  248. </div>
  249.  
  250.  
  251. <!----- DO NOT EDIT AFTER THIS LINE ---->
  252. </div>
  253. <div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>
  254. </body>
  255. </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!