API tools faq
paste
Advertisement
sashatheme

FOREST WORLD NEO THEME

sashatheme
Oct 10th, 2022 (edited)
2,521
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.55 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>TITLE HERE</title>
  8. <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  9.  
  10. <!--FONTS-->
  11.  
  12. <style>
  13. @import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro&display=swap');
  14. </style>
  15.  
  16. <style>
  17. @import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro&family=Tangerine:wght@700&display=swap');
  18. </style>
  19.  
  20. <!--BLUR ON HOVER-->
  21. <style>
  22.  
  23. .HOVERME img {
  24. -webkit-filter: blur(0);
  25. filter: blur(0);
  26. }
  27. .HOVERME img:hover {
  28. -webkit-filter: blur(3px);
  29. filter: blur(3px);
  30. -webkit-transition: .3s ease-in-out;
  31. transition: .3s ease-in-out;
  32. }
  33.  
  34. #credit {
  35.  
  36. position:fixed;
  37.  
  38. left:12px;
  39.  
  40. bottom:6px;
  41.  
  42. font-size:14px;
  43. }
  44.  
  45. </style>
  46.  
  47. <!--PULSATE-->
  48. <style>
  49. .pulsate {
  50. -webkit-animation: pulsate 3s ease-out;
  51. -webkit-animation-iteration-count: infinite;
  52. opacity: 0.5;
  53. }
  54. @-webkit-keyframes pulsate {
  55. 0% {
  56. opacity: 0.5;
  57. }
  58. 50% {
  59. opacity: 1.0;
  60. }
  61. 100% {
  62. opacity: 0.5;
  63. }
  64. }
  65.  
  66. </style>
  67.  
  68. <!--SCROLLBAR-->
  69. <style>
  70. /* width */
  71. ::-webkit-scrollbar {
  72. width: 1px;
  73. height: 1px;
  74. }
  75.  
  76.  
  77. /* Track */
  78. ::-webkit-scrollbar-track {
  79. border-radius: 1px;
  80. }
  81.  
  82. /* Handle */
  83. ::-webkit-scrollbar-thumb {
  84. background: #000;
  85. border-radius: 1px;
  86. }
  87. </style>
  88.  
  89. <!--ELEMENTS-->
  90. <style>
  91.  
  92. .wrapper {
  93.  
  94. width: 900px;
  95.  
  96. }
  97.  
  98. .divcode {
  99. max-width: 100%;
  100. height: 90px;
  101. overflow: scroll;
  102. position: auto;
  103. word-wrap: break-word;
  104. }
  105.  
  106. .imgTAROT {
  107. max-width: 100%;
  108. position: absolute;
  109. z-index: 12;
  110. }
  111.  
  112. button {
  113. background-color: #fff;
  114. border: solid;
  115. border-color: #000;
  116. border-width: 2px;
  117. border-radius: 5px;
  118. color: #000;
  119. padding: 4px 4px;
  120. text-align: center;
  121. display: inline-block;
  122. font-size: 12px;
  123. font-family: 'Aldrich', sans-serif;
  124. }
  125.  
  126. body {
  127. width: 800px;
  128. margin-top: 30px;
  129. position: relative;
  130. margin-left: auto;
  131. margin-right: auto;
  132. background-color: #fff;
  133. color: #0d1508;
  134. background-image: url('BACKGROUND IMAGE URL HERE');
  135. background-size: cover;
  136. }
  137.  
  138. hr {
  139. border-color: #000;
  140. width: 100%;
  141. border-style: dotted;
  142.  
  143. }
  144.  
  145. .marqueebanner {
  146. width: 852px;
  147. position: relative;
  148. z-index: 6;
  149. padding: 10px;
  150. float: left;
  151.  
  152. }
  153.  
  154. tbody {
  155. display: table-row-group;
  156. vertical-align: middle;
  157. border-color: #000;
  158. }
  159.  
  160. .tablemain {
  161. margin-left: 40px;
  162. margin-right: auto;
  163. display: block;
  164. border-spacing: 0px;
  165. border-collapse: collapse;
  166. width: 500px;
  167. float: left;
  168. margin-top: 80px;
  169. }
  170.  
  171. .tablemain td {
  172. vertical-align: top;
  173. border: none;
  174. padding: 0px;
  175. position: relative;
  176. margin-left: auto;
  177. margin-right: auto;
  178. display: block;
  179. border-spacing: 0px;
  180. border-collapse: collapse;
  181. display: block;
  182. }
  183.  
  184. .tablemain tr {
  185. vertical-align: top;
  186. border: none;
  187. padding: 0px;
  188. position: relative;
  189. margin-left: auto;
  190. margin-right: auto;
  191. display: block;
  192. border-spacing: 0px;
  193. border-collapse: collapse;
  194. display: block;
  195. }
  196.  
  197. .tableside {
  198. margin-left: auto;
  199. margin-right: auto;
  200. display: block;
  201. border-spacing: 0px;
  202. border-collapse: collapse;
  203. width: 150px;
  204. float: left;
  205. margin-top: 80px;
  206. }
  207.  
  208. .tableside td {
  209. vertical-align: top;
  210. border: none;
  211. padding: 0px;
  212. position: relative;
  213. margin-left: auto;
  214. margin-right: auto;
  215. display: block;
  216. border-spacing: 0px;
  217. border-collapse: collapse;
  218. display: block;
  219. }
  220.  
  221. .tableside tr {
  222. vertical-align: top;
  223. border: none;
  224. padding: 0px;
  225. position: relative;
  226. margin-left: auto;
  227. margin-right: auto;
  228. display: block;
  229. border-spacing: 0px;
  230. border-collapse: collapse;
  231. display: block;
  232. }
  233.  
  234. .thefool {
  235. margin-left: auto;
  236. margin-right: auto;
  237. background-color: #fff;
  238. border-style: outset;
  239. border-width: 2px;
  240. border-color: #000;
  241. border-radius: 5px;
  242. padding: 10px;
  243. width: 150px;
  244. margin: 10px 10px 10px 0px;
  245. }
  246.  
  247. .themagician {
  248. margin-left: auto;
  249. margin-right: auto;
  250. background-color: #fff;
  251. border-style: outset;
  252. border-width: 2px;
  253. border-color: #000;
  254. border-radius: 5px;
  255. padding: 10px;
  256. width: 150px;
  257. margin: 10px 10px 10px 0px;
  258. }
  259.  
  260. .thehighpriestess {
  261. width: 625px;
  262. max-height: 298px;
  263. overflow: auto;
  264. background-color: #fff;
  265. border-style: outset;
  266. border-width: 2px;
  267. border-color: #000;
  268. border-radius: 5px;
  269. padding: 10px;
  270. margin: 10px 10px 10px 0px;
  271. }
  272.  
  273. .theempress {
  274. width: 685px;
  275. background-color: #fff;
  276. border-style: outset;
  277. border-width: 2px;
  278. border-color: #000;
  279. border-radius: 5px;
  280. padding: 10px;
  281. margin: 10px 10px 10px 0px;
  282. }
  283.  
  284. .thehierophant {
  285. width: 873px;
  286. background-color: #fff;
  287. border-style: outset;
  288. border-color: #000;
  289. border-radius: 5px;
  290. padding: 10px;
  291. margin: 0px; 0px; 0px; 0px;
  292. position: relative;
  293. float: left;
  294. align: center;
  295. }
  296.  
  297. </style>
  298.  
  299. </head>
  300.  
  301. <body>
  302. <div align="center">
  303. <div class="wrapper">
  304.  
  305. <img src="FADING IMAGE URL HERE" style="position: absolute; z-index: 20; margin-top: 9px; margin-left: -425px;" align="center" class="pulsate"> <!--ADJUST WHERE IT IS VIA THE MARGINS-->
  306.  
  307. <img src="HANGING IMAGE URL HERE" style="position: absolute; z-index: 20; width: 200px; margin-top: -65px; margin-left: 400px;" align="center"> <!--ADJUST WHERE IT IS VIA THE MARGINS-->
  308.  
  309. <div class="HOVERME">
  310.  
  311. </div>
  312.  
  313. <table class="tableside">
  314.  
  315. <tbody>
  316.  
  317. <tr>
  318.  
  319. <td>
  320.  
  321. <div class="thefool" align="center" style="font-family: 'Aldrich', sans-serif;">
  322.  
  323. <img src="ICON IMAGE URL HERE"
  324. style="max-width: 100%;">
  325.  
  326. </div>
  327.  
  328. <div class="themagician" align="center" style="font-family: 'Source Serif Pro', serif; font-size: 12px;">
  329.  
  330. <form>
  331.  
  332. <select name=select size="1"
  333. style="background-color: #fff;
  334. font size: 12pt;
  335. font-family:'VT323', monospace;
  336. color: #000;
  337. width: 150px;
  338. word-wrap: break-word;"
  339. onchange="location.href=
  340. (form.select.options[form.select.selectedIndex].value)">
  341.  
  342. <option value="#">NAVIGATION TITLE</option>
  343. <option value="LINK HERE">ADD MORE OPTIONS HERE</option> <!--JUST COPY + PASTE FULL OPTION VALUE SECTION TO ADD MORE-->
  344.  
  345. </select>
  346.  
  347. </form>
  348.  
  349. </div>
  350.  
  351. <div class="thefool" align="center" style="font-family: 'Source Serif Pro', serif;">
  352.  
  353. <div class="divcode" style="font-size: 12px; font-family: 'Source Serif Pro', serif; text-align: justify;">
  354.  
  355. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  356.  
  357. </div>
  358.  
  359. </div>
  360.  
  361. <div class="themagician" align="center" style="font-family: 'Source Serif Pro', serif; font-size: 12px;">
  362.  
  363. <img src="UPDATES BOX IMAGE URL" align="center"><br>
  364.  
  365. <p align="justify" style="overflow: auto;
  366. height: 150px;
  367. padding: 4px;">
  368.  
  369. <b>4.12.2022:</b> Colors update, now white and blue.<br>
  370. <b>4.11.2022:</b> Added diary page.<br>
  371. <b>4.10.2022:</b> Theme and coding overhaul, added 'cool sites' and 'adopts' pages.<br>
  372. <b>4.8.2022:</b> Finished music page.<br>
  373. <b>4.7.2022:</b> Theme and coding overhaul. (Again...)<br>
  374. <b>4.5.2022:</b> Added taglist page.<br>
  375. <b>4.4.2022:</b> Added mobile view for all pages.<br>
  376. <b>4.3.2022:</b> Theme and coding overhaul.<br>
  377. <b>4.2.2022:</b> Improved mobile view, added more songs to soundtrack section.<br>
  378. <b>3.31.2022:</b> Added gallery and music containers, updated theme.<br>
  379. <b>3.30.2022:</b> Neocities first coded.</p>
  380.  
  381. </div>
  382.  
  383. <div class="themagician" align="center" style="font-family: 'Source Serif Pro', serif; font-size: 12px;">
  384.  
  385.  
  386. <audio id="music" src="SONG MP3 LINK HERE"></audio>
  387.  
  388. <button style="font-family: 'VT323', monospace;"
  389.  
  390. onclick="document.getElementById('music').play()">
  391.  
  392. <marquee scrolldelay="120">
  393.  
  394. <b>SONG TITLE</b> by SONG ARTIST
  395.  
  396. </marquee>
  397.  
  398. </button>
  399.  
  400. </div>
  401.  
  402. </td>
  403.  
  404. <td>
  405.  
  406. </tbody>
  407.  
  408. </table>
  409.  
  410. <table class="tablemain">
  411.  
  412. <tbody>
  413.  
  414. <tr>
  415.  
  416. <td>
  417.  
  418. <div class="thehighpriestess" align="justify" style="font-family: 'Source Serif Pro', serif; font-size: 18px;">
  419.  
  420. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
  421.  
  422. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
  423.  
  424. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  425.  
  426. </div>
  427.  
  428. <div class="thehighpriestess" align="justify" style="font-family: 'Source Serif Pro', serif; font-size: 18px;">
  429.  
  430.  
  431. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
  432.  
  433. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
  434.  
  435. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  436.  
  437. </div>
  438.  
  439. <marquee scrolldelay="120" behavior="alternate">
  440.  
  441. <img src="BOUNCING MARQUEE IMAGE URL HERE" style="height: 50px;">
  442.  
  443. </marquee>
  444.  
  445. </td>
  446.  
  447. </tr>
  448.  
  449. </tbody>
  450.  
  451. </table>
  452.  
  453. </div>
  454.  
  455. </div>
  456. <div id="credit">
  457.  
  458. <a href="https://cod.tumblr.com/" target="_blank" title="CODED BY JOYBOY">🦩</a>
  459.  
  460. </div>
  461. </body>
  462. </html>
  463.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!