Binder Code Copy

/* BINDER CSS */
.tabcontent {display: none;}

/* Wrapper and background for the whole widget */
.pixelbinder {
  width: fit-content;
  position: relative;
  padding: 10px;
  background-image: url("Graphics/dark-stained-timber-13504-in-architextures.jpg");
  margin-left: auto;
  margin-right: auto;
  border: 2px solid black;
  text-align: center;
  image-rendering: pixelated;
}

/* Setting the binder section in place */
.pixelbinderbg {
  width: 181px;
  height: 100px;
  position: relative;
  margin: 10px 0 10px 0;
  text-align: left;
}

/* Setting the images in place */
.tabcontent img{position: absolute;}
#binderbackground{z-index:1}
#page1, #page2{z-index:2}
#page1 {left: 17px;top: 9px;} /* For the left pixelbill */
#page2 {left: 110px;top: 9px;} /*For the right pixelbill */

/* Image opacity on hover, you can change this to be whatever you want them to do */
.pixelbinder a img:hover{
opacity: .5;
transition: .5s;
}

/* Styling the buttons */
.pixelbinder button{
  background-color: #fff;
  border: none;
  color: #444951;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Garamond', serif;
  font-size: 16px;
}

/* Buttons on hover */
.pixelbinder button:hover{
  background-color: #FFEB3B;
  cursor: pointer;
}
/* BINDER CSS */

<div class="pixelbinder">
  <a href="https://pixelbill.neocities.org/"><img id="pixelbutton" src="Pixelbills/pixelbill_site_button2.png"></a>
  
  <div id="Tab One" class="tabcontent">
    <div class="pixelbinderbg">
      <img id="binderbackground" src="Graphics/pixelbillbinderclosed-2.png">
    </div>
      <a onclick="openCity(event, 'Tab Two')"><button>open ↩</button></a>
  </div>
  
  <div id="Tab Two" class="tabcontent">
    <div class="pixelbinderbg">
    <img id="binderbackground" src="Graphics/pixelbillbinderbackground.png">
      <a href="https://semiroboticperson.neocities.org/" target="_blank" title="Avenue Q - made by semiroboticperson">
        <img id="page1" src="Pixelbills/avenueqpixelbill-semiroboticperson.png">
      </a>
      <a href="https://six-letter-notion.neocities.org/" target="_blank">
        <img id="page2" src="Pixelbills/Pixelbill_Beowulf.png" title="Beowulf - a Thousand Years of Baggage - made by six-letter-notion">
      </a>  
    </div>
      <a onclick="openCity(event, 'Tab One')" id="defaultOpen"><button>↪ close</button></a>
      <a onclick="openCity(event, 'Tab Three')"><button>next ↩</button></a>
  </div>
  
  <div id="Tab Three" class="tabcontent">
    <div class="pixelbinderbg">
    <img id="binderbackground" src="Graphics/pixelbillbinderbackground.png">
      <a href="https://six-letter-notion.neocities.org/" target="_blank">
        <img id="page1" src="Pixelbills/pixelbill_cats.png" title="Cats - made by six-letter-notion">
      </a>
      <a href="https://six-letter-notion.neocities.org/" target="_blank" title="Company - made by six-letter-notion">
        <img id="page2" src="Pixelbills/pixelbill-company-1-six letter notion.png">
      </a>
    </div>
      <a onclick="openCity(event, 'Tab Two')"><button>↪ previous</button></a>
      <a onclick="openCity(event, 'Tab Four')"><button>next ↩</button></a>
  </div>
  
  <div id="Tab Four" class="tabcontent">
    <div class="pixelbinderbg">
    <img id="binderbackground" src="Graphics/pixelbillbinderbackground.png">
      <a href="https://six-letter-notion.neocities.org/" target="_blank">
        <img id="page1" src="Pixelbills/Pixelbill_DontStopme.png" title="Don't Stop Me - made by six-letter-notion">
      </a>
      <a href="https://hillhouse.neocities.org/cliques#pixelbill" target="_blank">
        <img id="page2" src="Pixelbills/pixelbill-ghostquartet-hillhouse.png" title="Ghost Quartet - made by hillhouse">
      </a>
    </div>
      <a onclick="openCity(event, 'Tab Three')"><button>↪ previous</button></a>
      <a onclick="openCity(event, 'Tab One')"><button>close ↩</button></a>
  </div>
</div>