API tools faq
paste
Advertisement
awhe

"Original" template

awhe
Jun 10th, 2023 (edited)
1,385
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.28 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <head>
  3. <meta charset="utf-8" />
  4.  
  5. <!--
  6.  
  7. /// "Original" 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. /// I was inspired to post this "template" due to a friend who was unsure about coding but wanted to make a website, and who also enjoyed the look of my current (10th Jun 2023) index page, so I became resolved to clean the code up and annotate it for further help! I'm not assuming that this code is "good" by any means, but it serves me well, and I hope that you can use it well too! Edit it, change it, destroy it to your hearts content.
  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. font-family:ms gothic;
  51. font-size:18px;
  52. }
  53.  
  54. @font-face {
  55. font-family:'synkopy';
  56. src:url(Synkopy-Regular.otf);
  57. }
  58. /* https://fontesk.com/synkopy-font/ - that's where i downloaded the above font! */
  59. /* IF YOU DON'T WANT TO USE A CUSTOM FONT, FEEL FREE TO DELETE FROM HERE UP TO "@FONT-FACE" AND "P" */
  60.  
  61. p {
  62. font-family:'synkopy';
  63. }
  64.  
  65. #container{
  66. width:800px;
  67. margin:0 auto;
  68. text-align:center;
  69. }
  70.  
  71. #main {
  72. width:500px;
  73. margin:0 auto;
  74. text-align:justify;
  75. border:3px double black;
  76. max-height:40%;
  77. padding:3px 3px 3px 3px;
  78. background: white;
  79. }
  80.  
  81. hr {
  82. border:0;
  83. height:1px;
  84. background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  85. }
  86.  
  87. @keyframes wiggle{
  88. from{
  89. transform:scale(0.98)
  90. }
  91. 50%{
  92. transform:scale(1)
  93. }
  94. to{
  95. transform:scale(0.98)
  96. }
  97. }
  98.  
  99. #textlol {
  100. font-size:50px;
  101. text-decoration: none;
  102. transition: 0.4s;
  103. }
  104.  
  105. #textlol:hover {
  106. letter-spacing:5px;
  107. }
  108.  
  109. #links{
  110. border:1px solid black;
  111. text-align:center;
  112. padding:5px;
  113. width:500px;
  114. margin:0 auto;
  115. background: white;
  116. }
  117.  
  118. #links ul {
  119. display: flex;
  120. padding: 0;
  121. margin: 0;
  122. list-style-type: none;
  123. justify-content: space-evenly;
  124. }
  125.  
  126. a{
  127. color:#AA3039;
  128. }
  129.  
  130. a:hover{
  131. color:#000000;
  132. }
  133.  
  134. </style>
  135.  
  136. <body>
  137.  
  138. <div id="container">
  139.  
  140. <div id="textlol"><p>PAGE TITLE HERE</p></div>
  141.  
  142. <div id="links">
  143. <ul>
  144. <li><img src="/"> <a href="/">LINK 1</a></li>
  145. <li><img src="/"> <a href="/">LINK 2</a></li>
  146. <li><img src="/"> <a href="/">LINK 3</a></li>
  147. <li><img src="/"> <a href="/">LINK 4</a></li>
  148. <li><img src="/"> <a href="/">LINK 5</a></li>
  149. </ul>
  150. </div>
  151.  
  152. <div id="textlol"><h2 style="text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;color: white;font-size: 25px;animation: wiggle 1s ease-in-out infinite alternate">SUBTITLE GOES HERE</h2>
  153. </div>
  154.  
  155. <div id="main">
  156.  
  157. <table>
  158. <tbody>
  159. <tr>
  160. <td style="padding-right:10px;">
  161. <img src="https://hoarding.neocities.org/img/otherpix/med01.gif">
  162. </td>
  163. <td>
  164. PUT SOME SITE INFO HERE !!!! whatever you want honestly, i included a very short snippet of what my site is about, but you can do whatever. maybe... your relevant/important personal info? like your name and age or something... i don't know, this is your site!
  165. <br><br>
  166. no credit to me necessary!
  167. <hr>
  168. </td>
  169. </tr>
  170. </tbody>
  171. </table>
  172.  
  173. <p style="text-align:center;font-family: ms gothic;">this is generally where you main main content will go. let your imagination run wild and free :3 the net is yours.<br>
  174. <center><a href="https://copyheart.org/manifesto/" target="_blank">♡ copying is an act of love. please copy. ♡</a></center><br>
  175. </div>
  176. <br>
  177.  
  178. <div id="links">
  179. <ul>
  180. <li><img src="/"> <a href="/">LINK 6</a></li>
  181. <li><img src="/"> <a href="/">LINK 7</a></li>
  182. <li><img src="/"> <a href="/">LINK 8</a></li>
  183. <li><img src="/"> <a href="/">LINK 9</a></li>
  184. <li><img src="/"> <a href="/">LINK 10</a></li>
  185. </ul>
  186. </div>
  187.  
  188. <p><center><b>crazy silly time</b></center>
  189. </div>
  190.  
  191. </body>
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!