API tools faq
paste
iamtheangrysons

stickynote layout 1.0

iamtheangrysons
Jul 2nd, 2025 (edited)
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.75 KB | None | 0 0
raw download clone embed print report
  1. <div class="articleBody" bis_skin_checked="1">
  2. <div class="collage-paragraph" bis_skin_checked="1"><h1 style="text-align: center; ">Collage blog/forum post layout [free to use with credits) by @iamtheangrysons</h1>Hey everyone here's my first ever layout for blog posts or forum posts. This is free to use with credits. You can edit background images of the sticky notes in "collage-paragraph:nth-of-type(1)". <a href="collage-paragraph:nth-of-type(1)" target="_self">The snowflake effect is by fini hoover.</a>&nbsp;<br></div><div class="collage-paragraph" bis_skin_checked="1"><h1 style="text-align: center; ">Tutorial</h1>1. To make a new collage sticky note press [ENTER] key on your keyboard. To keep making paragraphs within a single sticky note, press [SHIFT] + [ENTER].<br><br>2. There are two versions of this code, one with the sticky notes the one you're seeing here on this page:&nbsp;<br><br><br>3. The other version can be previewed here<br>&nbsp;</div><div class="collage-paragraph" bis_skin_checked="1"><br><br><br>Here's an example of a Youtube video embedded in the sticky note.<br>&nbsp;<br>
  3.  
  4. <iframe width="100%" height="315" src="https://www.youtube.com/embed/b7C-3SIlkak?si=NRPn5S--P13Y8TK4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>
  5.  
  6.  
  7. <div class="collage-paragraph" style="text-align: left;" bis_skin_checked="1"><p style="text-align: center;"><img src="https://d1v7jayx2s9clc.cloudfront.net/user/pages/45.simple-net-art-diagram/netartdiagram.gif" alt="" style="font-size: 13px; background-color: transparent;"></p><p></p></div>
  8.  
  9.  
  10. </div>
  11.  
  12.  
  13. <!-- SNOW FLAKES -->
  14.  
  15. <div class="snowflakes" bis_skin_checked="1">
  16. <div class="snowflake" bis_skin_checked="1"><img src="https://i.ibb.co/QFjgwXtp/RDX4-OS4-FGIVA5-ZVQDR4-ZA22-TV5-JJ7-VRY.gif"></div>
  17. <div class="snowflake" bis_skin_checked="1"><img src="https://blob.gifcities.org/gifcities/MFHANYCTL2WC6FJUP4ASMQAH7OUJA2FB.gif"></div>
  18. <div class="snowflake" bis_skin_checked="1"><img src="https://blob.gifcities.org/gifcities/VYNJZKY6LZ2VGXG5NFGRGJGT3LICJU6J.gif"></div>
  19. <div class="snowflake" bis_skin_checked="1"><img src="https://i.ibb.co/QFjgwXtp/RDX4-OS4-FGIVA5-ZVQDR4-ZA22-TV5-JJ7-VRY.gif"></div>
  20. <div class="snowflake" bis_skin_checked="1"><img src="https://blob.gifcities.org/gifcities/CHQ7T6CZWRR4INGUE6K3ACA2LIPCIN74.gif"></div>
  21. <div class="snowflake" bis_skin_checked="1"><img src="https://blob.gifcities.org/gifcities/VYNJZKY6LZ2VGXG5NFGRGJGT3LICJU6J.gif"></div>
  22. <div class="snowflake" bis_skin_checked="1"><img src="https://blob.gifcities.org/gifcities/MFHANYCTL2WC6FJUP4ASMQAH7OUJA2FB.gif"></div>
  23. <div class="snowflake" bis_skin_checked="1"><img src="https://blob.gifcities.org/gifcities/VDJQWTQ5MHS75ELGVIWMXGBNWIY3533K.gif"></div>
  24. </div>
  25.  
  26. <style>
  27. @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:-2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
  28.  
  29. * {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat988.cur), auto !important;}
  30.  
  31. main{
  32. background:transparent;
  33. }
  34.  
  35. </style>
  36.  
  37.  
  38. <style>
  39. nav .links {
  40. display: flex;
  41. justify-content: center;
  42. align-items: center;
  43. gap: 6px; /* tighter spacing between links */
  44. padding: 8px 0;
  45. flex-wrap: nowrap; /* force one row */
  46. overflow-x: auto; /* optional: scroll if too many links */
  47. scroll-behavior: smooth;
  48. max-width: 100%;
  49. background: transparent;
  50. }
  51.  
  52. nav .links a {
  53. flex: 0 0 auto;
  54. width: auto;
  55. padding: 4px 8px; /* smaller padding */
  56. font-size: 11px; /* smaller font size */
  57. background: var(--accent, #c60f59);
  58. color: white !important;
  59. text-decoration: none;
  60. font-family: SimSun, monospace;
  61. text-transform: uppercase;
  62. border-radius: 6px;
  63. box-shadow: 0 0 4px hotpink;
  64. transition: all 0.2s ease;
  65. }
  66.  
  67. nav .links a:hover {
  68. filter: brightness(1.1);
  69. transform: scale(1.03);
  70. }
  71.  
  72. nav .links li::after,
  73. nav .links a::after {
  74. content: none !important;
  75. display: none !important;
  76. border: none !important;
  77. background: none !important;
  78. }
  79.  
  80. .edit-info {
  81. max-width: 320px;
  82. margin: 30px auto;
  83. padding: 8px 10px;
  84. background-image: url('https://i.pinimg.com/736x/3a/f5/a8/3af5a838b965eb26e3d7bf11e5d46ecd.jpg');
  85. background-size: cover;
  86. background-position: center;
  87. color: #c60f59;
  88. font-size: 13px;
  89. line-height: 1.5;
  90. box-shadow: 0 0 10px hotpink, 0 0 5px hotpink;
  91. transform: rotate(-1.5deg); /* slight tilt */
  92. transform-origin: center;
  93. position: relative;
  94. z-index: 1;
  95. border: 1px solid rgba(255, 255, 255, 0.4);
  96. overflow: hidden;
  97. }
  98.  
  99. .edit-info::before {
  100. content: '';
  101. position: absolute;
  102. inset: 0;
  103. background: rgba(255, 255, 255, 0.4); /* soft light overlay */
  104. backdrop-filter: brightness(1.05);
  105. z-index: -1;
  106. border-radius: 6px;
  107. }
  108.  
  109. .edit-info .profile-pic img {
  110. border-radius: 8px;
  111. box-shadow: 0 0 5px hotpink;
  112. width: 80px;
  113. height: 80px;
  114. object-fit: cover;
  115. }
  116.  
  117. .edit-info h4,
  118. .edit-info p {
  119. margin: 6px 0;
  120. font-family: SimSun, monospace;
  121. }
  122.  
  123. .edit-info a {
  124. color: #c60f59;
  125. text-decoration: underline;
  126. font-weight: bold;
  127. }
  128. nav .top {
  129. max-width: 800px;
  130. margin: 20px auto;
  131. padding: 10px 15px;
  132. background-image: url('https://i.pinimg.com/736x/9c/45/94/9c45944e1547e5782d9ebe589c0c9cda.jpg');
  133. background-size: cover;
  134. background-position: center;
  135. transform: rotate(1.5deg);
  136. position: relative;
  137. box-shadow: 0 0 10px hotpink, 0 0 5px hotpink;
  138. border: 1px solid rgba(255, 255, 255, 0.4);
  139. z-index: 10;
  140. }
  141.  
  142. nav .top::before {
  143. content: '';
  144. position: absolute;
  145. inset: 0;
  146. background: rgba(255, 255, 255, 0.4);
  147. backdrop-filter: brightness(1.05);
  148. z-index: -1;
  149. border-radius: 6px;
  150. }
  151.  
  152. nav .top .left,
  153. nav .top .center,
  154. nav .top .right {
  155. display: inline-block;
  156. vertical-align: top;
  157. padding: 4px;
  158. }
  159.  
  160. nav .top .left img {
  161. max-height: 30px;
  162. filter: drop-shadow(0 0 2px hotpink);
  163. }
  164.  
  165. nav .top .center label,
  166. nav .top .right a,
  167. nav .top .right button {
  168. font-family: SimSun, monospace;
  169. font-size: 12px;
  170. color: #c60f59;
  171. }
  172.  
  173. /* Headline */
  174. h1.title {
  175. color: #c60f59;
  176. font-family: SimSun, monospace;
  177. text-shadow: 0 0 5px white;
  178. }
  179.  
  180. /* Edit/Delete/Pin links paragraph */
  181. p a[href*="/edit"],
  182. p a[href*="/delete"],
  183. p a[href*="/pin"] {
  184. color: #007fff; /* blue link color */
  185. font-weight: bold;
  186. text-decoration: underline;
  187. }
  188.  
  189. p a[href*="/edit"],
  190. p a[href*="/delete"],
  191. p a[href*="/pin"],
  192. p:has(a[href*="/edit"]) {
  193. color: #c60f59;
  194. font-family: SimSun, monospace;
  195. font-size: 14px;
  196. }
  197.  
  198. /* Kudos section */
  199. .kudos {
  200. color: #c60f59;
  201. font-family: SimSun, monospace;
  202. text-align: center;
  203. margin-top: 20px;
  204. }
  205.  
  206. .kudos a,
  207. .kudos button {
  208. color: #007fff;
  209. font-family: SimSun, monospace;
  210. font-size: 14px;
  211. background: transparent;
  212. border: 1px dashed #c60f59;
  213. padding: 3px 6px;
  214. margin: 2px;
  215. cursor: pointer;
  216. transition: 0.2s ease;
  217. }
  218.  
  219. .kudos button:hover {
  220. background: #c60f59;
  221. color: white;
  222. }
  223.  
  224. /* Comments Section */
  225. .comments {
  226. color: #c60f59;
  227. font-family: SimSun, monospace;
  228. }
  229.  
  230. .comments h4 {
  231. color: #c60f59;
  232. font-size: 16px;
  233. text-shadow: 0 0 4px white;
  234. }
  235.  
  236. .comments p i {
  237. color: #c60f59;
  238. font-style: italic;
  239. }
  240.  
  241.  
  242. footer {
  243. max-width: 800px;
  244. margin: 40px auto;
  245. padding: 10px 15px;
  246. background-image: url('https://i.pinimg.com/736x/ef/ef/3d/efef3d2008c5128c204091e51092a3ed.jpg');
  247. background-size: cover;
  248. background-position: center;
  249. transform: rotate(-2deg);
  250. position: relative;
  251. box-shadow: 0 0 10px hotpink, 0 0 5px hotpink;
  252. border: 1px solid rgba(255, 255, 255, 0.4);
  253. z-index: 10;
  254. color: #c60f59;
  255. font-family: SimSun, monospace;
  256. font-size: 13px;
  257. text-align: center;
  258. }
  259.  
  260. footer::before {
  261. content: '';
  262. position: absolute;
  263. inset: 0;
  264. background: rgba(255, 255, 255, 0.4);
  265. backdrop-filter: brightness(1.05);
  266. z-index: -1;
  267. border-radius: 6px;
  268. }
  269.  
  270. /* Footer links */
  271. footer a {
  272. color: #007fff; /* blue links */
  273. text-decoration: underline;
  274. font-weight: bold;
  275. }
  276.  
  277. footer a:hover {
  278. color: #c60f59;
  279. background: rgba(255, 255, 255, 0.2);
  280. }
  281.  
  282. /* Footer list layout */
  283. footer ul.links {
  284. display: flex;
  285. flex-wrap: wrap;
  286. justify-content: center;
  287. gap: 5px;
  288. padding: 10px 0;
  289. list-style: none;
  290. margin: 0 auto;
  291. }
  292.  
  293. footer ul.links li {
  294. margin: 0;
  295. padding: 0;
  296. }
  297.  
  298.  
  299. </style><style>
  300. body {
  301. background-image: url('https://i.pinimg.com/736x/82/b4/43/82b443f8a8a4fffd4a0a1e2df86ef1ca.jpg');
  302. background-repeat: repeat;
  303. font-family: SimSun, monospace;
  304. margin: 0;
  305. padding: 0;
  306. }
  307.  
  308. /* change the background to "url('image link here')" if you don't want a background behind the collage notes */
  309. .articleBody {
  310. max-width: 800px;
  311. margin: 0 auto;
  312. padding: 60px 30px;
  313. overflow: visible;
  314. background-image: transparent;
  315. background-repeat: repeat;
  316. }
  317.  
  318. .collage-paragraph {
  319. max-width: 240px;
  320. margin: 20px auto;
  321. padding: 8px 10px;
  322. background-image: url('https://i.pinimg.com/736x/5e/2b/3c/5e2b3c3b6c2e4e3b9e2b3c3b6c2e4e3b.jpg'); /* Add your image URL here */
  323. background-size: cover;
  324. background-position: center;
  325. color: #c60f59;
  326. font-size: 13px;
  327. line-height: 1.5;
  328. box-shadow: 0 0 10px hotpink, 0 0 5px hotpink;
  329. transform: rotate(var(--rotate));
  330. transform-origin: center;
  331. position: relative;
  332. z-index: 1;
  333. border: 1px solid rgba(255, 255, 255, 0.4);
  334. overflow: hidden;
  335. }
  336. .collage-paragraph::before {
  337. content: '';
  338. position: absolute;
  339. inset: 0;
  340. background: rgba(255, 255, 255, 0.4);
  341. backdrop-filter: brightness(1.05);
  342. z-index: -1;
  343. border-radius: 6px;
  344. }
  345.  
  346. /* Background images + rotation */
  347. .collage-paragraph:nth-of-type(1) { --rotate: -2.5deg; background-image: url('https://i.pinimg.com/736x/1a/a5/cb/1aa5cb2f7efba7d8c52181b0e6f26cb6.jpg'); }
  348. .collage-paragraph:nth-of-type(2) { --rotate: 3deg; background-image: url('https://i.pinimg.com/736x/b5/71/a6/b571a69bd5cd771b2dc3838af986c022.jpg'); }
  349. .collage-paragraph:nth-of-type(3) { --rotate: -1.8deg; background-image: url('https://i.pinimg.com/736x/5b/b9/ae/5bb9aed287881767593b083ef896121c.jpg'); }
  350. .collage-paragraph:nth-of-type(4) { --rotate: 2.2deg; background-image: url('https://i.pinimg.com/736x/1b/7f/54/1b7f542d2386d3b1ae50599370a67690.jpg'); }
  351. .collage-paragraph:nth-of-type(5) { --rotate: -2.5deg; background-image: url('https://i.pinimg.com/736x/4a/e1/d0/4ae1d0aa604b88c29494c262ce414b74.jpg'); }
  352. .collage-paragraph:nth-of-type(6) { --rotate: 3deg; background-image: url('https://i.pinimg.com/736x/f3/80/c5/f380c55fa2eb07614d6d44289c428fee.jpg'); }
  353.  
  354. </style><style>
  355. .collage-paragraph {
  356. background-image: url('https://i.pinimg.com/736x/1a/a5/cb/1aa5cb2f7efba7d8c52181b0e6f26cb6.jpg');
  357. background-size: cover;
  358. background-repeat: no-repeat;
  359. }
  360. </style>
Tags: spachey
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!