API tools faq
paste
awhe

"LAIN" template

awhe
Aug 26th, 2023
658
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.82 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4.  
  5. <!--
  6.  
  7. /// "LAIN" 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 remade my index code on a whim in two hours and this is the (heavily stripped down and cleaned) result! Things to note are: Mobile customization is already implemented, as well as the code looking the exact same on both Chrome and Firefox! Zooming in or out doesn't break anything, and you can generally include a lot more in this template versus my other ones.
  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>LET'S ALL LOVE LAIN!</title>
  44. <!-- remove the text "LET'S ALL LOVE LAIN" and replace it with whatever you want to title your site as! it shows up on the tab of your site. -->
  45. <meta name="viewport" content="width=device-width,initial-scale=1">
  46. <link rel="icon" type="image/x-icon" href="/">
  47. <!-- remove the "/" here with a url link to your image of choice that you'd like to use as your website "favicon". -->
  48. </head>
  49.  
  50. <style>
  51. ::-webkit-scrollbar {
  52. width: 15px;
  53. height: 15px;
  54. }
  55. /* this is for the custom scrollbar. */
  56.  
  57. ::-webkit-scrollbar-thumb {
  58. border: 1px solid #000;
  59. }
  60. /* this is for the custom scrollbar. */
  61.  
  62. ::-webkit-scrollbar-button:start:decrement,
  63. ::-webkit-scrollbar-button:end:increment {
  64. height: 15px;
  65. width: 15px;
  66. display: block;
  67. background-repeat: no-repeat;
  68. border: 1px solid #000;
  69. }
  70. /* this is for the custom scrollbar. */
  71.  
  72. ::-webkit-scrollbar-button:vertical:decrement {
  73. background-image: url(data:image/png;base64,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);
  74. }
  75. /* this is for the custom scrollbar. no i don't know why it's so long. */
  76.  
  77. ::-webkit-scrollbar-button:vertical:increment {
  78. background-image: url(data:image/png;base64,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);
  79. }
  80. /* this is for the custom scrollbar. no i don't know why it's so long. */
  81.  
  82. body {
  83. text-align: left;
  84. font-family: ms gothic, monospace;
  85. background: rgb(255,255,255);
  86. background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(201,201,209,1) 35%, rgba(165,170,171,1) 100%);
  87. font-size: 2vh;
  88. margin:auto;
  89. width:60%;
  90. font-size: 2vh;
  91. }
  92.  
  93. hr {
  94. border: 0;
  95. height: 1px;
  96. background-image: linear-gradient(to right, white, #696b6d, white);
  97. }
  98. /* this is for the horizontal line, you can delete it if you don't care or change the middle hex code for a different colour. */
  99.  
  100. a{
  101. color: #0000EE;
  102. text-decoration: none;
  103. }
  104.  
  105. a:hover{
  106. color: #a2a2ff;
  107. text-decoration: none;
  108. }
  109.  
  110. p{
  111. padding:3%;
  112. }
  113.  
  114. ::-moz-selection {
  115. color: #ffffff;
  116. background: #558AC0;
  117. }
  118. /* edits how "selectng" text looks. */
  119.  
  120. ::selection {
  121. color: #ffffff;
  122. background: #558AC0;
  123. }
  124. /* edits how "selectng" text looks. */
  125.  
  126. @font-face {
  127. font-family:cookies;
  128. src:url(https://dl.dropbox.com/s/znu6dtos9e6mkcj/Cookies%203.ttf);
  129. }
  130. /* this is for the custom font used for <span> below! you can change it to another custom font, or remove it completely if you don't wanna use it. */
  131.  
  132. span {
  133. font-family:cookies;
  134. font-size: 10vh;
  135. display: table;
  136. margin: 0 auto;
  137. -webkit-background-clip: text;
  138. -webkit-text-stroke-width: 3px;
  139. -webkit-text-stroke-color: white;
  140. /* the above two gives the span text an outline/stroke of 3px and white! */
  141. color: #d7d8d8;
  142. letter-spacing: 25px;
  143. /* spaces the letters further apart. */
  144. }
  145. /* this styles any <span> element ONLY. */
  146.  
  147. .container { display: grid;
  148. grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  149. grid-template-rows: 1fr 0.5fr 1fr 1fr 0.1fr;
  150. grid-auto-columns: 1fr;
  151. gap: 0.5% 0.5%;
  152. /* this is for the gaps between the "sections". */
  153. grid-auto-flow: row;
  154. justify-content: center;
  155. align-content: center;
  156. justify-items: center;
  157. align-items: center;
  158. grid-template-areas:
  159. "header header header header header"
  160. "musicbox content content content miniblog"
  161. "nav content content content cbox"
  162. "nav content content content cbox"
  163. "footer footer footer footer footer";
  164. width: 100%;
  165. height: 100%;
  166. max-height:1500px;
  167. margin-bottom: 5%;
  168. }
  169. /* this is for the container for the whole template. mess around with sizing and such if you'd like! */
  170.  
  171. .header {
  172. grid-area: header;
  173. background-color: white;
  174. width: 100%;
  175. height: 100%;
  176. border: #696b6d 1px solid;
  177. }
  178. /* this just styles the header BOX, not the image itself. */
  179.  
  180. #header_img{
  181. width:100%;
  182. height:100%;
  183. object-fit: fill;
  184. background-position: 57% 55%;
  185. background-image:url('https://files.catbox.moe/yc9bi4.jpg');
  186. }
  187. /* this is for the header image, you should change the background-image:url to whatever the url to your image is, as well as the background-position values to reposition the image to your liking! */
  188.  
  189. .content {
  190. grid-area: content;
  191. background-color: white;
  192. width: 100%;
  193. height: 100%;
  194. border:1px solid #696b6d;
  195. overflow: auto;
  196. }
  197. /* the main section of the template, the huge middle part! */
  198.  
  199. .content p{
  200. padding:1%;
  201. }
  202. /* changes the p padding from 3% to 1% EXCLUSIVELY for the "content" section, but you can delete this line if you don't like it! */
  203.  
  204. .footer {
  205. grid-area: footer;
  206. background-color: white;
  207. width: 100%;
  208. height: 100%;
  209. border:1px solid #696b6d;
  210. text-align: center;
  211. }
  212. /* the footer is shown right at the bottom of the site! */
  213.  
  214. .footer p{
  215. padding:0;
  216. }
  217. /* removes the padding from the footer because i think it looks better this way, but you can delete this line if you disagree! */
  218.  
  219. .musicbox {
  220. grid-area: musicbox;
  221. background-color: white;
  222. width: 100%;
  223. height: 100%;
  224. border:1px solid #696b6d;
  225. }
  226. /* the "musicbox" section (the short top sidebar on the left) */
  227.  
  228. .nav {
  229. grid-area: nav;
  230. background-color: white;
  231. width: 100%;
  232. height: 100%;
  233. border:1px solid #696b6d;
  234. overflow: auto;
  235. }
  236. /* the "nav" section (the long bottom sidebar on the left) */
  237.  
  238. .miniblog {
  239. grid-area: miniblog;
  240. background-color: white;
  241. width: 100%;
  242. height: 100%;
  243. border:1px solid #696b6d;
  244. overflow: auto;
  245. }
  246. /* The "miniblog" section (the short top sidebar on the right) */
  247.  
  248. .cbox {
  249. grid-area: cbox;
  250. background-color: white;
  251. width: 100%;
  252. height: 100%;
  253. border:1px solid #696b6d;
  254. overflow: auto;
  255. }
  256. /* The "cbox" section (the bottom long sidebar on the right) */
  257.  
  258. #pop{
  259. text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  260. color: #fff;
  261. -webkit-animation: pop 1s ease-in-out infinite alternate;
  262. animation: pop 1s ease-in-out infinite alternate;
  263. -moz-animation: pop 1s ease-in-out infinite alternate;
  264. }
  265. /* this is for the "pop" effect showcased on the word "welcome"! */
  266.  
  267. @keyframes pop {
  268. from {
  269. transform:scale(0.95)
  270. }
  271.  
  272. 50% {
  273. transform:scale(1)
  274. }
  275.  
  276. to {
  277. transform:scale(0.95)
  278. }
  279. }
  280.  
  281. @-webkit-keyframes pop {
  282. from {
  283. -webkit-transform:scale(0.95)
  284.  
  285. }
  286.  
  287. 50% {
  288. -webkit-transform:scale(1)
  289.  
  290. }
  291.  
  292. to {
  293. -webkit-transform:scale(0.95)
  294.  
  295. }
  296. }
  297. /* End of the #pop div :D! */
  298.  
  299. .center {
  300. display: block;
  301. margin-left: auto;
  302. margin-right: auto;
  303. }
  304. /* this is for centering images. you can see how i use it in the "musicbox" section! */
  305.  
  306. /* Below is the mobile optimisation. Mess with it if you want. */
  307. @media only screen and (max-width: 640px) {
  308. .container{
  309. display: flex;
  310. flex-flow: column;
  311. width:155%;
  312. margin-top:3%;
  313. margin-left:5%;
  314. }
  315.  
  316. .header{
  317. height:250px;
  318. order:1;
  319. }
  320.  
  321. .content{
  322. order:2;
  323. }
  324.  
  325. .musicbox{
  326. display:none;
  327. }
  328.  
  329. .nav{
  330. order:3
  331. }
  332.  
  333. .miniblog{
  334. order:5;
  335. height:800px;
  336. }
  337.  
  338. .cbox{
  339. order:4;
  340. height:800px;
  341. }
  342.  
  343. body{
  344. margin:0;
  345. }
  346.  
  347. .footer{
  348. order:6;
  349. }
  350.  
  351. }
  352. </style>
  353.  
  354. <body>
  355.  
  356. <span>SITE TITLE HERE</span>
  357.  
  358. <div class="container">
  359.  
  360. <div class="header"> <!-- THE HEADER SECTION-->
  361. <div id="header_img">
  362. <marquee style="text-shadow: 2px 2px white; background:rgba(255,255,255, 0.9); margin-top: 32%;"><b>latest news:</b> I MADE A USEABLE TEMPLATE FOR ONCE!</marquee>
  363. </div>
  364. </div> <!-- THE HEADER SECTION-->
  365.  
  366. <div class="content"> <!-- THE MAIN CONTENT SECTION-->
  367. <div id="pop"><span style="font-size: 5vh; letter-spacing: 6px; -webkit-text-stroke-color: #696b6d; -webkit-text-stroke-width: 2px;">WELCOME</span></div>
  368. <!-- above I included some styling for the titles I use throughout this template. namely, the stroke/outline and spacing which differs from the other CSS styling -->
  369. <table>
  370. <tbody>
  371. <tr>
  372. <td style="padding-right:10px;">
  373. <img src="https://i.pinimg.com/564x/7d/8c/e8/7d8ce82ba5c8cc3c8cda078cfc8d7026.jpg" width="100%" style="display:block; margin-left:5%;">
  374. </td>
  375. <td>
  376. <p style="font-size: 16px;">Here is the main section! Wahoo! I typically put the most important stuff here like what the site is about, my name, etc.</p>
  377. <p style="font-size: 16px;">But there's no rules. Put whatever you want here, like lyrics or more images or anything!</p>
  378. <p style="font-size: 16px;">You can also remove the whole table and just use the p tag if you want. I only have a table added to include the image in an easy way.</b></p>
  379. <p style="font-size: 16px;"><b>Also! This template looks/works the exact same in both Chrome AND Firefox which is a first for me! Zooming in or out doesn't break everything too LOL. I actually only made this template on a whim because I was getting bored of my previous index one, but I always love to share so here you go!</b></p>
  380. </td>
  381. </tr>
  382. </tbody>
  383. </table>
  384. <hr>
  385. <p>This section has autoscroll so you can spam it as much as you want :D!</p>
  386. <p>For examples as to how I've used this theme, click <a href="https://awhe.neocities.org/" target="_blank">here</a> to go to my site! I'll spam some text so you can see how that looks.</p>
  387. <hr>
  388. <p style="font-size: 8vh;">LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. LET'S ALL LOVE LAIN. </p>
  389. </div> <!-- THE MAIN CONTENT SECTION-->
  390.  
  391. <div class="footer"> <!-- THE FOOTER SECTION-->
  392. <p>IDK why I added this right in the middle of everything, but here is the footer LOL // 2023 — forever! ♡</p>
  393. </div> <!-- THE FOOTER SECTION-->
  394.  
  395. <div class="musicbox"> <!-- THE MUSICBOX SECTION -->
  396. <p>Here is where I added a musicbox, but you can do whatever you like.</p>
  397. <img src="https://files.catbox.moe/jhs8yg.jpg" width="60%" height="auto" class="center">
  398. </div> <!-- THE MUSICBOX SECTION-->
  399.  
  400. <div class="nav"> <!-- THE NAV SECTION -->
  401. <span style="font-size: 2.5vh; letter-spacing: 6px; -webkit-text-stroke-color: #696b6d; -webkit-text-stroke-width: 2px;">NAVIGATION</span>
  402. <!-- above I included some styling for the titles I use throughout this template. namely, the stroke/outline and spacing which differs from the other CSS styling -->
  403. <hr>
  404. <b><p style="text-align:left; padding-left: 5px;">Main</b> ...→</p>
  405. <ul>
  406. <li><a href="/">LINK 1</a></li>
  407. <li><a href="/">LINK 2</a></li>
  408. <li><a href="/">LINK 3</a></li>
  409. <li><a href="/">LINK 4</a></li>
  410. </ul>
  411. <b><p style="text-align:left; padding-left: 5px;">Me</b> ...→</p>
  412. <ul>
  413. <li><a href="/">LINK 5</a></li>
  414. <li><a href="/">LINK 6</a></li>
  415. <li><a href="/">LINK 7</a></li>
  416. <li><a href="/">LINK 8</a></li>
  417. </ul>
  418. <b><p style="text-align:left; padding-left: 5px;">You</b> ...→</p>
  419. <ul>
  420. <li><a href="/">LINK 9</a></li>
  421. <li><a href="/">LINK 10</a></li>
  422. <li><a href="/">LINK 11</a></li>
  423. <li><a href="/">LINK 12</a></li>
  424. </ul>
  425. <p>This section has autoscroll, so don't be afraid to fill it up with loads of stuff! I added lots of cliques I'm part of here as well as links!</p>
  426. </div> <!-- THE NAV SECTION -->
  427.  
  428. <div class="miniblog"> <!-- THE MINIBLOG SECTION -->
  429. <p>Some stats like a visitor counter might look cool here! I personally put a "miniblog", but you can also add like your status.cafe or something!</p>
  430. </div> <!-- THE MINIBLOG SECTION -->
  431.  
  432. <div class="cbox"> <!-- THE CBOX SECTION -->
  433. <p>This is where I put my cbox (hence the name in the code) as well as some webrings I'm part of! Though really anything can go here... Maybe like a button wall or some stamps!?</p>
  434. </div> <!-- THE CBOX SECTION -->
  435.  
  436. </div>
  437.  
  438. </body>
  439. </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!