furin

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<title>f2u layout</title>

<style>


::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}



::selection {
  background-color: #fdf2f8;
  color: #8d7c76;
}

::-moz-selection {
  background-color: #fdf2f8;
  color: #8d7c76;
}
.mali-semibold-italic {
  font-family: "Mali", cursive;
  font-weight: 600;
  font-style: italic;
}
body {
 cursor: url(https://cur.cursors-4u.net/anime/ani-9/ani879.ani), url(https://cur.cursors-4u.net/anime/ani-9/ani879.png), auto !important;
    margin: 0;
    padding: 40px 0;
    background: #ebe1e5;
    font-family: "Mali", "MS UI Gothic", Arial, sans-serif;
    font-size: 14px;
}
/* ===== NAV CALENDAR BOX ===== */
.calendar {
    margin-top: 15px;
        border: #e0bfcc 3.5px ridge;
    border-radius: 10px;
    background: #e3cad4;
    padding: 4px;
    font-size: 11px;
    box-sizing: border-box;
}

/* ===== WEBESTOOLS CALENDAR OVERRIDES ===== */
.cal_calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* IMPORTANT */
}

.cal_calendar th,
.cal_calendar td {
       border: #e0bfcc 3.5px ridge;
    border-radius: 10px;
    text-align: center;
    padding: 2px;
    font-size: 10px;
}

.cal_calendar th {
    background: #dcdcdc;
    font-weight: bold;
}

.cal_calendar td {
    height: 18px;
}

.cal_today {
    background: #e3cad4;
    color: #6e6469;
    font-weight: bold;
}

.cal_days_bef_aft {
    background: #e3cad4;
    color: #6e6469;
}

/* ===== WRAPPER ===== */
.wrapper {
    width: 900px;
    margin: 0 auto;
    background: #ffffff;
 border: 32px solid;
  border-image: url('https://files.catbox.moe/9djkei.png') 22 repeat;
  border-radius: 30px;
}

/* ===== HEADER ===== */
.header {
    position: relative;
    height: 240px;
    background-image: url("https://files.catbox.moe/i7745u.jpg");
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid #000;
}

.header-text {
      font-family: "Mali", sans-serif;
    position: absolute;
    bottom: 10px;
    left: 10px;
    color:white;
        text-shadow: 2px 2px 0 #6e6469, 2px -2px 0 #6e6469, -2px 2px 0 #6e6469, -2px -2px 0 #6e6469, 2px 0px 0 #6e6469, 0px 2px 0 #6e6469, -2px 0px 0 #6e6469, 0px -2px 0 #6e6469;
    padding: 6px 10px;
    font-size: 60px;
}

h2{
   font-family: "Mali", sans-serif;
     color:white;
        text-shadow: 2px 2px 0 #6e6469, 2px -2px 0 #6e6469, -2px 2px 0 #6e6469, -2px -2px 0 #6e6469, 2px 0px 0 #6e6469, 0px 2px 0 #6e6469, -2px 0px 0 #6e6469, 0px -2px 0 #6e6469;
}

/* ===== MAIN AREA ===== */
.main {
    display: flex;
}

/* ===== NAV ===== */
.nav {
    width: 190px;
    border-right: 2px solid #000;
    padding: 10px;
    box-sizing: border-box;
}

.nav a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 6px;
    margin-bottom: 6px;
   background: white;
    border: 7px solid;
    border-image: url(https://files.catbox.moe/c11vk0.png) 5 fill round;
    border-image-outset: 2px;
    border-radius: 12px;
      color:white;
        text-shadow: 2px 2px 0 #6e6469, 2px -2px 0 #6e6469, -2px 2px 0 #6e6469, -2px -2px 0 #6e6469, 2px 0px 0 #6e6469, 0px 2px 0 #6e6469, -2px 0px 0 #6e6469, 0px -2px 0 #6e6469;
}

.nav a:hover {
    background: #dcdcdc;
}

/* ===== CALENDAR ===== */
.calendar {
    margin-top: 15px;
border-width: 7px;
    border-style: solid;
    border-image: url(https://files.catbox.moe/kgeylk.gif) 7 fill round;
    background: #e3cad4;
    padding: 6px;
    font-size: 12px;
      color:white;
        text-shadow: 2px 2px 0 #6e6469, 2px -2px 0 #6e6469, -2px 2px 0 #6e6469, -2px -2px 0 #6e6469, 2px 0px 0 #6e6469, 0px 2px 0 #6e6469, -2px 0px 0 #6e6469, 0px -2px 0 #6e6469;
}

.calendar-title {
  background: #e3cad4;
    text-align: center;
    border-bottom: 1px solid #000;
    margin-bottom: 5px;
    font-weight: bold;
    
}

.calendar table {
    width: 100%;
    border-collapse: collapse;
}

.calendar td {
  color:black;
  text-shadow: none;
        border: #e0bfcc 3.5px ridge;
    border-radius: 10px;
    text-align: center;
    padding: 3px;
    background: #fff;
    
}

/* ===== CONTENT SIDE ===== */
.content-area {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}

/* ===== SCROLL BOX ===== */
.content {
    height: 260px;
    overflow-y: auto;
    border: 2px solid #000;
    padding: 10px;
    margin-bottom: 10px;
}

.content h2 {
    margin-top: 0;
    font-size: 18px;
    border-bottom: 1px solid #000;
    padding-bottom: 4px;
}

/* ===== LOWER BOX ===== */
.lower-box {
    border: 2px solid #000;
    padding: 8px;
    background-image: url("https://files.catbox.moe/jo2faf.jpg");
    background-size: 200px 100px;
}

/* ===== TWO SMALL BOXES ===== */
.small-boxes {
    display: flex;
    gap: 8px;
}

/* ===== WINDOW BOX ===== */
.window-box {
    position: relative;
    width: 200px;
    height: 200px; /* square */
    border: 2px solid #000;
    background: #fff;
    overflow: hidden;
}

/* ===== SCROLLABLE TEXT BEHIND ===== */
.window-scroll {
    position: absolute;
    inset: 0;
    padding: 10px;
    font-size: 12px;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ===== WINDOW FRAME IMAGE ===== */
.window-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none; /* lets you scroll text */
}

/* ===== INNER BOXES ===== */
.small-boxes {
    display: flex;
    gap: 8px;
}

.small-box {
    flex: 1;
    border: 1px solid #000;
    background: rgba(255,255,255,0.85);
    padding: 6px;
    font-size: 12px;
}



</style>

<script>
/* ===== Imported Calendar JS from Webestools ===== */
function setStyle(el, style, value) {
    el.style[style] = value;
}

function opacity(el, opacity) {
    setStyle(el, "opacity", opacity / 100);
}

function calendar() {
    var date = new Date();
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getFullYear();
    var months = ["January","February","March","April","May","June","July",
                  "August","September","October","November","December"];
    var days_in_month = [31,28,31,30,31,30,31,31,30,31,30,31];

    if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
        days_in_month[1] = 29;
    }

    var total = days_in_month[month];
    var beg = new Date(year, month, 1).getDay();

    var html = "<table class='cal_calendar'><tr><th colspan='7'>" +
               months[month] + " " + year + "</th></tr>" +
               "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th>" +
               "<th>Thu</th><th>Fri</th><th>Sat</th></tr><tr>";

    var week = 0;

    for (var i = 0; i < beg; i++) {
        html += "<td class='cal_days_bef_aft'></td>";
        week++;
    }

    for (var i = 1; i <= total; i++) {
        if (week == 0) html += "<tr>";

        if (i == day) {
            html += "<td class='cal_today'>" + i + "</td>";
        } else {
            html += "<td>" + i + "</td>";
        }

        week++;
        if (week == 7) {
            html += "</tr>";
            week = 0;
        }
    }

    while (week != 0 && week < 7) {
        html += "<td class='cal_days_bef_aft'></td>";
        week++;
        if (week == 7) html += "</tr>";
    }

    html += "</table>";

    document.getElementById("calendar-container").innerHTML = html;
}
</script>
</head>

<body>

<div class="wrapper">

    <div class="header">
        <div class="header-text"><b>sitename</b></div>
    </div>

    <div class="main">

        <div class="nav">
            <a href="#"> Home</a>
            <a href="#">About</a>
            <a href="#">Diary</a>
            <a href="#">Links</a>
            <a href="#">Guestbook</a>

            <div id="calendar-container" class="calendar"></div>

<script>
calendar(); // run on page load
</script>

        </div>

        <div class="content-area">
            <div class="content">
                <h2>Main Content</h2>
                <p>
                    This box scrolls. Add lots of text, diary entries,
                    updates, or shrine content here.
                </p>
                <p>Old web sites loved scroll boxes.</p>
                <p>Lorem ipsum dolor sit amet...</p>
                <p>Lorem ipsum dolor sit amet...</p>
                <p>Lorem ipsum dolor sit amet...</p>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>

            <div class="lower-box">
                <div class="small-boxes">
                    <div class="small-box">
                        Status / Updates
                    </div>
<div class="window-box">
    <div class="window-scroll">
        <p>
            This text scrolls behind the window.
        </p>
        <p>
            put whatevr u wnt
        </p>
        <p>
            Long diary entries, thoughts,
            updates, or lyrics go here.
        </p>
        <p>
            Keep adding text and it will scroll.
        </p>
        <p>
            
        </p>
        <p>
            ✧ ✧ ✧ ✧ ✧
        </p>
    </div>

    <img
        src="https://files.catbox.moe/cso1wz.png"
        class="window-frame"
        alt="window frame">
</div>


                </div>
            </div>
        </div>

    </div>

</div>

</body>
</html>