BUTCHER'S VEIN

<!-- BUTCHER'S VEIN - neocities template by deoxys.space -->

<style>
  html {
    height: 100%;
    width: 100%;
    font-family:arial;
    background-color: #fff10c;
    --accentcolor:#fe383a;
    --accentcolordark: #940101;
    --accentcolor2: #fff10c;
    --bordercolor:black;
    --bgcolor:whitesmoke;
    --gapsize: 10px;
  }

  @font-face {
    font-family: skateboarding;
    src: url(https://file.garden/ZZ2PUl9MPilKgIvB/The%20Skateboarding.ttf);
  }

  .maindiv {
    width:700px;
    margin:auto;
  }

  .header {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    height:130px;
    background-color:var(--bgcolor);
    background-image:url(https://file.garden/ZZ2PUl9MPilKgIvB/xiyi.png);
    background-size:cover;
    background-position:center;
    margin-bottom:var(--gapsize);
  }

  .bar {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    margin-bottom: var(--gapsize);
    text-align:center;
    padding-top:7px;
    padding-bottom:7px;
  }

  h3 {
    margin:0px;
  }

  p {
    margin:0px;
  }

  h1 {
    font-family:skateboarding;
    font-size:100px;
    margin:0px;
    margin-left:10px;
    position:relative;
    top:-10px;
    filter: drop-shadow(3px 4px 0px var(--accentcolor));
  }

  .row {
    display:flex;
    gap:var(--gapsize);
    height:300px;
  }

  .navigation {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    text-align:center;
    box-sizing: border-box;
    width:25%;
    height:300px;
  }

  .titlebar {
    background-color: var(--accentcolor);
    border-bottom:2px solid var(--accentcolordark);
    padding:4px;
  }

  .buttonholder {
    padding-left:10px;
    padding-right:10px;
    overflow-y:auto;
    height:263px;
  }

  .navigationbutton {
    margin:5px;
    padding:5px;
    border:2px solid var(--bordercolor);
    background-color: var(--accentcolor2);
  }

  h4 {
    margin:0px;
  }

  a {
    color: var(--accentcolor);
  }

  .box1 {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    box-sizing: border-box;
    padding:10px;
    width:100%;
    height:70%;
    overflow-y:auto;
  }

  .bigtext {
    font-size:large;
    font-weight:bold;
  }

  strong {
    color:var(--accentcolordark);
  }

  .box2 {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    box-sizing: border-box;
    padding:10px;
    width:100%;
    height:26.65%;
  }

  .column {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }

  .footer {
    box-shadow: 6px 6px 0px -1px var(--accentcolor);
    border:2px solid var(--accentcolordark);
    outline:2px solid var(--bordercolor);
    background-color:var(--bgcolor);
    margin-top:var(--gapsize);
    box-sizing: border-box;
    padding:10px;
    width:100%;
    text-align: center;
  }
</style>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>BUTCHER'S VEIN</title>
</head>

<body>
  <div class="maindiv">
    <div class="header">
      <h1>SITE TITLE</h1>
    </div>
    <!-- you can put announcements here, or scrolling text by putting the text inbetween the <marquee> tag-->
    <div class="bar">
      <h3>text here... maybe an announcement or a subtitle?</h3>
    </div>
    <div class="row">
      <div class="navigation">
        <div class="titlebar">
          <h3>NAVIGATION</h3>
        </div>
        <div class="buttonholder">
          <!--you can add however many links you like. you can remove any links youre not using, too.-->
          <div class="navigationbutton">
            <h4><a href="link" style="color:var(--bordercolor);">LINK 1</a></h4>
          </div>
          <div class="navigationbutton">
            <h4><a href="link" style="color:var(--bordercolor);">LINK 2</a></h4>
          </div>
          <div class="navigationbutton">
            <h4><a href="link" style="color:var(--bordercolor);">LINK 3</a></h4>
          </div>
          <div class="navigationbutton">
            <h4><a href="link" style="color:var(--bordercolor);">LINK 4</a></h4>
          </div>
          <div class="navigationbutton">
            <h4><a href="link" style="color:var(--bordercolor);">LINK 5</a></h4>
          </div>
          <div class="navigationbutton">
            <h4><a href="link" style="color:var(--bordercolor);">ADD HOWEVER MANY LINKS YOU WANT! THIS BOX SCROLLS</a></h4>
          </div>
        </div>
      </div>
      <div class="column" style="width:75%">
        <div class="box1">
          <span class="bigtext">this text is bigger. and its even bold!</span> put anything you want here. talk about your site if you want. i dont know. im not your mom.
          <br><strong>bold text looks like this.</strong> <a href="link">links look like this.</a>
          <br>this box scrolls, by the way.
        </div>
        <div class="box2">
          <!-- remove the <marquee> tag to stop the scrolling -->
          <marquee behavior="alternate">
            <img src="https://file.garden/ZZ2PUl9MPilKgIvB/85dae5a2.jpg"/>
            <img src="https://file.garden/ZZ2PUl9MPilKgIvB/3e9a21b1.png"/>
            <img src="https://file.garden/ZZ2PUl9MPilKgIvB/c4b47f26.png"/>
            <img src="https://file.garden/ZZ2PUl9MPilKgIvB/cb1f10c3.jpg"/>
            <img src="https://file.garden/ZZ2PUl9MPilKgIvB/fb1ba12e.png"/>
            <img src="https://file.garden/ZZ2PUl9MPilKgIvB/a7c2b901.gif"/>
          </marquee>
        </div>
      </div>
    </div>
    <div class="footer">
      <!-- DONT REMOVE CREDIT! well, you can if you put it somewhere else- it doesnt have to be on the main page, just somewhere somewhat obvious. dont remove art/inspiration credit if using the template without any changes. if you change the header, you can remove it.-->
      <p>template by <a href="https://deoxys.space/">deoxys.space</a> - inspired by <a href="https://youtu.be/vjBFftpQxxM?list=RDMM">BUTCHER VANITY</a></p>
    </div>
  </div>
</body>

</html>