Window Box Homepage

tab 1

the buttons above this window control the content shown here

tab 2

about me

Tab 3

stuff

Tab 4

stuff

Tab 5

stuff

code for this layout template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Box Homepage</title>
<style>
  body {
    background: black;
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 50px;
    background-image: url('https://i.ibb.co/SSTscmQ/leopardpat.png');
  }

/* Window-box reusable style */
  .window-box {
    background: black;
    padding: 20px;
    border: 64px solid transparent;
    border-image-source: url('https://i.ibb.co/Cps9sY2L/Windowpink-2.png');
    border-image-slice: 128;
    border-image-repeat: round;
    border-image-width: 64px;
    box-sizing: border-box;
  }

/* Layout containers */
  .layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .main {
    flex: 2;
    min-width: 500px;
  }
  .sidebar {
    flex: 1;
    min-width: 100px;
   
  }

/* Tab buttons row */
  .tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
  }
  
  .tab-btn {
    width: 44px;
    height: 44px;
    background-image: url('https://i.ibb.co/yFS8YkyL/tab-buttons.png');
    background-size: cover;
    cursor: pointer;
    transition: filter 0.2s;
  }
  .tab-btn.active {
    filter: brightness(0.5);
  }

/* Tab content areas */
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }
  /*end tabs */
  
.window-box {
  background: black;
  padding: 20px;
  border: 64px solid transparent;
  border-image-source: url('https://i.ibb.co/Cps9sY2L/Windowpink-2.png');
  border-image-slice: 128;
  border-image-repeat: round;
  border-image-width: 64px;
  box-sizing: border-box;
  box-shadow: 0 0 30px rgba(0, 0, 0, 1), 0 0 60px rgba(0, 0, 0, 0.8); /* deep drop shadow */
  }
  /* Links */
  a{
    color: deeppink;}
</style>
</head>
<body>

<div class="layout">
  
  <div class="main">
    
    <div class="tab-buttons">
      <div class="tab-btn active" data-tab="home" title="Home"></div>
      <div class="tab-btn" data-tab="about" title="About"></div>
      <div class="tab-btn" data-tab="contact" title="Contact"></div>
      <div class="tab-btn" data-tab="tab4" title="About"></div>
      <div class="tab-btn" data-tab="tab5" title="Contact"></div>
    </div>

<div class="window-box">
      <div id="home" class="tab-content active">
        <h2>tab 1</h2>
        <p>the buttons above this window control the content shown here</p>
      </div>
      <div id="about" class="tab-content">
        <h2>tab 2</h2>
        <p>about me</p>
      </div>
      <div id="contact" class="tab-content">
        <h2>Tab 3</h2>
        <p>stuff</p>
      </div>
      <div id="tab4" class="tab-content">
        <h2>Tab 4</h2>
        <p>stuff</p>
      </div>
      <div id="tab5" class="tab-content">
        <h2>Tab 5</h2>
        <p>stuff</p>
      </div>
    </div>
  </div>

<div class="window-box sidebar">
    <h2>Sidebar</h2>
    <ul>
      <li><a href="beelzebabe.neocities.org ">website</a></li>
      <li>Widgets</li>
      <li>whatever</li>
    </ul>
  </div>
  
</div>
  <center>
<div class="window-box" style="margin-top: 35px; max-width: 500px;">
  <img src="https://i.ibb.co/gbF15Y1W/Tumblr-l-233135640372210.gif" alt="Tumblr-l-233135640372210" border="0">
  <p> Hi , words and junk </p>
    </div></center>
    

   
  <div class="window-box" style="margin-top: 35px;"><center>
    <img src="https://i.ibb.co/2LYWpRV/1000082366.png" alt="1000082366" border="0"></center>
  </div>

buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      // Update active button
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

// Show matching content
      contents.forEach(c => c.classList.remove('active'));
      document.getElementById(btn.dataset.tab).classList.add('active');
    });
  });
</script>

</body>
</html>