neocities boring customizable page layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Customizable Boring Layout</title>

<style>
    body {
        margin: 0;
        padding: 0;
        background: white;
        /* optional wallpaper:
        background: url('yourwallpaper.png') center/cover no-repeat;
        */
        font-family: "MS Gothic", sans-serif;
        display: flex;
        justify-content: center;
    }

    .container {
        width: 90%;
        max-width: 900px;
        text-align: center;
        padding: 20px 0;
    }

    header, footer {
        padding: 15px;
        font-size: 20px;
        font-weight: bold;
    }

    .tier {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin: 20px 0;
        flex-wrap: wrap;
    }

    /* Base box style */
    .box {
        border: 2px dashed rgba(0,0,0,0.15);
        border-radius: 8px;
        background: rgba(255,255,255,0.6);
        padding: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }

    /* Image wrapper so text can appear below */
    .box img {
        width: 100%;
        height: auto;
        aspect-ratio: 1.1 / 1;
        object-fit: cover;
        margin-bottom: 8px;
    }

    /* INDIVIDUAL BOX CUSTOMIZATION */
    .box1 { width: 200px; height: 220px; }
    .box2 { width: 220px; height: 220px; }
    .box3 { width: 380px; height: 220px; }
    .box4 { width: 220px; height: 220px; }
    .box5 { width: 220px; height: 220px; }
    .box6 { width: 500px; height: 220px; }
    .box7 { width: 180px; height: 220px; }
    .box8 { width: 200px; height: 220px; }
    .box9 { width: 220px; height: 220px; }
</style>

</head>

<body>
<div class="container">

    <header>HEADER</header>

    <!-- Tier 1 -->
    <div class="tier">
        <div class="box box1">
            <img src="" alt="">
            Type text here if you want
        </div>
        <div class="box box2">
            <img src="" alt="">
            Another customizable box
        </div>
    </div>

    <!-- Tier 2 -->
    <div class="tier">
        <div class="box box3">
            <blockquote>june 2026</blockquote>
            You can leave out the image completely and write some sort of blog post here!!!!!
        </div>
        <div class="box box4">
            <img src="" alt="">
            Or use both image + text
        </div>
    </div>

    <!-- Tier 3 -->
    <div class="tier">
        <div class="box box5">
            <img src="" alt="">
        </div>
    </div>

    <!-- Tier 4 -->
    <div class="tier">
        <div class="box box6">Box 6 text</div>
        <div class="box box7">Box 7 text</div>
        <div class="box box8"><img src="" alt=""></div>
    </div>

    <footer>footer</footer>


    <!-----

you can use and customize and mess with it as much as you want
no credit needed!!! ^^
by: mididump
________¶¶¶¶¶¶¶¶_____________¶¶¶¶¶¶¶¶
_______¶¶¶______¶¶_________¶¶______¶¶¶
______¶¶¶¶________¶¶_____¶¶________¶¶¶¶
_______¶¶¶______¶¶__¶¶¶¶¶__¶¶______¶¶¶
_________¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶
____________¶¶¶¶__¶¶¶¶¶¶¶¶¶__¶¶¶
__________¶¶¶¶¶¶¶¶__¶¶¶¶¶__¶¶¶¶¶¶¶¶
______¶¶¶¶¶¶¶¶______¶¶¶¶¶______¶¶¶¶¶¶¶¶
___¶¶¶¶¶¶¶¶__________¶¶¶__________¶¶¶¶¶¶¶¶
_____________________¶¶¶
_______¶¶¶¶¶¶¶¶¶¶____¶¶¶____¶¶¶¶¶¶¶¶¶¶
_____¶¶¶¶¶¶¶¶¶¶¶¶¶¶__¶¶¶__¶¶¶¶¶¶¶¶¶¶¶¶¶¶
___¶¶____________¶¶¶¶__¶¶¶¶____________¶¶
__¶¶¶______________¶¶¶¶¶¶______________¶¶¶
_¶¶¶¶_______¶¶¶¶¶¶¶__¶¶__¶¶¶¶¶¶¶_______¶¶¶¶
_¶¶¶¶_____¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶_____¶¶¶¶
_¶¶¶¶____¶¶¶¶______¶¶¶¶¶¶______¶¶¶¶____¶¶¶¶
_¶¶¶¶____¶¶¶¶________¶¶________¶¶¶¶____¶¶¶¶
__¶¶¶_____¶¶¶____¶¶¶¶¶¶¶¶¶¶____¶¶¶_____¶¶¶
___¶¶¶¶____¶¶¶¶____¶¶¶¶¶¶____¶¶¶¶____¶¶¶¶
_____¶¶¶¶____¶¶¶¶____¶¶____¶¶¶¶____¶¶¶¶
_______¶¶¶¶____¶¶¶¶______¶¶¶¶____¶¶¶¶
_________¶¶¶¶____¶¶¶¶__¶¶¶¶____¶¶¶¶
___________¶¶¶¶____¶¶¶¶¶¶____¶¶¶¶
_____________¶¶¶¶____¶¶____¶¶¶¶
_______________¶¶¶¶______¶¶¶¶
_________________¶¶¶¶__¶¶¶¶
___________________¶¶¶¶¶¶
____________________.¶¶
___________________¶¶¶¶¶¶
____________¶¶¶¶¶¶¶__¶¶__¶¶¶¶¶¶¶
__________¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶
_________¶¶¶¶______¶¶¶¶¶¶______¶¶¶¶
_________¶¶¶¶________¶¶________¶¶¶¶
__________¶¶¶____¶¶¶¶¶¶¶¶¶¶____¶¶¶
___________¶¶¶¶____¶¶¶¶¶¶____¶¶¶¶
_____________¶¶¶¶____¶¶____¶¶¶¶
_______________¶¶¶¶______¶¶¶¶
_________________¶¶¶¶__¶¶¶¶
___________________¶¶¶¶¶¶
_____________________¶¶
___________________¶¶¶¶¶¶
_____________________¶¶
___________________¶¶¶¶¶¶
____________¶¶¶¶¶¶¶__¶¶__¶¶¶¶¶¶¶
__________¶¶¶¶¶¶¶¶¶¶¶__¶¶¶¶¶¶¶¶¶¶¶
_________¶¶¶¶______¶¶¶¶¶¶______¶¶¶¶
_________¶¶¶¶________¶¶________¶¶¶¶
__________¶¶¶____¶¶¶¶¶¶¶¶¶¶____¶¶¶
___________¶¶¶¶____¶¶¶¶¶¶____¶¶¶¶
_____________¶¶¶¶____¶¶____¶¶¶¶
_______________¶¶¶¶______¶¶¶¶
_________________¶¶¶¶__¶¶¶¶
___________________¶¶¶¶¶¶
_____________________¶¶

--!>


</div>
</body>
</html>