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;
}

Neko

Site templates

Morte

Homepage HTML:

Page HTML:

CSS: