probably gonna make more templates for people to use so feel free to (browse) templates

RULES

okay so please keep the credits, make the credits VISIBLE V-I-S-I-B-L-E and don't take credit of the template >:c
only take codes from my templates not my personal roomie it's not a template unless i labelled it to be
Please save the imagwa to your computer and avoid hotlinking

NEEDY STREAMER OVERLOAD

Preview here
Code here

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
<style>
body {

background: url(https://i.pinimg.com/originals/73/03/c3/7303c3b7a4f9d6d8101b61e59bc0e737.png);
    background-repeat: repeat;
  background-position: 0 0;
  animation: Bg 1900s linear infinite;
     text-align: center;
      font-family: 'basiic';
  color: #7d79b5;
}
@keyframes Bg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 0;
  }

}
.layout {
  width: 780px;
  height: 600px;
  display: flex;
  font-family: 'basiic';
  color: #4a454f;

margin: auto;
}
 @font-face {
  font-family: 'basiic';
  src: url(https://dl.dropbox.com/scl/fi/agz3u2z7exe3m6tgeuev4/basiic.ttf?rlkey=xn40nrafuylad5yciu1s8cieb&st=mritvdvs&dl=0);
 }
#header {
 background: white;
 border:  1px groove white;
 width: 870px;
 height: 220px;
 border-radius: 20px;
 object-fit: contain;
 padding: 5;
 align-content: center;
box-shadow: 0px 0px 5px 1px lightgrey;
}

#header-img {
   background: url('/template.jpg') 0 -120px;
   height: 200px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   width:760px;
   background-size: cover;
   opacity: 0.4;
 }
  .navigation {
     background: white;
 border:  1px groove white;
 width: 775px;
 height: 15px;
 border-radius: 5px;
 padding: 4px;
  position: absolute;
  transform: translate(0%, 0%);
  text-align: center;
  top: 240px;
  box-shadow: 0px 0px 5px 1px lightgrey;

}
#about-page {
    background: white;
 border:  1px groove white;
 width: 500px;
 height: 405px;
  border-radius: 5px;
 padding: 4px;
 float: right;
 margin-top: 10px;
box-shadow: 0px 0px 5px 1px lightgrey;

}
#about {
 width: 485px;
   font-family: 'basiic';
  color: #7d79b5;
 height: 390px;
 text-align: justify;
 padding: 4px;
 border: 3px dashed #fdedff;
 background: white;
}

#extra {
  width: 250px;
  height: 420px;
   float: left;
 margin-top: 10px;
    font-family: 'basiic';
  color: #7d79b5;
 height: 405px;
   border-radius: 5px;
 padding: 4px;
box-shadow: 0px 0px 5px 1px lightgrey;
    background: white;
 border:  1px groove white;

}
#kangel {
width: 960px;
float: left;
margin-top: -51%;
margin-left: -25%;

}
#amechan {
  width: 350px;
float: right;
margin-top: -45%;
margin-left: -15%;

}
#draggable-bg {
  width: 350px;
  height: 240px;
 position: absolute;
  z-index: 9;
  padding: 3;
  border: 1.6px solid #7d79b5;
  background: #d9fff9;
}
#draggable-bg1 {
  width: 350px;
  height: 250px;
 position: absolute;
  z-index: 9;
  padding: 3;
  border: 1.6px solid #7d79b5;
  background: #d9fff9;
}
#draggable-header {
  padding: 6px;
    cursor: move;
  z-index: 10;
  height: 18px;
  width: 325px;
  font-family: 'basiic';
  color: #7d79b5;
  font-weight: 300;
  margin: auto;
  background: #fdedff;
    border: 1.6px solid #7d79b5;
}

#draggable-header1 {
  padding: 6px;
    cursor: move;
  z-index: 10;
  height: 18px;
  width: 325px;
  font-family: 'basiic';
  color: #7d79b5;
  font-weight: 300;
  margin: auto;
  background: #fdedff;
    border: 1.6px solid #7d79b5;
}
#header-holder {
 margin-top: 5px;
}
.minimize {
    padding: 4px;
    text-align: center;
      font-family: 'basiic';
  color: #7d79b5;
  font-weight: regular;
  float: right;
  font-size: 18px;
  height: 15px;
  width: 20px;
  margin-top: -3px;
  text-decoration: none;
  border: 1.6px solid #7d79b5;
  background:#fdedff;
}
.refresh {
    padding: 4px;
    text-align: center;
      font-family: 'basiic';
  color: #7d79b5;
  font-weight: regular;
  float: right;
  font-size: 18px;
  height: 15px;
  width: 20px;
  margin-top: -3px;
  text-decoration: none;
  border: 1.6px solid #7d79b5;
  background:#fdedff;
}
.close {
    padding: 4px;
    text-align: center;
      font-family: 'basiic';
  color: #7d79b5;
  font-weight: regular;
  float: right;
  font-size: 18px;
  height: 15px;
  width: 20px;
  margin-top: -3px;
  text-decoration: none;
  border: 1.6px solid #7d79b5;
  background:#fdedff;
}
#img {
  width: 340px;
  margin-top: 5px;
  border: 1.6px solid #7d79b5;
}
#extrabox {
  width: 775px;
  height: 180px;
  border-radius: 0  0 20px 20px;
  background: white;
 float: right;
 margin-top: 10px;

}

</style>
<div class="layout">
<div id="header"><div id="header-img"></div></div>
<div class="navigation"><a href="/index.html">Home</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a>
<div id="about-page"><div id="about"><img src="https://i.pinimg.com/736x/1a/97/7d/1a977df7243a39fa3da11f4004c36298.jpg" style="width:120px;float:left;opacity:0.6;">Heiyo There This is the live preview of "Needy streamer overload" template by bianca ^o^ <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>Nisl vehicula et pellentesque habitant convallis diam tincidunt tortor integer. Nascetur nunc duis pulvinar lacinia; curae ac. Condimentum sem donec inceptos eu tempor et. Viverra natoque potenti est sed feugiat? Ut efficitur purus sagittis diam facilisi odio condimentum. Ullamcorper laoreet parturient vivamus nibh fusce dictum dictumst congue. Quisque hac eros vel penatibus placerat parturient eget pellentesque? Himenaeos ridiculus id in aliquam himenaeos quisque nisl auctor semper.</div></div>
<div id="extra">uhjhhhh put whatever you'd like</div>
<br>
<div id="extrabox">put somethingnggj</div>
Template by <a href="https://cremerie.neocities.org">Cremerie</a>
</div>

</div>
<img src="nso.png" id="kangel" draggable="false"><img src="amechan.png" id="amechan" draggable="false">
<div id="draggable-bg1">
<div id="header-holder">
<div id="draggable-header1">Lorem Ipsum <a href="" class="minimize">⟳</a><a href="" class="refresh">✕</a><a href="" class="close">-</a></div></div>
<center><img src="theme.png" id="img"></center>
</div>

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header1")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header1").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>