Free Layouts | girl ben Elohim

Rules of Use

Link back is not required, but its always appreciated!
You may edit colors, fonts, and images to fit your own aesthetic however you may please.
I only ask that you do not redistribute these as your own templates for sale or without proper credit to the original creators.
If you use one, I'd love to see it! Leave a message in the guestbook.

Ethereal Medieval Journal

A dreamy, ethereal web template perfect for a personal shrine or blog. Original template by repth.

Preview →

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethereal Medieval Cottagecore Theme</title>

    <!-- Google Fonts for Medieval/Ethereal aesthetic -->
    <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=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">

    <style>
      body {
        /* Soft ethereal parchment background layered with original lace */
        background-color: #f2f0e6;
        background-image: url('https://i.imgur.com/A6xdkX0.jpg');
        background-attachment: fixed;
        margin: 0px;
        color: #3b352c; /* Dark antique brown */
        overflow-x: hidden;
        font-family: 'Cormorant Garamond', serif;
        font-size: 19px;
      }

      /* Ornate top and bottom borders */
      #topborder {
        background-image: url('https://i.imgur.com/0vWS1mg.png');
        background-repeat: repeat-x;
        height: 73px;
        width: 100vw;
        position: fixed;
        top: 0px;
        z-index: 3;
      }

      #bottomborder {
        background-image: url('https://i.imgur.com/lv5pt9F.png');
        background-repeat: repeat-x;
        height: 73px;
        width: 100vw;
        position: fixed;
        bottom: 0px;
        z-index: 3;
      }

      #all {
        background-color: transparent;
        width: 1030px; /* Widened for 3 columns */
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      #side {
        width: 175px;
        margin-top: 100px;
        position: sticky;
        top: 100px;
      }

      #right-side {
        width: 175px;
        margin-top: 100px;
        position: sticky;
        top: 100px;
      }

      /* Soft parchment containers */
      #profile, #nav, #title, #content, .side-card {
        background-color: #fcfbf8;
        border: 1px solid #dcd3b6;
        box-shadow: 0 4px 15px rgba(100, 110, 80, 0.08);
      }

      #profile {
        border-radius: 8px 8px 30px 8px; /* Slightly arched medieval feel */
        width: 145px;
        margin-bottom: 25px;
        padding: 15px;
        position: relative;
      }

      #pfp {
        background-image: url('https://girlbenelohim.faith/Assets/fellowship.png');
        background-size: cover;
        background-position: center;
        width: 145px;
        height: 145px;
        border-radius: 5px 5px 20px 5px;
        border: 1px solid #dcd3b6;
        opacity: 0.95;
      }

      #profiletext {
        margin: 0px;
        text-align: justify;
        font-size: 16px;
        padding: 15px 5px 0px 5px;
        color: #524a3e;
      }

      #nav {
        width: 175px;
        border-radius: 8px;
        position: relative;
        padding-bottom: 10px;
      }

      #navheader {
        border-bottom: 1px double #c5a059;
        margin: 0px 10px;
        line-height: 20px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 20px;
        padding-bottom: 10px;
        font-family: 'Cinzel Decorative', serif;
        font-size: 22px;
        color: #364227;
      }

      ul {
        margin: 0px;
        padding: 15px 10px 10px 16px;
      }

      li {
        list-style-type: none;
        margin-bottom: 5px;
        font-size: 18px;
        color: #8c7d61;
      }

      #main {
        width: 605px;
        position: relative;
        margin-top: -20px;
      }

      #title {
        font-family: 'Cinzel Decorative', serif;
        border-bottom: 2px solid #c5a059;
        width: 540px;
        margin: 90px 0 0 0;
        color: #364227;
        border-radius: 15px 15px 0px 0px;
        padding-left: 20px;
        padding-right: 40px;
        padding-top: 25px;
        padding-bottom: 15px;
      }

      /* Replaced image bow with a large ethereal foliage symbol */
      #bow {
        position: absolute;
        right: 35px;
        top: 105px;
        z-index: 2;
        color: #c5a059;
        font-size: 40px;
        opacity: 0.6;
      }
      #bow::after {
        content: '❦';
      }

      #content {
        width: 570px;
        padding: 20px 15px 73px 15px;
        border-top: none;
        border-radius: 0px 0px 10px 10px;
      }

      .entry {
        width: 550px;
        margin: 0 auto 35px auto;
      }

      .entryhead {
        width: 100%;
        min-height: 80px;
        border-bottom: 1px solid #dcd3b6;
        padding-bottom: 10px;
        margin-bottom: 15px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 15px;
      }

      .icon {
        width: 80px;
        height: 80px;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid #dcd3b6;
        flex-shrink: 0;
      }
      
      .icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .date {
        padding-bottom: 5px;
        flex-grow: 1;
      }

      .date p {
        margin: 0px;
        font-family: 'Cinzel Decorative', serif;
        font-size: 13px;
        letter-spacing: 1px;
        color: #695f4e;
      }

      .datecolor {
        color: #a38545;
      }

      .header {
        padding-bottom: 5px;
        text-align: right;
      }

      .header h2 {
        margin: 0px;
        font-family: 'Cinzel Decorative', serif;
        font-size: 24px;
        color: #364227;
        font-weight: 700;
        line-height: 1.2;
      }

      .text {
        text-align: justify;
        line-height: 1.6;
        color: #4a4235;
      }

      /* Medieval Drop Cap Effect for the first letter of an entry */
      .text p:first-of-type::first-letter {
        font-family: 'Cinzel Decorative', serif;
        font-size: 3.2em;
        float: left;
        margin-top: -4px;
        margin-right: 8px;
        margin-bottom: -4px;
        color: #a38545;
        line-height: 1;
      }

      .text p {
        margin-top: 0;
        margin-bottom: 15px;
      }

      a {
        text-decoration: none;
        color: #556b2f;
        font-family: 'Cinzel Decorative', serif;
        font-weight: 700;
        transition: all 0.3s ease;
      }

      a:hover {
        color: #c5a059;
        text-shadow: 0 0 5px rgba(197, 160, 89, 0.4);
      }

      a:active {
        color: #8f723b;
      }

      /* Scrollbar restyling */
      ::-webkit-scrollbar {
        width: 8px; 
      }
          
      ::-webkit-scrollbar-track {
        background-color: #f2f0e6;
        border-left: 1px solid #dcd3b6;
      }

      ::-webkit-scrollbar-thumb {
        background-color: #8c9c76;
        border-radius: 4px;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background-color: #c5a059;
      }

      /* Additional Sidebar Cards */
      .side-card {
        width: 175px;
        border-radius: 8px;
        margin-bottom: 25px;
        position: relative;
        padding-bottom: 10px;
      }

      .card-title {
        border-bottom: 1px double #c5a059;
        margin: 0px 10px;
        line-height: 20px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 15px;
        padding-bottom: 10px;
        font-family: 'Cinzel Decorative', serif;
        font-size: 20px;
        color: #364227;
        text-align: center;
      }

      .card-body {
        padding: 10px 15px;
        font-size: 16px;
        color: #524a3e;
        line-height: 1.4;
      }

      #credit {
        font-family: 'Cinzel Decorative', serif;
        font-size: 12px;
        position: fixed;
        bottom: 65px;
        right: 15px;
        background-color: #fcfbf8;
        padding: 5px 10px;
        border: 1px solid #dcd3b6;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        z-index: 10;
      }

      /* Mobile Optimization Media Queries */
      @media (max-width: 1080px) {
        #all {
          width: 100%;
          padding: 90px 15px 90px 15px; /* Prevents overlap with fixed lace borders */
          box-sizing: border-box;
          flex-direction: column;
          align-items: center;
        }
        #side, #right-side {
          position: static;
          width: 100%;
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          gap: 20px;
        }
        #side > div, #right-side > div {
          width: 280px;
          max-width: 100%;
          margin-bottom: 10px;
          box-sizing: border-box;
        }
        #main {
          width: 100%;
          max-width: 605px;
          margin-top: 20px;
        }
        #title {
          width: 100%;
          box-sizing: border-box;
          margin-top: 0;
        }
        #content {
          width: 100%;
          box-sizing: border-box;
        }
        .entry {
          width: 100%;
          box-sizing: border-box;
        }
        #bow {
          display: none; /* Hide absolute decorative foliage on mobile to prevent overflow */
        }
      }

      @media (max-width: 600px) {
        #side > div, #right-side > div {
          width: 100%;
          max-width: 350px;
        }
        .entryhead {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 10px;
        }
        .header {
          text-align: center;
        }
        .date {
          text-align: center;
        }
      }

    </style>
  </head>

  <body>

    <div id="topborder"></div>
    <div id="bottomborder"></div>

    <div id="all">

      <div id="side">
       
       
  <!-- PROFILE TEXT (Change Profile Pic in Style Section Above) -->
        <div id="profile">
          <div id="pfp"></div> 
          <p id="profiletext">Welcome traveler, to my digital cottage. Here I document my musings, magical findings, and daily adventures.</p>
        </div>
        
        
  <!-- NAVIGATION -->
        <div id="nav">
          <h2 id="navheader">Chronicles</h2>

          <ul>
            <li>✤ <a href="#">My Grimoire</a></li>
            <li>✤ <a href="#">Forest Paths</a></li>
            <li>✤ <a href="#">Potions</a></li>
            <li>✤ <a href="#">Tavern Tales</a></li>
            <li>✤ <a href="#">Treasures</a></li>
            <li>✤ <a href="#">Allies</a></li>
            <li>✤ <a href="#">Parchments</a></li>
          </ul>
        </div>

      </div>

      <div id="main">

        <div id="bow"></div>

        <h1 id="title">Your Cool Site Title Here</h1>

        <div id="content">

          <!-- ENTRY START -->
          <div class="entry">
            <div class="entryhead">
              <div class="icon">
                <img src="https://girlbenelohim.faith/Assets/Downloadables/openeye_closed%20mouth.png" alt="Medieval aesthetic icon">
              </div>
              <div class="date">
                <p><span class="datecolor"><b>Scribed On:</b></span> 10/24/1342</p>
                <p><span class="datecolor"><b>Aura:</b></span> Ethereal & Calm</p>
              </div>
              <div class="header">
                <h2>A Morning in the Glade</h2>
              </div>
            </div>

            <div class="text">
              <p>The morning dew settled upon the leaves like tiny scattered diamonds across the forest floor, but my attention was quickly drawn upwards. A murder of crows had gathered in the ancient oak trees, their dark, iridescent feathers contrasting sharply against the pale misty sky.</p>
              <p>They seemed to be holding a secret council, exchanging sharp caws and melodic clicks that echoed through the quiet glade. I sat on a familiar mossy stump, wrapped in my thickest shawl, and watched them for hours.</p>
              <p>There is a strange comfort in their presence. They feel like keepers of old secrets, a beautiful reminder of the ancient, watchful magic that dwells deep within these woods.</p>
            </div>
          </div>
          <!-- ENTRY END -->

          <!-- ENTRY START -->
          <div class="entry">
            <div class="entryhead">
              <div class="icon">
                <img src="https://girlbenelohim.faith/Assets/Downloadables/October%20Girl%20-%20PNG%20(61).png" alt="Candle and books">
              </div>
              <div class="date">
                <p><span class="datecolor"><b>Scribed On:</b></span> 10/22/1342</p>
                <p><span class="datecolor"><b>Aura:</b></span> Studious</p>
              </div>
              <div class="header">
                <h2>Dusty Tomes</h2>
              </div>
            </div>

            <div class="text">
              <p>Lately, I've been making a concerted effort to dive into the world of classic literature. There's always been something deeply intimidating about those thick, dusty tomes with their archaic language and heavy themes, but I'm determined to push past the fear and see what all the fuss is about.</p>
              <p>I started my journey with Mary Shelley's <i>Frankenstein</i>, and I must admit, it's entirely different from what the pop-culture monster movies led me to expect. The gothic atmosphere is so rich, and the prose is surprisingly beautiful and tragic.</p>
              <p>It certainly takes patience to adjust to the pacing, but there's a unique reward in uncovering the timeless human emotions buried within these old, yellowed pages. I think <i>Jane Eyre</i> might be next on the reading list!</p>
            </div>
          </div>
          <!-- ENTRY END -->

          <!-- ENTRY START -->
          <div class="entry">
            <div class="entryhead">
              <div class="icon">
                <img src="https://girlbenelohim.faith/Assets/Downloadables/Heirloom%20Cottage%20-%2001_ANTIQUE_DECOR%20(5).png" alt="Wishbone show">
              </div>
              <div class="date">
                <p><span class="datecolor"><b>Scribed On:</b></span> 10/18/1342</p>
                <p><span class="datecolor"><b>Aura:</b></span> Nostalgic</p>
              </div>
              <div class="header">
                <h2>Wishbone</h2>
              </div>
            </div>

            <div class="text">
              <p>What's the story, Wishbone? Lately, I find myself reminiscing about the cozy afternoons spent watching that imaginative little Jack Russell Terrier. There was something truly magical about how seamlessly a tiny dog transported us into the grand worlds of classic literature.</p>
              <p>From the swashbuckling adventures of Robin Hood to the daring escapades of Don Quixote, Wishbone made these legendary tales accessible and utterly charming. It’s the perfect blend of nostalgia and literary love that I try to channel here in my own digital cottage.</p>
            </div>
          </div>
          <!-- ENTRY END -->

        </div>

      </div>

      <div id="right-side">

        <div class="side-card">
          <h2 class="card-title">Notices</h2>
          <div class="card-body">
            <p style="margin-top: 0;"><b>Update:</b> The tavern will be closed for the solstice festival!</p>
            <p style="margin-bottom: 0;">New potions added to the shop inventory.</p>
          </div>
        </div>

        <div class="side-card">
          <h2 class="card-title">Current Quest</h2>
          <div class="card-body" style="text-align: center;">
            <img src="https://girlbenelohim.faith/Assets/Downloadables/Heirloom%20Cottage%20-%2001_ANTIQUE_DECOR%20(2).png" style="width: 100%; border-radius: 5px; margin-bottom: 10px; border: 1px solid #dcd3b6;" alt="Current quest">
            <p style="margin: 0; font-size: 15px;">Seeking the lost crown of the elven king.</p>
          </div>
        </div>

        <div class="side-card">
          <h2 class="card-title">Guild</h2>
          <div class="card-body" style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;">
            <div style="width: 40px; height: 40px; background: #e3dece; border: 1px solid #dcd3b6; border-radius: 5px;"></div>
            <div style="width: 40px; height: 40px; background: #e3dece; border: 1px solid #dcd3b6; border-radius: 5px;"></div>
            <div style="width: 40px; height: 40px; background: #e3dece; border: 1px solid #dcd3b6; border-radius: 5px;"></div>
            <div style="width: 40px; height: 40px; background: #e3dece; border: 1px solid #dcd3b6; border-radius: 5px;"></div>
          </div>
        </div>

      </div>

    </div>

    <div id="credit">
      <a href="https://repth.neocities.org/theme" target="_blank">Theme by repth</a> | Ethereal Edit
    </div>

  </body>
</html>

Gardener's Digital Diary

A cozy cottagecore digital journal template perfect for tracking nature finds, recipes, and daily thoughts. Features drifting leaves and a warm retro vibe.

Preview →

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Name | Digital Journal Template</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Georgia', 'Times New Roman', serif;
      background: url('https://girlbenelohim.faith/Assets/Downloadables/Thrift%20Store%20Treasures%20-%20JPG%20Background%20(1).jpg') repeat;
      background-size: 200px;
      background-attachment: fixed;
      color: #4A3B3C; /* Dark earthy brown */
      line-height: 1.5;
      overflow-x: auto;
    }

    .nature-motes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }

    .mote {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      opacity: 0.6;
      animation: drift 15s linear infinite;
    }

    @keyframes drift {
      0% { transform: translateY(-5vh) translateX(0) rotate(0deg); opacity: 0; }
      10% { opacity: 0.8; }
      90% { opacity: 0.8; }
      100% { transform: translateY(105vh) translateX(30px) rotate(360deg); opacity: 0; }
    }

    .main-container {
      position: relative;
      z-index: 2;
      min-height: 100vh;
      max-width: 1024px;
      margin: 30px auto;
      background: rgba(253, 249, 241, 0.95); /* Warm creamy off-white */
      border: 6px double #C5B48B; /* PANTONE Cocoon */
      border-radius: 4px;
      box-shadow: 0 0 25px rgba(111, 60, 71, 0.2);
    }

    .hanging-plant {
      position: absolute;
      top: -5px;
      right: 20px;
      width: 160px;
      z-index: 10;
      pointer-events: none;
      filter: drop-shadow(2px 4px 5px rgba(74, 59, 60, 0.2));
    }

    .header-frame {
      background: linear-gradient(to bottom, rgba(248, 216, 201, 0.4), transparent); /* PANTONE Scallop Shell wash */
      border-bottom: 4px double #C5B48B; /* PANTONE Cocoon */
      padding: 0;
    }

    .title-bar {
      background: #A0AF91; /* PANTONE Smoke Green */
      color: #fff;
      padding: 8px;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      border-bottom: 2px dashed #9D9C50; /* PANTONE Lentil Sprout */
      letter-spacing: 1px;
    }

    .header-content {
      padding: 20px;
      text-align: center;
    }

    .main-title {
      font-size: 40px;
      color: #6F3C47; /* PANTONE Maroon */
      text-shadow: 2px 2px 0 #F7CAC9; /* PANTONE Rose Quartz */
      margin-bottom: 10px;
      font-weight: bold;
      text-transform: uppercase;
    }

    .subtitle {
      font-size: 18px;
      color: #859FA3; /* PANTONE Tourmaline */
      font-style: italic;
      margin-bottom: 20px;
    }

    .counter-section {
      background: #FDFBF7;
      border: 2px dashed #C5B48B; /* PANTONE Cocoon */
      padding: 10px;
      margin: 10px 20px;
      text-align: center;
      font-family: 'Courier New', monospace;
    }

    .navigation-frame {
      background: #FDFBF7;
      border: 2px dashed #C5B48B;
      margin: 0 20px 20px 20px;
    }

    .nav-title {
      background: #F7CAC9; /* PANTONE Rose Quartz */
      color: #6F3C47;
      padding: 6px;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      border-bottom: 1px dashed #C5B48B;
    }

    .nav-buttons {
      padding: 15px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .nav-btn {
      background: #F8D8C9; /* PANTONE Scallop Shell */
      border: 2px outset #F5B895; /* PANTONE Peach Quartz */
      color: #6F3C47;
      padding: 8px 16px;
      text-decoration: none;
      font-weight: bold;
      font-family: 'Georgia', serif;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 120px;
      text-align: center;
    }

    .nav-btn:hover {
      background: #F5B895;
      border: 2px inset #F5B895;
    }

    .nav-btn.active {
      background: #A0AF91; /* PANTONE Smoke Green */
      border: 2px inset #859FA3; /* PANTONE Tourmaline */
      color: #fff;
    }

    .content-frame {
      margin: 0 20px 20px 20px;
      border: 2px solid #C5B48B;
      background: #fff;
      min-height: 600px;
    }

    .content-title {
      background: #A0AF91;
      color: #fff;
      padding: 8px;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      border-bottom: 2px dashed #9D9C50;
    }

    .content-area {
      padding: 20px;
      display: none;
    }

    .content-area.active {
      display: block;
    }

    .sidebar-frame {
      float: right;
      width: 200px;
      margin: 0 0 20px 20px;
      border: 2px dashed #C5B48B;
      background: #FDFBF7;
    }

    .sidebar-title {
      background: #F7CAC9;
      color: #6F3C47;
      padding: 5px;
      text-align: center;
      font-weight: bold;
      font-size: 12px;
      border-bottom: 1px dashed #C5B48B;
    }

    .sidebar-content {
      padding: 15px;
      font-size: 12px;
    }

    .sidebar-content ul {
      list-style: none;
    }

    .sidebar-content li {
      margin: 8px 0;
      padding: 3px;
      border-left: 2px solid #A0AF91;
      padding-left: 8px;
    }

    .left-sidebar {
      float: left;
      margin: 0 20px 20px 0;
    }

    .stats-table {
      width: 100%;
      border: 1px solid #C5B48B;
      border-collapse: collapse;
      margin: 20px 0;
      font-size: 14px;
    }

    .stats-table th,
    .stats-table td {
      border: 1px solid #C5B48B;
      padding: 8px;
      text-align: left;
    }

    .stats-table th {
      background: #F7CAC9;
      color: #6F3C47;
      font-weight: bold;
    }

    .stats-table tr:nth-child(even) {
      background: rgba(248, 216, 201, 0.2);
    }

    .ancient-text-box {
      border: 3px double #859FA3; /* PANTONE Tourmaline */
      background: rgba(133, 159, 163, 0.1);
      padding: 20px;
      margin: 20px 0;
      font-style: italic;
      text-align: center;
      position: relative;
      color: #4A3B3C;
    }

    .ancient-text-box::before {
      content: '~';
      position: absolute;
      top: -12px;
      left: 20px;
      background: #FDFBF7;
      padding: 0 10px;
      font-size: 18px;
    }

    .ancient-text-box::after {
      content: '~';
      position: absolute;
      bottom: -12px;
      right: 20px;
      background: #FDFBF7;
      padding: 0 10px;
      font-size: 18px;
    }

    .ritual-box {
      border: 2px dashed #C5B48B;
      background: #FDFBF7;
      margin: 15px 0;
      padding: 0;
    }

    .ritual-header {
      background: linear-gradient(to right, #F7CAC9, #F8D8C9);
      color: #6F3C47;
      padding: 8px;
      font-weight: bold;
      cursor: pointer;
      position: relative;
      border-bottom: 1px dashed transparent;
    }

    .ritual-header::after {
      content: '[+]';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    .ritual-content {
      padding: 15px;
      display: none;
      border-top: 1px dashed #C5B48B;
    }

    .ritual-box.expanded .ritual-content {
      display: block;
    }

    .ritual-box.expanded .ritual-header::after {
      content: '[-]';
    }

    .blink-text {
      animation: blink 1.5s infinite;
      color: #9D9C50; /* PANTONE Lentil Sprout */
      font-weight: bold;
    }

    @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0.5; }
    }

    .footer-frame {
      background: linear-gradient(to top, rgba(248, 216, 201, 0.4), transparent);
      border-top: 4px double #C5B48B;
      padding: 20px;
      text-align: center;
      color: #4A3B3C;
    }

    .footer-links {
      display: table;
      width: 100%;
      border-spacing: 20px;
      margin-bottom: 20px;
    }

    .footer-section {
      display: table-cell;
      vertical-align: top;
      border: 2px dashed #C5B48B;
      background: rgba(253, 251, 247, 0.8);
      padding: 15px;
    }

    .footer-section h4 {
      background: #F7CAC9;
      color: #6F3C47;
      padding: 5px;
      margin: -15px -15px 10px -15px;
      text-align: center;
      font-size: 14px;
      border-bottom: 1px dashed #C5B48B;
    }

    .footer-section ul {
      list-style: none;
      padding-top: 10px;
    }
    
    .footer-section li {
      margin-bottom: 8px;
    }

    .footer-section a {
      color: #9B5665; /* PANTONE Malaga */
      text-decoration: underline;
      font-size: 12px;
    }

    .footer-section a:hover {
      color: #6F3C47;
      background: rgba(247, 202, 201, 0.3);
    }

    .visitor-counter {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      margin: 10px 0;
      color: #859FA3;
    }

    .web-ring {
      border: 1px solid #C5B48B;
      background: rgba(253, 251, 247, 0.6);
      padding: 10px;
      margin: 10px 0;
      text-align: center;
      font-size: 11px;
      color: #859FA3;
    }

    .scroll-marquee {
      background: rgba(160, 175, 145, 0.2);
      color: #4A3B3C;
      padding: 5px;
      white-space: nowrap;
      overflow: hidden;
      border: 1px dashed #A0AF91;
      margin: 10px 0;
    }

    .scroll-marquee span {
      display: inline-block;
      animation: scroll-left 30s linear infinite;
    }

    @keyframes scroll-left {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
    }

    @media (max-width: 768px) {
      .main-container {
        margin: 0;
        border: none;
        max-width: 100%;
        border-radius: 0;
      }

      .hanging-plant {
        width: 100px;
        right: 10px;
        top: 0;
      }

      .sidebar-frame {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
      }

      .footer-section {
        display: block;
        margin-bottom: 20px;
      }

      .nav-buttons {
        flex-direction: column;
        align-items: center;
      }
    }
    
    /* Typography formatting for content */
    p {
      margin-bottom: 15px;
    }
    h2 {
      margin: 20px 0 10px 0;
      color: #6F3C47;
      font-size: 20px;
      border-bottom: 1px dashed #C5B48B;
      padding-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="nature-motes" id="motes"></div>

  <div class="main-container">
    <!-- Decorative Hanging Plant -->
    <img src="https://girlbenelohim.faith/Assets/Downloadables/Thrift%20Store%20Treasures%20-%20PNG%20(11).png" alt="Hanging Plants" class="hanging-plant">

    <!-- Header Frame -->
    <div class="header-frame">
      <div class="title-bar">
       A Cozy Cottagecore Digital Journal 
      </div>

      <div class="header-content">
        <div class="main-title">YOUR NAME HERE</div>
        <div class="subtitle"> Your Subtitle Goes Here. Foraging for Knowledge. Keeper of Recipes. </div> 

        <div class="scroll-marquee">
          <span>~ Welcome to my cozy corner ~ Baking bread ~ Pressing flowers ~ Wandering the woods ~ Sipping tea ~ </span>
        </div>
      </div>

      <div class="counter-section">
        <div class="visitor-counter">
          <div class="blink-text">🌷 THE GARDEN IS GROWING 🌷</div>
          Site Visitors: <span id="visitor-count">001,847</span> | Days Offline: <span id="days-count">384</span><br>
          Last Updated: 01/01/2026 <span id="last-update"></span>
        </div>
      </div>
    </div>
    
    <!-- Navigation Frame -->
    <div class="navigation-frame">
      <div class="nav-title">~ DIRECTORY ~</div>
      <div class="nav-buttons">
        <button class="nav-btn active" onclick="showTab('tab-about')">ABOUT ME</button>
        <button class="nav-btn" onclick="showTab('tab-projects')">PROJECTS</button>
        <button class="nav-btn" onclick="showTab('tab-blog')">JOURNAL / BLOG</button>
        <button class="nav-btn" onclick="showTab('tab-webrings')">WEBRINGS</button>
        <button class="nav-btn" onclick="showTab('tab-guestbook')">GUESTBOOK</button>
      </div>
    </div>

    <!-- Content Frame -->
    <div class="content-frame">
      <div class="content-title" id="content-title"> ~ WELCOME TO MY COTTAGE ~</div>

      <!-- About Tab -->
      <div class="content-area active" id="tab-about">
        
        <!-- Right Sidebar -->
        <div class="sidebar-frame">
          <div class="sidebar-title">CURRENT SEASON</div>
          <div class="sidebar-content">
            <ul>
              <li><strong>Location:</strong> The Woods</li>
              <li><strong>Occupation:</strong> Forager</li>
              <li><strong>Zodiac:</strong> Your Sign</li>
              <li><strong>Favorite Color:</strong> Sage Green</li>
              <li><strong>Currently Listening:</strong> Acoustic Folk</li>
            </ul>
          </div>
        </div>

        <!-- Left Sidebar -->
        <div class="sidebar-frame left-sidebar">
          <div class="sidebar-title">LATEST HARVEST</div>
          <div class="sidebar-content">
            <ul>
              <li><em>01/01/26</em> - Planted the spring bulbs!</li>
              <li><em>12/15/25</em> - Added new recipes.</li>
              <li><em>11/30/25</em> - Foraged some wild mushrooms.</li>
            </ul>
          </div>
        </div>

        <h2>HELLO, TRAVELER!</h2>

        <p>Welcome to my personal slice of the web. This is a space where I keep my thoughts, projects, and resources safe from the ever-changing algorithms of the modern internet. Feel free to stay a while and look around!</p>

        <p>If you're using this template, you can edit this text right inside the HTML document. Look for the `<div class="content-area active" id="tab-about">` tag to change what appears on the homepage!</p>

        <div class="ancient-text-box">
          <i>"The woods are lovely, dark and deep."</i> - Robert Frost
        </div>

        <h2>MY CURRENT STUDIES</h2>

        <table class="stats-table">
          <tr>
            <th>Subject</th>
            <th>Course/Topic</th>
            <th>Institution/Source</th>
          </tr>
          <tr>
            <td>Computer Science</td>
            <td>Introduction to Web Development</td>
            <td>Online Resource</td>
          </tr>
          <tr>
            <td>Art History</td>
            <td>Retro Web Aesthetics</td>
            <td>Independent Study</td>
          </tr>
          <tr>
            <td>Philosophy</td>
            <td>Digital Minimalism</td>
            <td>Online Open Course</td>
          </tr>
        </table>

        <div class="ritual-box">
          <div class="ritual-header">Click Here to Reveal Hidden Info</div>
          <div class="ritual-content">
            <p><strong>Congratulations!</strong> You found the hidden collapsible box.</p>
            <p>This is a great place to put long texts, poems, extra links, or anything else you want to tuck away to save space. You can duplicate the HTML for this box as many times as you like.</p>
          </div>
        </div>

      </div>

      <!-- Projects Tab -->
      <div class="content-area" id="tab-projects">
        <h2>RECENT WORKS</h2>
        <p>Here you can list out all of your cool projects. Add images, links, or more tables!</p>
        <ul>
          <li>Project 1 - A brief description goes here.</li>
          <li>Project 2 - A brief description goes here.</li>
          <li>Project 3 - A brief description goes here.</li>
        </ul>
      </div>

      <!-- Blog Tab -->
      <div class="content-area" id="tab-blog">
        <h2>DIGITAL JOURNAL</h2>
        <p>Write your blog posts here, or link out to external platforms like Substack, Medium, or Tumblr.</p>
      </div>

      <!-- Webrings Tab -->
      <div class="content-area" id="tab-webrings">
        <h2>WEBRINGS</h2>
        <p>A collection of interconnected sites from the neighborhood.</p>
        <div class="web-ring" style="margin-top: 20px;">
          <strong>THE COTTAGECORE RING</strong><br>
          <a href="#"><< Prev</a> | <a href="#">Random</a> | <a href="#">Next >></a><br>
        </div>
      </div>

      <!-- Guestbook Tab -->
      <div class="content-area" id="tab-guestbook">
        <h2>GUESTBOOK</h2>
        <p>Thanks for visiting! Please leave a note in my guestbook before you wander off.</p>
        <div style="border: 2px dashed #C5B48B; padding: 20px; background: #FDFBF7; max-width: 400px; margin: 0 auto; text-align: left;">
          <p style="margin-bottom: 10px;"><strong>Name:</strong> <input type="text" style="width: 100%; border: 1px solid #C5B48B; padding: 5px; background: #fff;" placeholder="Your Name..."></p>
          <p style="margin-bottom: 10px;"><strong>Message:</strong> 
          <!-- Using HTML entities for the textarea tag specifically so it doesn't break the outer code block wrapper -->
          <textarea style="width: 100%; border: 1px solid #C5B48B; padding: 5px; background: #fff; height: 80px;" placeholder="I loved your site... ^_^"></textarea>
          </p>
          <button class="nav-btn" style="width: 100%;">SIGN GUESTBOOK</button>
        </div>
        <div style="margin-top: 30px;">
          <p><em>Recent Entries:</em></p>
          <div style="border: 1px solid #C5B48B; padding: 10px; background: rgba(248, 216, 201, 0.2); margin-bottom: 10px;">
            <strong>Anonymous Wanderer</strong> says:<br>
            Such a cozy space! <3
          </div>
        </div>
      </div>

    </div>

    <!-- Footer Frame -->
    <div class="footer-frame">
      <div class="web-ring">
        <strong>WEB RINGS & COMMUNITIES</strong><br>
        <a href="#"><< Prev</a> | <a href="#">Random</a> | <a href="#">Next >></a><br>
        Retro Web Ring
      </div>

      <div class="footer-links">
        
        <div class="footer-section">
          <h4>RECENT POSTS</h4>
          <ul>
            <li><a href="#">Blog Post Title 1</a></li>
            <li><a href="#">Blog Post Title 2</a></li>
            <li><a href="#">Blog Post Title 3</a></li>
            <li><a href="#">Blog Post Title 4</a></li>
          </ul>
        </div>

        <div class="footer-section"> 
          <h4>WEBRINGS</h4>
          <ul>
            <li><a href="#">The Cottagecore Ring</a></li>
            <li><a href="#">Retro Web Archives</a></li>
            <li><a href="#">Template Credits</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h4>CONNECT</h4>
          <ul>
            <li><a href="mailto:your-email@example.com">Email Me</a></li>
            <li><a href="#">Twitter / X</a></li>
            <li><a href="#">GitHub</a></li>
          </ul>
        </div>
        
      </div>

                    <div class="visitor-counter">
        <div class="blink-text">※ SITE IS TENDED WITH LOVE ※</div>
        <p>Copyright © 2026 YOUR NAME - All Rights Reserved.<br>
        Powered by HTML, CSS, and Sunlight.<br>
        <span class="blink-text">Harvest Frequency: 902–928 MHz </span></p>
      </div>
    </div>
  </div>

  <script>
    // Create falling leaves / dust motes
    function createMotes() {
      const motesContainer = document.getElementById('motes');
      const numMotes = 50;
      const colors = ['#A0AF91', '#C5B48B', '#F7CAC9', '#F8D8C9']; // Smoke Green, Cocoon, Rose Quartz, Scallop Shell

      for (let i = 0; i < numMotes; i++) {
        const mote = document.createElement('div');
        mote.className = 'mote';
        mote.style.left = Math.random() * 100 + '%';
        mote.style.top = Math.random() * 100 + '%';
        mote.style.animationDelay = Math.random() * 5 + 's';
        mote.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        motesContainer.appendChild(mote);
      }
    }

    // Tab switching functionality
    function showTab(tabName) {
      // Remove active class from all buttons
      document.querySelectorAll('.nav-btn').forEach(btn => {
        btn.classList.remove('active');
      });

      // Add active class to clicked button
      if(event && event.target) {
        event.target.classList.add('active');
      }

      // Hide all content areas
      document.querySelectorAll('.content-area').forEach(area => {
        area.classList.remove('active');
      });

      // Show selected content area
      document.getElementById(tabName).classList.add('active');

      // Update the main title based on the tab selected
      const titles = {
        'tab-about': '~ WELCOME TO MY COTTAGE ~',
        'tab-projects': '~ HANDCRAFTED WARES & PROJECTS ~',
        'tab-blog': '~ RECIPES, THOUGHTS & RAMBLINGS ~',
        'tab-webrings': '~ WEBRINGS & LINKS ~',
        'tab-guestbook': '~ SIGN MY GUESTBOOK ~'
      };

      document.getElementById('content-title').textContent = titles[tabName] || '~ COTTAGE JOURNAL ~';
    }

    // Collapsible box logic
    document.addEventListener('click', function(e) {
      if (e.target.classList.contains('ritual-header')) {
        const ritualBox = e.target.parentElement;
        ritualBox.classList.toggle('expanded');
      }
    });

    // Classic web counter animations
    function updateCounters() {
      const visitorCount = document.getElementById('visitor-count');
      const daysCount = document.getElementById('days-count');

      if (visitorCount && daysCount) {
        let currentVisitors = parseInt(visitorCount.textContent.replace(/,/g, ''));
        currentVisitors += Math.floor(Math.random() * 3) + 1;
        visitorCount.textContent = currentVisitors.toLocaleString().padStart(7, '0');

        let currentDays = parseInt(daysCount.textContent.replace(/,/g, ''));
        currentDays += Math.floor(Math.random() * 2);
        daysCount.textContent = currentDays.toLocaleString();
      }
    }

    // Nature effects (breeze and falling leaves)
    function addNatureEffects() {
      // Rare slight warm tint
      if (Math.random() < 0.05) {
        document.body.style.filter = 'sepia(0.2)';
        setTimeout(() => {
          document.body.style.filter = 'sepia(0)';
        }, 300);
      }

      // Rare floating text
      if (Math.random() < 0.02) {
        const whisper = document.createElement('div');
        const phrases = ['...a warm breeze blows...', '...the scent of pine...', '...birds chirping...'];
        whisper.textContent = phrases[Math.floor(Math.random() * phrases.length)];
        whisper.style.position = 'fixed';
        whisper.style.top = Math.random() * 80 + 10 + '%';
        whisper.style.left = Math.random() * 80 + 10 + '%';
        whisper.style.transform = 'translate(-50%, -50%)';
        whisper.style.color = '#859FA3'; // Tourmaline
        whisper.style.fontSize = '14px';
        whisper.style.fontFamily = "'Georgia', serif";
        whisper.style.fontStyle = 'italic';
        whisper.style.pointerEvents = 'none';
        whisper.style.zIndex = '999';
        whisper.style.opacity = '0';
        whisper.style.transition = 'opacity 3s ease';

        document.body.appendChild(whisper);

        setTimeout(() => {
          whisper.style.opacity = '0.7';
          setTimeout(() => {
            whisper.style.opacity = '0';
            setTimeout(() => {
              whisper.remove();
            }, 3000);
          }, 2000);
        }, 100);
      }
    }

    // Initialize scripts on load
    window.addEventListener('load', function() {
      createMotes();
      setInterval(updateCounters, 30000);
      setInterval(addNatureEffects, 5000);
    });

    // Retro right-click protection
    document.addEventListener('contextmenu', function(e) {
      if (Math.random() < 0.3) {
        e.preventDefault();
        alert('Please do not trample the flowerbeds! (Source code is safe though)');
      }
    });
  </script>
</body>
</html>

Cottage Garden Windows

A cozy, draggable window layout featuring a custom music player, image carousel, and stitched borders. Originally by poempuppy.

Preview →

<!--
LAYOUT ORIGINALLY MADE BY POEMPUPPY
https://poempuppy.neocities.org
poempuppy [at] gmail.com 

MODIFIED FOR COTTAGECORE THEME
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cottage Garden ♡</title>
    <style>
        /* COTTAGE CORE THEME OVERRIDE */
        
        .credit {
            position: absolute;
            top: 10px; 
            left: 10px; 
            font-size: 16px;
            background: var(--primary);
            padding: 5px 10px;
            border-radius: 10px;
            border: 2px dashed var(--secondary);
        }

        body {
            margin: 0; 
            padding: 0;  
            display: flex;
            flex-direction: column;
            gap: 20px; 
            background-image: url('https://girlbenelohim.faith/Assets/Layouts/Heirloom%20Cottage_BACKGROUNDS(3).jpg');
            background-size: 200px; /* Adjusted to tile the pattern smaller */
            align-items: center;
            font-family: "Georgia", "Palatino Linotype", "Book Antiqua", serif; /* Cozy serif fonts */
            min-height: 100vh; 
            color: var(--secondary); 
        }

        :root {
            /* Cottagecore Palette */
            --primary: #fdfbf7;        /* Creamy off-white */
            --secondary: #6e5c4f;      /* Warm, soft brown for text/borders */
            --hover: #e8eedb;          /* Soft sage green */
            --title-bg: #c2d5aa;       /* Muted leafy green for title bars */
            --box-shadow: rgba(110, 92, 79, 0.25); /* Earthy brown shadow */
            
            --border-radius: 12px;     /* Softer corners */
            --border-style: 2px dashed var(--secondary); /* Stitched crafty look */
        }

        a {
            text-decoration: none;
            color: inherit; 
        }

        p {
            margin: 0; 
            font-size: 18px; /* Adjusted slightly for serif readability */
            line-height: 1.4;
        }

        .bold {
            font-weight: bold;
        }

        /* Header Text (Replaced the gif) */
        header {
            margin-top: 40px;
            background: var(--primary);
            padding: 15px 30px;
            border-radius: 20px;
            border: var(--border-style);
            box-shadow: 4px 4px var(--box-shadow);
        }
        
        .header-logo-text {
            font-size: 32px;
            font-weight: bold;
            color: var(--secondary);
            font-style: italic;
            letter-spacing: 1px;
            margin: 0;
        }

        .container {
            display: flex;
            gap: 30px; 
            width: 100%;
            min-height: 100vh;
            justify-content: center;
            max-width: 1400px; /* Constrained slightly for better reading width */
        }

        .left-sidebar, .right-sidebar {
            height: 100%; 
            flex: 1;
            min-height: 100vh;
            padding: 30px; 
            display: flex;
            flex-direction: column;
            gap: 30px; 
        }

        main {
            flex: 2;
            padding: 30px; 
            padding-top: 30px; /* Adjusted to align with sidebars */
            display: flex;
            flex-direction: column;
            gap: 30px; 
        }

        .window {
            display: flex;
            flex-direction: column;
            padding: 0; /* Removed padding to let title bar go edge-to-edge */
            background-color: var(--primary);
            box-shadow: 4px 4px var(--box-shadow); 
            border: var(--border-style); 
            border-radius: var(--border-radius);
            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Changed from 'all' to prevent drag lag */
            overflow: hidden; /* Keeps the title bar inside the rounded corners */
        }

        .window-title-bar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 22px;
            border-bottom: var(--border-style); 
            padding: 8px 12px; 
            background-color: var(--title-bg);
            font-weight: bold; 
            font-style: italic;
        }

        .window-icon-bar {
            display: flex;
            gap: 5px; 
            font-weight: bold;
        }

        .window-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid var(--secondary); 
            border-radius: 50%; /* Make window buttons circular */
            font-size: 16px;
            width: 22px;
            height: 22px; 
            background: var(--primary);
            cursor: pointer;
        }
        
        .window-icon:hover {
            background: var(--hover);
        }

        .window-content {
            background-color: transparent;
            gap: 10px; 
            padding: 15px; 
        }

        .window-content.bio {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .window-content-bio-list {
            display: flex;
            flex-direction: column; 
            gap: 5px;
        }

        .pfp {
            width: 80px;
            aspect-ratio: 1;
            border: var(--border-style); 
            border-radius: 10px;
            object-fit: cover;
        }

        .contact-username:hover {
            border-bottom: 2px dotted var(--secondary); 
        }

        .contact-link {
            display: flex;
            margin-bottom: 5px;
        }

        .window-content-img {
            width: 100%; 
            aspect-ratio: 1; /* Keeps the carousel a neat square */
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid var(--secondary);
        }

        /* Carousel Styles */
        .window-content.img {
            position: relative;
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: var(--primary);
            border: 2px solid var(--secondary);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            color: var(--secondary);
            font-weight: bold;
            transition: background 0.2s;
        }

        .carousel-btn:hover {
            background: var(--title-bg);
        }

        .carousel-btn.prev { left: 20px; }
        .carousel-btn.next { right: 20px; }

        .window-content.nav {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        button {
            padding: 6px 15px; 
            border-radius: 15px; /* Rounded pill buttons */
            background-color: var(--primary);
            border: var(--border-style); 
            font-family: inherit;
            font-size: 18px;
            color: inherit; 
            transition: all 0.3s ease;
            cursor: pointer;
        }

        button:hover {
            background-color: var(--hover);
        }

        .button-txt {
            transition: all 0.3s ease;
        }

        .button-txt:hover {
            border-bottom: 2px dotted var(--secondary); 
        }

        .window-content.music {
            display: flex;
            gap: 15px; 
            align-items: center;
        }

        .album-cover {
            width: 60px;
            height: 60px;
            border: none; 
            border-radius: 10px;
            object-fit: contain;
            background: transparent;
        }

        .music-player {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .song-author {
            font-size: 16px;
            font-style: italic;
        }

        .music {
            display: flex;
            justify-content: space-between;
            gap: 15px; 
            margin-top: 10px; 
            align-items: center;
        }

        .progress-bar {
            position: relative;
            height: 6px; 
            width: 80%;
            background-color: #dcd4cb; /* Slightly darker cream */
            border-radius: 3px;
            cursor: pointer;
        }

        .progress-dot {
            position: absolute;
            top: -3px; 
            left: 0; 
            width: 12px; 
            height: 12px; 
            background-color: var(--secondary);
            border-radius: 50%;
        }

        .music-time {
            width: 20%;
            font-size: 14px;
            text-align: right;
        }

        .window-content.home {
            display: flex;
            gap: 20px; 
        }

        .home-txt {
            display: flex;
            flex-direction: column;
            gap: 15px; 
        }

        .home-img {
            aspect-ratio: 1;
            width: 250px;
            height: 250px; 
            border: var(--border-style);
            border-radius: 10px;
            object-fit: cover;
        }

        .window-content.other-sites {
            display: flex;
            gap: 2px; 
            padding: 10px;
        }

        .other-sites-scroll-box {
            display: flex;
            gap: 10px;
        }

        .button {
            border-radius: 4px;
        }

        .window-content.link-back {
            display: flex;
            flex-direction: column;
            gap: 10px; 
            align-items: center;
            justify-content: center;
        }

        .site-btn {
            width: auto; 
            height: 40px; 
            image-rendering: pixelated;
        }

        textarea {
            background-color: var(--hover);
            color: var(--secondary); 
            font-family: inherit;
            font-size: 14px;
            border: var(--border-style);
            border-radius: 8px;
            padding: 8px;
            width: 90%;
            resize: vertical;
        }

        .window-content.webrings {
            display: flex;
            flex-direction: column;
            gap: 10px; 
            overflow-y: scroll;
            max-height: 200px;
            scrollbar-color: var(--title-bg) var(--primary);
            scrollbar-width: thin;
        }

        .webring-placeholder-box {
            border: var(--border-style); 
            border-radius: 8px;
            height: 150px; 
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 15px;
            background: var(--hover);
        }

        /* Responsive adjustments */
        @media (max-width: 900px) {
            .container {
                flex-direction: column;
                padding: 10px;
            }
            .left-sidebar, .right-sidebar, main {
                min-height: auto;
                width: 100%;
                padding: 10px;
            }
            .window-content.home {
                flex-direction: column;
            }
            .home-img {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>

<body>
    <a href="https://poempuppy.neocities.org" target="_blank">
        <div class="credit">original layout template made by poempuppy</div>
    </a>
    <header>
        <a href="index.html">
            <h1 class="header-logo-text">Your Cool Site Title Here</h1>
        </a>
    </header>
    <div class="container">
        <aside class="left-sidebar">
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">bio</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content bio">
                    <div class="window-content-bio-list">
                        <p><span class="bold">age :</span> ancient</p>
                        <p><span class="bold">pronouns :</span> fae/she</p>
                        <p><span class="bold">location :</span> the woods</p>
                    </div>
                    <!-- Bunny butt gif for the profile picture! -->
                    <img class="pfp" src="https://girlbenelohim.faith/Assets/4bunny-butt.gif" alt="Bunny butt">
                </div>
            </div>
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">contact</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content contact">
                    <a href="mailto:youremail@gmail.com" class="contact-link">
                        <p><span class="bold">mail :</span></p>
                        <p><span class="contact-username">you@gmail.com</span></p>
                    </a>

                    <a href="https://yourcontactlink.com" target="_blank" class="contact-link">
                        <p><span class="bold">tumblr :</span></p>
                        <p><span class="contact-username">username</span></p>
                    </a>

                    <a href="https://yourcontactlink.com" target="_blank" class="contact-link">
                        <p><span class="bold">pinterest :</span></p>
                        <p><span class="contact-username">username</span></p>
                    </a>
                </div>
            </div>
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">img</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content img">
                    <!-- Carousel -->
                    <button class="carousel-btn prev" id="prevBtn">❮</button>
                    <img class="window-content-img" id="carouselImg" src="https://girlbenelohim.faith/Assets/Downloadables/Thrift%20Store%20Treasures%20-%20PNG%20(39).png" alt="Gallery Image">
                    <button class="carousel-btn next" id="nextBtn">❯</button>
                </div>
            </div>

            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">recent posts</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <p><span class="bold">Nov 12</span> 🍂 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Autumn foraging guide</a></p>
                        <p><span class="bold">Oct 31</span> 🎃 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Carving pumpkins & roasting seeds</a></p>
                        <p><span class="bold">Oct 15</span> 🥧 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Grandma's famous pie recipe</a></p>
                        <p><span class="bold">Sep 28</span> 🌿 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">How I press my wildflowers</a></p>
                    </div>
                </div>
            </div>

        </aside>
        <main>
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">navigation</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content nav">
                    <button><span class="button-txt">garden</span></button>
                    <button><span class="button-txt">recipes</span></button>
                    <button><span class="button-txt">library</span></button>
                    <button><span class="button-txt">friends</span></button>
                    <button><span class="button-txt">tea time</span></button>
                </div>
            </div>
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">music player</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content music">
                    <!-- Spunky gif for the album cover -->
                    <img class="album-cover" src="https://girlbenelohim.faith/Assets/spunky2.gif" alt="Spunky animation">

                    <div class="music-player">
                        <p class="song-title bold">Woodland Lullaby</p>
                        <div class="song-author">forest sounds</div>
                        <audio class="audio" src="https://files.catbox.moe/7bij9x.mp3"></audio>
                        <div class="music">
                            <div class="progress-bar">
                                <div class="progress-dot"></div>
                            </div>
                            <div class="music-time bold">0:00 / 0:00</div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">welcome</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content home">
                    <div class="home-txt">
                        <p>Welcome to my little corner of the woods! I modified this wonderful layout by Poempuppy to feel a bit softer and cozier.</p>
                        <p>Feel free to look around, stay for a cup of tea, and listen to the music player above. The windows have been "stitched" together to create a warm scrapbook feel.</p>
                    </div>
                    <!-- Cozy room image -->
                    <img class="home-img" src="https://girlbenelohim.faith/Assets/Downloadables/Thrift%20Store%20Treasures%20-%20PNG%20(34).png" alt="A cozy room with thrifted treasures">
                </div>

            </div>
            
        </main>
        <aside class="right-sidebar">
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">art & projects</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                        <p>🎨 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Digital Art Gallery</a></p>
                        <p>🧶 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Current Crochet WIPs</a></p>
                        <p>🪴 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Spring Garden Planning</a></p>
                        <p>🍄 <a href="#" style="text-decoration: underline; text-decoration-style: dotted;">Mushroom Identification Journal</a></p>
                    </div>
                </div>
            </div>

            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">my stamps</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content other-sites">
                    <div class="other-sites-wrapper">
                        <marquee class="other-sites-scroll-box">
                            <!-- Using your paleo stamp here! -->
                            <a href="#" target="_blank">
                                <img class="button site-btn" src="https://girlbenelohim.faith/Assets/paleo.png" alt="Paleo stamp">
                            </a>
                            <a href="#" target="_blank">
                                <img class="button site-btn" src="https://girlbenelohim.faith/Assets/paleo.png" alt="Paleo stamp">
                            </a>
                            <a href="#" target="_blank">
                                <img class="button site-btn" src="https://girlbenelohim.faith/Assets/paleo.png" alt="Paleo stamp">
                            </a>
                            <a href="#" target="_blank">
                                <img class="button site-btn" src="https://girlbenelohim.faith/Assets/paleo.png" alt="Paleo stamp">
                            </a>
                        </marquee>
                    </div>
                </div>
            </div>
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">link back</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content link-back">
                    <a href="https://poempuppy.neocities.org" target="_blank">
                        <img class="site-btn" src="https://girlbenelohim.faith/Assets/poempuppy-btn.PNG" alt="PoemPuppy Button">
                    </a>
                    <p style="font-size: 15px; text-align: center; margin: 5px 0;">Check out PoemPuppy's page for helpful resources on learning to code static sites!</p>
                    <textarea><a href="https://poempuppy.neocities.org" target="_blank"><img src="https://girlbenelohim.faith/Assets/poempuppy-btn.PNG"></a></textarea>
                </div>
            </div>
            <div class="window">
                <div class="window-title-bar">
                    <span class="window-title">webrings</span>
                    <div class="window-icon-bar">
                        <span class="window-icon">-</span>
                        <span class="window-icon">□</span>
                        <span class="window-icon">x</span>
                    </div>
                </div>
                <div class="window-content webrings">
                    <div class="webring-placeholder-box">
                        this is just a placeholder box. put your cozy webrings here! <br><br> (delete this text later)
                    </div>
                </div>
            </div>
        </aside>
    </div>

    <!-- Script integrated at the bottom -->
    <script>
        // this will control the title for all of your pages
        document.title = "Cottage Garden ♡";

        // music player logic
        const player = document.querySelector(".music-player");
        const audio = player.querySelector(".audio");
        const progressBar = player.querySelector(".progress-bar");
        const progressDot = player.querySelector(".progress-dot");
        const timeDisplay = player.querySelector(".music-time");

        function formatTime(time) {
            if (isNaN(time)) return "0:00";
            const minutes = Math.floor(time / 60);
            const seconds = Math.floor(time % 60).toString().padStart(2, "0");
            return `${minutes}:${seconds}`;
        }

        audio.muted = true;
        audio.play().then(() => {
            audio.muted = false;
        }).catch(() => {
            console.log("Autoplay blocked by browser");
        });

        audio.addEventListener("timeupdate", () => {
            if (!audio.duration) return;

            const progress = audio.currentTime / audio.duration;
            const width = progressBar.clientWidth;

            progressDot.style.left = `${progress * width}px`;

            timeDisplay.textContent =
                `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
        });

        progressBar.addEventListener("click", (e) => {
            const rect = progressBar.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const percent = clickX / rect.width;

            audio.currentTime = percent * audio.duration;
        });

        // DRAGGABLE WINDOWS LOGIC
        let zIndexCounter = 10;
        const windows = document.querySelectorAll('.window');

        windows.forEach(win => {
            const titleBar = win.querySelector('.window-title-bar');
            titleBar.style.cursor = 'grab';
            
            let isDragging = false;
            let startX, startY;
            let currentX = 0, currentY = 0; 
            
            // Ensure z-index layering works when bringing windows to the front
            win.style.position = 'relative';

            function dragStart(e) {
                // Don't trigger drag if clicking the window control buttons
                if (e.target.classList.contains('window-icon')) return;
                
                if (e.type === 'touchstart') {
                    startX = e.touches[0].clientX - currentX;
                    startY = e.touches[0].clientY - currentY;
                } else {
                    startX = e.clientX - currentX;
                    startY = e.clientY - currentY;
                }
                
                isDragging = true;
                win.style.zIndex = ++zIndexCounter; // Bring clicked window to front
                titleBar.style.cursor = 'grabbing';
                document.body.style.userSelect = 'none'; // Prevent text highlighting while dragging
            }

            function drag(e) {
                if (!isDragging) return;
                
                if (e.type === 'touchmove') {
                    e.preventDefault(); // Prevents page scrolling while dragging on mobile
                    currentX = e.touches[0].clientX - startX;
                    currentY = e.touches[0].clientY - startY;
                } else {
                    currentX = e.clientX - startX;
                    currentY = e.clientY - startY;
                }
                
                win.style.transform = `translate(${currentX}px, ${currentY}px)`;
            }

            function dragEnd() {
                isDragging = false;
                titleBar.style.cursor = 'grab';
                document.body.style.userSelect = ''; // Restore text selection
            }

            // Mouse events
            titleBar.addEventListener('mousedown', dragStart);
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', dragEnd);
            
            // Touch events for mobile
            titleBar.addEventListener('touchstart', dragStart, { passive: false });
            document.addEventListener('touchmove', drag, { passive: false });
            document.addEventListener('touchend', dragEnd);
        });

        // CAROUSEL LOGIC
        // Add your image links to this list! Just wrap them in quotes and separate with commas.
        const carouselImages = [
            "https://girlbenelohim.faith/Assets/Downloadables/Thrift%20Store%20Treasures%20-%20PNG%20(39).png",
            "https://girlbenelohim.faith/Assets/000fawnbyartwork.gif",
            "https://girlbenelohim.faith/Assets/Downloadables/Thrift%20Store%20Treasures%20-%20PNG%20(34).png"
        ];
        
        let currentImgIndex = 0;
        const carouselImgElement = document.getElementById('carouselImg');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        function updateCarousel() {
            carouselImgElement.src = carouselImages[currentImgIndex];
        }

        prevBtn.addEventListener('click', () => {
            currentImgIndex = (currentImgIndex - 1 + carouselImages.length) % carouselImages.length;
            updateCarousel();
        });

        nextBtn.addEventListener('click', () => {
            currentImgIndex = (currentImgIndex + 1) % carouselImages.length;
            updateCarousel();
        });
    </script>
</body>
</html>

← back to the parlor

Layouts & Templates

Rules of Use

Ethereal Medieval Journal

Gardener's Digital Diary

Cottage Garden Windows