API tools faq
paste
em19am

"PARADISE"

em19am
Apr 16th, 2025
7
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <!--
  5. "PRADISE" TEMPLATE... BY EVILPERSON
  6.  
  7. - I do not claim that this is good code, but I've done my best to make it mobile friendly, and responsive.
  8. - Change and edit whatever you want, feel free to do literally anything.
  9. - No credit necessary. The net is free. The net is yours.
  10. - If you have any questions, message my guestbook.
  11.  
  12. -->
  13.  
  14. <head>
  15. <meta charset="UTF-8">
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  17. <title>Nani The Hell?!</title>
  18. <link rel="icon" type="image/x-icon" href="https://files.catbox.moe/5ofmn2.png">
  19. </head>
  20. <style>
  21. body,html{
  22. background-image: url('https://files.catbox.moe/4lxbqy.jpg');
  23. background-repeat: no-repeat;
  24. background-size: cover;
  25. background-position: 50% 60%;
  26. font-family: Arial, Helvetica, sans-serif;
  27. height: auto;
  28. width: auto;
  29. margin: 0;
  30. padding: 0%;
  31. cursor: url('https://files.catbox.moe/edrioz.cur'), auto;
  32. }
  33.  
  34. @font-face {
  35. font-family: synk;
  36. src: url(Synkopy-Regular.otf);
  37. }
  38. /* download the custom font here: https://fontesk.com/synkopy-font/ */
  39. /* or download a new one. or remove it. whatever. */
  40.  
  41. h1{
  42. color: #FF53FD;
  43. text-shadow: 3px 3px #2A88FC;
  44. font-size: 1.7vw;
  45. text-align: center;
  46. letter-spacing: 5%;
  47. transition: ease-in-out 0.5s;
  48. }
  49.  
  50. h1:hover{
  51. color:#2A88FC;
  52. text-shadow: 3px 3px #FF53FD;
  53. }
  54.  
  55. .container {
  56. display: grid;
  57. grid-template-columns: 0.6fr 2fr 0.6fr;
  58. grid-template-rows: 0.5fr 0.2fr 2.4fr 0.1fr;
  59. grid-auto-columns: 1fr;
  60. gap: 2% 2%;
  61. grid-auto-flow: row;
  62. grid-template-areas:
  63. "header header header"
  64. "nav nav nav"
  65. "sideleft main sideright"
  66. "footer footer footer";
  67. margin: auto;
  68. margin-bottom: 2%;
  69. width: 50%;
  70. height: auto;
  71. padding: 2%;
  72. }
  73.  
  74. .header {
  75. grid-area: header;
  76. }
  77.  
  78. .header img{
  79. margin: auto;
  80. display: block;
  81. width: 50%;
  82. -webkit-animation: pop 2s ease-in-out infinite alternate;
  83. -moz-animation: pop 2s ease-in-out infinite alternate;
  84. animation: pop 2s ease-in-out infinite alternate;
  85. }
  86.  
  87. @keyframes pop {
  88. from { transform:scale(0.95) }
  89. 50% { transform:scale(1) }
  90. to { transform:scale(0.95) }
  91. }
  92.  
  93. .nav{
  94. grid-area: nav;
  95. display: flex;
  96. flex-direction: row;
  97. font-family: synk;
  98. font-size: 2vw;
  99. }
  100.  
  101. .nav div{
  102. margin: auto;
  103. display: block;
  104. background-color: rgba(255, 255, 255, 0.7);
  105. border: 1px solid transparent;
  106. border-radius: 50px;
  107. padding: 1%;
  108. }
  109.  
  110. .nav a{
  111. text-decoration: none;
  112. color: #2A88FC;
  113. transition: ease-in-out 0.5s;
  114. text-shadow: 2px 2px #FF53FD;
  115. }
  116.  
  117. nav a:visited{
  118. color: #2A88FC;
  119. text-shadow: 2px 2px #FF53FD;
  120. }
  121.  
  122. a:hover{
  123. color: #FF53FD;
  124. text-shadow: 2px 2px #2A88FC;
  125. text-transform: uppercase;
  126. cursor: url('https://files.catbox.moe/edrioz.cur'), auto;
  127. }
  128.  
  129. a{
  130. text-decoration: none;
  131. }
  132.  
  133. .sideleft {
  134. grid-area: sideleft;
  135. padding: 5%;
  136. -ms-overflow-style: none;
  137. scrollbar-width: none;
  138. }
  139.  
  140. .sideleft .meow{
  141. background-color: rgba(255, 255, 255, 0.6);
  142. border: 1px solid transparent;
  143. border-radius: 15px;
  144. padding: 5%;
  145. }
  146.  
  147. .xtralinks{
  148. background: #FF53FD;
  149. background: linear-gradient(90deg,rgba(255, 83, 253, 1) 0%, rgba(154, 226, 255, 1) 100%);
  150. padding: 3%;
  151. font-size: 1vw;
  152. border: 1px solid #2A88FC;
  153. border-radius: 15px;
  154. }
  155.  
  156. .xtralinks a{
  157. text-decoration: none;
  158. color: white;
  159. filter: drop-shadow(1px 1px 0 rgb(0, 0, 0)) drop-shadow(-1px 1px 0 rgb(0, 0, 0)) drop-shadow(0 -1px 0 rgb(0, 0, 0)) drop-shadow(1px 0 rgb(0, 0, 0));
  160. transition: ease-in-out 0.3s;
  161. }
  162.  
  163. .xtralinks a:hover{
  164. padding: 3px 13px 3px 13px;
  165. }
  166.  
  167. .pic{
  168. transition-property: transform;
  169. transition-duration: 1s;
  170. border-image: linear-gradient(to right, #FF53FD 0%, #9ae2ff 100%) 1;
  171. border-width: 4px;
  172. border-style: solid;
  173. background-color: rgba(255, 255, 255, 0.5);
  174. margin-bottom: 5%;
  175. }
  176.  
  177. .pic img{
  178. width: 100%;
  179. height: auto;
  180. }
  181.  
  182. .pic img:hover {
  183. animation-name: rotate;
  184. animation-duration: 0.7s;
  185. animation-iteration-count: infinite;
  186. animation-timing-function: linear;
  187. }
  188.  
  189. @keyframes rotate {
  190. from {transform: rotate(0deg);}
  191. to {transform: rotate(360deg);}
  192. }
  193.  
  194. .main {
  195. grid-area: main;
  196. background-color: rgba(255, 255, 255, 0.8);
  197. padding: 5%;
  198. -ms-overflow-style: none;
  199. scrollbar-width: none;
  200. }
  201.  
  202. .sideright {
  203. grid-area: sideright;
  204. padding: 5%;
  205. -ms-overflow-style: none;
  206. scrollbar-width: none;
  207. overflow: auto;
  208. }
  209.  
  210. .footer {
  211. grid-area: footer;
  212. background-color: white;
  213. padding: 1%;
  214. }
  215.  
  216. .box, .inner {
  217. box-sizing: border-box;
  218. }
  219.  
  220. .box {
  221. background-image:url('https://files.catbox.moe/n7itp8.jpg');
  222. background-size:cover;
  223. padding:8%;
  224. width:100%;
  225. border:1px solid #9ae2ff;
  226. border-radius: 10px;
  227. font-size: 0.8vw;
  228. }
  229.  
  230. .inner {
  231. background-color: rgba(255, 255, 255, 0.6);
  232. color: #000;
  233. padding:3%;
  234. border:1px solid #FF53FD;
  235. border-radius: 10px;
  236. overflow:auto;
  237. -ms-overflow-style: none;
  238. scrollbar-width: none;
  239. }
  240.  
  241. .inner p{
  242. text-align: center;
  243. }
  244.  
  245. .sideright textarea{
  246. resize: none;
  247. cursor: url('https://files.catbox.moe/edrioz.cur'), auto;
  248. }
  249.  
  250. @media only screen and (max-width: 640px) {
  251. body{
  252. font-size: 4vw;
  253. }
  254.  
  255. .container {
  256. display: block;
  257. grid-template-rows: 0.1fr 0.1fr 1fr 0.1fr 0.1fr;
  258. grid-auto-columns: 1fr;
  259. gap: 2% 2%;
  260. grid-auto-flow: row;
  261. grid-template-areas:
  262. "header header header"
  263. "nav nav nav"
  264. "main main main"
  265. "sideleft sideleft sideleft"
  266. "sideright sideright sideright";
  267. margin: auto;
  268. width: 90%;
  269. height: auto;
  270. padding: 2%;
  271. }
  272.  
  273. h1{
  274. font-size: 8vw;
  275. }
  276.  
  277. .header img{
  278. margin: auto;
  279. width: 100%;
  280. }
  281.  
  282. .nav{
  283. font-size: 4vw;
  284. }
  285.  
  286. #guy{
  287. display: none;
  288. }
  289.  
  290. .sideleft {
  291. padding: 2%;
  292. }
  293.  
  294. .sideleft .meow{
  295. padding: 2%;
  296. }
  297.  
  298. .xtralinks{
  299. font-size: 5vw;
  300. }
  301.  
  302. .inner p{
  303. font-size: 4vw;
  304. }
  305.  
  306. .pic{
  307. display: none;
  308. }
  309.  
  310. textarea{
  311. display: block;
  312. margin: auto;
  313. }
  314.  
  315. }
  316. </style>
  317. <body>
  318. <div class="container">
  319. <div class="header">
  320. <img src="https://files.catbox.moe/ad9x42.png">
  321. </div>
  322.  
  323. <div class="nav">
  324. <div><a href="/">home</a></div>
  325. <div><a href="/">about</a></div>
  326. <div><a href="/">shrines</a></div>
  327. <div><a href="/">diary</a></div>
  328. <div><a href="/">extra</a></div>
  329. </div>
  330.  
  331. <div class="sideleft">
  332. <div class="pic">
  333. <img src="https://files.catbox.moe/5ofmn2.png">
  334. </div>
  335.  
  336. <div class="meow">
  337. <h1>MORE</h1>
  338. <div class="xtralinks">
  339. <a href="/">link 1</a> <br>
  340. <a href="/">link 2</a> <br>
  341. <a href="/">link 3</a> <br>
  342. <a href="/">link 4</a> <br>
  343. <a href="/">link 5</a> <br>
  344. <a href="/">link 6</a> <br>
  345. <a href="/">link 7</a> <br>
  346. <a href="/">link 8</a> <br>
  347. <a href="/">link 9</a> <br>
  348. <a href="/">link 10</a> <br>
  349. </div>
  350. </div>
  351.  
  352. <br>
  353. <div class="box"><div class="inner">
  354. <h1>clique</h1>
  355. <p>waow hello</p>
  356. </div>
  357. </div>
  358. </div>
  359.  
  360. <div class="main">
  361. <h1 style="text-align: center;">welcome</h1>
  362. <p style="text-align: center;">this is intended to be an iframe website, but you can use it however you want. it's yours now!
  363. <br><br>
  364. check out <a href="https://teppyslayouts.neocities.org/guide">this link</a> to learn how to use iframes if you want!
  365. </p>
  366.  
  367. <p style="text-align: center;">This template is themed after the game <b>Paradise Killer</b> by <b>Kaizen Game Works.</b></p>
  368.  
  369. <p>
  370. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu quam semper, ultrices arcu ac, auctor nisi. Proin leo nulla, tristique eu varius vitae, aliquet non velit. Donec mollis quis leo ut efficitur. Maecenas ut urna sollicitudin, porttitor felis eu, pharetra tortor. Sed massa nisl, pellentesque at venenatis vitae, blandit egestas eros. Vivamus in nisl ligula. Vivamus molestie ultrices ante sit amet tristique. Vivamus in mauris congue, ullamcorper velit sed, rutrum odio. Vestibulum vestibulum tellus in egestas faucibus. Etiam consectetur leo vel convallis luctus. Nullam tempus sem orci, ut aliquam tellus imperdiet sed.
  371. </p>
  372.  
  373. </div>
  374.  
  375. <div class="sideright">
  376. <img style="margin: auto; display: block;" src="https://evilperson.neocities.org/imgs/evilbutton.gif">
  377. <textarea>you can put the code for your button here. i just added my own button for now.</textarea>
  378. <br>
  379. <br>
  380. <div class="box"><div class="inner">
  381. <h1>TITLE</h1>
  382. <p>blah blah blah... maybe you could put counters or something here?</p>
  383. <p>it should autoscroll, but you can obvs remove that function if you'd rather.</p>
  384. </div>
  385. </div>
  386. <br>
  387. <div class="box"><div class="inner">
  388. <h1>music</h1>
  389. <p>musicbox or something?</p>
  390. </div>
  391. </div>
  392. </div>
  393.  
  394. <div class="footer">
  395. <marquee behavior="alternate"><i><b>"Oh red skies, where love dies... 25 you'll stay forever, here in paradise!</b></i></marquee>
  396. </div>
  397. </div>
  398. <img style="top: 40%; left: 15%; position: absolute; width: 10%; height: auto;" src="https://files.catbox.moe/ljgdq4.png" id="guy">
  399. </body>
  400. </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!