main.txt

×

rules.txt

×

terms of use
- pls don't remove the in-code credits, but it's up to you if you'd like to keep the credits on the page
- this is a template so do not claim as your own either
- otherwise do whatever you like & have fun !!

sweetie pie.jpg

×

live preview
<html lang="en">  <head> <meta charset="utf-8" /> <title>sweetie pie</title> <link rel="icon" type="image/x-icon" href="FAVICON HERE"> <style> /*if you're new to html, you can change styling here from the root*/ :root{ --main-bg: #f9f4ef; --title-font: milkshake; --title-shadow: #8ea17c; --nav-bg: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,231,234,1) 24%, rgba(252,231,234,1) 80%, rgba(240,189,196,1) 100%); --right-box-border: 2px solid #d6dcd1; --right-one-bg: linear-gradient(180deg, rgba(255,255,255,1) 53%, rgba(253,237,240,1) 91%, rgba(252,231,234,1) 100%); } @font-face { font-family: "milkshake"; src: url("https://dl.dropbox.com/scl/fi/kgryjlwomks3d1lhnvbzf/Milk-and-Shake-Mod-aespa_fonts.otf?rlkey=gn7oi84676bxtkocbucxtia1b") } </style> <style> * {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat991.cur), auto !important;} ::-webkit-scrollbar{ width: 0px;height: 0px; } body{ font-family: ms ui gothic; font-size: 15px; color: #686868; } /*main items*/ #bg{ margin :auto; position:absolute; top:0; right:0; left:0; bottom: 0; width: fit-content; height: fit-content; padding: 4px; border-image: url(https://kalachuchi.neocities.org/borders/biscuit%20border.gif) 12 fill round; border-width: 13px; border-style: solid; filter: drop-shadow(0 0 4px #d0bfb3); } #main{ background-color: var(--main-bg); width: 660px; height: 500px; border: 3px ridge #fff; border-radius: 6px; } #title{ width: 660px; text-align: right; margin: 45px 0 0 0; color: #fff; font-family: var(--title-font); font-size: 60px; filter: drop-shadow(-1px 0px 0px var(--title-shadow)) drop-shadow(1px 0px 0px var(--title-shadow)) drop-shadow(0px -1px 0px var(--title-shadow)) drop-shadow(0px 1px 0px var(--title-shadow)) drop-shadow(2px 0px 0px white) drop-shadow(0px 2px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow(0px -2px 0px white) drop-shadow(-2px 0px 0px var(--title-shadow)) drop-shadow(0px 2px 0px var(--title-shadow)) drop-shadow(2px 0px 0px var(--title-shadow)) drop-shadow(0px -2px 0px var(--title-shadow)) drop-shadow(3px 3px 0px var(--title-shadow)); } flex{ display: flex; width: 640px; height: 375px; overflow: none; padding: 10px; align-items: top; justify-content: space-between; } .column{ height: 375px; } /*left column*/ left{ display: block; width: 160px; overflow: visible; } #nav{ background-color: #fff; border: 2px dashed var(--title-shadow); border-radius: 20px 20px 0 0; overflow: hidden; width: 160px; height: 200px; animation: float infinite 4s; } @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-5px); } 100% { transform: translatey(0px); } } #nav h2{ font-size: 20px; margin: 0; border-bottom: 2px dashed var(--title-shadow); text-align: center; padding: 8px 0 4px 0; background: var(--nav-bg); color: inherit; } #nav p{ text-align: center; line-height: 18px; } #nav p a{ color: inherit; transition: all 200ms; } #nav p a:hover{ letter-spacing: 2px; } left .free{ width: 140px; padding: 10px; text-align: justify; height: fit-content; margin: 8px 0; } /*right column*/ right{ display: block; width: 470px; overflow: scroll; } .right-content{ border: var(--right-box-border); } right #one{ width: 450px; height: 160px; padding: 14px 7px; margin: auto; background: var(--right-one-bg); text-align: center; } right wrap{ margin-top: 6px; display: flex; align-items: top; justify-content: space-between; width: 470px; height: 175px; overflow: scroll; } right #two, right #three{ width: 215px; height: 140px; padding: 14px 7px; background-color: #fff; overflow: scroll; overflow-x: hidden; } /*scrollbar styling*/ .right-content::-webkit-scrollbar { width: 14px; height: 10px; } .right-content::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%); border: 1.5px solid #888888; border-radius: 5px; } .right-content::-webkit-scrollbar-track { background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%); } .right-content::-webkit-scrollbar-button { display: block; width: 14px; height: 16px; } .right-content::-webkit-scrollbar-button:vertical:start:decrement { background: white; background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png"); border: 1.5px solid #888888; border-radius: 5px; } .right-content::-webkit-scrollbar-button:vertical:start:increment { display: none; } .right-content::-webkit-scrollbar-button:vertical:end:decrement { display: none; } .right-content::-webkit-scrollbar-button:vertical:end:increment { background: white; background-image: url("https://dl.dropbox.com/s/vtnpkuealr2f7u4/whc8iy3_d.png"); border: 1.5px solid #888888; border-radius: 5px; } </style> </head> <body> <div id="bg"> <div id="main"> <h1 id="title">sweetie pie</h1> <flex> <left class="column"> <div id="nav"> <h2>navigation</h2> <p> <a href="LINK">link one</a><br> <a href="LINK">link two</a><br> <a href="LINK">link three</a><br> <a href="LINK">link four</a><br> <a href="LINK">link five</a> </p> </div> <div class="free"> the rest of this space is free so add whatever you want to it! you can add a music player, stamps, blinkies, etc.! </div> </left>  <right class="column"> <div id="one" class="right-content"> <p> welcome to the live preview of kalachuchi's sweetie pie template ! please be nice & make sure to read the terms of use for this template, but otherwise go crazy and do whatever you want ^___^ </p> </div> <wrap> <div id="two" class="right-content"> Apple pie cupcake chocolate bar macaroon dragée. Biscuit pie tart bear claw I love I love. Cookie cake icing pastry cookie. Caramels donut lemon drops cake cupcake candy canes chocolate shortbread apple pie. Halvah marshmallow pie shortbread chupa chups liquorice I love caramels I love. I love dessert I love cupcake tiramisu fruitcake. Caramels brownie pudding gingerbread tootsie roll soufflé toffee. Topping toffee soufflé chocolate bar chocolate marzipan cake. Halvah croissant brownie caramels donut. Carrot cake cake candy canes tart cookie fruitcake cheesecake. Pie tart powder liquorice carrot cake shortbread marzipan. I love fruitcake I love cookie I love candy. Jelly beans tootsie roll macaroon pie I love croissant. Cake I love tiramisu gummi bears oat cake jelly beans soufflé. Cake cheesecake lollipop oat cake bear claw sweet chupa chups tiramisu sweet. Macaroon jelly beans sweet candy canes biscuit. Soufflé I love cake jelly cake. Liquorice icing cheesecake jelly cotton candy cake I love topping I love. Lollipop toffee macaroon pudding sweet cookie. I love cotton candy powder I love muffin toffee. </div> <div id="three" class="right-content"> Apple pie cupcake chocolate bar macaroon dragée. Biscuit pie tart bear claw I love I love. Cookie cake icing pastry cookie. Caramels donut lemon drops cake cupcake candy canes chocolate shortbread apple pie. Halvah marshmallow pie shortbread chupa chups liquorice I love caramels I love. I love dessert I love cupcake tiramisu fruitcake. Caramels brownie pudding gingerbread tootsie roll soufflé toffee. Topping toffee soufflé chocolate bar chocolate marzipan cake. Halvah croissant brownie caramels donut. Carrot cake cake candy canes tart cookie fruitcake cheesecake. Pie tart powder liquorice carrot cake shortbread marzipan. I love fruitcake I love cookie I love candy. Jelly beans tootsie roll macaroon pie I love croissant. Cake I love tiramisu gummi bears oat cake jelly beans soufflé. Cake cheesecake lollipop oat cake bear claw sweet chupa chups tiramisu sweet. Macaroon jelly beans sweet candy canes biscuit. Soufflé I love cake jelly cake. Liquorice icing cheesecake jelly cotton candy cake I love topping I love. Lollipop toffee macaroon pudding sweet cookie. I love cotton candy powder I love muffin toffee. </div> </wrap> </right> </flex> </div> </div> </body> </html>