API tools faq
paste
deoxysacid

BUTCHERS VEIN

deoxysacid
Aug 19th, 2025
197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.58 KB | None | 0 0
raw download clone embed print report
  1. <!-- BUTCHER'S VEIN - neocities template by lorekeeping -->
  2.  
  3. <style>
  4. html {
  5. height: 100%;
  6. width: 100%;
  7. font-family:arial;
  8. background-color: #fff10c;
  9. --accentcolor:#fe383a;
  10. --accentcolordark: #940101;
  11. --accentcolor2: #fff10c;
  12. --bordercolor:black;
  13. --bgcolor:whitesmoke;
  14. --gapsize: 10px;
  15. }
  16.  
  17. @font-face {
  18. font-family: skateboarding;
  19. src: url(https://file.garden/ZZ2PUl9MPilKgIvB/The%20Skateboarding.ttf);
  20. }
  21.  
  22. .maindiv {
  23. width:700px;
  24. margin:auto;
  25. }
  26.  
  27. .header {
  28. box-shadow: 6px 6px 0px -1px var(--accentcolor);
  29. border:2px solid var(--accentcolordark);
  30. outline:2px solid var(--bordercolor);
  31. height:130px;
  32. background-color:var(--bgcolor);
  33. background-image:url(https://file.garden/ZZ2PUl9MPilKgIvB/xiyi.png);
  34. background-size:cover;
  35. background-position:center;
  36. margin-bottom:var(--gapsize);
  37. }
  38.  
  39. .bar {
  40. box-shadow: 6px 6px 0px -1px var(--accentcolor);
  41. border:2px solid var(--accentcolordark);
  42. outline:2px solid var(--bordercolor);
  43. background-color:var(--bgcolor);
  44. margin-bottom: var(--gapsize);
  45. text-align:center;
  46. padding-top:7px;
  47. padding-bottom:7px;
  48. }
  49.  
  50. h3 {
  51. margin:0px;
  52. }
  53.  
  54. p {
  55. margin:0px;
  56. }
  57.  
  58. h1 {
  59. font-family:skateboarding;
  60. font-size:100px;
  61. margin:0px;
  62. margin-left:10px;
  63. position:relative;
  64. top:-10px;
  65. filter: drop-shadow(3px 4px 0px var(--accentcolor));
  66. }
  67.  
  68. .row {
  69. display:flex;
  70. gap:var(--gapsize);
  71. height:300px;
  72. }
  73.  
  74. .navigation {
  75. box-shadow: 6px 6px 0px -1px var(--accentcolor);
  76. border:2px solid var(--accentcolordark);
  77. outline:2px solid var(--bordercolor);
  78. background-color:var(--bgcolor);
  79. text-align:center;
  80. box-sizing: border-box;
  81. width:25%;
  82. height:300px;
  83. }
  84.  
  85. .titlebar {
  86. background-color: var(--accentcolor);
  87. border-bottom:2px solid var(--accentcolordark);
  88. padding:4px;
  89. }
  90.  
  91. .buttonholder {
  92. padding-left:10px;
  93. padding-right:10px;
  94. overflow-y:auto;
  95. height:263px;
  96. }
  97.  
  98. .navigationbutton {
  99. margin:5px;
  100. padding:5px;
  101. border:2px solid var(--bordercolor);
  102. background-color: var(--accentcolor2);
  103. }
  104.  
  105. h4 {
  106. margin:0px;
  107. }
  108.  
  109. a {
  110. color: var(--accentcolor);
  111. }
  112.  
  113. .box1 {
  114. box-shadow: 6px 6px 0px -1px var(--accentcolor);
  115. border:2px solid var(--accentcolordark);
  116. outline:2px solid var(--bordercolor);
  117. background-color:var(--bgcolor);
  118. box-sizing: border-box;
  119. padding:10px;
  120. width:100%;
  121. height:70%;
  122. overflow-y:auto;
  123. }
  124.  
  125. .bigtext {
  126. font-size:large;
  127. font-weight:bold;
  128. }
  129.  
  130. strong {
  131. color:var(--accentcolordark);
  132. }
  133.  
  134. .box2 {
  135. box-shadow: 6px 6px 0px -1px var(--accentcolor);
  136. border:2px solid var(--accentcolordark);
  137. outline:2px solid var(--bordercolor);
  138. background-color:var(--bgcolor);
  139. box-sizing: border-box;
  140. padding:10px;
  141. width:100%;
  142. height:26.65%;
  143. }
  144.  
  145. .column {
  146. display:flex;
  147. flex-wrap:wrap;
  148. gap:10px;
  149. }
  150.  
  151. .footer {
  152. box-shadow: 6px 6px 0px -1px var(--accentcolor);
  153. border:2px solid var(--accentcolordark);
  154. outline:2px solid var(--bordercolor);
  155. background-color:var(--bgcolor);
  156. margin-top:var(--gapsize);
  157. box-sizing: border-box;
  158. padding:10px;
  159. width:100%;
  160. text-align: center;
  161. }
  162. </style>
  163.  
  164. <!DOCTYPE html>
  165. <html>
  166.  
  167. <head>
  168. <meta charset="utf-8">
  169. <meta name="viewport" content="width=device-width">
  170. <title>BUTCHER'S VEIN</title>
  171. </head>
  172.  
  173. <body>
  174. <div class="maindiv">
  175. <div class="header">
  176. <h1>SITE TITLE</h1>
  177. </div>
  178. <!-- you can put announcements here, or scrolling text by putting the text inbetween the <marquee> tag-->
  179. <div class="bar">
  180. <h3>text here... maybe an announcement or a subtitle?</h3>
  181. </div>
  182. <div class="row">
  183. <div class="navigation">
  184. <div class="titlebar">
  185. <h3>NAVIGATION</h3>
  186. </div>
  187. <div class="buttonholder">
  188. <!--you can add however many links you like. you can remove any links youre not using, too.-->
  189. <div class="navigationbutton">
  190. <h4><a href="link" style="color:var(--bordercolor);">LINK 1</a></h4>
  191. </div>
  192. <div class="navigationbutton">
  193. <h4><a href="link" style="color:var(--bordercolor);">LINK 2</a></h4>
  194. </div>
  195. <div class="navigationbutton">
  196. <h4><a href="link" style="color:var(--bordercolor);">LINK 3</a></h4>
  197. </div>
  198. <div class="navigationbutton">
  199. <h4><a href="link" style="color:var(--bordercolor);">LINK 4</a></h4>
  200. </div>
  201. <div class="navigationbutton">
  202. <h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
  203. </div>
  204. <div class="navigationbutton">
  205. <h4><a href="link" style="color:var(--bordercolor);">ADD HOWEVER MANY LINKS YOU WANT! THIS BOX SCROLLS</a></h4>
  206. </div>
  207. </div>
  208. </div>
  209. <div class="column" style="width:75%">
  210. <div class="box1">
  211. <span class="bigtext">this text is bigger. and its even bold!</span> put anything you want here. talk about your site if you want. i dont know. im not your mom.
  212. <br><strong>bold text looks like this.</strong> <a href="link">links look like this.</a>
  213. <br>this box scrolls, by the way.
  214. </div>
  215. <div class="box2">
  216. <!-- remove the <marquee> tag to stop the scrolling -->
  217. <marquee behavior="alternate">
  218. <img src="https://file.garden/ZZ2PUl9MPilKgIvB/85dae5a2.jpg"/>
  219. <img src="https://file.garden/ZZ2PUl9MPilKgIvB/3e9a21b1.png"/>
  220. <img src="https://file.garden/ZZ2PUl9MPilKgIvB/c4b47f26.png"/>
  221. <img src="https://file.garden/ZZ2PUl9MPilKgIvB/cb1f10c3.jpg"/>
  222. <img src="https://file.garden/ZZ2PUl9MPilKgIvB/fb1ba12e.png"/>
  223. <img src="https://file.garden/ZZ2PUl9MPilKgIvB/a7c2b901.gif"/>
  224. </marquee>
  225. </div>
  226. </div>
  227. </div>
  228. <div class="footer">
  229. <!-- DONT REMOVE CREDIT! well, you can if you put it somewhere else- it doesnt have to be on the main page, just somewhere somewhat obvious. dont remove art/inspiration credit if using the template without any changes. if you change the header, you can remove it.-->
  230. <p>template by <a href="https://lorekeeping.neocities.org/">lorekeeping</a> - inspired by <a href="https://youtu.be/vjBFftpQxxM?list=RDMM">BUTCHER VANITY</a></p>
  231. </div>
  232. </div>
  233. </body>
  234.  
  235. </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!