Scorpio

<style>

  .backgroundS {
    width:100%;
    display:flex;
  }

  .cardS {
    width:46%;
    margin:2%;
    text-align:center;
    background-color:#EDEDED;
    padding:15px;
    border-radius:150% 150% 0% 0%;
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:3px 7px 10px 1px rgba(0,0,0,0.5);
  }

  .bimglS {
    width:120px;
    margin:auto;
    padding:0 4px 9px 0;
    background:linear-gradient(to right bottom,transparent 70%,#806060 70%);
  }

  .imgleftS {
    width:100px;
    height:100px;
    margin:auto;
    border-radius:50% 50% 0% 50%;
    border: 5px solid #2C030B;
  }

  .bimgrS {
    width:120px;
    margin:auto;
    padding:0 0 9px 4px;
    background:linear-gradient(to left bottom,transparent 70%,#806060 70%);
  }

  .imgrightS {
    width:100px;
    height:100px;
    margin:auto;
    border-radius:50% 50% 50% 0%;
    border: 5px solid #2C030B;
  }

  .nameS {
    margin:5px;
    font-size:45px;
    color:#2C030B;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5);
    font-family:'Clicker Script';
  }

  .nicknameS {
    width:70%;
    margin:auto;
    padding-bottom:3px;
    background-color:#806060;
    color:#EDEDED;
    text-shadow:1px 1px 1px rgba(255,255,255,0.5);
    font-size:20px;
    font-family:'Pacifico';
  }

  .dateS {
    margin:5px;
    font-size:12px;
    font-family:century gothic,helvetica,arial,sans-serif;
    color:#303030;
  }

</style>

<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=Pacifico&display=swap" rel="stylesheet">

<!--EACH LINE-->
<div class="backgroundS">
  <!--EACH CARD LEFT-->
  <div class="cardS">
    <div class="bimglS">
      <div class="imgleftS" style="background:url('https://img.wattpad.com/39adb292bbafabcd4c6215eb05adfdd05885ef39/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f526737627431424f6b476a4444513d3d2d3736303438313230322e313562326463363836326564306462633238333830343835383337352e676966')center; background-size:cover;"></div>
    </div>
    <div class="nameS">An amazing name</div>
    <div class="nicknameS">An amazing nickname</div>
    <div class="dateS">XX month 20XX - XX month 20XX</div>
  </div>
  <!--EACH CARD RIGHT-->
  <div class="cardS">
    <div class="bimgrS">
      <div class="imgrightS" style="background:url('https://i.pinimg.com/originals/58/99/4c/58994c39a3eba06b25b4ff5b85bae351.gif')center; background-size:cover;"></div>
    </div>
    <div class="nameS">An amazing name</div>
    <div class="nicknameS">An amazing nickname</div>
    <div class="dateS">XX month 20XX - XX month 20XX</div>
  </div>
</div>

<!--EACH LINE-->
<div class="backgroundS">
  <!--EACH CARD LEFT-->
  <div class="cardS">
    <div class="bimglS">
      <div class="imgleftS" style="background:url('https://media.tenor.com/images/12a85597dcd5c977d0470e48c186ec15/tenor.gif')center; background-size:cover;"></div>
    </div>
    <div class="nameS">An amazing name</div>
    <div class="nicknameS">An amazing nickname</div>
    <div class="dateS">XX month 20XX - XX month 20XX</div>
  </div>
  <!--EACH CARD RIGHT-->
  <div class="cardS">
    <div class="bimgrS">
      <div class="imgrightS" style="background:url('https://64.media.tumblr.com/92a4a99c535d7c105f94ce7ecda18009/tumblr_n6hyg3HPdJ1rskx02o5_r2_250.gif')center; background-size:cover;"></div>
    </div>
    <div class="nameS">An amazing name</div>
    <div class="nicknameS">An amazing nickname</div>
    <div class="dateS">XX month 20XX - XX month 20XX</div>
  </div>
</div>


<!-- CREDITS, DO NOT TOUCH-->
<div style="margin:0 auto;text-align:center;"><a href="https://aliyahscreations.tumblr.com/" style="font-size:10px;letter-spacing:2px;color:#222;text-decoration:none; font-family:century gothic,helvetica,arial,sans-serif;font-size:12px;line-height:1.3;">© Code by Aliyah</a></div>