<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>

<a class="itsme" href="https://codepen.io/Bupeldox" target="_blanck">I have some other cool stuff @Bupeldox!</a>
hr {
  position: absolute;
  top: 50%;
  width: 10px;
  left: -0.5vw;
  transform-origin: 0 0;
}

@for $i from 0 through 99 {
  hr:nth-child(#{$i}) {
    @if $i%5==1 {
      @if $i%10==1 {
        width: 25px;
      } @else {
        width: 15px;
      }
    }
    transform: translateX(#{100 * ($i - 1)/98}vw) rotate(90deg);
  }
}
hr:nth-child(100) {
  width: 120%;
  transform: translateY(-5px);
}
body {
  overflow: hidden;
  background-color: hsl(39deg, 52%, 12%); //autumnal background 🍁
  margin: 0px;
}

.itsme {
  position: fixed;
  bottom: 0;
  height: 1;
  font-family: sans-serif;
  color: #fffc;
  text-decoration: underline;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: hsl(31deg, 43%, 22%);
  padding: 10px 10px 10px 10px;
  font-size: 14px;
  left: calc(50% - 139px);
}
View Compiled
//pls dont use this as a ruler XD
//Kinda boring i know but the first thing that came to my head.
//It would be greatly appreciate it if you looked at my profile, theres some stuff im proud of on there :)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.