API tools faq
paste
em19am

"JOURNAL"

em19am
Jun 6th, 2025
40
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <!--
  6.  
  7. ⢀⣤⣤⣤⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  8. ⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⠋⠀⠀ ⠙⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  9. ⠀⠀⠀⠀⠀⠀⠀⠀⣸⡇⠀⠀⠀⠀⠀ ⠙⢿⣦⡀⠀⢀⣀⣀⣠⣤⣀⠀⠀
  10. ⠀⠀⠀⠀⠀⠀⠀⠀⣿⠇⠀⠀⠀⠀⠀⠀⠀ ⠙⠿⠿⠟⠛⠛⠋⠉⠉⠛⣷⡄
  11. ⠀⠀⠀⠀⠀⠀⠀⢠⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⢸⡇
  12. ⠀⠀⠀⠀⣀⣤⣶⠿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡿⠃
  13. ⠀⣠⣶⠿⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀
  14. ⢸⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡿⠁⠀⠀
  15. ⢸⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⡀⠀⠀
  16. ⠀⠙⠿⣶⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⡄⠀
  17. ⠀⠀⠀⠀⠉⠛⠿⣶⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⡄
  18. ⠀⠀⠀⠀⠀⠀⠀⠘⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⢸⡇
  19. ⠀⠀⠀⠀⠀⠀⠀⠀⣿⡆⠀⠀⠀⠀⠀⠀⠀⣠⣶⣶⣦⣤⣤⣄⣀⣀⣤⡿⠃
  20. ⠀⠀⠀⠀⠀⠀⠀⠀⢹⡇⠀⠀⠀⠀⠀⣠⣾⠏⠀⠀⠀⠈⠉⠉⠙⠛⠉⠀⠀
  21. ⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣄⠀⠀⣠⣾⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  22. ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠛⠛⠛⠁⠀⠀⠀⠀
  23.  
  24. "JOURNAL" TEMPLATE... BY EVILPERSON
  25.  
  26. - I do not claim that this is good code, but I've done my best to make it mobile friendly, and responsive.
  27. - Change and edit whatever you want, feel free to do literally anything.
  28. - No credit necessary. The net is free. The net is yours.
  29. - If you have any questions, message my guestbook.
  30.  
  31. -->
  32.  
  33. <meta charset="UTF-8">
  34. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  35. <title>Tab Title Here</title>
  36. <link rel="icon" type="image/x-icon" href="https://files.catbox.moe/s1yj99.png">
  37. </head>
  38. <style>
  39. body{
  40. background-image: url('https://files.catbox.moe/0rvg8j.png');
  41. background-repeat: no-repeat;
  42. background-size: cover;
  43. font-family: higu;
  44. font-size: 1vw;
  45. }
  46.  
  47. @font-face {
  48. font-family: higu;
  49. src: url(/sazanami-gothic.ttf);
  50. }
  51.  
  52. .container{
  53. width: 50%;
  54. height: 92vh;
  55. border: 5px double rgb(33, 41, 29);
  56. border-bottom-left-radius: 10px;
  57. border-bottom-right-radius: 10px;
  58. z-index: 1;
  59. margin: auto;
  60. background-color: white;
  61. margin-top: 1%;
  62. padding: 0.5%;
  63. box-shadow: 0 6px 20px 0 rgb(255, 255, 255), 0 6px 20px 0 rgb(255, 255, 255);
  64. }
  65.  
  66. .header{
  67. background-image: url('https://files.catbox.moe/p2ar86.png');
  68. border: 1px solid transparent;
  69. border-radius: 10px;
  70. background-repeat: no-repeat;
  71. background-size: cover;
  72. width: 100%;
  73. height: 30%;
  74. }
  75.  
  76. .header h1{
  77. color: white;
  78. filter: drop-shadow(1px 1px 0 rgb(39, 47, 117)) drop-shadow(-1px 1px 0 rgb(39, 47, 117)) drop-shadow(0 -1px 0 rgb(39, 47, 117)) drop-shadow(1px 0 rgb(39, 47, 117));
  79. font-size: 5vw;
  80. font-style: italic;
  81. letter-spacing: 5px;
  82. margin: 0;
  83. transition: ease-in-out 1s;
  84. }
  85.  
  86. .header h1:hover{
  87. letter-spacing: 20px;
  88. cursor: default;
  89. }
  90.  
  91. .inner{
  92. background-image: url('https://files.catbox.moe/ku2eoi.jpg:large');
  93. background-repeat: no-repeat;
  94. background-size: cover;
  95. border: 2px solid black;
  96. border-radius: 5px;
  97. padding: 1%;
  98. width: 97%;
  99. height: 60.5vh;
  100. overflow: none;
  101. margin: auto;
  102. margin-top: 1%;
  103. z-index: 3;
  104. }
  105.  
  106. .left{
  107. float: left;
  108. width: 49%;
  109. height: 99%;
  110. overflow: auto;
  111. background-color: white;
  112. background-image: url('https://files.catbox.moe/gxukio.jpg');
  113. border: 1px solid black;
  114. border-radius: 5px;
  115. scrollbar-width: none;
  116. -ms-overflow-style: none;
  117. }
  118.  
  119. .left::-webkit-scrollbar {
  120. display: none;
  121. }
  122.  
  123. .right{
  124. float: right;
  125. width: 49%;
  126. height: 99%;
  127. overflow: auto;
  128. background-color: white;
  129. background-image: url('https://files.catbox.moe/gxukio.jpg');
  130. border: 1px solid black;
  131. border-radius: 5px;
  132. scrollbar-width: none;
  133. -ms-overflow-style: none;
  134. }
  135.  
  136. .right::-webkit-scrollbar {
  137. display: none;
  138. }
  139.  
  140. .right p, .left p{
  141. padding: 6%;
  142. margin: 0;
  143. }
  144.  
  145. .right p:hover, .left p:hover{
  146. cursor: default;
  147. }
  148.  
  149. .right h1, .left h1{
  150. text-align: center;
  151. color: white;
  152. filter: drop-shadow(1px 1px 0 rgb(39, 47, 117)) drop-shadow(-1px 1px 0 rgb(39, 47, 117)) drop-shadow(0 -1px 0 rgb(39, 47, 117)) drop-shadow(1px 0 rgb(39, 47, 117));
  153. font-size: 2.5vw;
  154. margin: 0;
  155. margin-top: 3%;
  156. transition: ease-in-out 1s;
  157. }
  158.  
  159. .right h1:hover, .left h1:hover{
  160. letter-spacing: 8px;
  161. cursor: default;
  162. }
  163.  
  164. .binder{
  165. width: 4%;
  166. height: 60%;
  167. background-image: url('https://files.catbox.moe/4lvyzf.png');
  168. background-repeat: repeat-y;
  169. position: absolute;
  170. left: 48%;
  171. }
  172.  
  173. hr{
  174. border: 2px solid #5568d5;
  175. border-radius: 5px;
  176. }
  177.  
  178. li{
  179. list-style-image: url('https://files.catbox.moe/s1yj99.png');
  180. }
  181.  
  182. ul{
  183. margin: 0;
  184. }
  185.  
  186. .box{
  187. width: 95%;
  188. }
  189.  
  190. .box2{
  191. margin-left: 3%;
  192. }
  193.  
  194. a{
  195. color: #5598DA;
  196. transition: ease-in-out 0.6s;
  197. }
  198.  
  199. a:hover{
  200. color: #55d58f;
  201. }
  202.  
  203. @media screen and (max-width: 500px) {
  204. body{
  205. font-size: 4vw;
  206. height: 100vh;
  207. }
  208.  
  209. .container{
  210. width: 95%;
  211. height: 90vh;
  212. }
  213.  
  214. .right h1, .left h1, .header h1{
  215. font-size: 8vw;
  216. }
  217.  
  218. .header{
  219. height: 10%;
  220. }
  221.  
  222. .inner{
  223. height: 78.5vh;
  224. }
  225.  
  226. .binder, #hide{
  227. display: none;
  228. }
  229.  
  230. .left{
  231. float: none;
  232. width: 100%;
  233. height: 50%;
  234. }
  235.  
  236. .right{
  237. float: none;
  238. width: 100%;
  239. height: 50%;
  240. }
  241. }
  242. </style>
  243. <body>
  244. <div class="container">
  245. <div class="header">
  246. <h1>Title Here</h1>
  247. </div>
  248.  
  249. <div class="inner">
  250. <div class="binder"></div>
  251.  
  252. <div class="left">
  253. <h1>Left Box</h1>
  254. <hr>
  255. <div class="box">
  256. <p>View how I've used this template <a href="https://evilperson.neocities.org/pages/temps" target="_blank">here</a>!</p>
  257. <ul>
  258. <li>Example of a list item since I changed the list image.</li>
  259. </ul>
  260. <p>Not gonna lie, the binder image gets a bit fucky when zooming in and out, but I'm too lazy to fix that. You're free to try it yourself, and/or change images to suit your tastes.</p>
  261. <p>Both boxes have overflow:auto; on them so you can yap as much as you want. I've hid the scrollbars for aesthetic reasons, but they still scroll.</p>
  262. <p>Yapping here to show you.</p>
  263. <p>YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP YAP </p>
  264. </div>
  265. </div>
  266.  
  267. <div class="right">
  268. <h1>Right Box</h1>
  269. <hr>
  270. <div class="box2">
  271. <p>To be honest, I think this page would be cute as a diary, or a journal of sorts. Updates, even. Use it for whatever you want!</p>
  272. <p>The net is yours.</p>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </body>
  278. </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!