API tools faq
paste
awhe

"Crush" template

awhe
Jun 15th, 2023 (edited)
752
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.69 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <head>
  3. <meta charset="utf-8" />
  4.  
  5. <!--
  6.  
  7. /// "Crush" template made by awhe @ https://awhe.neocities.org/
  8.  
  9. /// NOTE: Feel free to delete the above credits included in the code. I do not require credit, and I encourage copying from me as much as you'd like. As always: The internet is made for sharing, and so I'm happy to be able to share this with you!
  10.  
  11. /// Originally I was wanting to learn how to use grids in HTML, and then I wanted to make a new gamelog page. And then I thought: welp, might as well share this one too!
  12.  
  13. /// I'm bad at spelling. If you see any spelling errors, no you don't! (I'm sorry, even after checking, I still usually miss something.)
  14.  
  15. ==============================================================
  16.  
  17. -USEFUL INFO-
  18.  
  19. // margin: refers to the space AROUND an element.
  20. // padding: refers to the space INSIDE an element.
  21. // color: refers to TEXT COLOR.
  22. // background: refers to the BACKGROUND COLOR of an element.
  23. // favicon: refers to the tiny image that shows up on your website tab at the top.
  24. // body: refers to the main structure of the site. think of the plain white screen before adding all your code, that's the body.
  25.  
  26. // https://www.w3schools.com/ (This site has all the help you need if you require more assistance.)
  27. // https://codepen.io/ (This site allows live previews of your code, which can be helpful when you're changing parts and still learning.)
  28. // https://awhe.neocities.org/links (Shameless self plug, but I've included many many links here regarding HTML (among other things!) that may prove useful.)
  29. // https://blog.hubspot.com/website/web-safe-html-css-fonts (Displays "web safe fonts" which are fonts that'll adapt to any browser on any device.)
  30. // https://www.w3schools.com/tags/ref_colornames.asp (Shows you the names of colors supported by all browsers!)
  31.  
  32. ==============================================================
  33.  
  34. /// Just a small reminder that:
  35. - You can and you should copy from me if you'd like. I don't care. My url is: https://awhe.neocities.org/
  36. - Credit is always optional, whatever you feel like.
  37. - For a cleaner look, I recommend removing my text additions whenever you feel comfortable to.
  38. - I recommend editing on a live preview, so you can see the immediate effects of any changes you make.
  39. - Have fun! Add, change, edit, etc, whatever you want! The net is yours.
  40.  
  41. -->
  42.  
  43. <title>YOUR SITE TITLE HERE</title>
  44. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  45. <link rel="icon" type="image/x-icon" href="/">
  46. </head>
  47.  
  48. <style>
  49. body{
  50. margin: 0 auto;
  51. font-family: ms gothic, monospace;
  52. text-align: center;
  53. background-image: url('https://files.catbox.moe/wpys0v.jpg');
  54. text-align: center;
  55. }
  56.  
  57. .container { display: grid;
  58. grid-template-columns: 1fr 5fr 1fr;
  59. grid-template-rows: 1fr 1fr 1fr;
  60. gap: 0px 15px;
  61. grid-auto-flow: row;
  62. justify-content: center;
  63. align-content: center;
  64. align-items: center;
  65. grid-template-areas:
  66. "side1 middle side-2"
  67. "side1 middle side-2"
  68. "side1 middle side-2";
  69. }
  70.  
  71. .side1 {
  72. grid-area: side1;
  73. background:white;
  74. border: 3px solid;
  75. border-image-slice: 1;
  76. border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  77. min-height: 65vh;
  78.  
  79. }
  80.  
  81. .middle {
  82. grid-area: middle;
  83. background:white;
  84. border: 3px solid;
  85. border-image-slice: 1;
  86. border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  87. min-height: 65vh;
  88.  
  89. }
  90.  
  91. .side-2 {
  92. grid-area: side-2;
  93. background:white;
  94. border: 3px solid;
  95. border-image-slice: 1;
  96. border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  97. min-height: 65vh;
  98.  
  99. }
  100.  
  101. #cont {
  102. position: absolute;
  103. left: 50%;
  104. transform: translate(-50%);
  105. max-height: 20%;
  106. }
  107.  
  108. h3 {
  109. background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  110. -webkit-background-clip: text;
  111. -webkit-text-fill-color: transparent;
  112. padding: 0px 50px 0px 50px;
  113. }
  114.  
  115. ul {
  116. list-style-type: none;
  117. display: block;
  118. margin: 0;
  119. padding:5px 5px 5px 5px;
  120. }
  121.  
  122. hr{
  123. border-top: 3px double red;
  124. }
  125.  
  126. #hover a {
  127. display: inline-block;
  128. transition: .2s ease;
  129. }
  130.  
  131. #hover a:hover {
  132. transform: translateY(-20%);
  133. }
  134.  
  135. a{
  136. color:red;
  137. }
  138.  
  139. a:hover{
  140. color:rgb(25, 0, 255);
  141. }
  142.  
  143. .Marquee {
  144. padding: 15px;
  145. max-width: 100%
  146. }
  147.  
  148. #float {
  149. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  150. font-size:2em;
  151. font-weight:bold;
  152. color: #fff;
  153. animation-name: floating;
  154. animation-duration: 3s;
  155. animation-iteration-count: infinite;
  156. animation-timing-function: ease-in-out;
  157. }
  158.  
  159. @keyframes floating {
  160. 0% { transform: translate(0, 0px); }
  161. 50% { transform: translate(0, 15px); }
  162. 100% { transform: translate(0, -0px); }
  163. }
  164.  
  165. </style>
  166.  
  167. <body>
  168. <div id="cont">
  169. <div id="float"><h1>SILLY SPACE</h1></div>
  170. <div class="container">
  171. <div class="side1"><h3>LINKS</h3>
  172. <hr>
  173. <ul>
  174. <li id="hover"><img src="/"> <a href="/">LINK 1</a></li>
  175. <li id="hover"><img src="/"> <a href="/">LINK 2</a></li>
  176. <li id="hover"><img src="/"> <a href="/">LINK 3</a></li>
  177. <li id="hover"><img src="/"> <a href="/">LINK 4</a></li>
  178. <li id="hover"><img src="/"> <a href="/">LINK 5</a></li>
  179. </ul>
  180. <hr>
  181. <img src="https://hoarding.neocities.org/img/otherpix/med2.gif">
  182. <hr>
  183. <ul>
  184. <li id="hover"><img src="/"> <a href="/">LINK 6</a></li>
  185. <li id="hover"><img src="/"> <a href="/">LINK 7</a></li>
  186. <li id="hover"><img src="/"> <a href="/">LINK 8</a></li>
  187. <li id="hover"><img src="/"> <a href="/">LINK 9</a></li>
  188. <li id="hover"><img src="/"> <a href="/">LINK 10</a></li>
  189. </ul>
  190. <hr>
  191. <img src="https://hoarding.neocities.org/img/otherpix/s98.png">
  192. </div>
  193.  
  194. <div class="middle"><h3>!!! WELCOME TO MY SITE !!!</h3>
  195. <hr>
  196. <img src="https://hoarding.neocities.org/img/otherpix/m23.gif">
  197. <br>
  198. <br>
  199. welcome to your main content! this is for the big section in the middle where you can put pretty much whatever you want. i tend to go for very mimimalistic aesthetics, so i thought i'd try something more colorful for once! maybe you could put something like general personal info, like your name and age etc.
  200. <br>
  201. <br>
  202. or perhaps even a mini manifesto for your site! the possibilities... are endless... oh! and the graphics included on this site are from my hoard site <a href="https://hoarding.neocities.org/" target="_blank">here</a>!
  203. <hr>
  204. <table>
  205. <tbody>
  206. <tr>
  207. <td style="padding-right:40px;"><img src="https://hoarding.neocities.org/img/otherpix/s97.gif"></td>
  208. <td>some more info can go here, or you can replace this table section with quite literally whatever. maybe add some scroll boxes or something? i guess you could even add more links if you needed.
  209. <br><br>
  210. personally, im gonna use this page for my gamelog B-) so the possibilities really <i>are</i> endless!
  211. </td>
  212. </tr>
  213. </tbody>
  214. </table>
  215. </div>
  216. <div class="side-2"><h3>EXTRA</h3>
  217. <hr>
  218. <marquee class="Marquee" direction="up" scrollamount="7" behavior="scroll">
  219. <center>
  220. <img src="https://hoarding.neocities.org/img/stamps/more/stamp5.png">
  221. <img src="https://hoarding.neocities.org/img/stamps/dau0txn-75af8827-03a6-414b-97f6-0c030442042e.gif">
  222. <img src="https://hoarding.neocities.org/img/stamps/keep_on_gaying_on_stamp.png">
  223. <img src="https://hoarding.neocities.org/img/stamps/tumblr_inline_okvw83bYm51rv0j40_500.gif">
  224. <img src="https://hoarding.neocities.org/img/stamps/tumblr_inline_phwh7uFtj61w0aona_500.gif">
  225. <img src="https://hoarding.neocities.org/img/stamps/tumblr_92c7162cda390bdd95ca49316b42f344_891d3dcb_100.png">
  226. <img src="https://hoarding.neocities.org/img/stamps/more/stamp98.gif">
  227. <img src="https://hoarding.neocities.org/img/stamps/more/stamp74.png">
  228. </center>
  229. </marquee>
  230. <br><br>
  231. </div>
  232. </div>
  233. </div>
  234. </body>
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!