API tools faq
paste
recarmdra

Treasure Garden Template

recarmdra
Sep 15th, 2025 (edited)
5
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6.  
  7. <style>
  8.  
  9. /* "TREASURE GARDEN V.1.0" Template, send any questions to [email protected]! Powered by hope for the future. */
  10.  
  11. /* Style the .grid here. Changes made here reflect across all elements within the .grid. */
  12. .grid {
  13. display: grid;
  14. grid-template-columns: repeat(4, 1fr);
  15. grid-template-rows: repeat(2, 1fr);
  16. grid-column-gap: 10px;
  17. grid-row-gap: 10px;
  18. max-width: 1200px;
  19. font-family: "ms ui gothic";
  20. margin-top: 4.3%
  21. }
  22.  
  23. /* Style the .about grid here. */
  24. .about {
  25. grid-area: 1 / 1 / 3 / 2;
  26. background-color: #F4EBFA;
  27. border: 1px solid #9646CF;
  28. text-align: left;
  29. }
  30.  
  31. /* Style <ul> here. You can change the bullet point. */
  32. ul {
  33. padding: 0px;
  34. margin: 0px;
  35. margin-left: 25px;
  36. margin-right: 10px;
  37. list-style-type:"»"
  38. }
  39.  
  40. /* Style the .likes grid here. */
  41. .likes {
  42. grid-area: 1 / 2 / 2 / 3;
  43. background-color: #F4EBFA;
  44. border: 1px solid #9646CF;
  45. text-align: left;
  46. }
  47.  
  48. /* Style the .dislikes grid here. */
  49. .dislikes {
  50. grid-area: 1 / 3 / 2 / 4;
  51. background-color: #F4EBFA;
  52. border: 1px solid #9646CF;
  53. text-align: left;
  54. }
  55.  
  56. /* Style the wide .main grid here. */
  57. .main {
  58. grid-area: 2 / 2 / 3 / 4;
  59. background-color: #F4EBFA;
  60. border: 1px solid #9646CF;
  61. }
  62.  
  63. /* Style the tab */
  64. .tab {
  65. overflow: hidden;
  66. background-color: #79EDBB;
  67. }
  68.  
  69. /* Style the buttons inside the tab */
  70. .tab button {
  71. float: left;
  72. border: none;
  73. outline: none;
  74. cursor: pointer;
  75. padding: 14px 16px;
  76. transition: 0.3s;
  77. font-family:"ms gothic";
  78. font-weight: bold;
  79. text-align: left;
  80. margin: 0px;
  81. padding: 5px;
  82. color: white;
  83. background-color: #47E6A1;
  84. }
  85.  
  86. /* Change background color of buttons on hover */
  87. .tab button:hover {
  88. background-color: #98F1CA;
  89. }
  90.  
  91. /* Create an active/current tablink class */
  92. .tab button.active {
  93. background-color: #1FE08C;
  94. }
  95.  
  96. /* Style the tab content */
  97. .tabcontent {
  98. text-align: left;
  99. padding: 10px;
  100. padding-top: 0px;
  101. max-height: 300px;
  102. overflow-y: scroll;
  103. scrollbar-color: #1FE08C #79EDBB;
  104. scrollbar-width: thin;
  105. }
  106.  
  107. /* Style the .links grid here. */
  108. .links {
  109. grid-area: 1 / 4 / 3 / 5;
  110. background-color: #F4EBFA;
  111. border: 1px solid #9646CF;
  112. text-align: left;
  113. }
  114.  
  115.  
  116. /* Changes the text that's placed on top of the header
  117. "text-shadow" is used to make a border, you are able to change the color.
  118. You may have to change "top" and "left" depending on what font you're using. */
  119. .title {
  120. color: #79EDBB;
  121. font-family: "Graffiti";
  122. font-size: 100px;
  123. transform: rotate(-0.03turn);
  124. text-align: left;
  125. position: absolute;
  126. left: 280px;
  127. top: 20px;
  128. text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
  129. 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
  130. }
  131.  
  132. /* This is the div that is used for the .grid titles, you can change the gradient here. */
  133. .info {
  134. margin: 0px;
  135. padding: 0px;
  136. background: linear-gradient(180deg,rgba(150, 70, 207, 1) 45%, rgba(235, 189, 255, 1) 90%);
  137. }
  138.  
  139.  
  140. /* This is what gives the icon a rounded look. The animation that plays when you stop hovering over it is also here. */
  141. .icon {
  142. border-radius: 150px;
  143. transition: transform .7s ease-in-out;
  144. }
  145.  
  146. /* This is what makes the icon spin when hovering over it. */
  147. .icon:hover {
  148. transform: rotate(360deg);
  149. }
  150.  
  151. /* Small div that displays below the main div. */
  152. .bottom {
  153. background-color: #9646CF;
  154. max-width: 200px;
  155. color: white;
  156. text-align: center;
  157. border: 1px solid;
  158. border-color: white;
  159. font-family: "ms ui gothic";
  160. font-size:14px;
  161.  
  162. }
  163.  
  164.  
  165. /* This media query is responsible for making the website responsive. */
  166. @media only screen and (max-width: 600px) {
  167. .about {grid-area: 1 / span 5;}
  168. .likes {grid-area: 2 / span 5;}
  169. .dislikes {grid-area: 3 / span 5;}
  170. .main {grid-area: 4 / span 5;}
  171. .links {grid-area: 5 / span 5;}
  172. }
  173.  
  174. /* This removes the .title when on mobile devices. */
  175. @media (max-width: 600px) {
  176. .title {
  177. display: none;
  178. }
  179. }
  180.  
  181.  
  182. /* Change background here. */
  183. body {background-image: url('BACKGROUND URL');
  184. background-repeat: no-repeat;
  185. background-attachment: fixed;
  186. background-size: cover;
  187. }
  188.  
  189. /* You can add custom fonts here.
  190. "font-family" is the name you denote to your font, it can be anything, it doesn't have to match the file name.
  191. I recommend placing the font in a font sub-folder on your NeoCities dashboard. */
  192. @font-face {
  193. font-family: "CUSTOM FONT";
  194. src: url(CUSTOM FONT URL);
  195. }
  196.  
  197.  
  198. /* Style h1 here */
  199. h1 {
  200. font-size:25px;
  201. font-family:"ms gothic";
  202. margin: 0px;
  203. padding: 0px;
  204. color: white;
  205. }
  206.  
  207. /* Style h2 here */
  208. h2 {
  209. font-size:18px;
  210. font-family:"ms gothic";
  211. padding-left: 20px;
  212. }
  213.  
  214. /* You can change the look of links here. */
  215. a:link {
  216. color: #79EDBB;
  217. background-color: transparent;
  218. text-decoration: underline;
  219. font-weight: bold;
  220. }
  221.  
  222. /* Changes the look of visited links */
  223. a:visited {
  224. color: #79EDBB;
  225. background-color: transparent;
  226. text-decoration: underline;
  227. font-weight: bold;
  228. }
  229.  
  230.  
  231.  
  232.  
  233. </style>
  234. <meta charset="UTF-8">
  235. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  236. <title>TITLE</title>
  237. <link rel="icon" type="image/x-icon" href="FAVICON URL">
  238. </head>
  239.  
  240. <body>
  241.  
  242.  
  243. <center>
  244.  
  245.  
  246. <div class="title">TITLE</div>
  247.  
  248. <div class="grid">
  249.  
  250. <div class="about">
  251.  
  252. <div class="info"> <center> <h1>TITLE</h1> </center> </div>
  253.  
  254. <center>
  255.  
  256. <img class="icon" src="SPINNING IMAGE URL" style="max-width: 95%; padding-top: 8px;">
  257. <br>
  258.  
  259.  
  260. </center>
  261.  
  262.  
  263. </div>
  264.  
  265.  
  266.  
  267. <div class="likes">
  268. <div class="info"> <center><h1>TITLE</h1></center> </div>
  269.  
  270. <div class="container">
  271.  
  272. </div>
  273.  
  274. </div>
  275.  
  276.  
  277.  
  278. <div class="dislikes">
  279. <div class="info"> <center><h1>TITLE</h1></center> </div>
  280.  
  281. <div class="container">
  282.  
  283. </div>
  284.  
  285. </div>
  286.  
  287.  
  288.  
  289. <div class="main">
  290. <div class="info"> <h1>TITLE</h1> </div>
  291. <div class="tab">
  292. <button class="tablinks" onclick="openTab(event, 'Videogames')" id="defaultOpen">TAB 1</button> <!-- ATTENTION: If you rename these, don't forget to rename them everywhere else! -->
  293. <button class="tablinks" onclick="openTab(event, 'Animanga')">TAB 2</button>
  294. <button class="tablinks" onclick="openTab(event, 'Music')">TAB 3</button>
  295. <button class="tablinks" onclick="openTab(event, 'Other')">TAB 4</button>
  296. </div>
  297.  
  298. <div id="Videogames" class="tabcontent">
  299. Content.
  300. </div>
  301.  
  302. <div id="Animanga" class="tabcontent">
  303. Content.
  304. </div>
  305.  
  306. <div id="Music" class="tabcontent">
  307. Content.
  308. </div>
  309.  
  310. <div id="Other" class="tabcontent">
  311. Content.
  312. </div>
  313.  
  314. <script>
  315. function openTab(evt, interestTab) {
  316. var i, tabcontent, tablinks;
  317. tabcontent = document.getElementsByClassName("tabcontent");
  318. for (i = 0; i < tabcontent.length; i++) {
  319. tabcontent[i].style.display = "none";
  320. }
  321. tablinks = document.getElementsByClassName("tablinks");
  322. for (i = 0; i < tablinks.length; i++) {
  323. tablinks[i].className = tablinks[i].className.replace(" active", "");
  324. }
  325. document.getElementById(interestTab).style.display = "block";
  326. evt.currentTarget.className += " active";
  327. }
  328.  
  329. // Get the element with id="defaultOpen" and click on it
  330. document.getElementById("defaultOpen").click();
  331.  
  332. </script>
  333. </div>
  334.  
  335.  
  336.  
  337. <div class="links">
  338. <div class="info"> <center> <h1>TITLE</h1> </center> </div>
  339.  
  340. </div>
  341.  
  342.  
  343.  
  344. </div>
  345.  
  346. <br>
  347.  
  348. <div class="bottom">
  349. Template by <a href="https://recarmdra.neocities.org/">recarmdra</a>.
  350. </div>
  351.  
  352. </center>
  353.  
  354.  
  355. </body>
  356. </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!