GREEN template ~ leizy8499

- actually put your updates in this box
- please be kind to my code this is my first time making a template
- this box scrolls btw overflow auto is my BITCH
- can put this into an iframe ^_^

this is a moving marquee yay!! i recommend koba's infinite marquee for this space. you may have to resize this box a smidge in order to fit buttons i am unsure.

hi!! please read before using this template:

all elements in this template were handcrafted by me, LEITH!! LEIZY8499!! there are a few things that i ask before you use.

keep my credits down at the bottom of this page (or list the template under my name in some sort of "resources/credits" page; preferably with a link)

download any images/fonts and host them on your own pages ^_^

let me know you're using it! i would love to see how you fill THIS PAGE up with all of YOUR GLORY!! that's why i made this thing !!!!

thanks for considering my template for all of your awesome neocities/nekoweb needs. any questions? email me at leizy8499.neocities@gmail.com

all parts of this template are adjustable, so adjust away!

HTML 
            <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>GREEN template ~ leizy8499</title>
        <link rel="icon" href="https://leizy8499.neocities.org/favicons/musicnote.gif"/> 
        
    </head>
  
<body>   
    <div id="container">
        
        <div class="directory">
            <div class="header" style="border-top-left-radius: 20px;">directory</div>
                <a href=""><div class="link">homepage</div></a>
                <a href=""><div class="link">about</div></a>
                <a href=""><div class="link">blog</div></a>
                <a href=""><div class="link">projects</div></a>
            
            <div class="header">more links</div>
                <a href=""><div class="link">link 1</div></a>
                <a href=""><div class="link">link 2</div></a>
                <a href=""><div class="link">link 3</div></a>
                <a href=""><div class="link">link 4</div></a>
        </div>
        
        
        <div class="misc">
            this is just a box. just a simple box where you can put whatever you want. please put something in this box. or not. your decision. template works either way
            
        </div>
        
<main> 
    <div class="picture">
        <div class="box" style="width: 125px; height: 125px; position: relative; top: 35px; left: 30px; border-radius: 15px; background-size: cover; box-shadow: 5px 5px 5px grey;;
              background-image: url(https://i.pinimg.com/736x/db/d3/29/dbd3294850ffe8208090ec6f21bd2bbf.jpg);">  
        </div>
    </div>
    
    <div class="sidebar">
        this is just another little box. you can put stuff like youtube links here, maybe a little art ... music.. whatever works dude. i just remember seeing this thing that said that the lorem ipsum dolor filler text is boring soooo... enjoy my super original filler text that's so awesomee
    </div>
    
    <div class="statuscafe" style="width: 300px;">
            <div class="status" style="padding: 20px;"><div id="statuscafe-username" style="font-size:14px; margin-bottom: 5px;"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=leizy8499" defer></script>
        
            <div class="updates">
                <div class="header" style="margin: 0px; background: linear-gradient(to bottom left, #d2eab1, #d2eab1, #f7f7ec)">updates</div>
                <div class="box scrollbar-hide" style="overflow: auto; padding: 5px; height: 95px;">
                    - actually put your updates in this box<br>
                    - please be kind to my code this is my first time making a template<br>
                    - this box scrolls btw overflow auto is my BITCH<br>
                    - can put this into an iframe ^_^
                </div>
            </div>
    </div>
    
    <div class="buttons">
        <marquee>this is a moving marquee yay!! i recommend koba's infinite marquee for this space. you may have to resize this box a smidge in order to fit buttons i am unsure.</marquee>
    </div>
    
    <div class="content">
        hi!! please read before using this template:
        <p>all elements in this template were handcrafted by me, LEITH!! LEIZY8499!! there are a few things that i ask before you use.</p>
            <li>keep my credits down at the bottom of this page (or list the template under my name in some sort of "resources/credits" page; preferably with a link)</li>
            <li>download any images/fonts and host them on your own pages ^_^</li>
            <li>let me know you're using it! i would love to see how you fill THIS PAGE up with all of YOUR GLORY!! that's why i made this thing !!!!</li>
        thanks for considering my template for all of your awesome neocities/nekoweb needs. any questions? email me at <a href="mailto:leizy8499.neocities@gmail.com">leizy8499.neocities@gmail.com</a>
        <p>all parts of this template are adjustable, so adjust away!</p>
    </div>
        </main>
    </div>
                </body>
</html>

CSS 
            <style>
/* fonts go here */  
    @font-face{
        font-family: porkys;
        src:url(https://leizy8499.neocities.org/projects/templates/PORKYS_.TTF)
    }
    
    @font-face{
        font-family: rainyhearts;
        src:url(/fonts/zeldaxt.ttf);
    }
/* main container elements */    
    body{
        background: url(https://i.pinimg.com/736x/7a/eb/20/7aeb20c472b3d74bef976c44c60cf4d2.jpg); 
        background-size: cover;
        background-repeat: repeat-y;
    }
        
    #container{
        width: 1000px;
        margin: 120px auto;
        display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 1fr 1fr;
        grid-template-areas: 'directory main'
                             'misc main';
        grid-column-gap: 15px; 
        font-size: 1rem;
        font-family: serif;
    }
    
    .misc{ /*hey if you want the margins to look different mess with the padding. :P */
        grid-area: misc;
        padding: 10px;
        border: 10px solid white;
            border-bottom-left-radius: 25px;
        overflow:auto;
        background: white;
    }
    
    .directory{
        grid-area: directory;
        border: 10px solid white;
            border-top-left-radius: 25px;
        font-size: 20px;
        background: white;
    }
        .header{
            text-align: center; 
            padding: 10px; 
            background: #c4df9b; 
            font-family: porkys; 
                font-size: 20px;
                letter-spacing: 2px;
            text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
            border: 1px ;
    }
        .link{
            text-align: left;
            padding: 3px;
                padding-left: 15px; 
            background: linear-gradient(to bottom, #f7f7ec, #d2eab1);
            border: 1px solid #c4dca4;
            height: 20px;
            font-size: 18px;
    }
    
    main{
        grid-area: main;
        padding: 20px;
        border: 1px dashed #f7f7ec;
        display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 150px 50px 1fr;
            grid-template-areas: 'picture statuscafe'
                                 'picture buttons' 
                                 'sidebar content';
        background: white;
    }
    
/* "main" elements */    
    
    .picture{
        grid-area: picture;
        background-image: url(https://i.pinimg.com/736x/2c/e0/95/2ce09589c0f595483631ed85f3ddb730.jpg);
        background-size: cover;
    }
    .statuscafe{
        grid-area: statuscafe;
        background-image: url(https://leizy8499.neocities.org/projects/templates/1/speechbubble.gif);
        background-size: 100% 100%;
        display: grid;
            grid-template-columns: 300px 250px;
            grid-template-areas: 'status update';
    }
        .updates{
            grid-area: update;
            border: 1px solid #c4dca4;
            width: 210px;
            margin: 0 auto;
            height: 155px;
        }
    
    .buttons{
        grid-area: buttons;
        padding: 15px;
    }
    .sidebar{
        grid-area: sidebar; /* #e6f6c5*/
            background-color: #d2eab1;
            background: linear-gradient(to top right, #d2eab1, #d2eab1, #f7f7ec );
        border-radius: 10px;
            border: 1px dashed #f7f7ec;
        padding: 20px;
    }
    .content{
        grid-area: content;
        padding: 5px;
        margin-left: 20px;
    }

/* purely aesthetic-based things */
    a{text-decoration: none; color: black;}
    a:hover{font-style: italic;}
    
    li{list-style-image: url(http://img.photobucket.com/albums/v252/shaquanda/dumpitydump/pixelwixel/s13.gif); padding: 5px; margin-left: 20px;}
    
    .scrollbar-hide{
        -ms-overflow-style: none; 
        scrollbar-width: none;
    }
</style>