API tools faq
paste
awhe

"MELODY" template

awhe
Aug 4th, 2023
386
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.49 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4.  
  5. <!--
  6.  
  7. /// "MELODY" 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. /// This template was made simply because I wanted to make something really cute and really pink. That's it. I ended up heavily editing it to use for my current (4th Aug 2023) index page anyway, but this version is just too cute...
  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>MY MELODY ☆</title>
  44. <!-- remove the text "MY MELODY ☆" 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.  
  49. <style>
  50. ::-webkit-scrollbar {
  51. width: 15px;
  52. height: 15px;
  53. }
  54. /* above is the custom scrollbar, you can delete it if you want to use the default or another custom scrollbar. */
  55.  
  56. ::-webkit-scrollbar-thumb {
  57. border: 1px solid #000;
  58. }
  59. /* above is the custom scrollbar, you can delete it if you want to use the default or another custom scrollbar. */
  60.  
  61. ::-webkit-scrollbar-button:start:decrement,
  62. ::-webkit-scrollbar-button:end:increment {
  63. height: 15px;
  64. width: 15px;cp
  65. display: block;
  66. background-repeat: no-repeat;
  67. border: 1px solid #000;
  68. }
  69. /* above is the custom scrollbar, you can delete it if you want to use the default or another custom scrollbar. */
  70.  
  71. ::-webkit-scrollbar-button:vertical:decrement {s
  72. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAIAAAA21aCOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAYQWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarVl5NFX/195nuPdyzfOceU6Zx8zzkHlOuK7pGi6uWaJUypAiIYlCopJmQ0jRJMkQzSUaiIomlHj/SH1/v9/7vn+8a737j7P2es6z9372/px1zrp3A4iwUmJjo1BOgGh6AsPV2kzC28dXgvQSyMAKZCABO4UaH2vq7OwA/7MhAN9HAQEAGFahxMZGwf/NuIJD4qkAiDMABAXHU6MBkIsAODs1lpEAQOgBAOnkhNgEAMIkAPAyvH18AQhLAMAb5u3jC0DkBADeoN++DADwMtxdzQGIugBMrBQKIwyA3QIAJJKoYQkA7MEARG56MI0OwJsCQDSihlOCAYRbAGBtdHRMMIDwawBQCPqXPGH/ljPob04KJeyv/7sXAABgsqDFx0ZRUuH/26KjEv/UkAQA1nCGjSsA8AIgFZEx9q4AwAqAnKUHOToBADcA0k4LBlj1+8MTbTxW+WPUeHNfAOAHQL4GUyzsAUAUACUnRnqYrvpyFAbAbz5qRkuwdV/1PRkxrqv50Qh6lKPD7zxoeniI7R+/KCTe0u0PJ5RmZQsAnABofVq4u9dvnWhLEs3TEQDYAdCe+Eg3+9XYobRwc8c/HEaiqwcAyACgk6EMK9ffHIw1Ov5PX5gUlWLpBgCCAJhmQri7ze9YzCE4xMLyd13MO4TusaoHC49NMHNd5afFRjk7rOJFIVHWrgAgBYDVxie5/Ym9mcBwX50zNhpBsXP+rRl7H5vg7L6qZwEcwBwsQAISQQKCIAYigNY/0zwDEqt3rIACDAiDEFBZRf5EeAEFGEAHCrhBGnwAOoRA/N84M6AAA0IgCejw6y/6+6oCoUABBiRBCMRDJLwFBkTjwrgRboA74Ea4CW6Eq+O6uN6fOAmOP1WJlkQLog3Riqj4VwcVYiAKYoABtP8Bs4coCIFEYEAI0P/08E8+wlvCIGGcMEIYIzwGT3gNDKD9YQXQshj/oVwCNsIYJK5OJQSCgA5Tfzi4HK6Oa+FmuCFuhOuBBM6PC4MKronr4qa4MW6Aa+F6/6Yw8a+2f2b5n/VCgP5v/azi7ErsWqsqgv6ejPlf1n9mMf+XGQVDDNj/JxPbg13AbmHXsDtYO9YMEthVrAXrwzqw5n95El4DA8L+VnOFEKBDJEQB7Q9H9ZTqlOrSf6tOWVXAgBCIB0gISUkAADCPiU1l0MLCEyRMY2OjQiRs6dR1ayXUVdW0ALx9fCV+vzK+uAICAAj//X+w6CYAXRoA4v8PFrQfoE0FgHjqH0yuBIAtAuCuDDWRkfQbwwEACEAGDuAFIVgD0qAAKqAO2mAAJmAJduAE7uAD/kCFcIgGBiRDOmyHbMiD/XAQyqEKaqAeGuE8NEM7XIObcBcGYASewhi8gWmYhe/wE0EQEsKG8CBCiDgiiygj6oguYoRYIg6IK+KDBCJhCB1JRNKRHUgeUoSUI8eQBuQc0opcQ+4gg8hj5BUyhXxGfqAYyoryomKoHLoe1UVNUXvUHd2MhqFxaBq6Ey1Ay9Bq9DR6Gb2G3kVH0DF0Gv2GAcaC8WOSmAqmi5ljTpgvFooxsAwsFyvBqrEzWBt2CxvGxrAZbBEn4jy4BK6CG+A2uAdOxePwDDwfL8fr8ct4Dz6Mv8Jn8WUCG0GUoEzQJ9gSvAlhhGRCNqGEUEe4RLhBGCG8IXwnEon8RHmiDtGG6EOMIG4h5hOPEJuIXcRB4gTxG4lEEiIpkwxJTiQKKYGUTTpEOk26ShoivSEtMLEwiTOpM1kx+TLRmbKYSphOMnUyDTG9Y/rJzMksy6zP7MQczJzKvI+5lrmN+T7zG+afZC6yPNmQ7E6OIG8nl5HPkG+Qn5G/sLCwSLHosbiw0Fi2sZSxnGW5zfKKZZGVm1WJ1ZzVjzWRtYD1BGsX62PWL2xsbHJsJmy+bAlsBWwNbN1sL9gW2HnY17HbsgezZ7IfZr/MPsT+kYOZQ5bDlMOfI42jhOMCx32OGU5mTjlOc04KZwbnYc5Wzoec37h4uNS4nLiiufK5TnLd4ZrkJnHLcVtyB3Pv5K7h7uae4MF4pHnMeag8O3hqeW7wvOEl8srz2vJG8ObxNvL2887ycfNp8nnypfAd5uvgG+PH+OX4bfmj+Pfxn+cf5f8hICZgKhAikCNwRmBIYF5QRNBEMEQwV7BJcETwh5CEkKVQpFChULPQc2FcWEnYRThZuFL4hvCMCK+IgQhVJFfkvMgTUVRUSdRVdItojWif6DexNWLWYrFih8S6xWbW8K8xWROxpnhN55opcR5xI3GaeLH4VfH3EnwSphJREmUSPRKzkqKSNpKJksck+yV/SslLeUhlSTVJPZcmS+tKh0oXS1+XnpURl9koky5zSuaJLLOsrmy4bKnsLdl5OXk5L7ndcs1yk/KC8rbyafKn5J8psCkYK8QpVCs8UCQq6ipGKh5RHFBClbSUwpUOK91XRpW1lWnKR5QH1xLW6q2lr61e+1CFVcVUJUnllMqrdfzrHNZlrWte93G9zHrf9YXrb61fVtVSjVKtVX2qxq1mp5al1qb2WV1Jnap+WP2BBpuGlUamRovGnKayZohmpeYjLR6tjVq7ta5r/dLW0WZon9Ge0pHRCdSp0Hmoy6vrrJuve1uPoGeml6nXrreor62foH9e/5OBikGkwUmDyQ3yG0I21G6YMJQypBgeMxwzkjAKNDpqNGYsaUwxrjYeN5E2CTapM3lnqmgaYXra9KOZqhnD7JLZvLm++VbzLgvMwtoi16LfktvSw7Lc8oWVlFWY1SmrWWst6y3WXTYEG3ubQpuHtmK2VNsG21k7Hbutdj32rPZu9uX24w5KDgyHto3oRruNBzY+c5R1pDs2O4GTrdMBp+fO8s5xzldciC7OLodd3rqquaa73nLjcQtwO+n23d3MfZ/7Uw8Fj0SP654cnn6eDZ7zXhZeRV5j3uu9t3rf9RH2ofm0+JJ8PX3rfL9tstx0cNMbPy2/bL/RzfKbUzbf8Rf2j/LvCOAIoARcCCQEegWeDFyiOFGqKd+CbIMqgmap5tRS6nSwSXBx8FSIYUhRyLtQw9Ci0Mkww7ADYVPhxuEl4TM0c1o5bS7CJqIqYj7SKfJE5EqUV1RTNFN0YHQrnZseSe+JWROTEjMYqxybHTsWpx93MG6WYc+oi0fiN8e3JPAmxCb0JSok7kp8lWSUdDhpIdkz+UIKVwo9pS9VKTUn9V2aVdrxLfgW6pbr6ZLp29NfbTXdeiwDyQjKuJ4pnbkz8802623128nbI7ffy1LNKsr6usNrR9tOsZ3bdk7sst51Kps9m5H9cLfB7qo9+B7anv4cjZxDOcu5wbm9eap5JXlL+dT83r1qe8v2rhSEFvTv095XuZ+4n75/tNC4sL6IqyitaOLAxgOXiyWKc4u/Hgw4eKdEs6SqlFyaWDpW5lDWckjm0P5DS+Xh5SOHzQ43VYhW5FTMHwk+MlRpUnmmSqwqr+rHUdrRR8esj12ulqsuqSHWJNW8rfWsvXVc93hDnXBdXt2vE/QTY/Wu9T0NOg0NJ0VP7juFnko8NXXa7/RAo0VjyxmVM8ea+JvyzsLZxLPvzwWeGz1vf/76Bd0LZy7KXqy4xHMp9zJyOfXybHN481iLT8tgq13r9TaDtktX1l050S7ZfriDr2NfJ7lzZ+fK1bSr37piu2auhV2buB5w/Wm3d/eDHpee/hv2N27ftLrZfcv01tXbhrfb7+jfae3V7W2+q333cp9W36V7Wvcu9Wv3X76vc79lQG+gbXDDYOeQ8dC1YYvhmw9sH9wdcRwZHPUYffTQ7+HYo+BHk4+jHs89SXry8+m2Z4Rnuc85n5e8EH1R/VLxZdOY9ljHK4tXfeNu408nqBPTr+NfL73Z+Zbtbck78XcNk+qT7VNWUwPvN71/Mx07/XMm+wPXh4qPCh8vfjL51DfrPftmjjG38jn/i9CXE181v17/5vztxffo7z/ncxeEFuoXdRdv/fD68e5n8hJpqeyX4q+2ZfvlZyvRKyuxFAYFAAAwAEBDQwE+nwBg8wHgGQAgs//+zbVqGAKAAoAnsg6ZRo9g/rgs/p7QRSwjxTK5MluStVnWs65jU2bX5bDnDORK5D7I08r7ip9VwFSQIdQoPC2qKBax5qz4gqSF1H7pcVk1ud3yzxW1lPYrz6hYrqtZv6zmp96mKayVoj2iq6FXoD+zwdrwqNEPE1fT42aLFvaW5VaTNpq2W+w6HZCNJo5pTmedJ1y53Azdgz12eR71uuB91afbt2tTq1/T5jr/ioD9gVmUuCB/qkOwTohUKFvofNir8F7a+YjyyKwoWrQzXStGIGY+djjuFCMz3ilBPOFTYmdSQbJfinLKj9TetPIttHTdrcStwxlVmVHbzLbLZPHu4NjJuYsrm3M32x7mHDxnJXcx73P+9N7xgif7hvbfLbxe1HrgTHHNwUMlBaU7yrYcSi3POlxWcenIQOV41czR2WOz1bM1n2o/Hv9QN31isv51w6uTE6fmGrnOmDdlnG0+9/L8wkXSJZ7L4s1KLVqtxm22V9zagzpSOsuuXuuavI538/QI35C4qXRL57bZHbNehd5Pd3P7hPqO3TO+N9PfeJ8xoDeIDN4bqhyOe2A5IjTycbT7Yemj8Mfaj1eedD1Ne6bxbOZ544v4lxvGiGNDryrGQyfUJn6+vvmm+G3IO/1J7sn3U53v86e9ZiRnpj6c+5j2yWyWZXZkrvFz5ZeLX+e/h84/WTT5Ufxz7JfGcvHKCgB4ItLIWdQH48Zu49kEeyIf8TnpAlM+cxTZg8WCVYNNkV2WQ4FzPZcWtxWPJy+dbyd/jUCP4LQwl4iRKE2sfE2f+IqkrlSC9BmZ93LK8uEK9YrTyiprGSqX1i2qGqttV7+lyaLloF2gM6jHo+9sULCh14hobGySZFpv9tSCxVLfKsg6x+aU7V27KQd0o4CjvJOGs76LvquGm4w7u/s3jyeeXV613rk+dF+3TTp+In4rm8f9ewLqArMpwUEmVFHqfPBgyKnQXWH+4To0TtpkxNXI0ih6tCVdmP4h5mpsQZwvQ4oxFX82ITlRP/FXUmdyZopJKp56O23vFud0nvSRraUZmzKlM2e3dW+vytqxg77Td5d1tuZuyT2se+ZzxnP78i7nH927p4Cxb/N+h0LjIq0D64oVDkqViJYKlHEdIpfj5UuHv1ZMHxmrfFg1eHTg2Ej1y5rp2oU67AR7vVCDzEnVUxtOWzU6nfFpCjmbdC7/fP2FnosvLs01Iy2crZJtGles2jd1xHZmXz3c1XCt8Xpt9/6emhBvuN9Vvcd2au/3gTmtv1d1dfZH3XPp170sOsAwsDE4M3Rs+/6B0ZOso9aH9I83HYk8IT2aePnh25XnNi70v08diX0WOR08kvN76Jvtt4bvDk8enzr5vm+6euffh6ceFWb252i9m31i+f12Y/DG0VL3ss3r+osheVAG9i0XjIvhdQhbRiLhA6mDazexD1mBhZ5lkvcN2gb2SYy/nDq407iSeVN5Uvq382QL7BI8INQn3iDwS/biGTVxGwkwyUGqHdI3MDdkpeXYFNUUPpS3KVWt7VKbWc6nqqPmqb9Go1Lyq9UJ7WVdET0/f1YC2IcOw0KjG+JxJu+kNs17zPou7lresrlpfsKm2zbWj29s7SDh83XjTsdSJ5qznQnIZdT3uFu9u4sHq8dCz1ivW28CH6DPgW74pxG+d3/fNnf7ZAY6BPIEPKeVB/lRx6ljw0ZDAUPHQl2FHwwNp4rQXEUcifaJ4ovqjc+iWMUjMldiEOPm4R4w98Trx7xJKEi0SPycdTXZM/pnSkOqZhqY1bdmUTkg/u3VTBiHjbKb/Nt5tg9tLskJ26O5k3/lmV0d28e7IPaY5Ajkfcq/lFeeH7tUpIBeM7WvZX1TIKHI7oFUsVLx88HVJb2lT2YFDSeU+h/UrhCvmj4xUXqo6fHTvsezqnTW7ancf312368TW+ugG75OWpwxOGzban6E0pZ8tO3fx/L0Lby7+vMzVLNeyodWlLexKRvvBjpOd7VdvdfVeu3P9Rve1no4bLTcv3Gq8feJOVe+hu0V9+fey+3fc3zVQOFg/dGd4bkRs1PZh0qPqx/1PFp/JPHd7se/l2CvahODrb+8IUxkz3XMHFmRWVgB+//cGAEDUBqizBPDcBuCyAlDvAiBbDMDaCuDMBuCuB2jkLkC5pgGpUPj7/UAAB2bgBCGQhvVgCPawCaIgA4qgDq7AIEwhCCKMaCJOSCSyGzmOdCPjKIpKo5ZoGJqHNqEP0B+YJGaDxWHlWA/2CRfBrfFEvAYfJmAETUIYoZzQT8SIesRYYj1xnCRK8iYVk4aYuJhcmA4wjTALMQcw1zF/JOuSd5AHWNaw0Fm6WHlZI1ivsYmwJbONsGuzH2Jf4QjjGOI05bzApcRVxy3P3cRjwNPHG8D7lW8vvxL/XYFYQQHBbqE4YSnhUZG9ojZiRLGba3LFXSREJT5I9kjVSOfJpMlGywXLByj4KwYqhShHr01VyVlXub5N9aHae/WPGq81H2h1a1/WOaN7Uq9B/6TB2Q0thj1Gw8ZvTBbNOMwVLawsw6zyrM/ZPLUj2as7eG1kOO5w2udc6dLs+tSd2cPIM9nrgvdnX81NKX7X/NkC/AIbKDNUsWDjEK/Q6LA94edpHyJ1onKiX8Zox+6P+xjvlHA+iS85IaU3TWCLf3r91pXM8G2vsig7Xu7yyR7Z45OzlDdZUFB4pFi4xK4strysoqWy/+ir6u/H2U8oNtifSmlsO7vmfPUl5ebK1pV2v84r1yS6c28s3g7vHb6neT9vcOLBxtH+x4FPF1+UvtKdePl25+TPaamZ5Y+1szJzVV+EvlZ/N5p/t1j202zpxTJjZQUAECAAC/CAGCiCDliBF9AgHQrhBHTCKHxCyIgsYoYEIBlIJdKJjKEoKofaobFoCdqJvsU4MX0sBCvErmIfcFF8I56Bn8NfE4QIjoRdhA7Cd6IqMYpYT3xLkiWFkupJ00zrmRKZOpiJzM7MR5jfk/XJeeSXLJoseSyvWY1Zj7D+Ygtku8Guwl7KQeBI4pjmpHKOcQVxvedO5eHgOclrzTvJl8evxv9EIFtQU/Ct0GFhdxFOkSHRMrGgNevFQXxEolEyRypM2k5GTVZEjknup/xXha+KS8psa6VVjNYFrs9RbVV7ryGq6ayVp92ny6XnpX/IYNgQMZIztjIJNd1j1mg+YolaqVuH2hyxfWjP7+C5scRx2Jndxdo1063Nfd5T2yvFu8OXsMnZr2rz5wC7wFrKL6pL8NGQ92Ea4VtpdyPFouKib8aIxSbFDcdrJpQmLiUHpHSmCW6hp9/MkM7M3baQFbHj+S7n7O49OjmNeVL55QUC+6oK9Ys+FLeUlJZllcdVBFTaHdWsFq9lP75y4nPD21OPGm83tZ9rvXDt0v3m563TVxY7yV0S1/V7vG+m3j7c29Y30P904NFQ34P20dOPjjwpfLb7ReZY6njy65S3WyZT3m+e4f9Q90lgljZX83nky/w3ge8a884L8YuHftxbIv1yWa5dPX8isIEASIMamIE7hMNWKIZGuAXjsIKIIRuQzUgGcgy5iUyj3Kg+SkX3oi3oG4wHM8UYWA02ijPjRngifhp/QxAnbCKUEUaJ/EQvYjnxBUmaFEG6QFpmsmMqY5pk1mfeyzxB1icXk2dZnFjOsvKwprKOszmydbCrsh/nEOeo4FzDWculxtXDHcCD8pzk9eIj8V3hTxBQFZgVvCi0VdhWRFBkRrRH7OiaTHGqhIOknpSStKSMuKyknKK8toKtYoBSqnLp2jaV8fXcqnZq2erdmgQtF+1GXR69TP25DTTDSeMok+9m2Railm3WAbYsdu0ONEeCU54LuMa4Pfdw9LzubeDTsknPr8vfMeAVJYXKEVwTqhnWRbOPeBhFjZ6L2R7Hx2hK2Jg4m3wo1W4Lkt6SQc1c3l6wQ3BndbbK7o4c99yF/DMF9P1KhcMHIoq/lCSWfjuUXL5UkV3JW1V3zKB6uDa6jnyivsHm5NTp/DOaTa/PHbsQdcmiWaoVb5tqH+zs6Gq8Xt1TfrP4dmHvvr59/XkDW4f8H6iOfHt4/nH0U8Vnb18cHwsdV5qYe9P+bteUxfu5mT0fPn+ync2fa/78/MvM18VvE9/vzBctbFh4u7hzcfEH/cfET++fV5d4l2hLnb94f9F+dS4zLTsvly2/XJFfiVlpXlkBiA/VUP+9fWI1AyC8WFn5IgdAKgL4Vbiy8rN6ZeVXDQD2DKAr6vc+B+D3nqii7X/bq/wXx1/i22BK1RQAAAAgY0hSTQAAbZgAAHOOAAD7dQAAhNQAAHqzAAD/ZwAAMFsAABCFUM9XoQAAAFdJREFUeNqM0dEJADEIA1CVDpRRHNVRMtJ9FIo0hTM/UnlCbZ2kDRLaAvDvAGSm0lBkZkpD0c5F44mUOsk+d3RVnSbJtctz0/5kYbNM3brO/Vo9Pvy3bwAy2SCKKPXY3wAAAABJRU5ErkJggg==);
  73. }
  74. /* above is the custom scrollbar, you can delete it if you want to use the default or another custom scrollbar. */
  75.  
  76. ::-webkit-scrollbar-button:vertical:increment {
  77. background-image: url(data:image/png;base64,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);
  78. }
  79. /* above is the custom scrollbar, you can delete it if you want to use the default or another custom scrollbar. */
  80.  
  81. body {
  82. text-align: left;
  83. font-family: ms gothic, monospace;
  84. background-image: url('https://files.catbox.moe/83m9gm.png');
  85. /* replace this line of code with a link to your background image. */
  86. /* or remove it entierly if you want to use a color or something. */
  87. font-size: 16px;
  88. }
  89.  
  90. @font-face {
  91. font-family:'Dancing Script';
  92. src: url(DancingScript-Regular.ttf);
  93. }
  94. /* i got the above font from here: https://fonts.google.com/specimen/Dancing+Script?category=Handwriting */
  95. /* delete this code if you don't want to use a custom font. */
  96.  
  97. span {
  98. font-family:'Dancing Script';
  99. font-size: 6vh;
  100. color: #FBB1C0;
  101. }
  102. /* delete this code if you don't want to use a custom font. */
  103.  
  104. p{
  105. margin:2.5%;
  106. }
  107.  
  108. hr {
  109. border: 0;
  110. height: 1px;
  111. background-image: linear-gradient(to right, white, #FAB6C3, white);
  112. }
  113.  
  114. a{
  115. color: #FBB1C0;
  116. text-decoration: none;
  117. }
  118. /* this is the link color. */
  119.  
  120. a:hover{
  121. color: #FBB1C0;
  122. text-decoration: none;
  123. }
  124. /* this is the link color when the cursor hovers it */
  125.  
  126. #title{
  127. top:12%;
  128. position:absolute;
  129. left:35%;
  130. text-shadow: 2px 2px white;
  131.  
  132. }
  133.  
  134. .container {
  135. display: grid;
  136. grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  137. grid-template-rows: 10fr 5fr 5fr 5fr 0.1fr;
  138. grid-auto-columns: 1fr;
  139. gap: 10px 1%;
  140. grid-auto-flow: row;
  141. justify-content: center;
  142. align-content: center;
  143. justify-items: center;
  144. align-items: center;
  145. grid-template-areas:
  146. ". header header header ."
  147. ". profile1 main main ."
  148. ". profile2 main main ."
  149. ". profile3 foot foot ."
  150. ". . . . .";
  151. margin: 0 auto;
  152. margin-top: 8%;
  153. margin-left: 22%;
  154. width:60%;
  155. height:700px;
  156. }
  157.  
  158. .header {
  159. grid-area: header;
  160. background-color: aqua;
  161. border: #FBB1C0 1px solid;
  162. width:100%;
  163. height:100%;
  164. }
  165.  
  166. #header_img{
  167. width:100%;
  168. height:100%;
  169. object-fit: fill;
  170. background-position: 57% 50%;
  171. background-image:url('https://files.catbox.moe/bev8vr.pnj');
  172. }
  173. /* this is the image that'll show up in your header. change the position values to... reposition it! */
  174.  
  175. .profile1 {
  176. grid-area: profile1;
  177. background-color: white;
  178. height:100%;
  179. width:100%;
  180. border: #FBB1C0 1px solid;
  181. }
  182. /* this is where the baby is sleeping :D */
  183.  
  184. .profile2 {
  185. grid-area: profile2;
  186. background-color: white;
  187. height:100%;
  188. width:100%;
  189. border: #FBB1C0 1px solid;
  190. overflow:auto;
  191. }
  192. /* this is where i put the links */
  193.  
  194. .main {
  195. grid-area: main;
  196. background-color: white;
  197. height:100%;
  198. width:100%;
  199. border: #FBB1C0 1px solid;
  200. overflow:auto;
  201. }
  202. /* this is this biggest bulk of text. the main content. */
  203.  
  204. .profile3 {
  205. grid-area: profile3;
  206. background-color: white;
  207. height:100%;
  208. width:100%;
  209. border: #FBB1C0 1px solid;
  210. overflow:auto;
  211. }
  212. /* this is where you can put stats or whatever! the bottom box on the lef thand side */
  213.  
  214. .foot {
  215. grid-area: foot;
  216. background-color: white;
  217. height:100%;
  218. width:100%;
  219. border: #FBB1C0 1px solid;
  220. overflow:auto;
  221. }
  222. /* and lastly, the "footer". */
  223.  
  224. .center {
  225. display: block;
  226. margin-left: auto;
  227. margin-right: auto;
  228. }
  229. /* this centers images if you add "class=center" to the end of them */
  230.  
  231. ul{
  232. list-style-type: none;
  233. margin-left:15%;
  234. }
  235. /* you can change the list style type to whatever you want, i just don't like bullet points. */
  236.  
  237.  
  238. /* and lastly, below is styling for mobile users. you can tinker with this if you'd like! */
  239. @media only screen and (max-width: 640px) {
  240.  
  241. .container{
  242. display: flex;
  243. flex-flow: column;
  244. position:relative;
  245. width:95%;
  246. right:19%;
  247. margin-top:3%;
  248. font-size:2vh;
  249. }
  250.  
  251. .header{
  252. height:150%;
  253. order: 1;
  254. }
  255.  
  256. .main{
  257. order:2;
  258. height:250%;
  259. }
  260.  
  261. .profile1{
  262. display:none
  263. }
  264. /* be mindful that this will remove this section from mobile. if you'd like that section to be shown then you have to edit it! */
  265.  
  266. .profile2{
  267. height:25%;
  268. order:3;
  269. height:150%;
  270. }
  271.  
  272. body{
  273. font-size: 3vh;
  274. }
  275.  
  276. ul{
  277. margin-left:28%;
  278. }
  279.  
  280. .profile3{
  281. order:4;
  282. }
  283.  
  284. .foot{
  285. order:5;
  286. }
  287.  
  288. #title{
  289. display:none;
  290. }
  291.  
  292. }
  293.  
  294.  
  295. </style>
  296.  
  297. <body>
  298.  
  299. <div id="title"><span>MY MELODY !</span></div>
  300.  
  301. <div class="container">
  302. <div class="header">
  303. <div id="header_img"></div>
  304. </div>
  305.  
  306. <div class="profile1">
  307. <img src="https://files.catbox.moe/9iaeu9.png" width="50%" height="auto" class="center">
  308. <p style="text-align: center;">shh... the baby is sleeping... <3</p>
  309. </div>
  310.  
  311. <div class="profile2">
  312. <div style="text-align: center;"><span style="font-size: 3vh;">LINKS</span></div>
  313. <ul>
  314. <li><a href="/">link one</a></li>
  315. <li><a href="/">link two</a></li>
  316. <li><a href="/">link three</a></li>
  317. <li><a href="/">link four</a></li>
  318. <li><a href="/">link five</a></li>
  319. </ul>
  320. </div>
  321.  
  322. <div class="main">
  323. <div style="text-align: center;"><span style="font-size: 3vh;">WELCOME</span></div>
  324. <hr>
  325. <p style="text-align: center;">to my humble little page!!</p>
  326. <p>Feel free to put whatever you'd like in this section! it automatically scrolls so... spam as much as you want! or as little... who am i to judge.</p>
  327. <p>You can mess around with the grid layout and values if you want. i'm still learning them myself so. click <a href="https://awhe.neocities.org/">here</a> to see how i heavily edited this template for my own index!</p>
  328. <img src="https://files.catbox.moe/neb3ui.gif" class="center">
  329. <p>I just wanted to make something really pink and really cute! hence the theme of this template. again, i always code these as if it's for an index but you can realistically use it for anything! like an about page or a shrine of some sorts. the possibilities are endless... it's up to you now!</p>
  330. <img src="https://files.catbox.moe/g2fvlv.png" class="center">
  331. </div>
  332.  
  333. <div class="profile3">
  334. <div style="text-align: center;"><span style="font-size: 3vh;">STATS</span></div>
  335. <p><b>(psst, put like a visitor counter or something here maybe?)</b></p>
  336. </div>
  337.  
  338. <div class="foot">
  339. <div style="text-align: center;"><span style="font-size: 3vh;">EXTRA</span></div>
  340. <p style="text-align: center;">waow what could go here i wonder...</p>
  341. <marquee>maybe a marquee... maybe even a button marque... or some fake adverts?</marquee>
  342. </div>
  343. </div>
  344.  
  345. </body>
  346. </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!