API tools faq
paste
dcylily

dayslily 💌 gif pack page v3.

dcylily
Aug 18th, 2025 (edited)
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.90 KB | None | 0 0
raw download clone embed print report
  1. <! DOCTYPE html>
  2. <html>
  3.  
  4. <!-- HELPFUL GUIDE TO EDITING THIS CODE:
  5. CRTL+F (windows) or CMD+F (mac) to find...
  6. EDIT!! - will tell u where to edit the code
  7. ADD!! - will tell u how to add threads
  8. TEXT!! - will let u jump to text editing
  9. COLORS!! - will let u jump to colors
  10. URL-HERE - will let u jump to where links are needed -->
  11.  
  12. <head>
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17. <!-- META TAGS, SCRIPTS, AND CUSTOM FONTS GO HERE-->
  18. <link rel="preconnect" href="https://fonts.googleapis.com">
  19. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  20. <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
  21.  
  22. <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
  23. <link
  24. rel="stylesheet"
  25. type="text/css"
  26. href="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/regular/style.css"
  27. />
  28. <link
  29. rel="stylesheet"
  30. type="text/css"
  31. href="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/fill/style.css"
  32. />
  33.  
  34. </head>
  35.  
  36. <style type="text/css">
  37.  
  38. .tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;position:fixed!important;right:-20px!important;transform:scale(0.7,0.7); } .tmblr-iframe:hover { opacity:1; }
  39.  
  40.  
  41.  
  42. /* EDIT!! COLOR!! (fill in colors - these are discord defaults) */
  43. :root {
  44. --background:#323338; /* bg of entire page */
  45. --sidebar:#2c2d32; /* bg of sidebar */
  46. --borders:#393a3f; /* border colors */
  47. --highlights:#414248; /* active channel bg */
  48. --inactive:#9b9ca2; /* duller color */
  49.  
  50. --text:#fff; /* body text */
  51.  
  52. /* EDIT!! gif decoration */
  53. --imgpadding:5px; /* increase for more spacing btwn gifs */
  54. --roundedimg:10px; /* set to 0 for no rounded corners */
  55. }
  56.  
  57.  
  58.  
  59.  
  60. body {
  61. background-color:var(--background);
  62.  
  63. font-family:open sans;
  64. color:var(--text);
  65.  
  66. overflow-x:none;
  67. }
  68.  
  69.  
  70. /* EDIT!! COLORS!! if you want to switch up accent colors, do it here */
  71. b, strong { color:var(--text); }
  72. i, em { color:var(--text); }
  73. a, href { color:var(--text); text-decoration:none; }
  74.  
  75. a:hover, href:hover {
  76. box-shadow: inset 200px 0 0 0 var(--highlights);
  77. color:var(--text);
  78. transition:.3s ease-in;
  79. }
  80.  
  81.  
  82. #topbar {
  83. width:calc(100% - 260px); height:69px;
  84. border-bottom:1px solid var(--borders);
  85.  
  86. position:fixed; margin:auto;
  87. top:0px; left:243px;
  88. z-index:99999;
  89. padding:0px; margin:0px;
  90.  
  91. background-color:var(--background);
  92.  
  93. overflow-x:none;
  94. }
  95.  
  96. #topbar .details {
  97. font-size:16px; color:var(--inactive);
  98.  
  99. position:relative; margin:auto;
  100. top:4px; left:55px;
  101. }
  102.  
  103. #topbar b, stong {
  104. color:var(--text);
  105. font-weight:600;
  106. }
  107.  
  108. #topbar .ph {
  109. position:relative; margin:auto; top:25px; left:25px;
  110.  
  111. font-size:20px; font-weight:bold;
  112. color:var(--inactive);
  113. }
  114.  
  115.  
  116. #sidebar {
  117. height:100%; width:250px;
  118. background-color:var(--sidebar);
  119. border-right:1px solid var(--borders);
  120.  
  121. position:fixed; margin:auto;
  122. top:0px; left:0px;
  123. z-index:99999;
  124. }
  125.  
  126. .servername {
  127. padding:10px; width:250px;
  128. border-bottom:1px solid var(--borders);
  129.  
  130. font-weight:700; font-size:18px;
  131. }
  132.  
  133. .servername .material-symbols-outlined {
  134. position:relative; margin:auto;
  135. color:var(--inactive);
  136. left:200px; top:-11px;
  137. }
  138.  
  139. .servername .url {
  140. position:relative; margin:auto;
  141. top:11px; left:5px;
  142. }
  143.  
  144.  
  145. .channelname {
  146. max-width:250px; height:25px;
  147. padding:10px; margin-top:10px;
  148. font-size:15px;
  149.  
  150. color:var(--inactive);
  151. }
  152.  
  153. .channelname a,href { color:var(--inactive); }
  154.  
  155. .channelname .packname {
  156. font-weight:500; font-size:16px;
  157.  
  158. position:relative; margin:auto;
  159. top:-20px; left:30px;
  160. }
  161.  
  162. .channelname .ph, .ph-fill {
  163. position:relative; margin:auto; top:1px;
  164.  
  165. font-size:20px; font-weight:bold;
  166. color:var(--inactive);
  167. }
  168.  
  169. .channelname .ph-fill { left:2px; }
  170.  
  171. .threadname {
  172. max-width:240px; height:auto;
  173. padding:10px; margin-left:10px;
  174.  
  175. font-size:15px;
  176. }
  177.  
  178. .threadname .ph {
  179. position:relative; margin:auto;
  180.  
  181. color:var(--inactive);
  182. font-size:20px; font-weight:bold;
  183. }
  184.  
  185. .threadname a, href {
  186. position:relative; margin:auto;
  187. top:-1px; left:10px;
  188.  
  189. color:var(--inactive);
  190.  
  191. font-weight:500;
  192. }
  193.  
  194. .threadname-ac {
  195. max-width:250px; height:auto;
  196. padding:10px 10px 10px 20px;
  197. background-color:var(--highlights);
  198.  
  199.  
  200. font-size:15px;
  201. }
  202.  
  203. .threadname-ac .ph {
  204. position:relative; margin:auto;
  205.  
  206. color:var(--inactive);
  207. font-size:20px; font-weight:bold;
  208. }
  209.  
  210. .threadname-ac a, href {
  211. position:relative; margin:auto;
  212. top:-1px; left:10px;
  213.  
  214. font-weight:500;
  215. }
  216.  
  217.  
  218. #gifcontainer {
  219. height:calc(100% - 70px); width:calc(100% - 260px);
  220.  
  221. position:relative; margin:auto;
  222. top:70px; left:260px;
  223. z-index:999;
  224. padding:0px; margin:0px;
  225.  
  226. overflow-x:none;
  227.  
  228. text-align:left;
  229. }
  230.  
  231. #gifcontainer img {
  232. padding:var(--imgpadding);
  233. border-radius:var(--roundedimg); }
  234.  
  235.  
  236. /* my credits - please don't edit <3 */
  237. .creds { width:250px; position:absolute; margin:auto; bottom:15px; font-size:11px; text-align:center; color:var(--inactive); opacity:0.2; transition:.3s ease-out;}
  238. .creds:hover { opacity:1; transition:.3s ease-in;}
  239.  
  240. </style>
  241.  
  242. <body>
  243.  
  244. <div id="topbar">
  245. <i class="ph ph-hash-straight"></i>
  246. <div class="details">
  247. <!-- EDIT!! TEXT!! (top bar info) -->
  248. <b>helena-busch</b> &nbsp;•&nbsp; thai & german, born in 1996.
  249. </div>
  250. </div>
  251.  
  252. <div id="sidebar">
  253.  
  254. <div class="servername">
  255. <div class="url">
  256. <!-- EDIT!! sidebar url link -->
  257. <a href="URL-HERE" title="back to blog">
  258. <!-- EDIT!! TEXT!! (sidebar url name) -->
  259. @dayslilygifs
  260. </a>
  261. </div>
  262. <span class="material-symbols-outlined">keyboard_arrow_down</span>
  263. </div>
  264.  
  265.  
  266. <div class="channelname">
  267. <i class="ph ph-hash-straight"></i>
  268. <div class="packname">
  269. <!-- EDIT!! TEXT!! (channel name) -->
  270. helena-busch
  271. </div>
  272. </div>
  273.  
  274.  
  275. <div class="threadname-ac">
  276. <i class="ph ph-arrow-elbow-down-right"></i>
  277. <!-- EDIT!! TEXT!! (thread name) -->
  278. <!-- you don't need to change url on this one bc it's current page -->
  279. <a href="#">youtube videos</a>
  280. </div>
  281.  
  282. <!-- EDIT!! if you don't need the extra thread, delete from here -->
  283. <div class="threadname">
  284. <i class="ph ph-arrow-elbow-down-right"></i>
  285. <a href="#">more gifs</a>
  286. </div>
  287. <!-- to here -->
  288.  
  289.  
  290. <!-- EDIT!! ADD!! if you want to add more threads, copy from here
  291.  
  292. <div class="threadname">
  293. <i class="ph ph-arrow-elbow-down-right"></i>
  294. <a href="URL-HERE">thread name</a>
  295. </div>
  296.  
  297. to here -->
  298.  
  299.  
  300. <div class="channelname">
  301. <i class="ph-fill ph-speaker-low"></i>
  302. <div class="packname">
  303. <!-- EDIT!! TEXT!! (gif count) -->
  304. 120 GIFS
  305. </div>
  306. </div>
  307.  
  308. <div class="channelname">
  309. <i class="ph-fill ph-book"></i>
  310. <div class="packname">
  311. <!-- EDIT!! TEXT!! (guidelines + url) -->
  312. <a href="URL-HERE">USAGE GUIDELINES</a>
  313. </div>
  314. </div>
  315.  
  316. <div class="threadname">
  317. <i class="ph ph-arrow-elbow-down-right"></i>
  318. <!-- EDIT!! TEXT!! (post link) -->
  319. <a href="URL-HERE">reblog the post</a>
  320. </div>
  321.  
  322.  
  323. <!-- my credits - please don't change <3 -->
  324. <div class="creds">page theme by <a href="https://dayslily.tumblr.com/">@dayslily</a></div>
  325.  
  326. </div>
  327.  
  328.  
  329.  
  330. <div id="gifcontainer">
  331.  
  332. <!-- INSERT GIF BELOW THIS LINE -->
  333.  
  334.  
  335.  
  336. <!-- & ABOVE THIS LINE -->
  337.  
  338.  
  339. </div>
  340.  
  341. <!-- HTML/DIV BLOCKS GO HERE -->
  342.  
  343. </body>
  344.  
  345. </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!