Advertisement
Guest User

Untitled

a guest
Feb 20th, 2019
68
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.86 KB | None | 0 0
  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. - the grid/filter effect was created with the tutorial by @cyantists
  16.  
  17. - art credit goes to @polydeuce
  18.  
  19. ---------------------------------------------------------------------->
  20.  
  21. <title>Muse List</title><link rel="shortcut icon" href="{Favicon}"> <!-- change (tab) title here -->
  22.  
  23. <!---- SCRIPT - DO NOT TOUCH ---->
  24.  
  25. <link href="https://fonts.googleapis.com/css?family=Arapey|Karla|Lora|PT+Serif|Playfair+Display|Quicksand" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//dl.dropbox.com/s/tki2ibhra46cxb0/style.css">
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//dl.dropbox.com/s/vcmmn9fpowr87vf/filter.js"></script>
  27. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script><script src="//dl.dropbox.com/s/x3z7b0uozqttpv0/masonry.js"></script>
  28.  
  29. <link href="https://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  30. <script src="https://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. !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);
  33. </script>
  34.  
  35.  
  36. <style type="text/css">
  37.  
  38. /* tooltips */
  39.  
  40. #s-m-t-tooltip {
  41. max-width: 250px;
  42. margin:24px 14px 7px 12px;
  43. padding:5px 8px;
  44. background: #fff;
  45. border-radius:2px;
  46. font-family: 'karla';
  47. letter-spacing: 1px;
  48. font-size:10px;
  49. color:#000;
  50. box-shadow: none;
  51. }
  52.  
  53. /* scrollbar */
  54.  
  55. ::-webkit-scrollbar {
  56. width:5px;
  57. height:17px;
  58. background-color: #fff;
  59. }
  60. ::-webkit-scrollbar-track {
  61. background-color: #fff;
  62. }
  63. ::-webkit-scrollbar-thumb {
  64. background-color: rgba(252, 201, 201, .4);
  65. min-height:24px;
  66. min-width:24px;
  67. }
  68.  
  69. /* selection */
  70.  
  71. ::-moz-selection { background:#eee;color:#000; }
  72. ::selection { background:#eee;color:#000; }
  73.  
  74. /* general */
  75.  
  76. body {
  77. background: #fff; /* page background */
  78. font-family: 'asap'; /* font */
  79. cursor: default;
  80. overflow-x:hidden;
  81. }
  82.  
  83. /* accent color */
  84.  
  85. h1, .button:hover,.button.selected, .content a {
  86. background: #98D4F5;
  87. }
  88.  
  89. a:hover, .item a:hover {
  90. color: #C39B9B; /* links hover colour */
  91. }
  92.  
  93. /* header */
  94.  
  95. .header {
  96. background: inherit;
  97. }
  98.  
  99. h1 { /* title */
  100. font-family: 'charm';
  101. font-size: 16px;
  102. letter-spacing: 2px;
  103. color: #444;
  104. }
  105.  
  106. .links, .desc, .filters { /* other text */
  107. font-size: 11px;
  108. }
  109.  
  110. /* members */
  111.  
  112. .item, .item a {
  113. color: #444; /* text color*/
  114. }
  115.  
  116. h2 { /*title*/
  117. font-size: 13px;
  118. }
  119.  
  120. .content { /*description*/
  121. font-size: 12px;
  122. text-align: left;
  123. }
  124.  
  125. .content a:hover { /* link hover background*/
  126. background: none;
  127. }
  128.  
  129. </style>
  130. </head>
  131.  
  132. <body>
  133.  
  134. <!--- header ---->
  135. <div class="header">
  136. <div class="headercontent">
  137. <h1>Muse List</h1> <!--- here goes your title ---->
  138. <div class="links">
  139. <a href="/">back</a>
  140. <a href="/ask">ask</a>
  141. <a href="/submit">submit</a>
  142. <a href="/rules">rules</a>
  143. <!--- copy & paste as needed ---->
  144. </div>
  145.  
  146. <!--- if you don't want filters: delte from here ---->
  147. <div class="filters">
  148. <div class="button selected" filter="item">All Muses</div>
  149. <div class="button" filter="boy">Boys</div>
  150. <div class="button" filter="girl">Girls</div>
  151. <div class="button" filter="single">Open for Shipping</div>
  152. <!--- copy & paste as needed ---->
  153. </div>
  154. <!--- until here ---->
  155.  
  156. <p class="desc">here goes your description. make sure that you don't make it too long.</p>
  157. </div></div>
  158.  
  159.  
  160. <!--- members section starts
  161. - replace filter1/filter2/etc (after 'item') with the filter names you set above(<div class="button" filter="THISISYOURFILTERNAME">filter one</div>)
  162. - IMPORTANT: do not delete 'item' !
  163.  
  164. layout:
  165.  
  166. <div class="item here goes your filters">
  167. <img src="IMAGEURL"></img>
  168. <h2>Title</h2>
  169. <p class="content">description <a href="/link">blogtitle/name</a></p>
  170. </div>
  171.  
  172. ---->
  173. <div class="grid">
  174.  
  175.  
  176. <div class="item girl">
  177. <img src="https://66.media.tumblr.com/ba5d743c90ddb4808f8358a089ef140e/tumblr_inline_nz9gaw1ICm1ry8yu8_250.jpg"></img>
  178. <h2>Amelia Greyson</h2>
  179. <p class="content">Once, Mia was a winged spirit- half Angel, half Demon. After a hard life as a human long ago, a forbidden love, and a frankly angsty death, she waged war on angels and demons to free mankind from their interference. But after being caught by the angels, she was rebooted- reborn forcefully and lost all her memories. Now all she has are a goofy brother she doesn’t remember, and a drafty hospital gown. <a href="https://standfortheangels.tumblr.com/miainfo">More Info</a></p>
  180. </div>
  181.  
  182. <div class="item boy single">
  183. <img src="https://66.media.tumblr.com/d4f8d3d8b3788f0a037f9efac5139143/tumblr_inline_p0akd4vrnR1ry8yu8_500.jpg"></img>
  184. <h2>Mike Luckett</h2>
  185. <p class="content">A charismatic, energetic, and usually childish guardian angel. Mike has many powers as an angel, as well as excellent social skills. He naturally tries to figure people out on first meetings and become the kind of friend his charges need him to be. <a href="https://standfortheangels.tumblr.com/mikeinfo">More Info</a></p>
  186. </div>
  187.  
  188. <div class="item boy">
  189. <img src="https://66.media.tumblr.com/197b5af9b435b0fbeb994612a7f87f91/tumblr_inline_oqolfdccUw1ry8yu8_500.jpg"></img>
  190. <h2>Chester Meltori</h2>
  191. <p class="content">A clumsy, panicky, yet powerful village wizard. Time with Chester might earn you a genuine and loyal friend, or a reluctant rival, but will never be boring. <a href="https://standfortheangels.tumblr.com/chesterinfo">More Info</a></p>
  192. </div>
  193.  
  194. <div class="item boy single">
  195. <img src="https://66.media.tumblr.com/f4be8e1b41c725640ecde7b423ad659b/tumblr_inline_pj4ky3dgtC1ry8yu8_500.jpg"></img>
  196. <h2>Raph Thomas</h2>
  197. <p class="content">Half demon and half human, Raph is a withdrawn and irritable character who’s seen things some people can only imagine in their nightmares, but he’s working his hardest to be a good person and shed his demon half. <a href="https://standfortheangels.tumblr.com/raphinfo">More Info</a></p>
  198. </div>
  199.  
  200. <!----- DO NOT EDIT AFTER THIS LINE ---->
  201. </div>
  202. <div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>
  203.  
  204.  
  205. </body>
  206. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement