Site templates

Sometimes I just wanna play around with css :) Feel free to use these! I appreciate if you link back to me :)

Morte

(press the link to see the style!)
This one was a one-evening make and the first time I played around with text being turned around in any way, shape or form! The code may be slightly funky but hey, it works!

Homepage HTML:

<!doctype html> <html lang="en">     <head>         <meta charset="UTF-8" />         <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Morte</title>
        <link rel="stylesheet" href="morte.css" />
    </head>

Page HTML:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Morte</title>
        <link rel="stylesheet" href="morte.css" />
    </head>

<body>
        <section>
            <div class="container">
                <div class="leftbox">
                    <div class="textbox">
                        <p>The bitterest tears shed over graves are for words left unsaid and deeds left undone.</p>
                        
                        <ul>
                            <li><a href="Link">Home</a></li>
                            <li><a href="Link">pagename</a></li>
                            <li><a href="Link">pagename2</a></li>
                            <li><a href="Link">pagename_3</a></li>
                        </ul>
                    </div>
                    
                    <h2 class="heading--text">MORTE</h2>
                </div>
                <div class="rightbox2">
                    
                    <p>Hello world</p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis condimentum ipsum, ut
                        vehicula nisi posuere et. Maecenas congue dictum leo vel bibendum. Nulla vel euismod urna, at
                        accumsan dui. Donec in faucibus velit. Pellentesque fringilla mollis urna, sed ullamcorper sem
                        ultrices pellentesque. Morbi molestie justo ligula, at iaculis magna imperdiet ut. Duis
                        vulputate ipsum vitae eleifend feugiat. Duis ornare metus vel erat tincidunt pellentesque. Morbi
                        sed nisi purus. Nunc ac bibendum elit. Nulla vehicula metus non ipsum vestibulum, facilisis
                        condimentum lacus rhoncus. Duis bibendum velit sit amet libero posuere, vitae eleifend nisi
                        efficitur.<br />

Mauris cursus dictum convallis. Maecenas vel purus interdum arcu eleifend condimentum gravida
                        sit amet quam. Curabitur libero nisi, venenatis vel nisi a, lacinia eleifend lectus. Curabitur
                        pharetra erat eget orci vestibulum lacinia. Donec id arcu id diam facilisis tincidunt nec et
                        arcu. Fusce et lorem eget tortor euismod rhoncus. Quisque eu urna nec neque egestas auctor vitae
                        sed diam.<br />

Donec lobortis, dolor at auctor molestie, quam justo varius arcu, eu gravida arcu purus a nulla.
                        Nulla convallis purus id hendrerit finibus. Etiam ornare luctus eros, semper consectetur mauris
                        fermentum sed. Praesent urna ligula, rutrum at elit vel, consectetur consectetur purus.
                        Pellentesque dictum nisl eu finibus porta. Donec molestie sollicitudin leo vitae iaculis.
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Mauris in euismod lacus. Suspendisse blandit elementum dolor, a gravida nunc viverra et. Cras
                        vestibulum, dui bibendum condimentum commodo, ligula quam fermentum purus, ut ultricies risus
                        magna id purus. Vestibulum nunc erat, euismod at ligula id, tristique ornare massa. Proin id
                        lorem a tortor bibendum egestas. Nullam bibendum quis dolor ut molestie. Ut porttitor lectus
                        tellus, eget accumsan mauris facilisis eget. Nunc malesuada ipsum nisl, eget interdum tortor
                        tristique eget. Nulla luctus, magna eget maximus sollicitudin, mauris dolor imperdiet libero, id
                        blandit felis ante id erat.
                    </p>
                    
                </div>
            </div>
        </section>
        <div class="footer">Layout made by HelloFrode. Background found on sadgrl.online</div>
    </body>
</html>

CSS:

body {
    background-color: black;
    background-image: url(https://imgur.com/HRsgMYG);
    background-size: 213px;
    color: white;
}
/*This is the pattern in the back. If you want it to be smaller or bigger change the background-size. If you want another image change the file name in the parentheses. The background color just ensures it's not white if the background image file messes up. "color" makes the text white.*/

section {
    margin: 0 auto;
    /*Centers the content*/
    padding: 165px 0;
    /*Makes the content appear 165px down on the page. Change as you wish.*/
    display: flex;
    /*Ensures the content stays within the div :)*/
    width: 600px;
    /*The width of the content! Changing this may cause issues in other spots!*/
}

.heading--text {
    padding: 10px;
    /*This just makes the header stay in a certain spot, can be changed without much issue!*/
    transform: rotate(-90deg);
    /*The reason the header is rotated the way it is!*/
    align-self: flex-end;
    /*Places the header at the bottom of the area.*/
    font-size: 100px;
    /*!!! Change if the header text changes!!*/
    margin-left: -235px;
    /*!!! Change if header text ends up too far to one side!!!"*/
    margin-bottom: 110px;
    /*!!! Change if header is too low or high!!!*/
}

.box_img {
    width: 100%;
    height: 100%;
    /*Place images that are meant to fill the full box in this div!*/
}

.rightbox {
    float: left;
    /*Make sure this div ends up next to the other*/
    border: solid 1px white;
    width: 67%;
    height: 630px;
    /*Ensures the div is the correct size -- may need changing if othher sizing changes*/
}

.rightbox2 {
    float: left;
    border: solid 1px white;
    width: 384px;
    height: 610px;
    padding: 10px;
    /*See above.*/
    overflow: scroll;
    /*Makes any text that exceeds the limits of the box cause the div to be scrollable.*/
}

.leftbox {
    padding: 10px;
    width: 29%;
    display: flex;
    float: left;
    height: 600px;
}
/*See above!*/

.textbox {
    height: 50%;
    width: 175px;
}
/*A box that makes the quote at the top and the nav menu interfere less with the title*/

.textbox ul {
    list-style-type: none;
    /*Removes the "dots" from this list*/
    padding: 0;
    text-align: right;
    /*Makes the text "appear" from right to left. Remove at your own risk lol*/
    margin-left: 90px;
    /*!!! May need changing if long titles are added!!!*/
}

.textbox li a {
    color: white;
    text-decoration: none;
}
/*Makes the links be white (rather than blue or purple) and removes underlining*/

.textbox li a:hover {
    text-decoration: underline;
}
/*Makes the text underlined when it's hovered over*/

.footer {
    margin-top: -160px;
    text-align: center;
}
/*Makes the footer stuff end up in the middle of it all, right below the content*/

/* ===== Scrollbar CSS ===== */
/*Ngl, not my code... it's mostly self-explanatory though.*/
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #242424 black;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #3c4560;
}

*::-webkit-scrollbar-thumb {
    background-color: #222632;
    border-radius: 10px;
    border: 3px none #ffffff;
}

Doll-like

This was a on-and-off project over a couple of weeks. The style is inspired by "Morute" aesthetics, which I've been a more or less casual enjoyer of my whole life. The code is yet to be commented and some of the absolute placements may be off on some screens. If it bothers you maybe try non-pixel placements. It's good enough for me right now though!

Page HTML:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Dollike</title>
        <link href="Dollike.css" rel="stylesheet" type="text/css" media="all" />
    </head>
    <body>
        <div class="container">
            <div class="leftside">
                <h1 style="margin-bottom: 10px">Doll-like</h1>
                <img src="https://i.imgur.com/dq5aQwS.png" style="margin-bottom: -1px: margin-top: -1px;" />
                <p style="margin-top: -1px">
                    Morute, a name combining the words<br />"morbid" and "cute," is an aesthetic created in<br />the
                    early 2010s that expresses the dichotomy between the hyper-femininity and softness of a
                    childhood/girlhood in the past with the darker imagery of true crime and Regional Gothic elements.
                    In the community, users often use it as an outlet for expressing trauma, especially those
                    surrounding eating disorders and child abuse. The community largely developed from the music of
                    Nicole Dollanganger and influential photographers such as Jess Woods and milliedollgraves, who have
                    since deactivated. <br />From:
                    <a href="https://aesthetics.fandom.com/wiki/Morute">https://aesthetics.fandom.com/wiki/Morute</a>
                </p>

<div class="box21">
                    <div class="box-top">
                        <div class="u01"></div>
                    </div>
                    <div class="box-center">
                        <div class="box-inner">
                            <p>The text in this box is slightly smaller. Isn't that neat?</p>
                            <img
                                src="https://i.imgur.com/xkSJxg2.png"
                                style="
                                    width: 225px;
                                    position: absolute;
                                    top: 290px;
                                    left: 360px;
                                    transform: rotate(15deg);
                                " />
                        </div>
                    </div>
                    <div class="box-bottom">
                        <div class="s01"></div>
                    </div>
                </div>
                
                <p>
                    Cat ipsum dolor sit amet, i like fish and being gorgeous with belly side up and shove bum in owner's
                    face like camera lens. Always ensure to lay down in such a manner that tail can lightly brush
                    human's nose fart in owners food . Pee in human's bed until he cleans the litter box head nudges ,
                    yet run off table persian cat jump eat fish, yet destroy the blinds and i shredded your linens for
                    you. I'm so hungry I'm so hungry but ew not for that spend six hours per day washing, but still have
                    a crusty butthole yet mouse and scratch me there, elevator butt, destroy house in 5 seconds sleeping
                    in the box. Climb leg catto munch salmono, cat slap dog in face kitty time. Chase the pig around the
                    house shred all toilet paper and spread around the house, so show belly and hiss at vacuum cleaner
                    purr purr purr until owner pets why owner not pet me hiss scratch meow. Fart in owners food white
                    cat sleeps on a black shirt.
                </p>
                <img src="https://i.imgur.com/dq5aQwS.png" />
                <img src="https://i.imgur.com/Cr1LyE5.png" style="float: left; width: 300px; margin-left: -50px; margin-right: -50px" />
                <p>
                    Slap kitten brother with paw making sure that fluff gets into the owner's eyes yet sleep nap so
                    groom forever, stretch tongue and leave it slightly out, blep but side-eyes your "jerk" other hand
                    while being petted chew on cable. Immediately regret falling into bathtub scratch at the door then
                    walk away but get suspicious of own shadow then go play with toilette paper for plan your travel so
                    destroy couch, or do i like standing on litter cuz i sits when i have spaces, my cat buddies have no
                    litter i live in luxury cat life run off table persian cat jump eat fish. See owner, run in terror
                    hide from vacuum cleaner, and lick yarn hanging out of own butt or cattt catt cattty cat being a cat
                    and steal raw zucchini off kitchen counter.
                </p>
            </div>
            <div class="rightside">
                
                <div class="box21">
                    <div class="box-top">
                        <div class="u01"></div>
                    </div>

<div class="box-center">
                        <div class="box-inner">
                            <h3 style="margin-top: -1px">Navigation</h3>
                            <ul>
                                <li><a href="Dollike.html">Main page</a></li>
                                <li><a href="info.html">Information</a></li>
                            </ul>
                            <br />
                        </div>
                    </div>
                    <div class="box-bottom">
                        <div class="s01"></div>
                    </div>
                </div>

<div class="box21">
                    <div class="box-top">
                        <div class="u01"></div>
                    </div>
                    <div class="box-center">
                        <div class="box-inner">
                            <h3 style="margin-top: -1px">About you</h3>
                            <p>
                                This is the perfect spot for some information about yourself. Maybe a fun fact or two?
                                Maybe something else entirely? It sure is a box at least!
                            </p>
                        </div>
                    </div>
                    <div class="box-bottom">
                        <div class="s01"></div>
                    </div>
                </div>

<p>You can put other text here! Maybe an image or some stamps, even. Go wild!</p>
                <img src="https://i.imgur.com/FSbDa61.png" width="100%" />
            </div>
            <img src="https://i.imgur.com/2zLYM99.png" id="rightimg" />
        </div>
    </body>
</html>

CSS:

/*.test {
    color: red;
    background-color: blue;
}*/

body {
    color: #403c3c;
    background-image: url(https://i.imgur.com/PyHvj70.jpeg);
    background-size: 250px;
    font-family: 'Times New Roman', Times, serif;
}

@font-face {
    font-family: "headings"; 
    src: url("Tempting.ttf") format("truetype");
    /* or: */
    src: url("Tempting.ttf") format("opentype"); /
}

h1, h2, h3{
    font-family: headings, 'Times New Roman';
}

.container {
    background-color: #faf2f0;
    color: #7a5c61;
    width: 800px;
    margin: -10px;
    display: flex;
}

.leftside {
    padding: 20px;
    width: 70%;
}

.rightside {
    padding: 10px;
    width: 29%;
    float: left;
    height: inherit;
    border: 1px solid transparent;
    border-image: url(GbostlyBorder.png) 30 round;
}

#rightimg {
    size: 168%;
    height: 200px;
    position: absolute;
    left: 325px;
    z-index: 1;
    margin-top: 10px;
}

a {
    color: black;
}

/*This is all the little lace boxes (like the one in navigation)*/

.box-center {
    margin: 1em 0; /* Change center to 0 to auto */
    width: 100%; /* width */
}

.u01 {
    /*This makes the top edge of the lace boxes. I reccomend not touching this code.*/
    background: url(f-ue.gif) repeat-x;
    height: 23px;
    margin: 0 23px;
}

.s01 {
    /*This makes the bottom edge of the lace boxes. I reccomend not touching this code.*/
    background: url(f-sita.gif) repeat-x;
    height: 23px;
    margin: 0 23px;
}

.box-top {
    /*This makes the top corners of the lace boxes. I reccomend not touching this code.*/
    background-image: url(f-kado1.gif), url(f-kado2.gif);
    background-position:
        top left,
        top right;
    background-repeat: no-repeat, no-repeat;
    height: 23px;
}

.box-center {
    /*This makes the side edges of the lace boxes. I especially reccomend not touching this code. (it took me a long time to fix)*/
    background-image: url(f-migi.gif), url(f-hidari.gif);
    background-position:
        top right,
        top left;
    background-repeat: repeat-y, repeat-y;
}

.box-inner {
    /*This is the inside of the boxes! I'd avoid the margins (if something looks off change the specific element margins instead like I've done) but aside from that you can do some fun stuff here!*/
    background: white; /* Background color */
    margin-left: 23px;
    margin-right: 23px;
    margin-top: -20px;
    margin-bottom: -20px;
    padding: 10px;
    font-size: smaller;
    /*The most I've done atm is make the font in here slightly smaller. Mostly so it fits better on the right side.*/
}

.box-bottom {
    /*This makes the bottom corners of the lace boxes. I reccomend not touching this code.*/
    background-image: url(f-kado3.gif), url(f-kado4.gif);
    background-position:
        top left,
        top right;
    background-repeat: no-repeat, no-repeat;
    height: 23px;
}

/*End of lace boxes*/

/*This styles lists (like the one in the navigation)*/
li a {
    color: #7a5c61;
    /*Makes links in lists them the same color as other text*/
    text-decoration: none;
    /*Removes the underline from links in lists*/
}

li a:hover {
    text-decoration: underline;
    /*Makes links in lists underlined on hover*/
}

.rightside ul {
    /*This only defines the list elements in "rightside". To affect all lists, just remove the .rightside*/
    list-style-type: none;
    /*Removes the dots*/
    margin-left: -30px;
    margin-bottom: -10px;
    /*Makes it line up a bit better*/
}

/*End of list styling*/

Frames

Yet another quite fast make. The contrast is kinda awful, but I think it works alright otherwise!

Page HTML:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Frames</title>
        <link rel="stylesheet" href="frames.css" />
    </head>

<body>
        <section>
            <div class="container">
                <div class="dropdown">
                    <span><em>navigation</em></span>
                    <div class="dropdown-content">
                        <a href="frames.html">main page</a><br /><br />
                        <a href="frames2.html">example page</a><br /><br />
                        <a href="info.html">information</a>
                    </div>
                </div>
                
                <div class="actual-page">
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis condimentum ipsum, ut
                        vehicula nisi posuere et. Maecenas congue dictum leo vel bibendum. Nulla vel euismod urna, at
                        accumsan dui. Donec in faucibus velit. Pellentesque fringilla mollis urna, sed ullamcorper sem
                        ultrices pellentesque. Morbi molestie justo ligula, at iaculis magna imperdiet ut. Duis
                        vulputate ipsum vitae eleifend feugiat. Duis ornare metus vel erat tincidunt pellentesque. Morbi
                        sed nisi purus. Nunc ac bibendum elit. Nulla vehicula metus non ipsum vestibulum, facilisis
                        condimentum lacus rhoncus. Duis bibendum velit sit amet libero posuere, vitae eleifend nisi
                        efficitur.<br />

Donec lobortis, dolor at auctor molestie, quam justo varius arcu, eu gravida arcu purus a nulla.
                        Nulla convallis purus id hendrerit finibus. Etiam ornare luctus eros, semper consectetur mauris
                        fermentum sed. Praesent urna ligula, rutrum at elit vel, consectetur consectetur purus.
                        Pellentesque dictum nisl eu finibus porta. Donec molestie sollicitudin leo vitae iaculis.
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Mauris in euismod lacus. Suspendisse blandit elementum dolor, a gravida nunc viverra et. Cras
                        vestibulum, dui bibendum condimentum commodo, ligula quam fermentum purus, ut ultricies risus
                        magna id purus. Vestibulum nunc erat, euismod at ligula id, tristique ornare massa. Proin id
                        lorem a tortor bibendum egestas. Nullam bibendum quis dolor ut molestie. Ut porttitor lectus
                        tellus, eget accumsan mauris facilisis eget. Nunc malesuada ipsum nisl, eget interdum tortor
                        tristique eget. Nulla luctus, magna eget maximus sollicitudin, mauris dolor imperdiet libero, id
                        blandit felis ante id erat.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis condimentum ipsum, ut
                        vehicula nisi posuere et. Maecenas congue dictum leo vel bibendum. Nulla vel euismod urna, at
                        accumsan dui. Donec in faucibus velit. Pellentesque fringilla mollis urna, sed ullamcorper sem
                        ultrices pellentesque. Morbi molestie justo ligula, at iaculis magna imperdiet ut. Duis
                        vulputate ipsum vitae eleifend feugiat. Duis ornare metus vel erat tincidunt pellentesque. Morbi
                        sed nisi purus. Nunc ac bibendum elit. Nulla vehicula metus non ipsum vestibulum, facilisis
                        condimentum lacus rhoncus. Duis bibendum velit sit amet libero posuere, vitae eleifend nisi
                        efficitur.<br />

Donec lobortis, dolor at auctor molestie, quam justo varius arcu, eu gravida arcu purus a nulla.
                        Nulla convallis purus id hendrerit finibus. Etiam ornare luctus eros, semper consectetur mauris
                        fermentum sed. Praesent urna ligula, rutrum at elit vel, consectetur consectetur purus.
                        Pellentesque dictum nisl eu finibus porta. Donec molestie sollicitudin leo vitae iaculis.
                        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        Mauris in euismod lacus. Suspendisse blandit elementum dolor, a gravida nunc viverra et. Cras
                        vestibulum, dui bibendum condimentum commodo, ligula quam fermentum purus, ut ultricies risus
                        magna id purus. Vestibulum nunc erat, euismod at ligula id, tristique ornare massa. Proin id
                        lorem a tortor bibendum egestas. Nullam bibendum quis dolor ut molestie. Ut porttitor lectus
                        tellus, eget accumsan mauris facilisis eget. Nunc malesuada ipsum nisl, eget interdum tortor
                        tristique eget. Nulla luctus, magna eget maximus sollicitudin, mauris dolor imperdiet libero, id
                        blandit felis ante id erat.
                    </p>
                </div>
                <div class="border-img"></div>
                
                <div class="footer">
                    
                    <h1>Title of the page</h1>
                </div>
            </div>
        </section>
    </body>
</html>

CSS:

body {
    background-color: #decbb4;
    background-image: url(bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: auto;
    color: white;
}
/*This is the image in the back. it has been made to fit to the area that is visible on your screen. The background color just ensures it's not white if the background image file messes up. "color" makes the text white.*/

@font-face {
    font-family: "title"; 
    src: url("Hallofest.ttf") format("truetype");
    /* or: */
    src: url("Hallofest.ttf") format("opentype"); /
}
/*This is where I make the CSS file understand that I want a different font.*/

section {
    margin: 0 auto;
    /*Centers the content*/
    padding: 8vh 0 0;
    /*Makes the content appear a little bit down on the page so it doesn't interfere with the frame. "vh" makes it adhere to the height of the screen it is being viewed on*/
    display: flex;
    /*Ensures the content stays within the div :)*/
    width: 600px;
    /*The width of the content.*/
    min-height: 90vh;
    /*makes the page (mainly the background) fit the screen it is viewed on*/
    text-align: center;
    /*makes text appear at the center of the page*/
}

a {
    color: white
}
/*This makes the links white as opposed to blue*/

/* ===== all the dropdown sections are related to the navigation menu. It is made so that every category can have sub-categories. I honestly wrote this code a long time ago and barely remember what each piece does lol ===== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    padding-bottom: 36px;
}

.dropdown-content a:hover {
    text-decoration: underline;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #decbb4;
    background-image: url(bg.png);
    background-size: 1000px;
    background-position: center;
    min-width: 160px;
    padding: 12px 16px;
    z-index: 2;
}

.dropdown-subcontent {
    display: none;
    position: absolute;
    background-color: #decbb4;
    background-image: url(bg.png);
    background-size: 1000px;
    background-position: center;
    min-width: 160px;
    padding: 12px 16px;
    z-index: 2;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-submenu:hover .dropdown-subcontent {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
/* ===== end of dropdown section ===== */

.actual-page {
    height: 49vh;
    width: 440px;
    margin-top: 14vh;
    /*This time this is what makes the content appear lower down on the page!*/
    padding: 0 80px 0;
    /*This just makes it so it appears inside the frame. Other frame widths require other padding*/
    overflow: scroll;
    /*This makes it so that content that would end up outside of the area is possible to scroll to!*/
    overflow-x: hidden;
    /*while this makes it so that there isn't a scroll bar at the bottom of the area*/
}

.border-img {
    z-index: -1;
    /*This puts the frame below the other frame in a "3D"-sense*/
    position: fixed;
    /*This makes it so that the placement of the frame can be decided independent of the other content on here it also conveniently keeps it centered.*/
    width: 440px;
    height: 51vh;
    margin-top: -55vh;
    background-image: url(border.png);
    /*makes the bg the image of my choice. No real reason to make it a background aside from not having to re-link it properly in all the html files. */
    background-size: 100% 100%;
    /*makes it the size specified above and not just part of that area*/
    background-repeat: no-repeat;
    /*makes it not repeat.*/
    padding: 5vh 79px;
    /*Without this it ends up the wrong size*/
}
/*note that the width is constant but the height adheres to the screen size!*/

.footer{
    margin: 1px 150px;
    height: 10vh;
    width: 300px;
     position: fixed;
    bottom: 9vh;
    text-align: center;
    /*makes the placement work*/
    font-family: title;
    /*calls for the correct font*/
   
}

.footer h1{
    font-size: 2.7em;
    /*makes the font slightly bigger than a standard header would be*/
    font-weight: lighter;
    /*makes the font slightly thinner and as such more legible imo*/
}

/* ===== Scrollbar CSS ===== */
/*Ngl, not my code... it's mostly self-explanatory though.*/
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #896f58 #decbb4;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #decbb4;
}

*::-webkit-scrollbar-thumb {
    background-color: #896f58;
    border-radius: 10px;
    border: 3px none #decbb4;
}

Neko

Site templates

Morte

Homepage HTML:

Page HTML:

CSS:

Doll-like

Page HTML:

CSS:

Frames

Page HTML:

CSS: