How STAGgering [Article]

<!--
 ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
   Thank you for using my code!
 ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝
Rules to Follow:

✶ Do not EVER delete or remove the credits of the coder or claim this code as your own.
✶ Do not redistribute this code, no matter how much you edited it as a base or otherwise!
✶ If you need any help in fixing codes, contact me on Discord (Kawaii-lau#4770).
✶ If you like to share this code, send to your friends the link of my blog, https://kawaii-lau.tumblr.com , and support me!

If you like a custom code, check out my blog to see if requests are open!
XOXO, Lauren.
 ╔═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╗
   2021 © Coding by Kawaii-Lau
 ╚═══ -ˋˏ *.·:·.⟐.·:·.* ˎˊ- ═══╝ -->

<!-- CUSTOM FONT -->
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<style>
.scrollBorder1 {
  width:510px; height:100px;
  margin:0px auto; display:block;
  position:relative; z-index:5;
  transform:rotateX(180deg)
}

.scrollBorder2 {
  width:510px; height:100px;
  margin:0px auto; display:block;
  position:relative; z-index:5
}

.scrollBg {
  width:450px; min-height:1000px;
  margin:-30px auto;
  background-color:beige;
  background-image:url(https://i.imgur.com/djPYL0l.jpg);
  background-size:100%;
  padding:10px;
  box-sizing:border-box;
  box-shadow:0px 0px 5px black;
  text-align:justify;
}

.scrollKlein {
  background-image:url(https://i.imgur.com/djPYL0l.jpg);
  width:120px; min-height:300px;
  float:right;
  margin:30px -50px 0px 20px;
  box-shadow:1px 1px 5px black;
  padding:0px 10px;
  box-sizing:border-box;
  font-size:12px;
  text-align:center;
}

.waxPin {
  border-radius:100%;
  width:10px; height:10px;
  background-color:#941f1f;
  margin:-5px auto 5px;
  box-shadow:1px 1px 5px black;
  border:1px groove #941f1f
}

.waxSeal {
  border-radius:100%;
  width:100px; height:100px;
  background-color:#41873e;
  margin:20px 0px 5px -40px;
  box-shadow:-1px 1px 5px black;
  border:5px groove #267324;
  float:left; transform:rotateY(20deg);
}

.sealIcon {
  width:90%; height:90%;
  display:block; margin:5px auto;
}

.credits {
  text-align:center;
  margin:-50px auto 50px;
  color:black;
  font-size:14px;
  font-family:'Patrick Hand', cursive;
  position:relative;
  z-index:10;
}
.credits a {
  text-decoration:none; color:black;
  transition:1s ease;
}
.credits a:hover {
  color:#134f11;
}
</style>

<img src="https://i.imgur.com/Enn9N22.png" class="scrollBorder1"/>
<div class="scrollBg" style="font-family:'Cambria', serif;"><!-- CHANGE DEFAULT FONT FAMILY HERE-->

    <div class="scrollKlein">
      <div class="waxPin"></div>
      <h3>Advertisements here <!-- Or the author if you want --> </h3>
      <p>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.</p>
    </div>

    <div class="waxSeal">
      <img src="https://i.imgur.com/EyRTHcT.png" class="sealIcon"/>
    </div>

    <article class="articleCSS">
      <!-- HEADER -->
      <h1 style="font-family:'Patrick Hand', cursive; font-size:48px; margin:20px 0px; text-align:center; line-height:50px;">How STAGgering</h1>
      <p style="margin:0px; text-align:right;"><b>by Author Name</b></p>
    <br>
      <img src="https://i.pinimg.com/originals/dc/da/0b/dcda0bf76d58f537fc3b320629949707.gif" style="width:300px; margin:0px auto; display:block;"/>
    <p>Hello 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>
      Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque adipiscing commodo elit at imperdiet. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Nec feugiat in fermentum posuere urna nec tincidunt praesent. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Quam id leo in vitae turpis. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Libero volutpat sed cras ornare arcu dui. Enim diam vulputate ut pharetra sit amet aliquam. Scelerisque eu ultrices vitae auctor eu augue.
      <br><br>
      At erat pellentesque adipiscing commodo. Ornare quam viverra orci sagittis. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Enim sit amet venenatis urna cursus eget nunc scelerisque. Adipiscing elit ut aliquam purus sit amet luctus. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Turpis egestas maecenas pharetra convallis posuere morbi.
    </p>
    </article>

</div>
<img src="https://i.imgur.com/Enn9N22.png" class="scrollBorder2"/>
<p class="credits">2021 &copy;  <a href="https://kawaii-lau.tumblr.com/" target="_blank"><b>Kawaii-Lau</b></a></p>