API tools faq
paste
em19am

"MICROBLOG"

em19am
Jun 14th, 2025
10
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.32 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <!--
  5. ⠀⠀⢀⣤⣤⣤⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  6. ⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⠋⠀⠀⠙⢿⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  7. ⠀⠀⠀⠀⠀⠀⠀⠀⣸⡇⠀⠀⠀⠀⠀⠙⢿⣦⡀⠀⢀⣀⣀⣠⣤⣀⠀⠀
  8. ⠀⠀⠀⠀⠀⠀⠀⠀⣿⠇⠀⠀⠀⠀⠀⠀⠀⠙⠿⠿⠟⠛⠛⠋⠉⠉⠛⣷⡄
  9. ⠀⠀⠀⠀⠀⠀⠀⢠⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⢸⡇
  10. ⠀⠀⠀⠀⣀⣤⣶⠿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡿⠃
  11. ⠀⣠⣶⠿⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀
  12. ⢸⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡿⠁⠀⠀
  13. ⢸⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⡀⠀⠀
  14. ⠀⠙⠿⣶⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⡄⠀
  15. ⠀⠀⠀⠀⠉⠛⠿⣶⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⡄
  16. ⠀⠀⠀⠀⠀⠀⠀⠘⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⢸⡇
  17. ⠀⠀⠀⠀⠀⠀⠀⠀⣿⡆⠀⠀⠀⠀⠀⠀⠀⣠⣶⣶⣦⣤⣤⣄⣀⣀⣤⡿⠃
  18. ⠀⠀⠀⠀⠀⠀⠀⠀⢹⡇⠀⠀⠀⠀⠀⣠⣾⠏⠀⠀⠀⠈⠉⠉⠙⠛⠉⠀⠀
  19. ⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣄⠀⠀⣠⣾⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  20. ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠛⠛⠛⠁⠀⠀⠀⠀
  21.  
  22. "MICROBLOG" TEMPLATE... BY EVILPERSON
  23.  
  24. - I do not claim that this is good code, but I've done my best to make it mobile friendly, and responsive.
  25. - Change and edit whatever you want, feel free to do literally anything.
  26. - No credit necessary. The net is free. The net is yours.
  27. - If you have any questions, message my guestbook.⠀⠀⠀⠀⠀⠀
  28. ⠀⠀⠀⠀
  29. -->
  30.  
  31. <head>
  32. <meta charset="UTF-8">
  33. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  34. <title>Microblog</title>
  35. <link rel="icon" type="image/x-icon" href="https://files.catbox.moe/95co3b.gif">
  36. </head>
  37. <style>
  38. body{
  39. font-family:Arial, Helvetica, sans-serif;
  40. background-image: url(https://files.catbox.moe/fjqhsu.jpg);
  41. font-size: 0.8vw;
  42. }
  43.  
  44. .cont{
  45. width: 35%;
  46. height: 70vh;
  47. margin-left: 5%;
  48. margin-top: 5%;
  49. }
  50.  
  51. .links{
  52. width: 20%;
  53. height: 100%;
  54. overflow: auto;
  55. float: left;
  56. border: 1px solid black;
  57. padding: 1%;
  58. background-color: rgba(255, 255, 255, 0.4);
  59. }
  60.  
  61. .links a{
  62. margin: 0;
  63. font-size: 1vw;
  64. padding: 1%;
  65. text-decoration: none;
  66. display: inline-block;
  67. width: 96.5%;
  68. height: auto;
  69. filter: drop-shadow(1px 1px 0 rgb(153, 75, 92)) drop-shadow(-1px 1px 0 rgb(153, 75, 92)) drop-shadow(0 -1px 0 rgb(153, 75, 92)) drop-shadow(1px 0 rgb(153, 75, 92));
  70. color: #FCD8DC;
  71. font-weight: bolder;
  72. font-style: italic;
  73. transition: ease-in-out 0.6s;
  74. }
  75.  
  76. .links a:hover{
  77. color: rgb(225, 193, 228);
  78. filter: drop-shadow(1px 1px 0 rgb(148, 102, 179)) drop-shadow(-1px 1px 0 rgb(148, 102, 179)) drop-shadow(0 -1px 0 rgb(148, 102, 179)) drop-shadow(1px 0 rgb(148, 102, 179));
  79. }
  80.  
  81. .links h1{
  82. font-size: 1vw;
  83. text-align: center;
  84. background: #c97a91;
  85. filter: drop-shadow(1px 1px 0 rgb(153, 75, 92)) drop-shadow(-1px 1px 0 rgb(153, 75, 92)) drop-shadow(0 -1px 0 rgb(153, 75, 92)) drop-shadow(1px 0 rgb(153, 75, 92));
  86. color: #FCD8DC;
  87. border: 1px solid #752d43;
  88. margin: 0;
  89. margin-bottom: 3%;
  90. }
  91.  
  92. .links img{
  93. width: 100%;
  94. height: auto;
  95. display: block;
  96. }
  97.  
  98. .main{
  99. width: 70%;
  100. height: 100%;
  101. overflow: auto;
  102. float: right;
  103. border: 1px solid black;
  104. padding: 1%;
  105. background-color: rgba(255, 255, 255, 0.4);
  106. scrollbar-width: none;
  107. -ms-overflow-style: none;
  108. }
  109.  
  110. .main::-webkit-scrollbar {
  111. display: none;
  112. }
  113.  
  114. .entry{
  115. margin: auto;
  116. width: 90%;
  117. min-height: 15%;
  118. background-color: white;
  119. padding: 1%;
  120. border: 2px solid #752d43;
  121. margin-bottom: 2%;
  122. overflow: auto;
  123. }
  124.  
  125. .pic{
  126. float: left;
  127. margin: 1%;
  128. width: 14%;
  129. height: 10%;
  130. border: 2px solid #752d43;
  131. }
  132.  
  133. .pic img{
  134. max-width: 100%;
  135. max-height: 100%;
  136. display: block;
  137. }
  138.  
  139. .entry p{
  140. border: 1px solid #752d43;
  141. margin: 0;
  142. float: right;
  143. width: 80%;
  144. margin-top: 1%;
  145. padding: 0.5%;
  146. }
  147.  
  148. .info{
  149. display: block;
  150. width: 96.7%;
  151. margin: auto;
  152. margin-left: 1%;
  153. padding: 1%;
  154. border: 1px solid #752d43;
  155. font-style: italic;
  156. font-size: 0.6vw;
  157. }
  158.  
  159. b{
  160. background-color: #FCD8DC;
  161. font-weight: lighter;
  162. }
  163.  
  164. @media only screen and (max-width: 640px) {
  165. .cont{
  166. width: 100%;
  167. margin-left: 0;
  168. margin-top: 0;
  169. height: 95vh;
  170. }
  171.  
  172. body{
  173. font-size: 3.5vw;
  174. }
  175.  
  176. .links a{
  177. font-size: 4vw;
  178. }
  179.  
  180. .links h1{
  181. display: none;
  182. }
  183.  
  184. .info{
  185. font-size: 3vw;
  186. width: 96.1%;
  187. }
  188.  
  189. .entry p{
  190. width: 75%;
  191. }
  192.  
  193. .pic{
  194. width: 18%;
  195. }
  196. }
  197. </style>
  198. <body>
  199. <div class="cont">
  200. <div class="links">
  201. <h1>Navigation</h1>
  202. <hr>
  203. <a href="/">Link One</a><br>
  204. <a href="/">Link Two</a><br>
  205. <a href="/">Link Three</a><br>
  206. <a href="/">Link Four</a>
  207. <p>You don't have to put links here, but I think it makes sense.</p>
  208. <hr>
  209. <img src="https://files.catbox.moe/yh23k7.pnj">
  210. </div>
  211. <div class="main">
  212. <!--
  213. Copy and paste this to make new entries!
  214.  
  215. <div class="entry">
  216. <div class="info"><b>INFO HERE (I use date and time)</b></div>
  217. <div class="pic"><img src="IMG SRC HERE"></div>
  218. <p>ENTRY TEXT HERE</p>
  219. </div>
  220. -->
  221.  
  222. <div class="entry">
  223. <div class="info"><b>15th June @ 12.11pm</b></div>
  224. <div class="pic"><img src="https://files.catbox.moe/47u6vv.jpg"></div>
  225. <p>These boxes have a min height so they'll always look cohesive!</p>
  226. </div>
  227.  
  228. <div class="entry">
  229. <div class="info"><b>15th June @ 12.11pm</b></div>
  230. <div class="pic"><img src="https://files.catbox.moe/mczqck.jpg"></div>
  231. <p>But they also resize automatically if you yap more than the min height! The boxes will fit your text no matter the size, but they don't have overflow auto. The container does, so don't worry about scrolling. But if you want the actual blog/status section to scroll, you'll have to add that to the code yourself.</p>
  232. </div>
  233.  
  234. <div class="entry">
  235. <div class="info"><b>15th June @ 12.11pm</b></div>
  236. <div class="pic"><img src="https://files.catbox.moe/q4c3y8.jpg"></div>
  237. <p>Every blog/status entry allows you to change to "profile picture" shown too! You don't have to, you can use the same one... But I find it fun to have more customization!</p>
  238. </div>
  239.  
  240. <div class="entry">
  241. <div class="info"><b>15th June @ 12.11pm</b></div>
  242. <div class="pic"><img src="https://files.catbox.moe/g315qb.jpg"></div>
  243. <p>I've included a copy and paste barebones entry for you at the top of the "main" section. Just copy and paste this for new entries.</p>
  244. </div>
  245.  
  246. <div class="entry">
  247. <div class="info"><b>15th June @ 12.11pm</b></div>
  248. <div class="pic"><img src="https://files.catbox.moe/jivf9s.jpg"></div>
  249. <p>Gonna spam entries now to show you the scrolling!</p>
  250. </div>
  251.  
  252. <div class="entry">
  253. <div class="info"><b>15th June @ 12.11pm</b></div>
  254. <div class="pic"><img src="https://files.catbox.moe/jivf9s.jpg"></div>
  255. <p>Here's an extra long post! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis luctus tortor, at maximus dui. Fusce pretium vitae metus vel molestie. Cras vehicula ipsum felis, eget convallis quam faucibus quis. Nam non magna quam. Praesent arcu risus, semper eu ultricies non, euismod in sem. Vivamus consequat enim quis malesuada aliquam. Praesent accumsan porta ullamcorper. Morbi viverra iaculis elit. Maecenas facilisis neque dui, sit amet convallis ante pellentesque at. Maecenas nibh metus, vestibulum vel porta non, aliquet eu sem. Donec sit amet accumsan tellus, pulvinar dapibus magna. Pellentesque efficitur diam non quam euismod auctor. Morbi pellentesque iaculis eros, ultrices porta turpis. Nunc sed nisl vitae sapien tempor fermentum. Aliquam in felis efficitur, bibendum enim in, ornare est.</p>
  256. </div>
  257. </div>
  258. </div>
  259. </body>
  260. </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!